/* IBT Interview App - iOS 26 Liquid Glass Theme + A4 Print */
/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body.glass-body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    min-height: 100vh;
    /* Smooth color transition for theme change */
    transition: background-color 0.4s ease;
}

/* --- THEME BACKGROUNDS (Abstract CSS-only Liquid Feel - CRUCIAL for blur effect) --- */

/* Light Mode: Vibrant, light colors */
body.glass-body.theme-light {
    /* Dynamic, soft, colorful gradient for background blur effect */
    background:
        radial-gradient(at 10% 10%, #bfdbfe, transparent 70%), /* Light Blue */
        radial-gradient(at 90% 40%, #a5b4fc, transparent 70%), /* Lavender */
        radial-gradient(at 50% 100%, #d8b4fe, transparent 70%), /* Violet */
        linear-gradient(180deg, #f8fafc, #e2e8f0); /* Base Light Tone */
    color:#1f2937;
}

/* Dark Mode: Deep, saturated colors with neon accents */
body.glass-body.theme-dark {
    /* Dynamic, deep, colorful gradient for background blur effect */
    background:
        radial-gradient(at 90% 10%, rgba(37, 99, 235, 0.3), transparent 60%), /* Deep Blue */
        radial-gradient(at 10% 80%, rgba(139, 92, 246, 0.3), transparent 60%), /* Purple */
        radial-gradient(at 50% 0%, rgba(6, 182, 212, 0.2), transparent 60%), /* Cyan top */
        linear-gradient(180deg, #020617, #0f172a); /* Base Dark Tone */
    color:#f9fafb;
}

.background-gradient {
    /* This element is now redundant but kept for safety */
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

/* Layout */
.app-shell {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
}
.app-header {
    margin: 16px 0;
    padding: 24px 24px;
    text-align: left;
}
/* New style to align logo and title */
.header-content {
    display: flex;
    align-items: flex-end;
    gap: 16px; /* Space between logo and title */
}
.header-content img {
    height: 80px; /* Proper size for the logo */
    width: auto;
    object-fit: contain;
}
/* Adjust h1 to ensure alignment */
.header-content h1 {
    margin: 0; /* Remove default margin */
}

.app-header h1 {
    font-size: 1.8rem;
    letter-spacing: -0.01em;
    font-weight: 700;
}
.app-header p {
    margin-top: 4px;
    font-size: 0.95rem;
    opacity: 0.8;
}
.app-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}
.app-footer {
    text-align: center;
    font-size: 0.75rem;
    padding-bottom: 12px;
    opacity: 0.7;
}

/* --- GLASS CARD (The Liquid Glass Core) --- */
.glass-card {
    border-radius: 28px; /* Larger radius for iOS 26 style */

    /* EXTREME Blur and Saturation for Liquid Effect */
    backdrop-filter: blur(32px) saturate(250%);
    -webkit-backdrop-filter: blur(32px) saturate(250%);

    border: 1px solid;
    transition: transform 0.2s; /* Subtle hover/focus effect */
}

/* Light Glass Panel */
body.glass-body.theme-light .glass-card {
    /* Highly translucent, frosty white */
    background: rgba(255,255,255,0.35); /* More transparent */
    border-color: rgba(255,255,255,0.7);
    box-shadow:
        0 20px 50px rgba(15,23,42,0.1),
        0 0 0 1px rgba(255,255,255,0.4) inset;
}

/* Dark Glass Panel */
body.glass-body.theme-dark .glass-card {
    /* Translucent dark blue tint */
    background: rgba(15,23,42,0.6); /* More transparent dark */
    border-color: rgba(55,65,81,0.5);
    box-shadow:
        0 28px 70px rgba(0,0,0,0.8),
        0 0 0 1px rgba(2,6,23,0.3) inset;
}

/* Form */
.form { padding: 24px; }
.small-form { max-width: 420px; margin: 0 auto; }
.form-section { margin-bottom: 28px; }

.form-section h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 14px;
    display:flex;
    align-items:center;
    gap:8px;
    letter-spacing: -0.01em;
    opacity: 0.95;
}
.form-section h2::before {
    content:'';
    width:5px;
    height:22px;
    border-radius:999px;
    background:linear-gradient(180deg,#38bdf8,#a855f7);
}

.field { margin-bottom:14px; }
.field label {
    font-size:0.85rem;
    display:block;
    margin-bottom:6px;
    font-weight: 500;
}
body.glass-body.theme-light .field label { color:#4b5563; }
body.glass-body.theme-dark .field label { color:#9ca3af; }

.field input,
.field select,
.field textarea {
    width:100%;
    border-radius:14px; /* Slightly larger radius */
    padding:12px 16px;
    font-size:0.95rem;
    outline:none;
    transition:border-color 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
    border: 1px solid;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* --- Input Glass Effect --- */
body.glass-body.theme-light .field input,
body.glass-body.theme-light .field select,
body.glass-body.theme-light .field textarea {
    /* Highly transparent, frosted look */
    background: rgba(255,255,255,0.15); /* Very transparent */
    color: #111827;
    border-color: rgba(255,255,255,0.6);
}

body.glass-body.theme-dark .field input,
body.glass-body.theme-dark .field select,
body.glass-body.theme-dark .field textarea {
    /* Dark transparent background, subtle dark border */
    background:rgba(255,255,255,0.05);
    color:#e5e7eb;
    border-color:rgba(255,255,255,0.1);
}

.field input::placeholder,
.field textarea::placeholder {
    opacity:0.6;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color:#38bdf8;
    box-shadow:0 0 0 2px rgba(56,189,248,0.4);
}
.field textarea { resize:vertical; }
.required { color:#ef4444; }

/* Responsive Grid */
.grid-2 {
    display:grid;
    grid-template-columns:1fr;
    gap:16px; /* Increased gap for mobile readability */
}
@media (min-width: 640px) {
    .grid-2 { grid-template-columns:1fr 1fr; }
}

.inline-options {
    display:flex;
    gap:20px;
    font-size:0.85rem;
}
.inline-options label{display:flex;align-items:center;gap:8px;}
.inline-options input[type=radio]{accent-color:#38bdf8;}
.field input[type="checkbox"] + span {
    font-size: 0.9rem;
    display: inline;
}


/* Buttons (Action buttons remain solid for high contrast) */
.btn-primary,
.btn-secondary,
.btn-ghost,
.theme-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:10px 22px;
    font-size:0.95rem;
    font-weight: 600;
    border:none;
    cursor:pointer;
    text-decoration:none;
    transition:transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
    white-space:nowrap;
    min-width: 120px; /* Ensures buttons don't get too small on mobile */
}

.btn-primary {
    /* Solid, gradient for high-contrast action */
    background:linear-gradient(135deg,#38bdf8,#6366f1);
    color:#f9fafb;
    box-shadow:0 12px 30px rgba(37,99,235,0.5);
}
.btn-primary:hover {
    transform:translateY(-2px);
    box-shadow:0 18px 40px rgba(37,99,235,0.6);
}

/* Secondary/Ghost buttons are now glassy */
body.glass-body.theme-light .btn-secondary,
body.glass-body.theme-light .btn-ghost {
    background:rgba(255,255,255,0.75);
    border:1px solid rgba(255,255,255,0.95);
    color:#111827;
    box-shadow: 0 4px 10px rgba(15,23,42,0.1);
}
body.glass-body.theme-dark .btn-secondary,
body.glass-body.theme-dark .btn-ghost {
    background:rgba(30,64,175,0.4);
    border:1px solid rgba(30,64,175,0.6);
    color:#e5e7eb;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.btn-secondary:hover,
.btn-ghost:hover {
    transform:translateY(-1px);
}
.theme-toggle{display:none !important;}

.form-actions {
    display:flex;
    justify-content:flex-end;
    margin-top:16px;
    gap:12px;
}
/* Mobile actions: force buttons to stack/fill width */
@media (max-width: 480px) {
    .form-actions {
        flex-direction: column;
        gap: 10px;
    }
    .form-actions .btn-primary,
    .form-actions .btn-secondary {
        width: 100%;
        padding: 14px 0; /* Taller button on mobile */
    }
}

/* --- Alerts (Glassy) --- */
.alert {
    padding:14px 20px;
    border-radius:24px;
    font-size:0.9rem;
    border:1px solid transparent;
}
body.glass-body.theme-light .alert.error {
    background:rgba(248,113,113,0.25);
    border-color:rgba(248,113,113,0.6);
    color:#b91c1c;
}
body.glass-body.theme-dark .alert.error {
    background:rgba(248,113,113,0.35);
    border-color:rgba(248,113,113,0.7);
    color:#fee2e2;
}
.alert ul{margin-top:6px;padding-left:16px;}


/* --- PROGRESS BAR (Glassy) --- */
.progress-card {
    padding: 18px 24px;
    margin-bottom: 20px;
}
.step-progress {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.step-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 500;
}
.step-label {
    opacity: 0.6;
    transition: opacity 0.3s;
}
.step-label-active {
    opacity: 1;
    font-weight: 600;
}

.step-progress-bar {
    position: relative;
    width: 100%;
    height: 8px; /* Slightly thicker */
    border-radius: 999px;
    background: rgba(148,163,184,0.3); /* Glassy track */
    overflow: hidden;
    /* Inner glass shimmer for the track */
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset;
}

.step-progress-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    /* iOS Blue/Purple Gradient */
    background: linear-gradient(90deg, #38bdf8, #60a5fa, #a855f7);
    transition: width 0.35s ease-out;
    transform-origin: left center;
}

/* --- TOAST NOTIFICATION (Theme-Aware Liquid Glass) --- */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
    pointer-events: none;
}
.toast {
    min-width: 280px;
    max-width: 360px; /* Slightly wider */
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Strong Glass effect */
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);

    box-shadow: 0 18px 40px rgba(15,23,42,0.6);

    /* Initial state for transition */
    transform: translateX(100%);
    opacity: 0;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    pointer-events: auto;
}

/* Default Toast (Neutral) */
body.glass-body.theme-light .toast:not(.toast-error):not(.toast-success) {
    background: rgba(255, 255, 255, 0.6); /* Glassy white */
    color: #1f2937;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 18px 40px rgba(15,23,42,0.15);
}
body.glass-body.theme-dark .toast:not(.toast-error):not(.toast-success) {
    background: rgba(30, 64, 175, 0.4); /* Glassy dark blue */
    color: #f9fafb;
    border: 1px solid rgba(30, 64, 175, 0.6);
}

/* Target the 'visible' class from the JS */
.toast.visible {
    transform: translateX(0);
    opacity: 1;
}

/* Error/Success (More opaque for visibility) */
.toast-error {
    background: rgba(239,68,68,0.88);
    color:#fee2e2;
    border: 1px solid rgba(239,68,68,0.95);
    box-shadow: 0 18px 40px rgba(239,68,68,0.5);
}
.toast-success {
    background: rgba(34,197,94,0.88);
    color:#022c22;
    border: 1px solid rgba(34,197,94,0.95);
    box-shadow: 0 18px 40px rgba(34,197,94,0.5);
}

/* Field error highlight */
.field.field-error input,
.field.field-error select,
.field.field-error textarea {
    border-color:#ef4444 !important;
    box-shadow:0 0 0 2px rgba(239,68,68,0.5) !important;
}
.field.field-error label {
    color:#ef4444 !important;
}
.field.field-error input[type="checkbox"] + span {
    color:#ef4444 !important;
}

/* Signature pad */
#signaturePad{
    border-radius:18px; /* Match card radius */
    border:1px dashed rgba(148,163,184,0.7);
    background:#ffffff;
    max-width:100%;
}
.sig-actions{margin-top:8px;display:flex;gap:8px;}
.sig-note{margin-top:4px;font-size:0.75rem;opacity:0.8;}

/* --- Mobile Responsiveness Adjustments (Specific for small screens) --- */
@media(max-width:480px){
    .app-shell{padding:10px;}
    .app-header{margin:10px 0;padding:16px;}
    .app-header h1{font-size:1.5rem;}
    .app-header p{font-size:0.9rem;}

    .glass-card{border-radius:22px;}
    .form{padding:16px;}
    .form-section { margin-bottom: 24px; }
    .form-section h2 { font-size: 1.05rem; }

    .field input, .field select, .field textarea {
        border-radius: 12px;
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    /* Move Toast to bottom center on mobile */
    .toast-container {
        top: auto;
        bottom: 16px;
        right: 50%;
        transform: translateX(50%);
        align-items: center;
        width: calc(100% - 32px);
    }
    .toast {
        min-width: unset;
        max-width: 100%;
        font-size: 0.85rem;
        /* Mobile entry animation (from bottom) */
        transform: translateY(100%);
    }
    .toast.visible {
        transform: translateY(0);
    }
}

/* Print mode: A4 front/back */
@media print{
    body.glass-body{
        background:#ffffff !important;
        color:#000000 !important;
    }
    .background-gradient,
    .no-print{
        display:none !important;
    }
    .app-shell{
        max-width:none;
        margin:0;
        padding:0;
    }
    .glass-card,
    .form,
    .detail-card{
        border-radius:0;
        border:none;
        box-shadow:none;
        background:#ffffff !important;
    }
    .printable{
        width:210mm;
        margin:0 auto;
        padding:10mm 12mm;
    }
    .print-page{
        page-break-after:always;
    }
    .print-page:last-child{
        page-break-after:auto;
    }
}

/* --- THANK YOU PAGE Specific Styles --- */

/* Ensures text content inside the small card is visually appealing and spaced correctly */
.glass-card.small-form {
    text-align: center; /* Center text and alignment */
}

/* Style the main paragraph for prominence */
.glass-card.small-form > p:first-of-type {
    font-size: 0.95rem; /* slightly larger */
    font-weight: 500;
    margin-bottom: 10px;
    opacity: 0.95;
}

/* Style the secondary note */
.glass-card.small-form > p:last-of-type {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Modifier class to center buttons on the Thank You page */
.form-actions.center-actions {
    justify-content: center;
}