/*
 * TutorTurbo Theme
 * Global brand layer for Phoenix Bootstrap 5.
 * Keep Phoenix theme.min.css untouched.
 */
:root,
[data-bs-theme="light"] {
    --tt-primary: #f97316;
    --tt-primary-dark: #ea580c;
    --tt-primary-light: #fb923c;
    --tt-primary-darker: #c2410c;
    --tt-accent: #ef4444;
    --tt-navy: #172033;
    --tt-navy-rgb: 23, 32, 51;
    --tt-primary-rgb: 249, 115, 22;
    --tt-accent-rgb: 239, 68, 68;
    --tt-primary-gradient: linear-gradient(135deg, #f97316 0%, #ef4444 100%);

    --phoenix-primary: var(--tt-primary);
    --phoenix-primary-rgb: var(--tt-primary-rgb);
    --phoenix-primary-lighter: #fed7aa;
    --phoenix-primary-light: var(--tt-primary-light);
    --phoenix-primary-dark: var(--tt-primary-dark);
    --phoenix-primary-darker: var(--tt-primary-darker);
    --phoenix-primary-lighter-rgb: 254, 215, 170;
    --phoenix-primary-light-rgb: 251, 146, 60;
    --phoenix-primary-dark-rgb: 234, 88, 12;
    --phoenix-primary-darker-rgb: 194, 65, 12;

    --phoenix-heading-color: var(--tt-navy);
    --phoenix-emphasis-color: var(--tt-navy);
    --phoenix-emphasis-color-rgb: var(--tt-navy-rgb);
    --phoenix-body-color: #525b75;
    --phoenix-body-color-rgb: 82, 91, 117;

    --phoenix-link-color: var(--tt-primary-dark);
    --phoenix-link-hover-color: var(--tt-accent);
    --phoenix-link-color-rgb: 234, 88, 12;
    --phoenix-link-hover-color-rgb: var(--tt-accent-rgb);

    --phoenix-primary-bg-subtle: #fff3e8;
    --phoenix-primary-border-subtle: #fed7aa;
    --phoenix-primary-text-emphasis: #9a3412;

    --phoenix-navbar-top-link-active-color: var(--tt-primary-dark);
    --phoenix-navbar-top-link-hover-color: var(--tt-navy);
    --phoenix-navbar-vertical-link-active-color: var(--tt-primary-dark);

    --phoenix-theme-wizard-active-color: var(--tt-primary);
    --phoenix-theme-wizard-complete-color: var(--tt-primary-dark);
    --phoenix-logo-text: var(--tt-navy);
}

/* Phoenix/Bootstrap buttons inherit the TutorTurbo primary palette. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tt-primary);
    --bs-btn-border-color: var(--tt-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tt-primary-dark);
    --bs-btn-hover-border-color: var(--tt-primary-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tt-primary-darker);
    --bs-btn-active-border-color: var(--tt-primary-darker);
}

.btn-phoenix-primary {
    --phoenix-btn-color: var(--tt-primary-dark);
    --phoenix-btn-bg: #fff3e8;
    --phoenix-btn-border-color: #fed7aa;
    --phoenix-btn-hover-color: #fff;
    --phoenix-btn-hover-bg: var(--tt-primary);
    --phoenix-btn-hover-border-color: var(--tt-primary);
    --phoenix-btn-active-color: #fff;
    --phoenix-btn-active-bg: var(--tt-primary-dark);
    --phoenix-btn-active-border-color: var(--tt-primary-dark);
}

/*.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--tt-primary-light);
    box-shadow: 0 0 0 0.25rem rgba(var(--tt-primary-rgb), 0.18);
}*/


.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--tt-primary);
    box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.12);
}

.form-check-input:checked {
    background-color: var(--tt-primary);
    border-color: var(--tt-primary);
}

.tt-primary { color: var(--tt-primary) !important; }
.tt-primary-dark { color: var(--tt-primary-dark) !important; }
.tt-navy { color: var(--tt-navy) !important; }
.tt-gradient { background-image: var(--tt-primary-gradient) !important; }

.tt-gradient-text {
    background-image: var(--tt-primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

[data-bs-theme="light"] .navbar-top .nav-link:hover,
[data-bs-theme="light"] .navbar-top .nav-link:focus,
[data-bs-theme="light"] .navbar-top .nav-link.active {
    color: var(--tt-primary-dark);
}

/* Dark mode keeps Phoenix's surfaces while carrying TutorTurbo accents. */
[data-bs-theme="dark"] {
    --phoenix-primary: #fb923c;
    --phoenix-primary-rgb: 251, 146, 60;
    --phoenix-primary-lighter: #fed7aa;
    --phoenix-primary-light: #fdba74;
    --phoenix-primary-dark: #fb923c;
    --phoenix-primary-darker: #ea580c;
    --phoenix-primary-lighter-rgb: 254, 215, 170;
    --phoenix-primary-light-rgb: 253, 186, 116;
    --phoenix-primary-dark-rgb: 251, 146, 60;
    --phoenix-primary-darker-rgb: 234, 88, 12;
    --phoenix-link-color: #fb923c;
    --phoenix-link-hover-color: #fdba74;
    --phoenix-link-color-rgb: 251, 146, 60;
    --phoenix-link-hover-color-rgb: 253, 186, 116;
    --phoenix-primary-bg-subtle: #3a2518;
    --phoenix-primary-border-subtle: #68401f;
    --phoenix-primary-text-emphasis: #fdba74;
    --phoenix-theme-wizard-active-color: #fb923c;
    --phoenix-theme-wizard-complete-color: #fdba74;
    --phoenix-navbar-top-link-active-color: #fb923c;
    --phoenix-navbar-vertical-link-active-color: #fb923c;
    --phoenix-logo-text: #eff2f6;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .form-check-input:focus {
    border-color: #fb923c;
    box-shadow: 0 0 0 0.25rem rgba(251, 146, 60, 0.18);
}

/* Optional prominent CTA: only use where a gradient is intentional. */
.tt-btn-gradient {
    color: #fff !important;
    background-image: var(--tt-primary-gradient) !important;
    border-color: transparent !important;
}

.tt-btn-gradient:hover,
.tt-btn-gradient:focus,
.tt-btn-gradient:active {
    color: #fff !important;
    background-image: linear-gradient(135deg, #ea580c 0%, #dc2626 100%) !important;
    border-color: transparent !important;
}


/* =============================================================
   TutorTurbo reusable buttons
   -------------------------------------------------------------
   Use these classes anywhere in TutorTurbo. Page-specific files
   should not redefine the brand button.
   ============================================================= */

.tt-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #fff !important;
    background-image: var(--tt-primary-gradient) !important;
    background-color: var(--tt-primary) !important;
    border: 0 !important;
    border-radius: .65rem;
    font-weight: 700;
    padding: .65rem 1.25rem;
    box-shadow: 0 5px 14px rgba(239, 68, 68, .15);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.tt-btn-primary:hover,
.tt-btn-primary:focus {
    color: #fff !important;
    background-image: linear-gradient(135deg, #ea580c 0%, #dc2626 100%) !important;
    background-color: #ea580c !important;
    border-color: transparent !important;
}

.tt-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(239, 68, 68, .20);
}

.tt-btn-primary:active {
    color: #fff !important;
    background-image: linear-gradient(135deg, #c2410c 0%, #b91c1c 100%) !important;
    background-color: #c2410c !important;
    transform: translateY(0);
}

.tt-btn-primary:disabled,
.tt-btn-primary.disabled {
    opacity: .65;
    transform: none;
    box-shadow: none;
}

.tt-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--tt-primary-dark) !important;
    background: #fff !important;
    border: 1px solid var(--tt-primary-light) !important;
    border-radius: .65rem;
    font-weight: 600;
    padding: .65rem 1.25rem;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.tt-btn-outline:hover,
.tt-btn-outline:focus {
    color: var(--tt-primary-darker) !important;
    background: #fff3e8 !important;
    border-color: var(--tt-primary) !important;
}

/* A compact secondary action that remains compatible with Phoenix. */
.tt-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--tt-navy) !important;
    background: #fff !important;
    border: 1px solid var(--phoenix-border-color) !important;
    border-radius: .65rem;
    font-weight: 600;
    padding: .65rem 1.25rem;
    transition: background-color .15s ease, border-color .15s ease;
}

.tt-btn-secondary:hover,
.tt-btn-secondary:focus {
    color: var(--tt-navy) !important;
    background: var(--phoenix-gray-100) !important;
    border-color: var(--phoenix-gray-400) !important;
}

/* Common TutorTurbo subtle badge / surface. */
.tt-surface-primary {
    background: var(--phoenix-primary-bg-subtle) !important;
    border-color: var(--phoenix-primary-border-subtle) !important;
}

.tt-badge-primary {
    color: var(--phoenix-primary-text-emphasis) !important;
    background: var(--phoenix-primary-bg-subtle) !important;
    border: 1px solid var(--phoenix-primary-border-subtle);
}



.badge-phoenix {
    font-size: 0.64rem;
    line-height: 1.25;
}