/* =========================================================================
   Cloudlaunch — cloud review booking page.

   A two-panel card in the site's own system: the brief on the left, and on
   the right three steps — pick a date and time, enter details, and a
   confirmation. The slots are real Dubai working hours converted into
   whichever time zone the visitor picks.

   Loaded after styles.css. Nothing shared is restyled.
   ========================================================================= */

.booking-page { background: var(--ink); }

.bk-wrap {
  max-width: var(--cw);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 56px) var(--gutter) 96px;
}

.bk-head { margin-bottom: 40px; }
.bk-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-mid);
  margin-bottom: 20px;
}
.bk-head .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.bk-head h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 16ch;
  text-wrap: balance;
}

/* ------------------------------------------------------------ the card */

.bk-card {
  display: grid;
  border: 1px solid var(--rule-dark);
  border-radius: 12px;
  background: var(--ink-2);
  overflow: hidden;
}
@media (min-width: 1000px) { .bk-card { grid-template-columns: 380px 1fr; } }

/* left: the brief */
.bk-left {
  padding: 40px;
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 1000px) { .bk-left { border-bottom: 0; border-right: 1px solid var(--rule-dark); } }

.bk-left h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 8px;
}
.bk-left .who { font-size: 0.875rem; color: var(--on-ink-dim); margin-bottom: 26px; }

.bk-meta { display: grid; gap: 12px; padding-bottom: 26px; border-bottom: 1px solid var(--rule-dark); }
.bk-meta div[hidden] { display: none; }
.bk-meta div { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; color: var(--on-ink-mid); line-height: 1.5; }
.bk-meta svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--on-ink-dim); }
.bk-meta .picked { color: var(--on-ink); }
.bk-meta .picked svg { color: var(--accent); }

.bk-left h3 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
  margin: 26px 0 16px;
}
.bk-list { list-style: none; display: grid; gap: 12px; }
.bk-list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--on-ink-mid);
}
.bk-list li::before { content: "\2192"; color: var(--accent); font-family: var(--font-mono); }

.bk-note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-dark);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--on-ink-dim);
}

/* right: the steps */
.bk-right { padding: 40px; }
@media (max-width: 760px) { .bk-left, .bk-right { padding: 28px 20px; } }

.bk-step { display: none; }
.bk-step.is-on { display: block; }

.bk-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.bk-back {
  width: 34px; height: 34px;
  border: 1px solid var(--rule-dark);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--on-ink-mid);
  transition: border-color 0.2s, color 0.2s;
}
.bk-back:hover { border-color: var(--on-ink); color: var(--on-ink); }
.bk-back svg { width: 16px; height: 16px; }
.bk-step-head h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}

/* ----------------------------------------------------------- calendar */

.bk-cal-layout { display: grid; gap: 32px; }
@media (min-width: 760px) { .bk-cal-layout { grid-template-columns: 1fr 240px; gap: 40px; } }

.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cal-nav span {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cal-nav button {
  width: 34px; height: 34px;
  border: 1px solid var(--rule-dark);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--on-ink-mid);
  transition: border-color 0.2s, color 0.2s, opacity 0.2s;
}
.cal-nav button:hover:not(:disabled) { border-color: var(--on-ink); color: var(--on-ink); }
.cal-nav button:disabled { opacity: 0.3; cursor: not-allowed; }
.cal-nav button svg { width: 16px; height: 16px; }

.cal-heads {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.cal-heads span {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
  padding: 6px 0;
}

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grid button {
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--on-ink);
  position: relative;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.cal-grid button:hover:not(:disabled) { background: rgba(242, 241, 236, 0.07); border-color: var(--rule-dark); }
.cal-grid button:disabled { color: var(--on-ink-dim); opacity: 0.4; cursor: not-allowed; }
.cal-grid button.has-slots::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 6px;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.cal-grid button.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.cal-grid button.is-on::after { background: var(--accent-ink); }
.cal-grid .blank { visibility: hidden; }

/* time zone picker */
.cal-tz { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule-dark); position: relative; }
.cal-tz-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
  margin-bottom: 10px;
}
.cal-tz-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule-dark);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--on-ink);
  text-align: left;
  transition: border-color 0.2s;
}
.cal-tz-btn:hover { border-color: var(--on-ink-dim); }
.cal-tz-btn svg { width: 15px; height: 15px; flex: none; color: var(--on-ink-dim); }
.cal-tz-btn .now { margin-left: auto; color: var(--on-ink-dim); font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 0.75rem; }
.cal-tz-btn .chev { margin-left: 0; transition: transform 0.25s; }
.cal-tz.open .cal-tz-btn .chev { transform: rotate(180deg); }

.tz-panel {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% - 12px);
  z-index: 20;
  border: 1px solid var(--rule-dark);
  border-radius: 8px;
  background: var(--ink);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
  display: none;
  overflow: hidden;
}
.cal-tz.open .tz-panel { display: block; }
.tz-top { display: flex; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid var(--rule-dark); }
.tz-top input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--rule-dark);
  border-radius: 5px;
  background: var(--ink-2);
  color: var(--on-ink);
  font: inherit;
  font-size: 0.875rem;
}
.tz-top input:focus { outline: none; border-color: var(--accent); }
.tz-fmt { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.625rem; color: var(--on-ink-dim); flex: none; }
.tz-fmt button {
  width: 34px; height: 18px;
  border: 1px solid var(--rule-dark);
  border-radius: 9px;
  background: none;
  cursor: pointer;
  position: relative;
  padding: 0;
}
.tz-fmt button i {
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--on-ink-mid);
  transition: transform 0.2s, background 0.2s;
}
.tz-fmt button.is-24 i { transform: translateX(16px); background: var(--accent); }

.tz-list { max-height: 260px; overflow-y: auto; }
.tz-list button {
  display: flex;
  width: 100%;
  gap: 12px;
  padding: 9px 12px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--on-ink-mid);
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.tz-list button:hover { background: rgba(242, 241, 236, 0.06); color: var(--on-ink); }
.tz-list button.is-on { color: var(--accent); }
.tz-list button span { margin-left: auto; font-family: var(--font-mono); font-size: 0.75rem; color: var(--on-ink-dim); flex: none; }
.tz-empty { padding: 18px 12px; font-size: 0.8125rem; color: var(--on-ink-dim); }

/* slots */
.bk-slots { display: flex; flex-direction: column; min-height: 320px; }
.bk-slots-date {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
  margin-bottom: 14px;
}
.bk-slots-list { display: grid; gap: 8px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.bk-slots-list button {
  padding: 12px;
  border: 1px solid var(--rule-dark);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--on-ink);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.bk-slots-list button:hover { border-color: var(--accent); color: var(--accent); }
.bk-slots-empty { font-size: 0.875rem; line-height: 1.6; color: var(--on-ink-dim); }

/* -------------------------------------------------------------- form */

.bk-form { display: grid; gap: 18px; max-width: 520px; }
.bk-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
  margin-bottom: 8px;
}
.bk-field input,
.bk-field select,
.bk-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule-dark);
  border-radius: 6px;
  background: var(--ink);
  color: var(--on-ink);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.2s;
}
.bk-field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus { outline: none; border-color: var(--accent); }
.bk-field .hint { margin-top: 7px; font-size: 0.75rem; color: var(--on-ink-dim); }

.bk-terms { font-size: 0.75rem; line-height: 1.6; color: var(--on-ink-dim); max-width: 46ch; }
.bk-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ------------------------------------------------------------ confirm */

.bk-confirm { max-width: 560px; }
.bk-confirm-icon {
  width: 52px; height: 52px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: 24px;
}
.bk-confirm-icon svg { width: 24px; height: 24px; }
.bk-confirm h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 14px;
}
.bk-confirm .sub { font-size: 1rem; line-height: 1.65; color: var(--on-ink-mid); margin-bottom: 32px; max-width: 46ch; }

.bk-rows { border-top: 1px solid var(--rule-dark); margin-bottom: 32px; }
.bk-rows div {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-dark);
  font-size: 0.9375rem;
}
@media (min-width: 620px) { .bk-rows div { grid-template-columns: 160px 1fr; gap: 24px; align-items: baseline; } }
.bk-rows b {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
}
.bk-rows span { color: var(--on-ink); line-height: 1.5; }

.bk-confirm .again {
  background: none;
  border: 0;
  padding: 0;
  margin-top: 26px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--on-ink-mid);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.bk-confirm .again:hover { color: var(--on-ink); }

@media (prefers-reduced-motion: reduce) {
  .cal-grid button, .bk-slots-list button, .tz-list button, .cal-tz-btn .chev, .tz-fmt button i { transition: none; }
}