/* ══════════════════════════════════════════
   ADMISSION FORM — admission.css
   Theme: Navy Blue (#0D1B3E) + Orange (#FF6B1A)
   Place: public/css/admission.css
══════════════════════════════════════════ */

/* ─── CSS VARIABLES ─── */
:root {
     --adm-white:       #ffffff;
    --adm-navy-light:  #162447;
    --adm-navy-card:   #1a2d5a;
    --adm-navy-deep:   #0a1628;
    --adm-orange:      #FF6B1A;
    --adm-orange-lt:   #FF8C42;
    --adm-orange-glow: rgba(255,107,26,0.16);
    --adm-white:       #ffffff;
    --adm-muted:       #8fa3c8;
    --adm-border:      rgba(255,255,255,0.09);
    --adm-input-bg:    rgba(255,255,255,0.055);
    --adm-input-bd:    rgba(255,255,255,0.13);
    --adm-focus-ring:  rgba(255,107,26,0.45);
    --adm-error:       #ff4f4f;
    --adm-radius:      10px;
    --adm-radius-lg:   14px;
    --adm-font:        'Nunito', sans-serif;
    --adm-font-head:   'Rajdhani', sans-serif;
}

/* ─── SECTION WRAPPER ─── */
.adm-section {
    padding: 60px 0 80px;
    background: var(--adm-navy);
}

/* ─── FORM CARD ─── */
.adm-form-card {
    background:    var(--adm-navy-light);
    border-radius: var(--adm-radius-lg);
    border:        1px solid var(--adm-border);
    overflow:      hidden;
    box-shadow:    0 12px 50px rgba(0,0,0,0.4);
}

/* ─── FORM HEADER ─── */
.adm-form-header {
    background: linear-gradient(90deg, var(--adm-orange) 0%, var(--adm-orange-lt) 100%);
    padding:    20px 32px;
    display:    flex;
    align-items:center;
    gap:        16px;
}
.adm-form-header-icon {
    width:           44px;
    height:          44px;
    background:      rgba(255,255,255,0.2);
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       22px;
    flex-shrink:     0;
}
.adm-form-header h2 {
    font-family:     var(--adm-font-head);
    font-size:       22px;
    font-weight:     700;
    letter-spacing:  1.2px;
    color:           var(--adm-white);
    margin:          0;
}
.adm-form-header p {
    font-size:  12px;
    color:      rgba(255,255,255,0.8);
    margin:     3px 0 0;
}

/* ─── FORM PADDING ─── */
#admissionForm {
    padding: 32px 36px;
}

/* ─── SECTION BLOCK ─── */
.adm-section-block {
    margin-bottom: 38px;
    padding-bottom:38px;
    border-bottom: 1px solid var(--adm-border);
}
.adm-section-block:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

/* ─── SECTION TITLE ─── */
.adm-section-title {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-bottom: 22px;
    padding-bottom:12px;
    border-bottom: 1px solid var(--adm-border);
}
.adm-sec-icon {
    width:           38px;
    height:          38px;
    background:      var(--adm-orange-glow);
    border:          1px solid rgba(255,107,26,0.28);
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       18px;
    flex-shrink:     0;
}
.adm-section-title h3 {
    font-family:    var(--adm-font-head);
    font-size:      17px;
    font-weight:    700;
    letter-spacing: 2px;
    color:          var(--adm-white);
    text-transform: uppercase;
    margin:         0;
}

/* ─── GRIDS ─── */
.adm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.adm-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.adm-col-2  { grid-column: span 2; }
.adm-col-3  { grid-column: span 3; }
.adm-mt     { margin-top: 18px; }
.adm-mb     { margin-bottom: 18px; }

/* ─── FIELD ─── */
.adm-field {
    display:        flex;
    flex-direction: column;
    gap:            7px;
}
.adm-field > label,
.adm-field > .adm-field-label {
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:          var(--adm-muted);
    font-family:    var(--adm-font);
}
.req { color: var(--adm-orange); margin-left: 2px; }

.adm-field input[type="text"],
.adm-field input[type="email"],
.adm-field input[type="tel"],
.adm-field input[type="date"],
.adm-field select,
.adm-field textarea {
    background:   var(--adm-input-bg);
    border:       1px solid var(--adm-input-bd);
    border-radius:var(--adm-radius);
    padding:      11px 15px;
    color:        var(--adm-white);
    font-family:  var(--adm-font);
    font-size:    14px;
    outline:      none;
    width:        100%;
    transition:   border-color .2s, box-shadow .2s, background .2s;
    -webkit-appearance: none;
}
.adm-field input:focus,
.adm-field select:focus,
.adm-field textarea:focus {
    border-color: var(--adm-orange);
    background:   rgba(255,107,26,0.06);
    box-shadow:   0 0 0 3px var(--adm-focus-ring);
}
.adm-field select { cursor: pointer; }
.adm-field select option { background: #1a2d5a; color: var(--adm-white); }
.adm-field textarea { resize: vertical; min-height: 82px; }
.adm-field input::placeholder,
.adm-field textarea::placeholder { color: rgba(255,255,255,0.22); }

.adm-error {
    font-size:  12px;
    color:      var(--adm-error);
    margin-top: 3px;
}

/* ─── RADIO ─── */
.adm-radio-group { display: flex; flex-wrap: wrap; gap: 12px; }
.adm-radio-item {
    display:       flex;
    align-items:   center;
    gap:           9px;
    background:    var(--adm-input-bg);
    border:        1.5px solid var(--adm-input-bd);
    border-radius: var(--adm-radius);
    padding:       10px 20px;
    cursor:        pointer;
    font-size:     14px;
    font-weight:   600;
    color:         var(--adm-muted);
    font-family:   var(--adm-font);
    transition:    all .2s;
    user-select:   none;
}
.adm-radio-item:hover { border-color: var(--adm-orange); background: var(--adm-orange-glow); color: var(--adm-white); }
.adm-radio-item input[type="radio"] { display: none; }
.adm-dot {
    width:        18px;
    height:       18px;
    border-radius:50%;
    border:       2px solid var(--adm-muted);
    display:      flex;
    align-items:  center;
    justify-content:center;
    transition:   all .2s;
    flex-shrink:  0;
}
.adm-radio-item input[type="radio"]:checked ~ .adm-dot {
    border-color: var(--adm-orange);
    background:   var(--adm-orange);
    box-shadow:   0 0 8px rgba(255,107,26,0.5);
}
.adm-radio-item input[type="radio"]:checked ~ .adm-dot::after {
    content:       '';
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    white;
}
.adm-radio-item:has(input:checked) { border-color: var(--adm-orange); background: var(--adm-orange-glow); color: var(--adm-white); }

/* ─── CHECKBOX ─── */
.adm-checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; }
.adm-checkbox-item {
    display:       flex;
    align-items:   center;
    gap:           8px;
    background:    var(--adm-input-bg);
    border:        1.5px solid var(--adm-input-bd);
    border-radius: var(--adm-radius);
    padding:       9px 16px;
    cursor:        pointer;
    font-size:     13px;
    font-weight:   600;
    color:         var(--adm-muted);
    font-family:   var(--adm-font);
    transition:    all .2s;
    user-select:   none;
}
.adm-checkbox-item:hover { border-color: var(--adm-orange); background: var(--adm-orange-glow); color: var(--adm-white); }
.adm-checkbox-item input[type="checkbox"] { display: none; }
.adm-box {
    width:         17px;
    height:        17px;
    border-radius: 5px;
    border:        2px solid var(--adm-muted);
    display:       flex;
    align-items:   center;
    justify-content:center;
    font-size:     11px;
    transition:    all .2s;
    flex-shrink:   0;
}
.adm-checkbox-item input[type="checkbox"]:checked ~ .adm-box { border-color: var(--adm-orange); background: var(--adm-orange); }
.adm-checkbox-item input[type="checkbox"]:checked ~ .adm-box::after { content: '\2713'; color: white; font-weight: 700; }
.adm-checkbox-item:has(input:checked) { border-color: var(--adm-orange); background: var(--adm-orange-glow); color: var(--adm-white); }

/* ─── PROGRAM SECTION ─── */
.adm-program-label {
    font-family:    var(--adm-font-head);
    font-size:      14px;
    font-weight:    700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          var(--adm-white);
    margin-bottom:  14px;
}
.adm-program-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.adm-program-cat {
    background:    var(--adm-navy-card);
    border:        1px solid var(--adm-border);
    border-radius: var(--adm-radius-lg);
    overflow:      hidden;
}
.adm-program-cat-header {
    background: var(--adm-navy-deep);
    padding:    11px 18px;
    display:    flex;
    align-items:center;
    gap:        10px;
}
.adm-cat-dot {
    width:        10px;
    height:       10px;
    border-radius:50%;
    background:   var(--adm-orange);
    box-shadow:   0 0 7px rgba(255,107,26,0.6);
    flex-shrink:  0;
}
.adm-program-cat-header span {
    font-family:    var(--adm-font-head);
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--adm-muted);
}
.adm-program-options { padding: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.adm-prog-radio {
    display:       flex;
    align-items:   center;
    gap:           9px;
    background:    rgba(255,255,255,0.04);
    border:        1.5px solid rgba(255,255,255,0.1);
    border-radius: 9px;
    padding:       9px 16px;
    cursor:        pointer;
    font-size:     13px;
    font-weight:   600;
    color:         var(--adm-muted);
    font-family:   var(--adm-font);
    min-width:     130px;
    transition:    all .2s;
    user-select:   none;
}
.adm-prog-radio:hover { border-color: var(--adm-orange); color: var(--adm-white); background: var(--adm-orange-glow); }
.adm-prog-radio input[type="radio"] { display: none; }
.adm-prog-dot {
    width:         16px;
    height:        16px;
    border-radius: 50%;
    border:        2px solid var(--adm-muted);
    display:       flex;
    align-items:   center;
    justify-content:center;
    transition:    all .2s;
    flex-shrink:   0;
}
.adm-prog-radio:has(input:checked) { border-color: var(--adm-orange); color: var(--adm-white); background: var(--adm-orange-glow); }
.adm-prog-radio input[type="radio"]:checked ~ .adm-prog-dot { border-color: var(--adm-orange); background: var(--adm-orange); box-shadow: 0 0 6px rgba(255,107,26,0.5); }
.adm-prog-radio input[type="radio"]:checked ~ .adm-prog-dot::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: white; }

/* ─── PHOTO UPLOAD ─── */
.adm-photo-upload-wrapper {
    display: flex;
    gap:     28px;
    align-items: flex-start;
}

/* LEFT: preview card */
.adm-photo-preview-card {
    flex-shrink: 0;
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         12px;
}
.adm-photo-preview {
    width:         160px;
    height:        190px;
    background:    var(--adm-input-bg);
    border:        2px dashed var(--adm-input-bd);
    border-radius: var(--adm-radius-lg);
    display:       flex;
    align-items:   center;
    justify-content: center;
    position:      relative;
    overflow:      hidden;
    transition:    border-color .3s;
}
.adm-photo-preview.has-image {
    border-style:  solid;
    border-color:  var(--adm-orange);
    box-shadow:    0 0 0 3px var(--adm-focus-ring);
}
.adm-photo-placeholder {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            10px;
    padding:        10px;
}
.adm-photo-placeholder p {
    font-size:  12px;
    color:      var(--adm-muted);
    text-align: center;
    line-height:1.4;
    margin:     0;
}
.adm-photo-remove {
    position:        absolute;
    top:             6px;
    right:           6px;
    width:           26px;
    height:          26px;
    background:      rgba(255,79,79,0.85);
    border:          none;
    border-radius:   50%;
    color:           white;
    font-size:       13px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background .2s;
    line-height:     1;
    z-index:         2;
}
.adm-photo-remove:hover { background: #ff2222; }
.adm-photo-badge {
    display:        flex;
    align-items:    center;
    gap:            6px;
    background:     var(--adm-orange-glow);
    border:         1px solid rgba(255,107,26,0.3);
    border-radius:  20px;
    padding:        4px 12px;
    font-size:      12px;
    font-weight:    700;
    color:          var(--adm-orange);
    font-family:    var(--adm-font);
    letter-spacing: .5px;
}
.adm-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--adm-orange); box-shadow: 0 0 5px rgba(255,107,26,0.7); flex-shrink: 0; }

/* RIGHT: upload area + rules */
.adm-photo-right { flex: 1; display: flex; flex-direction: column; gap: 16px; }

.adm-upload-zone {
    border:        2px dashed var(--adm-input-bd);
    border-radius: var(--adm-radius-lg);
    padding:       26px 20px;
    text-align:    center;
    cursor:        pointer;
    transition:    all .25s;
    background:    var(--adm-input-bg);
    display:       block;
}
.adm-upload-zone:hover,
.adm-upload-zone.drag-over {
    border-color: var(--adm-orange);
    background:   var(--adm-orange-glow);
}
.adm-upload-icon-wrap { margin-bottom: 12px; display: flex; justify-content: center; }
.adm-upload-title {
    font-size:  15px;
    font-weight:700;
    color:      var(--adm-white);
    font-family:var(--adm-font);
    margin:     0 0 5px;
}
.adm-upload-title span { color: var(--adm-orange); }
.adm-upload-sub { font-size: 12px; color: var(--adm-muted); margin: 0 0 14px; font-family: var(--adm-font); }
.adm-upload-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.adm-upload-tags span {
    background:  var(--adm-orange-glow);
    border:      1px solid rgba(255,107,26,0.3);
    color:       var(--adm-orange);
    font-size:   11px;
    font-weight: 700;
    padding:     3px 10px;
    border-radius:20px;
    font-family: var(--adm-font);
    letter-spacing:.3px;
}

/* rules */
.adm-upload-rules { display: flex; flex-direction: column; gap: 8px; }
.adm-rule-item {
    display:    flex;
    align-items:center;
    gap:        9px;
    font-size:  13px;
    color:      var(--adm-muted);
    font-family:var(--adm-font);
}
.adm-rule-dot {
    width:       8px;
    height:      8px;
    border-radius:50%;
    flex-shrink: 0;
}
.adm-rule-dot.ok   { background: #34d399; box-shadow: 0 0 5px rgba(52,211,153,0.5); }
.adm-rule-dot.warn { background: #fbbf24; box-shadow: 0 0 5px rgba(251,191,36,0.5); }

/* progress */
.adm-upload-progress {
    background:    var(--adm-input-bg);
    border:        1px solid var(--adm-input-bd);
    border-radius: var(--adm-radius);
    padding:       12px 16px;
}
.adm-progress-info { display: flex; justify-content: space-between; font-size: 12px; color: var(--adm-muted); font-family: var(--adm-font); margin-bottom: 8px; }
.adm-progress-info span:first-child { color: var(--adm-white); font-weight: 600; }
.adm-progress-bar-wrap { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.adm-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--adm-orange), var(--adm-orange-lt)); border-radius: 3px; transition: width .4s ease; }

/* ─── FORM FOOTER ─── */
.adm-form-footer {
    border-top:      1px solid var(--adm-border);
    padding:         24px 36px;
    display:         flex;
    
    justify-content: flex-end;
    align-items:     center;
    gap:             14px;
    background:      rgba(0,0,0,0.15);
    margin:          32px -36px -32px;
}
.adm-btn-reset {
    background:    transparent;
    border:        1.5px solid var(--adm-input-bd);
    color:         var(--adm-muted);
    font-family:   var(--adm-font-head);
    font-size:     15px;
    font-weight:   700;
    letter-spacing:1px;
    padding:       12px 28px;
    border-radius: var(--adm-radius);
    cursor:        pointer;
    transition:    all .2s;
}
.adm-btn-reset:hover { border-color: var(--adm-orange); color: var(--adm-white); }
.adm-btn-submit {
    display:       flex;
    align-items:   center;
    gap:           8px;
    background:    linear-gradient(90deg, var(--adm-orange), var(--adm-orange-lt));
    border:        none;
    color:         white;
    font-family:   var(--adm-font-head);
    font-size:     16px;
    font-weight:   700;
    letter-spacing:1.5px;
    padding:       13px 38px;
    border-radius: var(--adm-radius);
    cursor:        pointer;
    transition:    all .2s;
    box-shadow:    0 4px 20px rgba(255,107,26,0.35);
}
.adm-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 7px 26px rgba(255,107,26,0.5); }
/* css */
/* ─── VALIDATION & ERROR STATES ─── */
.adm-field input.is-invalid,
.adm-field select.is-invalid,
.adm-field textarea.is-invalid {
    border-color: var(--adm-error) !important;
    background: rgba(255, 79, 79, 0.08);
}

.adm-field .adm-radio-group.is-invalid,
.adm-field .adm-checkbox-group.is-invalid {
    border-color: var(--adm-error) !important;
    background: rgba(255, 79, 79, 0.08);
}

.adm-error-msg {
    font-size: 12px;
    color: var(--adm-error);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--adm-font);
}

.validation-alert {
    background: rgba(255, 79, 79, 0.1);
    border: 1px solid rgba(255, 79, 79, 0.3);
    color: var(--adm-error);
    padding: 14px 18px;
    border-radius: var(--adm-radius);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-family: var(--adm-font);
}
/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
    .adm-program-grid { grid-template-columns: 1fr; }
    .adm-photo-upload-wrapper { flex-direction: column; align-items: stretch; }
    .adm-photo-preview-card { flex-direction: row; align-items: center; }
    .adm-photo-preview { width: 120px; height: 145px; }
}
@media (max-width: 700px) {
    #admissionForm { padding: 20px 18px; }
    .adm-form-header { padding: 16px 20px; }
    .adm-grid-2, .adm-grid-3 { grid-template-columns: 1fr; }
    .adm-col-2, .adm-col-3 { grid-column: span 1; }
    .adm-form-footer { padding: 18px 20px; flex-direction: column; margin: 20px -18px -20px; }
    .adm-btn-submit, .adm-btn-reset { width: 100%; justify-content: center; }
}