/* ===================================================================
   Mango Mobile — Modern SIM Sign-up Theme
   Design system: tokens, typography, components, sign-up flow
   =================================================================== */

/* --- Tokens --------------------------------------------------------- */
:root {
    /* Brand */
    --mango-50:  #FFF6EC;
    --mango-100: #FFE8CC;
    --mango-200: #FFD199;
    --mango-300: #FFB766;
    --mango-400: #FF9933;
    --mango-500: #FF7A00; /* primary */
    --mango-600: #E66200;
    --mango-700: #B84A00;
    --mango-800: #8A3700;

    --sunset-500: #FF4E00; /* accent gradient end */
    --lime-400:   #C7E84B; /* fresh accent */
    --lime-500:   #A8D200;

    /* Neutrals */
    --ink-900: #0E0E10;
    --ink-700: #2A2A2E;
    --ink-500: #5C5C66;
    --ink-300: #A3A3AD;
    --ink-200: #D6D6DC;
    --ink-100: #ECECEF;
    --ink-50:  #F7F7F9;
    --paper:   #FFFFFF;
    --cream:   #FFFAF2;

    /* Semantic */
    --success: #1FB573;
    --warn:    #F2A516;
    --error:   #E5484D;

    /* Type */
    --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* Radii */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(14,14,16,.04), 0 1px 1px rgba(14,14,16,.02);
    --shadow-md: 0 4px 12px rgba(14,14,16,.06), 0 2px 4px rgba(14,14,16,.04);
    --shadow-lg: 0 16px 40px rgba(14,14,16,.10), 0 4px 8px rgba(14,14,16,.04);
    --shadow-glow: 0 12px 32px rgba(255,122,0,.25);

    /* Spacing scale */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
    --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
    --s-20: 80px; --s-24: 96px;

    /* Layout */
    --container: 1200px;
    --container-sm: 720px;
    --container-xs: 480px;

    /* Motion */
    --ease: cubic-bezier(.2,.7,.2,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
}

/* --- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-900);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
a { color: var(--mango-600); text-decoration: none; }
a:hover { color: var(--mango-700); }
input, select, textarea { font: inherit; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink-900); color: white; padding: 12px 16px;
    z-index: 100;
}
.skip-link:focus { left: 16px; top: 16px; }

/* --- Typography ----------------------------------------------------- */
h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    color: var(--ink-900);
    margin: 0 0 var(--s-4);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
}
h1 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); letter-spacing: -0.03em; font-weight: 800; }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h4 { font-size: 1.25rem; }
p  { margin: 0 0 var(--s-4); color: var(--ink-700); }
.lead { font-size: 1.25rem; line-height: 1.5; color: var(--ink-500); }
.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mango-600);
    margin-bottom: var(--s-3);
}

/* --- Layout helpers ------------------------------------------------- */
.container        { width: 100%; max-width: var(--container);    margin: 0 auto; padding: 0 var(--s-6); }
.container--sm    { width: 100%; max-width: var(--container-sm); margin: 0 auto; padding: 0 var(--s-6); }
.container--xs    { width: 100%; max-width: var(--container-xs); margin: 0 auto; padding: 0 var(--s-6); }
.section          { padding: var(--s-20) 0; }
.section--tight   { padding: var(--s-12) 0; }
.section--hero    { padding: var(--s-16) 0 var(--s-20); }
.text-center      { text-align: center; }
.stack > * + *    { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* --- Header --------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.site-header[data-scroll].is-scrolled { border-color: var(--ink-100); background: rgba(255,255,255,.95); }
.site-header__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-4) var(--s-6);
    display: flex; align-items: center; gap: var(--s-8);
}
.site-header__logo { display: inline-flex; }
.site-header__logo img { height: 36px; width: auto; }

.site-nav { display: flex; gap: var(--s-6); margin-left: var(--s-4); }
.site-nav a {
    color: var(--ink-700); font-weight: 500; font-size: 0.95rem;
    padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
    transition: color .15s, background .15s;
}
.site-nav a:hover { color: var(--ink-900); background: var(--ink-50); }

.site-header__actions { margin-left: auto; display: flex; gap: var(--s-3); align-items: center; }
.site-header__menu { display: none; background: none; border: 0; padding: var(--s-2); margin-left: auto; }
.site-header__menu span { display: block; width: 22px; height: 2px; background: var(--ink-900); margin: 5px 0; border-radius: 2px; transition: transform .2s; }

@media (max-width: 880px) {
    .site-nav, .site-header__actions { display: none; }
    .site-header__menu { display: block; }
    .site-header.is-menu-open .site-nav,
    .site-header.is-menu-open .site-header__actions {
        display: flex; flex-direction: column; gap: var(--s-2);
        position: absolute; top: 100%; left: 0; right: 0;
        background: white; padding: var(--s-4); border-bottom: 1px solid var(--ink-100);
    }
    .site-header.is-menu-open .site-header__actions { padding-top: 0; }
}

/* --- Buttons -------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    font-family: var(--font-body); font-weight: 600; font-size: 1rem;
    padding: var(--s-3) var(--s-6); height: 48px;
    border-radius: var(--r-pill); border: 1px solid transparent;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--sm { height: 40px; padding: 0 var(--s-5); font-size: 0.9375rem; }
.btn--lg { height: 56px; padding: 0 var(--s-8); font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }

.btn--primary {
    background: linear-gradient(135deg, var(--mango-500) 0%, var(--sunset-500) 100%);
    color: white; box-shadow: var(--shadow-glow);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(255,122,0,.34); color: white; }
.btn--primary:active { transform: translateY(0); }

.btn--secondary { background: var(--ink-900); color: white; }
.btn--secondary:hover { background: var(--ink-700); color: white; transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--ink-900); border-color: var(--ink-200); }
.btn--ghost:hover { background: var(--ink-50); border-color: var(--ink-300); color: var(--ink-900); }

.btn--link { background: none; padding: 0; height: auto; color: var(--mango-600); border: 0; }
.btn--link:hover { color: var(--mango-700); }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* --- Hero ----------------------------------------------------------- */
.hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(ellipse at 80% -20%, rgba(255,122,0,.18) 0%, transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgba(199,232,75,.16) 0%, transparent 50%),
        var(--cream);
    padding: var(--s-20) 0 var(--s-24);
}
.hero__grid {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-12); align-items: center;
}
@media (max-width: 880px) { .hero__grid { grid-template-columns: 1fr; gap: var(--s-10); } }

.hero h1 .accent {
    background: linear-gradient(135deg, var(--mango-500) 0%, var(--sunset-500) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block;
}

.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-8); }
.hero__trust {
    margin-top: var(--s-8); display: flex; gap: var(--s-6); flex-wrap: wrap;
    color: var(--ink-500); font-size: 0.9375rem;
}
.hero__trust .dot { color: var(--lime-500); margin-right: var(--s-2); font-weight: 700; }

.hero__visual {
    position: relative; aspect-ratio: 1/1;
    background: linear-gradient(135deg, var(--mango-500), var(--sunset-500));
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.hero__visual::before {
    content: ''; position: absolute; inset: -20%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.3), transparent 50%);
}
.hero__visual-card {
    position: absolute; inset: var(--s-8);
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    color: white;
    display: flex; flex-direction: column; justify-content: space-between;
}
.hero__visual-card .label {
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8;
}
.hero__visual-card .price {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(3rem, 8vw, 5rem); line-height: 1; letter-spacing: -0.04em;
}
.hero__visual-card .price sup { font-size: 0.4em; vertical-align: top; opacity: 0.85; }
.hero__visual-card .price small { font-size: 0.3em; opacity: 0.85; font-weight: 600; }
.hero__visual-card .features { display: flex; flex-direction: column; gap: var(--s-2); font-weight: 500; }
.hero__visual-card .features div::before { content: '✓'; margin-right: var(--s-2); color: var(--lime-400); font-weight: 700; }

/* --- Plan cards ----------------------------------------------------- */
.plans-grid {
    /* One horizontal row that scrolls left/right instead of wrapping onto a
       second line (PRACBILL-858). flex with no wrap keeps every card on one
       line; cards grow to fill the row when there's room but never shrink
       below their min width, so once they exceed the container they overflow
       and the row (not the page) scrolls. */
    display: flex;
    gap: var(--s-5);
    overflow-x: auto;
    overscroll-behavior-x: contain;      /* don't chain the scroll to the page */
    -webkit-overflow-scrolling: touch;   /* momentum scrolling on iOS */
    scroll-snap-type: x proximity;
    /* Vertical padding so the absolutely-positioned card badges/ribbons
       (top: -12px) and the hover lift/shadow aren't clipped — overflow-x:auto
       makes the computed overflow-y "auto", which would otherwise crop them. */
    padding: var(--s-5) 0 var(--s-3);
}
.plans-grid > .plan-card {
    flex: 1 0 280px;            /* grow to fill the row, never shrink, sensible min width */
    scroll-snap-align: start;
}
.plan-card {
    position: relative;
    background: var(--paper);
    border: 1.5px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
    display: flex; flex-direction: column;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--mango-300); }
.plan-card.is-featured {
    border-color: var(--mango-500); border-width: 2px;
    background: linear-gradient(180deg, var(--mango-50) 0%, var(--paper) 60%);
}
.plan-card__badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--ink-900); color: white;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 6px 14px; border-radius: var(--r-pill);
}
.plan-card__name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; margin-bottom: var(--s-2); color: var(--ink-700); }
.plan-card__data { font-family: var(--font-display); font-size: 3.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--ink-900); margin-bottom: var(--s-1); }
.plan-card__data small { font-size: 0.9rem; font-weight: 600; color: var(--ink-500); display: block; margin-top: var(--s-1); }
.plan-card__price { font-size: 1rem; color: var(--ink-500); margin: var(--s-4) 0 var(--s-6); }
.plan-card__price strong { color: var(--ink-900); font-size: 1.5rem; font-family: var(--font-display); font-weight: 700; }
.plan-card__features { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); }
.plan-card__features li { color: var(--ink-700); font-size: 0.9375rem; display: flex; gap: var(--s-2); align-items: flex-start; }
.plan-card__features li::before { content: '✓'; color: var(--mango-500); font-weight: 800; }
.plan-card .btn { margin-top: auto; }

/* --- Login + account area (PRACBILL-766) ---------------------------- */
.login-card {
    max-width: 440px; margin: 0 auto;
    background: var(--paper); border: 1.5px solid var(--ink-100);
    border-radius: var(--r-lg); padding: var(--s-10);
}
.login-card h1 { font-size: 1.75rem; margin: var(--s-2) 0; }
.login-card form { margin-top: var(--s-6); }
.login-card__error, .login-card__success {
    border-radius: var(--r-sm); padding: var(--s-3) var(--s-4);
    font-size: 0.9375rem; margin: var(--s-4) 0;
}
.login-card__error   { background: #FDECEC; color: var(--error); border: 1px solid var(--error); }
.login-card__success { background: #E8F8F0; color: var(--success); border: 1px solid var(--success); }

/* Site-wide flash notices (addWebsiteNotification → $systemNotifications) */
.site-notices { max-width: 1140px; margin: var(--s-6) auto 0; padding: 0 var(--s-6); }
.site-notice {
    border-radius: var(--r-sm); padding: var(--s-3) var(--s-4);
    font-size: 0.9375rem; margin-bottom: var(--s-3);
    background: #FDECEC; color: var(--error); border: 1px solid var(--error);
}
.site-notice--success { background: #E8F8F0; color: var(--success); border-color: var(--success); }

.account-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: var(--s-4); margin-bottom: var(--s-8); flex-wrap: wrap;
}
.account-head h1 { font-size: 1.875rem; margin: var(--s-1) 0 0; }
.account-layout {
    display: grid; grid-template-columns: 240px 1fr; gap: var(--s-8);
    align-items: start;
}
@media (max-width: 800px) { .account-layout { grid-template-columns: 1fr; } }
.account-nav {
    background: var(--paper); border: 1.5px solid var(--ink-100);
    border-radius: var(--r-md); padding: var(--s-4); position: sticky; top: 90px;
}
.account-nav__group + .account-nav__group { margin-top: var(--s-5); }
.account-nav__title {
    font-family: var(--font-display); font-size: 0.75rem; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-300);
    margin-bottom: var(--s-2);
}
.account-nav__link {
    display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-xs);
    color: var(--ink-700); font-weight: 600; font-size: 0.9375rem; text-decoration: none;
}
.account-nav__link:hover { background: var(--ink-50); color: var(--ink-900); }
.account-nav__link.is-active { background: var(--mango-50); color: var(--mango-700); }
.account-content {
    background: var(--paper); border: 1.5px solid var(--ink-100);
    border-radius: var(--r-md); padding: var(--s-8); min-height: 320px;
    overflow-x: auto;
}

/* PRACBILL-965: make the members area mobile-friendly. Placed AFTER the base
   .account-nav / .account-content rules above so these overrides win on source
   order (equal specificity). Stack to one column and STOP the sidebar nav from
   sticking over the content (it was floating over the service cards, and the
   content's position:relative toggles painted through it). The nav becomes a
   compact wrapping pill menu above the content; min-width:0 lets wide children
   (tables, payment forms) scroll inside .account-content via its existing
   overflow-x:auto instead of widening the whole page. */
@media (max-width: 800px) {
    .account-content { min-width: 0; padding: var(--s-5); }
    .account-nav {
        position: static;
        display: flex; flex-wrap: wrap; align-items: center;
        gap: var(--s-1) var(--s-2); padding: var(--s-3);
    }
    .account-nav__group { display: contents; }
    .account-nav__group + .account-nav__group { margin-top: 0; }
    .account-nav__title { flex: 1 0 100%; margin: var(--s-2) 0 0; }
    .account-nav__group:first-child .account-nav__title { margin-top: 0; }
    .account-nav__link {
        display: block; background: var(--ink-50); padding: var(--s-1) var(--s-3);
        border-radius: var(--r-pill); font-size: 0.875rem;
    }
    .account-nav__link.is-active { background: var(--mango-100); color: var(--mango-700); }
}
/* Normalise the members_area module's Bootstrap-flavoured output. */
.account-content h1 { font-size: 1.375rem; margin: 0 0 var(--s-5); }
.account-content .panel {
    border: 1.5px solid var(--ink-100); border-radius: var(--r-sm);
    margin-bottom: var(--s-4); overflow: hidden;
}
.account-content .panel-heading {
    background: var(--ink-50); font-weight: 700; padding: var(--s-3) var(--s-4);
    font-family: var(--font-display);
}
.account-content .panel-body { padding: var(--s-3) var(--s-4); border: 0 !important; }
.account-content table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.account-content th, .account-content td {
    text-align: left; padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--ink-100);
}
.account-content fieldset { border: 1.5px solid var(--ink-100); border-radius: var(--r-sm); padding: var(--s-4); }
.account-content legend { font-weight: 700; padding: 0 var(--s-2); }

/* Plan group tabs (PRACBILL-848) — one tab per reporting category. */
.plan-tabs {
    display: flex; justify-content: center; gap: var(--s-2);
    margin-bottom: var(--s-10); flex-wrap: wrap;
}
.plan-tab {
    font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700;
    color: var(--ink-500); background: var(--ink-50);
    border: 1.5px solid var(--ink-100); border-radius: var(--r-pill);
    padding: 10px 22px; cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.plan-tab:hover { color: var(--ink-900); border-color: var(--mango-300); }
.plan-tab.is-active {
    color: white; background: var(--ink-900); border-color: var(--ink-900);
}
.plan-group.is-hidden { display: none; }

/* Feature ribbon banners (PRACBILL-848) — e.g. the "5G" differentiator,
   from the service type's ServiceFeatures. Sits top-right so it can coexist
   with the centred "Most popular" badge. */
.plan-card__ribbons {
    position: absolute; top: -12px; right: var(--s-5);
    display: flex; gap: var(--s-1);
}
.plan-card__ribbon {
    background: var(--sunset-500); color: white;
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 5px 12px; border-radius: var(--r-pill);
}

/* --- Feature blocks ------------------------------------------------- */
.feature-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-6);
}
.feature {
    padding: var(--s-6);
    border-radius: var(--r-md);
    background: var(--ink-50);
}
.feature__icon {
    width: 48px; height: 48px; border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--mango-500), var(--sunset-500));
    color: white; font-size: 24px; margin-bottom: var(--s-4);
}
.feature h3 { font-size: 1.125rem; margin-bottom: var(--s-2); }
.feature p { font-size: 0.9375rem; margin: 0; }

/* ===== SIGN-UP FLOW ================================================ */

.signup-shell {
    background: var(--cream);
    min-height: calc(100vh - 64px);
    display: flex; flex-direction: column;
}

/* Stepper */
.stepper {
    background: var(--paper);
    border-bottom: 1px solid var(--ink-100);
    position: sticky; top: 64px; z-index: 40;
}
.stepper__inner {
    max-width: var(--container-sm); margin: 0 auto;
    padding: var(--s-4) var(--s-6);
    display: flex; align-items: center; gap: var(--s-4);
}
.stepper__back {
    display: inline-flex; align-items: center; gap: var(--s-1);
    background: none; border: 0; padding: var(--s-2);
    color: var(--ink-500); font-weight: 500; font-size: 0.9375rem;
    border-radius: var(--r-sm);
}
.stepper__back:hover { color: var(--ink-900); background: var(--ink-50); }
.stepper__progress {
    flex: 1; position: relative; height: 6px;
    background: var(--ink-100); border-radius: var(--r-pill); overflow: hidden;
}
.stepper__progress-bar {
    position: absolute; left: 0; top: 0; height: 100%;
    background: linear-gradient(90deg, var(--mango-500), var(--sunset-500));
    border-radius: var(--r-pill);
    transition: width .4s var(--ease-out);
}
.stepper__count {
    font-size: 0.875rem; color: var(--ink-500); font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 56px; text-align: right;
}

/* Page wrapper for each sign-up step */
.signup-step {
    flex: 1;
    padding: var(--s-12) var(--s-6) calc(var(--s-24) + 80px);
    max-width: var(--container-sm);
    margin: 0 auto;
    width: 100%;
    animation: stepIn .35s var(--ease-out);
}
@keyframes stepIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.signup-step__heading h1 {
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    margin-bottom: var(--s-3);
}
.signup-step__heading p { color: var(--ink-500); font-size: 1.0625rem; }

.signup-step__body { margin-top: var(--s-10); }

/* Sign-up sticky footer with continue button */
.signup-footer {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--ink-100);
    padding: var(--s-4) var(--s-6);
    z-index: 30;
}
.signup-footer__inner {
    max-width: var(--container-sm); margin: 0 auto;
    display: flex; flex-direction: column; gap: var(--s-3);
}
.signup-footer__main { display: flex; gap: var(--s-3); align-items: center; }
.signup-footer__hint { color: var(--ink-500); font-size: 0.875rem; }
.signup-footer__cta { margin-left: auto; min-width: 200px; }
@media (max-width: 600px) {
    .signup-footer__hint { display: none; }
    .signup-footer__cta { width: 100%; min-width: 0; }
}

/* Promo-code entry in the sticky footer (collapsible). */
.footer-promo { font-size: 0.875rem; }
.footer-promo__summary {
    cursor: pointer; color: var(--mango-600); font-weight: 600;
    list-style: none; display: inline-flex; align-items: center; gap: var(--s-2);
    user-select: none;
}
.footer-promo__summary::-webkit-details-marker { display: none; }
.footer-promo__summary::before {
    content: '+'; font-weight: 800; font-size: 1rem; line-height: 1;
}
.footer-promo[open] .footer-promo__summary::before { content: '\2212'; } /* minus */
.footer-promo__body { margin-top: var(--s-3); }
.footer-promo__input { height: 48px; }
.footer-promo .signup-error,
.footer-promo .signup-success { margin: var(--s-2) 0 0; }

/* Plan-category toggle tabs (signup_plan) — switch between groups instead of
   listing them one after another. */
.plan-tabs {
    display: flex; flex-wrap: wrap; gap: var(--s-2);
    margin-bottom: var(--s-6);
}
.plan-tab {
    appearance: none; cursor: pointer;
    padding: var(--s-3) var(--s-5);
    border: 1.5px solid var(--ink-200); border-radius: var(--r-pill);
    background: var(--paper);
    font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
    color: var(--ink-500);
    transition: border-color .15s, color .15s, background .15s, box-shadow .2s;
}
.plan-tab:hover { border-color: var(--mango-300); color: var(--ink-900); }
.plan-tab.is-active {
    border-color: var(--mango-500); color: var(--mango-700);
    background: var(--mango-50); box-shadow: var(--shadow-glow);
}
.plan-tab:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(255,122,0,.18); }
.plan-panel.is-hidden { display: none; }

/* Selectable cards (for plan/connection/SIM/ID/number choices) */
.option-list { display: flex; flex-direction: column; gap: var(--s-3); }
.option-list + .option-group__heading { margin-top: var(--s-8); }
.option-group__heading {
    font-family: var(--font-display); font-size: 0.8125rem; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500);
    margin: 0 0 var(--s-3);
}
.option__feature-badge {
    display: inline-block; vertical-align: middle; margin-left: var(--s-1);
    background: var(--sunset-500); color: white;
    font-size: 0.625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 3px 8px; border-radius: var(--r-pill);
}
.option {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-5) var(--s-6);
    border: 1.5px solid var(--ink-200); border-radius: var(--r-md);
    background: var(--paper);
    cursor: pointer;
    transition: border-color .15s, box-shadow .2s, transform .15s;
    position: relative;
}
.option:hover { border-color: var(--mango-300); transform: translateY(-1px); }
.option input[type=radio], .option input[type=checkbox] { position: absolute; opacity: 0; }
.option__radio {
    width: 24px; height: 24px; border-radius: var(--r-pill);
    border: 2px solid var(--ink-200); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .15s, background .15s;
}
.option__radio::after {
    content: ''; width: 10px; height: 10px; border-radius: var(--r-pill);
    background: white; opacity: 0; transform: scale(.5); transition: opacity .15s, transform .15s;
}
.option__icon {
    width: 48px; height: 48px; border-radius: var(--r-md);
    background: var(--ink-50); display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 24px;
}
.option__body { flex: 1; min-width: 0; }
.option__title { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--ink-900); margin-bottom: 2px; }
.option__sub { color: var(--ink-500); font-size: 0.9375rem; }
.option__meta { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }
.option:has(input:checked), .option.is-selected {
    border-color: var(--mango-500); border-width: 2px;
    box-shadow: var(--shadow-glow); padding: calc(var(--s-5) - 0.5px) calc(var(--s-6) - 0.5px);
}
.option:has(input:checked) .option__radio,
.option.is-selected .option__radio {
    border-color: var(--mango-500); background: var(--mango-500);
}
.option:has(input:checked) .option__radio::after,
.option.is-selected .option__radio::after { opacity: 1; transform: scale(1); }

/* Plan cards inside sign-up */
.option--plan {
    flex-direction: row; align-items: stretch;
}
.option--plan .option__data {
    font-family: var(--font-display); font-weight: 800;
    font-size: 2.25rem; line-height: 1; color: var(--ink-900);
}
.option--plan .option__data small { font-size: .55rem; font-weight: 600; opacity: .7; }
.option--plan .option__price {
    font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
    color: var(--mango-600);
}
.option--plan .option__price small { font-size: 0.875rem; color: var(--ink-500); font-weight: 500; }

/* Segmented button-group toggle (e.g. Pre-paid / Post-paid) */
.btn-toggle {
    display: inline-flex;
    padding: 4px;
    background: var(--ink-50);
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-pill);
    gap: 4px;
}
.btn-toggle__option { position: relative; flex: 1; }
.btn-toggle__option input {
    position: absolute; opacity: 0; pointer-events: none;
}
.btn-toggle__label {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 120px;
    padding: var(--s-3) var(--s-6);
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-weight: 600; font-size: 0.9375rem;
    color: var(--ink-500);
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
    white-space: nowrap;
}
.btn-toggle__option:hover .btn-toggle__label { color: var(--ink-900); }
.btn-toggle__option input:checked + .btn-toggle__label {
    background: linear-gradient(135deg, var(--mango-500) 0%, var(--sunset-500) 100%);
    color: white;
    box-shadow: var(--shadow-glow);
}
.btn-toggle__option input:focus-visible + .btn-toggle__label {
    box-shadow: 0 0 0 4px rgba(255,122,0,.18);
}
@media (max-width: 480px) {
    .btn-toggle { width: 100%; }
    .btn-toggle__label { min-width: 0; width: 100%; }
}

/* Reserved/allocated number display (new-number flow) */
.reserved-number {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
    padding: var(--s-10) var(--s-6);
    background: linear-gradient(135deg, var(--mango-50) 0%, var(--paper) 100%);
    border: 2px solid var(--mango-200);
    border-radius: var(--r-lg);
    text-align: center;
}
.reserved-number__label {
    font-size: 0.8125rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--mango-700);
}
.reserved-number__value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 6vw, 2.75rem);
    letter-spacing: 0.04em;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
}

/* Form fields */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field + .field { margin-top: var(--s-5); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: start; }
/* Grid cells are adjacent siblings, so the stacked-field margin above also
   targets the 2nd cell and pushes it down — the grid gap already spaces them. */
.field-grid .field + .field { margin-top: 0; }
@media (max-width: 600px) { .field-grid { grid-template-columns: 1fr; } }

.label { font-weight: 600; font-size: 0.9375rem; color: var(--ink-700); }
.label small { color: var(--ink-500); font-weight: 500; }

.input, .select, .textarea {
    height: 56px;
    padding: 0 var(--s-5);
    background: var(--paper);
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    font-size: 1rem;
    color: var(--ink-900);
    transition: border-color .15s, box-shadow .15s, background .15s;
    width: 100%;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-300); }
.input:focus, .select:focus, .textarea:focus {
    outline: 0; border-color: var(--mango-500);
    box-shadow: 0 0 0 4px rgba(255,122,0,.12);
}
.textarea { height: auto; padding: var(--s-4) var(--s-5); resize: vertical; min-height: 120px; }
.input::placeholder { color: var(--ink-300); }
.help { font-size: 0.875rem; color: var(--ink-500); }
.help--error { color: var(--error); }

/* Inline form error banner (e.g. failed server-side validation) */
.signup-error {
    margin: var(--s-4) 0;
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--error);
    border-radius: var(--radius, 10px);
    background: rgba(229,72,77,.08);
    color: var(--error);
    font-size: 0.9375rem;
}

/* Prominent log-in action shown when the entered email already has an account */
.signup-error__login {
    display: inline-block;
    margin-top: var(--s-3);
}

/* Inline confirmation banner (e.g. a promo code that validated, PRACBILL-918) */
.signup-success {
    margin: var(--s-3) 0 0;
    padding: var(--s-3) var(--s-4);
    border: 1px solid #2e7d32;
    border-radius: var(--radius, 10px);
    background: rgba(46,125,50,.08);
    color: #2e7d32;
    font-size: 0.875rem;
}

/* Secondary note text inside a review row (e.g. promo code / duration, PRACBILL-918) */
.review-note { color: var(--ink-500); font-weight: 500; }
.review-row--note { padding-top: 0; border-top: 0; }
.review-row--note dd { font-weight: 500; color: var(--ink-500); font-size: 0.8125rem; line-height: 1.5; }

/* Identity-verification status panels (signup_id step) */
.verify-status {
    margin: var(--s-4) 0 var(--s-6);
    padding: var(--s-5) var(--s-6);
    border-radius: var(--radius, 10px);
    border: 1px solid var(--ink-200);
    background: var(--ink-50);
}
.verify-status h2 { margin: 0 0 var(--s-3); font-size: 1.125rem; }
.verify-status p  { margin: 0; color: var(--ink-700); }
.verify-status--pending  { border-color: var(--mango-500); background: rgba(255,122,0,.06); }
.verify-status--declined { border-color: var(--error);     background: rgba(229,72,77,.08); }
.signup-actions { display: flex; flex-direction: column; gap: var(--s-3); }

/* Stripe Elements card container, styled to match .input (it's a div, not an input) */
.stripe-field {
    display: block;
    height: auto;
    min-height: 52px;
    padding: var(--s-4) var(--s-5);
}
.stripe-field.StripeElement--focus {
    outline: 0; border-color: var(--mango-500);
    box-shadow: 0 0 0 4px rgba(255,122,0,.12);
}
.stripe-field.StripeElement--invalid { border-color: var(--error); }

/* Trust signals */
.trust-bar {
    display: flex; gap: var(--s-6); flex-wrap: wrap;
    padding: var(--s-4) var(--s-5);
    background: var(--ink-50); border-radius: var(--r-md);
    color: var(--ink-500); font-size: 0.875rem;
    margin-top: var(--s-6);
}
.trust-bar svg { color: var(--success); flex-shrink: 0; }
.trust-bar > div { display: inline-flex; gap: var(--s-2); align-items: center; }

/* Review summary panel */
.review-card {
    background: var(--paper);
    border: 1.5px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: var(--s-6);
}
.review-card + .review-card { margin-top: var(--s-4); }
.review-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.review-card__head h3 { font-size: 1.125rem; margin: 0; }
.review-card__head a { font-size: 0.9375rem; font-weight: 600; }
.review-row { display: flex; justify-content: space-between; padding: var(--s-3) 0; border-top: 1px solid var(--ink-100); font-size: 0.9375rem; }
.review-row:first-child { border-top: 0; padding-top: 0; }
.review-row dt { color: var(--ink-500); font-weight: 500; }
.review-row dd { color: var(--ink-900); margin: 0; font-weight: 600; text-align: right; }
.review-total { font-size: 1.125rem; }
.review-total dd { color: var(--mango-600); font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; }

/* Welcome screen */
.welcome {
    min-height: calc(100vh - 64px);
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: var(--s-12) var(--s-6);
    background:
        radial-gradient(ellipse at top, rgba(255,122,0,.12) 0%, transparent 60%),
        var(--cream);
}
.welcome__inner { max-width: 600px; }
.welcome__check {
    width: 96px; height: 96px; border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--lime-400), var(--lime-500));
    color: var(--ink-900);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: var(--s-8);
    box-shadow: var(--shadow-glow);
    animation: pop .6s var(--ease-out);
}
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* --- Footer --------------------------------------------------------- */
.site-footer { background: var(--ink-900); color: var(--ink-300); padding: var(--s-16) 0 var(--s-6); }
.site-footer__inner {
    max-width: var(--container); margin: 0 auto; padding: 0 var(--s-6);
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-10);
}
@media (max-width: 720px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } }
.site-footer__brand p { color: var(--ink-300); margin-top: var(--s-4); font-size: 0.9375rem; }
.site-footer h4 { color: white; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--s-4); }
.site-footer__col a { display: block; color: var(--ink-300); padding: var(--s-1) 0; font-size: 0.9375rem; }
.site-footer__col a:hover { color: white; }
.site-footer__bottom {
    max-width: var(--container); margin: var(--s-10) auto 0; padding: var(--s-6) var(--s-6) 0;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
    color: var(--ink-300); font-size: 0.875rem;
}

/* --- Utilities ------------------------------------------------------ */
.muted { color: var(--ink-500); }
.divider { border: 0; height: 1px; background: var(--ink-100); margin: var(--s-8) 0; }
.tag {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: 4px 10px; border-radius: var(--r-pill);
    background: var(--mango-50); color: var(--mango-700);
    font-size: 0.8125rem; font-weight: 600;
}
.tag--ink { background: var(--ink-100); color: var(--ink-700); }
.tag--lime { background: rgba(199,232,75,.3); color: var(--ink-700); }

/* --- Gateway card form (signup payment) -----------------------------
   The dept payment gateway renders its card form with Bootstrap class
   names (paymentMethodCardEntry / FormElements). We don't load Bootstrap;
   these rules restyle that markup to match the theme. PRACBILL-764. */
.gw-card .card,
.gw-card .col-md-12 { background: transparent; border: 0; box-shadow: none; margin: 0; padding: 0; }
.gw-card .card-header { display: none; }
.gw-card .card-body { padding: 0; }

.gw-card .mb-3 { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); }

/* Hide bits that don't belong in a consumer sign-up. These MUST come after the
   `.mb-3 { display:flex }` rule above: the "Make Primary?" toggle is
   `form-check form-switch mb-3`, so at equal specificity the later rule wins —
   the hide has to be last to beat the flex. The card is saved as primary by
   default server-side (signup_payment.php), so the toggle is redundant here. */
.gw-card .form-check,
.gw-card .btn-cancel { display: none; }
/* Hide ONLY the "Nickname" field wrapper. `> input` (direct child) is essential:
   the gateway wraps the whole form in `.card.mb-3`, which also CONTAINS this
   input as a descendant — a plain (descendant) :has would match that wrapper
   and hide the entire form. */
.gw-card .mb-3:has(> input[name="name"]) { display: none; }

.gw-card .form-label,
.gw-card .stripe-card-entry label { font-weight: 600; font-size: 0.9375rem; color: var(--ink-700); }

.gw-card .form-control {
    width: 100%; box-sizing: border-box;
    height: 56px; padding: 0 var(--s-5);
    background: var(--paper);
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    font-size: 1rem; color: var(--ink-900);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.gw-card select.form-control { padding-right: var(--s-8); }
.gw-card .form-control:hover { border-color: var(--ink-300); }
.gw-card .form-control:focus {
    outline: 0; border-color: var(--mango-500);
    box-shadow: 0 0 0 4px rgba(255,122,0,.12);
}

/* Stripe Elements mounts its card iframe into a bare div
   (#stripe-card-element) — the iframe contents can't be styled from here
   (payment_screen.tpl passes the text styles to Stripe), so give the
   CONTAINER the same box as .form-control inputs. Stripe toggles
   StripeElement--focus/--invalid on the container for the states. */
.gw-card #stripe-card-element {
    box-sizing: border-box; width: 100%;
    padding: 18px var(--s-5); margin-top: var(--s-2);
    background: var(--paper);
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    font-size: 1rem; color: var(--ink-400); /* the pre-mount "Loading…" text */
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.gw-card #stripe-card-element:hover { border-color: var(--ink-300); }
.gw-card #stripe-card-element.StripeElement--focus {
    border-color: var(--mango-500);
    box-shadow: 0 0 0 4px rgba(255,122,0,.12);
}
.gw-card #stripe-card-element.StripeElement--invalid { border-color: var(--error); }
.gw-card #stripe-card-errors {
    color: var(--error); font-size: .9rem; min-height: 1.2em;
    margin: var(--s-2) 0 var(--s-5);
}

.gw-card .btn-save {
    display: flex; width: 100%; align-items: center; justify-content: center;
    height: 56px; padding: 0 var(--s-8); margin-top: var(--s-6);
    font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem;
    border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer;
    background: linear-gradient(135deg, var(--mango-500) 0%, var(--sunset-500) 100%);
    color: #fff; box-shadow: var(--shadow-glow);
    transition: transform .15s, box-shadow .2s;
}
.gw-card .btn-save:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(255,122,0,.34); }
.gw-card .btn-save:active { transform: translateY(0); }

/* ---------------------------------------------------------------------------
   My Account legacy forms (administration/myAccount, etc.). These render the
   core members_area templates, which are Bootstrap-scaffolded (fieldset/legend,
   .control-label, .form-control). The public account pages don't load
   Bootstrap, so without this they appear as bare stacked vanilla controls.
   Scoped to .account-content; the Mango service list (.mm-*) and payment form
   (.gw-card) use their own classes and are unaffected.
--------------------------------------------------------------------------- */
.account-content fieldset {
    border: 1px solid var(--ink-100); border-radius: var(--r-lg);
    background: var(--paper); padding: var(--s-6); margin: 0 0 var(--s-6);
}
.account-content legend {
    width: auto; margin: 0 0 var(--s-4); padding: 0; border: 0;
    font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: var(--ink-900);
}
.account-content legend b { font-weight: inherit; }
.account-content .control-label {
    display: block; margin: var(--s-4) 0 var(--s-2);
    font-weight: 600; font-size: 0.9375rem; color: var(--ink-700);
}
.account-content .form-control {
    width: 100%; box-sizing: border-box;
    height: 56px; padding: 0 var(--s-5);
    background: var(--paper); border: 1.5px solid var(--ink-200); border-radius: var(--r-md);
    font-size: 1rem; color: var(--ink-900);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.account-content select.form-control { padding-right: var(--s-8); }
.account-content .form-control:hover { border-color: var(--ink-300); }
.account-content .form-control:focus {
    outline: 0; border-color: var(--mango-500); box-shadow: 0 0 0 4px rgba(255,122,0,.12);
}
/* Inputs whose markup carries .form-control but aren't text fields. */
.account-content input[type=file].form-control { height: auto; padding: var(--s-3) var(--s-4); }
.account-content input[type=checkbox].form-control,
.account-content input[type=radio].form-control { width: auto; height: auto; box-shadow: none; }
/* Submit/cancel are tagged .form-control .btn in the legacy markup → Mango button. */
.account-content input[type=submit],
.account-content button[type=submit],
.account-content .form-control.btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: auto; height: 56px; padding: 0 var(--s-8); margin-top: var(--s-4);
    font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem;
    border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer;
    background: linear-gradient(135deg, var(--mango-500) 0%, var(--sunset-500) 100%);
    color: #fff; box-shadow: var(--shadow-glow); transition: transform .15s, box-shadow .2s;
}
.account-content input[type=submit]:hover,
.account-content button[type=submit]:hover,
.account-content .form-control.btn:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(255,122,0,.34); }

/* ---------------------------------------------------------------------------
   Account service list — Vocus mobile usage + feature controls (PRACBILL-888)
--------------------------------------------------------------------------- */
.mm-services__title { font-family: var(--font-display); margin-bottom: var(--s-6); }
.mm-services__empty { color: var(--ink-500); }
.mm-services { display: flex; flex-direction: column; gap: var(--s-4); }
.mm-service-card { overflow: hidden; }
.mm-service-card__header {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
}
.mm-service-card__name { font-family: var(--font-display); font-weight: 600; }
.mm-service-card__number { color: var(--ink-500); font-variant-numeric: tabular-nums; }
.mm-service-card__billing { margin-top: var(--s-1); color: var(--ink-500); font-size: 0.9375rem; }
.mm-service-card__meta {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
    margin-top: var(--s-1); color: var(--ink-500); font-size: 0.9375rem;
}
.mm-service-card__price { font-family: var(--font-display); font-weight: 600; color: var(--ink-900); }
.mm-service-card__price small { color: var(--ink-500); font-weight: 500; }
.mm-service-card__data {
    display: inline-block; margin-top: var(--s-2);
    font-weight: 600; font-size: 0.875rem; color: var(--mango-700);
    background: var(--mango-50); border-radius: var(--r-pill);
    padding: 2px var(--s-3);
}
.mm-service-card__actions { margin-top: var(--s-5); }
.mm-service-card__usage {
    display: flex; align-items: baseline; gap: var(--s-3); margin: var(--s-4) 0;
}
.mm-service-card__usage-label {
    text-transform: uppercase; font-size: 0.75rem; letter-spacing: .04em; color: var(--ink-500);
}
.mm-service-card__usage-value { font-family: var(--font-display); font-weight: 600; }
.mm-service-card__usage-value.is-unavailable { color: var(--ink-300); font-weight: 400; font-style: italic; }
.mm-service-card__note { color: var(--ink-500); font-size: 0.875rem; margin: var(--s-2) 0; }

/* Data-usage progress bar. Shown when a numeric usage figure is available;
   the card otherwise falls back to the plain usage text above. */
.mm-usage { margin: var(--s-4) 0; }
.mm-usage__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s-3); margin-bottom: var(--s-2);
}
.mm-usage__label {
    text-transform: uppercase; font-size: 0.75rem; letter-spacing: .04em; color: var(--ink-500);
}
.mm-usage__figure { font-family: var(--font-display); font-weight: 600; color: var(--ink-900); }
.mm-usage__of { color: var(--ink-500); font-weight: 500; }
.mm-usage__track {
    height: 10px; border-radius: var(--r-pill); background: var(--ink-100); overflow: hidden;
}
.mm-usage__fill {
    height: 100%; border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--mango-400) 0%, var(--mango-500) 60%, var(--sunset-500) 100%);
    transition: width .5s ease;
}
.mm-usage.is-low .mm-usage__fill { background: linear-gradient(90deg, var(--sunset-500) 0%, var(--error) 100%); }
.mm-usage__foot { margin-top: var(--s-2); font-size: 0.8125rem; color: var(--ink-500); }
.mm-usage.is-low .mm-usage__foot { color: var(--error); font-weight: 600; }
.mm-service-card__controls { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); }
.mm-control { display: flex; align-items: center; gap: var(--s-3); }
.mm-control__label { flex: 1; font-weight: 600; color: var(--ink-700); }
.mm-control__saving {
    font-size: 0.8125rem; font-weight: 600; color: var(--mango-600);
    opacity: 0; transition: opacity .15s;
}
.mm-control.is-saving { opacity: .65; pointer-events: none; }
.mm-control.is-saving .mm-control__saving { opacity: 1; }

/* Sliding toggle switch */
.mm-switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.mm-switch__input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
}
.mm-switch__track {
    width: 48px; height: 28px; border-radius: var(--r-pill);
    background: var(--ink-200); transition: background .2s ease; display: inline-block;
}
.mm-switch__thumb {
    position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
    background: white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .2s ease;
}
.mm-switch__input:checked + .mm-switch__track { background: var(--mango-500); }
.mm-switch__input:checked + .mm-switch__track .mm-switch__thumb { transform: translateX(20px); }
.mm-switch__input:focus-visible + .mm-switch__track { outline: 2px solid var(--mango-400); outline-offset: 2px; }
@media (max-width: 480px) {
    .mm-control { flex-wrap: wrap; }
    .mm-control__label { flex: 1 0 100%; }
}

/* ============================================================
   PRACBILL-965 — order progress / verification / error
   ============================================================ */

/* Card badge (links to the progress detail screen) */
.mm-progress {
    display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
    margin-top: var(--s-2); padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md); border: 1px solid var(--ink-200);
    background: var(--paper); text-decoration: none; color: var(--ink-900);
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.mm-progress:hover { border-color: var(--ink-300); }
.mm-progress__badge {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px var(--s-2); border-radius: var(--r-pill); color: #fff; background: var(--ink-500);
}
.mm-progress__text { font-weight: 600; }
.mm-progress__cta { margin-left: auto; font-weight: 600; color: var(--link); white-space: nowrap; }

.mm-progress--info    { border-color: var(--mango-200); background: var(--mango-50); }
.mm-progress--info    .mm-progress__badge { background: var(--mango-500); }
.mm-progress--warn    { border-color: var(--mango-400); background: var(--mango-50); }
.mm-progress--warn    .mm-progress__badge { background: var(--mango-600); }
.mm-progress--error   { border-color: #E7B4B4; background: #FCEDED; }
.mm-progress--error   .mm-progress__badge { background: var(--error); }
.mm-progress--success { border-color: var(--lime-400); background: #F4FAD9; }
.mm-progress--success .mm-progress__badge { background: var(--lime-500); color: var(--ink-900); }

/* Detail screen */
.mm-progress-page { max-width: var(--container-sm); margin: 0 auto; }
.mm-back { display: inline-block; margin-bottom: var(--s-3); color: var(--ink-500); text-decoration: none; font-weight: 600; }
.mm-back:hover { color: var(--ink-900); }
.mm-progress-page__title { margin: 0; }
.mm-progress-page__sub { margin: var(--s-1) 0 var(--s-5); color: var(--ink-500); }

/* Step list */
.mm-steps { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.mm-steps__item { position: relative; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0 var(--s-2) var(--s-1); }
.mm-steps__item::before {
    content: ""; position: absolute; left: 9px; top: 24px; bottom: -4px; width: 2px; background: var(--ink-200);
}
.mm-steps__item:last-child::before { display: none; }
.mm-steps__dot { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink-200); background: var(--paper); z-index: 1; }
.mm-steps__label { color: var(--ink-500); }
.mm-steps__item.is-done .mm-steps__dot    { background: var(--lime-500); border-color: var(--lime-500); }
.mm-steps__item.is-done .mm-steps__label  { color: var(--ink-900); }
.mm-steps__item.is-current .mm-steps__dot { border-color: var(--mango-500); box-shadow: 0 0 0 4px var(--mango-50); }
.mm-steps__item.is-current .mm-steps__label { color: var(--ink-900); font-weight: 700; }
.mm-steps__item.is-error .mm-steps__dot   { border-color: var(--error); background: var(--error); }
.mm-steps__item.is-error .mm-steps__label { color: var(--ink-900); font-weight: 700; }

/* State panel */
.mm-state { padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--ink-200); background: var(--paper); }
.mm-state--info    { border-color: var(--mango-200); background: var(--mango-50); }
.mm-state--warn    { border-color: var(--mango-400); }
.mm-state--error   { border-color: #E7B4B4; background: #FCEDED; }
.mm-state--success { border-color: var(--lime-400); }
.mm-state__headline { margin: 0 0 var(--s-2); }
.mm-state__message { margin: 0 0 var(--s-4); color: var(--ink-700); }
.mm-state__hint { margin: 0 0 var(--s-3); color: var(--ink-500); font-size: 0.9375rem; }
.mm-state__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }

/* Verify form */
.mm-verify { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.mm-verify__code {
    font-size: 1.5rem; letter-spacing: .4em; text-align: center; width: 9ch;
    padding: var(--s-2) var(--s-3); border: 2px solid var(--ink-300); border-radius: var(--r-md);
    font-family: var(--font-display); background: var(--paper);
}
.mm-verify__code:focus { outline: none; border-color: var(--mango-500); }
.mm-verify__resend { margin-top: var(--s-3); }
.mm-linkbtn { background: none; border: 0; padding: 0; color: var(--link); font-weight: 600; cursor: pointer; text-decoration: underline; }

/* Inline alerts (flash) */
.mm-alert { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); margin-bottom: var(--s-4); }
.mm-alert--ok    { background: #F4FAD9; border: 1px solid var(--lime-400); color: var(--ink-900); }
.mm-alert--error { background: #FCEDED; border: 1px solid #E7B4B4; color: var(--ink-900); }

/* ============================================================
   PRACBILL-978 — My Account payment entry (Stripe)
   Scoped to .ma-payment so only MangoMobile's account payment
   form is affected. The shared gateway template renders the
   "Name on Card" input with an inline `border: 0` and the card
   details as a bare #stripe-card-element div; give both the same
   bordered look as the theme's standard inputs so they read as
   fields, and turn the entry checkbox(es) into the theme toggle.
   ============================================================ */

/* Name on Card — restore a visible field border (overrides the
   template's inline `#stripe_cardName { border: 0 }`). */
.ma-payment #stripe_cardName {
    height: 56px;
    padding: 0 var(--s-5);
    background: var(--paper);
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.ma-payment #stripe_cardName:hover { border-color: var(--ink-300); }
.ma-payment #stripe_cardName:focus {
    outline: 0;
    border-color: var(--mango-500);
    box-shadow: 0 0 0 4px rgba(255,122,0,.12);
}

/* Card details — Stripe Elements mounts a cross-origin iframe into
   this div; style the container box like an input field. */
.ma-payment #stripe-card-element {
    min-height: 56px;
    padding: 18px var(--s-5);
    background: var(--paper);
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.ma-payment #stripe-card-element.StripeElement--focus {
    outline: 0;
    border-color: var(--mango-500);
    box-shadow: 0 0 0 4px rgba(255,122,0,.12);
}
.ma-payment #stripe-card-element.StripeElement--invalid { border-color: var(--error); }
.ma-payment #stripe-card-errors { color: var(--error); font-size: 0.875rem; margin-top: var(--s-2); }

/* Entry checkbox(es) (e.g. Store Card) as the theme's sliding toggle,
   matching .mm-switch on the services page. Done via appearance:none +
   a pseudo-element thumb because the shared template can't be changed
   without affecting other themes. */
.ma-payment input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: none;
    width: 48px;
    height: 28px;
    margin: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--ink-200);
    cursor: pointer;
    vertical-align: middle;
    transition: background .2s ease;
}
.ma-payment input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .2s ease;
}
.ma-payment input[type="checkbox"]:checked { background: var(--mango-500); }
.ma-payment input[type="checkbox"]:checked::before { transform: translateX(20px); }
.ma-payment input[type="checkbox"]:focus-visible { outline: 2px solid var(--mango-400); outline-offset: 2px; }