/* ================================================
   SPECTRE ACADEMY - STUDENT ADMISSION PORTAL
   style.css

   TABLE OF CONTENTS:
   1.  CSS Custom Properties (Design Tokens)
   2.  Reset & Base
   3.  Typography
   4.  Site Header
   5.  Portal Layout
   6.  Side Panel (desktop)
   7.  Progress Bar
   8.  Step Indicator Dots
   9.  Form Steps (show/hide)
   10. Step Header
   11. Form Grid & Groups
   12. Input Styles
   13. Buttons
   14. AI Helper
   15. Review Screen (Step 4)
   16. Declaration / Checkbox
   17. Success Screen
   18. Footer
   19. Animations
   20. Print Styles
   21. Media Queries
================================================ */


/* ================================================
   1. CSS CUSTOM PROPERTIES
   FIX #15: Removed unused --sp-1 variable.
   Retained only tokens that are actually referenced.
================================================ */
:root {
  --teal-900:   #050913;
  --teal-800:   #10182e;
  --teal-700:   #182849;
  --teal-500:   #1d4f74;
  --teal-300:   #7edcf8;
  --teal-100:   #e8f7ff;

  --amber-600:  #4fd9ff;
  --amber-500:  #6ef2ff;
  --amber-300:  #d8fbff;
  --amber-100:  #effcff;

  --ink:        #09111f;
  --ink-mid:    #374151;
  --muted:      #6b7280;
  --border:     #d9e6f3;
  --surface:    #f2f7fb;
  --white:      #ffffff;

  --error:      #dc2626;
  --error-bg:   #fef2f2;
  --success:    #059669;

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', 'Segoe UI', sans-serif;

  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  --shadow-sm: 0 1px 4px rgba(5,9,19,0.08);
  --shadow-md: 0 4px 16px rgba(5,9,19,0.12);
  --shadow-lg: 0 12px 40px rgba(5,9,19,0.18);
  --shadow-xl: 0 24px 64px rgba(5,9,19,0.22);

  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  --t:      0.22s ease;
  --t-slow: 0.4s ease;

  --header-h:  64px;
  --sidebar-w: 300px;
}


/* ================================================
   2. RESET & BASE
================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background:
    radial-gradient(circle at top, rgba(110,242,255,0.15), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, var(--surface) 22%, #eef4fb 100%);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

ul  { list-style: none; }
a   { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: var(--font-body); }


/* ================================================
   3. TYPOGRAPHY
================================================ */
h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
  color: var(--ink);
}
h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  line-height: 1.25;
}
h3 { font-size: 1.05rem; font-weight: 600; }


/* ================================================
   4. SITE HEADER
================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--header-h);
  background: linear-gradient(135deg, #050913 0%, #10182e 60%, #152443 100%);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.header-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--sp-6);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--white);
}

.logo-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(110,242,255,0.18);
}

.logo-mark img {
  width: 100%;
  height: 100%;
}

.logo strong { display: block; font-size: 0.95rem; }
.logo small  { display: block; font-size: 0.7rem; color: var(--teal-300); letter-spacing: 0.06em; text-transform: uppercase; }

.header-badge {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber-300);
  border: 1px solid rgba(110,242,255,0.24);
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-full);
  background: rgba(110,242,255,0.08);
}


/* ================================================
   5. PORTAL LAYOUT
================================================ */
.portal-wrapper {
  flex: 1;
  display: flex;
  max-width: 1160px;
  width: 100%;
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-6);
  gap: var(--sp-8);
  align-items: flex-start;
}


/* ================================================
   6. SIDE PANEL (desktop only)
================================================ */
.side-panel {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-h) + var(--sp-8));
  background:
    radial-gradient(circle at top right, rgba(110,242,255,0.18), transparent 34%),
    linear-gradient(160deg, #10182e 0%, #0b1222 55%, #050913 100%);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  color: var(--white);
}

.side-content { padding: var(--sp-8); }

.side-title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: var(--sp-4);
}

.side-title em { color: var(--amber-300); font-style: italic; }

.side-desc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin-bottom: var(--sp-8);
}

.side-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}

.side-step {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  transition: all var(--t);
  border: 1px solid transparent;
}

.side-step.active {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
}

.side-step-num {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--teal-300);
  background: rgba(255,255,255,0.08);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--t);
}

.side-step.active .side-step-num {
  background: var(--amber-500);
  color: var(--teal-900);
}

.side-step.completed .side-step-num {
  background: rgba(240,165,0,0.25);
  color: var(--amber-300);
}

.side-step-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}

.side-step.active .side-step-label { color: var(--white); font-weight: 600; }

.side-note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.side-note-icon { font-size: 1rem; }


/* ================================================
   7. PROGRESS BAR
================================================ */
.form-panel {
  flex: 1;
  min-width: 0;
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.progress-wrapper {
  padding: var(--sp-4) var(--sp-8);
  background: var(--teal-900);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.progress-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: var(--r-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--amber-500), var(--amber-300));
  border-radius: var(--r-full);
  width: 25%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* ================================================
   8. STEP INDICATOR DOTS
================================================ */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-8);
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.dot-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t);
  position: relative;
  z-index: 1;
}

.step-dot.active .dot-num {
  background: var(--teal-800);
  border-color: var(--teal-800);
  color: var(--white);
  box-shadow: 0 0 0 4px rgba(13,79,79,0.15);
}

.step-dot.completed .dot-num {
  background: var(--amber-500);
  border-color: var(--amber-500);
  color: var(--teal-900);
  font-weight: 700;
}

/* Show checkmark; hide number in completed dots */
.step-dot.completed .dot-num::after { content: '✓'; font-size: 0.85rem; }
.step-dot.completed .dot-num span   { display: none; }

.dot-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: color var(--t);
}

.step-dot.active .dot-label    { color: var(--teal-700); }
.step-dot.completed .dot-label { color: var(--amber-600); }

.step-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 var(--sp-2);
  margin-bottom: var(--sp-5);
  transition: background var(--t-slow);
  max-width: 80px;
}

.step-connector.done { background: var(--amber-500); }


/* ================================================
   9. FORM STEPS
   Only .active is shown. No .slide-out class needed
   since we removed that dead animation from JS.
================================================ */
.form-step        { display: none; padding: var(--sp-8); animation: stepIn 0.35s ease both; }
.form-step.active { display: block; }
#stepSuccess      { padding: var(--sp-12) var(--sp-8); }


/* ================================================
   10. STEP HEADER
================================================ */
.step-header {
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border);
}

.step-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-500);
  background: var(--teal-100);
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-3);
}

.step-title    { margin-bottom: var(--sp-2); }
.step-subtitle { color: var(--muted); font-size: 0.92rem; max-width: 520px; margin-bottom: 0; }


/* ================================================
   11. FORM GRID & GROUPS
================================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
}

.form-group.full-width { grid-column: 1 / -1; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form-label  { font-size: 0.85rem; font-weight: 600; color: var(--ink-mid); }
.req         { color: var(--error); margin-left: 2px; }
.opt         { font-weight: 400; color: var(--muted); font-size: 0.78rem; }
.field-hint  { font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; }
.field-error { font-size: 0.78rem; font-weight: 600; color: var(--error); min-height: 1em; display: block; }
.field-error.visible { animation: shake 0.4s ease; }


/* ================================================
   12. INPUT STYLES
   FIX #14: Removed broken date input placeholder rule
   `input[type="date"]:not([value]):not(:focus)` — the
   [value] attribute selector doesn't update dynamically
   for date inputs, so that rule never matched correctly.
================================================ */
.form-input {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  transition: border-color var(--t), box-shadow var(--t);
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 4px rgba(26,144,144,0.1);
}

.form-input:hover:not(:focus) { border-color: var(--teal-300); }
.form-input.invalid { border-color: var(--error); background: var(--error-bg); }
.form-input.invalid:focus { box-shadow: 0 0 0 4px rgba(220,38,38,0.1); }
.form-input.valid   { border-color: var(--success); }

.form-textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
}

.form-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='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}


/* ================================================
   13. BUTTONS
================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.7rem 1.6rem;
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  font-weight: 600;
  border: 2px solid transparent;
  transition: all var(--t);
  cursor: pointer;
  letter-spacing: 0.02em;
  justify-content: center;
  white-space: nowrap;
}

.btn-next {
  background: var(--teal-800);
  color: var(--white);
  border-color: var(--teal-800);
}
.btn-next:hover {
  background: var(--teal-700);
  border-color: var(--teal-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-back {
  background: transparent;
  color: var(--ink-mid);
  border-color: var(--border);
}
.btn-back:hover {
  background: var(--surface);
  border-color: var(--teal-300);
  color: var(--teal-700);
}

.btn-submit {
  background: linear-gradient(135deg, var(--amber-500), var(--amber-600));
  color: var(--teal-900);
  border-color: var(--amber-500);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.8rem 2rem;
}
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(240,165,0,0.35);
}
.btn-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-outline {
  background: transparent;
  color: var(--teal-700);
  border-color: var(--teal-300);
}
.btn-outline:hover { background: var(--teal-100); }

.btn-arrow { font-size: 1rem; transition: transform var(--t); }
.btn-next:hover .btn-arrow { transform: translateX(3px); }
.btn-back:hover .btn-arrow { transform: translateX(-3px); }

/* Form action row: space-between by default */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}

/* FIX #17: Step 1 only has one button — align it to the right without an empty span */
.form-actions--end { justify-content: flex-end; }


/* ================================================
   14. AI HELPER
================================================ */
.ai-helper {
  background: var(--teal-900);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}

.ai-helper-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ai-icon { color: var(--amber-300); font-size: 0.9rem; }

.ai-helper-header strong {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ai-helper-body {
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.ai-idle { color: rgba(255,255,255,0.35); font-size: 0.82rem; font-style: italic; margin: 0; }

.ai-suggestion {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  animation: slideIn 0.3s ease both;
}

.ai-suggestion-icon  { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }

.ai-suggestion-text {
  font-size: 0.83rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  margin: 0;
}

.ai-suggestion-text strong {
  display: block;
  font-size: 0.8rem;
  color: var(--amber-300);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ai-all-good {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: #6ee7b7;
  font-size: 0.85rem;
  font-weight: 600;
}


/* ================================================
   15. REVIEW SCREEN (Step 4)
   FIX #12: Replaced fragile :nth-last-child(-n+2)
   border removal with a simpler approach — borders
   are drawn via row-gap and a top border on each
   field instead, making it robust for any field count
   and full-width fields in any position.
================================================ */
.review-container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.review-section {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.review-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.review-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-700);
}

.review-edit-btn {
  font-size: 0.78rem;
  color: var(--teal-500);
  font-weight: 600;
  background: none;
  border: 1px solid var(--teal-300);
  border-radius: var(--r-sm);
  padding: 0.2rem 0.7rem;
  cursor: pointer;
  transition: all var(--t);
}
.review-edit-btn:hover { background: var(--teal-100); color: var(--teal-800); }

.review-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/* Each field has a top border — far more reliable than nth-child bottom borders */
.review-field {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
}

/* Remove top border from the very first row (first two fields) */
.review-field:first-child,
.review-field:nth-child(2):not(.full) {
  border-top: none;
}

/* Right border on odd (left-column) fields, unless they are full-width */
.review-field:not(.full):nth-child(odd) {
  border-right: 1px solid var(--border);
}

/* Full-width fields span both columns */
.review-field.full {
  grid-column: 1 / -1;
  border-right: none;
}

/* If a full-width field is the first child, remove its top border too */
.review-field.full:first-child { border-top: none; }

.review-field-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.review-field-value { font-size: 0.9rem; color: var(--ink); font-weight: 500; word-break: break-word; }
.review-field-value.empty { color: var(--muted); font-style: italic; font-weight: 400; }


/* ================================================
   16. DECLARATION / CHECKBOX
================================================ */
.declaration-box {
  background: var(--amber-100);
  border: 1px solid rgba(240,165,0,0.3);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  transition: border-color var(--t);
}

.checkbox-label {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid var(--amber-600);
  border-radius: 4px;
  background: var(--white);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
  background: var(--amber-500);
  border-color: var(--amber-500);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
  content: '✓';
  color: var(--teal-900);
  font-size: 0.75rem;
  font-weight: 700;
}

.checkbox-label span:last-child { font-size: 0.88rem; color: var(--ink-mid); line-height: 1.6; }


/* ================================================
   17. SUCCESS SCREEN
================================================ */
.success-screen {
  text-align: center;
  max-width: 520px;
  margin-inline: auto;
}

.success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  color: var(--white);
  font-size: 2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-6);
  box-shadow: 0 8px 32px rgba(14,99,99,0.35);
  animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.success-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--teal-800);
  margin-bottom: var(--sp-4);
}

.success-message { color: var(--muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: var(--sp-6); }

.reference-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  background: var(--teal-900);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-8);
  margin-bottom: var(--sp-6);
}

.reference-label  { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal-300); }
.reference-number { font-family: var(--font-display); font-size: 1.6rem; color: var(--amber-300); letter-spacing: 0.05em; }

.success-note { font-size: 0.82rem; color: var(--muted); line-height: 1.7; margin-bottom: var(--sp-8); }

.success-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }


/* ================================================
   18. FOOTER
================================================ */
.site-footer {
  background: var(--teal-900);
  color: rgba(255,255,255,0.5);
  padding: var(--sp-5) var(--sp-6);
  margin-top: auto;
}

.footer-inner {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: 0.8rem;
}

.footer-link { color: var(--amber-300); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: color var(--t); }
.footer-link:hover { color: var(--white); }


/* ================================================
   19. ANIMATIONS
   FIX #13: Removed the dead .slide-out rule and
   its associated @keyframes stepOut — the class
   was defined in CSS but never applied by JavaScript.
================================================ */
@keyframes stepIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}


/* ================================================
   20. PRINT STYLES
================================================ */
@media print {
  .site-header, .site-footer, .side-panel, .form-actions,
  .ai-helper, .progress-wrapper, .step-indicator, .success-actions {
    display: none !important;
  }
  .portal-wrapper { padding: 0; }
  .form-panel     { box-shadow: none; border-radius: 0; }
  .form-step.active { padding: 1rem; }
  .review-section { break-inside: avoid; }
}


/* ================================================
   21. MEDIA QUERIES
================================================ */

/* Tablet (≤ 960px) */
@media (max-width: 960px) {
  .side-panel    { display: none; }
  .portal-wrapper { padding: var(--sp-4); }
  .form-panel    { border-radius: var(--r-lg); }
}

/* Mobile (≤ 640px) */
@media (max-width: 640px) {
  .portal-wrapper  { padding: var(--sp-3); }
  .form-panel      { border-radius: var(--r-md); }
  .form-step       { padding: var(--sp-5) var(--sp-4); }
  #stepSuccess     { padding: var(--sp-8) var(--sp-4); }

  .form-grid       { grid-template-columns: 1fr; gap: var(--sp-4); }
  .form-group.full-width { grid-column: 1; }

  .form-actions {
    flex-direction: column-reverse;
    gap: var(--sp-3);
  }
  .form-actions .btn      { width: 100%; justify-content: center; }
  .form-actions--end      { align-items: stretch; }

  .dot-label       { display: none; }
  .step-connector  { max-width: 40px; }
  .step-indicator  { padding: var(--sp-4); }
  .progress-wrapper { padding: var(--sp-3) var(--sp-4); }

  /* Review: single column on mobile */
  .review-fields { grid-template-columns: 1fr; }
  .review-field,
  .review-field.full { grid-column: 1; border-right: none; }
  /* Restore simple top-border logic for single-column layout */
  .review-field:first-child        { border-top: none; }
  .review-field:nth-child(2):not(.full) { border-top: 1px solid var(--border); }

  .header-badge  { display: none; }
  .logo small    { display: none; }
  .success-actions { flex-direction: column; align-items: center; }
}

/* Very small (≤ 360px) */
@media (max-width: 360px) {
  .form-step { padding: var(--sp-4) var(--sp-3); }
  .step-tag  { font-size: 0.65rem; }
}