/* ============================================================
   Brandscape Booking Widget
   ============================================================ */

/* Accent tokens — the widget used to be gold (var(--primary)) while the rest of
   the site is the dark cinematic + neon theme. Swapping these two values
   re-themes every accent in this file at once. */
.page-booking {
  --bk-accent: #22d3ee;          /* neon cyan, matches --n-cyan on the inner pages */
  --bk-accent-rgb: 34,211,238;
  --bk-accent-2: #8b5cf6;        /* neon violet, for gradients */
}

.booking-page {
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 24px 104px;
  background: transparent;       /* inherit the page background so it reads as one surface */
}

.booking-widget {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  max-width: 920px; width: 100%; margin-inline: auto;
  background: linear-gradient(150deg, #0c0a1c, #0a0814 58%, #0b0918);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
  min-height: 560px;
}

/* ── Left panel ─────────────────────────────────────────────── */
.bk-left {
  padding: 34px 28px 36px;
  background: rgba(255,255,255,.028);   /* a lift off the card, not a separate black block */
  border-right: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 0;
}
/* align-self is load-bearing: .bk-left is a column flex container, so the default
   align-items:stretch pulled this img to the full panel width and beat width:auto,
   flattening the logo to 243x40. object-fit is a belt-and-braces against any future
   rule that constrains both dimensions at once. */
.bk-logo { height: 60px; width: auto; align-self: flex-start; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; margin: 0 0 4px; }
.bk-divider { height: 1px; background: rgba(255,255,255,.09); margin: 22px 0; }
.bk-meeting-name { font-family: 'Montserrat',sans-serif; font-size: 1.15rem; font-weight: 800; color: #fff; margin: 0 0 16px; line-height: 1.3; }
.bk-meta { display: flex; flex-direction: column; gap: 10px; }
.bk-meta-row { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; color: var(--text-secondary); }
.bk-meta-row svg { flex-shrink: 0; stroke: var(--bk-accent); margin-top: 1px; }
.bk-description { font-size: .82rem; color: var(--text-muted); line-height: 1.7; margin: 0; }

/* ── Right panel ────────────────────────────────────────────── */
.bk-right { padding: 36px 32px; }
.bk-step-title { font-family: 'Montserrat',sans-serif; font-size: 1.1rem; font-weight: 800; color: #fff; margin: 0 0 24px; }

/* ── Calendar ────────────────────────────────────────────────── */
/* One centred column until a date is picked. The slots panel starts hidden, and a
   fixed "1fr 1fr" reserved its column anyway — leaving half the card permanently
   empty and squeezing the calendar into the left half. The second column is only
   created once .has-slots is set (booking.php adds it when slots load). */
.bk-calendar-area { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: center; }
.bk-calendar { width: 100%; max-width: 340px; }
.bk-calendar-area.has-slots { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; justify-items: stretch; align-items: start; }
.bk-calendar-area.has-slots .bk-calendar { max-width: none; }
.bk-slots-panel { width: 100%; min-width: 0; }
.bk-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bk-cal-month { font-family: 'Montserrat',sans-serif; font-size: .9rem; font-weight: 700; color: #fff; }
.bk-cal-nav-btn { background: none; border: 1px solid rgba(255,255,255,.1); color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.bk-cal-nav-btn:hover { background: rgba(255,255,255,.08); }

.bk-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.bk-cal-dow { text-align: center; font-size: .65rem; font-weight: 700; color: var(--text-muted); padding: 4px 0; text-transform: uppercase; letter-spacing: .05em; }
.bk-cal-day {
  aspect-ratio: 1; border-radius: 50%;
  border: none; background: transparent;
  color: #fff; font-size: .82rem; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  font-family: 'Montserrat',sans-serif;
}
.bk-cal-day:hover:not([disabled]) { background: rgba(var(--bk-accent-rgb),.2); color: var(--bk-accent); }
.bk-cal-day.selected { background: var(--bk-accent); color: #000 !important; font-weight: 800; }
.bk-cal-day.disabled { color: rgba(255,255,255,.2); cursor: not-allowed; }

/* ── Slots ───────────────────────────────────────────────────── */
.bk-slots-panel { display: flex; flex-direction: column; }
.bk-slots-date { font-family: 'Montserrat',sans-serif; font-size: .88rem; font-weight: 700; color: #fff; margin-bottom: 14px; }
.bk-slots-grid { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--bk-accent-rgb),.2) transparent; padding-right: 4px; }
.bk-slots-grid::-webkit-scrollbar { width: 4px; }
.bk-slots-grid::-webkit-scrollbar-thumb { background: rgba(var(--bk-accent-rgb),.25); border-radius: 4px; }

.bk-slot {
  width: 100%; padding: 11px 16px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: var(--bk-accent); font-family: 'Montserrat',sans-serif;
  font-size: .82rem; font-weight: 700;
  cursor: pointer; text-align: center;
  transition: background .15s, border-color .15s, transform .15s;
}
.bk-slot:hover { background: rgba(var(--bk-accent-rgb),.1); border-color: rgba(var(--bk-accent-rgb),.5); transform: translateY(-1px); }
.bk-slot.selected { background: var(--bk-accent); color: #000; border-color: var(--bk-accent); }
.bk-slots-loading, .bk-no-slots { font-size: .8rem; color: var(--text-muted); text-align: center; padding: 16px 0; }

/* ── Timezone note ───────────────────────────────────────────── */
.bk-tz { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--text-muted); margin-top: 16px; }
.bk-tz svg { stroke: var(--text-muted); }

/* ── Step 2: Form ────────────────────────────────────────────── */
.bk-back-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.bk-back { background: none; border: none; color: var(--bk-accent); font-size: .82rem; font-weight: 700; cursor: pointer; padding: 0; font-family: 'Montserrat',sans-serif; transition: opacity .2s; }
.bk-back:hover { opacity: .7; }
.bk-selected-slot { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-secondary); background: rgba(var(--bk-accent-rgb),.08); border: 1px solid rgba(var(--bk-accent-rgb),.2); border-radius: 100px; padding: 5px 14px; }
.bk-selected-slot svg { stroke: var(--bk-accent); flex-shrink: 0; }

.bk-form { display: flex; flex-direction: column; gap: 16px; }
.bk-field { display: flex; flex-direction: column; gap: 6px; }
.bk-field label { font-size: .78rem; font-weight: 700; color: var(--text-secondary); font-family: 'Montserrat',sans-serif; letter-spacing: .04em; }
.bk-req { color: var(--bk-accent); }
.bk-field input, .bk-field textarea {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 11px 14px;
  color: #fff; font-size: .88rem; font-family: 'Inter',sans-serif;
  outline: none; transition: border-color .2s;
  resize: none;
}
.bk-field input:focus, .bk-field textarea:focus { border-color: rgba(var(--bk-accent-rgb),.5); }

.bk-form-error { font-size: .78rem; color: #e74c3c; min-height: 16px; }

.bk-submit {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, var(--bk-accent-2), var(--bk-accent));
  color: #000; font-family: 'Montserrat',sans-serif;
  font-size: .9rem; font-weight: 800;
  border: none; border-radius: 12px; cursor: pointer;
  transition: box-shadow .2s, transform .15s;
  box-shadow: 0 6px 24px rgba(var(--bk-accent-rgb),.35);
}
.bk-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(var(--bk-accent-rgb),.5); }
.bk-submit:disabled { opacity: .7; cursor: not-allowed; transform: none; }
.bk-legal { font-size: .72rem; color: var(--text-muted); text-align: center; margin: 0; }

/* ── Step 3: Confirmation ────────────────────────────────────── */
.bk-confirm { text-align: center; padding: 40px 0; }
.bk-confirm-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--bk-accent-2), var(--bk-accent));
  color: #000; font-size: 1.8rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  animation: confirmPop .5s cubic-bezier(.16,1,.3,1);
}
@keyframes confirmPop { from { transform: scale(.5); opacity:0; } to { transform: scale(1); opacity:1; } }
.bk-confirm h3 { font-family: 'Montserrat',sans-serif; font-size: 1.5rem; font-weight: 900; color: #fff; margin: 0 0 8px; }
.bk-confirm-sub { color: var(--text-secondary); font-size: .88rem; margin: 0 0 24px; }
.bk-confirm-details { background: rgba(var(--bk-accent-rgb),.06); border: 1px solid rgba(var(--bk-accent-rgb),.2); border-radius: 12px; padding: 16px 20px; display: inline-flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.bk-confirm-row { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--text-secondary); }
.bk-confirm-row svg { stroke: var(--bk-accent); flex-shrink: 0; }
.bk-confirm-note { color: var(--text-muted); font-size: .82rem; margin: 0 0 24px; }
.bk-confirm-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 720px) {
  .booking-widget { grid-template-columns: 1fr; }
  .bk-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
  /* .has-slots must be beaten explicitly here — it is the more specific selector,
     and two columns on a phone shrinks the day cells below a tappable size. */
  .bk-calendar-area,
  .bk-calendar-area.has-slots { grid-template-columns: minmax(0, 1fr); }
  .bk-calendar-area.has-slots .bk-calendar { max-width: 340px; }
  .bk-right { padding: 24px 20px; }
}