/* ── Booking page — visual port of the original TeaBooking app ──
   Tokens from teabooking/src/styles/variables.css, block styles from
   BookingForm.css + mobile.css, scoped inside .booking so nothing leaks
   into the rest of the site. Fonts stay the site's own. */
.booking-page { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.booking-title { text-align: center; margin-bottom: 2.5rem; }
.booking-intro { max-width: 640px; margin: 0 auto 2.5rem; color: var(--text-light); text-align: center; }

.booking {
  --bk-primary: #556B2F;        /* dark olive — their --color-primary */
  --bk-primary-dark: #3e4f22;   /* their .submit-btn:hover */
  --bk-primary-light: #8FBC8F;  /* their --color-primary-light */
  --bk-bg: #F9F8F6;             /* their page background, used inside the card */
  --bk-border: #E0E0E0;
  --bk-text: #2C3E50;           /* dark slate */
  --bk-muted: #6b7280;
  --bk-green: #1ed297;          /* their price accent */
  --bk-radius-sm: 4px;
  --bk-radius-md: 8px;
  --bk-radius-lg: 16px;
  color: var(--bk-text);
}

/* the white card (original .booking-container: 600px, radius 16, soft shadow) */
.booking-grid,
.booking-success {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background: #fff;
  border-radius: var(--bk-radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
}
.booking-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.booking-grid[hidden] { display: none; } /* ponytail: author `display:grid` beats the UA [hidden] rule; restore it explicitly */

/* step headings read as the original .form-label (olive, medium) */
.booking-step h2 { font-size: 1.05rem; font-weight: 600; color: var(--bk-primary); margin: 0 0 .75rem; }

/* календарь — react-day-picker look: centered, ~44px round cells, no borders */
.booking-cal { max-width: 322px; margin: 0 auto; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.cal-month { font-weight: 700; text-transform: capitalize; }
.cal-nav { background: none; border: 0; border-radius: 50%; width: 34px; height: 34px; font-size: 1.35rem; line-height: 1; color: var(--bk-primary); cursor: pointer; }
.cal-nav:hover { background: var(--bk-bg); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-wd { text-align: center; font-size: .75rem; color: #9ca3af; padding: .3rem 0; }
.cal-day { aspect-ratio: 1; border: 0; background: none; border-radius: 50%; cursor: pointer; font: inherit; font-weight: 700; color: var(--bk-text); }
.cal-day:not(:disabled):not(.is-selected):hover { background: var(--bk-bg); }
.cal-day.is-selected { background: var(--bk-primary); color: #fff; }
.cal-day:disabled { opacity: .3; font-weight: 400; cursor: default; }

/* слоты — original .time-grid / .time-slot tiles */
.booking-slots { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.slot { padding: .5rem .95rem; border: 1px solid var(--bk-border); border-radius: var(--bk-radius-sm); background: #fff; text-align: center; cursor: pointer; font: inherit; color: var(--bk-text); }
.slot.is-selected { background: var(--bk-primary); color: #fff; border-color: var(--bk-primary); }
.slot:disabled { text-decoration: line-through; color: #d1d5db; background: #f3f4f6; border-color: #e5e7eb; cursor: not-allowed; padding: .5rem .55rem; font-size: .85rem; }
.booking-no-slots { grid-column: 1 / -1; color: var(--bk-muted); margin: 0; }

/* форма — original .form-label / .form-input / .form-select */
.booking-step label { display: block; margin-bottom: 1.5rem; font-weight: 500; color: var(--bk-primary); }
.booking-step input, .booking-step select { display: block; width: 100%; margin-top: .5rem; padding: .75rem; border: 1px solid var(--bk-border); border-radius: var(--bk-radius-md); font: inherit; color: var(--bk-text); background: #fff; transition: border-color .2s; }
.booking-step input:focus, .booking-step select:focus { outline: none; border-color: var(--bk-primary); }
.booking-row { display: flex; gap: 1rem; } /* duration + guests side by side on desktop */
.booking-row > label { flex: 1; min-width: 0; }
@media (max-width: 639px) { .booking-row { display: block; } }

/* contact method — icon pill group (wave 4). Shared base styles live in
   cart.css (loaded site-wide); this is only the olive skin for /booking. */
.booking .booking-method-label { color: var(--bk-primary); }
.booking .method-pill { border-color: var(--bk-border); color: var(--bk-text); }
.booking .method-pill:hover { border-color: var(--bk-primary); }
.booking .method-pill.is-selected { background: var(--bk-primary); border-color: var(--bk-primary); color: #fff; }
/* брендовые цвета — только у невыбранных; на оливковой заливке иконки монохромно-белые */
.booking .method-pill.is-selected .pill-icon-wa { color: #fff; }
.booking .method-pill.is-selected .pill-icon-line-bg { fill: #fff; }
.booking .method-pill.is-selected .pill-icon-line-glyph { fill: var(--bk-primary); }

/* цена — original .price-display box */
.booking-price-box { background: var(--bk-bg); border: 1px solid var(--bk-primary-light); border-radius: var(--bk-radius-md); padding: 1.5rem; text-align: center; }
.booking-price-label { font-weight: 500; color: var(--bk-primary); margin-bottom: .2rem; }
.booking-price-amount { font-size: 2rem; font-weight: 700; color: var(--bk-green); }
.booking-price-note { display: block; color: var(--bk-muted); font-size: .85rem; }

/* сообщение об ошибке — original missing-fields info box */
.booking-error { margin: 0 0 1rem; padding: .75rem; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: var(--bk-radius-md); color: var(--bk-muted); font-size: .9rem; text-align: center; }

/* кнопка — original .submit-btn (full width, olive) */
.btn-booking-submit { display: block; width: 100%; padding: 1rem; background: var(--bk-primary); color: #fff; border: 0; border-radius: var(--bk-radius-md); font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background-color .2s; }
.btn-booking-submit:hover { background: var(--bk-primary-dark); }
.btn-booking-submit:disabled { background: #ccc; cursor: not-allowed; }

/* успех — original success screen: ✨, olive heading, fade in */
.booking-success { text-align: center; }
.booking-success::before { content: '✨'; display: block; font-size: 4rem; margin-bottom: 1rem; }
.booking-success h2 { color: var(--bk-primary); margin: 0 0 1rem; }
.booking-success:not([hidden]) { animation: bk-fade .5s ease-out; }
@keyframes bk-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* мобильный — original mobile.css: card loses chrome, bigger touch targets */
@media (max-width: 768px) {
  .booking-grid, .booking-success { padding: 1rem; border-radius: 0; box-shadow: none; }
  .slot { padding: .75rem; font-size: 1rem; }
  .btn-booking-submit { padding: 1.25rem; }
  .booking-step input, .booking-step select { padding: .875rem; font-size: 16px; } /* 16px prevents iOS zoom */
}

/* ── Лоадер доступности: закрывает форму, спиннер по центру ── */
.booking-loading { text-align: center; padding: 4.5rem 1rem; color: var(--bk-primary); font-size: 1.05rem; }
.booking-loading[hidden] { display: none; }
.booking-spinner { display: inline-block; width: 34px; height: 34px; border: 3px solid var(--bk-border); border-top-color: var(--bk-primary); border-radius: 50%; animation: booking-spin 1s linear infinite; margin-bottom: 1rem; }
@keyframes booking-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .booking-spinner { animation: none; } }