/* ============================================================
   MELANATED BEAUTY SPA — Cal.com brand overrides
   Paste this into Cal.com → Settings → Appearance → Custom CSS
   (Self-hosted instance at book.melanatedbeautyspa.com)

   Goal: pull Cal.com into the MBS visual vocabulary —
   warm near-black, gold accents, Inter light, ALL-CAPS headings.
   Matches the staging.melanatedbeautyspa.com brand DNA.
   ============================================================ */

/* ─── 1. Color tokens: remap Cal.com's design system to MBS palette ─── */
html.dark, .dark, :root.dark {
  --cal-bg: #1a1a1a !important;
  --cal-bg-subtle: #0d0d0d !important;
  --cal-bg-emphasis: #2a2520 !important;
  --cal-bg-muted: #1a1a1a !important;
  --cal-bg-inverted: #f8f5f0 !important;

  --cal-border: rgba(212, 168, 83, 0.2) !important;
  --cal-border-subtle: rgba(212, 168, 83, 0.1) !important;
  --cal-border-emphasis: #8B6914 !important;
  --cal-border-booker: rgba(212, 168, 83, 0.15) !important;

  --cal-text: #f8f5f0 !important;
  --cal-text-emphasis: #ffffff !important;
  --cal-text-subtle: #d4c4a8 !important;
  --cal-text-muted: #a8a098 !important;

  --cal-brand: #8B6914 !important;
  --cal-brand-emphasis: #D4A853 !important;
  --cal-brand-text: #f8f5f0 !important;

  --cal-bg-brand: #8B6914 !important;
  --cal-bg-brand-emphasis: #D4A853 !important;
  --cal-bg-brand-muted: rgba(139, 105, 20, 0.18) !important;
}

/* ─── 2. Typography: Inter light weight + ALL-CAPS letterspacing ─── */
body, .font-cal {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

h1, h2,
[data-testid="name-title"],
[data-testid="event-title"],
[data-testid="event-types"] h2 {
  font-weight: 300 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

[data-testid="name-title"] {
  font-size: 1.5rem !important;
  letter-spacing: 0.12em !important;
}

/* ─── 3. Profile-page event list: more breathing room ─── */
[data-testid="event-types"] {
  background: transparent !important;
  border: 1px solid rgba(212, 168, 83, 0.12) !important;
}

[data-testid="event-type-link"] {
  padding: 1.5rem 1.5rem !important;
  background: transparent !important;
  border-color: rgba(212, 168, 83, 0.1) !important;
  transition: background-color 0.3s ease !important;
}

[data-testid="event-type-link"]:hover {
  background: rgba(139, 105, 20, 0.08) !important;
}

/* ─── 4. Time-slot picker: gold-outlined pills, gold fill on hover ─── */
button[data-testid*="time"] {
  border: 1px solid rgba(212, 168, 83, 0.3) !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
  transition: all 0.2s ease !important;
}

button[data-testid*="time"]:hover {
  background: #8B6914 !important;
  border-color: #8B6914 !important;
  color: #f8f5f0 !important;
}

/* ─── 5. Calendar: selected day + today indicator in MBS gold ─── */
[role="gridcell"] button[aria-pressed="true"],
[role="gridcell"] button[aria-selected="true"],
[role="gridcell"] button[data-state="selected"] {
  background: #8B6914 !important;
  color: #f8f5f0 !important;
}

[role="gridcell"] button {
  transition: background-color 0.2s ease !important;
}

[role="gridcell"] button:not(:disabled):hover {
  background: rgba(139, 105, 20, 0.2) !important;
}

/* ─── 6. Hide chrome that doesn't belong on a branded booking page ─── */

/* Cal.com footer "Powered by" branding */
footer a[href*="cal.com"],
a[href="https://cal.com"],
[class*="powered-by"],
[data-testid="powered-by-cal"] {
  display: none !important;
}

/* "Overlay my calendar" toggle — hidden via targeted class selector */
.md\:flex.gap-2:has([data-testid="overlay-calendar-switch"]) {
  display: none !important;
}

/* ─── 7. Scrollbar — match the warm palette ─── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0d0d0d; }
::-webkit-scrollbar-thumb {
  background: rgba(212, 168, 83, 0.22);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 168, 83, 0.45);
}