/* =========================================================================
   TRIGUNA TEST — UI/UX REVAMP STYLESHEET
   Purpose: modern, mobile-first, additive design system.
   Loaded AFTER css/style.css so it overrides/augments existing styles.
   DO NOT modify any backend / form names / action URLs.
   ========================================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
    /* Brand palette — preserves existing primary #015FC9 */
    --tg-primary: #015FC9;
    --tg-primary-600: #014FA8;
    --tg-primary-700: #013F87;
    --tg-primary-50:  #EAF2FC;
    --tg-primary-100: #D2E3F8;

    --tg-accent: #F59E0B;          /* warm amber for highlights */
    --tg-accent-50: #FEF6E7;

    --tg-success: #10B981;
    --tg-success-50: #ECFDF5;
    --tg-danger:  #EF4444;
    --tg-danger-50: #FEF2F2;
    --tg-warning: #F59E0B;

    /* Neutrals */
    --tg-ink:        #0F172A;
    --tg-ink-2:      #1E293B;
    --tg-body:       #334155;
    --tg-muted:      #64748B;
    --tg-line:       #E2E8F0;
    --tg-line-2:     #CBD5E1;
    --tg-surface:    #FFFFFF;
    --tg-surface-2:  #F8FAFC;
    --tg-surface-3:  #F1F5F9;

    /* Radius */
    --tg-radius-sm: 8px;
    --tg-radius:    14px;
    --tg-radius-lg: 20px;
    --tg-radius-xl: 28px;
    --tg-radius-pill: 999px;

    /* Shadows */
    --tg-shadow-xs: 0 1px 2px rgba(15,23,42,.05);
    --tg-shadow-sm: 0 2px 6px rgba(15,23,42,.06);
    --tg-shadow:    0 8px 24px rgba(15,23,42,.08);
    --tg-shadow-lg: 0 20px 50px rgba(15,23,42,.12);
    --tg-shadow-ring: 0 0 0 4px rgba(1,95,201,.15);

    /* Spacing scale */
    --tg-s-1: 4px;
    --tg-s-2: 8px;
    --tg-s-3: 12px;
    --tg-s-4: 16px;
    --tg-s-5: 24px;
    --tg-s-6: 32px;
    --tg-s-7: 48px;
    --tg-s-8: 64px;

    /* Motion */
    --tg-ease: cubic-bezier(.2,.7,.2,1);
    --tg-dur:  .25s;
}

/* ---------- 2. GLOBAL TYPE / SPACING (scoped to .tg-page) ---------- */
.tg-page {
    color: var(--tg-body);
    -webkit-font-smoothing: antialiased;
}
.tg-page h1, .tg-page h2, .tg-page h3, .tg-page h4, .tg-page h5, .tg-page h6 {
    color: var(--tg-ink);
    font-family: "DM Sans","Inter",system-ui,sans-serif;
    letter-spacing: -0.01em;
    font-weight: 700;
}
.tg-page p { color: var(--tg-body); line-height: 1.65; }
.tg-page .text-muted { color: var(--tg-muted) !important; }

/* ---------- 3. MODERN HERO / BREADCRUMB HEADER ---------- */
.tg-hero {
    position: relative;
    background:
        radial-gradient(1100px 380px at 100% -10%, rgba(255,255,255,.15), transparent 60%),
        radial-gradient(900px 320px at -10% 110%, rgba(255,255,255,.10), transparent 60%),
        linear-gradient(135deg, #013F87 0%, #015FC9 55%, #1E7BD9 100%);
    color: #fff;
    padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 9vw, 112px);
    overflow: hidden;
    border-bottom-left-radius: var(--tg-radius-xl);
    border-bottom-right-radius: var(--tg-radius-xl);
}
.tg-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.12) 0, transparent 2px),
        radial-gradient(circle at 70% 80%, rgba(255,255,255,.08) 0, transparent 2px),
        radial-gradient(circle at 90% 20%, rgba(255,255,255,.1) 0, transparent 3px);
    background-size: 60px 60px, 80px 80px, 100px 100px;
    opacity: .6;
    pointer-events: none;
}
.tg-hero .tg-hero-inner { position: relative; z-index: 1; text-align: center; }
.tg-hero .tg-eyebrow {
    display: inline-block;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--tg-radius-pill);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 14px;
    border: 1px solid rgba(255,255,255,.22);
}
.tg-hero h1, .tg-hero .tg-h1 {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.8rem, 4.5vw, 3rem);
    margin: 0 0 12px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.tg-hero .tg-lead {
    color: rgba(255,255,255,.88);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    max-width: 640px;
    margin: 0 auto;
}

/* ---------- 4. PAGE SHELL & CARDS ---------- */
.tg-section {
    background: var(--tg-surface-2);
    padding: clamp(32px, 5vw, 72px) 0;
}
.tg-card {
    background: var(--tg-surface);
    border-radius: var(--tg-radius-lg);
    box-shadow: var(--tg-shadow);
    border: 1px solid var(--tg-line);
    padding: clamp(20px, 4vw, 40px);
}
.tg-card-elevated {
    background: var(--tg-surface);
    border-radius: var(--tg-radius-lg);
    box-shadow: var(--tg-shadow-lg);
    border: 1px solid var(--tg-line);
}

/* ---------- 5. FORMS ---------- */
.tg-page .form-floating > .form-control,
.tg-page .form-floating > .form-select,
.tg-page .form-control,
.tg-page .form-select {
    border: 1.5px solid var(--tg-line) !important;
    border-radius: var(--tg-radius) !important;
    background-color: var(--tg-surface) !important;
    color: var(--tg-ink) !important;
    transition: border-color var(--tg-dur) var(--tg-ease),
                box-shadow var(--tg-dur) var(--tg-ease) !important;
    font-size: 1rem;
}
.tg-page .form-floating > .form-control:focus,
.tg-page .form-floating > .form-select:focus,
.tg-page .form-control:focus,
.tg-page .form-select:focus {
    border-color: var(--tg-primary) !important;
    box-shadow: var(--tg-shadow-ring) !important;
    outline: none !important;
}
.tg-page .form-floating > label { color: var(--tg-muted); }

/* ---------- 6. BUTTONS ---------- */
.tg-page .btn {
    font-weight: 600;
    border-radius: var(--tg-radius);
    transition: transform var(--tg-dur) var(--tg-ease),
                box-shadow var(--tg-dur) var(--tg-ease),
                background-color var(--tg-dur) var(--tg-ease);
    letter-spacing: .01em;
}
.tg-page .btn-primary {
    background: linear-gradient(135deg, var(--tg-primary) 0%, #2477D9 100%);
    border: none;
    color: #fff;
    box-shadow: 0 6px 18px rgba(1,95,201,.28);
}
.tg-page .btn-primary:hover,
.tg-page .btn-primary:focus {
    background: linear-gradient(135deg, var(--tg-primary-600) 0%, #2070C9 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(1,95,201,.34);
}
.tg-page .btn-primary:active { transform: translateY(0); }

.tg-btn-pill { border-radius: var(--tg-radius-pill) !important; padding-left: 1.4rem; padding-right: 1.4rem; }

/* ---------- 7. ALERT / NOTE BLOCK ---------- */
.tg-note {
    display: flex;
    gap: 12px;
    background: var(--tg-primary-50);
    border: 1px solid var(--tg-primary-100);
    border-left: 4px solid var(--tg-primary);
    border-radius: var(--tg-radius);
    padding: 14px 16px;
    color: var(--tg-ink-2);
    font-size: .95rem;
}
.tg-note-warn { background: #FFF8E6; border-color: #FCE7A1; border-left-color: var(--tg-accent); color: #7A4F00; }
.tg-note-success { background: var(--tg-success-50); border-color: #BFE6D2; border-left-color: var(--tg-success); color: #065F46; }
.tg-note i { font-size: 1.1rem; margin-top: 2px; }

/* ---------- 8. TOAST ---------- */
.tg-toast-wrap {
    position: fixed;
    top: 20px; right: 20px;
    z-index: 9999;
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none;
}
.tg-toast {
    background: var(--tg-ink);
    color: #fff;
    padding: 12px 18px;
    border-radius: var(--tg-radius);
    box-shadow: var(--tg-shadow-lg);
    font-size: .92rem;
    max-width: 360px;
    display: flex; align-items: center; gap: 10px;
    pointer-events: auto;
    animation: tg-toast-in .3s var(--tg-ease) both;
}
.tg-toast.is-error { background: var(--tg-danger); }
.tg-toast.is-success { background: var(--tg-success); }
.tg-toast.is-warn   { background: var(--tg-accent); color: #1a1a1a; }
@keyframes tg-toast-in {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* =========================================================================
   TEST MODULE — HIGHEST PRIORITY
   Card-per-question UI, mobile-first, sticky progress, big touch targets.
   ========================================================================= */

/* Wrapper around the new test module */
.tg-test {
    --tg-test-pad: clamp(16px, 4vw, 40px);
}

/* Sticky progress bar — no negative margin (was causing overlap with instructions) */
.tg-progress-wrap {
    position: sticky;
    top: 0;
    z-index: 49;
    background: rgba(255,255,255,.97);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 2px solid var(--tg-line);
    padding: 14px 0;
    margin: 0 0 28px;
    box-shadow: 0 2px 12px rgba(15,23,42,.06);
}
.tg-progress {
    display: flex; align-items: center; gap: 14px;
}
.tg-progress-meta {
    font-size: .85rem; color: var(--tg-muted);
    white-space: nowrap; font-weight: 600;
    min-width: 96px;
}
.tg-progress-meta strong { color: var(--tg-ink); font-weight: 700; }
.tg-progress-bar {
    flex: 1;
    height: 10px;
    background: var(--tg-surface-3);
    border-radius: var(--tg-radius-pill);
    overflow: hidden;
}
.tg-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--tg-primary), #2EB5F3);
    border-radius: var(--tg-radius-pill);
    transition: width .35s var(--tg-ease);
}

/* Section header */
.tg-test-section {
    margin: 36px 0 16px;
    display: flex; align-items: center; gap: 12px;
}
.tg-test-section .tg-pill {
    background: var(--tg-primary-50);
    color: var(--tg-primary-700);
    font-weight: 700; font-size: .78rem;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 6px 12px; border-radius: var(--tg-radius-pill);
    border: 1px solid var(--tg-primary-100);
}
.tg-test-section .tg-section-title {
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    color: var(--tg-ink); font-weight: 700;
}

/* Question card */
.tg-q {
    background: var(--tg-surface);
    border: 1.5px solid var(--tg-line);
    border-radius: var(--tg-radius-lg);
    padding: clamp(16px, 3vw, 24px);
    margin-bottom: 14px;
    transition: border-color var(--tg-dur) var(--tg-ease),
                box-shadow var(--tg-dur) var(--tg-ease),
                transform var(--tg-dur) var(--tg-ease);
    position: relative;
}
.tg-q:hover { box-shadow: var(--tg-shadow-sm); }
.tg-q.is-answered {
    border-color: var(--tg-primary-100);
    background: linear-gradient(180deg, #fff 0%, var(--tg-primary-50) 200%);
}
.tg-q.is-answered::before {
    content: "\f00c"; /* fa-check */
    font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; top: 14px; right: 14px;
    width: 24px; height: 24px;
    background: var(--tg-success); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem;
}
.tg-q-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 10px;
    background: var(--tg-primary-50);
    color: var(--tg-primary-700);
    border-radius: var(--tg-radius-pill);
    font-weight: 700; font-size: .85rem;
    margin-right: 10px;
}
.tg-q-text {
    color: var(--tg-ink);
    font-size: clamp(1rem, 1.5vw, 1.08rem);
    font-weight: 500;
    line-height: 1.55;
    margin: 0 0 16px;
    padding-right: 32px; /* leaves space for the check icon */
}

/* The 5-option scale — flex row on desktop, stacked on mobile */
.tg-scale {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
@media (max-width: 720px) {
    .tg-scale { grid-template-columns: 1fr; gap: 6px; }
}

/* Each option is a label that wraps the hidden radio + visual elements */
.tg-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    border: 1.5px solid var(--tg-line);
    background: var(--tg-surface);
    border-radius: var(--tg-radius);
    cursor: pointer;
    text-align: center;
    transition: all var(--tg-dur) var(--tg-ease);
    user-select: none;
    min-height: 72px;
    color: var(--tg-body);
    overflow: hidden; /* prevent any child from leaking */
}
.tg-opt:hover {
    border-color: var(--tg-primary);
    background: var(--tg-primary-50);
    color: var(--tg-primary-700);
}

/* Hide the native radio — it must be INSIDE the label flow, not absolute */
.tg-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    margin: 0;
}

/* Visual radio dot */
.tg-opt .tg-opt-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--tg-line-2);
    background: #fff;
    flex-shrink: 0;
    position: relative;
    transition: all var(--tg-dur) var(--tg-ease);
    display: block;
}

/* Label text — always visible, never behind anything */
.tg-opt .tg-opt-label {
    font-size: .82rem;
    font-weight: 600;
    color: inherit;
    line-height: 1.2;
    display: block;
    width: 100%;
    word-break: break-word;
}

/* Mobile: horizontal layout with dot on left */
@media (max-width: 720px) {
    .tg-opt {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 14px 16px;
        min-height: 52px;
        gap: 12px;
        text-align: left;
    }
    .tg-opt .tg-opt-label {
        font-size: .95rem;
        text-align: left;
    }
    .tg-opt .tg-opt-dot { flex-shrink: 0; }
}

/* Selected state */
.tg-opt.is-selected,
.tg-opt:has(input:checked) {
    border-color: var(--tg-primary);
    background: var(--tg-primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(1,95,201,.25);
    transform: translateY(-1px);
}
.tg-opt.is-selected .tg-opt-dot,
.tg-opt:has(input:checked) .tg-opt-dot {
    border-color: #fff;
    background: #fff;
}
.tg-opt.is-selected .tg-opt-dot::after,
.tg-opt:has(input:checked) .tg-opt-dot::after {
    content: "";
    position: absolute; inset: 3px;
    border-radius: 50%;
    background: var(--tg-primary);
}

/* Scale legend (desktop only) */
.tg-scale-legend {
    display: none;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 6px 0 -6px;
    font-size: .72rem; color: var(--tg-muted);
    text-align: center; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
}

/* Disclaimer row */
.tg-disclaimer {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--tg-surface-2);
    border: 1.5px solid var(--tg-line);
    border-radius: var(--tg-radius);
    padding: 16px;
    margin: 24px 0 16px;
    cursor: pointer;
    transition: all var(--tg-dur) var(--tg-ease);
}
.tg-disclaimer:hover { border-color: var(--tg-primary); background: var(--tg-primary-50); }
.tg-disclaimer input[type="checkbox"] {
    width: 22px; height: 22px;
    accent-color: var(--tg-primary);
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
}
.tg-disclaimer label {
    font-weight: 500;
    color: var(--tg-ink-2);
    margin: 0;
    cursor: pointer;
    line-height: 1.5;
}

/* Sticky bottom action bar (mobile + desktop) */
.tg-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 40;
    background: linear-gradient(0deg, var(--tg-surface) 70%, rgba(255,255,255,0));
    padding: 16px 0 16px;
    margin: 8px 0 0;
    display: flex; gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.tg-action-bar .tg-progress-mini {
    font-size: .85rem; color: var(--tg-muted); font-weight: 600;
}
.tg-action-bar .tg-progress-mini strong { color: var(--tg-ink); }
.tg-submit-btn {
    background: linear-gradient(135deg, var(--tg-primary) 0%, #2477D9 100%);
    color: #fff;
    border: none;
    border-radius: var(--tg-radius);
    padding: 14px 32px;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 6px 18px rgba(1,95,201,.28);
    transition: all var(--tg-dur) var(--tg-ease);
    cursor: pointer;
    min-height: 52px;
    display: inline-flex; align-items: center; gap: 8px;
}
.tg-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(1,95,201,.36);
}
.tg-submit-btn:disabled {
    background: var(--tg-surface-3);
    color: var(--tg-muted);
    cursor: not-allowed;
    box-shadow: none;
}
@media (max-width: 540px) {
    .tg-action-bar { flex-direction: column; align-items: stretch; }
    .tg-submit-btn { width: 100%; justify-content: center; }
}

/* Instructions / scale guide cards (test intro) */
.tg-scale-guide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 16px 0 24px;
}
.tg-scale-guide-item {
    background: var(--tg-surface-2);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    padding: 12px;
    text-align: center;
    font-size: .85rem; font-weight: 600;
    color: var(--tg-ink-2);
    transition: all var(--tg-dur) var(--tg-ease);
}
.tg-scale-guide-item:hover { border-color: var(--tg-primary); background: var(--tg-primary-50); color: var(--tg-primary-700); }

/* HIDE the original table layout when our new card layout is shown */
.tg-test .table-responsive,
.tg-test table { display: none; }

/* =========================================================================
   PAYMENT / REPORT SELECTION
   ========================================================================= */
.tg-page .report-card {
    border-radius: var(--tg-radius-lg) !important;
    border: 1.5px solid var(--tg-line) !important;
    overflow: hidden;
    transition: all var(--tg-dur) var(--tg-ease);
}
.tg-page .report-card:hover {
    border-color: var(--tg-primary-100) !important;
    box-shadow: var(--tg-shadow);
    transform: translateY(-2px);
}
.tg-page .report-card.border-primary {
    border-color: var(--tg-primary) !important;
    box-shadow: 0 10px 28px rgba(1,95,201,.14);
}
.tg-page .report-header {
    padding: 18px !important;
    transition: background-color var(--tg-dur) var(--tg-ease);
}
.tg-page .report-header h6 {
    font-size: 1.05rem;
    color: var(--tg-ink);
    font-weight: 700;
    letter-spacing: -.01em;
}
.tg-page .report-body { background: var(--tg-surface-2); }
.tg-page .report-body .p-3 { padding: 20px !important; }
.tg-page .report-body .p-3 p { color: var(--tg-body); line-height: 1.65; margin: 0; }

.tg-page .form-check-input {
    width: 22px !important;
    height: 22px !important;
    margin-top: 2px;
    border: 2px solid var(--tg-line-2) !important;
    cursor: pointer;
    transition: all var(--tg-dur) var(--tg-ease);
}
.tg-page .form-check-input:checked {
    background-color: var(--tg-primary) !important;
    border-color: var(--tg-primary) !important;
}
.tg-page .form-check-input:focus { box-shadow: var(--tg-shadow-ring) !important; }

/* Price panel */
.tg-price-card {
    background: linear-gradient(180deg, var(--tg-surface) 0%, var(--tg-surface-2) 100%);
    border-radius: var(--tg-radius-lg) !important;
    border: 1.5px solid var(--tg-line) !important;
    box-shadow: var(--tg-shadow);
}
.tg-trust-row {
    display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
    margin-top: 14px; font-size: .82rem; color: var(--tg-muted);
}
.tg-trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.tg-trust-row i { color: var(--tg-success); }

/* =========================================================================
   LANGUAGE SELECTION
   ========================================================================= */
.tg-lang-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin-top: 20px;
}
@media (max-width: 480px) { .tg-lang-grid { grid-template-columns: 1fr; } }
.tg-lang-btn {
    border: 2px solid var(--tg-line);
    background: var(--tg-surface);
    border-radius: var(--tg-radius-lg);
    padding: 22px 18px;
    cursor: pointer;
    transition: all var(--tg-dur) var(--tg-ease);
    text-align: center;
    font-weight: 700;
    color: var(--tg-ink);
    font-size: 1.05rem;
    width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.tg-lang-btn:hover {
    border-color: var(--tg-primary);
    background: var(--tg-primary-50);
    color: var(--tg-primary-700);
    transform: translateY(-2px);
    box-shadow: var(--tg-shadow);
}
.tg-lang-btn .tg-lang-flag {
    font-size: 1.8rem;
}
.tg-lang-btn .tg-lang-native {
    font-size: .9rem; font-weight: 500; color: var(--tg-muted);
}

/* =========================================================================
   PAYMENT VERIFY / SUCCESS / ERROR pages
   ========================================================================= */
.tg-status {
    text-align: center;
    padding: clamp(32px, 6vw, 56px) clamp(20px, 4vw, 40px);
}
.tg-status-icon {
    width: 88px; height: 88px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2.4rem;
    margin-bottom: 18px;
}
.tg-status-icon.is-loading { background: var(--tg-primary-50); color: var(--tg-primary); }
.tg-status-icon.is-success { background: var(--tg-success-50); color: var(--tg-success); }
.tg-status-icon.is-warn    { background: var(--tg-accent-50);  color: var(--tg-accent); }
.tg-status-icon.is-error   { background: var(--tg-danger-50);  color: var(--tg-danger); }
.tg-status h2, .tg-status h3 { color: var(--tg-ink); font-weight: 700; }
.tg-status p  { color: var(--tg-muted); }

/* =========================================================================
   UTILITY / MISC
   ========================================================================= */
.tg-divider { height: 1px; background: var(--tg-line); margin: 24px 0; border: 0; }
.tg-fadeIn  { animation: tg-fadeIn .4s var(--tg-ease) both; }
@keyframes tg-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Accessibility: visible focus rings */
.tg-page :focus-visible {
    outline: 3px solid rgba(1,95,201,.35);
    outline-offset: 2px;
    border-radius: 6px;
}
/* Prevent iOS auto-zoom on inputs */
@media (max-width: 480px) {
    .tg-page input, .tg-page select, .tg-page textarea { font-size: 16px !important; }
}

/* Spinner override (existing class) — slightly nicer color */
#spinner .spinner-border { border-color: var(--tg-primary); border-right-color: transparent; }

/* Improve the existing breadcrumb header on every page that hasn't been
   migrated to the new .tg-hero yet — adds a subtle modern gradient feel
   without changing existing markup. */
.bg-breadcrumb {
    background:
        radial-gradient(900px 320px at 100% -10%, rgba(255,255,255,.10), transparent 60%),
        linear-gradient(135deg, #013F87 0%, #015FC9 55%, #1E7BD9 100%) !important;
    border-bottom-left-radius: var(--tg-radius-xl);
    border-bottom-right-radius: var(--tg-radius-xl);
}