/* ==========================================================================
   ONLINE APPLICATION PAGE STYLES
   ========================================================================== */

/* --- Design Tokens & Variables (Inherited from core theme) --- */
:root {
    --primary-color: #1a365d;       /* Deep Theological Blue */
    --secondary-color: #c49a45;     /* Elegant Accent Gold */
    --text-dark: #2d3748;           /* Body Text Color */
    --text-light: #718096;          /* Muted Gray Text */
    --bg-light: #f7fafc;            /* Soft Section Background */
    --white: #ffffff;
    --border-color: #cbd5e0;
    --error-color: #e53e3e;
    --transition-smooth: all 0.3s ease-in-out;
    --border-radius: 8px;
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   1. FORM HEADER
   ========================================================================== */
.apply-header {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #102a45 100%);
    color: var(--white);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.apply-header h1 {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.apply-header p {
    font-size: 16px;
    color: #e2e8f0;
    opacity: 0.9;
}

/* ==========================================================================
   2. CONTAINERS & SECTION TYPOGRAPHY
   ========================================================================== */
.form-container {
    max-width: 900px;
    margin: -30px auto 60px auto;
    background-color: var(--white);
    padding: 50px;
    border-radius: var(--border-radius);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    position: relative;
    z-index: 10;
    box-sizing: border-box;
}

.form-container .section-title {
    font-size: 22px;
    color: var(--primary-color);
    border-left: 4px solid var(--secondary-color);
    padding-left: 15px;
    margin: 40px 0 25px 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-container .section-title:first-of-type {
    margin-top: 0;
}

/* ==========================================================================
   3. RESPONSIVE FORM GRID ARCHITECTURE
   ========================================================================== */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Modifier class to span layout structures full width */
.input-group.full-width {
    grid-column: span 2;
}

/* ==========================================================================
   4. FORM FIELDS & ENTRY INPUT MODULES
   ========================================================================== */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

/* Base structural properties for form elements */
.input-group input[type="text"],
.input-group input[type="email"],
.input-group input[type="tel"],
.input-group input[type="date"],
.input-group select,
.input-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    background-color: var(--white);
    border-radius: 6px;
    font-size: 15px;
    color: var(--text-dark);
    font-family: inherit;
    transition: var(--transition-smooth);
    box-sizing: border-box;
}

/* Unified WebKit dropdown styling adjustments */
.input-group select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%232d3748' d='M0 0l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    padding-right: 40px;
}

.input-group textarea {
    min-height: 110px;
    resize: vertical;
}

/* Dynamic State Interactivity */
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.1);
}

/* HTML5 Constraint Processing Cues */
.input-group input:required:focus:invalid,
.input-group select:required:focus:invalid {
    border-color: var(--error-color);
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
}

/* ==========================================================================
   5. FILE UPLOAD BOX ARCHITECTURE
   ========================================================================== */
.upload-box {
    position: relative;
    border: 2px dashed var(--border-color);
    border-radius: 6px;
    padding: 18px;
    text-align: center;
    background-color: var(--bg-light);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.upload-box:hover {
    border-color: var(--secondary-color);
    background-color: rgba(196, 154, 69, 0.02);
}

.upload-box input[type="file"] {
    font-size: 14px;
    color: var(--text-light);
    cursor: pointer;
    width: 100%;
}

.upload-hint {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: #6b7280;
}

/* ==========================================================================
   6. DECLARATION LEGAL CONSENT MODULE
   ========================================================================== */
.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 40px 0 30px 0;
    padding: 20px;
    background-color: var(--bg-light);
    border-radius: 6px;
    border: 1px solid #edf2f7;
}

.checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--primary-color);
    flex-shrink: 0;
}

.checkbox label {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dark);
    cursor: pointer;
    user-select: none;
}

/* ==========================================================================
   7. SUBMIT COMMAND BUTTON
   ========================================================================== */
.submit-btn {
    display: block;
    width: 100%;
    padding: 16px;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-sm);
}

.submit-btn:hover {
    background-color: #102a45;
    transform: translateY(-1px);
    box-shadow: 0 7px 14px rgba(26, 54, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.submit-btn:active {
    transform: translateY(1px);
}


/* ==========================================================================
   RESPONSIVE VIEWPORT BREAKPOINTS
   ========================================================================== */
@media (max-width: 768px) {
    .apply-header {
        padding: 40px 20px;
    }

    .apply-header h1 {
        font-size: 30px;
    }

    .form-container {
        padding: 30px 20px;
        margin-top: -15px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .input-group.full-width {
        grid-column: auto;
    }
}

/* Application PDF download confirmation */
.download-success {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    color: #166534;
}
.download-btn {
    display: inline-block;
    padding: 11px 16px;
    border-radius: 7px;
    background: #13294b;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}
.download-btn:hover { opacity: .92; }
@media (max-width: 600px) {
    .download-btn { width: 100%; text-align: center; }
}
.application-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.application-actions .download-btn{display:inline-flex;align-items:center;justify-content:center}.preview-btn{background:#0b3b70!important}.preview-btn:hover{background:#082d55!important}@media(max-width:600px){.application-actions{flex-direction:column}.application-actions .download-btn{width:100%;box-sizing:border-box}}


/* ==========================================================================
   8. PRE-SUBMISSION APPLICATION PREVIEW
   ========================================================================== */
.preview-application-btn {
    margin-top: 14px;
    background: #c49a45;
    color: #fff;
}

.preview-application-btn:hover {
    background: #a98132;
}

.submit-application-btn {
    margin-top: 12px;
}

body.preview-open {
    overflow: hidden;
}

.application-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
}

.application-preview-modal.is-open {
    display: block;
}

.application-preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .78);
    backdrop-filter: blur(4px);
}

.application-preview-dialog {
    position: relative;
    width: min(1050px, 94vw);
    height: min(92vh, 900px);
    margin: 4vh auto;
    background: #eef1f5;
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.application-preview-head {
    flex: 0 0 auto;
    background: #13294b;
    color: #fff;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.application-preview-head h2 {
    margin: 0 0 4px;
    font-size: 20px;
}

.application-preview-head p {
    margin: 0;
    font-size: 13px;
    opacity: .85;
}

.preview-close {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
}

.application-preview-paper {
    flex: 1 1 auto;
    overflow: auto;
    width: min(794px, 94%);
    margin: 20px auto;
    padding: 24px;
    background: #fff;
    color: #20252b;
    box-shadow: 0 8px 25px rgba(15,23,42,.12);
    box-sizing: border-box;
}

.preview-college-header {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 3px solid #c49a45;
    padding-bottom: 14px;
    margin-bottom: 16px;
}

.preview-college-header img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.preview-college-header h1 {
    margin: 0;
    color: #13294b;
    font-size: 24px;
}

.preview-college-header h3 {
    margin: 3px 0 5px;
    color: #c49a45;
    font-size: 13px;
}

.preview-college-header p {
    margin: 2px 0;
    font-size: 10px;
    color: #4b5563;
}

.preview-section {
    margin-top: 14px;
}

.preview-section > h3 {
    margin: 0 0 8px;
    padding: 7px 9px;
    background: #13294b;
    color: #fff;
    font-size: 12px;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
}

.preview-field {
    min-height: 42px;
    padding: 7px 9px;
    border: 1px solid #dbe1e8;
    background: #fafbfc;
    box-sizing: border-box;
}

.preview-field span {
    display: block;
    font-size: 9px;
    color: #687383;
    margin-bottom: 3px;
}

.preview-field strong {
    display: block;
    font-size: 10px;
    line-height: 1.35;
    word-break: break-word;
}

.preview-documents {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    margin-top: 12px;
}

.preview-documents > div {
    border: 1px solid #dbe1e8;
    padding: 8px;
    text-align: center;
}

.preview-documents strong {
    display: block;
    font-size: 10px;
    margin-bottom: 8px;
}

.preview-documents img {
    max-width: 125px;
    max-height: 115px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.preview-declaration {
    margin-top: 14px;
    padding: 10px;
    border: 1px solid #dbe1e8;
    background: #f8fafc;
    font-size: 9px;
    line-height: 1.5;
}

.application-preview-actions {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    background: #fff;
    border-top: 1px solid #dbe1e8;
}

.preview-secondary,
.preview-submit {
    border: 0;
    border-radius: 7px;
    padding: 11px 16px;
    font-weight: 600;
    cursor: pointer;
}

.preview-secondary {
    background: #e5e7eb;
    color: #1f2937;
}

.preview-submit {
    background: #13294b;
    color: #fff;
}

.preview-submit:hover {
    background: #0d1f39;
}

@media (max-width: 700px) {
    .application-preview-dialog {
        width: 100vw;
        height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .application-preview-paper {
        width: 94%;
        padding: 14px;
        margin: 12px auto;
    }

    .preview-college-header img {
        width: 52px;
        height: 52px;
    }

    .preview-college-header h1 {
        font-size: 17px;
    }

    .preview-grid {
        grid-template-columns: 1fr;
    }

    .preview-documents {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .application-preview-actions {
        flex-direction: column;
    }

    .preview-secondary,
    .preview-submit {
        width: 100%;
    }
}


/* ==========================================================================\n   POST-SUBMISSION APPLICATION PREVIEW\n   ========================================================================== */\n.submission-success {\n    display:flex;\n    align-items:center;\n    gap:16px;\n    margin-bottom:22px;\n}\n.submission-success .success-icon {\n    width:48px; height:48px; border-radius:50%;\n    display:flex; align-items:center; justify-content:center;\n    background:#1f8f4d; color:#fff; font-size:28px; font-weight:800; flex:0 0 auto;\n}\n.submission-success h2 { margin:0 0 5px; }\n.submission-success p { margin:4px 0; }\n.application-id-line { font-size:14px; }\n.submitted-preview-card {\n    background:#fff; border:1px solid #dfe5ec; border-radius:16px;\n    padding:20px; margin:0 0 28px; box-shadow:0 8px 28px rgba(15,35,55,.08);\n}\n.submitted-preview-header {\n    display:flex; justify-content:space-between; align-items:center; gap:18px;\n    margin-bottom:16px;\n}\n.submitted-preview-header h2 { margin:0 0 6px; }\n.submitted-preview-header p { margin:0; color:#5c6672; }\n.application-actions { display:flex; flex-wrap:wrap; gap:10px; flex:0 0 auto; }\n.submitted-pdf-wrap {\n    width:100%; background:#e9edf2; border:1px solid #d6dde5; border-radius:10px; overflow:hidden;\n}\n.submitted-pdf-frame { display:block; width:100%; height:850px; border:0; background:#fff; }\n.pdf-fallback { padding:12px 15px; text-align:center; font-size:14px; background:#fff; }\n.after-submission-actions { display:flex; justify-content:center; margin-top:16px; }\n.new-application-btn {\n    display:inline-flex; align-items:center; justify-content:center; padding:11px 20px;\n    border-radius:8px; text-decoration:none; font-weight:700; border:1px solid #cfd6de;\n    color:#243447; background:#fff;\n}\n@media (max-width: 768px) {\n    .submitted-preview-card { padding:12px; border-radius:12px; }\n    .submitted-preview-header { flex-direction:column; align-items:stretch; }\n    .application-actions { width:100%; }\n    .application-actions .download-btn { flex:1 1 100%; text-align:center; }\n    .submitted-pdf-frame { height:650px; }\n}\n