/* =========================================================
   Vouch Theme Overrides — based on official brand guide
   Scope: .theme-vouch
   ========================================================= */

.theme-vouch {
    /* Core brand palette */
    --primary: #37bebd;                   /* main teal */
    --primary-600: #2ea8a7;               /* hover/darker teal */
    --primary-ring: rgba(55,190,189,0.35);
    --primary-ring-strong: rgba(55,190,189,0.5);

    /* Secondary / dark blue */
    --secondary: #092943;                 /* used for text + secondary buttons */

    /* Accent cyan */
    --accent: #37bebd;
    --accent-600: #00bca8;
    --tab-accent: #00bca8;

    /* Text colours */
    --heading: #052340;                   /* dark navy for headings/body */
    --muted: #475569;
    --muted-dark: #334155;
    --muted-light: #788494;

    /* Backgrounds */
    --surface-bg: #ffffff;
    --surface-muted: #f3f8fa;             /* main background */
    --border-muted: #E2E8F0;
    --divide-muted: #E5E7EB;
    --border-primary: #37bebd;          /* primary border (e.g. focus) */

    /* Success/Error (kept consistent) */
    --success-bg: #ECFDF5;
    --success-text: #065F46;
    --success-border: #37bebd;

    --error: #DC2626;
    --error-border: #EF4444;

    --warning: #ebf9f9;
    --warning-border: var(--border-primary);
    --warning-text: #113b3b;

    /* Confirmation gradient + loader */
    --confirm-bg-start: #37bebd;
    --confirm-bg-end: #f3f8fa;
    --loading-bar-bg: #E2E8F0;
    --loading-bar-color: var(--primary);
    --loading-text-color: #052340;
    --confirmation-card-bg: rgba(255,255,255,0.96);
    --confirmation-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* =========================================================
   Backgrounds / Layout
   ========================================================= */
.theme-vouch .bg-muted-light { background: var(--surface-muted); }
.theme-vouch .bg-confirm-gradient {
    background: linear-gradient(180deg, var(--confirm-bg-start) 0%, var(--confirm-bg-end) 100%);
}

/* =========================================================
   Buttons
   ========================================================= */

/* Primary button: teal with dark text → white on hover */
.theme-vouch .btn-confirm,
.theme-vouch .btn-primary {
    background: var(--primary);
    color: var(--secondary);              /* dark navy text */
    font-weight: 600;
    border-radius: .375rem;
    min-height: 48px;
    transition: background-color .2s, color .2s, transform .1s;
}
.theme-vouch .btn-confirm:hover,
.theme-vouch .btn-primary:hover {
    background: var(--primary-600);
    color: #fff;
}

.theme-vouch .bg-primary-hover { background: rgba(55, 190, 189, 0.12); }
.theme-vouch .hover\:bg-primary-hover:hover { background: rgba(55, 190, 189, 0.12); }

/* Secondary button: dark navy with white text + border */
.theme-vouch .btn-outline {
    background: #fff;
    color: var(--secondary);
    border: 1px solid var(--secondary);
    border-radius: .375rem;
    min-height: 48px;
    transition: background-color .2s, color .2s;

}
.theme-vouch .btn-outline:hover {
    background: var(--secondary);
    color: #fff;
}

/* =========================================================
   Form + Focus Rings
   ========================================================= */
.theme-vouch :where(input, select, textarea) {
    border-color: var(--border-muted);
    background: #fff;
    color: var(--heading);
}
.theme-vouch :where(input, select, textarea):focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-ring);
}
.theme-vouch ::placeholder { color: var(--muted-light); }
.theme-vouch input[type="checkbox"],
.theme-vouch input[type="radio"] { accent-color: var(--primary); }

/* =========================================================
   Text / Links
   ========================================================= */
.theme-vouch .text-heading { color: var(--heading); }
.theme-vouch .text-link { color: var(--primary); }
.theme-vouch .text-link:hover { color: var(--primary-600); }
.theme-vouch .text-accent { color: var(--accent); }

/* =========================================================
   Confirmation Page
   ========================================================= */
.theme-vouch .confirmation-wrapper {
    background: linear-gradient(to bottom, var(--confirm-bg-start), var(--confirm-bg-end));
}
.theme-vouch .confirmation-card {
    background: var(--confirmation-card-bg);
    box-shadow: var(--confirmation-shadow);
}
.theme-vouch .loading-wrapper { background: var(--loading-bar-bg); }
.theme-vouch .loading-bar { background: var(--loading-bar-color); }
.theme-vouch .loading-text { color: var(--loading-text-color); }

/* =========================================================
   Logo / Branding
   ========================================================= */
.theme-vouch .app-logo {
    background: url('/images/logos/vouch-logo.webp') no-repeat center center;
    background-size: contain;
    width: 15rem !important;
    height: 3.5rem !important;
}

/* =========================================================
   Misc / Utilities
   ========================================================= */
.theme-vouch .focus\:ring-primary-ring-strong:focus {
    box-shadow: 0 0 0 2px var(--primary-ring-strong) !important;
}
.theme-vouch .text-spinner { color: var(--primary); }
.theme-vouch .hover\:bg-muted-hover:hover { background: #E2E8F0; }
.theme-vouch .bg-skip-modal { background: #1E1B2B; }
.theme-vouch .close-error-modal,
.theme-vouch .close-skip-modal {
    color: white;
    font-weight: bold;
    padding-right: 0.5rem;
    font-size: 2rem !important;
}

.theme-vouch body {
    background-color: #092943;
}