/* ================================================================
   Theme Park Booking — Frontend Styles
   Mobile-first · WCAG AA · No external dependencies
   ================================================================ */

/* ── Reset scope ─────────────────────────────────────────────── */
.tpb-wrap *,
.tpb-wrap *::before,
.tpb-wrap *::after {
  box-sizing: border-box;
}

/* ── Design tokens ───────────────────────────────────────────── */
.tpb-wrap {
  --tpb-accent:       #e8621c;
  --tpb-accent-dark:  #c44d10;
  --tpb-accent-light: #fff3ee;
  --tpb-green:        #16a34a;
  --tpb-green-bg:     #dcfce7;
  --tpb-red:          #dc2626;
  --tpb-red-bg:       #fee2e2;
  --tpb-surface:      #ffffff;
  --tpb-base:         #f8fafc;
  --tpb-border:       #e2e8f0;
  --tpb-border-focus: #e8621c;
  --tpb-text:         #0f172a;
  --tpb-text-2:       #475569;
  --tpb-text-3:       #94a3b8;
  --tpb-radius-sm:    8px;
  --tpb-radius:       14px;
  --tpb-radius-lg:    20px;
  --tpb-shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --tpb-shadow:       0 4px 24px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  --tpb-trans:        .18s ease;
  --tpb-gap:          1rem;
}

/* ── Outer wrapper ───────────────────────────────────────────── */
.tpb-wrap {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--tpb-text);
  line-height: 1.5;
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--tpb-gap);
}

/* ── Base card shell ─────────────────────────────────────────── */
.tpb-card,
.tpb-visitor-card,
.tpb-summary {
  background: var(--tpb-surface);
  border: 1.5px solid var(--tpb-border);
  border-radius: var(--tpb-radius);
  box-shadow: var(--tpb-shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════
   DATE CARD
═══════════════════════════════════════════════════════════════ */
.tpb-card--date {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1rem;
}

.tpb-card__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--tpb-accent-light);
  color: var(--tpb-accent);
  border-radius: var(--tpb-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .15rem;
}

.tpb-card__body {
  flex: 1;
  min-width: 0;
}

.tpb-card__label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tpb-text-2);
  margin-bottom: .5rem;
}

.tpb-required {
  color: var(--tpb-red);
  margin-left: 2px;
}

/* Date input — base (hidden by flatpickr, kept for fallback) */
.tpb-date-input {
  display: block;
  width: 100%;
  padding: .75rem 1rem .75rem 2.8rem;
  border: 1.5px solid var(--tpb-border);
  border-radius: var(--tpb-radius-sm);
  font-size: 1rem;
  font-weight: 500;
  color: var(--tpb-text);
  background: var(--tpb-base);
  transition: border-color var(--tpb-trans), box-shadow var(--tpb-trans);
  cursor: pointer;
  box-sizing: border-box;
}
.tpb-date-input:focus {
  outline: none;
  border-color: var(--tpb-accent);
  box-shadow: 0 0 0 3px rgba(45,122,58,.15);
}

/* Flatpickr hides the original and shows .flatpickr-input.input as altInput */
.tpb-date-input.flatpickr-input[readonly] { display: none; }

/* The visible alt-input flatpickr renders */
.tpb-date-input + .flatpickr-input.flatpickr-input {
  display: block;
  width: 100%;
  padding: .75rem 1rem .75rem 2.8rem;
  border: 1.5px solid var(--tpb-border);
  border-radius: var(--tpb-radius-sm);
  font-size: 1rem;
  font-weight: 600;
  color: var(--tpb-text);
  background: var(--tpb-base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232d7a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat 0.85rem center;
  transition: border-color var(--tpb-trans), box-shadow var(--tpb-trans);
  cursor: pointer;
  box-sizing: border-box;
  min-height: 48px;
}
.tpb-date-input + .flatpickr-input.flatpickr-input:focus {
  outline: none;
  border-color: #2d7a3a;
  box-shadow: 0 0 0 3px rgba(45,122,58,.15);
}
.tpb-date-input + .flatpickr-input.flatpickr-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.tpb-date-range {
  font-size: .78rem;
  color: var(--tpb-text-3);
  margin: .45rem 0 0;
}

.tpb-date-range strong {
  color: var(--tpb-text-2);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   VISITOR CARDS
═══════════════════════════════════════════════════════════════ */
.tpb-visitors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tpb-gap);
}

@media (max-width: 380px) {
  .tpb-visitors { grid-template-columns: 1fr; }
}

.tpb-visitor-card {
  padding: 1.1rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.tpb-visitor-card__info {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.tpb-visitor-card__icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  background: var(--tpb-accent-light);
  color: var(--tpb-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tpb-visitor-card__title {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  color: var(--tpb-text);
  line-height: 1.2;
}

.tpb-visitor-card__sub {
  display: block;
  font-size: .75rem;
  color: var(--tpb-text-3);
}

/* ── Stepper control ─────────────────────────────────────────── */
.tpb-stepper {
  display: flex;
  align-items: center;
  background: var(--tpb-base);
  border: 1.5px solid var(--tpb-border);
  border-radius: 999px;
  padding: .2rem;
  gap: 0;
  width: fit-content;
}

.tpb-step-dec,
.tpb-step-inc {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--tpb-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--tpb-trans), color var(--tpb-trans);
  flex-shrink: 0;
  padding: 0;
}

.tpb-step-dec:hover:not(:disabled),
.tpb-step-inc:hover:not(:disabled) {
  background: var(--tpb-accent);
  color: #fff;
}

.tpb-step-dec:focus-visible,
.tpb-step-inc:focus-visible {
  outline: 2px solid var(--tpb-accent);
  outline-offset: 1px;
}

.tpb-step-dec:disabled {
  color: var(--tpb-text-3);
  cursor: not-allowed;
}

.tpb-count {
  width: 2.6rem;
  text-align: center;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tpb-text);
  pointer-events: none;
  -moz-appearance: textfield;
}

.tpb-count::-webkit-inner-spin-button,
.tpb-count::-webkit-outer-spin-button { display: none; }

/* ═══════════════════════════════════════════════════════════════
   SUMMARY
═══════════════════════════════════════════════════════════════ */
.tpb-summary {
  overflow: hidden;
}

.tpb-summary__header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.25rem;
  background: var(--tpb-base);
  border-bottom: 1.5px solid var(--tpb-border);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tpb-text-2);
}

.tpb-summary__rows {
  padding: .25rem 1.25rem;
}

.tpb-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem 0;
  border-bottom: 1px solid var(--tpb-border);
  font-size: .92rem;
}

.tpb-summary__row:last-child {
  border-bottom: none;
}

.tpb-summary__row span:first-child {
  color: var(--tpb-text-2);
}

.tpb-summary__row span:last-child {
  font-weight: 600;
  color: var(--tpb-text);
}

.tpb-sum-empty {
  color: var(--tpb-text-3) !important;
  font-style: italic;
  font-weight: 400 !important;
}

.tpb-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, var(--tpb-accent) 0%, var(--tpb-accent-dark) 100%);
  color: #fff;
}

.tpb-summary__total span:first-child {
  font-size: .9rem;
  font-weight: 600;
  opacity: .9;
}

.tpb-sum-total {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* Override wc_price bdi inside total */
.tpb-sum-total bdi,
.tpb-sum-total span {
  color: inherit !important;
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGES
═══════════════════════════════════════════════════════════════ */
.tpb-messages:empty { display: none; }

.tpb-msg {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .9rem 1rem;
  border-radius: var(--tpb-radius-sm);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.5;
}

.tpb-msg a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tpb-msg--success {
  background: var(--tpb-green-bg);
  color: var(--tpb-green);
  border: 1.5px solid #bbf7d0;
}

.tpb-msg--success a { color: var(--tpb-green); }

.tpb-msg--error {
  background: var(--tpb-red-bg);
  color: var(--tpb-red);
  border: 1.5px solid #fecaca;
}

/* ═══════════════════════════════════════════════════════════════
   BOOK NOW BUTTON
═══════════════════════════════════════════════════════════════ */
.tpb-book-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--tpb-accent) 0%, var(--tpb-accent-dark) 100%);
  color: #fff;
  border: none;
  border-radius: var(--tpb-radius);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .025em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(232,98,28,.35);
  transition: transform var(--tpb-trans), box-shadow var(--tpb-trans), opacity var(--tpb-trans);
  -webkit-tap-highlight-color: transparent;
}

.tpb-book-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232,98,28,.45);
}

.tpb-book-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(232,98,28,.3);
}

.tpb-book-btn:focus-visible {
  outline: 3px solid var(--tpb-accent);
  outline-offset: 3px;
}

.tpb-book-btn:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.tpb-book-btn__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Loading spinner state */
.tpb-book-btn--loading .tpb-book-btn__icon svg {
  animation: tpb-spin .7s linear infinite;
}

@keyframes tpb-spin {
  to { transform: rotate(360deg); }
}

/* ── Error text ─────────────────────────────────────────────── */
.tpb-error {
  color: var(--tpb-red);
  font-size: .93rem;
}

/* ════════════════════════════════════════════════════════════════
   FLATPICKR — Green theme override
   ════════════════════════════════════════════════════════════════ */

.flatpickr-calendar {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
  font-family: inherit;
  width: 308px;
  overflow: hidden;
}

/* Header bar */
.flatpickr-months {
  background: #2d7a3a;
  padding: 6px 0;
  border-radius: 16px 16px 0 0;
}
.flatpickr-months .flatpickr-month { background: transparent; fill: #fff; color: #fff; }
.flatpickr-current-month { color: #fff; font-size: 15px; font-weight: 700; padding-top: 4px; }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: transparent; color: #fff; font-weight: 700; }
.flatpickr-current-month input.cur-year { color: #fff; font-weight: 700; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { fill: #fff; color: #fff; }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { background: rgba(255,255,255,.15); border-radius: 50%; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #fff; }

/* Weekday row */
.flatpickr-weekdays { background: #f0fdf4; padding: 4px 0; }
span.flatpickr-weekday { background: transparent; color: #2d7a3a; font-weight: 700; font-size: 12px; }

/* Days grid */
.flatpickr-days { border: none; }
.dayContainer { padding: 6px 6px 10px; gap: 2px; }

.flatpickr-day {
  border-radius: 8px;
  color: #374151;
  font-size: 14px;
  line-height: 38px;
  height: 38px;
  max-width: 38px;
  border: 1px solid transparent;
  transition: background .15s, color .15s;
}
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: #dcfce7;
  border-color: #dcfce7;
  color: #166534;
}
.flatpickr-day.today {
  border-color: #2d7a3a;
  color: #2d7a3a;
  font-weight: 700;
}
.flatpickr-day.today:hover {
  background: #2d7a3a;
  border-color: #2d7a3a;
  color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected.today {
  background: #2d7a3a;
  border-color: #2d7a3a;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(45,122,58,.35);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #d1d5db;
}

/* Wrap the original + alt-input together for positioning */
.tpb-date-input-wrap { position: relative; }

/* ── Tablet+ ─────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .tpb-card--date { padding: 1.5rem; }
  .tpb-visitor-card { padding: 1.25rem 1.25rem 1.1rem; }
  .tpb-summary__header,
  .tpb-summary__rows,
  .tpb-summary__total { padding-left: 1.5rem; padding-right: 1.5rem; }
}