/* ===== SMUDGE CAL.COM THEME v12.1 ===== */
/* v12: Fixed comma-separated selector bug — form page rules were leaking to calendar page */
/* v12.1: Fixed date alignment (header gap mismatch) + timeslots padding */

/* Embed wrapper: strip default Cal.com chrome (grey border, white bg) */
main, main > div, [data-testid="main-container"],
body > div:first-child, #__next > div:first-child {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hide header controls, timezone, time format toggle */
.fixed.top-4{display:none!important}
[data-testid="event-meta-current-timezone"]{display:none!important}
*:has(>[data-testid="toggle-group-item-h:mma"]){display:none!important}

/* ===== LAYOUT: Compact ===== */
[data-testid="booker-container"]{
  grid-template-columns:0px 1fr 240px!important;
  max-width:720px!important;
  margin:0 auto!important;
  background-color:#ec6f86!important;
  border:none!important;
  border-radius:20px!important;
  overflow:hidden!important;
}

/* Form page: flex column so container height includes buttons, no gaps */
[data-testid="booker-container"]:has(input[name]){
  display:flex!important;
  flex-direction:column!important;
  max-width:740px!important;
  padding:40px!important;
  gap:0!important;
}
/* Form page: all children → white with rounded corners inside melon frame */
[data-testid="booker-container"]:has(input[name])>div[class*="grid-area\:main"],
[data-testid="booker-container"]:has(input[name])>div:last-child,
[data-testid="booker-container"]:has(input[name])>div{
  background-color:white!important;
  border-radius:16px!important;
  border:none!important;
  margin:0!important;
}
[data-testid="booker-container"]:has(input[name])>div[class*="grid-area\:main"]{
  width:100%!important;
  max-width:none!important;
}

/* Hide event meta sidebar */
[data-testid="booker-container"]>div[class*="grid-area\:meta"]{display:none!important;width:0!important}

/* Remove ALL borders on grid children */
[data-testid="booker-container"]>div{border:none!important}

/* Main calendar area → melon bg */
[data-testid="booker-container"]>div[class*="grid-area\:main"]{
  background-color:#ec6f86!important;
}

/* Vertical divider between calendar and timeslots */
[data-testid="booker-container"]>div[class*="grid-area\:timeslots"]{
  border-left:1px solid rgba(255,255,255,0.25)!important;
  background-color:#ec6f86!important;
  padding:17px 20px 12px!important;
  width:100%!important;
  max-width:240px!important;
}

/* Fix date alignment: header row uses gap-4 (16px) but date grid uses gap-1 (4px) → columns misalign */
[data-testid="booker-container"] .grid.grid-cols-7{gap:4px!important}

/* Melon backgrounds for all grid cells (not time buttons or form inputs) */
[data-testid="booker-container"] .bg-default:not([data-testid="time"]):not(input):not(textarea):not(select),
[data-testid="booker-container"] .bg-muted:not(input):not(textarea):not(select){background-color:#ec6f86!important}

/* ===== CALENDAR PAGE THEME ===== */
:root{--cal-brand:#099f4a!important;--cal-brand-text:#fff!important}

/* Scope melon bg to booker container only — prevents filling full iframe in modal embed */
[data-testid="booker-container"] .bg-subtle{background-color:#ec6f86!important}

/* Embed modal: transparent page bg so Cal.com modal backdrop shows through */
body{background-color:transparent!important}

/* Month/year text → white */
[data-testid="booker-container"] time,
[data-testid="booker-container"] time *{color:white!important}

/* Day-of-week headers → subtle white */
[data-testid="booker-container"] .text-default{color:rgba(255,255,255,0.7)!important;font-weight:500!important;letter-spacing:0.02em!important}
[data-testid="booker-container"] .text-emphasis{color:rgba(255,255,255,0.95)!important}

/* Nav arrows */
[data-testid="incrementMonth"],
[data-testid="decrementMonth"]{background-color:rgba(255,255,255,0.2)!important;border-radius:50%!important;width:36px!important;height:36px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;transition:background-color 0.15s ease!important}
[data-testid="incrementMonth"]:hover,
[data-testid="decrementMonth"]:hover{background-color:rgba(255,255,255,0.35)!important}
[data-testid="incrementMonth"] svg,
[data-testid="decrementMonth"] svg{color:white!important}

/* Disabled dates */
[data-testid="day"]:disabled,
[data-testid="day"][data-disabled="true"]{color:rgba(255,255,255,0.5)!important;background-color:transparent!important;font-weight:400!important;text-decoration:line-through!important;text-decoration-color:rgba(255,255,255,0.3)!important}

/* Available dates → solid white pill, black text */
[data-testid="day"].bg-emphasis,
[data-testid="day"][data-disabled="false"]:not(.bg-brand-default){background-color:white!important;color:#231f20!important;font-weight:700!important;text-decoration:none!important;box-shadow:0 1px 3px rgba(0,0,0,0.08)!important;transition:box-shadow 0.15s ease,transform 0.1s ease!important}
[data-testid="day"][data-disabled="false"]:not(.bg-brand-default):hover{background-color:white!important;box-shadow:0 2px 8px rgba(0,0,0,0.15)!important;transform:scale(1.05)!important}

/* Selected date → green bg, white text */
[data-testid="day"].bg-brand-default{background-color:#099f4a!important;color:white!important;font-weight:700!important;text-decoration:none!important;box-shadow:0 2px 8px rgba(0,0,0,0.2)!important}

/* Timeslots panel text → white */
[data-testid="booker-container"]>div[class*="grid-area\:timeslots"] .text-emphasis,
[data-testid="booker-container"]>div[class*="grid-area\:timeslots"] .text-default{color:white!important}

/* Time buttons → solid white, green dot, constrained width for melon breathing room */
[data-testid="booker-container"] [data-testid="time"]{
  max-width:calc(100% - 24px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
[data-testid="booker-container"] [data-testid="time"].bg-default{background-color:#ffffff!important;border:1px solid rgba(0,0,0,0.08)!important;color:#231f20!important;border-radius:10px!important;box-shadow:0 1px 3px rgba(0,0,0,0.06)!important;transition:all 0.15s ease!important;position:relative!important;padding-left:32px!important}
[data-testid="booker-container"] [data-testid="time"]::before{content:""!important;position:absolute!important;left:14px!important;top:50%!important;transform:translateY(-50%)!important;width:8px!important;height:8px!important;border-radius:50%!important;background-color:#099f4a!important}
[data-testid="booker-container"] [data-testid="time"] div,
[data-testid="booker-container"] [data-testid="time"] span,
[data-testid="booker-container"] [data-testid="time"] p{color:#231f20!important}
[data-testid="booker-container"] [data-testid="time"]:hover{background-color:#231f20!important;border-color:#231f20!important;box-shadow:0 2px 8px rgba(0,0,0,0.2)!important}
[data-testid="booker-container"] [data-testid="time"]:hover::before{background-color:#fff!important}
[data-testid="booker-container"] [data-testid="time"]:hover div,
[data-testid="booker-container"] [data-testid="time"]:hover span,
[data-testid="booker-container"] [data-testid="time"]:hover p{color:white!important}

/* ===== HIDE "Seats available" indicator ===== */
/* Time text lives in a <div>, seats text lives in a <p> — hide all <p> inside time buttons */
[data-testid="time"] p,
[data-testid="time"] [class*="text-xs"],
[data-testid="time"] [class*="text-subtle"],
[data-testid="time"] [class*="seats"],
[data-testid="time"] [data-testid*="seats"]{
  display:none!important;
}

/* ===== FORM PAGE: White Card on Melon ===== */
/* Container > * rule handles white bg. Main area gets padding. */
[data-testid="booker-container"]>div[class*="grid-area\:main"]:has(input){
  padding:28px 32px 16px!important;
}
/* Button footer padding — space between disclaimer and buttons */
[data-testid="booker-container"]:has(input[name])>div:last-child{
  padding:24px 32px 28px!important;
}

/* Date banner — bold black text, not a button */
#smudge-dt{
  background:none!important;
  color:#231f20!important;
  border-radius:0!important;
  padding:0!important;
  text-align:center!important;
  font-weight:700!important;
  font-size:18px!important;
  margin:0 0 24px 0!important;
  letter-spacing:0.01em!important;
}

/* Form labels → black (only on form page) */
[data-testid="booker-container"]>div[class*="grid-area\:main"]:has(input) label,
[data-testid="booker-container"]>div[class*="grid-area\:main"]:has(input) p,
[data-testid="booker-container"]>div[class*="grid-area\:main"]:has(input) .text-default,
[data-testid="booker-container"]>div[class*="grid-area\:main"]:has(input) .text-emphasis,
[data-testid="booker-container"]>div[class*="grid-area\:main"]:has(input) span{
  color:#231f20!important;
}

/* Form inputs — exclude radio/checkbox (only on form page) */
[data-testid="booker-container"]>div[class*="grid-area\:main"]:has(input) input:not([type="radio"]):not([type="checkbox"]),
[data-testid="booker-container"]>div[class*="grid-area\:main"]:has(input) textarea,
[data-testid="booker-container"]>div[class*="grid-area\:main"]:has(input) select{
  background:#f7f7f7!important;
  border:1px solid #e0e0e0!important;
  color:#231f20!important;
  border-radius:8px!important;
}

[data-testid="booker-container"]>div[class*="grid-area\:main"]:has(input) input:focus,
[data-testid="booker-container"]>div[class*="grid-area\:main"]:has(input) textarea:focus{
  border-color:#231f20!important;
  outline:none!important;
  box-shadow:0 0 0 2px rgba(35,31,32,0.1)!important;
}
[data-testid="booker-container"]>div[class*="grid-area\:main"]:has(input) input::placeholder,
[data-testid="booker-container"]>div[class*="grid-area\:main"]:has(input) textarea::placeholder{
  color:#999!important;
}

/* Radio circles — Cal.com uses button[role="radio"], not input[type="radio"] */
[data-testid="booker-container"]:has(input[name]) button[role="radio"]{
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  max-width:16px!important;
  min-height:16px!important;
  max-height:16px!important;
  border-radius:50%!important;
  background:white!important;
  border:2px solid #ccc!important;
  padding:0!important;
  box-shadow:none!important;
  flex-shrink:0!important;
  transition:border-color 0.15s ease,background 0.15s ease!important;
}
[data-testid="booker-container"]:has(input[name]) button[role="radio"][data-state="checked"]{
  border-color:#231f20!important;
  background:#231f20!important;
}

/* Form links (only on form page) */
[data-testid="booker-container"]>div[class*="grid-area\:main"]:has(input) a{
  color:#236eaf!important;
  text-decoration:underline!important;
}

/* Action buttons — targeted by data-testid so radio buttons are never hit */
[data-testid="booker-container"]:has(input[name]) button[data-testid="confirm-book-button"],
[data-testid="booker-container"]:has(input[name]) button[data-testid="back"]{
  font-family:'Montserrat',sans-serif!important;
  font-weight:700!important;
  font-size:16px!important;
  text-transform:none!important;
  letter-spacing:normal!important;
  border-radius:50px!important;
  padding:14px 32px!important;
  border:none!important;
  cursor:pointer!important;
  transition:transform 0.15s ease,box-shadow 0.15s ease!important;
}
/* Pay to book — Apple green */
[data-testid="booker-container"]:has(input[name]) button[data-testid="confirm-book-button"]{
  background-color:#099f4a!important;
  color:white!important;
  box-shadow:0 2px 8px rgba(9,159,74,0.3)!important;
}
[data-testid="booker-container"]:has(input[name]) button[data-testid="confirm-book-button"]:hover{
  transform:scale(1.03)!important;
  box-shadow:0 4px 14px rgba(9,159,74,0.4)!important;
}
/* Back — muted grey */
[data-testid="booker-container"]:has(input[name]) button[data-testid="back"]{
  background-color:#f0f0f0!important;
  color:#231f20!important;
  box-shadow:none!important;
}
[data-testid="booker-container"]:has(input[name]) button[data-testid="back"]:hover{
  transform:scale(1.03)!important;
  background-color:#e5e5e5!important;
}
/* Button row spacing */
[data-testid="booker-container"]:has(input[name]) .modalsticky{
  padding-top:20px!important;
}

/* Calendar page link/button colors */
[data-testid="booker-container"]:not(:has(input[name])) a{color:rgba(255,255,255,0.8)!important;text-decoration:underline!important}
[data-testid="booker-container"]:not(:has(input[name])) button:has(+ button){color:white!important;font-weight:600!important}

/* ===== HIDE Cal.com built-in availability dots (we use our own ::before green dot) ===== */
[data-testid="time"] svg,
[data-testid="time"] [class*="dot"],
[data-testid="time"] [class*="availability"],
[data-testid="time"] span[class*="bg-"],
[data-testid="time"] div[class*="bg-"]:not([class*="bg-default"]) {
  display: none !important;
}

/* Form page: kill melon bleed-through on .bg-default/.bg-muted elements (higher specificity than line 65) */
[data-testid="booker-container"]:has(input[name]) .bg-default:not([data-testid="time"]),
[data-testid="booker-container"]:has(input[name]) .bg-muted{background-color:white!important}
[data-testid="booker-container"]:has(input[name]) .bg-subtle{background-color:white!important}

/* Dropdown/popover white background */
[data-testid="booker-container"] [role="listbox"],
[data-testid="booker-container"] [role="option"],
[data-testid="booker-container"] [data-radix-popper-content-wrapper],
[data-testid="booker-container"] [data-radix-popper-content-wrapper] div,
[data-testid="booker-container"] [data-radix-menu-content],
[data-testid="booker-container"] ul[role="listbox"],
[data-testid="booker-container"] div[class*="popover"],
[data-testid="booker-container"] div[class*="dropdown"],
[data-testid="booker-container"] div[class*="select"] > div {
  background-color: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
[data-testid="booker-container"] [role="option"] {
  background-color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  color: #231f20 !important;
}
[data-testid="booker-container"] [role="option"]:hover,
[data-testid="booker-container"] [role="option"][data-highlighted] {
  background-color: #ec6f86 !important;
  color: #ffffff !important;
}