/* Professional single-column form UI */
:root{
  --bg: #eef5fb;
  --card: #ffffff;
  --muted: #6b7280;
  --accent: #0066ff;
  --accent-2: #054ab2;
  --glass: rgba(255,255,255,0.6);
  --radius: 14px;
  --shadow: 0 12px 40px rgba(7,13,34,0.08);
  --max: 1040px;
}
*{box-sizing:border-box;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#f7fbff 0%, #eef5fb 60%);color:#07203a}
.wrapper{min-height:100%;display:flex;flex-direction:column}
.header{padding:20px 16px}
.header-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:64px;height:64px;object-fit:cover;border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.06)}
.brand-text .univ{font-weight:800;font-size:18px;color:#062041}
.brand-text .svc{font-size:13px;color:var(--muted)}
.header .notice{font-size:13px;color:var(--muted)}

.main{padding:18px;flex:1}
.container{max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;gap:18px}

/* main form card */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.form-card .form-title{margin:0;font-size:20px;font-weight:800;color:#062041}
.form-card .lead{margin:6px 0 18px 0;color:var(--muted);font-size:14px}

/* layout */
.grid{display:grid;grid-template-columns:1fr 380px;gap:20px;align-items:start}
@media(max-width:980px){.grid{grid-template-columns:1fr}}
.col-left{display:flex;flex-direction:column;gap:12px}
.col-right{display:flex;flex-direction:column;gap:12px}

/* inputs */
.label{font-size:13px;font-weight:700;color:#0b2540;margin-bottom:6px}
.input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #e6eef7;background:#fff;font-size:14px;outline:none}
.input:focus{box-shadow:0 6px 18px rgba(11,105,255,0.08);border-color:var(--accent)}
.row{display:flex;gap:10px}
.row .input{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:700}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-2)}
.btn-light{background:#f5f8ff;border:1px solid #e7eefc;color:#06306f}
.btn-pay{background:linear-gradient(90deg,var(--accent),#2b7bff);color:#fff;padding:12px;border-radius:12px;width:100%;font-size:15px}
.btn-pay:hover{filter:brightness(.98)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.two-col{grid-template-columns:1fr}}

/* subjects list */
.sub-title{margin:8px 0 6px 0;font-size:15px;font-weight:700}
.subjects{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto;padding-right:6px}
.subject-item{display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:10px;border:1px solid #eef4fb;background:#fff;box-shadow:0 2px 6px rgba(9,20,40,0.02)}
.subject-meta{display:flex;flex-direction:column}
.subject-meta .name{font-weight:700}
.subject-meta .meta{font-size:13px;color:var(--muted)}

/* right summary */
.summary-card{background:#dff7ff;border-radius:12px;padding:14px;border:1px solid #eef6ff}
.summary-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sm-title{font-weight:700;font-size:14px}
.student-info{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.info-row{display:flex;justify-content:space-between;font-size:14px}
.info-label{color:var(--muted);font-size:13px}
.info-val{font-weight:700;color:#062041}

/* fees */
.fee-box{background:#f8fbff;border-radius:10px;padding:10px;border:1px solid #eaf3ff;margin-bottom:12px}
.fee-row{display:flex;justify-content:space-between;padding:6px 0}
.fee-row.total{font-size:16px;font-weight:800}
.fw{font-weight:800}

.divider{height:1px;background:linear-gradient(90deg,#eef4fb,#ffffff);margin:8px 0}

/* bottom actions */
.pay-actions{display:flex;flex-direction:column;gap:10px}
.pay-actions .btn-light{width:100%}

/* info card below */
.info-card{padding:16px}
.info-list{margin:8px 0 0 18px;color:var(--muted)}

/* small helpers */
.small-muted{font-size:13px;color:var(--muted)}
.req{color:#d43f3a;margin-left:4px}
.spacer{height:6px}
.footer{padding:18px;text-align:center;color:var(--muted);font-size:13px}

/* responsive tweaks */
@media(max-width:640px){
  .brand-logo{width:52px;height:52px}
  .grid{gap:12px}
  .col-right{order:2}
}


/* HEADER BASE */
.site-header {
    width: 100%;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    color: black;
    position: sticky;
    top: 0;
    z-index: 999;
    padding: 0.4rem 0;
}

/* Container */
.nav-container {
    max-width: 1400px;
    margin: auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* LEFT SIDE (Logo + Title) */
.nav-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nav-left img {
    background: white;
    border-radius: 50%;
}

.nav-logo {
    width: 48px;
    height: 48px;
}

.nav-title .uni {
    font-size: 20px;
    font-weight: 700;
}

.nav-title .portal {
    font-size: 13px;
    opacity: 0.9;
}

/* RIGHT SIDE NAV */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav-menu a {
    color: black;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s;
}

.nav-menu a:hover {
    opacity: 0.8;
}

/* Special Button */
.btn-nav {
    padding: 6px 14px;
    background:#cce8e9bd;
    color: #0466d4 !important;
    border-radius: 6px;
    font-weight: 600;
}

/* MOBILE TOGGLE BUTTON */
.nav-toggle {
    display: none;
    background: transparent;
    color: black;
    font-size: 28px;
    border: none;
    cursor: pointer;
}

/* MOBILE MENU (Hidden by default) */
.mobile-menu {
    display: none;
    flex-direction: column;
    background: #fff;
    color: #333;
    padding: 12px 20px;
}

.mobile-menu a {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    color: #0466d4;
    text-decoration: none;
    font-weight: 500;
}

.mobile-menu .btn-nav {
    background: #0466d4;
    color: white !important;
    text-align: center;
    margin-top: 6px;
}

/* ==== RESPONSIVE STYLES ==== */
@media (max-width: 900px) {

    .nav-menu {
        display: none;
    }

    .nav-toggle {
        display: block;
    }

    body.nav-open .mobile-menu {
        display: flex;
    }
}