/* ============================================================
   BK LIFESTYLE GLOBAL BRAND THEME
   ============================================================ */

:root {
    --itr-primary: #10A7A6;
    --itr-primary-rgb: 16, 167, 166;

    --itr-deep-teal: #007B7B;
    --itr-deep-teal-rgb: 0, 123, 123;

    --itr-black: #020D0F;
    --itr-black-rgb: 2, 13, 15;

    --itr-white: #FFFFFF;
}


/* ============================================================
   GLOBAL BACKGROUND
   ============================================================ */

html,
body {
    background-color: var(--itr-black) !important;
}

body {
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(var(--itr-primary-rgb), 0.14),
            transparent 32%
        ),
        var(--itr-black) !important;

    color: var(--itr-white);
}


/* ============================================================
   MAIN BK LIFESTYLE GRADIENT
   Replaces old purple/blue gradient
   ============================================================ */

.gradient-bg {
    background:
        linear-gradient(
            135deg,
            var(--itr-primary) 0%,
            var(--itr-deep-teal) 100%
        ) !important;
}


/* ============================================================
   STANDARD AVATAR / HIGHLIGHT RINGS
   ============================================================ */

.avatar-ring-standard,
.highlight-ring {
    background:
        linear-gradient(
            135deg,
            var(--itr-primary),
            var(--itr-deep-teal)
        ) !important;
}


/* ============================================================
   PROGRESS BARS
   ============================================================ */

.progress-fill {
    background:
        linear-gradient(
            90deg,
            var(--itr-primary),
            var(--itr-deep-teal)
        ) !important;
}


/* ============================================================
   OUTGOING CHAT MESSAGE
   ============================================================ */

.message-outgoing {
    background:
        linear-gradient(
            135deg,
            var(--itr-primary),
            var(--itr-deep-teal)
        ) !important;

    color: var(--itr-white) !important;

    box-shadow:
        0 8px 22px
        rgba(var(--itr-primary-rgb), 0.14) !important;
}


/* ============================================================
   UNREAD BADGES
   ============================================================ */

.unread-badge {
    background:
        linear-gradient(
            135deg,
            var(--itr-primary),
            var(--itr-deep-teal)
        ) !important;

    color: var(--itr-white) !important;
}


/* ============================================================
   UNREAD CONVERSATION
   ============================================================ */

.chat-item.unread {
    background:
        linear-gradient(
            90deg,
            rgba(var(--itr-primary-rgb), 0.09),
            rgba(var(--itr-primary-rgb), 0.025)
        ) !important;
}

.chat-item.unread::before {
    background:
        linear-gradient(
            to bottom,
            var(--itr-primary),
            var(--itr-deep-teal)
        ) !important;
}


/* ============================================================
   BRAND FOCUS STATES
   ============================================================ */

.search-shell:focus-within,
.composer-field:focus-within {
    border-color:
        rgba(var(--itr-primary-rgb), 0.32) !important;

    box-shadow:
        0 0 0 3px
        rgba(var(--itr-primary-rgb), 0.07) !important;
}


/* ============================================================
   COMMON OLD TAILWIND BLUE / INDIGO TEXT
   ============================================================ */

.text-blue-300,
.text-blue-400,
.text-blue-500,
.text-indigo-300,
.text-indigo-400,
.text-indigo-500 {
    color: var(--itr-primary) !important;
}


/* ============================================================
   COMMON OLD BLUE / INDIGO BACKGROUNDS
   ============================================================ */

.bg-blue-500,
.bg-indigo-500 {
    background-color: var(--itr-primary) !important;
}


/* ============================================================
   COMMON BLUE / INDIGO TRANSPARENT BACKGROUNDS
   ============================================================ */

.bg-blue-500\/10,
.bg-indigo-500\/10,
.bg-blue-500\/20,
.bg-indigo-500\/20 {
    background-color:
        rgba(var(--itr-primary-rgb), 0.10) !important;
}


/* ============================================================
   BRAND BORDERS
   ============================================================ */

.border-blue-400,
.border-blue-500,
.border-indigo-400,
.border-indigo-500 {
    border-color: var(--itr-primary) !important;
}


/* ============================================================
   LINKS / BRAND ELEMENTS
   ============================================================ */

.itr-primary {
    color: var(--itr-primary) !important;
}

.itr-bg-primary {
    background-color: var(--itr-primary) !important;
}

.itr-bg-deep {
    background-color: var(--itr-deep-teal) !important;
}

.itr-border-primary {
    border-color: var(--itr-primary) !important;
}


/* ============================================================
   SELECTION
   ============================================================ */

::selection {
    background: var(--itr-primary);
    color: var(--itr-white);
}

/* ============================================================
   BK LIFESTYLE BOTTOM NAVIGATION
   ============================================================ */

html body .bottom-nav-blur {
    background: #020D0F !important;
    background-color: #020D0F !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    opacity: 1 !important;

    border-top:
        1px solid rgba(255,255,255,.08) !important;
}


/* NAV ITEMS */

.bottom-nav-blur a {
    color:
        rgba(255, 255, 255, 0.45) !important;
}


/* NAV ITEM HOVER */

.bottom-nav-blur a:hover {
    color:
        var(--itr-primary) !important;
}


/* SVG ICONS */

.bottom-nav-blur a svg {
    color:
        inherit !important;

    stroke:
        currentColor !important;
}


/* OPTIONAL ACTIVE NAV ITEM */

.bottom-nav-blur a.active {
    color:
        var(--itr-primary) !important;
}