/* Inter (self-hosted, CSP-safe) — consistent typeface across all devices. */
/* Inter — self-hosted STATIC weights (reliable on iOS; no variable axis to mis-render). */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/inter-latin-400.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/inter-ext-400.woff2') format('woff2'); unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/inter-latin-500.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/inter-ext-500.woff2') format('woff2'); unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/inter-latin-600.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/inter-ext-600.woff2') format('woff2'); unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/inter-latin-700.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/inter-ext-700.woff2') format('woff2'); unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/inter-latin-800.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/inter-ext-800.woff2') format('woff2'); unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:900; font-display:swap; src:url('/assets/fonts/inter-latin-900.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:900; font-display:swap; src:url('/assets/fonts/inter-ext-900.woff2') format('woff2'); unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ============================================================================
   Storefront — the public-facing site. Self-contained (no admin app.css).
   Token-driven; light + dark themes. Accent inherits the Zebroon teal brand.
   ========================================================================== */

:root {
    --font: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    --bg: #f4f7f9;
    --surface: #ffffff;
    --surface-2: #eef3f6;
    --ink: #0b1a2b;
    --ink-2: #26384b;
    --muted: #5c6b7d;
    --faint: #8a98a8;
    --line: #e4eaef;
    --line-2: #d3dbe3;

    --accent: #0d9488;
    --accent-2: #0b7f75;
    --accent-ink: #ffffff;
    --accent-soft: #e6faf5;
    --gold: #f5b83d;

    --ok: #0f9d6a;      --ok-soft: #e7f7ef;
    --warn: #b7791f;    --warn-soft: #fbf3e2;
    --danger: #d64545;  --danger-soft: #fdecec;

    --hero-1: #0b2a33;
    --hero-2: #0d5148;
    --hero-3: #0d9488;
    --on-hero: #eafcf8;

    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 24px;
    --shadow-sm: 0 1px 2px rgba(11, 26, 43, .05), 0 2px 6px rgba(11, 26, 43, .05);
    --shadow: 0 6px 20px rgba(11, 26, 43, .08);
    --shadow-lg: 0 18px 50px rgba(11, 26, 43, .16);
    --shell: 1160px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0a121c;
        --surface: #101e2d;
        --surface-2: #16283b;
        --ink: #eaf1f8;
        --ink-2: #cbd8e6;
        --muted: #93a5b8;
        --faint: #6c7f93;
        --line: #1e344a;
        --line-2: #294057;
        --accent: #2dd4bf;
        --accent-2: #14b8a6;
        --accent-ink: #06231f;
        --accent-soft: #10312e;
        --hero-1: #061019;
        --hero-2: #0a3630;
        --hero-3: #0f6b60;
        --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
        --shadow: 0 8px 24px rgba(0,0,0,.45);
        --shadow-lg: 0 20px 55px rgba(0,0,0,.6);
    }
}
:root[data-theme="dark"] {
    --bg: #0a121c;
    --surface: #101e2d;
    --surface-2: #16283b;
    --ink: #eaf1f8;
    --ink-2: #cbd8e6;
    --muted: #93a5b8;
    --faint: #6c7f93;
    --line: #1e344a;
    --line-2: #294057;
    --accent: #2dd4bf;
    --accent-2: #14b8a6;
    --accent-ink: #06231f;
    --accent-soft: #10312e;
    --hero-1: #061019;
    --hero-2: #0a3630;
    --hero-3: #0f6b60;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow: 0 8px 24px rgba(0,0,0,.45);
    --shadow-lg: 0 20px 55px rgba(0,0,0,.6);
}
:root[data-theme="light"] {
    --bg: #f4f7f9;
    --surface: #ffffff;
    --surface-2: #eef3f6;
    --ink: #0b1a2b;
    --ink-2: #26384b;
    --muted: #5c6b7d;
    --faint: #8a98a8;
    --line: #e4eaef;
    --line-2: #d3dbe3;
    --accent: #0d9488;
    --accent-2: #0b7f75;
    --accent-ink: #ffffff;
    --accent-soft: #e6faf5;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
/* Inter on EVERY page (store, account, auth) — the account-app body used to
   inherit the browser default serif because font-family was only on body.store. */
body { font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.store {
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    font-size: 15.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
.mono { font-family: var(--mono); }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 22px; }

.skip-link {
    position: absolute; left: -999px; top: 8px; z-index: 200;
    background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { left: 12px; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent-2);
}
:root[data-theme="dark"] .eyebrow, .site-header.on-dark .eyebrow { color: var(--accent); }

/* ------------------------------------------------------------- buttons --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: inherit; font-weight: 650; font-size: 14.5px;
    padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
    cursor: pointer; white-space: nowrap; transition: transform .12s, background .15s, box-shadow .15s, border-color .15s;
}
.btn .ico { flex: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 16px -6px var(--accent); }
.btn-primary:hover { background: var(--accent-2); box-shadow: 0 10px 22px -8px var(--accent); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--muted); }
.btn-light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(4px); }
.btn-light:hover { background: rgba(255,255,255,.24); }
.btn-white { background: #fff; color: var(--hero-1); }
.btn-white:hover { background: #eafcf8; }
.btn-block { width: 100%; }
.btn-lg { padding: 14px 26px; font-size: 15.5px; }
.btn-sm { padding: 8px 15px; font-size: 13.5px; }

/* -------------------------------------------------------------- header --- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 22px; height: 68px; }
.site-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--ink); }
.site-logo img { height: 34px; width: auto; }
.logo-mark {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
    box-shadow: 0 6px 14px -6px var(--accent);
}
.site-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.site-nav a {
    padding: 8px 14px; border-radius: 999px; font-weight: 550; color: var(--ink-2);
    transition: background .14s, color .14s;
}
.site-nav a:hover { background: var(--surface-2); color: var(--ink); }
.site-nav a.is-active { color: var(--accent-2); background: var(--accent-soft); }
:root[data-theme="dark"] .site-nav a.is-active { color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.theme-btn {
    display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); cursor: pointer;
}
.theme-btn:hover { color: var(--ink); border-color: var(--line-2); }
.theme-btn .ico-moon { display: none; }
:root[data-theme="dark"] .theme-btn .ico-sun { display: none; }
:root[data-theme="dark"] .theme-btn .ico-moon { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-btn .ico-sun { display: none; }
    :root:not([data-theme="light"]) .theme-btn .ico-moon { display: block; }
}
.menu-btn { display: none; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); width: 42px; height: 42px; border-radius: 12px; cursor: pointer; place-items: center; }

.mobile-menu { position: fixed; inset: 68px 0 0; z-index: 90; background: var(--surface); padding: 20px 22px; overflow-y: auto; border-top: 1px solid var(--line); }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a { padding: 14px 6px; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--line); }
.mobile-menu-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

/* ---------------------------------------------------------------- hero --- */
.hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--hero-1), var(--hero-2) 55%, var(--hero-3)); color: var(--on-hero); }
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(1100px 500px at 82% -10%, rgba(255,255,255,.14), transparent 60%); pointer-events: none; }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 42px; align-items: center; padding: 76px 22px 88px; }
.hero-copy .eyebrow { color: #8ff0e0; }
.hero h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 850; margin: 16px 0 0; color: #fff; }
.hero-sub { margin-top: 18px; font-size: clamp(16px, 1.8vw, 19px); color: #cfeee8; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 34px; }
.hero-trust .ht { display: flex; align-items: baseline; gap: 8px; }
.hero-trust .ht b { font-size: 22px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.hero-trust .ht span { font-size: 13px; color: #a9ddd4; }

/* slideshow */
.slider { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3.1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; display: flex; flex-direction: column; justify-content: flex-end; }
.slide.is-active { opacity: 1; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide-body { position: relative; z-index: 2; padding: 26px; background: linear-gradient(to top, rgba(6,16,25,.82), transparent); }
.slide-body h3 { color: #fff; font-size: 22px; }
.slide-body p { color: #dfeeeb; font-size: 14px; margin-top: 6px; }
.slide-body .btn { margin-top: 14px; }
.slide-empty { display: grid; place-items: center; text-align: center; padding: 30px; color: #cfeee8; }
.slide-empty .logo-mark { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 14px; }
.slider-dots { position: absolute; z-index: 5; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; }
.slider-dots button { width: 8px; height: 8px; padding: 0; border-radius: 999px; border: none; background: rgba(255,255,255,.5); cursor: pointer; transition: width .2s, background .2s; }
.slider-dots button.is-active { width: 22px; background: #fff; }
.slider-arrow { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 999px; border: none; background: rgba(6,16,25,.4); color: #fff; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(4px); }
.slider-arrow:hover { background: rgba(6,16,25,.65); }
.slider-arrow.prev { left: 12px; } .slider-arrow.next { right: 12px; }

/* --------------------------------------------------------- trust strip --- */
.trust-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 22px 22px; }
.trust-item { display: flex; align-items: center; gap: 13px; }
.trust-item .ti-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-2); flex: none; }
:root[data-theme="dark"] .trust-item .ti-ico { color: var(--accent); }
.trust-item b { display: block; font-size: 15px; }
.trust-item span { font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------------ sections --- */
.section { padding: 68px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.section-head h2 { font-size: clamp(25px, 3.2vw, 34px); font-weight: 820; }
.section-head p { color: var(--muted); margin-top: 10px; max-width: 54ch; }
.section-head .link-more { color: var(--accent-2); font-weight: 650; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
:root[data-theme="dark"] .section-head .link-more { color: var(--accent); }
.section-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------- service cards --- */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svc-card {
    display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .15s, border-color .15s; position: relative;
}
.svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.svc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.svc-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.svc-badge.imei { background: var(--accent-soft); color: var(--accent-2); }
.svc-badge.server { background: #eef0ff; color: #5b52d6; }
:root[data-theme="dark"] .svc-badge.imei { color: var(--accent); }
:root[data-theme="dark"] .svc-badge.server { background: #23234a; color: #a9a2ff; }
.svc-hot { font-size: 11px; font-weight: 700; color: var(--gold); display: inline-flex; align-items: center; gap: 4px; }
.svc-card h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.svc-card h3 a::after { content: ""; position: absolute; inset: 0; }
.svc-grp { font-size: 12.5px; color: var(--faint); margin-top: 3px; }
.svc-desc { font-size: 13.5px; color: var(--muted); margin-top: 10px; flex: 1; }
.svc-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.svc-price { min-width: 0; }
.svc-price small { display: block; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.svc-price b { font-size: 19px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; word-break: break-word; }
.svc-foot .btn { position: relative; z-index: 2; flex: none; box-shadow: none; }
/* When the price is long, let the button take its own full-width row below. */
.svc-card .svc-foot .btn { margin-left: auto; }

/* ------------------------------------------------------- category grid --- */
.cat-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.cat-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.cat-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cat-panel-head .cp-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--accent-soft); color: var(--accent-2); flex: none; }
:root[data-theme="dark"] .cat-panel-head .cp-ico { color: var(--accent); }
.cat-panel-head h3 { font-size: 19px; }
.cat-panel-head span { font-size: 13px; color: var(--muted); }
.cat-list { display: flex; flex-direction: column; gap: 4px; }
.cat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px; border-radius: 12px; transition: background .13s; }
.cat-row:hover { background: var(--surface-2); }
.cat-row .cr-name { font-weight: 600; font-size: 14.5px; }
.cat-row .cr-count { font-size: 12px; color: var(--faint); margin-left: 8px; font-weight: 500; }
.cat-row .cr-price { font-size: 13px; color: var(--muted); white-space: nowrap; }
.cat-row .cr-price b { color: var(--ink); font-weight: 700; }
.cat-empty { color: var(--muted); font-size: 14px; padding: 8px; }

/* ------------------------------------------------------- how it works ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; position: relative; box-shadow: var(--shadow-sm); }
.step-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 800; font-size: 18px; margin-bottom: 16px; }
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 14px; }
.step-line { position: absolute; top: 48px; right: -13px; color: var(--line-2); z-index: 2; }
.steps .step:last-child .step-line { display: none; }

/* ---------------------------------------------------------- CTA band ----- */
.cta-band { background: linear-gradient(120deg, var(--hero-2), var(--hero-3)); color: #fff; border-radius: var(--radius-lg); padding: 48px; text-align: center; box-shadow: var(--shadow-lg); }
.cta-band h2 { font-size: clamp(24px, 3vw, 34px); color: #fff; }
.cta-band p { color: #d3f1ec; margin: 12px auto 0; max-width: 52ch; }
.cta-band .hero-cta { justify-content: center; }

/* ----------------------------------------------------- page header band -- */
.page-hero { background: linear-gradient(135deg, var(--hero-1), var(--hero-2) 60%, var(--hero-3)); color: #fff; padding: 52px 0 58px; position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 360px at 85% -20%, rgba(255,255,255,.12), transparent 60%); }
.page-hero .shell { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(28px, 4vw, 42px); color: #fff; margin-top: 12px; }
.page-hero p { color: #cfeee8; margin-top: 12px; max-width: 60ch; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #a9ddd4; }
.crumbs a:hover { color: #fff; }

/* --------------------------------------------------- catalog / filters --- */
.catalog { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: start; padding: 40px 0 70px; }
.filters { position: sticky; top: 90px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.filters h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin: 18px 0 10px; }
.filters h4:first-child { margin-top: 0; }
.filter-type { display: flex; gap: 6px; background: var(--surface-2); padding: 4px; border-radius: 999px; }
.filter-type a { flex: 1; text-align: center; padding: 8px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); }
.filter-type a.is-active { background: var(--surface); color: var(--accent-2); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .filter-type a.is-active { color: var(--accent); }
.filter-cats { display: flex; flex-direction: column; gap: 1px; max-height: 320px; overflow-y: auto; margin: 0 -6px; }
.filter-cats a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--ink-2); }
.filter-cats a:hover { background: var(--surface-2); }
.filter-cats a.is-active { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }
:root[data-theme="dark"] .filter-cats a.is-active { color: var(--accent); }
.filter-cats a span { color: var(--faint); font-size: 12px; }

.catalog-main { min-width: 0; }
.catalog-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.catalog-bar .count { color: var(--muted); font-size: 14px; }
.searchbar { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 16px; min-width: 260px; }
.searchbar input { border: none; background: none; outline: none; font: inherit; color: var(--ink); width: 100%; }
.searchbar .ico { color: var(--faint); flex: none; }
.svc-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.empty-state { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty-state .es-ico { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 18px; background: var(--surface-2); color: var(--faint); margin: 0 auto 16px; }
.empty-state h3 { font-size: 19px; color: var(--ink); margin-bottom: 8px; }

/* pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 38px; }
.pagination a, .pagination span { min-width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: 14px; }
.pagination a:hover { border-color: var(--accent); color: var(--accent-2); }
.pagination .is-current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pagination .is-disabled { opacity: .4; pointer-events: none; }
.pagination .gap { border: none; background: none; }

/* ------------------------------------------------------ service detail --- */
.detail { display: grid; grid-template-columns: 1fr 400px; gap: 34px; align-items: start; padding: 40px 0 70px; }
.detail-main { min-width: 0; }
.detail-title { font-size: clamp(24px, 3.4vw, 34px); font-weight: 820; margin-top: 8px; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.detail-tag { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.detail-tag .ico { color: var(--accent-2); }
:root[data-theme="dark"] .detail-tag .ico { color: var(--accent); }
.prose { margin-top: 26px; color: var(--ink-2); font-size: 15.5px; }
.prose h2 { font-size: 22px; margin: 30px 0 12px; }
.prose h3 { font-size: 18px; margin: 24px 0 10px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose a { color: var(--accent-2); text-decoration: underline; }
.prose strong { color: var(--ink); }

.order-card { position: sticky; top: 90px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.order-card-head { padding: 22px 24px; background: linear-gradient(135deg, var(--hero-2), var(--hero-3)); color: #fff; }
.order-card-head .oc-price { display: flex; align-items: baseline; gap: 8px; }
.order-card-head .oc-price b { font-size: 32px; font-weight: 850; font-variant-numeric: tabular-nums; }
.order-card-head .oc-price small { color: #cbeee8; font-size: 13px; }
.order-card-head .oc-delivery { margin-top: 8px; font-size: 13px; color: #d3f1ec; display: inline-flex; align-items: center; gap: 6px; }
.order-form { padding: 22px 24px 26px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 650; margin-bottom: 7px; color: var(--ink-2); }
.field .req { color: var(--danger); }
.field input, .field select, .field textarea {
    width: 100%; font: inherit; font-size: 15px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); outline: none;
    transition: border-color .13s, box-shadow .13s;
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field .hint { font-size: 12px; color: var(--faint); margin-top: 6px; }
.qty-row { display: flex; align-items: center; gap: 12px; }
.qty-stepper { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.qty-stepper button { width: 42px; height: 44px; border: none; background: var(--surface-2); color: var(--ink); font-size: 20px; cursor: pointer; }
.qty-stepper button:hover { background: var(--line); }
.qty-stepper input { width: 56px; text-align: center; border: none; border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); border-radius: 0; }
.order-total { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 16px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.order-total span { color: var(--muted); font-size: 14px; }
.order-total b { font-size: 24px; font-weight: 820; font-variant-numeric: tabular-nums; }
.order-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.order-note .ico { color: var(--accent-2); flex: none; margin-top: 1px; }

/* related */
.related { padding-top: 30px; margin-top: 34px; border-top: 1px solid var(--line); }
.related h2 { font-size: 20px; margin-bottom: 18px; }

/* ------------------------------------------------------------ checkout --- */
.checkout-wrap { max-width: 760px; margin: 0 auto; padding: 50px 22px 80px; }
.checkout-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; row-gap: 8px; margin-bottom: 30px; color: var(--muted); font-size: 13px; }
.checkout-steps .cs { display: inline-flex; align-items: center; gap: 8px; }
.checkout-steps .cs b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--surface-2); font-size: 13px; color: var(--muted); }
.checkout-steps .cs.done b { background: var(--ok); color: #fff; }
.checkout-steps .cs.active b { background: var(--accent); color: var(--accent-ink); }
.checkout-steps .cs.active { color: var(--ink); font-weight: 600; }
.checkout-steps .cs-sep { width: 30px; height: 2px; background: var(--line-2); border-radius: 2px; }

.gate-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.gate-summary { padding: 26px 30px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.gate-summary h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 16px; }
.summary-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 14.5px; }
.summary-row .sr-label { color: var(--muted); }
.summary-row .sr-value { font-weight: 600; text-align: right; word-break: break-word; }
.summary-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.summary-total b { font-size: 24px; font-weight: 820; }
.gate-body { padding: 30px; text-align: center; }
.gate-body h1 { font-size: 26px; margin-bottom: 10px; }
.gate-body > p { color: var(--muted); max-width: 46ch; margin: 0 auto 24px; }
.gate-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.gate-reassure { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.gate-reassure div { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.gate-reassure .ico { color: var(--ok); }

/* Signed-in checkout: pay from wallet (own classes — must NOT clash with the
   password-field .pw-row used by the show/hide eye toggle) */
.pay-wallet { max-width: 420px; margin: 0 auto 22px; }
.wpay-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
.wpay-label { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; color: var(--ink-2); font-size: 14px; }
.wpay-label .ico { color: var(--accent-2); }
.wpay-bal { font-size: 20px; font-weight: 820; color: var(--ink); }
.wpay-short { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, #dc2626 9%, var(--surface)); color: #dc2626; font-size: 13.5px; font-weight: 600; }
.wpay-short .ico { flex: none; }
.pay-form { max-width: 420px; margin: 0 auto; text-align: left; }
.pay-form .fld { margin-bottom: 16px; }
.pay-form .btn-block { text-align: center; }
.pay-body h1 { margin-top: 4px; }

/* ------------------------------------------------------------- contact --- */
.contact-grid { display: grid; grid-template-columns: 1fr 380px; gap: 34px; align-items: start; padding: 46px 0 76px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-pad { padding: 28px; }
.contact-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-info { display: flex; flex-direction: column; gap: 2px; }
.contact-info .ci-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 12px; }
.contact-info .ci-row:hover { background: var(--surface-2); }
.contact-info .ci-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-2); flex: none; }
:root[data-theme="dark"] .contact-info .ci-ico { color: var(--accent); }
.contact-info .ci-row b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 700; display: block; }
.contact-info .ci-row span, .contact-info .ci-row a { font-size: 15px; color: var(--ink); }
.contact-info .ci-row a:hover { color: var(--accent-2); }

/* ------------------------------------------------------ legal / prose ---- */
.doc { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; padding: 44px 0 80px; }
.doc-nav { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 2px; }
.doc-nav a { padding: 10px 14px; border-radius: 10px; font-size: 14px; color: var(--ink-2); font-weight: 550; }
.doc-nav a:hover { background: var(--surface-2); }
.doc-nav a.is-active { background: var(--accent-soft); color: var(--accent-2); }
:root[data-theme="dark"] .doc-nav a.is-active { color: var(--accent); }
.doc-body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 44px; box-shadow: var(--shadow-sm); max-width: 76ch; }
.doc-body h1 { font-size: 30px; margin-bottom: 6px; }
.doc-updated { color: var(--faint); font-size: 13px; margin-bottom: 24px; }
.doc-body .prose { margin-top: 0; }
.doc-body .prose p { white-space: pre-line; }

/* --------------------------------------------------------------- 404 ----- */
.nf { text-align: center; padding: 100px 22px 120px; }
.nf h1 { font-size: 80px; font-weight: 850; color: var(--accent); letter-spacing: -.04em; }
.nf p { color: var(--muted); margin: 8px 0 26px; font-size: 17px; }

/* ------------------------------------------------------------- footer ---- */
.site-footer { background: var(--hero-1); color: #cfe0e6; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding: 58px 22px 46px; }
.footer-brand .footer-logo { color: #fff; margin-bottom: 16px; }
.footer-brand .footer-logo img { height: 30px; }
.footer-brand .logo-word { color: #fff; }
.footer-about { color: #9fb6bf; font-size: 14px; max-width: 38ch; }
.footer-hours { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: #7fe6d6; }
.footer-hours .ico { color: var(--accent); flex: none; }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.footer-social a {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255,255,255,.08); color: #cfe0e6; border: 1px solid rgba(255,255,255,.1);
    transition: background .14s, color .14s, transform .14s, border-color .14s;
}
.footer-social a:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-2px); }
.footer-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.footer-col h4 { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
.footer-col a, .footer-addr { display: inline-flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 14px; color: #a9c0c8; transition: color .13s; }
.footer-col a:hover { color: #fff; }
.footer-col a .ico, .footer-addr .ico { color: var(--accent); flex: none; opacity: .9; }
.footer-addr { color: #9fb6bf; align-items: flex-start; }
.footer-bar { border-top: 1px solid rgba(255,255,255,.09); }
.footer-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-size: 13px; color: #86a0a8; flex-wrap: wrap; }
.footer-legal-row { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-legal-row a { color: #86a0a8; }
.footer-legal-row a:hover { color: #fff; }

/* ------------------------------------------- feedback (centered popup) ---- */
.store-toast { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; }
.store-toast-backdrop { position: absolute; inset: 0; background: rgba(6, 16, 25, .42); backdrop-filter: blur(2px); }
.store-toast-card { position: relative; width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 26px 24px; text-align: center; animation: toastIn .18s ease; }
.store-toast .toast-ico { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-2); }
:root[data-theme="dark"] .store-toast .toast-ico { color: var(--accent); }
.store-toast-error .toast-ico { background: var(--danger-soft, #fdecec); color: var(--danger, #d64545); }
.store-toast .toast-msg { color: var(--ink); font-size: 15px; line-height: 1.55; margin: 0 0 18px; }
@keyframes toastIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

.alert { padding: 13px 16px; border-radius: 12px; font-size: 14px; margin-bottom: 18px; display: flex; gap: 10px; align-items: flex-start; }
.alert-danger { background: var(--danger-soft); color: var(--danger); }
.alert .ico { flex: none; margin-top: 1px; }

.hp-field { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 1000px) {
    .hero-inner { grid-template-columns: 1fr; gap: 34px; padding: 52px 22px 64px; }
    .slider { max-width: 520px; }
    .svc-grid, .svc-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
    .cat-columns { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .step-line { display: none; }
    .detail { grid-template-columns: 1fr; }
    /* Show the order form FIRST on mobile — the grid item is the <aside>, so the
       order must be set there (not on .order-card, which isn't a grid child). */
    .detail > aside { order: -1; }
    .order-card { position: static; }
    .contact-grid { grid-template-columns: 1fr; }
    .doc { grid-template-columns: 1fr; }
    .doc-nav { position: static; flex-direction: row; flex-wrap: wrap; }
    .catalog { grid-template-columns: 1fr; }
    .filters { position: static; }
    .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; padding: 44px 22px 36px; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .site-nav, .hide-sm { display: none; }
    /* Language + currency pickers move into the mobile drawer, so the header row
       can't overflow on narrow phones. */
    .lang-menu, .cur-menu { display: none; }
    .header-inner { gap: 12px; }
    .menu-btn { display: grid; }
    .section { padding: 48px 0; }
    .section-head { flex-direction: column; align-items: flex-start; }
    .svc-grid, .svc-grid.cols-3 { grid-template-columns: 1fr; }
    .cta-band { padding: 34px 24px; }
    .doc-body { padding: 28px 22px; }
    .contact-form .field-row { grid-template-columns: 1fr; }
    .trust-grid { grid-template-columns: 1fr; }
    /* Keep the link lists two-up on phones so the footer stays compact instead
       of collapsing into one very long column. Brand block spans the row. */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; padding: 36px 22px 30px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-about { max-width: none; }
    .footer-social { margin-top: 16px; }
    .footer-bar-inner { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto; }
    .slide { transition: none; }
    .svc-card, .btn { transition: none; }
}

/* Locked "Powered by Zebroon" attribution (storefront footer) */
.powered-by { color: #86a0a8; }
.powered-by a { color: var(--accent); font-weight: 700; }
.powered-by a:hover { color: #fff; text-decoration: underline; }

/* Hidden-price lock chips (seller opted to hide prices from the public) */
.price-locked { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--accent-2); }
:root[data-theme="dark"] .price-locked { color: var(--accent); }
.svc-price.price-locked { padding: 4px 0; }
.oc-price.oc-locked { display: inline-flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 750; color: #fff; }
.summary-total .price-locked { color: var(--accent-2); font-weight: 750; }

/* Contact page — info-only (no form) */
.contact-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 760px; margin: 0 auto; }
.method-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm); transition: transform .14s, border-color .14s, box-shadow .14s; color: var(--ink); }
.method-card:not(.is-static):hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow); }
.method-card .m-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-2); flex: none; }
:root[data-theme="dark"] .method-card .m-ico { color: var(--accent); }
.method-card b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 700; }
.method-card > div span { font-size: 15.5px; color: var(--ink); word-break: break-word; }
.contact-follow { max-width: 760px; margin: 34px auto 0; text-align: center; }
.contact-follow h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 14px; }
.social-icons { display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.social-icons a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); box-shadow: var(--shadow-sm); transition: background .14s, color .14s, transform .14s, border-color .14s; }
.social-icons a:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-2px); }
.contact-note { display: flex; gap: 8px; align-items: flex-start; justify-content: center; max-width: 640px; margin: 34px auto 0; color: var(--muted); font-size: 14px; text-align: center; }
.contact-note .ico { color: var(--accent-2); flex: none; margin-top: 2px; }
@media (max-width: 720px) { .contact-methods { grid-template-columns: 1fr; } }

/* Carrier logo marquee (auto-scrolling strip) */
.carrier-band { padding: 44px 0; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.band-label { text-align: center; color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; margin-bottom: 26px; }
.logo-marquee {
    position: relative; width: 100%; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-track { display: flex; width: max-content; gap: 14px; animation: marquee 40s linear infinite; will-change: transform; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-chip {
    flex: none; display: inline-flex; align-items: center; height: 46px; padding: 0 24px;
    border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line);
    color: var(--faint); font-weight: 800; font-size: 16px; letter-spacing: .01em; white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.logo-chip:hover { color: var(--ink); border-color: var(--line-2); }
/* Carrier chips carry their network's brand colour (dot + name) so the "we
   unlock" strip reads as a logo wall while staying legible on any background. */
.carrier-logo { gap: 10px; color: var(--ink-2); }
.carrier-logo .cc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cc, var(--line-2)); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc, transparent) 18%, transparent); }
.carrier-logo:hover { border-color: color-mix(in srgb, var(--cc, var(--line-2)) 45%, var(--line)); color: var(--ink); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) {
    .logo-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
    .logo-track .logo-chip[aria-hidden="true"] { display: none; }
}

/* Payment methods strip */
.pay-band { padding: 58px 0; text-align: center; }
.pay-band .eyebrow { margin-bottom: 12px; }
.pay-title { font-size: clamp(23px, 3vw, 30px); font-weight: 820; }
.pay-sub { color: var(--muted); margin: 10px auto 26px; max-width: 46ch; }
.pay-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pay-chip {
    display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    font-weight: 650; font-size: 14.5px; color: var(--ink-2); transition: transform .13s, border-color .13s;
}
.pay-chip:hover { transform: translateY(-2px); border-color: var(--line-2); }
.pay-chip .ico { color: var(--accent-2); flex: none; }
:root[data-theme="dark"] .pay-chip .ico { color: var(--accent); }

/* Payment provider logo cards */
.pay-logos { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.pay-logo {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: 120px; padding: 14px; border-radius: 16px;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    transition: transform .14s, border-color .14s, box-shadow .14s;
}
.pay-logo:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow); }
/* Marks sit on a fixed light plaque so brand colours (and the Apple/wallet
   currentColor marks) stay readable in both light and dark themes. */
.pay-logo-mark {
    height: 48px; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0 8px;
    background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 11px; color: #0f172a;
}
.pay-logo-mark svg { max-height: 26px; max-width: 100%; width: auto; display: block; }
.pay-logo-name { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.2; }
.pay-word { font-weight: 800; font-size: 15px; letter-spacing: -.02em; white-space: nowrap; }

/* Hero background slideshow (banner images) + YouTube video window */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; }
.hero-bg-slide.is-active { opacity: 1; }
.hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--hero-1) 93%, transparent) 0%,
        color-mix(in srgb, var(--hero-2) 82%, transparent) 52%,
        color-mix(in srgb, var(--hero-3) 50%, transparent) 100%);
}
.hero.hero-has-bg::after { opacity: .55; }
/* Keep the banner a consistent, prominent height even when the headline text
   is hidden (otherwise the hero collapses to just the buttons). */
.hero.hero-has-bg .hero-inner { min-height: 440px; }
.hero.hero-has-bg.hero-solo .hero-inner { min-height: 480px; }
@media (max-width: 720px) {
    .hero.hero-has-bg .hero-inner,
    .hero.hero-has-bg.hero-solo .hero-inner { min-height: 340px; }
}
.hero-video {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.16); background: #000;
}
.hero-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hero-solo .hero-inner { grid-template-columns: 1fr; max-width: 820px; }

/* Announcement popup (storefront home) */
.ann-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ann-backdrop { position: absolute; inset: 0; background: rgba(6, 16, 25, .55); backdrop-filter: blur(2px); }
.ann-card {
    position: relative; z-index: 1; width: 100%; max-width: 440px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: 30px 28px 28px; text-align: center;
    animation: annPop .28s cubic-bezier(.2,.8,.3,1.2) both;
}
@keyframes annPop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ann-card { animation: none; } }
.ann-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); cursor: pointer; }
.ann-x:hover { background: var(--line); color: var(--ink); }
.ann-title { font-size: 21px; font-weight: 800; color: var(--ink); margin: 4px 0 10px; text-wrap: balance; }
.ann-body { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.ann-body :first-child { margin-top: 0; } .ann-body :last-child { margin-bottom: 0; }
.ann-ok { margin-top: 22px; min-width: 140px; }
body.ann-open { overflow: hidden; }

/* Language switcher (header dropdown + mobile) */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 13px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-weight: 650; font-size: 13px; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover { color: var(--ink); border-color: var(--line-2); }
.lang-drop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 120; max-height: 340px; overflow-y: auto; }
.lang-drop a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: 14px; color: var(--ink-2); }
.lang-drop a:hover { background: var(--surface-2); }
.lang-drop a.is-active { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }
:root[data-theme="dark"] .lang-drop a.is-active { color: var(--accent); }
.lang-drop a em { font-style: normal; font-size: 11px; color: var(--faint); }
.mobile-switch-row { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.mobile-switch { display: block; }
.mobile-switch-label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.mobile-switch-label svg { color: var(--muted); }
.mobile-select { position: relative; }
.mobile-select select { width: 100%; appearance: none; -webkit-appearance: none; padding: 13px 40px 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.mobile-select select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mobile-select > svg { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); }

/* RTL (Arabic etc.) — keep letter-spacing off connected scripts, marquee LTR */
[dir="rtl"] .eyebrow, [dir="rtl"] .band-label, [dir="rtl"] .footer-col h4, [dir="rtl"] .svc-badge, [dir="rtl"] .svc-price small { letter-spacing: normal; }
[dir="rtl"] .logo-track { direction: ltr; }
[dir="rtl"] .lang-drop { right: auto; left: 0; }

/* Long, unbroken service names (e.g. 6S/6S+/SE/7/7P/8…) must never overflow */
.hero h1, .page-hero h1, .detail-title, .svc-card h3, .svc-card h3 a,
.cat-row .cr-name, .detail-tag, .prose { overflow-wrap: anywhere; word-break: break-word; }
.detail-main, .order-card, .catalog-main { min-width: 0; }

/* Header dropdowns: keep on-screen, never hang off the viewport edge */
.lang-drop { max-width: calc(100vw - 24px); }
@media (max-width: 560px) {
    .lang-menu { position: static; }
    .lang-drop { position: fixed; right: 12px; left: auto; top: 66px; min-width: 220px; }
}

/* ==================================================== customer account === */
.auth-wrap { display: flex; justify-content: center; padding: 48px 20px 72px; }
.auth-card {
    width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 34px 32px;
}
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head h1 { font-size: 25px; font-weight: 800; color: var(--ink); margin: 0 0 6px; text-wrap: balance; }
.auth-head p { color: var(--ink-2); font-size: 14.5px; margin: 0; }

.auth-steps { list-style: none; display: flex; gap: 4px; padding: 0; margin: 0 0 22px; }
.auth-steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.auth-steps li::before { content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.auth-steps li:first-child::before { display: none; }
.auth-steps li.done::before, .auth-steps li.current::before { background: var(--accent); }
.auth-steps .dot {
    position: relative; z-index: 1; width: 25px; height: 25px; border-radius: 50%;
    display: grid; place-items: center; font-size: 12px; font-weight: 700;
    background: var(--surface-2); color: var(--faint); border: 2px solid var(--line);
}
.auth-steps li.current .dot { background: var(--accent); color: #fff; border-color: var(--accent); }
.auth-steps li.done .dot { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.auth-steps em { font-style: normal; font-size: 10.5px; color: var(--faint); font-weight: 600; letter-spacing: .02em; }
.auth-steps li.current em { color: var(--ink); }

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.fld { display: flex; flex-direction: column; gap: 7px; }
.fld > span { font-size: 13px; font-weight: 650; color: var(--ink-2); }
.fld input, .fld select {
    width: 100%; height: 48px; padding: 0 14px; font-size: 15px; color: var(--ink);
    background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; outline: none;
}
.fld textarea:focus, .fld input:focus, .fld select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.otp-input { text-align: center; letter-spacing: .5em; font-size: 22px; font-weight: 700; font-family: var(--font-mono, monospace); }
.phone-row { display: flex; align-items: stretch; gap: 8px; }
.phone-row .dial {
    display: inline-flex; align-items: center; padding: 0 13px; font-weight: 700; color: var(--ink-2);
    background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 12px; white-space: nowrap;
}
.phone-row input { flex: 1; }

.auth-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.auth-actions .btn-block { flex: 1; }
.btn-block { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; height: 48px;
    background: var(--surface); color: var(--ink); font-weight: 650; font-size: 14.5px;
    border: 1.5px solid var(--line); border-radius: 12px; transition: border-color .15s, background .15s;
}
.btn-google:hover { border-color: var(--faint); background: var(--surface-2); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--faint); font-size: 12.5px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.auth-error {
    display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 11px 14px;
    background: #fef2f2; color: #b42318; border: 1px solid #fecaca; border-radius: 12px; font-size: 13.5px;
}
:root[data-theme="dark"] .auth-error { background: #3a1614; color: #fca5a5; border-color: #7c2d2d; }
.auth-alt, .auth-resend { text-align: center; margin: 18px 0 0; font-size: 14px; color: var(--ink-2); }
.auth-alt a { color: var(--accent); font-weight: 650; }
.linkish { background: none; border: 0; color: var(--accent); font-weight: 650; cursor: pointer; font-size: inherit; padding: 0; }

/* account dashboard stub */
.account-shell { padding: 40px 22px 70px; }
.acct-welcome { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.acct-welcome h1 { font-size: 27px; font-weight: 800; color: var(--ink); margin: 8px 0 4px; }
.acct-balance {
    background: linear-gradient(135deg, var(--hero-2), var(--hero-3)); color: #fff;
    border-radius: var(--radius-lg); padding: 28px 30px; box-shadow: var(--shadow-lg);
}
.acct-balance > span { font-size: 13px; opacity: .85; letter-spacing: .03em; text-transform: uppercase; }
.acct-balance strong { display: block; font-size: 40px; font-weight: 850; margin: 6px 0 20px; }
.acct-balance strong em { font-style: normal; font-size: 20px; font-weight: 700; opacity: .8; }
.acct-quick { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 480px) { .auth-card { padding: 26px 20px; } .auth-steps em { display: none; } }

/* password field with show/hide toggle */
.pw-row { position: relative; display: flex; align-items: center; }
.pw-row input { flex: 1; padding-right: 46px; }
.pw-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 9px;
    background: transparent; color: var(--faint); cursor: pointer;
}
.pw-toggle:hover { color: var(--ink-2); background: var(--surface-2); }
.pw-toggle.is-on { color: var(--accent); }

/* auth email/warn icon badge + inline field link */
.auth-icon {
    width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 18px;
    display: grid; place-items: center; color: var(--accent);
    background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.auth-icon-warn { color: #b7791f; background: #fbf3e2; box-shadow: inset 0 0 0 1px #f0d9a8; }
:root[data-theme="dark"] .auth-icon-warn { color: #fbbf24; background: #3a2f14; box-shadow: inset 0 0 0 1px #6b551f; }
.fld-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fld-link { font-size: 12.5px; font-weight: 650; color: var(--accent); }
.fld-link:hover { text-decoration: underline; }

/* ============================================ customer account app shell === */
body.account-app { background: var(--bg); }
.app-shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.app-backdrop { display: none; }
.app-side {
    position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
    background: var(--surface); border-right: 1px solid var(--line); padding: 18px 14px;
}
.app-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: var(--ink); padding: 6px 8px 18px; }
.app-brand img { height: 30px; width: auto; }
.app-nav { display: flex; flex-direction: column; gap: 3px; }
.app-nav a { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 11px; color: var(--ink-2); font-weight: 600; font-size: 14.5px; }
.app-nav a:hover { background: var(--surface-2); color: var(--ink); }
.app-nav a.is-active { background: var(--accent-soft); color: var(--accent-2); }
:root[data-theme="dark"] .app-nav a.is-active { color: var(--accent); }
.app-nav a svg { flex: none; }
.app-side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.app-side-link { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.app-side-link:hover { background: var(--surface-2); color: var(--ink); }
.app-powered { padding: 10px 12px 2px; font-size: 11.5px; color: var(--faint); }
.app-powered a { color: var(--accent); }

.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-top {
    position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px;
    height: 64px; padding: 0 24px; background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.app-burger { display: none; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); width: 40px; height: 40px; border-radius: 10px; cursor: pointer; place-items: center; }
.app-top-title { font-weight: 700; font-size: 16px; color: var(--ink); }
.app-top-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.app-balance { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; padding: 5px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.app-balance span { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.app-balance strong { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.app-user { position: relative; }
.app-user > summary { list-style: none; cursor: pointer; }
.app-user > summary::-webkit-details-marker { display: none; }
.app-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 800; font-size: 16px; }
.app-user-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 60; }
.app-user-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; display: flex; flex-direction: column; }
.app-user-head strong { color: var(--ink); font-size: 14px; } .app-user-head span { color: var(--faint); font-size: 12px; }
.app-user-menu a { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px; color: var(--ink-2); font-size: 14px; }
.app-user-menu a:hover { background: var(--surface-2); color: var(--ink); }

/* Logout is a POST form (CSRF-protected) styled to sit exactly where its old
   link did — display:contents removes the form box, the button inherits look. */
.logout-form { display: contents; }
button.app-side-link { width: 100%; font: inherit; cursor: pointer; background: none; border: 0; text-align: left; }
.app-user-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border-radius: 9px; font: inherit; font-size: 14px; color: var(--ink-2); background: none; border: 0; cursor: pointer; text-align: left; }
.app-user-menu button:hover { background: var(--surface-2); color: var(--ink); }
.app-content { padding: 26px 28px 60px; width: 100%; max-width: 100%; }

/* dashboard + shared account blocks */
.ac-welcome h2 { font-size: 24px; font-weight: 800; color: var(--ink); }
.ac-welcome p { color: var(--muted); margin-top: 3px; }
.ac-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; align-items: stretch; }
/* Wallet — refined credit-card treatment: layered radial mesh + a fine sheen line. */
.ac-balance-card {
    position: relative; overflow: hidden; isolation: isolate; color: #fff;
    border-radius: 22px; padding: 22px 24px; box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; gap: 18px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.18), transparent 45%),
        radial-gradient(90% 120% at 0% 100%, rgba(0,0,0,.22), transparent 55%),
        linear-gradient(135deg, var(--hero-1), var(--hero-3));
    border: 1px solid rgba(255,255,255,.10);
    animation: acCardIn .55s cubic-bezier(.22,.61,.36,1) both;
}
.ac-balance-card > * { position: relative; z-index: 1; }
/* Slow diagonal sheen sweeping across the card face. */
.ac-balance-card::before {
    content: ""; position: absolute; z-index: 0; top: -60%; left: -35%; width: 45%; height: 220%;
    transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
    animation: acCardShine 8s ease-in-out infinite;
}
/* Faint concentric rings in the corner for depth. */
.ac-balance-card::after {
    content: ""; position: absolute; z-index: 0; width: 260px; height: 260px; right: -70px; bottom: -110px; border-radius: 50%;
    background: radial-gradient(circle, transparent 38%, rgba(255,255,255,.10) 39%, transparent 42%, transparent 56%, rgba(255,255,255,.08) 57%, transparent 60%);
}
@keyframes acCardShine { 0%, 100% { left: -45%; } 55% { left: 125%; } }
@keyframes acCardIn { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .ac-balance-card { animation: none; }
    .ac-balance-card::before { animation: none; }
}
.ac-balance-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ac-balance-label { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .92; }
.ac-balance-label svg { opacity: .85; }
.ac-balance-badge { font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(4px); }
.ac-balance-mid { display: flex; flex-direction: column; gap: 3px; }
.ac-balance-cap { font-size: 12px; opacity: .72; }
.ac-balance-amt { font-size: 38px; font-weight: 850; line-height: 1; letter-spacing: -.5px; display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.ac-balance-amt em { font-style: normal; font-size: 15px; font-weight: 600; opacity: .72; letter-spacing: .04em; }
.ac-balance-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.ac-balance-sub { display: flex; gap: 20px; margin-top: auto; font-size: 13px; opacity: .9; }
.ac-balance-sub b { display: block; font-size: 16px; }
.ac-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ac-quick-item { display: flex; flex-direction: column; gap: 3px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.ac-quick-item:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.ac-qi-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-2); margin-bottom: 6px; }
:root[data-theme="dark"] .ac-qi-ico { color: var(--accent); }
.ac-quick-item b { color: var(--ink); font-size: 14.5px; } .ac-quick-item em { font-style: normal; color: var(--faint); font-size: 12.5px; }

.ac-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.ac-stat { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.ac-stat-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; }
.ac-stat b { display: block; font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ac-stat span { font-size: 12.5px; color: var(--muted); }
.ac-stat.tone-warn .ac-stat-ico { background: var(--warn-soft); color: var(--warn); }
.ac-stat.tone-info .ac-stat-ico { background: #e0f2fe; color: #0369a1; }
:root[data-theme="dark"] .ac-stat.tone-info .ac-stat-ico { background: #0c2b3f; color: #38bdf8; }
.ac-stat.tone-ok .ac-stat-ico { background: var(--ok-soft); color: var(--ok); }
.ac-stat.tone-danger .ac-stat-ico { background: var(--danger-soft); color: var(--danger); }

.ac-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; margin-top: 22px; }
.ac-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ac-panel-head h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--ink); }
.ac-empty { text-align: center; padding: 40px 20px; color: var(--faint); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ac-empty p { color: var(--muted); }

.ac-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.ac-page-head h2 { font-size: 22px; font-weight: 800; color: var(--ink); }
.ac-search { display: flex; align-items: center; gap: 9px; padding: 0 16px; height: 44px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--faint); flex: 1; min-width: 280px; max-width: 440px; }
.ac-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ac-search input { border: 0; background: none; outline: none; color: var(--ink); font: inherit; width: 100%; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
/* Orders filter row: IMEI/Server toggle on the left, status dropdown on the right. */
.ac-orders-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0; }
.ac-orders-filters .ac-chips { margin: 0; }
.ac-status-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.ac-status-filter span { font-weight: 600; }
.ac-status-filter select {
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer;
    padding: 8px 34px 8px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
.ac-status-filter select:hover { border-color: var(--accent); }
.ac-status-filter select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ac-chip { padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ac-chip:hover { border-color: var(--accent); }
.ac-chip.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ac-chip em { font-style: normal; opacity: .7; font-size: 11px; }
.ac-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.ac-svc { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.ac-svc:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.ac-svc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ac-svc-eta { font-size: 11.5px; color: var(--faint); display: inline-flex; align-items: center; gap: 4px; }
.ac-svc h3 { font-size: 15.5px; color: var(--ink); margin-bottom: 4px; }
.ac-svc h3 a:hover { color: var(--accent-2); }
.ac-svc-grp { font-size: 12.5px; color: var(--faint); margin-bottom: 12px; }
.ac-svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.ac-svc-price { font-weight: 800; color: var(--ink); }

.ac-form { display: flex; flex-direction: column; gap: 14px; }
.ac-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ac-form-2col .ac-form-actions { grid-column: 1 / -1; }
.ac-form .fld > span, .ac-form-2col .fld > span { font-size: 13px; font-weight: 650; color: var(--ink-2); }
.ac-form input, .ac-form select, .ac-form-2col input, .ac-form-2col select {
    width: 100%; height: 46px; padding: 0 13px; font-size: 15px; color: var(--ink);
    background: var(--surface); border: 1.5px solid var(--line); border-radius: 11px; outline: none;
}
.ac-form input:focus, .ac-form select:focus, .ac-form-2col input:focus, .ac-form-2col select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ac-form input:disabled { background: var(--surface-2); color: var(--muted); }
.ac-form-actions { display: flex; gap: 10px; }
.ac-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ac-sec-row b { color: var(--ink); }
.ac-sec-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--faint); }
.ac-sec-status.on { color: var(--ok); }
.ac-result { max-width: 220px; }
.small { font-size: 12px; } .tx-pill { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.tx-credit { background: var(--ok-soft); color: var(--ok); } .tx-debit { background: var(--warn-soft); color: var(--warn); }
.wt-up { color: var(--ok); } .wt-down { color: var(--warn); } .cell-sub-inline { font-size: 11px; color: var(--faint); }

@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
    /* Use dynamic viewport height + scroll + safe-area so the footer (Visit store /
       Sign out) is never hidden behind the iOS Safari toolbar on phones. */
    .app-side { position: fixed; left: 0; top: 0; z-index: 120; width: 260px; transform: translateX(-100%); transition: transform .25s;
                height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
    .app-shell.is-open .app-side { transform: none; box-shadow: var(--shadow-lg); }
    .app-shell.is-open .app-backdrop { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(6,16,25,.5); }
    .app-burger { display: grid; }
    .ac-grid-2, .ac-quick, .ac-form-2col { grid-template-columns: 1fr; }
    .ac-stats { grid-template-columns: 1fr 1fr; }
    .app-balance { display: none; }
    /* Keep the top bar from crowding: the page title truncates instead of pushing
       the controls off-screen, and "Add credit" collapses to its icon. */
    .app-top-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .app-addcredit { padding-left: 10px; padding-right: 10px; }
    .app-addcredit span, .app-addcredit .btn-label { display: none; }
}
@media (max-width: 600px) {
    .app-content { padding: 20px 16px 48px; }
    .ac-search { min-width: 0; max-width: none; width: 100%; }
    .app-top { gap: 10px; }
    .app-top-right { gap: 8px; }
}

/* account order page */
.account-app .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; font-size: 13.5px; margin-bottom: 16px; }
.account-app .back-link:hover { color: var(--ink); }
.ac-order { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ac-order-main { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px; }
.ac-order-head .svc-badge { margin-bottom: 12px; }
.ac-order-head h2 { font-size: 22px; font-weight: 800; color: var(--ink); }
.ac-order-desc { margin: 14px 0 4px; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.ac-order-desc p { margin: 0 0 9px; }
.ac-order-desc p:last-child { margin-bottom: 0; }
.ac-order-form { margin-top: 20px; }
.ac-order-summary { position: static; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.ac-order-summary h3 { font-size: 15px; color: var(--ink); margin-bottom: 14px; }
.ac-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ac-sum-row span { color: var(--muted); } .ac-sum-row b { color: var(--ink); text-align: right; }
.ac-sum-total { border-bottom: 0; padding-top: 14px; font-size: 16px; }
.ac-sum-total b { color: var(--accent-2); font-size: 20px; }
:root[data-theme="dark"] .ac-sum-total b { color: var(--accent); }
.ac-sum-wallet { display: flex; justify-content: space-between; margin: 12px 0; padding: 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; }
.ac-sum-wallet b.low { color: var(--danger); }
.ac-sum-note { display: flex; gap: 7px; margin-top: 14px; font-size: 12px; color: var(--faint); line-height: 1.5; }
@media (max-width: 820px) { .ac-order { grid-template-columns: 1fr; } .ac-order-summary { position: static; } }

/* account services dropdown selector */
.ac-select-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px; width: 100%; }
.ac-service-select { width: 100%; height: 52px; padding: 0 15px; font-size: 15.5px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; outline: none; }
.ac-service-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ac-select-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.ac-select-price { display: flex; flex-direction: column; }
.ac-select-price span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.ac-select-price strong { font-size: 24px; font-weight: 800; color: var(--accent-2); }
:root[data-theme="dark"] .ac-select-price strong { color: var(--accent); }
[data-service-go][aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* account services — custom searchable combobox (solid, readable) */
.combo { position: relative; }
.combo-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    height: 52px; padding: 0 16px; font: inherit; font-size: 15.5px; color: var(--ink);
    background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; text-align: left;
}
.combo-trigger:hover { border-color: var(--line-2); }
.combo-trigger[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.combo-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-trigger svg { flex: none; color: var(--faint); transition: transform .15s ease, color .15s ease; }
/* Nudge the customer while no service is chosen: bounce the chevron + highlight.
   Both stop once a service is picked (page reloads) or the dropdown is opened. */
.combo.needs-pick .combo-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.combo.needs-pick .combo-trigger svg { color: var(--accent); animation: combo-bob 1.15s ease-in-out infinite; }
@keyframes combo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.combo.is-hint-off .combo-trigger svg { animation: none; }
/* Empty-state nudge that fills the space below the picker until a service is chosen. */
.ac-pick-nudge {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 10px; padding: 40px 24px 48px; margin-top: 20px; color: var(--ink-2);
}
.ac-pick-arrow {
    display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
    color: var(--accent); background: var(--accent-soft);
    animation: combo-bob 1.15s ease-in-out infinite;
}
.ac-pick-nudge h3 { margin: 4px 0 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.ac-pick-nudge p { margin: 0; max-width: 380px; font-size: 14.5px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
    .combo.needs-pick .combo-trigger svg, .ac-pick-arrow { animation: none; }
}
.combo-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 70;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px;
    box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; max-height: 60vh;
}
.combo-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--faint); background: var(--surface); }
.combo-search input { flex: 1; border: 0; outline: none; background: none; font: inherit; font-size: 14.5px; color: var(--ink); }
.combo-list { overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.combo-group-head {
    position: sticky; top: 0; padding: 8px 12px 5px; font-size: 11px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: var(--accent-2); background: var(--surface);
}
:root[data-theme="dark"] .combo-group-head { color: var(--accent); }
.combo-opt {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
    padding: 11px 12px; border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: left; font: inherit;
}
.combo-opt:hover, .combo-opt:focus { background: var(--surface-2); }
.combo-opt.is-selected { background: var(--accent-soft); }
.combo-opt-name { color: var(--ink); font-size: 14.5px; font-weight: 550; }
.combo-opt-price { flex: none; color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.combo-empty { padding: 22px 14px; text-align: center; color: var(--faint); font-size: 14px; }

/* order block: spacing from the picker + divided description / order sections */
.ac-order { margin-top: 24px; }
.ac-order-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 9px; font-size: 13px; color: var(--muted); }
.ac-order-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ac-order-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.ac-order-section h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 14px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.ac-order-section h4 svg { color: var(--accent); flex: none; }
.ac-order-section .ac-order-form { margin-top: 0; }
.ac-order-section .ac-order-desc { margin: 0; }

/* summary card now contains the order form */
.ac-sum-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.ac-sum-form .fld > span { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.ac-order-summary .ac-sum-note { margin-top: 14px; }

/* long-description "view more" popup */
.desc-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.desc-backdrop { position: absolute; inset: 0; background: rgba(6,16,25,.55); backdrop-filter: blur(2px); }
.desc-card { position: relative; z-index: 1; width: 100%; max-width: 640px; max-height: 82vh; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.desc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.desc-head h3 { font-size: 16px; font-weight: 700; color: var(--ink); }
.desc-x { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); cursor: pointer; flex: none; }
.desc-x:hover { background: var(--line); color: var(--ink); }
.desc-body { padding: 20px 22px; overflow-y: auto; color: var(--ink-2); line-height: 1.65; font-size: 14.5px; }
.desc-body b, .desc-body strong { color: var(--ink); }
body.desc-open { overflow: hidden; }

/* description card: taller, with a clamp + fade for long text */
.ac-desc-section { display: flex; flex-direction: column; }
.ac-desc-clamp { position: relative; max-height: 240px; overflow: hidden; }
.ac-desc-clamp.is-open { max-height: none; }
.ac-desc-clamp .ac-order-desc { margin: 0; }
.ac-desc-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 88px; pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--surface)); }
.ac-desc-section [data-desc-more] { align-self: flex-start; margin-top: 14px; }

.desc-body p { margin: 0 0 11px; } .desc-body p:last-child { margin-bottom: 0; }

/* order: single/bulk mode toggle */
.ac-mode-tabs { display: flex; gap: 5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.ac-mode-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: inherit; font-weight: 650; font-size: 13.5px; cursor: pointer; }
.ac-mode-tab.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.ac-mode-tab svg { flex: none; }
[data-mode-block="bulk"] textarea { font-family: var(--mono); font-size: 13px; line-height: 1.5; }
.ac-bulk-info { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); margin: 2px 0 0; }
.ac-bulk-info b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------- wallet Visa-style card --- */
.wallet-card {
    position: relative; overflow: hidden; aspect-ratio: 1.586 / 1; min-height: 210px;
    border-radius: 20px; padding: 24px 26px; color: #eafcf8; isolation: isolate;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(45,212,191,.45), transparent 55%),
        radial-gradient(140% 160% at 0% 100%, rgba(13,148,136,.55), transparent 60%),
        linear-gradient(135deg, #06251f 0%, #0b3a33 45%, #0d5148 100%);
    box-shadow: 0 24px 50px -18px rgba(4, 30, 26, .8), inset 0 1px 0 rgba(255,255,255,.12);
    display: flex; flex-direction: column;
}
.wallet-card .wc-grid {
    position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 26px 26px; mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 70%);
}
.wallet-card .wc-shine {
    position: absolute; top: -40%; left: -30%; width: 60%; height: 200%; z-index: -1; transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
    animation: wcShine 6s ease-in-out infinite;
}
@keyframes wcShine { 0%, 100% { left: -40%; } 50% { left: 120%; } }
@media (prefers-reduced-motion: reduce) { .wallet-card .wc-shine { animation: none; } }
.wc-top { display: flex; align-items: flex-start; justify-content: space-between; }
.wc-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(234,252,248,.7); }
.wc-wave { color: rgba(234,252,248,.75); }
.wc-chip {
    display: block; width: 46px; height: 34px; margin: 14px 0 auto; border-radius: 7px;
    background: linear-gradient(135deg, #f5d67b, #d9a441); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
    position: relative;
}
.wc-chip::before, .wc-chip::after { content: ""; position: absolute; inset: 6px 0; border-top: 1px solid rgba(0,0,0,.25); border-bottom: 1px solid rgba(0,0,0,.25); }
.wc-chip::after { inset: 0 15px; border: 1px solid rgba(0,0,0,.25); border-radius: 3px; }
.wc-balance { font-size: 34px; font-weight: 850; letter-spacing: -.01em; color: #fff; font-variant-numeric: tabular-nums; margin-top: 8px; }
.wc-balance em { font-style: normal; font-size: 16px; font-weight: 700; color: rgba(234,252,248,.7); }
.wc-bottom { display: flex; align-items: flex-end; gap: 22px; margin-top: 12px; }
.wc-stat small { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: rgba(234,252,248,.55); }
.wc-stat b { font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }
.wc-holder { margin-left: auto; text-align: right; }
.wc-secured { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(234,252,248,.7); }
.wc-brand { display: block; font-weight: 800; letter-spacing: .02em; color: #fff; margin-top: 2px; }
/* Wallet page: equal split — left card + add-credit, right payment details. */
.wallet-grid { align-items: start; }
.wallet-desc { position: sticky; top: 84px; }
.pay-desc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--muted); padding: 34px 12px; opacity: .8; }
.pay-desc { line-height: 1.62; }
.pay-desc > :first-child { margin-top: 0; }
.pay-desc h1, .pay-desc h2, .pay-desc h3, .pay-desc h4 { margin: 14px 0 6px; font-weight: 800; }
.pay-desc p { margin: 0 0 10px; }
.pay-desc ul, .pay-desc ol { margin: 0 0 10px; padding-left: 20px; }
.pay-desc code { background: rgba(127,127,127,.14); padding: 2px 6px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.pay-desc img { max-width: 100%; height: auto; border-radius: 8px; }
.pay-desc a { color: var(--accent); text-decoration: underline; }
@media (max-width: 900px) { .wallet-desc { position: static; } }
/* Live deposit calculation preview (under the payment description). */
.deposit-preview { margin-top: 16px; padding: 13px 15px; border-radius: 12px; background: rgba(127,127,127,.08); border: 1px solid rgba(127,127,127,.16); display: flex; flex-direction: column; gap: 7px; }
.deposit-preview .dp-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.deposit-preview .dp-row > span { color: var(--muted); }
.deposit-preview .dp-row b { font-variant-numeric: tabular-nums; }
.deposit-preview .dp-total { border-top: 1px dashed rgba(127,127,127,.28); padding-top: 9px; margin-top: 1px; }
.deposit-preview .dp-total b { color: var(--accent); font-size: 16px; font-weight: 800; }

/* page head actions + clickable rows + tickets */
.ac-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-link { cursor: pointer; } .row-link:hover { background: var(--surface-2); }
.ac-new-ticket { margin-top: 16px; }
.ac-ticket { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; margin-top: 4px; }
.ac-ticket-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ac-ticket-ref { font-size: 12px; color: var(--faint); }
.ac-ticket-head h2 { font-size: 19px; color: var(--ink); margin-top: 4px; }
.ac-thread { display: flex; flex-direction: column; gap: 14px; margin: 18px 0; }
.ac-msg { max-width: 78%; padding: 12px 15px; border-radius: 14px; border: 1px solid var(--line); }
.ac-msg.staff { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px; }
.ac-msg.mine { align-self: flex-end; background: var(--accent-soft); border-bottom-right-radius: 4px; }
.ac-msg-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 5px; }
.ac-msg-meta b { color: var(--ink); } .ac-msg-meta span { color: var(--faint); }
.ac-msg-body { color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.ac-reply { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }

/* modern textareas (replace the old plain look) */
.ac-form textarea, .ac-sum-form textarea {
    width: 100%; min-height: 96px; padding: 12px 14px; font: inherit; font-size: 14.5px; line-height: 1.55;
    color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px;
    outline: none; resize: vertical; transition: border-color .15s, box-shadow .15s;
}
.ac-form textarea:focus, .ac-sum-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ac-form textarea::placeholder { color: var(--faint); }
[data-mode-block="bulk"] textarea { font-family: var(--mono); font-size: 13px; letter-spacing: .01em; }

/* quantity stepper */
.ac-qty { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; width: fit-content; }
.ac-qty-btn { width: 44px; display: grid; place-items: center; border: 0; background: var(--surface-2); color: var(--ink-2); cursor: pointer; }
.ac-qty-btn:hover { background: var(--line); color: var(--ink); }
.ac-qty input { width: 76px; height: 46px; border: 0; border-left: 1.5px solid var(--line); border-right: 1.5px solid var(--line); text-align: center; font: inherit; font-weight: 700; color: var(--ink); background: var(--surface); outline: none; -moz-appearance: textfield; }
.ac-qty input::-webkit-outer-spin-button, .ac-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* field hint (e.g. quantity minimum) */
.fld-hint { font-size: 11.5px; color: var(--faint); margin-top: 5px; }

/* orders table: clickable rows + order number copy */
.ord-table tbody tr { cursor: pointer; }
.ord-table tbody tr:hover { background: var(--surface-2); }
.ord-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ord-num { display: inline-flex; align-items: center; gap: 7px; }
.ord-copy { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 7px; background: var(--surface-2); color: var(--faint); cursor: pointer; flex: none; }
.ord-copy:hover { background: var(--line); color: var(--ink); }
.ord-copy.copied { background: var(--ok-soft); color: var(--ok); }

/* Clickable order/transaction rows open a detail popup. */
.ord-row, .tx-row { cursor: pointer; transition: background .12s ease; }
.ord-row:hover, .tx-row:hover { background: var(--surface-2); }
.ord-row:focus-visible, .tx-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* order detail popup */
.ord-modal { position: fixed; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ord-backdrop { position: absolute; inset: 0; background: rgba(6,16,25,.55); backdrop-filter: blur(2px); }
.ord-card { position: relative; z-index: 1; width: 100%; max-width: 540px; max-height: 84vh; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.ord-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.ord-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 700; }
.ord-num-big { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ord-num-big .mono { font-size: 16px; font-weight: 700; color: var(--ink); word-break: break-all; }
.ord-x { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); cursor: pointer; flex: none; }
.ord-x:hover { background: var(--line); color: var(--ink); }
.ord-rows { padding: 8px 22px; }
.ord-head-actions { display: inline-flex; align-items: center; gap: 8px; }
.tx-ref-wrap { display: inline-flex; align-items: center; gap: 8px; min-width: 0; justify-content: flex-end; }
.tx-ref-wrap .mono { overflow: hidden; text-overflow: ellipsis; }
.ord-r { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ord-r:last-child { border-bottom: 0; }
.ord-r span { color: var(--muted); } .ord-r b { color: var(--ink); text-align: right; word-break: break-word; }
.ord-result-wrap { padding: 6px 22px 22px; }
.ord-result-wrap h4 { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px; }
.ord-result-wrap h4 svg { color: var(--accent); }
.ord-result { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.ord-result p { margin: 0 0 9px; } .ord-result p:last-child { margin-bottom: 0; }
/* Provider result tables (device info) — render structured, readable rows. */
.ord-result table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 2px 0; }
.ord-result table + table { margin-top: 10px; }
.ord-result th, .ord-result td { text-align: left; vertical-align: top; padding: 7px 10px; border-bottom: 1px solid var(--line); word-break: break-word; }
.ord-result tr:last-child th, .ord-result tr:last-child td { border-bottom: 0; }
.ord-result th { color: var(--ink-2); font-weight: 700; white-space: nowrap; width: 40%; }
.ord-result td { color: var(--ink); }
.ord-result img { max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0; }
.ord-result ul, .ord-result ol { margin: 0 0 9px; padding-left: 20px; }
.ord-result a { color: var(--accent-2); text-decoration: underline; word-break: break-all; }
.ord-result h3, .ord-result h4, .ord-result h5, .ord-result h6 { margin: 10px 0 6px; font-size: 13.5px; color: var(--ink); }

/* bulk order table (columns come from the service fields) */
.bulk-wrap { border: 1px solid var(--line); border-radius: 12px; }
.bulk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bulk-table thead th { text-align: left; padding: 9px 10px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--faint); background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.bulk-table thead th:first-child { border-top-left-radius: 11px; }
.bulk-table tbody td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.bulk-table tbody tr:last-child td { border-bottom: 0; }
.bulk-table .bt-n { width: 34px; text-align: center; color: var(--faint); font-weight: 700; }
.bulk-table .bt-q { width: 92px; } .bulk-table .bt-x { width: 40px; }
.bulk-table input, .bulk-table select {
    width: 100%; height: 38px; min-width: 120px; padding: 0 10px; font: inherit; font-size: 13.5px;
    color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; outline: none;
}
.bulk-table .bt-q input { min-width: 64px; text-align: center; }
.bulk-table input:focus, .bulk-table select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.bulk-x { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--surface-2); color: var(--faint); cursor: pointer; }
.bulk-x:hover { background: var(--danger-soft); color: var(--danger); }
.bulk-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

/* ============================================ compact account data table === */
.ac-panel .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 2px -22px -20px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table thead th {
    text-align: left; padding: 10px 16px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--faint); background: var(--surface);
    border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }
.table th:first-child, .table td:first-child { padding-left: 22px; }
.table th:last-child, .table td:last-child { padding-right: 22px; }
.table .ta-right, .table th.ta-right { text-align: right; }
.table td.ta-right { font-variant-numeric: tabular-nums; }
.table .nowrap { white-space: nowrap; }
.table .text-strong { display: block; color: var(--ink); font-weight: 600; line-height: 1.3; }
.table .cell-sub { display: block; font-size: 11px; color: var(--faint); margin-top: 2px; }
.table .cell-sub-inline { font-size: 11px; color: var(--faint); }
.table .mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em; }
.table .muted { color: var(--faint); }
.table .empty { text-align: center; padding: 40px 16px; color: var(--muted); }
.table .empty .link { color: var(--accent); font-weight: 600; }
/* status + type pills sit tidily in cells */
.table .pill, .table .tx-pill { display: inline-flex; align-items: center; }
.pill { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-danger { background: var(--danger-soft); color: var(--danger); }
.pill-info { background: #e0f2fe; color: #0369a1; }
:root[data-theme="dark"] .pill-info { background: #0c2b3f; color: #38bdf8; }
.pill-muted { background: var(--surface-2); color: var(--muted); }

/* order popup: copy the result easily */
.ord-result-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.ord-result-head h4 { margin: 0; }
.ord-result-copy { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.ord-result-copy:hover { border-color: var(--accent); color: var(--accent-2); }
:root[data-theme="dark"] .ord-result-copy:hover { color: var(--accent); }
.ord-result-copy.copied { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.ord-result-copy svg { flex: none; }

/* authenticator 2FA setup */
.ac-2fa-steps { list-style: none; counter-reset: s; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 24px; }
.ac-2fa-steps li { position: relative; padding-left: 42px; }
.ac-2fa-steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-2); font-weight: 800; font-size: 13px; }
:root[data-theme="dark"] .ac-2fa-steps li::before { color: var(--accent); }
.ac-2fa-steps b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 5px; }
.ac-2fa-steps p { font-size: 13.5px; }
.ac-2fa-key { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.ac-2fa-key code { font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--ink); flex: 1; word-break: break-all; }
.ac-2fa-meta { font-size: 12px; color: var(--faint); }
.ac-2fa-verify { margin-top: 12px; max-width: 340px; }
.ac-2fa-off { display: flex; gap: 8px; align-items: center; }
.ac-2fa-off-code { width: 88px; height: 34px; text-align: center; border: 1.5px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; outline: none; }
.ac-2fa-off-code:focus { border-color: var(--accent); }

/* payment method tiles (brand icons) */
.pay-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; margin-top: 7px; }
.pay-tile { position: relative; cursor: pointer; }
.pay-tile input { position: absolute; opacity: 0; pointer-events: none; }
.pay-tile-in { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border: 1.5px solid var(--line); border-radius: 13px; background: var(--surface); transition: border-color .15s, background .15s; }
.pay-tile:hover .pay-tile-in { border-color: var(--line-2); }
.pay-tile input:checked + .pay-tile-in { border-color: var(--accent); background: var(--accent-soft); }
.pay-tile input:focus-visible + .pay-tile-in { box-shadow: 0 0 0 3px var(--accent-soft); }
.pay-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; color: var(--ink-2); }
.pay-name { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.pay-check { flex: none; display: none; color: var(--accent); }
:root[data-theme="dark"] .pay-check { color: var(--accent); }
.pay-tile input:checked + .pay-tile-in .pay-check { display: grid; place-items: center; }

/* 2FA setup: QR + manual key side by side */
.ac-2fa-scan { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin: 12px 0 6px; }
.ac-2fa-qr { flex: none; width: 168px; height: 168px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.ac-2fa-qr svg { display: block; width: 100%; height: 100%; }
.ac-2fa-manual { flex: 1; min-width: 220px; }
.ac-2fa-manual-lbl { display: block; font-size: 12px; font-weight: 650; color: var(--ink-2); margin-bottom: 7px; }
@media (max-width: 560px) { .ac-2fa-qr { width: 148px; height: 148px; } }

.ac-nofields { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; color: var(--ink-2); }
.ac-nofields svg { flex: none; color: var(--accent); }

/* ---- "View more" link + service-description popup -------------------- */
.svc-more { display: inline; padding: 0; border: 0; background: none; color: var(--accent-2); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.svc-more:hover { text-decoration: underline; }
.svc-fulldesc { display: none; }

.desc-modal { position: fixed; inset: 0; z-index: 340; display: flex; align-items: center; justify-content: center; padding: 20px; }
.desc-modal[hidden] { display: none; }
.desc-backdrop { position: absolute; inset: 0; background: rgba(6, 16, 25, .55); backdrop-filter: blur(2px); }
.desc-dialog { position: relative; width: 100%; max-width: 600px; max-height: 86vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; }
.desc-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.desc-modal-head h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0; }
.desc-x { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink-2); cursor: pointer; }
.desc-x:hover { color: var(--ink); border-color: var(--line-2); }
.desc-modal-body { padding: 22px; overflow-y: auto; }

/* Formatted, readable service description (shared: modal + order page) */
.service-desc { color: var(--ink-2); font-size: 14.5px; line-height: 1.65; }
.service-desc > *:first-child { margin-top: 0; }
.service-desc > *:last-child { margin-bottom: 0; }
.service-desc p { margin: 0 0 12px; }
.service-desc strong, .service-desc b { color: var(--ink); font-weight: 700; }
.service-desc ul, .service-desc ol { margin: 0 0 12px; padding-left: 22px; }
.service-desc li { margin: 0 0 6px; }
.service-desc h4, .service-desc h5 { color: var(--ink); font-size: 15px; font-weight: 800; margin: 16px 0 8px; }
.service-desc a { color: var(--accent-2); font-weight: 600; word-break: break-word; }
.service-desc hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }

/* ---- order-PIN setup prompt ----------------------------------------- */
.pin-modal { position: fixed; inset: 0; z-index: 350; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pin-backdrop { position: absolute; inset: 0; background: rgba(6, 16, 25, .58); backdrop-filter: blur(2px); }
.pin-dialog { position: relative; width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 28px 26px; text-align: center; }
.pin-ico { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-2); }
.pin-dialog h2 { font-size: 21px; font-weight: 820; color: var(--ink); margin: 0 0 8px; }
.pin-dialog > p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0 0 20px; }
.pin-dialog .ac-form { text-align: left; }
.pin-dialog .fld { margin-bottom: 14px; }
.pin-later { margin-top: 14px; padding: 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pin-later:hover { color: var(--ink); text-decoration: underline; }
.fld-spacer { display: block; }
@media (max-width: 560px) { .fld-spacer { display: none; } }

/* ---- account feedback: centered popup card (not a floating toast) ---- */
.ac-note { position: fixed; inset: 0; z-index: 360; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ac-note-backdrop { position: absolute; inset: 0; background: rgba(6, 16, 25, .42); backdrop-filter: blur(2px); }
.ac-note-card { position: relative; width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 26px 24px; text-align: center; animation: ac-note-in .18s ease; }
.ac-note-ico { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-2); }
/* Error notices get a red X instead of the green success check. */
.ac-note-error .ac-note-ico { background: var(--danger-soft, #fdecec); color: var(--danger, #d64545); }
.ac-note-msg { color: var(--ink); font-size: 15px; line-height: 1.55; margin: 0 0 18px; }
@keyframes ac-note-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* Suppress the browser's native password reveal — we use our own eye toggle. */
input::-ms-reveal, input::-ms-clear { display: none; }

/* ---- order-PIN cooldown banner -------------------------------------- */
.pin-cooldown { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; padding: 11px 14px; border-radius: 12px; background: color-mix(in srgb, #dc2626 9%, var(--surface)); border: 1px solid color-mix(in srgb, #dc2626 30%, var(--line)); color: #dc2626; font-size: 13.5px; font-weight: 600; }
.pin-cooldown .ico { flex: none; }
.pin-cooldown b { font-variant-numeric: tabular-nums; font-weight: 800; }

/* ---- service-page description: readable + collapsible when long ------ */
.svc-desc-block { margin-top: 4px; }
.svc-desc-block.is-clamped { max-height: 240px; overflow: hidden; position: relative; }
.svc-desc-block.is-clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.svc-desc-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--accent-2); font-weight: 700; font-size: 13.5px; cursor: pointer; transition: border-color .13s; }
.svc-desc-toggle:hover { border-color: var(--line-2); }
.svc-desc-toggle svg { transition: transform .2s; }
.svc-desc-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.combo-label.is-placeholder { color: var(--faint); }

/* default-country row + separator in the signup country dropdown */
.combo-opt-tag { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-2); background: var(--accent-soft); padding: 3px 8px; border-radius: 999px; }
:root[data-theme="dark"] .combo-opt-tag { color: var(--accent); }
.combo-sep { height: 1px; background: var(--line); margin: 5px 10px; }
.combo.is-searching .combo-sep { display: none; }

/* Payment details table shown on the deposit page */
.pay-details { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14px; }
.pay-details th, .pay-details td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(127,127,127,.16); vertical-align: top; }
.pay-details th { width: 40%; color: var(--muted); font-weight: 600; white-space: nowrap; }
.pay-details td { font-weight: 600; word-break: break-word; }
.pd-copy-wrap { display: inline-flex; align-items: center; gap: 8px; }
.pd-copy-val { min-width: 0; }
.pd-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(127,127,127,.28); background: transparent; color: var(--muted); cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.pd-copy:hover { color: var(--accent); border-color: var(--accent); }
.pd-copy.is-copied { color: #10794f; border-color: #10794f; }
/* Styled payment-proof upload */
.manual-fields { display: flex; flex-direction: column; gap: 14px; }
.upload-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px 16px; border: 2px dashed var(--line-2, rgba(127,127,127,.35)); border-radius: 14px; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.upload-drop:hover { border-color: var(--accent); background: rgba(127,127,127,.05); }
.upload-drop .upload-ico { color: var(--accent); display: inline-flex; }
.upload-drop .upload-text { font-size: 13px; color: var(--muted); word-break: break-word; max-width: 100%; }
.upload-preview { max-width: 100%; max-height: 220px; border-radius: 10px; margin-top: 10px; display: block; border: 1px solid var(--line-2, rgba(127,127,127,.28)); }