/* iNET customer portal - Arabic-first, RTL by default. Logical properties only (works for ar/rtl and en/ltr).
   Source: portal_branding/portal/portal.css -> server: phpnuxbill_custom/ui_custom/inet/portal.css */

@font-face {
    font-family: "Readex Pro";
    src: url("fonts/readex-pro-arabic.woff2") format("woff2");
    font-weight: 300 700;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
    font-family: "Readex Pro";
    src: url("fonts/readex-pro-latin.woff2") format("woff2");
    font-weight: 300 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}

:root {
    /* brand: iNET logo navy + sky, with an electric cyan/violet pair for light and glow */
    --navy: #2b337e;
    --sky: #96d2f3;
    --cyan: #4cc9f0;
    --violet: #8b7dff;
    --mint: #4fe0c2;
    --night-0: #080c2e;        /* brand panel, deepest */
    --night-1: #121a5c;
    --night-2: #1f2c94;
    --mist: #f3f6fc;           /* page */
    --surface: #ffffff;
    --ink: #161b42;
    --slate: #59617f;
    --line: #d3dcec;
    --focus: rgba(76, 99, 230, 0.18);
    --error-bg: #fdf0f0; --error-ink: #8f1d24; --error-line: #c4323a;
    --ok-bg: #edf8f1; --ok-ink: #1f6b3a; --ok-line: #2f8f52;
    --btn-from: #4b45d6; --btn-to: #1f9fe0; --btn-ink: #ffffff;
    --neg: #c4323a; --pos: #23824a; --disabled-bg: #e6ebf4; --accent-ink: #2b337e;
    --dl: #4b45d6; --ul: #1888c9;
    --radius: 12px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --mist: #0c1033;
        --surface: #141a45;
        --ink: #e8edf7;
        --slate: #a5aeca;
        --line: #2c3570;
        --focus: rgba(150, 210, 243, 0.22);
        --error-bg: #3a1620; --error-ink: #ffc9cc; --error-line: #e0565e;
        --ok-bg: #12321f; --ok-ink: #bfeccd; --ok-line: #47b06c;
        --btn-from: #6a63ff; --btn-to: #27b4f0;
        --neg: #ff8a90; --pos: #6fdc9b; --disabled-bg: #1d2452; --accent-ink: #96d2f3;
        --dl: #7468ee; --ul: #0f9bb8;
        color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }

body.inet-login, body.inet-portal {
    margin: 0;
    min-height: 100vh;
    background: var(--mist);
    color: var(--ink);
    font-family: "Readex Pro", system-ui, "Segoe UI", Tahoma, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
}

.inet-login h1, .inet-login h2, .inet-login p, .inet-login ul,
.inet-portal h1, .inet-portal h2, .inet-portal p, .inet-portal ul, .inet-portal ol { margin: 0; }

/* language switch: top corner on the form side (top-left in Arabic, top-right in English) */
.lang-switch {
    position: fixed;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-block: 7px;
    padding-inline: 14px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--navy);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
}
.lang-switch svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.lang-switch:hover { border-color: var(--navy); }
@media (prefers-color-scheme: dark) { .lang-switch { color: var(--sky); } .lang-switch:hover { border-color: var(--sky); } }

.login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

/* ---------- brand panel (start side: right in Arabic) ---------- */
.brand-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding-block: 56px;
    padding-inline: clamp(24px, 5vw, 72px);
    color: #ffffff;
    /* decorative light sources: physical positions on purpose (they do not carry reading order) */
    background:
        radial-gradient(55% 45% at 82% 8%, rgba(139, 125, 255, 0.42), transparent 70%),
        radial-gradient(50% 40% at 12% 96%, rgba(76, 201, 240, 0.30), transparent 70%),
        radial-gradient(35% 30% at 50% 42%, rgba(150, 210, 243, 0.10), transparent 70%),
        linear-gradient(165deg, var(--night-0) 0%, var(--night-1) 55%, var(--night-2) 100%);
}
/* fine grid, faded toward the edges */
.brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(150, 210, 243, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 210, 243, 0.07) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
}

.brand-inner {
    width: 100%;
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.logo-anim {
    width: min(260px, 62%);
    height: auto;
    overflow: visible;
    margin-block-end: 30px;
    filter: drop-shadow(0 0 22px rgba(76, 201, 240, 0.28));
}

.brand-panel h1 {
    font-size: clamp(2.3rem, 1.3rem + 2.9vw, 3.6rem);
    font-weight: 700;
    line-height: 1.25;
    padding-block-end: 0.08em;        /* room for Arabic descenders inside the clipped gradient */
    background: linear-gradient(to left, #ffffff 0%, var(--sky) 45%, var(--violet) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
[dir="ltr"] .brand-panel h1 {
    font-size: clamp(2.1rem, 1.2rem + 2.1vw, 3rem);   /* Latin runs wider than Arabic: keep it on one line */
    letter-spacing: -0.015em;
    background-image: linear-gradient(to right, #ffffff 0%, var(--sky) 45%, var(--violet) 100%);
}

.brand-panel .lead {
    margin-block-start: 14px;
    color: #c8d5f6;
    font-size: clamp(1.0625rem, 0.97rem + 0.4vw, 1.25rem);
    font-weight: 300;
    line-height: 1.8;
    max-width: 27rem;
}

.features {
    list-style: none;
    padding: 0;
    margin-block-start: 34px !important;
    width: 100%;
    max-width: 25rem;
    display: grid;
    gap: 12px;
    text-align: start;
}
.feature {
    --tone: var(--cyan);
    display: flex;
    align-items: center;
    gap: 14px;
    padding-block: 13px;
    padding-inline: 14px 16px;
    border: 1px solid rgba(150, 210, 243, 0.16);
    border-radius: 16px;
    background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.feature.tone-violet { --tone: var(--violet); }
.feature.tone-mint { --tone: var(--mint); }
.feature-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
    background: color-mix(in srgb, var(--tone) 16%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--tone) 22%, transparent);
}
.feature-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--tone);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.feature-text { display: grid; gap: 2px; min-width: 0; }
.feature-text strong { font-size: 1rem; font-weight: 600; line-height: 1.5; color: #ffffff; }
.feature-text small { font-size: 0.8125rem; line-height: 1.6; color: #a9b8e0; }

/* ---------- logo animation ---------- */
.logo-anim .cm { stroke-dasharray: 0.16 3; stroke-dashoffset: 3; }   /* light hidden unless animated */

@media (prefers-reduced-motion: no-preference) {
    .logo-anim .rv {
        stroke-dasharray: 1 2;
        animation: lg-reveal var(--t) cubic-bezier(.55, 0, .25, 1) var(--d) both;
    }
    .logo-anim .cm {
        animation: lg-light var(--t) cubic-bezier(.55, 0, .25, 1) var(--d) both;
    }
    .logo-anim .dot { transform-box: fill-box; transform-origin: center; animation: lg-pop .5s cubic-bezier(.3, 1.6, .5, 1) .05s both; }
    .logo-anim .dot-halo { animation: lg-halo 1.1s ease-out .05s both; }
    .logo-anim .tagline-wipe { transform-box: fill-box; transform-origin: left center; animation: lg-wipe .6s ease-out 3.15s both; }
    .logo-anim .settle { animation: lg-fade .5s ease-out 3.2s both; }
    .brand-panel h1, .brand-panel .lead, .features { animation: lg-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
    .brand-panel h1 { animation-delay: .35s; }
    .brand-panel .lead { animation-delay: .5s; }
    .features { animation-delay: .65s; }
}
@media (prefers-reduced-motion: reduce) {
    .logo-anim .light { display: none; }
    .logo-anim .dot-halo { opacity: .35; }
}

@keyframes lg-reveal { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* the light leads the reveal: a short bright dash that travels the same path and leaves at the end */
@keyframes lg-light {
    0% { stroke-dashoffset: 0.16; opacity: 0; }
    10% { opacity: 1; }
    85% { opacity: 1; }
    100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes lg-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes lg-halo { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: .35; } }
@keyframes lg-wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lg-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- form panel (end side) ---------- */
.form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding-block: 96px 28px;
    padding-inline: clamp(20px, 5vw, 64px);
    background: radial-gradient(45% 35% at 15% 8%, rgba(139, 125, 255, 0.10), transparent 70%),
                radial-gradient(40% 30% at 85% 95%, rgba(76, 201, 240, 0.10), transparent 70%);
}
.form-wrap { width: 100%; max-width: 25rem; margin-block: auto; }

.form-panel h2 {
    font-size: clamp(1.6rem, 1.3rem + 0.9vw, 1.95rem);
    font-weight: 600;
    line-height: 1.3;
}
.form-panel .intro { margin-block: 8px 28px !important; color: var(--slate); }

.notice {
    margin-block-end: 22px;
    padding-block: 12px;
    padding-inline: 16px;
    border-inline-start: 4px solid var(--error-line);
    border-radius: var(--radius);
    background: var(--error-bg);
    color: var(--error-ink);
    font-size: 0.9375rem;
}
.notice.is-ok { border-inline-start-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); }

.field { margin-block-end: 20px; }
.field label { display: block; margin-block-end: 8px; font-size: 0.9375rem; font-weight: 500; }

.field input {
    display: block;
    width: 100%;
    height: 52px;
    padding-inline: 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 1.0625rem;          /* >= 16px: no zoom on iPhone */
    text-align: start;
    unicode-bidi: plaintext;       /* digits / Latin usernames keep their own order inside the RTL form */
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus { outline: none; border-color: #4b45d6; box-shadow: 0 0 0 4px var(--focus); }
@media (prefers-color-scheme: dark) { .field input:focus { border-color: var(--sky); } }

.hint { margin-block-start: 6px !important; color: var(--slate); font-size: 0.8125rem; line-height: 1.5; }

.pass-box { position: relative; }
.pass-box input { padding-inline-end: 88px; }
.pass-toggle {
    position: absolute;
    inset-block: 6px;
    inset-inline-end: 6px;
    min-width: 68px;
    padding-inline: 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #4b45d6;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}
.pass-toggle:hover { background: var(--focus); }
@media (prefers-color-scheme: dark) { .pass-toggle { color: var(--sky); } }

.submit {
    display: block;
    width: 100%;
    height: 54px;
    margin-block-start: 8px;
    border: 0;
    border-radius: var(--radius);
    background: linear-gradient(to left, var(--btn-from), var(--btn-to));
    color: var(--btn-ink);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 24px -10px rgba(75, 69, 214, 0.65);
    transition: filter .15s, box-shadow .15s;
}
[dir="ltr"] .submit { background: linear-gradient(to right, var(--btn-from), var(--btn-to)); }
.submit:hover { filter: brightness(1.08); box-shadow: 0 12px 28px -10px rgba(31, 159, 224, 0.7); }
.submit:active { transform: translateY(1px); }

.inet-login :focus-visible, .inet-portal :focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.field input:focus-visible { outline: none; }

.forgot { margin-block-start: 22px !important; color: var(--slate); font-size: 0.875rem; line-height: 1.7; }
.forgot a { color: #4b45d6; font-weight: 500; }

.legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    color: var(--slate);
    font-size: 0.8125rem;
}
.legal a { color: inherit; text-underline-offset: 3px; }
.legal a:hover { color: var(--ink); }

/* ---------- tablet / phone: brand becomes a top band, form below ---------- */
@media (max-width: 899px) {
    .login-shell { grid-template-columns: minmax(0, 1fr); }
    .brand-panel { padding-block: 64px 30px; padding-inline: 20px; }
    .logo-anim { width: 150px; margin-block-end: 16px; }
    .brand-panel h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.4rem); }
    .brand-panel .lead { margin-block-start: 8px; font-size: 1rem; }
    .features { display: none; }
    .form-panel { justify-content: flex-start; gap: 28px; padding-block: 26px 24px; padding-inline: 16px; }
    .form-panel .intro { margin-block-end: 22px !important; }
    .form-wrap { margin-block: 0; }
    .field { margin-block-end: 16px; }
    .lang-switch { inset-block-start: 14px; inset-inline-end: 14px; }
}
@media (min-width: 600px) and (max-width: 899px) { .features { display: grid; margin-block-start: 22px !important; } }

/* =====================================================================================================================
   Customer portal (plugin/inet_portal) - same tokens, Arabic-first, logical properties only
   ================================================================================================================== */
.p-top {
    position: sticky;
    inset-block-start: 0;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    padding-block: 12px;
    padding-inline: clamp(16px, 4vw, 40px);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-block-end: 1px solid var(--line);
}
.p-brand img { display: block; inline-size: 92px; block-size: auto; }
.p-user { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.4; margin-inline-end: auto; }
.p-hello { font-size: 0.9375rem; }
.p-uname { font-size: 0.8125rem; color: var(--slate); }
.p-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.p-pill {
    padding-block: 5px;
    padding-inline: 12px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    color: var(--accent-ink);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}
.p-pill:hover { border-color: var(--accent-ink); }
.p-link { color: var(--slate); font-size: 0.9375rem; text-decoration: none; }
.p-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.p-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* an implicit 'auto' column grows to the widest content; in RTL that
                                                overflow goes off the LEFT edge where scrollWidth does not see it */
    gap: 40px;
    max-inline-size: 1120px;
    margin-inline: auto;
    padding-block: 28px 64px;
    padding-inline: clamp(16px, 4vw, 40px);
}
.p-main > .notice { margin-block-end: -16px; }

.p-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; }

/* subscription card: the dark, lit panel of the login page */
.sub-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: clamp(20px, 3vw, 28px);
    border-radius: 20px;
    color: #ffffff;
    background:
        radial-gradient(60% 55% at 90% 0%, rgba(139, 125, 255, 0.40), transparent 70%),
        radial-gradient(50% 50% at 0% 100%, rgba(76, 201, 240, 0.28), transparent 70%),
        linear-gradient(160deg, var(--night-0) 0%, var(--night-1) 60%, var(--night-2) 100%);
}
.sub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sub-head h2 { font-size: 1rem; font-weight: 500; color: #c8d5f6; }
.pill {
    padding-block: 3px;
    padding-inline: 12px;
    border-radius: 999px;
    border: 1px solid rgba(79, 224, 194, 0.4);
    background: rgba(79, 224, 194, 0.14);
    color: #86f2da;
    font-size: 0.8125rem;
    font-weight: 500;
}
.sub-card.is-off .pill { border-color: rgba(255, 138, 144, 0.45); background: rgba(255, 138, 144, 0.14); color: #ffb9bc; }
.sub-plan {
    font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem);
    font-weight: 700;
    line-height: 1.3;
    background: linear-gradient(to left, #ffffff, var(--sky) 60%, var(--violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
[dir="ltr"] .sub-plan { background-image: linear-gradient(to right, #ffffff, var(--sky) 60%, var(--violet)); }
.sub-ends, .sub-hint { color: #c8d5f6; font-size: 0.9375rem; }
.sub-days { display: flex; align-items: baseline; gap: 10px; margin-block-start: 8px; }
.sub-days-n { font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); font-weight: 700; line-height: 1; }
.sub-days-l { color: #c8d5f6; }
.meter { block-size: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.meter span { display: block; block-size: 100%; border-radius: inherit; background: linear-gradient(to left, var(--cyan), var(--violet)); }
[dir="ltr"] .meter span { background: linear-gradient(to right, var(--cyan), var(--violet)); }

.renew {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-block-start: auto;
    padding-block-start: 18px;
    border-block-start: 1px solid rgba(150, 210, 243, 0.18);
}
.sub-card .meter + .renew, .sub-card .sub-hint + .renew { margin-block-start: 18px; }
.renew-text { display: grid; gap: 2px; }
.renew-title { font-weight: 600; }
.renew-hint { color: #a9b8e0; font-size: 0.8125rem; line-height: 1.6; }
.switch {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px;
    border: 0;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}
.switch-knob { position: relative; inline-size: 46px; block-size: 26px; border-radius: 99px; background: rgba(255, 255, 255, 0.2); transition: background-color .2s; }
.switch-knob::after {
    content: "";
    position: absolute;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    inline-size: 20px;
    block-size: 20px;
    border-radius: 50%;
    background: #ffffff;
    transition: inset-inline-start .2s;
}
.switch[aria-checked="true"] .switch-knob { background: var(--mint); }
.switch[aria-checked="true"] .switch-knob::after { inset-inline-start: 23px; }

/* balance card */
.bal-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: clamp(20px, 3vw, 28px);
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
}
.bal-card h2 { font-size: 1rem; font-weight: 500; color: var(--slate); }
.bal-amount { font-size: clamp(2.3rem, 1.8rem + 1.8vw, 3rem); font-weight: 700; line-height: 1.15; }
.bal-amount.is-neg { color: var(--neg); }
.bal-hint { color: var(--slate); font-size: 0.8125rem; }
.topup { display: grid; gap: 8px; margin-block-start: auto; padding-block-start: 18px; }
.topup label { font-size: 0.9375rem; font-weight: 500; }
.topup-row { display: flex; gap: 8px; }
.topup-row input {
    flex: 1;
    min-inline-size: 0;
    block-size: 50px;
    padding-inline: 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 1.0625rem;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}
.topup-row input:focus { outline: none; border-color: var(--btn-from); box-shadow: 0 0 0 4px var(--focus); }

.btn {
    block-size: 50px;
    padding-inline: 22px;
    border: 0;
    border-radius: var(--radius);
    background: linear-gradient(to left, var(--btn-from), var(--btn-to));
    color: var(--btn-ink);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
[dir="ltr"] .btn { background: linear-gradient(to right, var(--btn-from), var(--btn-to)); }
.btn:hover { filter: brightness(1.08); }
.btn:disabled { background: var(--disabled-bg); color: var(--slate); cursor: not-allowed; filter: none; }
.btn-ghost {
    block-size: 40px;
    padding-inline: 14px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.875rem;
    white-space: nowrap;
    cursor: pointer;
}
.btn-ghost:hover { border-color: var(--neg); color: var(--neg); }

/* sections */
.p-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.sec-head h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.4; }
.sec-head p { max-inline-size: 64ch; color: var(--slate); font-size: 0.9375rem; }

.plans { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-block: 22px 18px;
    padding-inline: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}
.plan.is-current { border-color: var(--btn-from); box-shadow: 0 0 0 3px var(--focus); }
.plan-badge {
    position: absolute;
    inset-block-start: -11px;
    inset-inline-start: 16px;
    padding-block: 1px;
    padding-inline: 10px;
    border-radius: 99px;
    background: var(--btn-from);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 500;
}
.plan-speed { display: flex; align-items: baseline; gap: 6px; }
.plan-n { font-size: 2.4rem; font-weight: 700; line-height: 1.05; color: var(--accent-ink); }
.plan-u { color: var(--slate); font-size: 0.875rem; font-weight: 500; }
.plan-name { font-weight: 600; }
.plan-price { font-weight: 600; }
.plan-price small { color: var(--slate); font-weight: 400; }
.plan form { margin-block-start: auto; padding-block-start: 12px; }
.plan .btn { inline-size: 100%; block-size: 44px; padding-inline: 10px; font-size: 0.9375rem; }

/* the queue IS a sequence: numbered */
.queue { list-style: none; padding: 0; display: grid; gap: 10px; counter-reset: q; }
.queue li {
    counter-increment: q;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding-block: 14px;
    padding-inline: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}
.queue li::before {
    content: counter(q);
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 50%;
    background: var(--focus);
    color: var(--accent-ink);
    font-size: 0.875rem;
    font-weight: 600;
}
.queue-main { display: grid; gap: 2px; margin-inline-end: auto; }
.queue-name { font-weight: 600; }
.queue-when { color: var(--slate); font-size: 0.8125rem; }
.queue-price { font-weight: 600; font-variant-numeric: tabular-nums; }

.hist { list-style: none; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.hist li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 4px 18px;
    padding-block: 12px;
    padding-inline: 18px;
    border-block-end: 1px solid var(--line);
}
.hist li:last-child { border-block-end: 0; }
.hist-what small { margin-inline-start: 6px; color: var(--slate); font-weight: 400; }
.hist-when { color: var(--slate); font-size: 0.8125rem; }
.hist-amt { min-inline-size: 7.5em; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.hist-amt.is-pos { color: var(--pos); }
.hist-amt.is-neg, .empty.is-neg { color: var(--neg); }
.empty { color: var(--slate); }

dialog.confirm {
    inline-size: min(420px, calc(100vw - 32px));
    padding: 24px;
    border: 0;
    border-radius: 18px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 24px 60px -20px rgba(8, 12, 46, 0.5);
}
dialog.confirm::backdrop { background: rgba(8, 12, 46, 0.5); }
dialog.confirm h2 { margin-block-end: 8px; font-size: 1.25rem; font-weight: 600; }
dialog.confirm p { margin-block-end: 20px; color: var(--slate); }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions .btn { flex: 1; }
.confirm-actions .btn-ghost { block-size: 50px; }

@media (max-width: 799px) {
    .p-hero { grid-template-columns: minmax(0, 1fr); }
    .p-user { order: 3; inline-size: 100%; flex-direction: row; gap: 8px; align-items: baseline; }
    .p-nav { gap: 6px 12px; }
    .p-main { gap: 32px; padding-block-start: 20px; }
    .hist li { grid-template-columns: minmax(0, 1fr) auto; }
    .hist-when { grid-row: 2; }
    .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .plan { padding-inline: 14px; }
    .plan-n { font-size: 2rem; }
}
@media (max-width: 380px) { .plans { grid-template-columns: minmax(0, 1fr); } }
/* ---------- tabs ---------- */
.tabs {
    display: flex;
    gap: 4px;
    padding-inline: max(clamp(16px, 4vw, 40px), calc((100% - 1120px) / 2 + clamp(16px, 4vw, 40px)));
    padding-block-start: 10px;
    border-block-end: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.tabs a {
    padding-block: 10px;
    padding-inline: 16px;
    border-block-end: 3px solid transparent;
    color: var(--slate);
    font-weight: 500;
    text-decoration: none;
    margin-block-end: -1px;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-block-end-color: var(--btn-from); }

/* ---------- usage ---------- */
.use-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.stat {
    display: grid;
    gap: 4px;
    padding-block: 16px;
    padding-inline: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}
.stat-l { color: var(--slate); font-size: 0.875rem; }
.stat-v { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 600; line-height: 1.2; }
.key { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 3px; margin-inline-end: 8px; }
.key-dl { background: var(--dl); }
.key-ul { background: var(--ul); }

.chart-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: clamp(18px, 3vw, 26px);
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
}
.chart-card h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.chart { position: relative; padding-inline-start: 64px; padding-block-start: 8px; }
.plot { position: relative; block-size: 220px; }
.tick { position: absolute; inset-inline: 0; block-size: 0; border-block-start: 1px solid var(--line); }
.tick span {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: calc(100% + 10px);
    transform: translateY(-50%);
    color: var(--slate);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.col {
    flex: 1 1 0;
    min-inline-size: 0;
    block-size: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: 6px 6px 0 0;
}
.col.is-hot, .col:focus-visible { background: var(--focus); }
.col:focus-visible { outline: 2px solid var(--btn-from); outline-offset: 0; }
.stack {
    inline-size: min(24px, 72%);
    min-block-size: 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}
.seg { display: block; flex-basis: 0; min-block-size: 0; }
.seg-dl { background: var(--dl); }
.seg-ul { background: var(--ul); }
.xlabels { display: flex; gap: 2px; margin-block-start: 8px; }
.xlabels span { flex: 1 1 0; min-inline-size: 0; overflow: visible; color: var(--slate); font-size: 0.6875rem; text-align: center; white-space: nowrap; }
.tip {
    position: absolute;
    inset-block-start: -6px;
    z-index: 3;
    display: grid;
    gap: 2px;
    padding-block: 8px;
    padding-inline: 12px;
    border-radius: 10px;
    background: var(--ink);
    color: var(--surface);
    font-size: 0.8125rem;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 10px 24px -12px rgba(8, 12, 46, 0.6);
}
.tip[hidden] { display: none; }
.tip span { display: flex; align-items: center; gap: 4px; }
.tip .key { margin-inline-end: 4px; }
.chart-table summary { cursor: pointer; color: var(--accent-ink); font-size: 0.875rem; font-weight: 500; }
.chart-table table { inline-size: 100%; margin-block-start: 10px; border-collapse: collapse; font-size: 0.875rem; }
.chart-table th, .chart-table td { padding-block: 6px; padding-inline: 8px; border-block-end: 1px solid var(--line); text-align: start; font-variant-numeric: tabular-nums; }
.chart-table th { color: var(--slate); font-weight: 500; }

/* ---------- my details ---------- */
.acct-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: clamp(20px, 3vw, 28px);
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
}
.card h2 { font-size: 1.125rem; font-weight: 600; }
.kv { display: grid; margin: 0; }
.kv > div {
    display: grid;
    grid-template-columns: minmax(0, 12em) minmax(0, 1fr);
    align-items: center;
    gap: 4px 16px;
    padding-block: 12px;
    border-block-end: 1px solid var(--line);
}
.kv > div:last-child { border-block-end: 0; }
.kv dt { color: var(--slate); font-size: 0.875rem; }
.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.kv-pass dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.secret { min-inline-size: 9ch; font-weight: 600; letter-spacing: 0.04em; }
.kv-pass .btn-ghost { block-size: 34px; padding-inline: 12px; }
.kv-pass .btn-ghost:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.contact { display: grid; gap: 2px; }
.contact .btn { justify-self: start; margin-block-start: 4px; }

@media (max-width: 799px) {
    .tabs a { flex: 1 1 0; padding-inline: 6px; text-align: center; font-size: 0.9375rem; }
    .use-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .use-stats .stat:last-child { grid-column: 1 / -1; }
    .chart { padding-inline-start: 52px; }
    .plot { block-size: 180px; }
    .acct-grid { grid-template-columns: minmax(0, 1fr); }
    .kv > div { grid-template-columns: minmax(0, 1fr); }
}
/* =====================================================================================================================
   Dealer portal (plugin/inet_dealer_portal) - reuses the customer portal styles
   ================================================================================================================== */
.dp-login { display: grid; place-items: center; min-block-size: 100vh; min-block-size: 100dvh; padding: 16px; }
.dp-login-card { position: relative; inline-size: min(420px, 100%); gap: 14px; }
.dp-login-card h1 { font-size: 1.6rem; font-weight: 700; }
.dp-logo { inline-size: 120px; block-size: auto; }
.dp-lang { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; }
.dp-wide { inline-size: 100%; }
.dp-inline { display: inline; margin: 0; }
.dp-linkbtn { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.dp-receipt-link { margin-inline-start: 10px; font-weight: 600; color: inherit; }
.dp-neg { color: var(--neg); font-weight: 600; }
.dp-pos { color: var(--pos); }
.pill-s { margin-inline-start: 6px; padding-block: 1px; padding-inline: 8px; border-radius: 99px; font-size: 0.75rem; font-weight: 500; }
.pill-s.is-on { background: color-mix(in srgb, var(--pos) 15%, transparent); color: var(--pos); }
.pill-s.is-off { background: color-mix(in srgb, var(--neg) 15%, transparent); color: var(--neg); }
.dp-price { display: flex; justify-content: space-between; gap: 8px; font-size: 0.875rem; }
.dp-price span { color: var(--slate); }
.dp-actions { display: grid; gap: 8px; margin-block-start: auto; padding-block-start: 12px; }
.dp-actions form { margin: 0; padding: 0; }
.dp-actions .btn { inline-size: 100%; block-size: 44px; font-size: 0.9375rem; }
.dp-actions .btn-ghost { block-size: 40px; font-size: 0.8125rem; }
.dp-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px; }
.dp-filter label { display: grid; gap: 4px; color: var(--slate); font-size: 0.875rem; }
.dp-filter input { block-size: 42px; padding-inline: 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
.dp-filter .btn { block-size: 42px; }
.dp-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.dp-table { inline-size: 100%; border-collapse: collapse; font-size: 0.875rem; }
.dp-table th, .dp-table td { padding-block: 10px; padding-inline: 12px; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; }
.dp-table th { color: var(--slate); font-weight: 500; white-space: nowrap; }
.dp-table td.num, .dp-table th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-table small { color: var(--slate); }
.dp-table tr.is-reversed td { color: var(--slate); text-decoration: line-through; }
.dp-receipt { display: grid; gap: 10px; inline-size: min(380px, 100%); margin-inline: auto; padding: 22px; border: 1px dashed var(--line); border-radius: 16px; background: var(--surface); text-align: center; }
.dp-receipt img { justify-self: center; }
.dp-receipt h2 { font-size: 1.125rem; font-weight: 600; }
.dp-receipt .kv > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); text-align: start; }
.dp-paid dd { font-size: 1.25rem; font-weight: 700; }
.dp-thanks { color: var(--slate); }
/* technician portal */
a.btn, a.btn-ghost { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.tp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.p-sec .sec-head:has(.tp-new-btn) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.tp-new-btn { block-size: 44px; font-size: 0.9375rem; }
.tp-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--slate); font-size: 0.875rem; }
.tp-form { display: grid; gap: 4px; }
.tp-form select, .tp-form .topup-row input {
    display: block; inline-size: 100%; block-size: 52px; padding-inline: 14px; border: 1.5px solid var(--line); border-radius: var(--radius);
    background: var(--surface); color: var(--ink); font: inherit; font-size: 1.0625rem; letter-spacing: normal;
}
.tp-form select:focus { outline: none; border-color: var(--btn-from); box-shadow: 0 0 0 4px var(--focus); }
.tp-form .topup-row .btn-ghost { block-size: 52px; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 16px; }
.tp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; margin: 0 0 20px; padding: 0; border: 0; }
.tp-plans legend { margin-block-end: 8px; font-size: 0.9375rem; font-weight: 500; }
.tp-plan { display: grid; gap: 2px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.tp-plan input { position: absolute; opacity: 0; pointer-events: none; }
.tp-plan:has(input:checked) { border-color: var(--btn-from); box-shadow: 0 0 0 3px var(--focus); }
.tp-plan:has(input:focus-visible) { outline: 2px solid var(--btn-from); outline-offset: 2px; }
.tp-plan.is-off { opacity: .55; cursor: not-allowed; }
.tp-plan-n { font-weight: 600; }
.tp-plan-c { color: var(--slate); font-size: 0.8125rem; }
.dp-table tr.is-soon td:first-child { box-shadow: inset -3px 0 0 var(--neg); }
[dir="ltr"] .dp-table tr.is-soon td:first-child { box-shadow: inset 3px 0 0 var(--neg); }
.dp-table tr.is-ended td { color: var(--slate); }
.dp-table .btn-ghost:hover, .tp-form .btn-ghost:hover, .tp-ho-actions .btn-ghost:hover { border-color: var(--btn-from); color: var(--ink); }
.tp-handover .dp-paid dd { font-size: 1.35rem; letter-spacing: .04em; }
.tp-ho-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tp-ho-actions .btn, .tp-ho-actions .btn-ghost { block-size: 44px; }

/* dealer cards tab */
.stat-s { color: var(--slate); font-size: 0.8125rem; }
.pill-s { background: color-mix(in srgb, var(--slate) 14%, transparent); }
.dp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-chips .p-pill[aria-current="true"] { border-color: var(--btn-from); background: color-mix(in srgb, var(--btn-from) 12%, transparent); color: var(--ink); }
.dp-pager { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--slate); font-size: 0.875rem; }
.dp-filter input { block-size: 40px; padding-inline: 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
/* dealer customer search - live suggestion list */
.dp-combo { position: relative; flex: 1; min-inline-size: 0; display: flex; }
.dp-combo input { inline-size: 100%; letter-spacing: normal; }
.dp-sg {
    position: absolute; inset-block-start: calc(100% + 6px); inset-inline: 0; z-index: 30;
    max-block-size: min(360px, 60vh); overflow-y: auto; margin: 0; padding: 6px; list-style: none;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
    box-shadow: 0 14px 34px -12px rgb(10 14 40 / 0.35);
}
.dp-sg[hidden] { display: none; }
.dp-sg [role="option"] { display: grid; gap: 2px; padding-block: 9px; padding-inline: 12px; border-radius: 10px; cursor: pointer; text-align: start; }
.dp-sg [role="option"]:hover, .dp-sg [role="option"][aria-selected="true"] { background: color-mix(in srgb, var(--btn-from) 12%, transparent); }
.dp-sg-top { display: flex; align-items: center; gap: 6px; }
.dp-sg-u { font-weight: 600; font-variant-numeric: tabular-nums; }
.dp-sg-sub { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--slate); font-size: 0.8125rem; }
.dp-sg-sub bdi { font-variant-numeric: tabular-nums; }
.dp-sg mark { background: color-mix(in srgb, var(--btn-from) 22%, transparent); color: inherit; border-radius: 3px; }
.dp-sg-empty { padding-block: 10px; padding-inline: 12px; color: var(--slate); font-size: 0.875rem; }
.dp-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
@media print {
    .dp .p-top, .dp .tabs, .dp .notice, .dp-noprint { display: none !important; }
    .dp .p-main { padding: 0; }
    .dp-receipt { border: 0; }
}