/* ---- Guest pages: the "Clean paper" look ----
   For a site whose look is Clean paper (booking_settings.admin_theme) and which uses the
   standard guest layout — guest-pages.js marks the page <html data-site-look="clean-paper">
   before sending it, so nothing flashes. A site using "match my website" keeps its own
   website's look and never gets this file. Colours the site picked (Branding) still win:
   they're set inline on <html>, which beats these. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');

html[data-site-look="clean-paper"], html[data-site-look="clean-paper"][data-theme="light"] {
  --canvas: #F4F5F2;
  --canvas-light: #FFFFFF;
  --surface: #FFFFFF;
  --surface-alt: #F1F3F0;
  --surface-sunken: #F7F8F6;
  --ink: #1B2420;
  --muted: #5F6B64;
  --bark: #4D5852;
  --line: #E3E6E1;
  --field-bg: #FFFFFF;
  --tint-good: #E3F1E8;
  --tint-warn: #FDF1E6;
  --tint-bad: #FBE6E2;
  --shadow: rgba(20,30,25,0.07);
  --radius: 12px;
  --cp-card-shadow: 0 1px 2px rgba(20,30,25,.06), 0 4px 16px rgba(20,30,25,.04);
}
html[data-site-look="clean-paper"][data-theme="dark"] {
  --canvas: #121614;
  --canvas-light: #1B201D;
  --surface: #1B201D;
  --surface-alt: #232A26;
  --surface-sunken: #161A18;
  --ink: #E7ECE8;
  --muted: #9AA59F;
  --bark: #A9B3AD;
  --line: #2A312D;
  --field-bg: #161A18;
  --shadow: rgba(0,0,0,0.4);
  --cp-card-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2);
}

/* One friendly typeface, numbers lined up. */
html[data-site-look="clean-paper"] body,
html[data-site-look="clean-paper"] body *:not(code):not(pre) {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
}
html[data-site-look="clean-paper"] body { font-variant-numeric: tabular-nums; background: var(--canvas); }
html[data-site-look="clean-paper"] h1,
html[data-site-look="clean-paper"] h2,
html[data-site-look="clean-paper"] h3,
html[data-site-look="clean-paper"] .pitch-section-title {
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 800;
  color: var(--ink);
}
html[data-site-look="clean-paper"] h2 { font-size: 1.35rem; }

/* Header: a plain bar with the site's name, not the dusk picture. */
html[data-site-look="clean-paper"] header.topbar {
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 1.5rem;
}
html[data-site-look="clean-paper"] header.topbar::after { display: none; }
html[data-site-look="clean-paper"] header.topbar h1 {
  color: var(--ink);
  text-transform: none;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
html[data-site-look="clean-paper"] header.topbar .subtitle { color: var(--muted); }
html[data-site-look="clean-paper"] .theme-toggle-btn {
  background: var(--surface-alt);
  color: var(--ink);
  border: 1px solid var(--line);
  font-weight: 600;
}
html[data-site-look="clean-paper"] .topbar-brand-mark { opacity: 0.55; }

/* Cards: white, rounded, a soft lift instead of the stitched seam. */
html[data-site-look="clean-paper"] .card {
  background: var(--canvas-light);
  border: 1px solid transparent;
  border-radius: 18px;
  box-shadow: var(--cp-card-shadow);
}
html[data-site-look="clean-paper"][data-theme="dark"] .card { border-color: var(--line); }
html[data-site-look="clean-paper"] .card::before { display: none; }
html[data-site-look="clean-paper"] .card .card { box-shadow: none; border-color: var(--line); }
html[data-site-look="clean-paper"] .manage-booking-banner { border-radius: 14px; border-color: transparent; background: var(--surface-alt); }

/* The booking steps: rounded numbers, plain words. */
html[data-site-look="clean-paper"] .step-dot {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.88rem;
  font-weight: 600;
  border-bottom-width: 3px;
}
html[data-site-look="clean-paper"] .step-dot .num { width: 24px; height: 24px; font-size: 0.8rem; }

/* Buttons, fields and choices: rounder and roomier. */
html[data-site-look="clean-paper"] button.btn,
html[data-site-look="clean-paper"] a.btn { border-radius: 12px; font-weight: 700; }
html[data-site-look="clean-paper"] button.btn.secondary,
html[data-site-look="clean-paper"] a.btn.secondary { background: var(--surface); border: 1px solid #CBD3CD; color: var(--ink); }
html[data-site-look="clean-paper"][data-theme="dark"] button.btn.secondary,
html[data-site-look="clean-paper"][data-theme="dark"] a.btn.secondary { border-color: #3A433E; }
html[data-site-look="clean-paper"] input,
html[data-site-look="clean-paper"] select,
html[data-site-look="clean-paper"] textarea { border-radius: 12px; border-color: #D6DBD5; min-height: 46px; }
html[data-site-look="clean-paper"][data-theme="dark"] input,
html[data-site-look="clean-paper"][data-theme="dark"] select,
html[data-site-look="clean-paper"][data-theme="dark"] textarea { border-color: var(--line); }
html[data-site-look="clean-paper"] .electric-toggle,
html[data-site-look="clean-paper"] .drp-trigger { border-radius: 12px; }
html[data-site-look="clean-paper"] .electric-toggle { background: var(--surface-sunken); border-color: var(--line); }
html[data-site-look="clean-paper"] .category-card { border-radius: 16px; overflow: hidden; box-shadow: var(--cp-card-shadow); }
html[data-site-look="clean-paper"] .category-card .cc-select { text-transform: none; letter-spacing: 0; font-weight: 800; }
html[data-site-look="clean-paper"] .pitch-chip { border-radius: 12px; }
html[data-site-look="clean-paper"] .drp-popover { border-radius: 16px; }
html[data-site-look="clean-paper"] .drp-day { border-radius: 10px; }
html[data-site-look="clean-paper"] .price-summary .row { font-variant-numeric: tabular-nums; }
html[data-site-look="clean-paper"] .status-tag { text-transform: none; letter-spacing: 0; }
html[data-site-look="clean-paper"] table th { text-transform: none; letter-spacing: 0; font-size: 0.8rem; color: var(--muted); }