/*
 * BDA Cal.com — Workout-Advisor Skin (v3, navy surface)
 * Path A: token-driven skin via nginx sub_filter injection
 * Matches apply-form navy treatment (apply.businessdebtadjusters.net)
 * Vibe: "Serious workout firm. Quiet authority. No marketing fluff."
 */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

/* =========================================================================
   1 — Design tokens (navy surface, white type, cyan accent)
   ========================================================================= */

:root,
html,
html.light,
html[data-theme="light"],
html.dark,
html[data-theme="dark"] {
  --bda-navy:       #2b3566;
  --bda-navy-deep:  #1A2148;
  --bda-navy-bg:    #0F1A3A;   /* page background */
  --bda-navy-card:  #1A2148;   /* card surface */
  --bda-navy-line:  #2A356B;   /* hairline rule on navy */
  --bda-cyan:       #3FB6F0;
  --bda-cyan-soft:  rgba(63, 182, 240, 0.16);

  --bda-paper:      #FFFFFF;
  --bda-ink:        #FFFFFF;             /* primary text on navy */
  --bda-ink-2:      rgba(255,255,255,0.72);
  --bda-ink-3:      rgba(255,255,255,0.52);
  --bda-rule:       rgba(255,255,255,0.12);
  --bda-rule-2:     rgba(255,255,255,0.20);
  --bda-success:    #4ADE80;
  --bda-alert:      #FCA5A5;

  --bda-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --bda-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --bda-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --cal-bg:               var(--bda-navy-bg) !important;
  --cal-bg-emphasis:      var(--bda-navy-card) !important;
  --cal-bg-subtle:        var(--bda-navy-card) !important;
  --cal-bg-muted:         var(--bda-navy-deep) !important;
  --cal-bg-inverted:      var(--bda-paper) !important;

  --cal-border:           var(--bda-rule) !important;
  --cal-border-subtle:    var(--bda-rule) !important;
  --cal-border-emphasis:  var(--bda-rule-2) !important;
  --cal-border-booker:    var(--bda-rule-2) !important;

  --cal-text:             var(--bda-ink) !important;
  --cal-text-emphasis:    var(--bda-ink) !important;
  --cal-text-subtle:      var(--bda-ink-2) !important;
  --cal-text-muted:       var(--bda-ink-2) !important;
  --cal-text-inverted:    var(--bda-navy-deep) !important;

  --cal-brand:            var(--bda-cyan) !important;
  --cal-brand-emphasis:   var(--bda-cyan) !important;
  --cal-brand-text:       var(--bda-navy-deep) !important;
  --cal-brand-subtle:     var(--bda-cyan-soft) !important;
}

/* =========================================================================
   2 — Global type + body
   ========================================================================= */

html, body {
  background: var(--bda-navy-bg) !important;
  font-family: var(--bda-sans) !important;
  color: var(--bda-ink) !important;
}

main,
[class*="bg-default"],
[class*="bg-subtle"],
[class*="bg-muted"] {
  background-color: var(--bda-navy-bg) !important;
  color: var(--bda-ink) !important;
}

h1, h2, h3, .text-2xl, .text-3xl, .text-4xl,
[data-testid="event-title"],
[data-testid="profile-name"] {
  font-family: var(--bda-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--bda-ink) !important;
}

[data-testid="event-title"] {
  font-size: 28px !important;
  line-height: 1.15 !important;
}

[data-testid="event-meta"] *,
[data-testid="organizer-name"] {
  font-family: var(--bda-sans) !important;
  color: var(--bda-ink-2) !important;
}

[data-testid="timezone-select"],
[data-testid="event-duration"] span,
.text-xs.font-medium.uppercase,
.uppercase.tracking-wider,
button[aria-label*="timezone" i] span {
  font-family: var(--bda-mono) !important;
  letter-spacing: 0.06em !important;
  font-size: 11px !important;
  color: var(--bda-ink-2) !important;
}

/* =========================================================================
   3 — Booker card (the "document")
   ========================================================================= */

[data-testid="booker-container"],
[class*="border-booker"],
[data-booker-layout] {
  background: var(--bda-navy-card) !important;
  border: 1px solid var(--bda-rule-2) !important;
  border-radius: 6px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 20px 60px -30px rgba(0,0,0,0.6) !important;
  position: relative !important;
  padding-top: 44px !important;
  color: var(--bda-ink) !important;
}

[data-testid="booker-container"] > *,
[data-booker-layout] > * {
  background: transparent !important;
  color: inherit !important;
}

[data-testid="event-meta"] {
  border-bottom: 1px solid var(--bda-rule) !important;
  padding-bottom: 16px !important;
}

/* =========================================================================
   4 — Day picker calendar
   ========================================================================= */

button.rounded-md.border-2:not(:disabled) {
  border-radius: 4px !important;
  font-family: var(--bda-sans) !important;
  color: var(--bda-ink) !important;
  background: transparent !important;
  font-weight: 600 !important;
  border-color: transparent !important;
  border-width: 1px !important;
  transition: all 120ms ease !important;
}

button.rounded-md.border-2:not(:disabled):hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--bda-cyan) !important;
  border-color: var(--bda-rule-2) !important;
}

/* Available day (has slots) — soft cyan-tinted */
button.rounded-md.border-2.bg-emphasis:not(:disabled) {
  background: rgba(63,182,240,0.10) !important;
  color: var(--bda-ink) !important;
  border-color: var(--bda-rule-2) !important;
  font-weight: 700 !important;
}

button.rounded-md.border-2.bg-emphasis:not(:disabled):hover {
  background: var(--bda-cyan-soft) !important;
  border-color: var(--bda-cyan) !important;
  color: var(--bda-paper) !important;
}

/* Selected / active day — solid cyan fill, dark text */
button.rounded-md.border-2.bg-brand-default,
button.rounded-md.border-2.bg-brand,
button.rounded-md.border-2.bg-brand-500 {
  background: var(--bda-cyan) !important;
  color: var(--bda-navy-deep) !important;
  border-color: var(--bda-cyan) !important;
  border-width: 1px !important;
}

/* Disabled days */
button.rounded-md.border-2:disabled {
  color: var(--bda-ink-3) !important;
  opacity: 0.45 !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* Month nav arrows */
button[aria-label*="month" i],
button[aria-label*="prev" i] svg,
button[aria-label*="next" i] svg {
  color: var(--bda-ink) !important;
}

/* Weekday header row (SUN MON TUE ...) — mono caps */
header.mb-3 span.text-emphasis {
  font-family: var(--bda-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--bda-ink-2) !important;
  font-weight: 600 !important;
}

/* =========================================================================
   5 — Time slot list (right column)
   ========================================================================= */

[data-testid="time"],
button[data-testid="time"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--bda-rule-2) !important;
  color: var(--bda-ink) !important;
  font-family: var(--bda-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  border-radius: 4px !important;
  transition: all 140ms ease !important;
}

[data-testid="time"]:hover {
  background: var(--bda-cyan) !important;
  color: var(--bda-navy-deep) !important;
  border-color: var(--bda-cyan) !important;
  box-shadow: 0 0 0 2px rgba(63,182,240,0.25) !important;
}

[data-testid="time"][aria-selected="true"],
[data-testid="time"].bg-brand,
[data-testid="time"].bg-brand-500 {
  background: var(--bda-cyan) !important;
  color: var(--bda-navy-deep) !important;
  border-color: var(--bda-cyan) !important;
}

/* =========================================================================
   6 — Buttons (Confirm, Next, etc.)
   ========================================================================= */

button.bg-brand,
button.bg-brand-default,
button.bg-brand-500,
button[data-testid="confirm-book-button"],
button[type="submit"] {
  background: var(--bda-cyan) !important;
  color: var(--bda-navy-deep) !important;
  border-color: var(--bda-cyan) !important;
  font-family: var(--bda-sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-radius: 4px !important;
  transition: all 140ms ease !important;
}

button.bg-brand:hover,
button[data-testid="confirm-book-button"]:hover,
button[type="submit"]:hover {
  background: var(--bda-paper) !important;
  color: var(--bda-navy-deep) !important;
  box-shadow: 0 0 0 2px rgba(63,182,240,0.35) !important;
}

button.border-default,
button[class*="bg-empty"],
button[data-testid="back"] {
  background: transparent !important;
  color: var(--bda-ink) !important;
  border: 1px solid var(--bda-rule-2) !important;
  font-family: var(--bda-sans) !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
}

button.border-default:hover,
button[data-testid="back"]:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--bda-cyan) !important;
}

/* =========================================================================
   7 — Form inputs (booking form step)
   ========================================================================= */

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea,
form select,
form [data-testid*="input"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--bda-rule-2) !important;
  border-radius: 4px !important;
  color: var(--bda-ink) !important;
  font-family: var(--bda-sans) !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  transition: border-color 140ms ease, box-shadow 140ms ease !important;
}

form input::placeholder,
form textarea::placeholder {
  color: var(--bda-ink-3) !important;
}

/* Timezone search input — DO NOT inherit form-input padding */
[data-testid="timezone-select"] input,
[class*="timezone"] input,
[aria-label*="timezone" i] input {
  padding: 2px 4px !important;
  font-size: 13px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bda-ink) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--bda-cyan) !important;
  box-shadow: 0 0 0 3px rgba(63,182,240,0.20) !important;
  outline: none !important;
}

label, .text-emphasis {
  font-family: var(--bda-sans) !important;
  font-weight: 600 !important;
  color: var(--bda-ink) !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
}

/* =========================================================================
   8 — Doc-stamp header overlay (top of every booker page)
   ========================================================================= */

[data-testid="booker-container"]::before,
[data-booker-layout]::before {
  content: "CONFIDENTIAL  ·  MCA WORKOUT INTAKE";
  position: absolute;
  top: 16px;
  left: 22px;
  font-family: var(--bda-mono) !important;
  font-size: 9.5px;
  letter-spacing: 0.20em;
  color: var(--bda-cyan);
  opacity: 0.78;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
}

/* Hairline accent on the right side of the stamp area */
[data-testid="booker-container"]::after,
[data-booker-layout]::after {
  content: "";
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--bda-rule);
  pointer-events: none;
}

/* =========================================================================
   9 — Confirmation page (post-booking)
   ========================================================================= */

[data-testid="success-page"],
[data-testid="success-page"] > div {
  background: var(--bda-navy-card) !important;
  border: 1px solid var(--bda-rule-2) !important;
  border-radius: 6px !important;
  color: var(--bda-ink) !important;
}

[data-testid="success-page"] h1,
[data-testid="success-page"] h2 {
  font-family: var(--bda-serif) !important;
  color: var(--bda-ink) !important;
}

[data-testid="success-page"] svg.text-default {
  color: var(--bda-success) !important;
}

/* =========================================================================
   10 — Mobile (≤ 640px)
   ========================================================================= */

@media (max-width: 640px) {
  [data-testid="event-title"] {
    font-size: 22px !important;
  }
  [data-testid="booker-container"],
  [data-booker-layout] {
    padding-top: 40px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  [data-testid="booker-container"]::before,
  [data-booker-layout]::before {
    font-size: 8.5px;
    left: 14px;
    top: 13px;
  }
}

/* =========================================================================
   11 — Hide Cal.com chrome + redundant labels
   ========================================================================= */

a[href*="cal.com/?utm"],
[data-testid="branding"] {
  display: none !important;
}

/* Hide ALL secondary lines in event-meta header
   (kills "BDA Sales", "2 location options", etc — keeps the title + duration) */
[data-testid="event-meta"] > p.text-subtle.mt-2.text-sm.font-semibold,
[data-testid="event-meta"] > p.text-subtle,
[data-testid="event-meta"] [data-testid*="location"] {
  display: none !important;
}

/* =========================================================================
   12 — Avatar → full BDA wordmark
   ========================================================================= */

[data-testid="event-avatar"] {
  width: auto !important;
  height: 28px !important;
  border: none !important;
  border-radius: 0 !important;
  background: url('/bda-logo.png') no-repeat left center !important;
  background-size: contain !important;
  display: block !important;
  margin-bottom: 14px !important;
}

[data-testid="event-avatar"] img,
[data-testid="event-avatar"] svg {
  opacity: 0 !important;
  width: 140px !important;
  height: 28px !important;
}

/* Hide the standalone organizer-name underneath the avatar
   (wordmark already carries the brand) */
[data-testid="organizer-name"] {
  display: none !important;
}

/* =========================================================================
   13 — Trustpilot Slider mount (injected via /bda-trustpilot.js)
   ========================================================================= */

#bda-tp-slider {
  display: block;
  max-width: 1100px;
  margin: 28px auto 32px;
  padding: 16px 24px 0;
  border-top: 1px solid var(--bda-rule);
}

#bda-tp-slider::before {
  content: "Client reviews · independently verified by Trustpilot";
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bda-ink-3);
  margin: 0 0 14px;
}

#bda-tp-slider .trustpilot-widget {
  background: var(--bda-navy-card);
  border: 1px solid var(--bda-rule);
  border-radius: 6px;
  padding: 12px;
}

@media (max-width: 768px) {
  #bda-tp-slider {
    margin: 20px auto 24px;
    padding: 14px 16px 0;
  }
}