/* ==========================================================================
   OCHS Portal - admission application form
   Loaded on its own, not over the dashboard theme: this page is seen by
   parents on a phone, not by staff at a desk, so it does not inherit the
   admin chrome.
   ========================================================================== */

:root {
    --ochs-primary:      #075272;
    --ochs-primary-dark: #053c55;
    --ochs-accent:       #ff6334;
    --ochs-accent-dark:  #e5501f;
    --ochs-ink:          #1c2b33;
    --ochs-muted:        #6b7b85;
    --ochs-line:         #dde5ea;
    --ochs-bg:           #eef2f4;
    --ochs-card:         #ffffff;
    --ochs-ok:           #1f8a5b;
    --ochs-err:          #c0392b;
}

* { box-sizing: border-box; }

body.ochs-apply {
    margin: 0;
    background: var(--ochs-bg);
    color: var(--ochs-ink);
    font-family: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Masthead ------------------------------------------------- */

.ochs-apply-head {
    background: linear-gradient(135deg, var(--ochs-primary) 0%, var(--ochs-primary-dark) 100%);
    color: #fff;
    padding: 28px 20px 34px;
    text-align: center;
    border-bottom: 4px solid var(--ochs-accent);
}
.ochs-apply-head img { height: 64px; width: auto; margin-bottom: 12px; }
.ochs-apply-head h1 {
    margin: 0 0 8px;
    font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .2px;
}
.ochs-apply-head p { margin: 0 auto; max-width: 640px; font-size: 15px; color: #cfe3ec; }
.ochs-apply-logos { display: flex; gap: 18px; align-items: center; justify-content: center; }

/* ---------- Shell ----------------------------------------------------- */

.ochs-apply-shell { max-width: 860px; margin: -18px auto 60px; padding: 0 14px; }

.ochs-apply-note {
    background: #fff; border-radius: 8px; padding: 14px 16px; margin-bottom: 18px;
    border-left: 4px solid var(--ochs-accent);
    box-shadow: 0 1px 3px rgba(16,42,58,.08);
    font-size: 14px;
}

.ochs-alert {
    border-radius: 8px; padding: 14px 16px; margin-bottom: 18px; font-size: 14px;
    display: flex; gap: 10px; align-items: flex-start;
}
.ochs-alert-ok  { background: #e9f5ef; border: 1px solid #b8ddc9; border-left: 4px solid var(--ochs-ok);  color: #14543a; }
.ochs-alert-err { background: #fdeeea; border: 1px solid #f3c3b5; border-left: 4px solid var(--ochs-err); color: #8a2c15; }
.ochs-alert ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- Sections -------------------------------------------------- */

.ochs-section {
    background: var(--ochs-card);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(16,42,58,.08);
    margin-bottom: 18px;
    overflow: hidden;
}
.ochs-section > header {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--ochs-line);
    background: #f8fafb;
}
.ochs-step {
    flex: 0 0 auto;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--ochs-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}
.ochs-section > header h2 {
    margin: 0;
    font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    font-size: 16px; font-weight: 600; color: var(--ochs-primary);
}
.ochs-section-body { padding: 20px; }

/* ---------- Grid and controls ---------------------------------------- */

.ochs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ochs-grid .full { grid-column: 1 / -1; }

@media (max-width: 640px) {
    .ochs-grid { grid-template-columns: 1fr; }
    .ochs-apply-head h1 { font-size: 21px; }
    .ochs-section-body { padding: 16px; }
}

.ochs-field label {
    display: block; margin-bottom: 6px;
    font-size: 13px; font-weight: 600; color: #43555f;
}
.ochs-field .req { color: var(--ochs-err); }

.ochs-field input[type=text],
.ochs-field input[type=email],
.ochs-field input[type=tel],
.ochs-field input[type=date],
.ochs-field input[type=file],
.ochs-field select,
.ochs-field textarea {
    width: 100%;
    padding: 11px 12px;
    font: inherit;
    font-size: 15px;
    color: var(--ochs-ink);
    background: #fff;
    border: 1px solid var(--ochs-line);
    border-radius: 7px;
    transition: border-color .15s, box-shadow .15s;
    /* 16px on iOS stops the page zooming when a field is focused */
    min-height: 44px;
}
.ochs-field input:focus,
.ochs-field select:focus,
.ochs-field textarea:focus {
    outline: none;
    border-color: var(--ochs-primary);
    box-shadow: 0 0 0 3px rgba(7, 82, 114, .12);
}
.ochs-field input.is-invalid, .ochs-field select.is-invalid { border-color: var(--ochs-err); }
.ochs-hint { display: block; margin-top: 5px; font-size: 12px; color: var(--ochs-muted); }
.ochs-error { display: block; margin-top: 5px; font-size: 12px; color: var(--ochs-err); }

/* ---------- Footer / submit ------------------------------------------ */

.ochs-apply-actions {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    padding: 18px 20px;
    background: #f8fafb;
    border-top: 1px solid var(--ochs-line);
}
.ochs-submit {
    appearance: none; border: 0; cursor: pointer;
    background: var(--ochs-accent); color: #fff;
    font: inherit; font-size: 16px; font-weight: 700;
    padding: 13px 28px; border-radius: 7px; min-height: 48px;
    transition: background .15s;
}
.ochs-submit:hover, .ochs-submit:focus { background: var(--ochs-accent-dark); }
.ochs-submit[disabled] { opacity: .6; cursor: progress; }
.ochs-apply-actions .ochs-hint { margin: 0; }

.ochs-apply-foot {
    text-align: center; padding: 22px 14px 40px;
    font-size: 13px; color: var(--ochs-muted);
}
.ochs-apply-foot a { color: var(--ochs-primary); }

.ochs-apply-head .ochs-apply-lead {
    max-width: 640px; margin: 0 auto 8px;
    font-size: 16px; font-weight: 600; color: #ffffff;
}