@charset "UTF-8";

/* 新しい予約UI用のCSS */

:root {
  --ta-primary: #0B5CAB; /* ANA blue */
  --ta-navy: #0A1F44;
  --ta-sky: #4DA3FF;
  --ta-gray: #D7DFE9;
  --ta-surface: #F7F9FC;
  --ta-radius: 10px;
  --ta-shadow: 0 8px 24px rgba(10,31,68,0.08);
}

/* SmartWizard: hide toolbar and mobile stepper/nav */
.sw-toolbar, .sw .toolbar, #smartwizard .toolbar { display: none !important; }
@media (max-width: 767.98px) {
  /* Hide the stepper navigation on small screens */
  #smartwizard > .nav,
  #smartwizard .nav { display: none !important; }
}

/* Ensure page content isn't hidden behind sticky bar */
main.main__content_wrapper { padding-bottom: 96px; }
@supports (padding: max(0px)) {
  main.main__content_wrapper { padding-bottom: max(96px, env(safe-area-inset-bottom)); }
}

/* Overlay for filtering/loading state on Step 1 */
#step-1 { position: relative; }
.ta-filter-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 50;
}
.ta-filter-overlay.is-visible { opacity: 1; pointer-events: auto; }
.ta-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(11, 92, 171, 0.18); /* primary with low alpha */
  border-top-color: var(--ta-primary, #0B5CAB); /* ANA blue */
  animation: ta-spin 0.8s linear infinite;
}
@keyframes ta-spin { to { transform: rotate(360deg); } }

/* Grade filter buttons: avoid blue fill on outline buttons when tapping */
#gradeFilters .btn { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,0); }
#gradeFilters .btn-outline-primary:not(.btn-primary) {
  color: var(--primary-color, var(--ta-primary));
  border-color: var(--primary-color, var(--ta-primary));
}
#gradeFilters .btn-outline-primary:not(.btn-primary):active,
#gradeFilters .btn-outline-primary:not(.btn-primary).active,
#gradeFilters .btn-outline-primary:not(.btn-primary):hover,
#gradeFilters .btn-outline-primary:not(.btn-primary):focus {
  color: var(--primary-color, var(--ta-primary));
  background-color: transparent;
  border-color: var(--primary-color, var(--ta-primary));
  box-shadow: none;
}

/* Make grade buttons larger and pill-shaped */
#gradeFilters .btn {
  font-size: 1.6rem; /* 16px */
  padding: 10px 10px;
  border-radius: 9999px;
  border-width: 2px;
  line-height: 1.2;
}
#gradeFilters .btn.btn-primary {
  background-color: var(--primary-color, var(--ta-primary));
  border-color: var(--primary-color, var(--ta-primary));
}

/* Modernize selects in filter bar */
#cast-filters select.form-select,
#cast-filters select {
  font-size: 1.6rem; /* 16px */
  height: 4.8rem; /* 48px */
  padding: 0 1.4rem;
  border-radius: var(--ta-radius);
  border: 1.5px solid var(--border-color, #e7e7e7);
  background-color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
}
/* Optional: custom focus ring */
#cast-filters select:focus {
  outline: none;
  border-color: var(--primary-color, #0B5CAB);
  box-shadow: 0 0 0 3px rgba(11,92,171,0.12);
}

/* Enlarge clear button */
#filtersClear {
  font-size: 1.5rem;
  padding: 10px 16px;
  border-width: 2px;
  border-radius: var(--ta-radius);
}

/* Highlight filters count number */
#filtersCount {
  color: var(--primary-color, var(--ta-primary));
  font-size: 1.8rem;
  font-weight: 700;
}

/* Collapsible filter wrapper */
.filters-collapsible {
  overflow: hidden;
  max-height: 0;
  transition: max-height 220ms ease;
}
.filters-collapsible.is-open {
  max-height: 1200px; /* enough for content */
}

#filtersToggleBtn {
  font-size: 1.6rem;
  padding: 10px 16px;
  border-width: 2px;
  border-radius: 9999px;
}

/* Toggle row responsive layout */
.filters-toggle-row { gap: 8px; }
@media (max-width: 767.98px) {
  .filters-toggle-row {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
  .filters-toggle-row #filtersToggleBtn {
    width: 100%;
    white-space: nowrap; /* avoid button text wrapping */
  }
  .filters-toggle-row #filtersSummary {
    margin-top: 6px;
  }
}

/* Step 2 toggles: Today / Future as segmented control */
#step-2 #toggle-today,
#step-2 #toggle-future {
  border-radius: 9999px;
  border: 2px solid var(--ta-primary);
  color: var(--ta-primary);
  background-color: #fff;
  padding: 8px 16px;
}
#step-2 #toggle-today.btn-primary,
#step-2 #toggle-future.btn-primary {
  background-color: var(--ta-primary);
  color: #fff;
}

/* Time chips */
#today-time-list .btn {
  min-width: 84px;
  padding: 8px 12px;
  border-radius: 9999px;
  border-width: 2px;
  font-size: 1.5rem;
}
#today-time-list .btn-outline-success { border-color: #2e7d32; color: #2e7d32; }
#today-time-list .btn-outline-warning { border-color: #e69500; color: #b36b00; }
#today-time-list .btn-outline-light { border-color: #e0e0e0; color: #bdbdbd; }

/* Focus styles for accessibility */
button:focus-visible,
select:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(11,92,171,0.22);
}

/* Content-visibility for cast grid (perf) */
#cast-grid .cast-card { content-visibility: auto; contain-intrinsic-size: 180px 240px; }

/* Cast grade row + today badge */
.cast-grade { display: inline-flex; align-items: center; gap: 8px; }
.badge-today {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 1.2rem; /* 12px */
  font-weight: 700;
  color: #4DA3FF; /* green */
  background: rgba(255,255, 255,  0.85);
  border: 1px solid rgba(77, 163, 255, 1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Sticky summary bar */
#sticky-summary-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030; /* above content/footer */
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 -8px 24px rgba(10,31,68,0.06);
}
#sticky-summary-bar .progress-mini {
  position: relative;
  height: 4px;
}
#sticky-summary-bar .progress-mini .progress-track {
  position: absolute; inset: 0 0 0 0;
  background: rgba(11, 92, 171, 0.18);
  border-radius: 9999px;
}
#sticky-summary-bar .progress-mini .progress-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 0%;
  background: var(--ta-primary);
  border-radius: 9999px;
  transition: width 200ms ease;
}
#sticky-summary-bar .progress-mini .progress-plane {
  position: absolute;
  top: -7px;
  left: 0%;
  color: var(--ta-primary);
  font-size: 12px;
  transition: left 200ms ease;
}
#sticky-summary-bar .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  padding-bottom: 12px;
}
@supports (padding: max(0px)) {
  #sticky-summary-bar .inner {
    padding-bottom: max(12px, calc(env(safe-area-inset-bottom) / 2));
  }
}
#sticky-summary-bar .summary {
  min-width: 0;
}
#sticky-summary-bar .summary .line {
  font-size: 1.4rem;
  color: #263238;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sticky-summary-bar .summary .line strong { color: var(--ta-navy); }
#sticky-summary-bar .summary .step-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(11,92,171,0.12);
  color: var(--ta-primary);
  font-weight: 700;
  font-size: 1.2rem;
}
#sticky-summary-bar .actions { display: flex; gap: 8px; }
#sticky-summary-bar .actions .btn {
  height: 44px;
  padding: 0 16px;
  font-size: 1.6rem;
  border-radius: 10px;
}
#sticky-summary-bar .actions .btn-primary {
  background-color: var(--ta-primary);
  border-color: var(--ta-primary);
}
#sticky-summary-bar .actions .btn-outline-secondary {
  border-width: 2px;
}
@media (max-width: 575.98px) {
  #sticky-summary-bar .inner { flex-direction: column; align-items: stretch; }
  #sticky-summary-bar .actions { width: 100%; }
  #sticky-summary-bar .actions .btn { flex: 1; width: 100%; }
}

/* Hide inline submit (sticky bar handles submission) */
#step3-inline-submit { display: none !important; }

/* SweetAlert2: make buttons wider and more tappable */
.swal2-popup .swal2-actions { gap: 8px; flex-wrap: wrap; }
.swal2-popup .swal2-actions .swal2-styled {
  min-width: 160px;
  max-width: 100%;
  height: 44px;
  padding: 0 14px;
  font-size: 1.5rem; /* ~15px */
  border-radius: var(--ta-radius, 10px);
}
@media (max-width: 575.98px) {
  .swal2-popup .swal2-actions {
    flex-direction: column;
    width: 100%;
  }
  .swal2-popup .swal2-actions .swal2-styled {
    width: 80%;
    min-width: 0;
    height: 46px; /* slightly taller on mobile */
    font-size: 1.6rem;
  }
}