/* ═══════════════════════════════════════════════════════════════════════════
   16th Child Neurocon 2027 — Design System
   AIIMS Jodhpur · Under the aegis of AOCN India

   Identity drawn from the conference marks: deep navy ink, Jodhpur-gold
   accents, a confident royal blue for actions. Warm, clinical, modern.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --brand-navy:        #16234a;   /* logo navy */
  --brand-navy-deep:   #0d162f;
  --brand-indigo:      #24377a;
  --brand-blue:        #2f62e8;   /* primary action */
  --brand-blue-hover:  #2454d6;
  --brand-blue-press:  #1c45b8;
  --brand-blue-soft:   #eaf0ff;
  --brand-blue-ring:   rgba(47, 98, 232, 0.18);

  --brand-gold:        #c78a12;   /* logo ring gold */
  --brand-gold-bright: #e8a92e;
  --brand-gold-soft:   #fdf4e0;
  --brand-ember:       #d8552a;   /* the "2027" orange */
  --brand-ember-soft:  #fdeee8;

  /* ── Ink & Surfaces ────────────────────────────────────── */
  --ink:           #131a2e;
  --ink-strong:    #0b1020;
  --ink-muted:     #5a6480;
  --ink-subtle:    #838da6;

  --surface:       #ffffff;
  --surface-sunk:  #f4f6fb;
  --surface-warm:  #faf8f4;
  --surface-raise: #ffffff;

  --line:          #e3e7f0;
  --line-strong:   #ccd3e2;

  /* ── Semantic ──────────────────────────────────────────── */
  --success:        #0f8a55;
  --success-soft:   #e7f7ef;
  --success-line:   #a8e0c4;
  --danger:         #d92d20;
  --danger-soft:    #fef1f0;
  --danger-line:    #f7bfba;
  --warning:        #b7791f;
  --warning-soft:   #fdf6e6;
  --info:           var(--brand-blue);

  /* ── Typography ────────────────────────────────────────── */
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-micro:      12px;
  --text-caption:    13px;
  --text-body-sm:    14px;
  --text-body:       15px;
  --text-body-lg:    17px;
  --text-subheading: 21px;
  --text-title:      26px;
  --text-heading-sm: 32px;
  --text-heading:    42px;
  --text-heading-lg: 56px;
  --text-display:    72px;

  /* ── Spacing ───────────────────────────────────────────── */
  --spacing-4: 4px;    --spacing-8: 8px;    --spacing-12: 12px;
  --spacing-16: 16px;  --spacing-20: 20px;  --spacing-24: 24px;
  --spacing-28: 28px;  --spacing-32: 32px;  --spacing-40: 40px;
  --spacing-48: 48px;  --spacing-64: 64px;  --spacing-80: 80px;
  --spacing-100: 100px; --spacing-120: 120px;

  /* ── Radii ─────────────────────────────────────────────── */
  --radius-cards:        22px;
  --radius-cards-sm:     16px;
  --radius-inputs:       12px;
  --radius-buttons:      999px;
  --radius-smallbuttons: 999px;
  --radius-badges:       999px;
  --radius-links:        10px;

  /* ── Elevation ─────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(19, 26, 46, 0.05);
  --shadow-sm: 0 1px 3px rgba(19, 26, 46, 0.06), 0 1px 2px rgba(19, 26, 46, 0.04);
  --shadow-md: 0 4px 12px rgba(19, 26, 46, 0.07), 0 1px 3px rgba(19, 26, 46, 0.05);
  --shadow-lg: 0 12px 32px rgba(19, 26, 46, 0.10), 0 4px 8px rgba(19, 26, 46, 0.04);
  --shadow-xl: 0 24px 56px rgba(19, 26, 46, 0.14), 0 8px 16px rgba(19, 26, 46, 0.05);
  --shadow-brand: 0 6px 18px rgba(47, 98, 232, 0.28);

  /* ── Motion ────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast:   0.14s;
  --dur-base:   0.22s;
  --dur-slow:   0.38s;

  /* ── Layout ────────────────────────────────────────────── */
  --page-max-width: 1180px;
  --card-padding: 32px;
  --nav-height: 60px;

  /* ═══ Compatibility aliases ═══
     Older markup references these names inline. Keep them pointing at the
     new palette so existing pages pick up the redesign automatically. */
  --color-primary-ink:          var(--ink);
  --color-mid-gray:             var(--ink-muted);
  --color-deep-gray:            #3d465f;
  --color-hairline:             var(--line);
  --color-canvas:               var(--surface-sunk);
  --color-paper:                var(--surface);
  --color-cool-wash:            #e8ecf5;
  --color-faded-surface:        #fafbfd;
  --color-quiet-dot:            var(--ink-subtle);
  --color-electric-blue:        var(--brand-blue);
  --color-electric-blue-hover:  var(--brand-blue-hover);
  --color-electric-blue-active: var(--brand-blue-press);
  --color-link-blue:            var(--brand-blue);
  --color-ember:                var(--brand-ember);
  --color-emerald:              var(--success);
  --color-rose:                 var(--danger);
  --gradient-primary-ink: linear-gradient(184deg, var(--ink) 20%, var(--brand-blue) 85%, var(--brand-navy) 100%);

  --accent:       var(--brand-blue);
  --accent-hover: var(--brand-blue-hover);
  --accent-light: var(--brand-blue-soft);
  --white:        var(--surface);
  --gray-50:      var(--surface-sunk);
  --gray-100:     var(--color-cool-wash);
  --gray-200:     var(--line);
  --gray-400:     var(--ink-subtle);
  --gray-500:     var(--ink-muted);
  --gray-600:     var(--color-deep-gray);
  --gray-900:     var(--ink);

  /* ═══ Legacy token compatibility ═══
     components.css and abstract.css were written against the previous design
     system. An unresolved var() invalidates its whole declaration, so without
     these the older pages lost their padding, radii and type sizes entirely.
     Each one maps onto the current scale rather than reintroducing old values. */

  /* Spacing */
  --sp-1: 4px;    --sp-2: 8px;    --sp-3: 12px;   --sp-3h: 14px;
  --sp-4: 16px;   --sp-5: 20px;   --sp-6: 24px;   --sp-8: 32px;
  --sp-10: 40px;  --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* Type scale */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   17px;
  --text-xl:   21px;
  --text-2xl:  26px;
  --text-3xl:  32px;

  /* Greys */
  --gray-25:  #fbfcfe;
  --gray-300: #c2cad9;
  --gray-700: #3d465f;
  --gray-800: #232b42;
  --gray-950: var(--ink-strong);

  /* Semantic tints */
  --success-light: var(--success-soft);
  --success-dark:  #0b6b42;
  --danger-light:  var(--danger-soft);
  --danger-dark:   #a4231a;
  --warning-light: var(--warning-soft);
  --warning-dark:  #8a5c10;
  --info-light:    var(--brand-blue-soft);

  /* Borders & surfaces */
  --border-light:     var(--line);
  --border-default:   var(--line);
  --border-strong:    var(--line-strong);
  --surface-overlay:  rgba(11, 16, 32, 0.55);

  /* Shadows */
  --shadow-2xl:        var(--shadow-xl);
  --shadow-card:       var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --shadow-accent:     var(--shadow-brand);
  --accent-glow:       var(--brand-blue-ring);
  --accent-shadow:     var(--shadow-brand);

  /* Motion */
  --transition-fast:   var(--dur-fast) var(--ease-out);
  --transition-base:   var(--dur-base) var(--ease-out);
  --transition-slow:   var(--dur-slow) var(--ease-out);
  --transition-spring: var(--dur-base) var(--ease-spring);

  /* Typography helpers */
  --tracking-tight:  -0.022em;
  --tracking-wider:  0.06em;
  --leading-relaxed: 1.65;

  /* Stacking */
  --z-sticky: 100;
  --z-modal-backdrop: 1000;
  --z-modal: 1001;
  --z-toast: 9999;
}

/* ═══════════════════════════════════════════════════════════════
   Base
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 16px);
  background-color: var(--surface);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  letter-spacing: -0.011em;
  color: var(--ink);
  background-color: var(--surface);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
}

a {
  color: var(--brand-blue);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--brand-blue-hover); text-decoration: underline; text-underline-offset: 2px; }

img { max-width: 100%; }

/* Numerals line up in every table, price and total. */
table, .price-cell, .summary-item-price, input[inputmode="numeric"] {
  font-variant-numeric: tabular-nums;
}

/* One consistent, visible keyboard focus ring everywhere. */
:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--brand-blue);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════════ */

.btn-apple-primary,
.btn-apple-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  border-radius: var(--radius-buttons);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.btn-apple-primary {
  position: relative;
  overflow: hidden;
  padding: 14px 28px;
  border: none;
  color: #fff;
  background-image: linear-gradient(180deg, #3d6ff0 0%, var(--brand-blue) 55%, #2a58d8 100%);
  box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* A soft sheen that sweeps across on hover. */
.btn-apple-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.26) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

.btn-apple-primary:hover {
  background-image: linear-gradient(180deg, #4a79f5 0%, var(--brand-blue-hover) 55%, #2b57d0 100%);
  box-shadow: 0 10px 24px rgba(47, 98, 232, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}
.btn-apple-primary:hover::after { transform: translateX(120%); }

.btn-apple-primary:active {
  transform: translateY(0) scale(0.988);
  box-shadow: 0 3px 8px rgba(47, 98, 232, 0.26);
  background-image: linear-gradient(180deg, var(--brand-blue-press) 0%, var(--brand-blue-press) 100%);
}

.btn-apple-primary:disabled {
  background-image: none;
  background-color: #dfe4ee;
  color: #98a1b8;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn-apple-primary:disabled::after { display: none; }

.btn-apple-ghost {
  padding: 13px 26px;
  background-color: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  box-shadow: var(--shadow-xs);
}

.btn-apple-ghost:hover {
  background-color: var(--surface-sunk);
  border-color: var(--ink-subtle);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.btn-apple-ghost:active { transform: translateY(0) scale(0.988); }

.btn-apple-ghost:disabled {
  color: var(--ink-subtle);
  border-color: var(--line);
  cursor: not-allowed;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   Badges
   ═══════════════════════════════════════════════════════════════ */

.badge-apple-nuevo {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-ember);
  margin-bottom: var(--spacing-12);
}

.badge-apple-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 11px;
  border-radius: var(--radius-badges);
  background-color: var(--color-cool-wash);
  color: var(--color-deep-gray);
}
.badge-apple-pill.blue    { background-color: var(--brand-blue-soft); color: var(--brand-blue); }
.badge-apple-pill.emerald { background-color: var(--success-soft);   color: var(--success); }
.badge-apple-pill.gold    { background-color: var(--brand-gold-soft); color: var(--brand-gold); }

/* ═══════════════════════════════════════════════════════════════
   Cards & bands
   ═══════════════════════════════════════════════════════════════ */

.apple-card {
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.apple-card:hover { box-shadow: var(--shadow-md); }

.apple-card-gray {
  background-color: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
}

.apple-band-white { background-color: var(--surface); }
.apple-band-gray  { background-color: var(--surface-sunk); }

/* ═══════════════════════════════════════════════════════════════
   Toasts & loading overlay
   Rendered by utils.js on every page, so they belong here rather
   than in any one page's stylesheet.
   ═══════════════════════════════════════════════════════════════ */

.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(400px, calc(100vw - 40px));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 17px;
  border-radius: 16px;
  background-color: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xl);
  animation: toastIn var(--dur-slow) var(--ease-spring);
}
.toast.success { border-left: 4px solid var(--success); }
.toast.error   { border-left: 4px solid var(--danger); }
.toast.warning { border-left: 4px solid var(--brand-gold-bright); }
.toast.info    { border-left: 4px solid var(--brand-blue); }

.toast-icon { width: 21px; height: 21px; flex-shrink: 0; margin-top: 1px; }
.toast-icon svg { width: 100%; height: 100%; }
.toast.success .toast-icon { color: var(--success); }
.toast.error   .toast-icon { color: var(--danger); }
.toast.warning .toast-icon { color: var(--brand-gold); }
.toast.info    .toast-icon { color: var(--brand-blue); }

.toast-message {
  flex: 1;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}

.toast-close {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-subtle);
  cursor: pointer;
  padding: 0 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.toast-close:hover { color: var(--ink); }

.toast-exit { animation: toastOut var(--dur-base) var(--ease-in) forwards; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(28px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(28px); }
}

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.loading-overlay.active { opacity: 1; pointer-events: auto; }

.loading-spinner,
.spinner {
  width: 42px;
  height: 42px;
  border: 3px solid var(--line);
  border-top-color: var(--brand-blue);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-text {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-deep-gray);
}

/* ═══════════════════════════════════════════════════════════════
   Utilities
   ═══════════════════════════════════════════════════════════════ */

.hidden { display: none !important; }
.text-muted { color: var(--ink-muted); }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUp { animation: fadeInUp var(--dur-slow) var(--ease-out) both; }

/* Respect the system setting — no parallax, sweeps or slides. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Numbered step chip
   The abstract sheet, the payment step and the policy clauses each
   grew their own version of this — solid blue, hairline grey and
   soft blue at three different sizes. One definition now serves all.
   ═══════════════════════════════════════════════════════════════ */
.block-num,
.policy-num,
.pay-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-image: none;
  background-color: var(--brand-blue-soft);
  border: none;
  box-shadow: none;
  color: var(--brand-blue);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}