/* DropX Prime — Theme Prism selector
   A compact visual selector. No dependency on a base dark palette. */
.dx-theme-switcher{position:relative;z-index:1200}
.dx-theme-trigger{
    position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px 6px 7px;
    border:1px solid var(--theme-line);border-radius:999px;background:color-mix(in srgb,var(--theme-surface) 88%,transparent);
    color:var(--theme-text);cursor:pointer;overflow:hidden;box-shadow:0 8px 26px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.34);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .28s ease;
}
.dx-theme-trigger::after{content:"";position:absolute;inset:1px;border-radius:inherit;border:1px solid rgba(255,255,255,.18);pointer-events:none;opacity:.7}
.dx-theme-trigger:hover{transform:translateY(-1px);border-color:var(--theme-line-strong,var(--theme-gold));box-shadow:0 12px 32px rgba(0,0,0,.14),0 0 0 4px color-mix(in srgb,var(--theme-gold) 7%,transparent)}
.dx-theme-trigger-icon{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:50%;overflow:hidden;background:var(--theme-surface-2);box-shadow:inset 0 0 0 1px var(--theme-line),0 3px 10px rgba(0,0,0,.12)}
.dx-theme-trigger-icon::before{content:"";position:absolute;inset:4px;border:1px solid rgba(255,255,255,.32);border-radius:50%;transform:rotate(24deg);opacity:.7}
.dx-theme-trigger-icon span{display:block;width:6px;height:17px;border-radius:99px;transform:rotate(24deg);box-shadow:0 0 8px rgba(255,255,255,.12)}
.dx-theme-trigger-icon span:nth-child(1){background:var(--theme-prism-1,#eee)}
.dx-theme-trigger-icon span:nth-child(2){background:var(--theme-prism-2,#aaa)}
.dx-theme-trigger-icon span:nth-child(3){background:var(--theme-prism-3,#555)}
.dx-theme-trigger-icon[data-theme="light"] span:nth-child(1){background:#f1e5d4}.dx-theme-trigger-icon[data-theme="light"] span:nth-child(2){background:#b98a46}.dx-theme-trigger-icon[data-theme="light"] span:nth-child(3){background:#655648}
.dx-theme-trigger-icon[data-theme="dark"] span:nth-child(1){background:#12161b}.dx-theme-trigger-icon[data-theme="dark"] span:nth-child(2){background:#d6aa43}.dx-theme-trigger-icon[data-theme="dark"] span:nth-child(3){background:#dfe5e9}
.dx-theme-trigger-icon[data-theme="neutral"] span:nth-child(1){background:#f3f4f5}.dx-theme-trigger-icon[data-theme="neutral"] span:nth-child(2){background:#8b8f95}.dx-theme-trigger-icon[data-theme="neutral"] span:nth-child(3){background:#3e444b}
.dx-theme-trigger-label{font:700 .67rem var(--theme-font-mono,monospace);letter-spacing:.12em;text-transform:uppercase}
.dx-theme-trigger-chevron{width:13px;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s ease;opacity:.7}
.dx-theme-switcher.is-open .dx-theme-trigger-chevron{transform:rotate(180deg);opacity:1}
.dx-theme-menu{
    position:absolute;top:calc(100% + 12px);right:0;width:338px;padding:9px;border:1px solid var(--theme-line);border-radius:24px;
    background:color-mix(in srgb,var(--theme-surface) 95%,transparent);box-shadow:0 28px 70px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.28);
    backdrop-filter:blur(26px) saturate(1.12);-webkit-backdrop-filter:blur(26px) saturate(1.12);
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.965);transform-origin:top right;pointer-events:none;
    transition:opacity .22s ease,visibility .22s ease,transform .32s cubic-bezier(.2,.8,.2,1);
}
.dx-theme-menu::before{content:"";position:absolute;top:-5px;right:18px;width:9px;height:9px;transform:rotate(45deg);background:var(--theme-surface);border-left:1px solid var(--theme-line);border-top:1px solid var(--theme-line)}
.dx-theme-switcher.is-open .dx-theme-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto}
.dx-theme-switcher.is-closing .dx-theme-menu{opacity:0;transform:translateY(-7px) scale(.965)}
.dx-theme-option{
    position:relative;width:100%;display:grid;grid-template-columns:58px 1fr 20px;align-items:center;gap:13px;padding:10px;border:1px solid transparent;border-radius:17px;
    background:transparent;color:var(--theme-text);text-align:left;cursor:pointer;overflow:hidden;opacity:0;transform:translateY(-5px);
    transition:background .18s ease,border-color .18s ease,transform .18s ease,opacity .2s ease
}
.dx-theme-switcher.is-open .dx-theme-option{opacity:1;transform:none}
.dx-theme-switcher.is-open .dx-theme-option:nth-child(2){transition-delay:.035s}.dx-theme-switcher.is-open .dx-theme-option:nth-child(3){transition-delay:.07s}.dx-theme-switcher.is-open .dx-theme-option:nth-child(4){transition-delay:.105s}
.dx-theme-option:hover{background:color-mix(in srgb,var(--theme-gold) 7%,transparent);border-color:var(--theme-line);transform:translateX(2px)}
.dx-theme-option.is-active{background:color-mix(in srgb,var(--theme-gold) 9%,transparent);border-color:color-mix(in srgb,var(--theme-gold) 38%,var(--theme-line))}
.dx-theme-swatch{position:relative;width:54px;height:44px;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:14px;border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 7px 18px rgba(0,0,0,.12);overflow:hidden}
.dx-theme-swatch::after{content:"";position:absolute;width:34px;height:34px;border:1px solid rgba(255,255,255,.38);border-radius:50%;transform:rotate(25deg);opacity:.55}
.dx-theme-swatch i{display:block;width:8px;height:25px;border-radius:99px;transform:rotate(25deg);z-index:1}
.dx-theme-option-name{display:block;font:700 .92rem var(--theme-font-body,sans-serif);letter-spacing:.01em}.dx-theme-option-meta{display:block;margin-top:3px;font:500 .59rem var(--theme-font-mono,monospace);opacity:.58;letter-spacing:.07em;text-transform:uppercase}
.dx-theme-check{width:18px;height:18px;opacity:0;transform:scale(.55);color:var(--theme-gold);transition:opacity .2s ease,transform .28s cubic-bezier(.2,.8,.2,1)}
.dx-theme-option.is-active .dx-theme-check{opacity:1;transform:scale(1)}
.dx-theme-swatch.swatch-light{background:linear-gradient(135deg,#e8dccb,#cbb79c)}.dx-theme-swatch.swatch-light i:nth-child(1){background:#f4eadc}.dx-theme-swatch.swatch-light i:nth-child(2){background:#b78948}.dx-theme-swatch.swatch-light i:nth-child(3){background:#655649}
.dx-theme-swatch.swatch-dark{background:linear-gradient(135deg,#0b0e12,#20262d)}.dx-theme-swatch.swatch-dark i:nth-child(1){background:#12171d}.dx-theme-swatch.swatch-dark i:nth-child(2){background:#d6a83e}.dx-theme-swatch.swatch-dark i:nth-child(3){background:#e1e6ea}
.dx-theme-swatch.swatch-neutral{background:linear-gradient(135deg,#e5e7e9,#8b9198)}.dx-theme-swatch.swatch-neutral i:nth-child(1){background:#f5f6f7}.dx-theme-swatch.swatch-neutral i:nth-child(2){background:#90959b}.dx-theme-swatch.swatch-neutral i:nth-child(3){background:#3f454b}
@media(max-width:700px){.dx-theme-trigger-label{display:none}.dx-theme-trigger{min-width:44px;justify-content:center;padding:6px}.dx-theme-menu{right:-4px;width:min(338px,calc(100vw - 24px))}}

/* Only the two production themes are exposed. */
.dx-theme-option[data-theme-option="neutral"] { display:none; }


/* Closed header trigger: show only the three visual prism colors, never a text label. */
.dx-theme-trigger-label {
    display: none;
    width: 0;
    margin: 0;
    overflow: hidden;
}
.dx-theme-trigger {
    gap: 7px;
}

/* FINAL: closed trigger is icon-only. Theme names/palette text remain inside the opened menu. */
.dx-theme-trigger-label { display:none; width:0; max-width:0; margin:0; padding:0; overflow:hidden; opacity:0; visibility:hidden; }

/* MOBILE APP: a jobb szélen kizárólag a kompakt dizájnválasztó maradjon. */
@media (max-width: 700px) {
    .mobile-actions-right .dx-theme-switcher {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
    }

    .mobile-actions-right .dx-theme-trigger {
        width: 34px;
        min-width: 34px;
        min-height: 34px;
        height: 34px;
        padding: 4px;
        gap: 0;
        border-radius: 50%;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.30);
    }

    .mobile-actions-right .dx-theme-trigger-icon {
        width: 25px;
        height: 25px;
    }

    .mobile-actions-right .dx-theme-trigger-icon span {
        width: 5px;
        height: 14px;
    }

    .mobile-actions-right .dx-theme-trigger-chevron {
        display: none;
    }
}

/* ================================================================
   DROPX MOBILE — COMPACT THEME MENU
   A mobil nézetben a dizájnválasztó ne foglalja el a fél fejlécet.
   Desktop megjelenést nem módosít.
   ================================================================ */
@media (max-width: 700px) {
    .mobile-theme-switcher .dx-theme-menu,
    .dx-theme-switcher.mobile-theme-switcher .dx-theme-menu {
        top: calc(100% + 7px);
        left: 0;
        right: auto;
        width: 252px;
        max-width: calc(100vw - 18px);
        padding: 6px;
        border-radius: 18px;
        box-shadow: 0 18px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22);
        backdrop-filter: blur(20px) saturate(1.08);
        -webkit-backdrop-filter: blur(20px) saturate(1.08);
    }

    .mobile-theme-switcher .dx-theme-menu::before,
    .dx-theme-switcher.mobile-theme-switcher .dx-theme-menu::before {
        top: -4px;
        left: 14px;
        right: auto;
        width: 7px;
        height: 7px;
    }

    .mobile-theme-switcher .dx-theme-option,
    .dx-theme-switcher.mobile-theme-switcher .dx-theme-option {
        grid-template-columns: 43px 1fr 16px;
        gap: 9px;
        min-height: 42px;
        padding: 5px 6px;
        border-radius: 13px;
    }

    .mobile-theme-switcher .dx-theme-swatch,
    .dx-theme-switcher.mobile-theme-switcher .dx-theme-swatch {
        width: 41px;
        height: 32px;
        border-radius: 10px;
    }

    .mobile-theme-switcher .dx-theme-swatch::after,
    .dx-theme-switcher.mobile-theme-switcher .dx-theme-swatch::after {
        width: 25px;
        height: 25px;
    }

    .mobile-theme-switcher .dx-theme-swatch i,
    .dx-theme-switcher.mobile-theme-switcher .dx-theme-swatch i {
        width: 6px;
        height: 18px;
    }

    .mobile-theme-switcher .dx-theme-option-name,
    .dx-theme-switcher.mobile-theme-switcher .dx-theme-option-name {
        font-size: .78rem;
        line-height: 1.05;
    }

    .mobile-theme-switcher .dx-theme-option-meta,
    .dx-theme-switcher.mobile-theme-switcher .dx-theme-option-meta {
        margin-top: 2px;
        font-size: .50rem;
        letter-spacing: .055em;
        line-height: 1.05;
    }

    .mobile-theme-switcher .dx-theme-check,
    .dx-theme-switcher.mobile-theme-switcher .dx-theme-check {
        width: 15px;
        height: 15px;
    }
}