/* ============================================================
   KodePilot – Brand Color Theme
   Primary brand color: #45AAF2  (logo sky-blue) + #F7B731 (logo amber)
   ============================================================

   Derived palette
   ─────────────────────────────────────────────────────────────
   --brand-primary        #45AAF2   Logo sky-blue (dark mode)
   --brand-primary-dark   #2196F3   Darker shade – active / hover states
   --brand-primary-darker #1565C0   Deep shade – footer base, toast buttons
   --brand-primary-light  #81D4FA   Lighter tint – secondary accents
   --brand-tint           #e3f2fd   ~10 % opacity tint – light backgrounds
   --brand-tint-medium    #bbdefb   ~20 % opacity tint – hover bg, gradient start
   ============================================================ */

/* ── Custom properties ──────────────────────────────────────── */
:root {
    --brand-primary: #45AAF2;
    --brand-primary-dark: #2196F3;
    --brand-primary-darker: #1565C0;
    --brand-primary-light: #81D4FA;
    --brand-tint: #e3f2fd;
    --brand-tint-medium: #bbdefb;
    --brand-primary-rgb: 69, 170, 242;
}


/* ── Navbar ─────────────────────────────────────────────────── */

.nav-item:hover,
.nav-item--active,
.nav-item[aria-current="page"] {
    color: var(--color-accent);
}

.nav-item:hover::after,
.nav-item--active::after,
.nav-item[aria-current="page"]::after {
    background-color: var(--color-accent);
}

.dropdown-content a:hover {
    color: var(--color-accent);
}

.mobile-slide-menu a:hover {
    color: var(--color-accent);
}

.search:focus {
    border-color: var(--color-accent);
}

/* Apply / CTA button */
.apply-btn {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.apply-btn::before {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
}

.apply-btn:hover {
    border-color: var(--brand-primary-dark);
    box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.3);
}

/* Mobile hamburger lines */
.hamburger-line {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    box-shadow: 0 2px 4px rgba(var(--brand-primary-rgb), 0.3);
}

/* Mobile slide-menu items */
.mobile-menu-item::before {
    background: linear-gradient(135deg,
            rgba(var(--brand-primary-rgb), 0.1),
            rgba(var(--brand-primary-rgb), 0.08));
}

.mobile-menu-item:hover {
    color: var(--brand-primary);
}


/* ── Hero section ───────────────────────────────────────────── */

.hero h1 .blue_text {
    color: var(--brand-primary);
}

.blue_text {
    position: relative;
}

.blue_text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2.5px;
    background: #1a73e8;
    transform-origin: left;
    transform: scaleX(0);
    animation: underline-grow 0.7s ease forwards 0.4s;
}

@keyframes underline-grow {
    to {
        transform: scaleX(1);
    }
}

/* ── Highlight / accent text ────────────────────────────────── */

.highlight {
    color: var(--brand-primary);
}

.stat-number .highlight {
    color: var(--brand-primary);
}


/* ── MNC / logo strip ───────────────────────────────────────── */

.mnc h2 .blue_text {
    color: var(--brand-primary-dark);
}


/* ── Button blue box (pill badge) ───────────────────────────── */

.button_blue_box {
    background-color: var(--brand-tint);
}


/* ── Slider navigation dots ─────────────────────────────────── */

.dot.active {
    background: var(--brand-primary);
    box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.4);
}


/* ── Placement / testimonials static slider box ─────────────── */

.move-slider-box-static {
    background: var(--brand-primary);
}


/* ── Card-easy (assessment/feature card) ────────────────────── */

.card-easy-right h2 {
    color: var(--brand-primary-darker);
}

.feature span {
    color: var(--brand-primary-darker);
}

.card-easy-right button {
    background-color: var(--brand-primary-darker);
}

.card-easy-right button:hover {
    background-color: var(--brand-primary-dark);
}


/* ── Practice cards ─────────────────────────────────────────── */

.practice-card:nth-child(1) .practice-card-icon {
    background-color: var(--brand-primary);
}

.practice-meta-logo {
    background-color: var(--brand-primary);
}


/* ── Career quiz CTA section ────────────────────────────────── */

.career-container {
    background: linear-gradient(135deg, var(--brand-tint-medium) 0%, var(--brand-tint) 100%);
}

.quiz-button {
    background: var(--brand-primary);
    box-shadow: 0 6px 16px rgba(var(--brand-primary-rgb), 0.25);
}

.quiz-button:hover {
    background: var(--brand-primary-dark);
    box-shadow: 0 10px 24px rgba(var(--brand-primary-rgb), 0.35);
}

.resume-button {
    background: var(--brand-primary);
    box-shadow: 0 6px 16px rgba(var(--brand-primary-rgb), 0.25);
}

.resume-button:hover {
    background: var(--brand-primary-dark);
}


/* ── Footer ─────────────────────────────────────────────────── */

.footer {
    background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);
}


/* ── Newsletter form ────────────────────────────────────────── */

.newsletter-form button {
    background-color: var(--brand-primary);
}

.newsletter-form button:hover {
    background-color: var(--brand-primary-dark);
}


/* ── Generic buttons ────────────────────────────────────────── */

.btn-primary {
    background-color: var(--brand-primary);
    background: var(--brand-primary);
}

.btn-primary:hover {
    background-color: var(--brand-primary-dark);
    background: var(--brand-primary-dark);
}


/* ── Refer section ──────────────────────────────────────────── */

.refer-btn:hover {
    background-color: var(--brand-primary-dark);
}


/* ── FAQ section ────────────────────────────────────────────── */

.faq-toggle {
    color: var(--brand-primary);
}

.btn-show-more {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-show-more:hover {
    background: var(--brand-primary);
    color: white;
}


/* ── Quiz / application form ────────────────────────────────── */

.progress-bar {
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-dark));
}

.logo-quizz {
    color: var(--brand-primary);
}

.question-number {
    color: var(--brand-primary);
}

/* Radio button selection indicator */
.container-quizz .radio-circle::after {
    background: var(--brand-primary);
}

.container-quizz .option input[type="radio"]:checked~.radio-circle {
    border-color: var(--brand-primary);
}

/* Select / dropdown focus */
.container-quizz select:focus,
.container-quizz .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1);
}

/* File input focus */
.container-quizz input[type="file"]:focus,
.container-quizz .form-file:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1);
}

/* File-selector button */
.container-quizz input[type="file"]::file-selector-button {
    background-color: var(--brand-primary);
}

.container-quizz input[type="file"]::file-selector-button:hover {
    background-color: var(--brand-primary-dark);
}

/* Phone input focus */
.container-quizz #phone:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1);
}

/* Text / email / tel input focus */
.container-quizz input[type="text"]:focus,
.container-quizz input[type="email"]:focus,
.container-quizz input[type="tel"]:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1);
}

/* Spinner */
.container-quizz .loader {
    border-top-color: var(--brand-primary);
}

/* Video links */
.container-quizz .video-link {
    color: var(--brand-primary);
}

.container-quizz .video-link:hover {
    color: var(--brand-primary-dark);
}

/* T&C checkbox links */
.container-quizz .checkbox-group a {
    color: var(--brand-primary);
}

/* Quiz step navigation button */
.content-wrapper button {
    background: var(--brand-primary);
}

.content-wrapper button:hover {
    background: var(--brand-primary-dark);
    box-shadow: 0 8px 20px rgba(var(--brand-primary-rgb), 0.4);
}


/* ── Quiz validation toast ──────────────────────────────────── */

#quizToast .toast-ok-btn {
    background: var(--brand-primary-darker);
}

#quizToast .toast-ok-btn:hover {
    background: var(--brand-primary-dark);
}

/* ── Native <select> dropdown – dark mode ──────────────────── */
[data-theme="dark"] .field select,
[data-theme="dark"] .card .field select {
    background-color: var(--bg-surface-2, #1c2740) !important;
    color: var(--text-primary, #f8fafc) !important;
    border-bottom-color: var(--border-default, rgba(255, 255, 255, 0.10)) !important;
}

[data-theme="dark"] .field select option,
[data-theme="dark"] .card .field select option {
    background-color: var(--bg-elevated, #1e293b);
    color: var(--text-primary, #f8fafc);
}

/* ── Country phone-code dropdown – dark mode (Type A: .country-dropdown / .c-opt) ── */
[data-theme="dark"] .country-dropdown {
    background: var(--bg-elevated, #1e293b);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .c-opt {
    color: var(--text-primary, #f8fafc);
}

[data-theme="dark"] .c-opt:hover {
    background: var(--bg-surface-2, #1c2740);
}

[data-theme="dark"] #countryISODisplay {
    color: var(--text-primary, #f8fafc);
}

[data-theme="dark"] #countryDialDisplay {
    color: var(--text-secondary, rgba(248, 250, 252, 0.65));
}

[data-theme="dark"] .phone-group {
    border-bottom-color: var(--border-default, rgba(255, 255, 255, 0.10));
}

/* ── Country phone-code dropdown – dark mode (Type B: .country-code-dropdown) ── */
[data-theme="dark"] .country-code-button {
    background: var(--bg-elevated, #1e293b);
    border-color: rgba(255, 255, 255, 0.10);
    color: var(--text-primary, #f8fafc);
}

[data-theme="dark"] .country-code-dropdown {
    background: var(--bg-elevated, #1e293b);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .country-search {
    background: var(--bg-elevated, #1e293b);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .country-search input {
    background: var(--bg-surface-2, #1c2740);
    color: var(--text-primary, #f8fafc);
    border-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .country-search input::placeholder {
    color: rgba(248, 250, 252, 0.40);
}

[data-theme="dark"] .country-option {
    color: var(--text-primary, #f8fafc);
}

[data-theme="dark"] .country-option span[style] {
    color: var(--text-secondary, rgba(248, 250, 252, 0.65)) !important;
}

[data-theme="dark"] .country-option:hover {
    background: var(--bg-surface-2, #1c2740);
}

[data-theme="dark"] .country-option.selected {
    background: rgba(69, 170, 242, 0.15);
}

/* ── Browser autocomplete dropdown: use dark color scheme ── */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    color-scheme: dark;
}

/* ── Autofilled field background override ── */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    caret-color: #e2e8f0;
}


/* ── Global Form Input Padding ──────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="date"],
select,
textarea {
    padding: 12px 16px;
    box-sizing: border-box;
}