/* Huddle booking page styles. Built on the Huddle Design System tokens. No build step. */
@import url("/assets/huddle-ds.css");

/* Bridge our legacy variable names onto the design-system tokens so all existing rules
   pick up the official palette, radii, shadows, and font. */
:root {
  --color-bg: var(--bg-app);
  --color-surface: var(--bg-surface);
  --color-border: var(--border-subtle);
  --color-text: var(--text-primary);
  --color-text-muted: var(--text-muted);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-tint: var(--primary-tint);
  --color-success: var(--success);
  --color-danger: var(--danger);

  --radius-control: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-pill: var(--radius-pill);
  --shadow: var(--shadow-xs);

  --font: var(--font-sans);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); }

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.wordmark { font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.wordmark .dot { color: var(--color-primary); }

.wrap { max-width: 880px; margin: 32px auto; padding: 0 16px; }

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panes { display: grid; grid-template-columns: 320px 1fr; }
@media (max-width: 720px) { .panes { grid-template-columns: 1fr; } }

.summary {
  padding: 24px;
  border-right: 1px solid var(--color-border);
  background: var(--color-bg);
}
@media (max-width: 720px) { .summary { border-right: none; border-bottom: 1px solid var(--color-border); } }

.summary h1 { font-size: 25px; font-weight: 600; margin: 4px 0 8px; line-height: 1.2; }
.summary .host { color: var(--color-text-muted); margin: 0 0 16px; }
.meta { display: flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: 14px; margin: 6px 0; }

.booking { padding: 24px; }
.section-title { font-size: 14px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 12px; }

.tz {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--color-text-muted);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); padding: 4px 12px; margin-bottom: 16px;
}

.day { margin-bottom: 20px; }
.day h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; }

.slot {
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  border-radius: var(--radius-pill); font-weight: 500; font-size: 15px; color: var(--color-text);
  cursor: pointer; transition: all 150ms ease-out;
}
.slot:hover { border-color: var(--color-primary); background: var(--color-primary-tint); }
.slot.selected { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.slot.busy { opacity: 0.4; text-decoration: line-through; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.field input {
  width: 100%; padding: 10px 12px; font-size: 16px; font-family: var(--font);
  border: 1px solid var(--color-border); border-radius: var(--radius-control); background: #fff;
}
.field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-tint); }

.btn {
  appearance: none; border: none; cursor: pointer;
  background: var(--color-primary); color: #fff; font-weight: 600; font-size: 16px; font-family: var(--font);
  padding: 12px 20px; border-radius: var(--radius-control); transition: background 150ms ease-out;
}
.btn:hover { background: var(--color-primary-hover); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn.secondary { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.btn.danger { background: var(--color-danger); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

.back { background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 0; font-size: 14px; margin-bottom: 12px; }
.back:hover { color: var(--color-text); }

.confirm { text-align: center; padding: 8px; }
.confirm .check {
  position: relative; width: 48px; height: 48px; border-radius: 999px; background: #dcfce7;
  margin: 0 auto 12px;
}
/* Checkmark drawn with CSS borders (no glyphs). */
.confirm .check::after {
  content: ""; position: absolute; left: 50%; top: 46%;
  width: 10px; height: 18px; border: solid var(--color-success); border-width: 0 3px 3px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}
.confirm h2 { margin: 0 0 4px; font-size: 20px; }
.confirm .detail { color: var(--color-text-muted); margin: 2px 0; }
.confirm .links { margin-top: 16px; }

.note { color: var(--color-text-muted); font-size: 14px; }
.error { color: var(--color-danger); font-size: 14px; }
.center { text-align: center; padding: 48px 16px; color: var(--color-text-muted); }
.hidden { display: none !important; }
.footer { text-align: center; color: var(--color-text-muted); font-size: 13px; margin: 24px 0; }

/* Embedded mode (?embed=1): drop page chrome so it sits cleanly in an iframe. */
body.embed { background: var(--color-bg); }
body.embed .topbar, body.embed .footer { display: none; }
body.embed .wrap { margin: 0 auto; }