/*
|--------------------------------------------------------------------------
| RealDeen Global Drawer V3
|--------------------------------------------------------------------------
| Restores the earlier vector-led RealDeen navigation character,
| with modern spacing, social links and premium depth.
|--------------------------------------------------------------------------
*/


.rdg-drawer-v3 {
    width: min(420px, 100vw);

    padding:
        0 18px 28px;

    color:
        #eaf4f5;

    background:
        radial-gradient(
            circle at 14% 2%,
            rgba(71, 190, 198, .10),
            transparent 28rem
        ),
        radial-gradient(
            circle at 110% 30%,
            rgba(59, 123, 139, .08),
            transparent 25rem
        ),
        linear-gradient(
            180deg,
            #17282f 0%,
            #14252c 100%
        );

    border-right:
        1px solid rgba(104, 194, 201, .15);

    box-shadow:
        24px 0 65px rgba(0,0,0,.30);

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(109,198,204,.28)
        transparent;
}


.rdg-drawer-v3::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        .25;

    background-image:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.010) 0,
            rgba(255,255,255,.010) 1px,
            transparent 1px,
            transparent 48px
        );
}


.rdg-drawer-v3 > * {
    position:
        relative;

    z-index:
        1;
}


/* =========================================================
   DRAWER HEADER
   ========================================================= */

.rdg-drawer-v3 .rdg-drawer-head {
    min-height:
        96px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        8px 5px 0;

    border-bottom:
        1px solid rgba(130,198,203,.12);
}


.rdg-drawer-v3 .rdg-drawer-close {
    width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0;

    padding:
        0;

    color:
        #9db3b7;

    background:
        rgba(255,255,255,.028);

    border:
        1px solid rgba(132,195,200,.15);

    border-radius:
        12px;

    transition:
        color .18s ease,
        background .18s ease,
        transform .18s ease,
        border-color .18s ease;
}


.rdg-drawer-v3 .rdg-drawer-close svg {
    width:
        19px;

    height:
        19px;
}


.rdg-drawer-v3 .rdg-drawer-close:hover {
    color:
        #fff;

    background:
        rgba(255,255,255,.06);

    border-color:
        rgba(111,204,210,.26);

    transform:
        translateY(-1px);
}


/* =========================================================
   LOGGED-IN USER
   ========================================================= */

.rdg-drawer-v3 .rdg-drawer-user {
    display:
        grid;

    grid-template-columns:
        auto minmax(0,1fr);

    align-items:
        center;

    gap:
        13px;

    margin:
        18px 0 0;

    padding:
        15px;

    background:
        rgba(255,255,255,.032);

    border:
        1px solid rgba(123,195,200,.13);

    border-radius:
        15px;
}


.rdg-drawer-v3 .rdg-drawer-user > div {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.rdg-drawer-v3 .rdg-drawer-user strong {
    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        14px;

    font-weight:
        750;
}


.rdg-drawer-v3 .rdg-drawer-user small {
    color:
        #829aa0;

    font-size:
        11px;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.rdg-drawer-v3 .rdg-drawer-section {
    margin-top:
        18px;
}


.rdg-drawer-v3 .rdg-drawer-section-head {
    display:
        flex;

    align-items:
        baseline;

    justify-content:
        space-between;

    gap:
        12px;

    margin:
        0 5px 9px;
}


.rdg-drawer-v3 .rdg-drawer-section-head > span {
    color:
        #78d0d5;

    font-size:
        10px;

    line-height:
        1.2;

    font-weight:
        850;

    letter-spacing:
        .12em;
}


.rdg-drawer-v3 .rdg-drawer-section-head > small {
    color:
        #72898e;

    font-size:
        9px;
}


/* =========================================================
   VECTOR NAVIGATION
   ========================================================= */

.rdg-drawer-v3 .rdg-drawer-nav-vectors,
.rdg-drawer-v3 .rdg-drawer-nav-compact {
    display:
        grid;

    gap:
        6px;

    padding:
        8px;

    background:
        rgba(255,255,255,.021);

    border:
        1px solid rgba(126,196,201,.13);

    border-radius:
        16px;
}


.rdg-drawer-v3 .rdg-drawer-item {
    min-height:
        68px;

    display:
        grid;

    grid-template-columns:
        44px
        minmax(0,1fr)
        22px;

    align-items:
        center;

    gap:
        12px;

    padding:
        9px 11px;

    color:
        #c5d4d7 !important;

    background:
        transparent;

    border:
        1px solid transparent;

    border-radius:
        12px;

    text-decoration:
        none !important;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


.rdg-drawer-v3 .rdg-drawer-item:hover {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            rgba(92,192,199,.10),
            rgba(255,255,255,.025)
        );

    border-color:
        rgba(103,204,210,.17);

    transform:
        translateX(2px);
}


.rdg-drawer-v3 .rdg-drawer-vector {
    width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #72cbd1;

    background:
        rgba(99,194,201,.075);

    border:
        1px solid rgba(105,198,204,.13);

    border-radius:
        11px;
}


.rdg-drawer-v3 .rdg-drawer-vector svg {
    width:
        20px;

    height:
        20px;
}


.rdg-drawer-v3 .rdg-drawer-item-copy {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.rdg-drawer-v3 .rdg-drawer-item-copy strong {
    color:
        inherit;

    font-size:
        13px;

    line-height:
        1.2;

    font-weight:
        700;
}


.rdg-drawer-v3 .rdg-drawer-item-copy small {
    color:
        #7f969b;

    font-size:
        10.5px;

    line-height:
        1.3;
}


.rdg-drawer-v3 .rdg-drawer-arrow {
    width:
        20px;

    height:
        20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #667e84;
}


.rdg-drawer-v3 .rdg-drawer-arrow svg {
    width:
        15px;

    height:
        15px;
}


.rdg-drawer-v3 .rdg-drawer-item:hover
.rdg-drawer-arrow {
    color:
        #78d0d5;
}


/* =========================================================
   COMPACT ACCOUNT NAVIGATION
   ========================================================= */

.rdg-drawer-v3 .rdg-drawer-item.compact {
    min-height:
        49px;

    grid-template-columns:
        34px
        minmax(0,1fr)
        auto;

    padding:
        5px 9px;
}


.rdg-drawer-v3 .rdg-drawer-item.compact
.rdg-drawer-vector {
    width:
        32px;

    height:
        32px;

    border-radius:
        9px;
}


.rdg-drawer-v3 .rdg-drawer-item.compact
.rdg-drawer-vector svg {
    width:
        17px;

    height:
        17px;
}


.rdg-drawer-v3 .rdg-drawer-item.compact.danger {
    color:
        #e5aeae !important;
}


.rdg-drawer-v3 .rdg-drawer-count {
    min-width:
        20px;

    height:
        20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 6px;

    color:
        #063137;

    background:
        #79d3d8;

    border-radius:
        20px;

    font-size:
        9px;

    font-weight:
        850;
}


/* =========================================================
   GUEST AUTH
   ========================================================= */

.rdg-drawer-v3 .rdg-drawer-auth-v3 {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;

    margin-top:
        18px;
}


.rdg-drawer-v3 .rdg-drawer-auth-v3
.rdg-login-button,
.rdg-drawer-v3 .rdg-drawer-auth-v3
.rdg-create-button {
    min-height:
        48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border-radius:
        12px;

    font-size:
        12px;

    font-weight:
        750;
}


.rdg-drawer-v3 .rdg-drawer-auth-v3 svg {
    width:
        17px;

    height:
        17px;
}


/* =========================================================
   SOCIAL
   ========================================================= */

.rdg-drawer-v3 .rdg-drawer-social {
    margin-top:
        22px;

    padding-top:
        18px;

    border-top:
        1px solid rgba(130,198,203,.12);
}


.rdg-drawer-v3 .rdg-social-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap:
        7px;
}


.rdg-drawer-v3 .rdg-social-grid a {
    min-height:
        64px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    color:
        #91a8ad !important;

    background:
        rgba(255,255,255,.023);

    border:
        1px solid rgba(125,194,199,.12);

    border-radius:
        12px;

    text-decoration:
        none !important;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


.rdg-drawer-v3 .rdg-social-grid a:hover {
    color:
        #7dd3d8 !important;

    background:
        rgba(92,192,199,.075);

    border-color:
        rgba(102,203,209,.20);

    transform:
        translateY(-2px);
}


.rdg-drawer-v3 .rdg-social-grid svg {
    width:
        20px;

    height:
        20px;
}


.rdg-drawer-v3 .rdg-social-grid span {
    font-size:
        9px;

    font-weight:
        650;
}


/* =========================================================
   SIGNATURE
   ========================================================= */

.rdg-drawer-v3 .rdg-drawer-signature {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-top:
        21px;

    padding:
        18px 5px 3px;

    border-top:
        1px solid rgba(130,198,203,.12);
}


.rdg-drawer-v3 .rdg-drawer-signature span {
    color:
        #70c8ce;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .13em;
}


.rdg-drawer-v3 .rdg-drawer-signature strong {
    color:
        #84999e;

    font-size:
        8px;

    font-weight:
        750;

    letter-spacing:
        .10em;
}


/* =========================================================
   LIGHT THEME
   ========================================================= */

body[data-theme="light"] .rdg-drawer-v3 {
    color:
        #1d363c;

    background:
        radial-gradient(
            circle at 14% 2%,
            rgba(52,169,178,.10),
            transparent 28rem
        ),
        linear-gradient(
            180deg,
            #f7fbfb,
            #eef6f7
        );

    border-right-color:
        rgba(31,115,124,.13);

    box-shadow:
        22px 0 55px rgba(35,65,70,.16);
}


body[data-theme="light"]
.rdg-drawer-v3
.rdg-drawer-item {
    color:
        #405b61 !important;
}


body[data-theme="light"]
.rdg-drawer-v3
.rdg-drawer-item:hover {
    color:
        #17343a !important;
}


body[data-theme="light"]
.rdg-drawer-v3
.rdg-drawer-item-copy small,
body[data-theme="light"]
.rdg-drawer-v3
.rdg-drawer-section-head > small {
    color:
        #72878c;
}


body[data-theme="light"]
.rdg-drawer-v3
.rdg-drawer-vector {
    color:
        #187f89;

    background:
        rgba(29,132,142,.07);
}


body[data-theme="light"]
.rdg-drawer-v3
.rdg-social-grid a {
    color:
        #587176 !important;
}


/* =========================================================
   CURRENT MOBILE SIZE PROTECTION
   No mobile redesign yet — only prevent overflow.
   ========================================================= */

@media (max-width: 720px) {

    .rdg-drawer-v3 {
        width:
            min(396px, 100vw);

        padding-inline:
            16px;
    }


    .rdg-drawer-v3 .rdg-social-grid {
        grid-template-columns:
            repeat(4, minmax(0,1fr));
    }


    .rdg-drawer-v3 .rdg-social-grid span {
        display:
            none;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .rdg-drawer-v3 *,
    .rdg-drawer-v3 *::before,
    .rdg-drawer-v3 *::after {
        transition:
            none !important;
    }
}


/* =========================================================
   DRAWER AUTH — PRECISE SYMMETRY FIX
   ========================================================= */

.rdg-drawer-v3 .rdg-drawer-auth-v3 {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap: 0 !important;

    margin:
        18px 0 0 !important;

    padding:
        0 !important;

    overflow:
        hidden;

    border:
        1px solid rgba(126,196,201,.15);

    border-radius:
        13px;

    background:
        rgba(255,255,255,.018);
}


.rdg-drawer-v3 .rdg-drawer-auth-v3
.rdg-login-button,

.rdg-drawer-v3 .rdg-drawer-auth-v3
.rdg-create-button {
    width: 100% !important;
    min-width: 0 !important;

    height: 54px !important;
    min-height: 54px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 9px !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-sizing: border-box !important;

    font-size: 12px !important;
    line-height: 1 !important;

    font-weight: 750 !important;

    text-align: center !important;
}


.rdg-drawer-v3 .rdg-drawer-auth-v3
.rdg-login-button {
    border-right:
        1px solid rgba(126,196,201,.15) !important;

    background:
        rgba(255,255,255,.018) !important;
}


.rdg-drawer-v3 .rdg-drawer-auth-v3
.rdg-create-button {
    background:
        linear-gradient(
            135deg,
            #84d5da,
            #73c5cb
        ) !important;
}


.rdg-drawer-v3 .rdg-drawer-auth-v3
.rdg-login-button svg,

.rdg-drawer-v3 .rdg-drawer-auth-v3
.rdg-create-button svg {
    width: 17px !important;
    height: 17px !important;

    flex: 0 0 17px !important;
}


.rdg-drawer-v3 .rdg-drawer-auth-v3
.rdg-login-button span,

.rdg-drawer-v3 .rdg-drawer-auth-v3
.rdg-create-button span {
    display: inline-block;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap;
}


/* Light theme */
body[data-theme="light"]
.rdg-drawer-v3
.rdg-drawer-auth-v3 {
    border-color:
        rgba(30,112,120,.15);

    background:
        rgba(28,94,101,.025);
}


body[data-theme="light"]
.rdg-drawer-v3
.rdg-drawer-auth-v3
.rdg-login-button {
    border-right-color:
        rgba(30,112,120,.15) !important;
}


/* =========================================================
   DRAWER BRAND / SIGNATURE / AUTH HOVER REFINEMENT
   ========================================================= */

/* Top drawer brand */
.rdg-drawer-v3 .rdg-drawer-head .rdg-brand-name {
    font-size: 21px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
}

/* Bottom signature */
.rdg-drawer-v3 .rdg-drawer-signature span {
    color: #ffffff !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

.rdg-drawer-v3 .rdg-drawer-signature strong {
    color: #ffffff !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    font-weight: 780 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
}

/* Auth buttons hover polish */
.rdg-drawer-v3 .rdg-drawer-auth-v3
.rdg-login-button,
.rdg-drawer-v3 .rdg-drawer-auth-v3
.rdg-create-button {
    transition:
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .18s ease,
        filter .18s ease !important;
}

.rdg-drawer-v3 .rdg-drawer-auth-v3
.rdg-login-button:hover {
    background: rgba(255,255,255,.055) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(127,206,212,.12) !important;
    transform: translateY(-1px) !important;
}

.rdg-drawer-v3 .rdg-drawer-auth-v3
.rdg-create-button:hover {
    background:
        linear-gradient(
            135deg,
            #95e0e4,
            #81d0d6
        ) !important;
    color: #0f2a2f !important;
    box-shadow:
        0 10px 22px rgba(61,170,178,.22) !important;
    transform: translateY(-1px) !important;
    filter: brightness(1.03) !important;
}

/* Light theme hover consistency */
body[data-theme="light"]
.rdg-drawer-v3
.rdg-drawer-auth-v3
.rdg-login-button:hover {
    background: rgba(28,94,101,.07) !important;
}


/* =========================================================
   DRAWER SECTION SUBTITLES — WHITE
   ========================================================= */

.rdg-drawer-v3 .rdg-drawer-section-head > small {
    color: #ffffff !important;
    opacity: .82 !important;
}


/* =========================================================
   DRAWER SECTION SUBTITLES — WHITE
   ========================================================= */

.rdg-drawer-v3 .rdg-drawer-section-head > small {
    color: #ffffff !important;
    opacity: .82 !important;
}