/* ============================================================
   CduCodes Modern Select
   v4.2 — Dark + Premium Light Theme
   ============================================================ */

.cdu-select {
    position: relative;
    width: 100%;
    z-index: 30;
}

.cdu-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ============================================================
   TRIGGER
   ============================================================ */

.cdu-select-trigger {
    width: 100%;
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 0 14px;

    border: 1px solid rgba(0, 230, 160, .22);
    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(11, 24, 30, .98),
            rgba(6, 14, 19, .98)
        );

    color: #eaf8f5;

    font:
        800 12px/1
        Inter,
        system-ui,
        sans-serif;

    letter-spacing: .1px;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 8px 22px rgba(0, 0, 0, .12);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        transform .2s ease;
}

.cdu-select-trigger:hover,
.cdu-select.open .cdu-select-trigger {
    border-color: rgba(0, 230, 160, .62);

    box-shadow:
        0 0 0 3px rgba(0, 230, 160, .07),
        0 12px 30px rgba(0, 0, 0, .18);
}

.cdu-select-trigger:active {
    transform: translateY(1px);
}


/* ============================================================
   CHEVRON
   ============================================================ */

.cdu-select-chevron {
    color: #00e6a0;
    font-size: 16px;

    transition:
        transform .2s ease,
        color .2s ease;
}

.cdu-select.open .cdu-select-chevron {
    transform: rotate(180deg);
}


/* ============================================================
   DROPDOWN MENU
   ============================================================ */

.cdu-select-menu {
    position: absolute;

    left: 0;
    right: 0;

    top: calc(100% + 8px);

    padding: 7px;

    display: grid;
    gap: 4px;

    max-height: 290px;
    overflow-y: auto;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-7px)
        scale(.985);

    transform-origin: top;

    pointer-events: none;

    border:
        1px solid
        rgba(0, 230, 160, .22);

    border-radius: 14px;

    background:
        rgba(7, 15, 20, .98);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, .5),
        0 0 30px rgba(0, 230, 160, .07);

    backdrop-filter: blur(18px);

    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .16s cubic-bezier(.16, 1, .3, 1);
}

.cdu-select.open .cdu-select-menu {
    opacity: 1;
    visibility: visible;

    transform: none;

    pointer-events: auto;
}


/* ============================================================
   MENU BUTTONS
   ============================================================ */

.cdu-select-menu button {
    position: relative;

    display: flex;
    align-items: center;

    gap: 9px;

    width: 100%;
    min-height: 40px;

    padding: 9px 10px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: #dce9ee;

    font:
        750 11px/1.2
        Inter,
        system-ui,
        sans-serif;

    text-align: left;

    cursor: pointer;

    transition:
        background .12s ease,
        color .12s ease,
        transform .12s ease,
        box-shadow .12s ease;
}

.cdu-select-menu button:hover {
    transform: translateX(2px);
}

.cdu-select-menu button:hover,
.cdu-select-menu button[aria-selected="true"] {
    background:
        linear-gradient(
            90deg,
            rgba(0, 230, 160, .14),
            rgba(0, 230, 160, .035)
        );

    color: #fff;

    box-shadow:
        inset 2px 0 #00e6a0;
}

.cdu-select-menu button small {
    margin-left: auto;

    color: #68818a;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .6px;
}


/* ============================================================
   OPTION DOTS
   ============================================================ */

.option-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #6c7c83;

    box-shadow:
        0 0 0 3px
        rgba(108, 124, 131, .08);

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.cdu-select-menu button:hover .option-dot {
    transform: scale(1.2);
}


/* ALL / AVAILABLE */

.option-dot.all,
.option-dot.available {
    background: #00e6a0;

    box-shadow:
        0 0 0 3px
        rgba(0, 230, 160, .09),

        0 0 12px
        rgba(0, 230, 160, .35);
}


/* EASY */

.option-dot.easy {
    background: #35f0b1;

    box-shadow:
        0 0 0 3px
        rgba(53, 240, 177, .10),

        0 0 14px
        rgba(53, 240, 177, .45);
}


/* MEDIUM */

.option-dot.medium {
    background: #ffc447;

    box-shadow:
        0 0 0 3px
        rgba(255, 196, 71, .10),

        0 0 14px
        rgba(255, 196, 71, .42);
}


/* HARD */

.option-dot.hard {
    background: #ff5069;

    box-shadow:
        0 0 0 3px
        rgba(255, 80, 105, .10),

        0 0 15px
        rgba(255, 80, 105, .45);
}


/* UNAVAILABLE */

.option-dot.unavailable {
    background: #70808a;
}


/* ============================================================
   LANGUAGE MATCH STATUS
   ============================================================ */

.language-match-status {
    display: block;
    margin-top: 7px;

    font-weight: 750;
}

.language-match-status.match {
    color: #00e6a0;
}

.language-match-status.mismatch {
    color: #ff7384;
}

.language-match-status.pending {
    color: #8aa2aa;
}


/* ============================================================
   DIFFICULTY IDENTITY — DARK
   ============================================================ */

.cdu-select[data-value="easy"]
.cdu-select-trigger {
    border-color:
        rgba(53, 240, 177, .42);

    box-shadow:
        0 0 0 3px
        rgba(53, 240, 177, .05),

        0 12px 30px
        rgba(0, 0, 0, .18);
}


.cdu-select[data-value="medium"]
.cdu-select-trigger {
    border-color:
        rgba(255, 196, 71, .42);

    box-shadow:
        0 0 0 3px
        rgba(255, 196, 71, .05),

        0 12px 30px
        rgba(0, 0, 0, .18);
}


.cdu-select[data-value="hard"]
.cdu-select-trigger {
    border-color:
        rgba(255, 80, 105, .44);

    box-shadow:
        0 0 0 3px
        rgba(255, 80, 105, .05),

        0 12px 30px
        rgba(0, 0, 0, .18);
}


/* ============================================================
   DIFFICULTY SELECTED OPTIONS
   ============================================================ */

.cdu-select-menu
button[data-value="easy"][aria-selected="true"] {
    box-shadow:
        inset 2px 0 #35f0b1;

    background:
        linear-gradient(
            90deg,
            rgba(53, 240, 177, .14),
            rgba(53, 240, 177, .035)
        );
}


.cdu-select-menu
button[data-value="medium"][aria-selected="true"] {
    box-shadow:
        inset 2px 0 #ffc447;

    background:
        linear-gradient(
            90deg,
            rgba(255, 196, 71, .14),
            rgba(255, 196, 71, .035)
        );
}


.cdu-select-menu
button[data-value="hard"][aria-selected="true"] {
    box-shadow:
        inset 2px 0 #ff5069;

    background:
        linear-gradient(
            90deg,
            rgba(255, 80, 105, .14),
            rgba(255, 80, 105, .035)
        );
}


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

/*
   IMPORTANT:
   This is intentionally NOT pure white.

   The light theme uses:
   - deep blue/slate text
   - cool off-white surfaces
   - subtle mint tint
   - dark-ish dropdown panels
   - stronger borders
   - restrained shadows
   - same CduCodes identity
*/


body.light-theme .cdu-select-trigger {

    background:
        linear-gradient(
            145deg,
            #f1f7f6 0%,
            #e7f0ef 52%,
            #dce9e8 100%
        );

    color: #18353e;

    border-color:
        #9bbcb9;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .85),

        0 8px 24px
        rgba(25, 58, 68, .10),

        0 1px 2px
        rgba(20, 50, 60, .08);
}


body.light-theme .cdu-select-trigger:hover,
body.light-theme .cdu-select.open .cdu-select-trigger {

    background:
        linear-gradient(
            145deg,
            #f6fbfa,
            #e8f3f1
        );

    border-color:
        #00a984;

    box-shadow:
        0 0 0 3px
        rgba(0, 150, 115, .10),

        0 12px 30px
        rgba(24, 67, 77, .14);
}


body.light-theme .cdu-select-trigger:active {
    box-shadow:
        inset 0 2px 4px
        rgba(20, 55, 65, .10),

        0 3px 10px
        rgba(20, 55, 65, .08);
}


/* ============================================================
   LIGHT CHEVRON
   ============================================================ */

body.light-theme .cdu-select-chevron {
    color: #008f72;
}


/* ============================================================
   LIGHT DROPDOWN
   ============================================================ */

/*
   Not pure white.
   This keeps the dropdown premium and grounded.
*/

body.light-theme .cdu-select-menu {

    background:
        linear-gradient(
            145deg,
            rgba(237, 246, 245, .99),
            rgba(221, 235, 234, .99)
        );

    border-color:
        #9ebebb;

    box-shadow:
        0 24px 55px
        rgba(28, 62, 72, .18),

        0 5px 16px
        rgba(28, 62, 72, .08),

        inset 0 1px 0
        rgba(255, 255, 255, .8);

    backdrop-filter:
        blur(18px);
}


/* ============================================================
   LIGHT MENU BUTTONS
   ============================================================ */

body.light-theme .cdu-select-menu button {

    color: #29444d;

    background:
        transparent;
}


body.light-theme .cdu-select-menu button:hover {

    color: #102f37;

    background:
        linear-gradient(
            90deg,
            rgba(0, 150, 115, .13),
            rgba(0, 150, 115, .035)
        );

    box-shadow:
        inset 2px 0 #008d6e,

        0 4px 12px
        rgba(22, 72, 76, .06);
}


body.light-theme .cdu-select-menu button[aria-selected="true"] {

    color: #0e3038;

    background:
        linear-gradient(
            90deg,
            rgba(0, 150, 115, .16),
            rgba(0, 150, 115, .045)
        );

    box-shadow:
        inset 2px 0 #008d6e,

        0 4px 12px
        rgba(22, 72, 76, .07);
}


body.light-theme .cdu-select-menu button small {
    color: #688087;
}


/* ============================================================
   LIGHT MENU SCROLLBAR
   ============================================================ */

body.light-theme .cdu-select-menu::-webkit-scrollbar {
    width: 6px;
}

body.light-theme .cdu-select-menu::-webkit-scrollbar-track {
    background:
        rgba(40, 70, 78, .06);

    border-radius: 20px;
}

body.light-theme .cdu-select-menu::-webkit-scrollbar-thumb {
    background:
        rgba(0, 141, 110, .35);

    border-radius: 20px;
}

body.light-theme .cdu-select-menu::-webkit-scrollbar-thumb:hover {
    background:
        rgba(0, 141, 110, .55);
}


/* ============================================================
   LIGHT OPTION DOTS
   ============================================================ */

body.light-theme .option-dot {
    box-shadow:
        0 0 0 3px
        rgba(65, 90, 96, .08);
}


body.light-theme .option-dot.all,
body.light-theme .option-dot.available {

    background: #009b78;

    box-shadow:
        0 0 0 3px
        rgba(0, 155, 120, .10),

        0 0 10px
        rgba(0, 155, 120, .28);
}


body.light-theme .option-dot.easy {

    background: #16b982;

    box-shadow:
        0 0 0 3px
        rgba(22, 185, 130, .11),

        0 0 11px
        rgba(22, 185, 130, .30);
}


body.light-theme .option-dot.medium {

    background: #d99508;

    box-shadow:
        0 0 0 3px
        rgba(217, 149, 8, .11),

        0 0 11px
        rgba(217, 149, 8, .27);
}


body.light-theme .option-dot.hard {

    background: #e4475c;

    box-shadow:
        0 0 0 3px
        rgba(228, 71, 92, .10),

        0 0 12px
        rgba(228, 71, 92, .30);
}


body.light-theme .option-dot.unavailable {
    background: #819197;
}


/* ============================================================
   LIGHT LANGUAGE STATUS
   ============================================================ */

body.light-theme .language-match-status.match {
    color: #008c6d;
}

body.light-theme .language-match-status.mismatch {
    color: #d93e55;
}

body.light-theme .language-match-status.pending {
    color: #627b83;
}


/* ============================================================
   LIGHT DIFFICULTY IDENTITY
   ============================================================ */

body.light-theme
.cdu-select[data-value="easy"]
.cdu-select-trigger {

    border-color:
        rgba(22, 185, 130, .50);

    background:
        linear-gradient(
            145deg,
            #f0faf6,
            #e1f1eb
        );

    box-shadow:
        0 0 0 3px
        rgba(22, 185, 130, .07),

        0 10px 26px
        rgba(22, 75, 64, .10);
}


body.light-theme
.cdu-select[data-value="medium"]
.cdu-select-trigger {

    border-color:
        rgba(217, 149, 8, .52);

    background:
        linear-gradient(
            145deg,
            #fbf7eb,
            #f2ead5
        );

    box-shadow:
        0 0 0 3px
        rgba(217, 149, 8, .07),

        0 10px 26px
        rgba(82, 67, 27, .10);
}


body.light-theme
.cdu-select[data-value="hard"]
.cdu-select-trigger {

    border-color:
        rgba(228, 71, 92, .50);

    background:
        linear-gradient(
            145deg,
            #fcf0f2,
            #f2dfe3
        );

    box-shadow:
        0 0 0 3px
        rgba(228, 71, 92, .07),

        0 10px 26px
        rgba(88, 38, 48, .10);
}


/* ============================================================
   LIGHT DIFFICULTY SELECTED OPTIONS
   ============================================================ */

body.light-theme
.cdu-select-menu
button[data-value="easy"][aria-selected="true"] {

    color: #123d34;

    background:
        linear-gradient(
            90deg,
            rgba(22, 185, 130, .16),
            rgba(22, 185, 130, .045)
        );

    box-shadow:
        inset 2px 0 #16b982,

        0 3px 10px
        rgba(22, 185, 130, .06);
}


body.light-theme
.cdu-select-menu
button[data-value="medium"][aria-selected="true"] {

    color: #4d3b10;

    background:
        linear-gradient(
            90deg,
            rgba(217, 149, 8, .17),
            rgba(217, 149, 8, .045)
        );

    box-shadow:
        inset 2px 0 #d99508,

        0 3px 10px
        rgba(217, 149, 8, .06);
}


body.light-theme
.cdu-select-menu
button[data-value="hard"][aria-selected="true"] {

    color: #531d27;

    background:
        linear-gradient(
            90deg,
            rgba(228, 71, 92, .16),
            rgba(228, 71, 92, .045)
        );

    box-shadow:
        inset 2px 0 #e4475c,

        0 3px 10px
        rgba(228, 71, 92, .06);
}


/* ============================================================
   LIGHT THEME — FOCUS ACCESSIBILITY
   ============================================================ */

body.light-theme .cdu-select-trigger:focus-visible {

    outline: none;

    border-color:
        #008f72;

    box-shadow:
        0 0 0 3px
        rgba(0, 143, 114, .16),

        0 8px 24px
        rgba(30, 70, 78, .10);
}


body.light-theme
.cdu-select-menu button:focus-visible {

    outline: none;

    background:
        rgba(0, 150, 115, .10);

    box-shadow:
        inset 2px 0 #008d6e,

        0 0 0 2px
        rgba(0, 150, 115, .10);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .cdu-select-trigger {
        min-height: 46px;
        border-radius: 11px;
    }

    .cdu-select-menu {
        max-height: 250px;
        border-radius: 13px;
    }

    .cdu-select-menu button {
        min-height: 42px;
        padding: 10px 11px;
    }
}


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

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

    .cdu-select-trigger,
    .cdu-select-menu,
    .cdu-select-menu button,
    .option-dot,
    .cdu-select-chevron {
        transition: none !important;
    }
}
/* CduCodes V13.8 — Light + Dark theme compatible stylesheet */