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

:root {
    --navy:          #0d1f3c;
    --royal:         #1a3a6b;
    --royal-light:   #2a5298;
    --gold:          #c9a84c;
    --gold-light:    #e8c97a;
    --cream:         #faf8f4;
    --white:         #ffffff;
    --text-dark:     #1a1a2e;
    --text-mid:      #4a5568;
    --text-light:    #718096;
    --border:        #ddd9d0;
    --border-focus:  #1a3a6b;
    --error:         #c0392b;
    --error-bg:      #fff5f5;
    --success:       #1e6e3a;
    --input-bg:      #f8f7f5;
    --shadow-lg:     0 20px 60px rgba(13,31,60,0.16);
}

body {
    font-family: 'DM Sans', sans-serif;
    background-color: var(--cream);
    background-image:
        radial-gradient(ellipse at 15% 0%, rgba(201,168,76,0.13) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 100%, rgba(26,58,107,0.11) 0%, transparent 50%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 36px 16px 56px;
}

/* ── Card ── */
.card {
    max-width: 560px;
    width: 100%;
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: riseIn 0.55s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes riseIn {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ── */
.card-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--royal) 100%);
    padding: 30px 32px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.card-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 36px,
        rgba(201,168,76,0.04) 36px,
        rgba(201,168,76,0.04) 72px
    );
}

.card-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    position: relative;
}

.logo-wrap img {
    width: clamp(140px, 80vw, 160px);
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 10px;
}

.card-header h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.1rem, 3.5vw, 1.45rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.25;
    position: relative;
    letter-spacing: 0.01em;
    margin-bottom: 5px;
}

.card-header .faculty {
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255,255,255,0.72);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 10px;
}

.date-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(201,168,76,0.18);
    border: 1px solid rgba(201,168,76,0.4);
    border-radius: 20px;
    padding: 4px 14px;
    position: relative;
}

.date-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.date-badge span {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gold-light);
    letter-spacing: 0.05em;
}

/* ── Form Body ── */
.card-body {
    padding: 28px 32px 32px;
}

.form-section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--royal);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background: var(--gold);
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Form Group ── */
.form-group {
    margin-bottom: 16px;
    animation: fadeUp 0.4s ease both;
}

.form-group:nth-child(1)  { animation-delay: 0.05s; }
.form-group:nth-child(2)  { animation-delay: 0.08s; }
.form-group:nth-child(3)  { animation-delay: 0.11s; }
.form-group:nth-child(4)  { animation-delay: 0.14s; }
.form-group:nth-child(5)  { animation-delay: 0.17s; }
.form-group:nth-child(6)  { animation-delay: 0.20s; }
.form-group:nth-child(7)  { animation-delay: 0.23s; }
.form-group:nth-child(8)  { animation-delay: 0.26s; }
.form-group:nth-child(9)  { animation-delay: 0.29s; }
.form-group:nth-child(10) { animation-delay: 0.32s; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.form-group label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--royal);
    margin-bottom: 5px;
    letter-spacing: 0.02em;
}

/* Django renders inputs as .form-control or bare inputs/selects/textareas */
.form-group input,
.form-group select,
.form-group textarea,
.form-group .form-control {
    width: 100%;
    padding: 9px 13px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    color: var(--text-dark);
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    appearance: none;
    -webkit-appearance: none;
}

.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a3a6b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-group .form-control:focus {
    border-color: var(--border-focus);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(26,58,107,0.1);
}

/* ── Error ── */
.error-message {
    font-size: 0.7rem;
    color: var(--error);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.error-message::before {
    content: '⚠';
    font-size: 0.65rem;
}

.form-group input.error,
.form-group select.error,
.form-group textarea.error {
    border-color: var(--error);
    background: var(--error-bg);
}

/* ── Django messages ── */
.messages {
    margin-bottom: 18px;
}

.alert {
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.alert-success {
    background: rgba(30,110,58,0.08);
    border-color: rgba(30,110,58,0.25);
    color: var(--success);
}

.alert-danger, .alert-error {
    background: rgba(192,57,43,0.07);
    border-color: rgba(192,57,43,0.25);
    color: var(--error);
}

/* ── Submit Button ── */
.btn-submit {
    width: 100%;
    margin-top: 6px;
    padding: 13px 24px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--royal) 100%);
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    box-shadow: 0 4px 16px rgba(13,31,60,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    animation: fadeUp 0.4s 0.35s ease both;
}

.btn-submit svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-submit:hover {
    background: linear-gradient(135deg, #162e55 0%, #234e8f 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(13,31,60,0.38);
}

.btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(13,31,60,0.25);
}

/* ── Note ── */
.form-note {
    text-align: center;
    margin-top: 14px;
    font-size: 0.65rem;
    color: var(--text-light);
    animation: fadeUp 0.4s 0.4s ease both;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    body { padding: 20px 10px 44px; }

    .card-header { padding: 22px 20px 18px; }
    .card-body   { padding: 20px 18px 24px; }

    .card-header h2 { font-size: 1.05rem; }

    .form-group label        { font-size: 0.7rem; }
    .form-group input,
    .form-group select,
    .form-group textarea,
    .form-group .form-control { font-size: 0.8rem; padding: 8px 11px; }

    .btn-submit { font-size: 0.8rem; padding: 12px 18px; }
}

/* ── Fee Type checkboxes (re-themed) ── */
.fee-checkbox-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--royal);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.fee-checkbox {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 1fr);
    gap: 10px;
    margin-top: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.checkbox-item:hover {
    border-color: var(--royal-light);
    background: var(--white);
}

.checkbox-item:has(input:checked) {
    border-color: var(--royal);
    background: rgba(26,58,107,0.06);
    box-shadow: 0 0 0 3px rgba(26,58,107,0.08);
}

/* Custom checkbox with a visible checkmark */
.checkbox-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid var(--border);
    border-radius: 5px;
    background-color: var(--white);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
    transition: background-color 0.2s, border-color 0.2s;
}

.checkbox-item input[type="checkbox"]:checked {
    background-color: var(--royal);
    border-color: var(--royal);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 4.5'/%3E%3C/svg%3E");
}

.checkbox-item input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(26,58,107,0.2);
}

@media (max-width: 480px) {
    .fee-checkbox { grid-auto-columns: minmax(112px, 1fr); }
    .checkbox-item { font-size: 0.76rem; padding: 8px 10px; gap: 7px; }
    .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; }
}

/* ── Fee receipt link ── */
.receipt-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding: 11px 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    color: var(--royal);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    animation: fadeUp 0.4s 0.4s ease both;
}

.receipt-link:hover {
    border-color: var(--gold);
    background: rgba(201,168,76,0.08);
    color: var(--navy);
}

.receipt-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}