/**
 * Dr. Gad booking widget — "Enamel" styling. Uses the theme's --wp--preset--*
 * tokens with hard fallbacks, so it stays on-brand but works with any theme.
 */
.dg-book{
	--dgb-petrol:var(--wp--preset--color--petrol,#0C3A40);
	--dgb-petrol2:var(--wp--preset--color--petrol-2,#16565E);
	--dgb-ink:var(--wp--preset--color--ink,#12211F);
	--dgb-stone:var(--wp--preset--color--stone,#63706C);
	--dgb-line:var(--wp--preset--color--line,#E2E6E3);
	--dgb-field:#A6B2AE; /* form-field borders: the hairline --line is invisible on white — fields need a step more contrast */
	--dgb-porcelain:var(--wp--preset--color--porcelain,#F2F5F4);
	--dgb-rose:var(--wp--preset--color--rose-ink,#9B565B);
	--dgb-white:#fff;
	--dgb-sans:var(--wp--preset--font-family--inter,"Inter",system-ui,sans-serif);
	--dgb-serif:var(--wp--preset--font-family--cormorant,"Cormorant Garamond",Georgia,serif);
	font-family:var(--dgb-sans);color:var(--dgb-ink);
	max-width:600px;margin-inline:auto;
	background:var(--dgb-white);border:1px solid var(--dgb-line);
	padding:clamp(1.5rem,4vw,2.5rem);
}
.dg-book *{box-sizing:border-box}

/* progress */
.dg-book__progress{display:flex;gap:.5rem;list-style:none;margin:0 0 2rem;padding:0;counter-reset:dgb}
.dg-book__progress li{flex:1;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;color:var(--dgb-stone);padding-top:.7rem;border-top:2px solid var(--dgb-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-book__progress li.is-active{color:var(--dgb-petrol);border-top-color:var(--dgb-petrol)}
.dg-book__progress li.is-done{color:var(--dgb-ink);border-top-color:var(--dgb-petrol)}

/* live status */
.dg-book__live{min-height:1.2rem;margin:0 0 1rem;font-size:.9rem;color:var(--dgb-stone)}
.dg-book__live:empty{display:none}
.dg-book__live.is-error{color:#9a2b2b}

/* step heading */
.dg-book__h{font-family:var(--dgb-serif);font-weight:500;font-size:clamp(1.5rem,3.5vw,2rem);line-height:1.1;letter-spacing:-.01em;margin:0 0 1.4rem;outline:none}

/* option cards (service / practitioner) */
.dg-book__options{display:flex;flex-direction:column;gap:.6rem}
.dg-book__opt{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;text-align:left;
	background:var(--dgb-porcelain);border:1px solid var(--dgb-line);padding:1rem 1.1rem;cursor:pointer;font-family:inherit;color:inherit;transition:border-color .15s,background .15s}
.dg-book__opt:hover{border-color:var(--dgb-petrol);background:var(--dgb-white)}
.dg-book__opt.is-selected{border-color:var(--dgb-petrol);background:var(--dgb-white);box-shadow:inset 0 0 0 1px var(--dgb-petrol)}
.dg-book__opt-name{font-weight:600;font-size:1.02rem}
.dg-book__opt-meta{font-size:.82rem;color:var(--dgb-stone);flex:none}

/* date + times */
.dg-book__field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.dg-book__field span{font-size:.85rem;font-weight:600}
.dg-book__field em{font-weight:400;color:var(--dgb-stone);font-style:normal}
/* The border/background carry !important on purpose: the widget renders into
   arbitrary live pages (theme updates, page builders, optimizer plugins) and a
   field with no visible box is a broken form. Tightly scoped to .dg-book, so
   nothing outside the widget is touched. */
.dg-book input,.dg-book textarea{font-family:inherit;font-size:1rem;color:inherit;background:var(--dgb-white) !important;
	border:1px solid var(--dgb-field) !important;box-shadow:none !important;padding:.75rem .9rem;width:100%}
.dg-book input:focus,.dg-book textarea:focus{outline:2px solid var(--dgb-rose);outline-offset:1px;border-color:var(--dgb-petrol) !important}
.dg-book__hint{font-size:.82rem;color:var(--dgb-stone);margin:-.3rem 0 1rem}
.dg-book__loading,.dg-book__empty{font-size:.92rem;color:var(--dgb-stone);margin:.4rem 0}
.dg-book__loading.is-error,.dg-book__empty.is-error{color:#9a2b2b}

/* date pill row — the next ~3 weeks as tappable days (weekday/number/month).
   Horizontally scrollable; pills mirror the service/dentist option cards:
   visible border, petrol hover, petrol fill when selected. Disabled = closed
   day (from settings) — visibly greyed and not tappable. */
.dg-book__days{display:flex;gap:.5rem;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--dgb-line) transparent}
.dg-book__days::-webkit-scrollbar{height:6px}
.dg-book__days::-webkit-scrollbar-thumb{background:var(--dgb-line)}
.dg-book__day{flex:none;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:.1rem;
	min-width:64px;min-height:72px;padding:.55rem .6rem .5rem;cursor:pointer;font-family:inherit;color:inherit;
	background:var(--dgb-porcelain);border:1px solid var(--dgb-line);transition:border-color .15s,background .15s}
/* :not(:disabled):not(.is-selected) — the :not()s raise specificity above
   .is-selected, so hover must exclude it or the petrol fill turns white under
   the cursor right after clicking (white-on-white text). */
.dg-book__day:hover:not(:disabled):not(.is-selected){border-color:var(--dgb-petrol);background:var(--dgb-white)}
.dg-book__day-wd{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dgb-stone)}
.dg-book__day-no{font-family:var(--dgb-serif);font-size:1.45rem;font-weight:600;line-height:1.1}
.dg-book__day-mo{font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dgb-stone)}
.dg-book__day.is-selected{background:var(--dgb-petrol);border-color:var(--dgb-petrol);color:#fff}
.dg-book__day.is-selected .dg-book__day-wd,.dg-book__day.is-selected .dg-book__day-mo{color:rgba(255,255,255,.75)}
.dg-book__day:disabled{cursor:not-allowed;background:transparent;border-style:dashed;color:var(--dgb-stone);opacity:.55}

/* month marker where the pill row crosses into a new month */
.dg-book__day-month{flex:none;align-self:center;writing-mode:vertical-rl;text-orientation:mixed;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dgb-stone);padding:.2rem 0;border-left:1px solid var(--dgb-line);margin:0 .15rem}

/* time pills. Exactly ONE visual vocabulary:
   - selected  = petrol fill (the only "active" look)
   - focus     = rose ring, offset outside the pill — clearly not selection
   - hover     = petrol border, only on devices that truly hover (touch taps
     otherwise leave a lingering hover that reads as a second active pill),
     and never on the selected pill (specificity: the :not()s outrank
     .is-selected — without them a click-then-hover washed the fill out). */
.dg-book__times{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.dg-book__time{background:var(--dgb-white);border:1px solid var(--dgb-line);padding:.6rem .9rem;font-family:inherit;font-size:.9rem;color:inherit;cursor:pointer;transition:border-color .15s,color .15s}
@media(hover:hover){
	.dg-book__time:hover:not(.is-selected){border-color:var(--dgb-petrol);color:var(--dgb-petrol)}
}
.dg-book__time:focus-visible{outline:2px solid var(--dgb-rose);outline-offset:2px}
.dg-book__time.is-selected{background:var(--dgb-petrol);border-color:var(--dgb-petrol);color:#fff}

/* consent + honeypot */
.dg-book__consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--dgb-stone);line-height:1.5;margin-top:.4rem}
.dg-book__consent input{width:1.05rem;height:1.05rem;margin-top:.2rem;flex:none;accent-color:var(--dgb-petrol)}
.dg-book__consent a{color:var(--dgb-petrol)}
.dg-book__hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}

/* summary */
.dg-book__summary{margin:0;border-top:1px solid var(--dgb-line)}
.dg-book__summary>div{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--dgb-line)}
.dg-book__summary dt{color:var(--dgb-stone);font-size:.9rem;margin:0}
.dg-book__summary dd{margin:0;font-weight:600;text-align:right}

/* success */
.dg-book__success{text-align:center;padding:1rem 0}
.dg-book__tick{width:56px;height:56px;border-radius:50%;background:var(--dgb-petrol);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 1.2rem}
.dg-book__success p{color:var(--dgb-stone);line-height:1.6;margin:.6rem 0}
.dg-book__success a{color:var(--dgb-petrol);font-weight:600}

/* nav buttons */
.dg-book__nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem}
.dg-book__nav:has(.dg-book__back[hidden]){justify-content:flex-end}
.dg-book__btn{font-family:inherit;font-weight:600;font-size:.95rem;padding:.9rem 1.6rem;border:1px solid transparent;cursor:pointer;line-height:1;transition:background .15s,border-color .15s,color .15s}
.dg-book__btn--primary{background:var(--dgb-petrol);color:#fff}
.dg-book__btn--primary:hover:not(:disabled){background:var(--dgb-petrol2)}
.dg-book__btn--primary:disabled{opacity:.45;cursor:not-allowed}
.dg-book__btn--primary.is-loading{opacity:.7;cursor:progress}
.dg-book__btn--ghost{background:transparent;color:var(--dgb-ink);border-color:var(--dgb-line)}
.dg-book__btn--ghost:hover{border-color:var(--dgb-petrol);color:var(--dgb-petrol)}

.dg-book__noscript{color:var(--dgb-stone)}

@media(max-width:480px){
	.dg-book__progress li{font-size:0;padding-top:.5rem}
	.dg-book__opt{flex-direction:column;align-items:flex-start;gap:.2rem}
}

/* manage page (/appointment/) */
.dg-manage__h{font-family:var(--dgb-serif);font-weight:500;font-size:1.4rem;line-height:1.15;margin:1.6rem 0 .8rem}
.dg-manage__note{color:var(--dgb-stone);font-size:.95rem;line-height:1.5;margin:.4rem 0 1rem}
.dg-manage__note a,.dg-book__success a{color:var(--dgb-petrol);font-weight:600}
/* "Confirm new time" needs air above the time pills, and the Reschedule /
   Cancel sections must read as two distinct actions — generous space around
   the divider, not one crowded block. */
.dg-manage__confirm{margin-top:1.5rem}
.dg-manage__cancel{margin-top:1rem}
.dg-manage__rule{border:none;border-top:1px solid var(--dgb-line);margin:2.75rem 0 2.25rem}
.dg-manage .dg-book__summary{margin-bottom:1.4rem}
.dg-book__btn.is-armed{background:#9a2b2b;border-color:#9a2b2b;color:#fff}
.dg-book__tick--muted{background:var(--dgb-stone)}