.exam-date-container {
  max-width: 800px;
  display: grid;
  gap: 24px;
  padding-bottom: 56px;
}

.exam-date-card,
.exam-date-result-block,
.exam-date-followup {
  background: #fff;
  border: 1px solid #dce6f2;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(26, 55, 91, .06);
}

.exam-date-card { padding: clamp(20px, 4vw, 32px); }
.exam-date-card h2,
.exam-date-result-block h2 { margin: 0 0 12px; font-size: 1.5rem; }
.exam-date-card p,
.exam-date-result-block p { margin: 0 0 20px; }

.exam-date-current {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding: 16px;
  margin-bottom: 24px;
  border-radius: 12px;
  background: #eff6ff;
}
.exam-date-current h2 { flex-basis: 100%; margin: 0; font-size: 1rem; }
.exam-date-current strong { font-size: 1.3rem; }
.exam-date-current span { color: #365779; }

.exam-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}
.exam-date-grid .form__group { min-width: 0; }
.exam-date-grid .form__input,
.exam-date-grid .form__select { width: 100%; }
.exam-date-grid .form__input,
.exam-date-grid .form__select { min-height: 52px; }
.exam-time-selects {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.exam-time-selects > span { font-weight: 700; font-size: 1.3rem; color: #284c72; }
.exam-time-selects .form__select { font-variant-numeric: tabular-nums; }
.exam-date-picker { position: relative; }
.exam-calendar-trigger {
  width: 100%;
  min-height: 52px;
  padding: 12px 48px 12px 16px;
  border: 1px solid #b7c9db;
  border-radius: 10px;
  background: #fff;
  color: #163d66;
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.exam-calendar-trigger.is-empty { color: #64748b; }
.exam-calendar-trigger::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 18px;
  width: 18px;
  height: 16px;
  transform: translateY(-45%);
  border: 2px solid currentColor;
  border-radius: 3px;
  background: linear-gradient(currentColor, currentColor) 0 4px / 100% 2px no-repeat;
}
.exam-calendar-trigger:focus-visible,
.exam-calendar button:focus-visible { outline: 3px solid #2b79cd; outline-offset: 2px; }
.exam-calendar {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: min(366px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid #cad8e8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(22, 49, 81, .22);
}
.exam-calendar[hidden] { display: none; }
.exam-calendar-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: #173d64;
  text-align: center;
}
.exam-calendar-nav,
.exam-calendar-day {
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #173d64;
  font: inherit;
  cursor: pointer;
}
.exam-calendar-nav { font-size: 1.8rem; line-height: 1; }
.exam-calendar-nav:hover:not(:disabled),
.exam-calendar-day:hover:not(:disabled) { background: #e9f3ff; }
.exam-calendar-nav:disabled,
.exam-calendar-day:disabled { color: #a8b6c5; cursor: default; }
.exam-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.exam-calendar-weekday { padding: 6px 0; color: #53708e; font-size: .78rem; text-align: center; text-transform: capitalize; }
.exam-calendar-day.is-today { box-shadow: inset 0 0 0 1px #327dcc; }
.exam-calendar-day.is-selected { background: #1762ad; color: #fff; font-weight: 700; }
.exam-calendar-day.is-selected:hover { background: #124e8a; }
.exam-date-note { font-size: .95rem; }
.exam-date-alert { padding: 12px 16px; border-radius: 8px; background: #e8f6ef; color: #145c38; }
.exam-date-alert--error { background: #fff0ef; color: #9d302b; }

.exam-date-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.exam-date-actions form { margin: 0; }
.exam-date-actions .btn { white-space: normal; text-align: center; }
.exam-date-return,
.exam-date-return-inline {
  padding: 16px;
  margin-top: 20px;
  background: #eff6ff;
  border-radius: 10px;
}
.exam-date-return[hidden],
.exam-date-return-inline[hidden] { display: none; }
.exam-date-return a,
.exam-date-return-inline a { margin-left: 12px; }
.exam-date-return button,
.exam-date-return-inline button { margin-left: 12px; border: 0; background: none; color: #245f9d; cursor: pointer; }

.exam-date-result-block { margin-top: 24px; padding: clamp(20px, 4vw, 32px); }
.exam-date-followup { margin-top: 18px; padding: 18px; }
.exam-date-followup strong { display: block; margin-bottom: 6px; }
.exam-date-dialog {
  width: min(520px, calc(100vw - 32px));
  border: 0;
  border-radius: 18px;
  padding: clamp(20px, 4vw, 32px);
  box-shadow: 0 24px 70px rgba(0, 25, 58, .25);
}
.exam-date-dialog::backdrop { background: rgba(12, 30, 54, .56); }
.exam-date-dialog h2 { margin: 0 0 12px; font-size: 1.5rem; }
.exam-date-dialog p { margin: 0 0 22px; }
.exam-date-dialog .exam-date-actions { flex-direction: column; }
.exam-date-dialog .exam-date-actions .btn { width: 100%; }

@media (max-width: 640px) {
  .exam-date-page .inner-page-nav__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .exam-date-page .inner-page-nav__title { width: 100%; }
  .exam-date-grid { grid-template-columns: 1fr; }
  .exam-date-picker.is-open::before {
    content: '';
    position: fixed;
    z-index: 98;
    inset: 0;
    background: rgba(12, 30, 54, .48);
  }
  .exam-calendar {
    position: fixed;
    z-index: 99;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: min(85vh, 560px);
    overflow-y: auto;
    padding: 20px max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
  }
  .exam-date-actions { flex-direction: column; }
  .exam-date-actions .btn,
  .exam-date-actions form { width: 100%; }
  .exam-date-return a,
  .exam-date-return-inline a,
  .exam-date-return button,
  .exam-date-return-inline button { display: block; margin: 8px 0 0; }
}