/* ── Poppins (vendored locally — no Google Fonts / CDN) ───────────────────────── */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("../lib/fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../lib/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../lib/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../lib/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../lib/fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../lib/fonts/poppins-800.woff2") format("woff2"); }

:root {
    --mts-sidebar-width: 250px;
    --bs-body-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* ── Brand palette (government-portal grade) ───────────────── */
    --mts-navy: #0d3b66;
    --mts-navy-dark: #082942;
    --mts-accent: #f4a300;       /* saffron */
    --mts-accent-dark: #d98f00;
    --mts-ink: #1f2937;

    /* Tie a few Bootstrap CSS variables to the brand */
    --bs-link-color: var(--mts-navy);
    --bs-link-hover-color: var(--mts-navy-dark);
}

html {
    scroll-behavior: smooth;
}

html, body {
    height: 100%;
}

body {
    color: var(--mts-ink);
    font-family: var(--bs-body-font-family);
}

/* ── Reusable brand buttons ───────────────────────────────────── */
.btn-mts {
    background-color: var(--mts-navy);
    border-color: var(--mts-navy);
    color: #fff;
    font-weight: 600;
}
.btn-mts:hover, .btn-mts:focus {
    background-color: var(--mts-navy-dark);
    border-color: var(--mts-navy-dark);
    color: #fff;
}

.btn-outline-mts {
    border-color: var(--mts-navy);
    color: var(--mts-navy);
    font-weight: 600;
}
.btn-outline-mts:hover, .btn-outline-mts:focus {
    background-color: var(--mts-navy);
    color: #fff;
}

.btn-accent {
    background-color: var(--mts-accent);
    border-color: var(--mts-accent);
    color: #1a1a1a;
    font-weight: 600;
}
.btn-accent:hover, .btn-accent:focus {
    background-color: var(--mts-accent-dark);
    border-color: var(--mts-accent-dark);
    color: #1a1a1a;
}

.text-accent { color: var(--mts-accent) !important; }
.text-navy { color: var(--mts-navy) !important; }
.bg-navy { background-color: var(--mts-navy) !important; }

/* ── Home hero CTAs (GLOBAL) ──────────────────────────────────────────────────
   These sit on <NavLink>, whose rendered <a> does NOT receive a component's
   CSS-isolation scope attribute — so scoped rules never matched and they showed as
   default blue links. Kept global so the gold/orange pill styling actually applies. */
.mts-btn {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.95rem 2rem; border-radius: 999px; font-weight: 800; font-size: 1.05rem; text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease, filter .22s ease;
}
.mts-btn .bi { font-size: 1.05rem; }
.mts-btn-arrow { transition: transform .22s ease; }
.mts-btn-primary {
    color: #3a2600;
    background: linear-gradient(135deg, #ffd24a 0%, #ffb400 55%, #ff8a00 100%);
    box-shadow: 0 14px 34px rgba(255, 180, 0, 0.5);
}
.mts-btn-primary:hover {
    transform: translateY(-3px) scale(1.04); color: #3a2600; filter: brightness(1.03);
    box-shadow: 0 20px 46px rgba(255, 180, 0, 0.68);
}
.mts-btn-primary:hover .mts-btn-arrow { transform: translateX(5px); }

.mts-register {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 1rem 2.2rem; border-radius: 999px;
    font-family: "Poppins", system-ui, sans-serif; font-weight: 800; font-size: 1.1rem;
    color: #fff; text-decoration: none;
    background: linear-gradient(135deg, #ffb43a 0%, #ff8a00 60%, #ff6f00 100%);
    box-shadow: 0 16px 38px rgba(255, 138, 0, 0.5);
    animation: mtsCtaGlow 2.6s ease-in-out infinite;
    transition: transform .22s ease, filter .22s ease;
}
.mts-register:hover { transform: translateY(-3px) scale(1.04); color: #fff; filter: brightness(1.04); }
.mts-register .bi { transition: transform .22s ease; }
.mts-register:hover .bi { transform: translateX(5px); }
@keyframes mtsCtaGlow { 0%, 100% { box-shadow: 0 16px 38px rgba(255, 138, 0, 0.45); } 50% { box-shadow: 0 18px 50px rgba(255, 138, 0, 0.78); } }

@media (max-width: 575.98px) {
    .mts-btn { width: 100%; justify-content: center; }
    .mts-register { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .mts-btn, .mts-register { transition: none; animation: none; }
    .mts-btn-primary:hover, .mts-register:hover { transform: none; }
}

/* ── Reusable section / card primitives (shared across homepage components) ──── */
.mts-section { padding: clamp(3rem, 6vw, 5.5rem) 0; }

.mts-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mts-accent-dark);
    margin-bottom: 0.5rem;
}

.mts-section-title {
    font-weight: 800;
    color: var(--mts-navy);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.mts-section-sub {
    color: #6b7280;
    max-width: 62ch;
}

.mts-card {
    background: #fff;
    border: 1px solid rgba(13, 59, 102, 0.08);
    border-radius: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mts-card-hover:hover,
.mts-card-hover:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(13, 59, 102, 0.12);
    border-color: rgba(244, 163, 0, 0.4);
}

/* ── Scroll-reveal (pure CSS, progressive enhancement) ────────────────────────
   Content is visible by default (CLS- & a11y-friendly). Where scroll-driven
   animations are supported, elements fade/slide up as they enter the viewport. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .reveal {
            animation: mts-reveal-up linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 22%;
        }
        @keyframes mts-reveal-up {
            from { opacity: 0; transform: translateY(28px); }
            to   { opacity: 1; transform: translateY(0); }
        }
    }
}

/* ── CSS-only count-up (uses a registered custom property) ──────────────────── */
@property --mts-count {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
}

/* ── Shared admin surfaces (used by dashboard widgets; tokens come from .admin-root) ── */
.admin-glass {
    background: var(--admin-surface, #fff);
    border: 1px solid var(--admin-border, #e6eaf1);
    border-radius: 16px;
    box-shadow: var(--admin-shadow, 0 10px 30px rgba(15, 31, 61, 0.08));
}

.admin-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--admin-border, #e6eaf1);
}

.admin-panel-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--admin-text, #1f2937);
}

.admin-panel-body { padding: 1.15rem; }

/* ── Skeleton loaders (shimmer) ───────────────────────────────────────────────── */
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--admin-surface-2, #eef2f7);
    border-radius: 8px;
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: skeleton-shimmer 1.3s ease-in-out infinite;
}

.sk-line { height: 12px; }
.sk-line.lg { height: 18px; }
.sk-line.xl { height: 30px; }
.sk-circle { border-radius: 50%; }

@keyframes skeleton-shimmer { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
    .skeleton::after { animation: none; }
}

/* ── Legal / prose pages (Privacy, Terms, Refund) ─────────────────────────────── */
.legal { max-width: 860px; margin: 0 auto; color: #374151; }
.legal h2 { color: var(--mts-navy); font-weight: 800; font-size: 1.25rem; margin: 2rem 0 0.65rem; letter-spacing: -0.01em; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { line-height: 1.75; }
.legal ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.legal li { margin-bottom: 0.35rem; }
.legal .legal-updated { color: #6b7280; font-size: 0.85rem; margin-bottom: 1.5rem; }

/* ── Accessibility: visible keyboard focus ring across the app ─────────────────── */
:focus-visible { outline: 2px solid var(--mts-accent, #f4a300); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .nav-link:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
    outline: 2px solid var(--mts-accent, #f4a300); outline-offset: 2px;
}

/* ── Shared form helpers (used across step components) ─────────────────────────── */
.req { color: #ef4444; }

.sw-subhead { font-size: 0.95rem; font-weight: 700; color: var(--admin-text); margin: 0; }

.sr-grid > div { display: flex; flex-direction: column; padding: 0.4rem 0; }
.sr-grid span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--admin-muted); }
.sr-grid strong { color: var(--admin-text); font-weight: 600; word-break: break-word; }


/* Initial WASM load splash */
.app-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

/* ── App shell ─────────────────────────────────────────────── */
.mts-sidebar {
    width: var(--mts-sidebar-width);
    min-height: 100vh;
}

.mts-content {
    flex: 1;
    min-width: 0;
}

.mts-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.8);
    border-radius: 0.375rem;
}

.mts-sidebar .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.mts-sidebar .nav-link.active {
    color: #fff;
    background-color: var(--bs-primary);
}

.mts-sidebar .nav-link .bi {
    margin-right: 0.5rem;
}

/* Blazor unhandled error banner */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1080;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

/* ── Print: receipt only (hide the admin shell). Scoped component CSS can't reach the
   layout, so the chrome-hiding rules live here. The receipt sheet is .receipt-print-area. ── */
@media print {
    .admin-sidebar,
    .admin-topbar,
    .admin-backdrop,
    .admin-page-head,
    #blazor-error-ui,
    .no-print {
        display: none !important;
    }

    html, body,
    .admin-root, .admin-main, .admin-content, .admin-container {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .receipt-print-area {
        box-shadow: none !important;
        border: none !important;
        margin: 0 auto !important;
        max-width: 100% !important;
    }

    @page {
        size: A4;
        margin: 12mm;
    }
}