/* Shared theme for bootcamp/inquiry.php + bootcamp/admission.php
   (extracted from the retired register.php so the look stays identical) */
:root {
    --green: #7cc242;
    --green-d: #65a336;
    --blue: #00aeef;
    --blue-d: #0095cc;
    --dark: #1c2437;
    --text: #2d2d2d;
    --muted: #6b7280;
    --border: #e0e0e0;
    --bg: #f4f6f9;
    --radius: 6px
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; min-height: 100vh }

.site-header { background: #fff; border-bottom: 3px solid var(--green) }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px }
.logo-img { height: 48px; width: auto }
.header-meta { text-align: right; font-size: 12px; color: var(--muted); line-height: 1.6 }
.header-meta a { color: var(--blue); text-decoration: none; font-weight: 500 }

.page-wrap { max-width: 880px; margin: 0 auto; padding: 22px 16px 52px }

.prog-info { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 18px; display: flex; align-items: flex-start; gap: 18px }
.prog-info-icon { width: 36px; height: 36px; min-width: 36px; background: #e8f5e9; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--green); font-size: 16px }
.prog-info-title { font-size: 13.5px; font-weight: 700; color: var(--dark); margin-bottom: 4px }
.prog-info-sub { font-size: 12px; color: var(--muted); margin-bottom: 10px }
.prog-tags { display: flex; flex-wrap: wrap; gap: 6px }
.prog-tag { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; border: 1px solid #d1d5db; color: var(--muted); background: #f8f9fa; display: inline-flex; align-items: center; gap: 4px }
.prog-tag.green { background: #e8f5e9; border-color: #a7d68a; color: #2e7d32 }
.prog-tag.blue { background: #e3f2fd; border-color: #90caf9; color: #1565c0 }

.fcard { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .06) }
.fcard-head { background: var(--dark); padding: 16px 22px; display: flex; align-items: center; gap: 12px }
.fcard-head .hicon { width: 40px; height: 40px; background: var(--blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; flex-shrink: 0 }
.fcard-head h1 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 2px }
.fcard-head p { font-size: 11.5px; color: #94a3b8; margin: 0 }
.fbody { padding: 22px }

.sec-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--blue-d); border-bottom: 2px solid #e8f7fd; padding-bottom: 7px; margin-bottom: 14px; display: flex; align-items: center; gap: 7px }
.sec-head i { color: var(--blue); font-size: 13px }

label.lbl { font-size: 12px; font-weight: 600; color: #374151; display: block; margin-bottom: 5px }
.req { color: #e53935; margin-left: 1px }

.form-control, .form-select { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text); border: 1px solid #d1d5db; border-radius: var(--radius); padding: 7px 10px; width: 100%; background: #fff; height: 38px; transition: border-color .15s, box-shadow .15s }
.form-control::placeholder { color: #b0b7c3; font-size: 12px }
.form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 174, 239, .12); outline: none }
.form-control.err, .form-select.err { border-color: #ef4444 }
.errmsg { font-size: 11px; color: #ef4444; margin-top: 3px; display: flex; align-items: center; gap: 4px }

.iw { position: relative }
.iw > i.ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #b0b7c3; font-size: 13px; pointer-events: none; z-index: 1 }
.iw .form-control, .iw .form-select { padding-left: 30px }

hr.div { border: none; border-top: 1px solid #f0f0f0; margin: 18px 0 }

.btn-go { background: var(--green); color: #fff; border: none; border-radius: var(--radius); font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; padding: 10px 26px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .15s }
.btn-go:hover { background: var(--green-d) }
.btn-go:disabled { opacity: .55; cursor: not-allowed }
.btn-blue { background: var(--blue); color: #fff; border: none; border-radius: var(--radius); font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; padding: 10px 26px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .15s }
.btn-blue:hover { background: var(--blue-d) }
.btn-clr { background: transparent; color: var(--muted); border: 1px solid #d1d5db; border-radius: var(--radius); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; padding: 10px 20px; cursor: pointer; transition: all .15s }
.btn-clr:hover { border-color: #9ca3af; color: var(--text) }

.a-ok { background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 4px solid var(--green); border-radius: var(--radius); color: #166534; padding: 13px 16px; font-size: 13px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px }
.a-err { background: #fff5f5; border: 1px solid #fecaca; border-left: 4px solid #ef4444; border-radius: var(--radius); color: #991b1b; padding: 13px 16px; font-size: 13px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px }

.fcard-foot { background: #fafafa; border-top: 1px solid var(--border); padding: 11px 22px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: var(--muted) }
.fcard-foot a { color: var(--blue); text-decoration: none }
.site-foot { text-align: center; font-size: 12px; color: var(--muted); margin-top: 20px; padding: 0 16px }

/* ── Fee & payment panel (admission.php Part B) ── */
.fee-box { background: #f8fafc; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px }
.fee-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 5px 0; color: var(--text) }
.fee-row .lab { color: var(--muted) }
.fee-row.disc { color: #16a34a }
.fee-row.tot { border-top: 1px dashed #cbd5e1; margin-top: 6px; padding-top: 10px; font-weight: 700; font-size: 14px }
.fee-row.adv { background: #ecfdf5; border: 1px solid #bbf7d0; border-radius: var(--radius); padding: 9px 12px; margin-top: 10px; font-weight: 700; color: #166534 }
.fee-row.bal { font-size: 12px; color: var(--muted); padding-top: 8px }

.coupon-badge { display: inline-flex; align-items: center; gap: 6px; background: #e8f5e9; border: 1px solid #a7d68a; color: #2e7d32; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 20px }
.coupon-row { display: flex; gap: 8px }
.coupon-row .form-control { text-transform: uppercase }

.mode-pills { display: flex; gap: 8px }
.mode-pill { flex: 1; border: 1.5px solid #d1d5db; border-radius: var(--radius); background: #fff; padding: 9px 10px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; text-align: center; transition: all .15s }
.mode-pill.on { border-color: var(--green); color: #2e7d32; background: #f0fdf4 }
.mode-pill .amt { display: block; font-size: 11px; font-weight: 500; margin-top: 2px }

@media(max-width:575px) {
    .header-inner { padding: 10px 16px }
    .logo-img { height: 36px }
    .header-meta { display: none }
    .fbody { padding: 14px }
    .prog-info { flex-direction: column; gap: 10px }
    .fcard-foot { flex-direction: column; text-align: center }
    .btn-go, .btn-clr, .btn-blue { width: 100%; justify-content: center }
}