:root {
    --gold:       #c9933a;
    --gold-lt:    #e5b862;
    --gold-pale:  rgba(201,147,58,0.12);
    --deep:       #111827;
    --panel:      rgba(255,255,255,0.04);
    --border:     rgba(255,255,255,0.09);
    --border-g:   rgba(201,147,58,0.30);
    --txt:        #e8e8f0;
    --txt-muted:  rgba(232,232,240,0.45);
    --green:      #34d399;
    --red:        #f87171;
    --radius:     18px;
}

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

body {
    --gold:       #c9933a;
    --gold-lt:    #e5b862;
    --gold-pale:  rgba(201,147,58,0.12);
    --border-g:   rgba(201,147,58,0.30);
    font-family: 'DM Sans', sans-serif;
    background: var(--deep);
    color: var(--txt);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px 60px;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 70% 50% at 15% 30%, rgba(201,147,58,0.10) 0%, transparent 65%),
        radial-gradient(ellipse 55% 70% at 85% 80%, rgba(59,78,120,0.18) 0%, transparent 65%);
    pointer-events: none;
}

body.theme-palakkad {
    --gold:      #c9933a;
    --gold-lt:   #e5b862;
    --gold-pale: rgba(201,147,58,0.12);
    --border-g:  rgba(201,147,58,0.30);
}

body.theme-chennai {
    --gold:      #3b82f6 !important;
    --gold-lt:   #60a5fa !important;
    --gold-pale: rgba(59,130,246,0.12) !important;
    --border-g:  rgba(59,130,246,0.30) !important;
}

body.theme-chennai::before {
    background:
        radial-gradient(ellipse 70% 50% at 15% 30%, rgba(59,130,246,0.10) 0%, transparent 65%),
        radial-gradient(ellipse 55% 70% at 85% 80%, rgba(59,78,120,0.18) 0%, transparent 65%);
}

body.theme-chennai .school-crest {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    box-shadow: 0 0 0 6px rgba(59,130,246,0.14), 0 8px 28px rgba(59,130,246,0.35);
}

.page-wrap {
    position: relative; z-index: 1;
    width: 100%; max-width: 560px;
    display: flex; flex-direction: column; gap: 28px;
}

.school-header {
    text-align: center;
    animation: fadeDown .6s ease both;
}
.school-crest {
    width: 68px; height: 68px;
    background: linear-gradient(135deg, var(--gold), var(--gold-lt));
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 30px; margin-bottom: 14px;
    box-shadow: 0 0 0 6px rgba(201,147,58,0.14), 0 8px 28px rgba(201,147,58,0.35);
    animation: crestPulse 3s ease-in-out infinite;
}
@keyframes crestPulse {
    0%,100% { box-shadow: 0 0 0 6px rgba(201,147,58,0.14), 0 8px 28px rgba(201,147,58,0.35); }
    50%      { box-shadow: 0 0 0 10px rgba(201,147,58,0.08), 0 8px 36px rgba(201,147,58,0.55); }
}
.school-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.55rem; font-weight: 700;
    color: #fff; letter-spacing: .03em;
}
.school-sub {
    font-size: .75rem; font-weight: 400;
    color: var(--gold-lt); letter-spacing: .14em;
    text-transform: uppercase; margin-top: 4px;
}

.timeline-rail {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 28px;
    animation: fadeDown .6s .1s ease both;
}
.timeline {
    display: flex; align-items: flex-start;
    position: relative;
}
/* connecting line */
.timeline::before {
    content: '';
    position: absolute;
    top: 18px; left: 18px;
    width: calc(100% - 36px); height: 2px;
    background: var(--border);
    z-index: 0;
}
.tl-progress {
    position: absolute;
    top: 18px; left: 18px;
    height: 2px; z-index: 1;
    background: linear-gradient(90deg, var(--gold), var(--gold-lt));
    transition: width .6s cubic-bezier(.4,0,.2,1);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(201,147,58,0.5);
}
.tl-step {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 8px; position: relative; z-index: 2;
}
.tl-dot {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 600;
    border: 2px solid var(--border);
    background: var(--deep);
    color: var(--txt-muted);
    transition: all .4s ease;
}
.tl-dot.done {
    background: var(--gold);
    border-color: var(--gold);
    color: #111; font-size: .9rem;
}
.tl-dot.active {
    border-color: var(--gold);
    color: var(--gold);
    background: var(--gold-pale);
    box-shadow: 0 0 0 4px rgba(201,147,58,.15);
}
.tl-label {
    font-size: .68rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--txt-muted); text-align: center;
    transition: color .4s;
}
.tl-label.active { color: var(--gold-lt); }
.tl-label.done   { color: var(--green); }

.main-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    backdrop-filter: blur(16px);
    box-shadow: 0 32px 64px rgba(0,0,0,.45);
    animation: fadeUp .55s .15s ease both;
}
.card-top {
    background: linear-gradient(135deg, rgba(201,147,58,.18) 0%, rgba(22,33,62,.25) 100%);
    border-bottom: 1px solid var(--border-g);
    padding: 24px 32px 20px;
}
.card-top-title {
    font-size: .72rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--gold-lt); margin-bottom: 4px;
}
.card-top-sub {
    font-size: 1.05rem; font-weight: 600; color: #fff;
}
.card-body-inner { padding: 28px 32px; }

.step { display: none; }
.step.active { display: block; animation: stepIn .4s ease both; }

@keyframes stepIn {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
}

.field-group { margin-bottom: 20px; }
.field-label {
    font-size: .72rem; font-weight: 500; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gold-lt);
    display: block; margin-bottom: 8px;
}
.field-label .req { color: var(--red); margin-left: 3px; }
.field-label .opt { color: var(--txt-muted); font-style: italic; font-size: .68rem; text-transform: none; }

.input-icon-wrap { position: relative; }
.input-icon-wrap .icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--gold); font-size: 1rem; pointer-events: none;
}
.field-input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    color: var(--txt);
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem; font-weight: 500;
    padding: 14px 16px 14px 46px;
    transition: border-color .25s, box-shadow .25s, background .25s;
    outline: none;
}
.field-input.no-icon { padding-left: 16px; }
.field-input:focus {
    border-color: var(--gold);
    background: rgba(201,147,58,.06);
    box-shadow: 0 0 0 4px rgba(201,147,58,.13);
}
.field-input[readonly] {
    cursor: not-allowed;
    color: rgba(232,232,240,.7);
    border-color: rgba(255,255,255,.05);
    background: rgba(255,255,255,.025);
}
.field-input::placeholder { color: rgba(255,255,255,.22); }

.field-row { display: grid; gap: 16px; }
.field-row.col2 { grid-template-columns: 1fr 1fr; }
.field-row.col3-1 { grid-template-columns: 2fr 1fr; }

.amount-box {
    background: linear-gradient(135deg, rgba(201,147,58,.18), rgba(201,147,58,.06));
    border: 1px solid var(--border-g);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px;
}
.amount-label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--gold-lt); margin-bottom: 4px;
}
.amount-value {
    font-family: 'Playfair Display', serif;
    font-size: 1.9rem; font-weight: 700;
    color: #fff; letter-spacing: .02em;
}
.amount-currency {
    font-size: .9rem; font-weight: 400;
    color: var(--gold-lt); vertical-align: super;
    margin-right: 4px;
}
.amount-icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(201,147,58,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: var(--gold);
}

.info-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(52,211,153,.1);
    border: 1px solid rgba(52,211,153,.25);
    color: var(--green); border-radius: 100px;
    font-size: .74rem; font-weight: 500; padding: 5px 12px;
    margin-bottom: 20px;
}

.btn-gold {
    width: 100%;
    background: linear-gradient(135deg, var(--gold), var(--gold-lt));
    border: none; border-radius: 12px;
    color: #111; font-family: 'DM Sans', sans-serif;
    font-size: .9rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 16px; cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    position: relative; overflow: hidden;
}
.btn-gold::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.22), transparent);
    opacity: 0; transition: opacity .25s;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(201,147,58,.4); }
.btn-gold:hover::after { opacity: 1; }
.btn-gold:active { transform: none; }
.btn-gold:disabled { opacity: .55; transform: none; cursor: not-allowed; }

.btn-ghost {
    width: 100%; background: transparent;
    border: 1.5px solid var(--border);
    border-radius: 12px; color: var(--txt-muted);
    font-family: 'DM Sans', sans-serif;
    font-size: .85rem; font-weight: 500;
    padding: 13px; cursor: pointer;
    transition: border-color .2s, color .2s;
    margin-top: 10px;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-lt); }

.alert-custom {
    border-radius: 10px; padding: 12px 16px;
    font-size: .8rem; display: none; margin-bottom: 16px;
    display: flex; align-items: flex-start; gap: 10px;
}
.alert-error {
    background: rgba(248,113,113,.08);
    border: 1px solid rgba(248,113,113,.3);
    color: var(--red);
}
.alert-info {
    background: rgba(201,147,58,.08);
    border: 1px solid rgba(201,147,58,.25);
    color: var(--gold-lt);
}
.note-box {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 16px;
    font-size: .75rem; line-height: 1.65;
    color: var(--txt-muted); margin-top: 18px;
    display: flex; gap: 10px;
}
.note-box i { flex-shrink: 0; color: var(--gold); margin-top: 2px; }

.divider {
    display: flex; align-items: center; gap: 12px; margin: 20px 0;
}
.divider hr { flex: 1; border: none; border-top: 1px solid var(--border); }
.divider span { font-size: .68rem; color: var(--txt-muted); white-space: nowrap; }

.security-strip {
    border-top: 1px solid var(--border);
    padding: 14px 32px 18px;
    display: flex; align-items: center; justify-content: center; gap: 18px;
}
.sec-item {
    display: flex; align-items: center; gap: 6px;
    font-size: .68rem; color: var(--txt-muted); letter-spacing: .04em;
}
.sec-item i { color: var(--green); }

.spinner-sm {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(17,24,39,.4);
    border-top-color: #111;
    animation: spin .7s linear infinite;
    display: inline-block; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    .card-body-inner { padding: 20px; }
    .card-top { padding: 18px 20px; }
    .security-strip { flex-wrap: wrap; gap: 12px; padding: 12px 20px 16px; }
    .field-row.col2,
    .field-row.col3-1 { grid-template-columns: 1fr; }
    .timeline-rail { padding: 18px 12px; }
    .tl-label { font-size: .6rem; }
}