/* ==========================================================
           iEvolution Language & Currency Switcher — brand skin v3
           Navy text, cyan only as accent (focus ring / underline), coral
           reserved for CTAs (none here), Dancer Cloud for selected rows and
           fields, navy-tinted shadows, weights 400/600/700, no gradients.
           Same tokens/shapes as the site header (pill trigger, 52px rows,
           11px uppercase eyebrows, 16px radius panels).
           ========================================================== */
        :root {
            /* ==========================================================
             * iEvolution Pro Brand Color System v3
             * Source: ievolution_color_guide_v3 -RB -0410.pdf
             * ==========================================================
             * Primary palette — exact hex values from the brand guide.
             * Use these raw tokens for new work; the role tokens below
             * are semantic aliases mapped to the brand palette. */
            --iev-navy: #1B2A4A;          /* Base / Authority — hero bg, headers, nav */
            --iev-cyan: #2AAFD3;          /* Brand / Energy — icons, links, accents, data */
            --iev-coral: #E8593C;         /* CTA buttons ONLY — never as background */
            --iev-amber: #F4A623;         /* Badges, stock alerts, star ratings */
            --iev-dancer-cloud: #F0EEE9;  /* Warm neutral — section bgs, cards */
            --iev-salmon: #FDA172;        /* Decorative only — NO text, NO buttons */
            --iev-slate: #6B7B8D;         /* Captions, secondary labels */
            --iev-white: #FFFFFF;         /* Text on Navy, Coral, Cyan bgs */

            /* Semantic role tokens — prefer these in component CSS so a
             * future brand revision only touches the mapping above. */
            --iev-primary: var(--iev-cyan);
            --iev-primary-dark: #1E8FAD;
            --iev-primary-light: #5DC4E0;
            --iev-secondary: var(--iev-navy);
            --iev-secondary-dark: #111D35;
            --iev-secondary-light: #2D3E5F;
            --iev-cta: var(--iev-coral);           /* Call-to-action buttons */
            --iev-badge: var(--iev-amber);         /* Best-Seller pills, alerts */
            --iev-neutral-warm: var(--iev-dancer-cloud);

            --iev-text-title: var(--iev-navy);
            --iev-text-main: var(--iev-slate);
            --iev-text-subtitle: var(--iev-slate);
            --iev-text-muted: #94A3B8;             /* Lighter than Slate — very tertiary */
            --iev-border: #E8EDF2;
            --iev-border-subtle: #E8EDF2;
            --iev-surface: var(--iev-white);
            --iev-overlay-light: #F8FAFB;          /* legacy alias, unused by the v3 skin (kept for other snippets) */
            --iev-subtle: #F8FAFB;

            --ulcs-primary: var(--iev-primary);
            --ulcs-secondary: var(--iev-secondary);
            --ulcs-bg: var(--iev-surface);
            --ulcs-text: var(--iev-text-title);
            --ulcs-border: rgba(232, 237, 242, 0.5);
            --ulcs-hover: rgba(42, 175, 211, 0.08);
            --ulcs-active: rgba(42, 175, 211, 0.12);
            --ulcs-transition: cubic-bezier(0.4, 0, 0.2, 1);
        }

        .ulcs-widget, .ulcs-panel, .ulcs-dropdown, .ulcs-account-bar {
            --ulcs-navy-72: rgba(27, 42, 74, .72);
            --ulcs-line: rgba(27, 42, 74, .06);
            --ulcs-line-strong: rgba(27, 42, 74, .12);
            --ulcs-hover-bg: rgba(27, 42, 74, .05);
            --ulcs-shadow-pop: 0 16px 32px -16px rgba(27, 42, 74, .28), 0 0 0 1px rgba(27, 42, 74, .06);
            --ulcs-shadow-panel: 0 24px 48px -24px rgba(27, 42, 74, .32), 0 0 0 1px rgba(27, 42, 74, .06);
            --ulcs-ease-out: cubic-bezier(.2, .8, .2, 1);
            --ulcs-ease-std: cubic-bezier(.4, 0, .2, 1);
            --ulcs-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            --ulcs-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
        }
        .ulcs-widget, .ulcs-widget *, .ulcs-panel, .ulcs-panel *, .ulcs-overlay { box-sizing: border-box; }
        .ulcs-widget button, .ulcs-panel button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
        .ulcs-widget button:focus-visible, .ulcs-panel button:focus-visible { outline: 2px solid var(--iev-cyan); outline-offset: 2px; }
        /* Rows live inside a clipped group (overflow:hidden) — draw their ring inside the box instead.
           Specificity (0,3,0) on purpose: must beat the generic button rule above and the hairline rules below. */
        .ulcs-panel .ulcs-option:focus-visible, .ulcs-panel .ulcs-show-more:focus-visible, .ulcs-dropdown .ulcs-dd-option:focus-visible {
            outline: none !important;
            box-shadow: inset 0 0 0 2px var(--iev-cyan) !important;
        }

        /* ========== Widget ========== */
        .ulcs-widget {
            position: relative;
            font-family: var(--ulcs-font);
        }
        .ulcs-widget[data-position="fixed-left"],
        .ulcs-widget[data-position="fixed-right"] {
            position: fixed;
            bottom: 20px;
            z-index: 2147483645;
        }
        .ulcs-widget[data-position="fixed-left"] { left: 20px; }
        .ulcs-widget[data-position="fixed-right"] { right: 20px; }
        .ulcs-widget[data-position^="fixed"] .ulcs-trigger {
            background: #fff;
            box-shadow: 0 10px 24px -12px rgba(27, 42, 74, .35);
        }

        /* ========== Trigger pill (🇺🇸 | USD ⌄) ========== */
        .ulcs-trigger {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            height: 36px;
            padding: 0 10px 0 8px;
            background: transparent;
            border: 1.5px solid var(--ulcs-line-strong);
            border-radius: 999px;
            cursor: pointer;
            font-family: var(--ulcs-font);
            color: var(--iev-navy);
            line-height: 1;
            transition: border-color 150ms var(--ulcs-ease-std), background-color 150ms var(--ulcs-ease-std);
        }
        .ulcs-trigger:hover {
            border-color: rgba(27, 42, 74, .32);
            background: rgba(27, 42, 74, .04);
            color: var(--iev-navy);
        }
        .ulcs-trigger:hover .ulcs-trigger-chevron { transform: rotate(180deg); }
        .ulcs-trigger-flag {
            font-size: 18px;
            line-height: 1;
            font-family: var(--ulcs-emoji);
            font-variant-emoji: emoji;
        }
        .ulcs-trigger-curr {
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .02em;
        }
        .ulcs-trigger-sep {
            font-size: 13px;
            font-weight: 400;
            color: rgba(27, 42, 74, .24);
            margin: 0 1px;
            user-select: none;
        }
        .ulcs-trigger-chevron {
            width: 10px;
            height: 6px;
            margin-left: 2px;
            color: var(--iev-slate);
            transition: transform 200ms var(--ulcs-ease-out);
            flex-shrink: 0;
        }

        /* ========== Hover dropdown (desktop) ========== */
        .ulcs-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            min-width: 272px;
            /* Viewport-aware cap so tall menus never run off the bottom of the
               screen. Leaves 80px of breathing room for the navbar + margin. */
            max-height: min(560px, calc(100vh - 80px));
            padding-top: 8px;
            background: transparent;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-6px);
            transition: opacity 180ms var(--ulcs-ease-out), transform 180ms var(--ulcs-ease-out), visibility 180ms;
            z-index: 2147483647;
            display: flex;
            flex-direction: column;
            pointer-events: none;
            text-align: left; /* menus sometimes wrap the widget in <center> */
            font-family: var(--ulcs-font);
            color: var(--iev-navy);
        }
        .ulcs-dropdown-inner {
            background: #fff;
            border: 0;
            border-radius: 16px;
            box-shadow: var(--ulcs-shadow-pop);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            /* Match the outer cap. The Currency section flex-grows to fill what
               is left after Country + Language, then scrolls internally. */
            max-height: min(540px, calc(100vh - 100px));
            min-height: 0;
        }
        .ulcs-dropdown-inner > .ulcs-dd-section { flex: 0 0 auto; min-height: 0; }
        .ulcs-dropdown-inner > .ulcs-dd-section-currency {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            min-height: 140px; /* always room for at least ~3 rows */
            overflow: hidden;
        }
        .ulcs-dd-section-currency .ulcs-dd-currency-list {
            flex: 1 1 auto;
            min-height: 0;
            max-height: none; /* override the global cap on .ulcs-dd-options */
        }
        /* Scroll cue at the bottom of the currency list (visual only). */
        .ulcs-dd-section-currency { position: relative; }
        .ulcs-dd-section-currency::after {
            content: '';
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 0;
            height: 24px;
            background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 100%);
            pointer-events: none;
        }
        .ulcs-dd-section-currency.ulcs-dd-section-locked::after { display: none; }

        /* Hidden entirely when the widget is in click/popup mode */
        .ulcs-widget[data-mode="click"] .ulcs-dropdown { display: none !important; }

        @media (hover: hover) and (pointer: fine) {
            .ulcs-widget[data-mode="hover"]:hover .ulcs-dropdown,
            .ulcs-dropdown.force-open {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
                pointer-events: auto;
            }
            .ulcs-widget[data-mode="hover"]:hover .ulcs-trigger-chevron { transform: rotate(180deg); }
        }
        .ulcs-dropdown.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
        }

        .ulcs-dd-section { padding: 10px 10px 12px; }
        .ulcs-dd-section-border { border-top: 1px solid var(--ulcs-line); }
        .ulcs-dd-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--ulcs-navy-72);
            padding: 6px 8px 8px;
        }
        .ulcs-dd-search-wrap { padding: 0 4px 8px; }
        .ulcs-dd-search {
            width: 100%;
            height: 36px;
            padding: 0 12px;
            background: var(--iev-dancer-cloud);
            border: 1.5px solid transparent;
            border-radius: 10px;
            font-size: 13px;
            font-family: var(--ulcs-font);
            color: var(--iev-navy);
            transition: border-color 150ms var(--ulcs-ease-std), background-color 150ms var(--ulcs-ease-std), box-shadow 150ms var(--ulcs-ease-std);
            outline: none;
        }
        .ulcs-dd-search::placeholder { color: var(--ulcs-navy-72); }
        .ulcs-dd-search:focus {
            background: #fff;
            border-color: var(--iev-cyan);
            box-shadow: 0 0 0 3px rgba(42, 175, 211, .22);
        }
        .ulcs-dd-options {
            display: flex;
            flex-direction: column;
            gap: 2px;
            max-height: 200px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            scrollbar-width: thin;
            scrollbar-color: var(--ulcs-line-strong) transparent;
        }
        .ulcs-dd-options::-webkit-scrollbar { width: 4px; }
        .ulcs-dd-options::-webkit-scrollbar-track { background: transparent; }
        .ulcs-dd-options::-webkit-scrollbar-thumb { background: var(--ulcs-line-strong); border-radius: 4px; }
        .ulcs-dd-option {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 40px;
            padding: 8px 10px;
            background: transparent;
            border: 0;
            border-radius: 10px;
            cursor: pointer;
            transition: background-color 120ms var(--ulcs-ease-std);
            width: 100%;
            text-align: left;
            font-family: var(--ulcs-font);
            color: var(--iev-navy);
        }
        .ulcs-dd-option:hover { background: var(--ulcs-hover-bg); }
        .ulcs-dd-option.active { background: var(--iev-dancer-cloud); }
        .ulcs-dd-option.active .ulcs-dd-name { font-weight: 700; }
        .ulcs-dd-option.active .ulcs-dd-code { color: var(--iev-navy); font-weight: 700; }
        .ulcs-dd-option.hidden { display: none; }
        .ulcs-dd-flag {
            font-size: 18px;
            line-height: 1;
            flex-shrink: 0;
            font-family: var(--ulcs-emoji);
            font-variant-emoji: emoji;
        }
        .ulcs-dd-name {
            flex: 1;
            font-size: 14px;
            font-weight: 600;
            color: var(--iev-navy);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ulcs-dd-code {
            font-size: 11px;
            font-weight: 700;
            color: var(--ulcs-navy-72);
            letter-spacing: .06em;
            flex-shrink: 0;
        }

        /* ========== Panel (modal / bottom sheet) ========== */
        .ulcs-panel {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(.96);
            width: calc(100% - 40px);
            max-width: 440px;
            max-height: calc(100% - 48px);
            background: #fff;
            border-radius: 20px;
            border: 0;
            box-shadow: var(--ulcs-shadow-panel);
            opacity: 0;
            visibility: hidden;
            transition: opacity 200ms var(--ulcs-ease-out), transform 220ms var(--ulcs-ease-out), visibility 220ms;
            z-index: 2147483647;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            will-change: transform, opacity;
            font-family: var(--ulcs-font);
            color: var(--iev-navy);
        }
        .ulcs-panel.active {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
        }
        .ulcs-panel:focus { outline: none; }
        .ulcs-overlay {
            position: fixed;
            inset: 0;
            background: rgba(27, 42, 74, .35);
            opacity: 0;
            visibility: hidden;
            transition: opacity 200ms var(--ulcs-ease-std), visibility 200ms;
            z-index: 2147483646;
            will-change: opacity;
        }
        .ulcs-overlay.active { opacity: 1; visibility: visible; }

        /* Header */
        .ulcs-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            padding: 20px 20px 14px 24px;
            border-bottom: 1px solid var(--ulcs-line);
            background: #fff;
            flex: 0 0 auto;
        }
        .ulcs-panel-title {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: -.01em;
            line-height: 1.25;
            color: var(--iev-navy);
        }
        .ulcs-close {
            width: 40px;
            height: 40px;
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 0;
            border-radius: 50%;
            cursor: pointer;
            background: transparent;
            color: var(--iev-navy);
            transition: background-color 150ms var(--ulcs-ease-std), color 150ms var(--ulcs-ease-std);
        }
        .ulcs-close:hover { background: var(--ulcs-hover-bg); color: var(--iev-cyan); }
        .ulcs-close:active { transform: scale(.96); }
        .ulcs-close svg { width: 18px; height: 18px; }

        /* Content */
        .ulcs-panel-content {
            padding: 16px 24px 24px;
            overflow-y: auto;
            overscroll-behavior: contain;
            flex: 1 1 auto;
            min-height: 0;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: var(--ulcs-line-strong) transparent;
        }
        .ulcs-section { margin-bottom: 22px; }
        .ulcs-section:last-child { margin-bottom: 0; }
        .ulcs-section h4 {
            margin: 0 0 8px 2px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: var(--ulcs-navy-72);
        }

        /* Search */
        .ulcs-search { margin-bottom: 10px; }
        .ulcs-search-input {
            width: 100%;
            height: 44px;
            padding: 0 14px;
            background: var(--iev-dancer-cloud);
            border: 1.5px solid transparent;
            border-radius: 12px;
            font-size: 15px;
            font-family: var(--ulcs-font);
            color: var(--iev-navy);
            transition: border-color 150ms var(--ulcs-ease-std), background-color 150ms var(--ulcs-ease-std), box-shadow 150ms var(--ulcs-ease-std);
        }
        .ulcs-search-input::placeholder { color: var(--ulcs-navy-72); }
        .ulcs-search-input:focus {
            outline: none;
            background: #fff;
            border-color: var(--iev-cyan);
            box-shadow: 0 0 0 3px rgba(42, 175, 211, .22);
        }

        /* Options — one grouped list per section (rows + hairlines, like the header drawer) */
        .ulcs-options {
            display: flex;
            flex-direction: column;
            gap: 0;
            background: #fff;
            border: 1px solid var(--ulcs-line-strong);
            border-radius: 14px;
            overflow: hidden;
        }
        .ulcs-option {
            display: flex;
            align-items: center;
            gap: 12px;
            min-height: 54px;
            padding: 10px 14px;
            margin: 0;
            background: #fff;
            border: 0;
            border-radius: 0;
            box-shadow: inset 0 1px 0 var(--ulcs-line);
            cursor: pointer;
            transition: background-color 120ms var(--ulcs-ease-std);
            width: 100%;
            text-align: left;
            position: relative;
            font-family: var(--ulcs-font);
            color: var(--iev-navy);
        }
        .ulcs-option:first-child { box-shadow: none; }
        @media (hover: hover) { .ulcs-option:hover { background: var(--ulcs-hover-bg); } }
        .ulcs-option:active { background: rgba(27, 42, 74, .08); }
        .ulcs-option.active { background: var(--iev-dancer-cloud); }
        .ulcs-option.active .ulcs-opt-name { font-weight: 700; }
        .ulcs-option.hidden { display: none; }
        .ulcs-opt-flag {
            font-size: 22px;
            line-height: 1;
            flex-shrink: 0;
            width: 28px;
            text-align: center;
            font-family: var(--ulcs-emoji);
            font-variant-emoji: emoji;
        }
        .ulcs-opt-text {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 1px;
        }
        .ulcs-opt-name {
            font-size: 15px;
            font-weight: 600;
            line-height: 1.3;
            color: var(--iev-navy);
        }
        .ulcs-opt-native,
        .ulcs-opt-code {
            font-size: 13px;
            font-weight: 400;
            line-height: 1.3;
            color: var(--iev-slate);
        }
        .ulcs-check {
            width: 18px;
            height: 18px;
            color: var(--iev-navy);
            flex-shrink: 0;
            display: none;
        }
        .ulcs-option.active .ulcs-check { display: block; }

        /* Show more — a row that closes the currency list */
        .ulcs-show-more {
            width: 100%;
            min-height: 48px;
            background: #fff;
            border: 0;
            box-shadow: inset 0 1px 0 var(--ulcs-line);
            color: var(--iev-navy);
            font-family: var(--ulcs-font);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            padding: 12px 14px;
            margin: 0;
            text-align: center;
            transition: background-color 120ms var(--ulcs-ease-std);
        }
        .ulcs-show-more:hover { background: var(--ulcs-hover-bg); }

        /* ========== Account page bar (Pacific time) ========== */
        .ulcs-account-bar {
            position: fixed;
            top: 13px;
            right: 20px;
            z-index: 1037;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .ulcs-time-display {
            background: var(--iev-navy);
            color: #fff;
            padding: 0 18px;
            border-radius: 9999px;
            font-family: var(--ulcs-font);
            display: flex;
            align-items: center;
            gap: 12px;
            height: 40px;
            min-width: 200px;
            border: 0;
            box-shadow: 0 10px 24px -12px rgba(27, 42, 74, .45);
        }
        .ulcs-time-value {
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .ulcs-date-value {
            font-size: 12px;
            font-weight: 400;
            color: rgba(255, 255, 255, .72);
            white-space: nowrap;
            padding-left: 12px;
            border-left: 1px solid rgba(255, 255, 255, .2);
        }

        /* ========== Angular/TranslatePress compat ========== */
        [ng-repeat] .trp-edit-translation,
        [ng-model] .trp-edit-translation,
        .ulcs-time-display .trp-edit-translation { display: none !important; }
        .ulcs-time-display, .ulcs-time-display * { translate: no !important; }

        /* ========== Mobile: bottom sheet ========== */
        @media (max-width: 640px) {
            .ulcs-dropdown { display: none !important; } /* the sheet replaces the hover menu */
            .ulcs-trigger-flag { font-size: 18px; }
            .ulcs-trigger-curr, .ulcs-trigger-sep { font-size: 12px; }

            .ulcs-panel {
                top: auto;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
                max-width: 100%;
                max-height: calc(100% - 40px); /* % of the layout viewport — tracks iOS Safari toolbars, unlike vh */
                border-radius: 20px 20px 0 0;
                transform: translateY(100%);
                transition: opacity 200ms var(--ulcs-ease-out), transform 280ms var(--ulcs-ease-out), visibility 280ms;
                padding-bottom: env(safe-area-inset-bottom, 0px);
            }
            .ulcs-panel.active { transform: translateY(0); }
            .ulcs-panel::before { /* grabber */
                content: '';
                display: block;
                width: 36px;
                height: 4px;
                border-radius: 2px;
                background: rgba(27, 42, 74, .16);
                margin: 10px auto 0;
                flex: 0 0 auto;
            }
            .ulcs-panel-header { padding: 8px 12px 12px 20px; }
            .ulcs-panel-title { font-size: 17px; }
            .ulcs-close { width: 44px; height: 44px; }
            .ulcs-panel-content { padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
            .ulcs-section { margin-bottom: 20px; }
            .ulcs-option { min-height: 52px; padding: 8px 12px; gap: 10px; }
            .ulcs-opt-flag { font-size: 22px; }
            .ulcs-opt-name { font-size: 15px; }
            .ulcs-opt-native, .ulcs-opt-code { font-size: 12px; }
            .ulcs-search-input { font-size: 16px; } /* prevents iOS zoom on focus */
            .ulcs-account-bar { flex-direction: column; align-items: flex-end; gap: 8px; right: 10px; top: 10px; }
            .ulcs-time-display { min-width: unset; padding: 0 12px; height: 36px; }
        }
        @media (max-width: 350px) {
            .ulcs-date-value { display: none; }
            .ulcs-panel-title { font-size: 16px; }
            .ulcs-option { padding: 8px 10px; }
            .ulcs-opt-flag { font-size: 20px; }
        }

        /* ========== Reduced motion ========== */
        @media (prefers-reduced-motion: reduce) {
            .ulcs-trigger, .ulcs-trigger-chevron, .ulcs-dropdown, .ulcs-panel, .ulcs-overlay, .ulcs-option, .ulcs-dd-option, .ulcs-close {
                transition-duration: 1ms !important;
            }
        }