/* =====================================================
   SEATNGA 2026 Registration Styles (Pro Revision)
   Consistent • Accessible • Responsive • Polished
===================================================== */

/* ---------- Design Tokens ---------- */
:root{
  /* Palette (AA contrast tuned) */
  --bg:#f7f9fc;
  --surface:#ffffff;
  --surface-glass:rgba(255,255,255,.92);
  --text:#0e1a2b;
  --muted:#5b6473;
  --heading:#0a1a34;
  --accent:#8b0000;
  --primary:#1d4ed8;
  --primary-600:#2563eb;
  --primary-700:#1e40af;
  --primary-light:#eef4ff;

  /* Tables */
  --thead:#0f3481;
  --thead-sub:#154aa2;
  --thead-sub-text:#eaf2ff;
  --row-alt:#f6f9ff;

  /* Lines & Elevation */
  --border:#e1e7f0;
  --border-soft:#edf1f6;
  --shadow-sm:0 1px 3px rgba(16,24,40,.06);
  --shadow-md:0 8px 24px rgba(16,24,40,.10);
  --shadow-lg:0 16px 40px rgba(16,24,40,.14);

  /* Radii */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;

  /* Spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;

  /* Type */
  --fz-xs:13px; --fz-sm:14px; --fz-md:15px; --fz-lg:17px;
  --fz-xl:clamp(22px, 2vw + 14px, 30px);
  --lh-tight:1.35; --lh:1.6; --lh-loose:1.75;

  /* Motion */
  --ease:cubic-bezier(.2,.6,.3,1);
  --dur-fast:140ms; --dur:220ms;
}

/* High contrast / Reduced motion */
@media (prefers-contrast:more){
  :root{ --border:#c8d2e0; --shadow-sm:none; --shadow-md:none; --shadow-lg:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* ---------- Base Reset ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  font-family:Inter,"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  color:var(--text); background:var(--bg); margin:0; line-height:var(--lh);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}

/* Focus ring */
:where(a,button,[role="button"],.btn,.register-btn):focus-visible{
  outline:3px solid color-mix(in oklab,var(--primary) 42%, white);
  outline-offset:3px; border-radius:calc(var(--radius-md) - 2px);
}

/* Links */
a{ color:var(--primary); text-decoration:none }
a:hover{ text-decoration:underline }

/* ---------- Layout ---------- */
.registration{ padding:var(--sp-7) var(--sp-3) var(--sp-8) }
.registration .container{ max-width:1100px; margin:0 auto }

/* OPTIONAL: make Registration page full width like Contact (uncomment below) */
/*
.registration{ padding:72px clamp(16px,4vw,48px) 88px }
.registration .container{ max-width:none; padding:0 }
*/

/* ---------- Headings ---------- */
.section-title{
  font-size:var(--fz-xl); font-weight:800; color:var(--heading);
  text-align:center; margin:0 0 var(--sp-2); letter-spacing:-.3px;
  line-height:var(--lh-tight);
}
.section-subtitle{
  font-size:var(--fz-md); color:var(--muted); text-align:center;
  margin:0 0 var(--sp-6); line-height:var(--lh-loose);
}

/* ---------- Cards ---------- */
.card{
  background:var(--surface-glass); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); overflow:hidden; margin-bottom:var(--sp-7);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg) }
.card-head{
  background:linear-gradient(180deg,#ffffff,#f4f7fb);
  border-bottom:1px solid var(--border); padding:var(--sp-4) var(--sp-5);
  font-weight:800; font-size:var(--fz-lg); color:var(--heading); letter-spacing:.1px;
}

/* ---------- Scroll wrapper ---------- */
.table-wrap{
  width:100%; overflow-x:auto; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm); border:1px solid var(--border); background:var(--surface);
}
.table-wrap:focus-within{ outline:2px dashed var(--primary); outline-offset:4px }

/* ---------- Fee Table ---------- */
.fee-table{
  width:100%; border-collapse:separate; border-spacing:0; min-width:720px;
  font-size:var(--fz-md); line-height:1.55; border-radius:var(--radius-md);
}
.fee-table thead th{
  position:sticky; top:0; z-index:2;
  background:linear-gradient(180deg,var(--thead),#0c3070);
  color:#fff; padding:var(--sp-3) var(--sp-4); font-weight:800; text-align:center;
  letter-spacing:.2px; border-right:1px solid rgba(255,255,255,.12); white-space:nowrap;
}
.fee-table thead tr:nth-child(2) th{
  background:linear-gradient(180deg,var(--thead-sub),#154a92);
  color:var(--thead-sub-text); top:44px; z-index:3;   /* ensure above first row */
}
.fee-table thead th:first-child{ text-align:left; padding-left:var(--sp-5) }

.fee-table tbody tr{ transition:background var(--dur) var(--ease) }
.fee-table tbody tr:nth-child(odd) td{ background:var(--row-alt) }
.fee-table tbody tr:hover td{ background:var(--primary-light) }

.fee-table td{
  padding:var(--sp-3) var(--sp-4); text-align:center;
  border-bottom:1px solid var(--border); border-right:1px solid var(--border);
}
.fee-table td:first-child{
  text-align:left; font-weight:700; color:var(--heading); background:#f9fbff;
}
.fee-table td:last-child, .fee-table thead th:last-child{ border-right:none }

.amount{
  color:var(--accent); font-weight:800;
  background:linear-gradient(90deg,#fff4f4,#ffffff);
  border:1px solid #f2c9c9; border-radius:10px; padding:5px 10px; display:inline-block;
}

/* ---------- Important Dates (inline) ---------- */
.dates-table{
  width:100%; border-collapse:collapse; background:#fff;
  border:1px solid rgba(36,54,88,.12); border-radius:10px; overflow:hidden;
  font-size:clamp(.92rem,1.6vw,1rem);
}
.dates-table thead th{
  background:linear-gradient(135deg,#BE2633,#243658);
  color:#fff; text-align:left; padding:12px 14px; font-weight:800; letter-spacing:.2px;
}
.dates-table tbody td{
  padding:12px 14px; color:#2d3748; border-top:1px solid rgba(36,54,88,.08);
}
.dates-table tbody tr:nth-child(even){ background:rgba(36,54,88,.03) }
.dates-table tbody tr:hover{ background:rgba(190,38,51,.06) }

@media (max-width:600px){
  .dates-table thead{ display:none }
  .dates-table, .dates-table tbody, .dates-table tr, .dates-table td{ display:block; width:100% }
  .dates-table tr{ border-bottom:1px solid rgba(36,54,88,.08) }
  .dates-table td{ padding:10px 12px }
  .dates-table td:first-child{ font-weight:800; color:#243658; padding-top:14px }
  .dates-table td:last-child{ padding-bottom:14px }
}

/* ---------- Payment Split ---------- */
.payment-split{ margin-top:var(--sp-7) }
.block-title{
  text-align:center; color:var(--heading); font-weight:900;
  font-size:20px; margin:0 0 var(--sp-4)
}
.pay-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--sp-4) }

.pay-card{
  background:#f9fbff; border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pay-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md) }
.pay-head{
  padding:var(--sp-3) var(--sp-4); background:#e8f0ff; color:#103b8a;
  font-weight:900; letter-spacing:.2px; border-bottom:1px solid #dbe7ff;
}

/* Key-value table */
.kv-table{ width:100%; border-collapse:collapse; font-size:var(--fz-sm) }
.kv-table th,.kv-table td{ padding:11px 14px; border-bottom:1px solid #e6eefc; vertical-align:top }
.kv-table th{ width:40%; background:#f4f8ff; color:#1f2937; font-weight:800 }
.kv-table tr:last-child th,.kv-table tr:last-child td{ border-bottom:none }

.pay-note{
  background:#edf4ff; color:#103b8a; padding:var(--sp-3) var(--sp-4);
  font-size:13px; border-top:1px solid #dbe7ff;
}

/* ---------- Scan & Pay (UPI) ---------- */
.scan-pay{ padding:var(--sp-4) var(--sp-4) var(--sp-2); display:grid; gap:var(--sp-3) }
.scan-title{ margin:0; font-size:16px; font-weight:900; color:var(--heading) }
.qr-wrap{
  display:grid; place-items:center; padding:var(--sp-3);
  background:#ffffff; border:1px dashed #c9d5f3; border-radius:var(--radius-md);
}
.qr-image{ width:220px; height:auto; max-width:100%; image-rendering:crisp-edges }
.upi-meta p{ margin:6px 0; font-size:var(--fz-sm); color:var(--text) }
.upi-meta strong{ color:var(--heading) }

/* ---------- Registration Link ---------- */
.single-link{ margin-top:var(--sp-7); text-align:center }
.single-link .reg-link-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:28px 24px;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.single-link .reg-link-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg) }
.single-link .label{ font-size:17px; font-weight:800; color:var(--heading); margin-bottom:14px }

/* ---------- Buttons ---------- */
.btn,.register-btn{
  display:inline-block; padding:12px 22px; border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--primary),var(--primary-600));
  color:#fff; font-weight:800; text-decoration:none;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  box-shadow:0 4px 12px rgba(29,78,216,.25);
  border:1px solid color-mix(in oklab,var(--primary) 70%, black 12%);
}
.btn:hover,.register-btn:hover{
  background:linear-gradient(135deg,var(--primary-700),var(--primary));
  transform:translateY(-2px); box-shadow:0 8px 20px rgba(29,78,216,.28);
}
.btn:active,.register-btn:active{ transform:translateY(0) }

/* ---------- Responsive ---------- */
@media (max-width:900px){ .pay-grid{ grid-template-columns:1fr } }
@media (max-width:720px){
  .registration{ padding:var(--sp-5) var(--sp-3) }
  .section-title{ font-size:20px }
  .fee-table{ min-width:950px } /* encourage horizontal scroll */
  .single-link .reg-link-card{ padding:22px 18px }
}

/* ---------- Print ---------- */
@media print{
  .btn,.register-btn{ display:none!important }
  .card,.table-wrap,.pay-card{ box-shadow:none!important }
}