/* =====================================================================
   Premier Detailing — Booking Widget Styles
   In-page 4-step booking flow that mounts into #booking-widget
   Rebuilt 2026-05-18 to match the original design (per Joe's screenshots)
   2026-05-28: Added scoped reset + horizontal date-strip safety rules.
   ===================================================================== */

/* ========== SCOPED RESET ==========
   Prevent browser default styles from leaking into the widget on phones
   where styles.css doesn't reset native form controls. This is the safety
   net for the reported bug where dates appeared as plain vertical text on
   non-Joe phones: native <button> elements fell back to UA defaults
   (display:inline-block, no flex layout, native font-family).            */
.pd-wid,
.pd-wid * { box-sizing: border-box; }
.pd-wid button,
.pd-wid input,
.pd-wid select,
.pd-wid textarea,
.pd-wid label,
.pd-wid [role="button"]{
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: inherit;
  line-height: 1.25;
  color: inherit;
  background: transparent;
  border: 0;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.pd-wid button{ cursor: pointer; }
.pd-wid input,
.pd-wid textarea,
.pd-wid select{
  font-size: 16px;          /* prevents iOS zoom on focus */
  -webkit-text-fill-color: inherit;
}

.pd-wid{
  --gold:#cba871; --gold2:#e4cb94;
  --navy:#03060c; --navy2:#0a1122; --navy3:#141a2b;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --txt:rgba(255,255,255,.92); --mute:rgba(255,255,255,.55);
  --gold-bg:rgba(203,168,113,.10);

  max-width:680px; margin:0 auto; padding:8px 18px 4px;
  font-family:'Inter',-apple-system,system-ui,sans-serif;
  color:var(--txt);
}

/* ========== TOP ROW (back + progress dots + tag) ========== */
.pd-wid .pd-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:6px 0 24px;
  min-height:32px;
}
.pd-wid .pd-back{
  background:transparent; border:none; color:var(--mute);
  font-size:.92rem; font-weight:600; cursor:pointer;
  /* Mobile tap target: 44px+ vertical area without altering visual look */
  padding:12px 12px 12px 0; min-height:44px; flex-shrink:0;
  display:inline-flex; align-items:center; gap:4px;
  font-family:inherit;
}
.pd-wid .pd-back:hover{color:var(--gold);}
.pd-wid .pd-back-spacer{width:50px; flex-shrink:0;}

/* Progress dots */
.pd-wid .pd-steps{
  display:flex; align-items:center; justify-content:center;
  gap:6px; flex:1; min-width:0;
}
.pd-wid .pd-step{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--navy3); border:1px solid var(--line2);
  font-size:.84rem; font-weight:700; color:var(--mute);
  flex-shrink:0; transition:.18s;
}
.pd-wid .pd-step.done{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--navy); border-color:var(--gold);
}
.pd-wid .pd-step.active{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--navy); border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(203,168,113,.18);
}
.pd-wid .pd-bar{
  flex:0 0 20px; height:1.5px; background:rgba(255,255,255,.14);
  border-radius:2px;
}
.pd-wid .pd-bar.done{background:var(--gold);}

/* Current-selection tag at the right of the progress row */
.pd-wid .pd-tag{
  font-size:.88rem; color:var(--mute); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:120px; flex-shrink:0;
}
.pd-wid .pd-tag-empty{width:50px; flex-shrink:0;}

/* ========== STEP HEADING ========== */
.pd-wid h3.pd-h{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.6rem,4.4vw,2rem); font-weight:700;
  color:#fff; text-align:center; margin:6px 0 6px; line-height:1.15;
}
.pd-wid .pd-sub{
  text-align:center; color:var(--mute);
  font-size:.92rem; margin-bottom:22px; line-height:1.45;
  padding:0 8px;
}

/* ========== STEP 1 + 2 — Option cards ========== */
.pd-wid .pd-opts{display:flex; flex-direction:column; gap:12px;}
.pd-wid .pd-opt{
  display:block; width:100%; text-align:left;
  background:var(--navy2); border:1.5px solid rgba(255,255,255,.12);
  border-radius:16px; padding:18px 20px; cursor:pointer;
  transition:.16s; position:relative; font-family:inherit;
}
.pd-wid .pd-opt:hover{
  border-color:rgba(203,168,113,.5);
  background:linear-gradient(135deg,var(--navy3),var(--navy2));
}
.pd-wid .pd-opt.sel{
  border-color:var(--gold);
  background:rgba(203,168,113,.06);
}
.pd-wid .pd-opt-name{
  font-weight:700; font-size:1.18rem; color:#fff;
  margin-bottom:6px; padding-right:36px;
  letter-spacing:-.01em;
}
/* Body copy is the spec-mandated ≥16px (was .92rem / 14.7px) so it stays
   readable without zooming on mobile. */
.pd-wid .pd-opt-desc{
  font-size:1rem; color:var(--mute); line-height:1.5;
  margin-bottom:10px; padding-right:36px;
}
.pd-wid .pd-opt-meta{
  font-size:1rem; color:var(--gold); font-weight:700;
}
.pd-wid .pd-opt.sel::after{
  content:""; position:absolute; top:18px; right:20px;
  width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  /* Checkmark via SVG mask */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='black'/%3E%3C/svg%3E");
}
/* Fallback checkmark using ::before glyph for browsers without mask support */
@supports not (mask-image: url("data:image/svg+xml,%3Csvg/%3E")) {
  .pd-wid .pd-opt.sel::after{
    content:"✓"; display:flex; align-items:center; justify-content:center;
    color:var(--navy); font-weight:900; font-size:.85rem;
    -webkit-mask-image:none; mask-image:none;
  }
}

/* ========== STEP 3 — Form fields ========== */
.pd-wid .pd-form{display:flex; flex-direction:column; gap:14px;}
.pd-wid input.pd-in, .pd-wid textarea.pd-in{
  background:var(--navy2); border:1.5px solid rgba(255,255,255,.10);
  border-radius:14px; padding:18px 20px; color:#fff;
  font-size:16px; font-weight:500; width:100%; outline:none;
  font-family:inherit; transition:border-color .16s, background .16s;
}
.pd-wid input.pd-in::placeholder, .pd-wid textarea.pd-in::placeholder{
  color:rgba(255,255,255,.35); font-weight:500;
}
.pd-wid input.pd-in:focus, .pd-wid textarea.pd-in:focus{
  border-color:var(--gold); background:rgba(3,6,12,.85);
}
.pd-wid textarea.pd-in{min-height:64px; resize:vertical;}

/* Add-ons */
.pd-wid .pd-addons-title{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--gold); font-weight:700; text-align:center;
  margin:26px 0 12px;
}
.pd-wid .pd-addons{display:flex; flex-direction:column; gap:10px;}
.pd-wid .pd-addon{
  display:flex; align-items:flex-start; gap:14px;
  background:var(--navy2); border:1.5px solid rgba(255,255,255,.10);
  border-radius:14px; padding:16px 18px; cursor:pointer;
  transition:.16s;
}
.pd-wid .pd-addon:hover{border-color:rgba(255,255,255,.20);}
.pd-wid .pd-addon.sel{
  border-color:var(--gold); background:rgba(203,168,113,.06);
}
.pd-wid .pd-addon-box{
  width:22px; height:22px; border-radius:6px;
  border:1.5px solid rgba(255,255,255,.25);
  background:transparent;
  flex-shrink:0; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
  transition:.14s;
}
.pd-wid .pd-addon.sel .pd-addon-box{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  border-color:var(--gold);
}
.pd-wid .pd-addon.sel .pd-addon-box::after{
  content:"✓"; color:var(--navy); font-weight:900; font-size:.85rem;
}
.pd-wid .pd-addon-body{flex:1;}
.pd-wid .pd-addon-name{
  font-weight:700; font-size:1.05rem; color:#fff; line-height:1.2;
}
.pd-wid .pd-addon-meta{
  font-size:.88rem; color:var(--mute); margin-top:4px;
}

/* ========== CTA buttons ========== */
.pd-wid .pd-cta{
  display:block; width:100%; margin:26px 0 10px;
  padding:20px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--navy); font-weight:800; font-size:1.05rem;
  letter-spacing:.08em; text-transform:uppercase;
  border:none; border-radius:16px; cursor:pointer;
  box-shadow:0 18px 40px rgba(203,168,113,.32),0 1px 0 rgba(255,255,255,.2) inset;
  transition:transform .14s, box-shadow .14s;
  font-family:inherit;
}
.pd-wid .pd-cta:hover:not([disabled]){
  transform:translateY(-1px);
  box-shadow:0 22px 48px rgba(203,168,113,.42);
}
.pd-wid .pd-cta:active{transform:translateY(0);}
.pd-wid .pd-cta[disabled]{
  opacity:.5; cursor:not-allowed; transform:none;
}
.pd-wid .pd-cta .arrow{display:inline-block; margin-left:6px;}

/* ========== STEP 4 — Week nav + date strip + Next Available list ========== */
.pd-wid .pd-week-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:8px 0 10px; padding:0 4px;
}
.pd-wid .pd-week-label{
  flex:1; text-align:center; color:#fff;
  font-weight:700; font-size:.96rem; letter-spacing:.02em;
}
.pd-wid .pd-week-arrow{
  width:36px; height:36px; border-radius:50%;
  background:var(--navy2); border:1.5px solid rgba(255,255,255,.16);
  color:var(--gold); font-size:1.4rem; line-height:1;
  cursor:pointer; transition:.14s;
  display:flex; align-items:center; justify-content:center;
  font-family:inherit; flex-shrink:0;
}
.pd-wid .pd-week-arrow:hover:not([disabled]){
  background:rgba(203,168,113,.10);
  border-color:var(--gold);
}
.pd-wid .pd-week-arrow[disabled]{opacity:.22; cursor:not-allowed;}

.pd-wid .pd-datestrip{
  display:flex; gap:8px; overflow-x:auto;
  padding:4px 4px 8px;
  margin:8px -4px 8px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.pd-wid .pd-datestrip::-webkit-scrollbar{display:none;}
.pd-wid .pd-dt{
  flex:0 0 84px; min-height:96px;
  background:var(--navy2); border:1.5px solid rgba(255,255,255,.08);
  border-radius:14px; padding:14px 8px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-family:inherit; cursor:pointer;
  transition:.14s;
}
.pd-wid .pd-dt-dow{
  font-size:.7rem; color:var(--mute); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
}
.pd-wid .pd-dt-num{
  font-family:'Playfair Display',serif;
  font-size:2rem; color:#fff; font-weight:700; line-height:1;
}
.pd-wid .pd-dt.past,
.pd-wid .pd-dt.unavailable{
  opacity:.35; cursor:not-allowed;
}
.pd-wid .pd-dt.open{
  border-color:rgba(203,168,113,.35);
}
.pd-wid .pd-dt.open:hover{
  border-color:var(--gold);
  background:rgba(203,168,113,.06);
  transform:translateY(-1px);
}
.pd-wid .pd-dt.sel{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  border-color:var(--gold); color:var(--navy);
}
.pd-wid .pd-dt.sel .pd-dt-dow{color:rgba(3,6,12,.7);}
.pd-wid .pd-dt.sel .pd-dt-num{color:var(--navy);}

/* Next Available label */
.pd-wid .pd-next-lbl{
  text-align:center; font-size:.78rem; letter-spacing:.18em;
  color:var(--mute); font-weight:700; text-transform:uppercase;
  margin:20px 0 14px;
}

/* Slot card list */
.pd-wid .pd-slots{display:flex; flex-direction:column; gap:10px;}
.pd-wid .pd-slot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--navy2); border:1.5px solid rgba(255,255,255,.10);
  border-radius:14px; padding:18px 22px;
  font-family:inherit; cursor:pointer;
  transition:.14s; width:100%; text-align:left;
}
.pd-wid .pd-slot:hover{
  border-color:var(--gold); background:rgba(203,168,113,.06);
  transform:translateY(-1px);
}
.pd-wid .pd-slot.sel{
  border-color:var(--gold); background:rgba(203,168,113,.10);
  box-shadow:0 10px 28px rgba(203,168,113,.18);
}
.pd-wid .pd-slot-label{
  font-size:1.02rem; font-weight:600; color:#fff;
}
.pd-wid .pd-slot-arrow{
  color:var(--gold); font-size:1.1rem; font-weight:700;
  flex-shrink:0;
}

.pd-wid .pd-loading{
  text-align:center; color:var(--mute); font-size:.92rem;
  padding:30px 10px;
}

/* ========== Error + success states ========== */
.pd-wid .pd-err{
  background:rgba(255,94,108,.10); border:1px solid rgba(255,94,108,.35);
  color:#ff8a93; border-radius:12px; padding:12px 16px;
  font-size:.9rem; margin:12px 0;
}
.pd-wid .pd-ok{
  text-align:center; padding:28px 12px 10px;
}
.pd-wid .pd-ok h3{
  font-family:'Playfair Display',serif;
  color:var(--gold); font-size:1.9rem; margin-bottom:10px;
}
.pd-wid .pd-ok p{
  color:var(--mute); font-size:.96rem; line-height:1.55;
  max-width:480px; margin:0 auto 14px;
}
@media(max-width:540px){
  .pd-wid{padding:4px 12px 4px;}
  .pd-wid h3.pd-h{font-size:1.5rem;}
  .pd-wid .pd-opt{padding:16px 16px;}
  .pd-wid .pd-step{width:28px; height:28px; font-size:.78rem;}
  .pd-wid .pd-bar{flex-basis:14px;}
  .pd-wid .pd-tag{max-width:90px; font-size:.82rem;}
}

/* Sticky order summary bar */
.pd-wid .pd-summary-bar {
  text-align: center;
  font-size: .88rem;
  color: rgba(203,168,113,.85);
  background: rgba(3,6,12,.6);
  border-bottom: 1px solid rgba(203,168,113,.15);
  padding: 10px 16px;
  margin: -8px -18px 20px;
  letter-spacing: .01em;
}
.pd-wid .pd-summary-bar strong { color: #cba871; }

/* Service area warning */
.pd-wid .pd-area-warn {
  font-size: .88rem;
  color: rgba(255,200,80,.85);
  background: rgba(255,160,0,.07);
  border: 1px solid rgba(255,160,0,.2);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.pd-wid .pd-area-warn a { color: #cba871; }

/* Retry / fallback link */
.pd-wid .pd-link {
  color: #cba871; text-decoration: underline; cursor: pointer;
  background: none; border: none; font: inherit; padding: 0;
}

/* ============================================================
   SUCCESS SCREEN — "You're on the schedule" + save number CTA
   ============================================================ */
.pd-wid .pd-ok-check {
  width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #cba871, #e4cb94);
  color: #03060c;
  font-size: 2rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 40px rgba(203,168,113,.4);
}

/* Confirmation page trust strip */
.pd-wid .pd-ok-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 12px;
  margin: 4px auto 24px;
  font-size: .78rem;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, 0.7);
}
.pd-wid .pd-ok-trust > span:nth-child(odd) { color: rgba(255, 255, 255, 0.88); }

/* Joe personal note on the confirmation page */
.pd-wid .pd-ok-note {
  margin: 18px auto;
  max-width: 440px;
  padding: 18px 22px;
  background: rgba(203, 168, 113, 0.06);
  border: 1px solid rgba(203, 168, 113, 0.22);
  border-left: 3px solid #cba871;
  border-radius: 12px;
  text-align: left;
}
.pd-wid .pd-ok-note-body {
  margin: 0 0 8px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
.pd-wid .pd-ok-note-sig {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #cba871;
}

.pd-wid .pd-save-block {
  margin: 32px auto 8px; max-width: 460px;
  background: linear-gradient(160deg, rgba(203,168,113,.10), rgba(203,168,113,.02));
  border: 1.5px solid rgba(203,168,113,.4);
  border-radius: 18px;
  padding: 26px 22px 22px;
  text-align: center;
}
.pd-wid .pd-save-eyebrow {
  font-size: .76rem; font-weight: 800;
  color: #cba871; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 4px;
}
.pd-wid .pd-save-sub {
  font-size: .9rem; color: rgba(255,255,255,.65);
  margin-bottom: 16px; line-height: 1.4;
}
.pd-wid .pd-save-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 5.5vw, 2.4rem);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  margin-bottom: 18px;
  letter-spacing: .02em;
  transition: color .14s;
}
.pd-wid .pd-save-num:hover { color: #cba871; }
.pd-wid .pd-save-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
}
.pd-wid .pd-save-btn {
  flex: 1 1 90px; min-width: 90px;
  padding: 14px 12px;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.16);
  border-radius: 12px;
  color: #fff; text-decoration: none;
  font-size: .9rem; font-weight: 600;
  text-align: center;
  transition: .14s;
}
.pd-wid .pd-save-btn:hover {
  border-color: #cba871; background: rgba(203,168,113,.10);
}
.pd-wid .pd-save-btn.primary {
  background: linear-gradient(135deg, #cba871, #e4cb94);
  border-color: #cba871; color: #03060c; font-weight: 800;
  flex-basis: 100%;     /* "Add to Contacts" gets a full row, looks more important */
  margin-bottom: 4px;
  box-shadow: 0 12px 28px rgba(203,168,113,.32);
}
.pd-wid .pd-save-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(203,168,113,.4);
}

/* Shimmer skeleton + matching loading text */
@keyframes pd-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.pd-wid .pd-skel-strip {
  display: flex; gap: 8px; margin-bottom: 20px;
}
.pd-wid .pd-skel-tile {
  flex: 1; height: 62px; border-radius: 12px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.05) 25%,
    rgba(203,168,113,.12) 50%,
    rgba(255,255,255,.05) 75%
  );
  background-size: 200% 100%;
  animation: pd-shimmer 1.4s ease-in-out infinite;
}
.pd-wid .pd-loading-shimmer {
  text-align: center; color: rgba(255,255,255,.45);
  font-size: .9rem; margin-top: 8px;
}

/* Booking summary card on success screen */
.pd-wid .pd-confirm-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(203,168,113,.2);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 18px 0 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.pd-wid .pd-confirm-row {
  display: flex; justify-content: space-between;
  align-items: baseline; gap: 12px;
}
.pd-wid .pd-confirm-lbl {
  font-size: .82rem; color: rgba(255,255,255,.45);
  flex-shrink: 0; text-transform: uppercase; letter-spacing: .05em;
}
.pd-wid .pd-confirm-val {
  font-size: .95rem; color: rgba(255,255,255,.88);
  text-align: right;
}
.pd-wid .pd-confirm-price {
  color: #cba871; font-weight: 700;
}

/* Inline field error message */
.pd-wid .pd-field-err {
  font-size: .82rem;
  color: rgba(255,110,90,.9);
  margin-top: -8px;
  margin-bottom: 2px;
  padding-left: 6px;
}

/* Disabled CTA + back link */

.pd-wid .pd-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.pd-wid .pd-back-link {
  text-align: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.pd-wid .pd-back-link a {
  color: rgba(255,255,255,.45);
  font-size: .85rem;
  text-decoration: none;
  letter-spacing: .02em;
}

.pd-wid .pd-back-link a:hover {
  color: rgba(203,168,113,.8);
}

/* Service-card badges (Daily driver / Most popular / Paint reset) */
.pd-wid .pd-opt { position: relative; transition: transform .18s cubic-bezier(.16,1,.3,1), border-color .2s, box-shadow .25s; }
.pd-wid .pd-opt:hover { transform: translateY(-2px); border-color: rgba(203,168,113,.4); box-shadow: 0 14px 32px rgba(0,0,0,.32); }
.pd-wid .pd-opt:active { transform: translateY(0); }
.pd-wid .pd-opt.sel {
  border-color: rgba(203,168,113,.62) !important;
  box-shadow: 0 0 0 1px rgba(203,168,113,.4), 0 18px 38px rgba(203,168,113,.16) !important;
  background: linear-gradient(155deg, rgba(203,168,113,.08), rgba(20,26,43,.55)) !important;
}
.pd-wid .pd-opt-badge {
  position: absolute; top: 12px; right: 14px;
  font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800;
  padding: 4px 10px; border-radius: 100px;
  background: linear-gradient(135deg, #cba871, #e4cb94);
  color: #03060c;
  box-shadow: 0 6px 14px rgba(203,168,113,.32);
  pointer-events: none;
}
.pd-wid .pd-opt-bestfor {
  font-size: .78rem; color: rgba(203,168,113,.85); font-style: italic;
  margin-top: 6px; line-height: 1.45;
}

/* Pulse-focus animation when the widget gets targeted from CTAs */
.pd-pulse-focus { position: relative; }
.pd-pulse-focus::before {
  content: ''; position: absolute; inset: -8px;
  border-radius: 22px;
  box-shadow: 0 0 0 0 rgba(203,168,113,.55);
  animation: pdPulseFocusWidget 1.6s cubic-bezier(.16,1,.3,1) 1;
  pointer-events: none;
}
@keyframes pdPulseFocusWidget {
  0%   { box-shadow: 0 0 0 0 rgba(203,168,113,.55); }
  60%  { box-shadow: 0 0 0 22px rgba(203,168,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(203,168,113,0); }
}

/* Mobile: bigger tap targets, breathing room. Body copy stays ≥16px. */
@media (max-width: 680px) {
  .pd-wid .pd-opt { padding: 18px 18px 16px !important; min-height: 96px; }
  .pd-wid .pd-opt-name { font-size: 1.08rem !important; }
  .pd-wid .pd-opt-desc { font-size: 1rem !important; line-height: 1.5; }
}

/* Reduced-motion: disable widget animations */
@media (prefers-reduced-motion: reduce) {
  .pd-wid .pd-opt, .pd-wid .pd-opt:hover, .pd-wid .pd-opt:active { transform: none !important; transition: none !important; }
  .pd-pulse-focus::before { animation: none !important; }
}


/* Step indicator: absolute-position centering */
.pd-wid .pd-top {
  position: relative !important;
  min-height: 32px !important;
}
.pd-wid .pd-back-spacer,
.pd-wid .pd-tag-empty,
.pd-wid .pd-back,
.pd-wid .pd-tag {
  position: relative;
  z-index: 1;
}

/* 3-phase progress label — replaces the 5-dot multi-step bar.
   Reads as a calm trail: "Detail → Time → Confirm" with the current phase
   highlighted. Done phases dim gold; the active phase is bright. */
.pd-wid .pd-phases {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  white-space: nowrap;
}
.pd-wid .pd-phase {
  color: rgba(255,255,255,.4);
  transition: color .18s ease;
}
.pd-wid .pd-phase.done {
  color: rgba(203,168,113,.65);
}
.pd-wid .pd-phase.active {
  color: #cba871;
}
.pd-wid .pd-phase-sep {
  color: rgba(255,255,255,.22);
  font-size: .9rem;
  line-height: 1;
  margin: 0 1px;
}
@media (max-width: 480px) {
  .pd-wid .pd-phases { font-size: .62rem; letter-spacing: .08em; gap: 4px; }
  .pd-wid .pd-phase-sep { font-size: .78rem; }
}

/* Add-on chip row (inline on Step 3) — small, optional, not loud. */
.pd-wid .pd-addon-chips {
  margin: 14px 0 18px;
  text-align: center;
}
.pd-wid .pd-addon-chips-lbl {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 8px;
}
.pd-wid .pd-addon-chips-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.pd-wid .pd-addon-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.85);
  padding: 7px 14px;
  border-radius: 100px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .14s, border-color .14s, color .14s;
}
.pd-wid .pd-addon-chip-price {
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  font-weight: 700;
}
.pd-wid .pd-addon-chip:hover {
  border-color: rgba(203,168,113,.42);
  color: #fff;
}
.pd-wid .pd-addon-chip.on {
  background: linear-gradient(135deg, rgba(203,168,113,.18), rgba(203,168,113,.08));
  border-color: rgba(203,168,113,.65);
  color: #fff;
}
.pd-wid .pd-addon-chip.on .pd-addon-chip-price { color: #cba871; }
.pd-wid .pd-addon-chip:focus-visible {
  outline: 2px solid #cba871;
  outline-offset: 2px;
}

/* ============================================================
   Step 3 — Horizontal date strip + time chip picker
   Replaces the old month-grid calendar. Compact, scannable,
   keyboard-navigable, scroll-snap on mobile.
   ============================================================ */

/* Date strip — 21 days, horizontally scrollable with snap. */
.pd-wid .pd-date-strip-wrap {
  position: relative;
  margin: 8px -6px 14px;
}
.pd-wid .pd-date-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 32px 8px;
  scroll-behavior: smooth;
}
.pd-wid .pd-date-strip::-webkit-scrollbar { display: none; }

.pd-wid .pd-date-chip {
  flex: 0 0 56px;
  min-width: 44px;
  min-height: 64px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  position: relative;
  font-family: inherit;
}
.pd-wid .pd-date-chip:hover:not(.unavail) {
  border-color: rgba(203,168,113,.45);
  color: #fff;
}
.pd-wid .pd-date-chip.sel {
  background: #cba871;
  border-color: #cba871;
  color: #03060c;
  font-weight: 600;
}
.pd-wid .pd-date-chip.unavail {
  cursor: not-allowed;
  opacity: 0.3;
}
.pd-wid .pd-date-chip-dow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
}
.pd-wid .pd-date-chip.sel .pd-date-chip-dow { opacity: 0.85; }
.pd-wid .pd-date-chip-num {
  font-size: 22px;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  line-height: 1;
}
.pd-wid .pd-date-chip.sel .pd-date-chip-num { font-weight: 700; }
.pd-wid .pd-date-chip-today-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #cba871;
  margin-top: 2px;
}
.pd-wid .pd-date-chip.sel .pd-date-chip-today-dot { background: #03060c; }
.pd-wid .pd-date-chip:focus-visible {
  outline: 2px solid #cba871;
  outline-offset: 2px;
}

/* Scroll-hint arrows at strip ends — small, subtle, not blocking */
.pd-wid .pd-date-strip-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 64px;
  border: none;
  background: linear-gradient(90deg, rgba(3,6,12,.95), rgba(3,6,12,0));
  color: rgba(203,168,113,.85);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  font-family: inherit;
  padding: 0 8px 0 0;
}
.pd-wid .pd-date-strip-arrow--next {
  right: 0;
  background: linear-gradient(90deg, rgba(3,6,12,0), rgba(3,6,12,.95));
  padding: 0 0 0 8px;
}
.pd-wid .pd-date-strip-arrow:hover { color: #cba871; }
.pd-wid .pd-date-strip-arrow:focus-visible {
  outline: 2px solid #cba871;
  outline-offset: 2px;
}

/* Time section header (dynamic — updates with selected date) */
.pd-wid .pd-time-zone-label {
  margin: 18px 0 10px;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  letter-spacing: .02em;
}
.pd-wid .pd-time-zone {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Recommended chip — full width, gold-tinted, brand-consistent.
   Spec called for a bright green "Most Popular" but Joe doesn't have
   data on which slot is most popular and the brand uses gold only. */
.pd-wid .pd-time-chip-first {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(203,168,113,.16), rgba(203,168,113,.06));
  border: 1.5px solid rgba(203,168,113,.55);
  color: #cba871;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background .15s, border-color .15s, transform .1s;
}
.pd-wid .pd-time-chip-first:hover {
  border-color: #cba871;
  background: linear-gradient(135deg, rgba(203,168,113,.22), rgba(203,168,113,.10));
}
.pd-wid .pd-time-chip-first.sel {
  background: linear-gradient(135deg, #cba871, #e4cb94);
  border-color: #cba871;
  color: #03060c;
  box-shadow: 0 6px 18px rgba(203,168,113,.32);
}
.pd-wid .pd-time-chip-first-icon { font-size: 1.05rem; }
.pd-wid .pd-time-chip-first-tag {
  font-size: .82rem;
  font-weight: 600;
  opacity: 0.88;
}
.pd-wid .pd-time-chip-first:focus-visible {
  outline: 2px solid #cba871;
  outline-offset: 2px;
}

/* Standard time chip 2-col grid */
.pd-wid .pd-time-chip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pd-wid .pd-time-chip-grid--more { margin-top: 4px; }
.pd-wid .pd-time-chip {
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.pd-wid .pd-time-chip:hover {
  border-color: rgba(203,168,113,.45);
  color: #fff;
}
.pd-wid .pd-time-chip.sel {
  border-color: #cba871;
  color: #cba871;
  font-weight: 700;
  background: rgba(203,168,113,.08);
}
.pd-wid .pd-time-chip:focus-visible {
  outline: 2px solid #cba871;
  outline-offset: 2px;
}

/* More times toggle */
.pd-wid .pd-time-more-btn {
  align-self: center;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.65);
  font-size: .9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 10px 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.32);
  margin-top: 2px;
}
.pd-wid .pd-time-more-btn:hover {
  color: #cba871;
  text-decoration-color: rgba(203,168,113,.55);
}
.pd-wid .pd-time-more-btn:focus-visible {
  outline: 2px solid #cba871;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Fine print under the Step 3 CTA */
.pd-wid .pd-step3-finefont {
  margin: 10px 0 0;
  text-align: center;
  font-size: .82rem;
  line-height: 1.5;
  color: rgba(255,255,255,.5);
}

/* Loading state — shimmer while /api/availability is in-flight */
.pd-wid .pd-avail-loading {
  margin: 12px 0 22px;
}
.pd-wid .pd-avail-skel-row {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  overflow: hidden;
}
.pd-wid .pd-avail-skel-chip {
  flex: 0 0 56px;
  min-width: 44px;
  height: 64px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.03) 25%,
    rgba(203,168,113,.10) 50%,
    rgba(255,255,255,.03) 75%
  );
  background-size: 200% 100%;
  animation: pd-avail-shimmer 1.4s ease-in-out infinite;
}
@keyframes pd-avail-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.pd-wid .pd-avail-loading-text {
  text-align: center;
  font-size: .85rem;
  color: rgba(255,255,255,.5);
  margin-top: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .pd-wid .pd-avail-skel-chip { animation: none; background: rgba(255,255,255,.04); }
}

/* Fully-booked-for-2-weeks fallback */
.pd-wid .pd-fully-booked {
  text-align: center;
  padding: 20px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  margin: 14px 0 18px;
}
.pd-wid .pd-fully-booked p {
  color: rgba(255,255,255,.85);
  font-size: 1rem;
  margin: 0 0 14px;
  line-height: 1.5;
}
.pd-wid .pd-cta--alt {
  display: inline-block;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .pd-wid .pd-date-strip { scroll-behavior: auto; }
  .pd-wid .pd-date-chip,
  .pd-wid .pd-time-chip,
  .pd-wid .pd-time-chip-first { transition: none !important; }
}

/* Collapsed optional sections on Confirm — calm secondary line, not
   visually equal to required fields. */
.pd-wid .pd-collapsed {
  margin: 4px 0 6px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
}
.pd-wid .pd-collapsed > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 36px 12px 16px;
  font-size: .92rem;
  font-weight: 500;
  color: rgba(255,255,255,.62);
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  user-select: none;
}
.pd-wid .pd-collapsed > summary::-webkit-details-marker { display: none; }
.pd-wid .pd-collapsed > summary::after {
  content: "+";
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: rgba(203,168,113,.55);
  font-weight: 300;
  line-height: 1;
}
.pd-wid .pd-collapsed[open] > summary { color: #fff; }
.pd-wid .pd-collapsed[open] > summary::after { content: "−"; }
.pd-wid .pd-collapsed > summary:focus-visible {
  outline: 2px solid #cba871;
  outline-offset: -2px;
}
.pd-wid .pd-collapsed-body {
  padding: 0 12px 12px;
}
.pd-wid .pd-collapsed-body .pd-in,
.pd-wid .pd-collapsed-body .pd-ta {
  margin-top: 0;
}

/* =====================================================================
   Step 3 — Date/Time picker (calendar + time slot grid)
   ===================================================================== */
.pd-wid .pd-cal {
  background: rgba(8,12,22,.55);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 14px 12px;
  margin: 14px 0 18px;
}
.pd-wid .pd-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pd-wid .pd-cal-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}
.pd-wid .pd-cal-arrow {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  font-size: 1.4rem; line-height: 1;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pd-wid .pd-cal-arrow:hover:not([disabled]) {
  background: rgba(203,168,113,.10);
  border-color: rgba(203,168,113,.35);
  color: #cba871;
}
.pd-wid .pd-cal-arrow[disabled] { opacity: .35; cursor: not-allowed; }
.pd-wid .pd-cal-arrow:focus-visible {
  outline: 2px solid #cba871;
  outline-offset: 2px;
}

.pd-wid .pd-cal-grid {
  display: grid;
  /* minmax(0, 1fr) so a cell's content cannot push a column wider than its share.
     Without the minmax, the old "Unavailable" tag would widen some columns and
     crush others at 320px. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.pd-wid .pd-cal-grid--days {
  margin-bottom: 4px;
}
.pd-wid .pd-cal-day-header {
  text-align: center;
  font-size: .65rem;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  letter-spacing: .12em;
  padding: 6px 0;
}
.pd-wid .pd-cal-cell {
  position: relative;
  min-width: 0;                /* allow grid cell to shrink below content width */
  aspect-ratio: 1 / 1;          /* keep cells square at all viewports */
  min-height: 44px;             /* tap target on small screens */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,.02);
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, transform .1s;
  font-size: .9rem;
  color: rgba(255,255,255,.5);
  overflow: hidden;             /* defensive: never push column wider */
}
.pd-wid .pd-cal-cell--pad { background: transparent; }
.pd-wid .pd-cal-num {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
}
/* Visually-hidden text — preserves screen-reader announcement of "Unavailable"
   without taking any layout space (replaces the old .pd-cal-tag block). */
.pd-wid .pd-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.pd-wid .pd-cal-cell--past {
  color: rgba(255,255,255,.18);
  background: transparent;
}
.pd-wid .pd-cal-cell--unavailable {
  background: rgba(255,255,255,.015);
  color: rgba(255,255,255,.30);
  cursor: not-allowed;
}
/* Subtle visual indicator that the day is closed — a thin diagonal slash
   across the date number. Doesn't affect layout (absolute positioned). */
.pd-wid .pd-cal-cell--unavailable .pd-cal-num::after {
  content: "";
  position: absolute;
  left: 22%; right: 22%; top: 50%;
  height: 1px;
  background: rgba(255,255,255,.20);
  transform: rotate(-18deg);
  pointer-events: none;
}
.pd-wid .pd-cal-cell--available {
  background: rgba(203,168,113,.06);
  border-color: rgba(203,168,113,.22);
  color: #fff;
  cursor: pointer;
}
.pd-wid .pd-cal-cell--available:hover {
  background: rgba(203,168,113,.14);
  border-color: rgba(203,168,113,.50);
  transform: translateY(-1px);
}
.pd-wid .pd-cal-cell--today .pd-cal-num {
  position: relative;
}
.pd-wid .pd-cal-cell--today .pd-cal-num::after {
  content: "";
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #cba871;
  margin: 3px auto 0;
}
.pd-wid .pd-cal-cell--selected {
  background: linear-gradient(135deg, #cba871, #e4cb94);
  color: #03060c;
  border-color: #cba871;
  box-shadow: 0 6px 18px rgba(203,168,113,.35);
}
.pd-wid .pd-cal-cell--selected .pd-cal-num { color: #03060c; }
.pd-wid .pd-cal-cell--available:focus-visible {
  outline: 2px solid #cba871;
  outline-offset: 2px;
}

/* Time slot grid below calendar */
.pd-wid .pd-time-label {
  margin: 6px 0 8px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255,255,255,.75);
}
.pd-wid .pd-time-empty {
  margin: 8px 0 14px;
  padding: 14px 12px;
  text-align: center;
  font-size: .85rem;
  color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.02);
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: 10px;
}
.pd-wid .pd-time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}
.pd-wid .pd-time-slot {
  min-height: 48px;
  padding: 12px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s, color .15s;
}
.pd-wid .pd-time-slot:hover {
  background: rgba(203,168,113,.10);
  border-color: rgba(203,168,113,.45);
  transform: translateY(-1px);
}
.pd-wid .pd-time-slot--selected {
  background: linear-gradient(135deg, #cba871, #e4cb94);
  border-color: #cba871;
  color: #03060c;
  box-shadow: 0 6px 18px rgba(203,168,113,.35);
}
.pd-wid .pd-time-slot:focus-visible {
  outline: 2px solid #cba871;
  outline-offset: 2px;
}

/* Copy below the time grid */
.pd-wid .pd-confirm-note {
  margin: 6px 0 4px;
  font-size: .82rem;
  line-height: 1.5;
  color: rgba(255,255,255,.7);
  text-align: center;
}
.pd-wid .pd-confirm-caveat {
  margin: 0 0 18px;
  font-size: .72rem;
  line-height: 1.5;
  color: rgba(255,255,255,.42);
  text-align: center;
  font-style: italic;
}

/* Mobile tightening — keeps the month grid usable on 390px (and down to ~320px).
   Cells stay ≥44px tall and square via aspect-ratio. Unavailable state is shown
   by dimmed text + slash overlay; the "Unavailable" word is SR-only. */
@media (max-width: 480px) {
  .pd-wid .pd-cal { padding: 10px 6px; }
  .pd-wid .pd-cal-grid { gap: 3px; }
  .pd-wid .pd-cal-cell { font-size: .8rem; }
  .pd-wid .pd-cal-num { font-size: .85rem; }
  .pd-wid .pd-time-grid { grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); }
}

/* =====================================================================
   Step 4 — Contact form (labels above, blur validation, inline errors)
   ===================================================================== */
.pd-wid .pd-form--stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pd-wid .pd-fld {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pd-wid .pd-lbl {
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.01em;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.pd-wid .pd-lbl-req,
.pd-wid .pd-lbl-opt {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pd-wid .pd-lbl-req { color: rgba(255, 100, 100, .82); }
.pd-wid .pd-lbl-opt { color: rgba(255, 255, 255, .35); }
.pd-wid .pd-lbl-help {
  font-size: .78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .55);
  margin: 0;
}
.pd-wid .pd-in,
.pd-wid .pd-ta {
  width: 100%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  padding: 13px 14px;
  min-height: 48px;
  transition: border-color .15s, background .15s;
  box-sizing: border-box;
}
.pd-wid .pd-ta { resize: vertical; min-height: 90px; line-height: 1.5; }
.pd-wid .pd-in:focus,
.pd-wid .pd-ta:focus {
  outline: none;
  border-color: rgba(203, 168, 113, .7);
  background: rgba(255, 255, 255, .07);
}
.pd-wid .pd-in:focus-visible,
.pd-wid .pd-ta:focus-visible {
  outline: 2px solid #cba871;
  outline-offset: 2px;
}
.pd-wid .pd-fld.has-error .pd-in,
.pd-wid .pd-fld.has-error .pd-ta {
  border-color: rgba(255, 100, 100, .7);
  background: rgba(255, 100, 100, .04);
}
.pd-wid .pd-fld-err {
  font-size: .82rem;
  line-height: 1.45;
  color: rgba(255, 120, 100, .92);
  margin: 0;
}

.pd-wid .pd-privacy {
  margin: -6px 0 4px;
  font-size: .75rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .48);
  font-style: italic;
}

/* Out-of-area soft warning banner — yellow, non-blocking, dismissible */
.pd-wid .pd-area-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: rgba(255, 200, 60, .08);
  border: 1px solid rgba(255, 200, 60, .35);
  border-radius: 10px;
  margin: 4px 0 6px;
}
.pd-wid .pd-area-icon {
  font-size: 1.05rem;
  line-height: 1.4;
  flex-shrink: 0;
}
.pd-wid .pd-area-text {
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(255, 220, 140, .95);
  flex: 1;
}
.pd-wid .pd-area-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 220, 140, .65);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
}
.pd-wid .pd-area-close:hover { color: #ffdc8c; background: rgba(255, 220, 140, .10); }
.pd-wid .pd-area-close:focus-visible {
  outline: 2px solid #ffdc8c;
  outline-offset: 2px;
}

/* Confirm-step helpers */
.pd-wid .pd-confirm-row--total {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 6px;
  padding-top: 12px;
}
.pd-wid .pd-link-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .65);
  font-size: .88rem;
  font-family: inherit;
  cursor: pointer;
  padding: 10px;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pd-wid .pd-link-btn:hover { color: #cba871; }
.pd-wid .pd-link-btn:focus-visible {
  outline: 2px solid #cba871;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===========================================================
   MOBILE FAILSAFE (2026-05-28)
   Reinforces the date strip + time/add-on chip baselines below
   the rest of the file so they always win, no matter what the
   browser default style for <button> is on the user's device.
   This fixes the reported "vertical text dates / tiny default
   buttons" issue on phones that had a stale widget.css cached.
   =========================================================== */

/* Date strip — force horizontal flex layout */
.pd-wid .pd-date-strip-wrap{
  position: relative;
  width: 100%;
  margin: 8px -6px 14px;
}
.pd-wid .pd-date-strip{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 32px 8px;
  scroll-behavior: smooth;
  min-height: 76px;
  width: 100%;
}
.pd-wid .pd-date-chip{
  flex: 0 0 auto !important;
  width: 56px;
  min-width: 56px;
  min-height: 64px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}
.pd-wid .pd-date-chip.sel{
  background: #cba871;
  border-color: #cba871;
  color: #03060c;
}
.pd-wid .pd-date-chip.unavail{ opacity: 0.30; cursor: not-allowed; }
.pd-wid .pd-date-chip-dow{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  line-height: 1;
  opacity: 0.7;
}
.pd-wid .pd-date-chip-num{
  font-size: 22px;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  line-height: 1;
}

/* Time chips — must be big tappable buttons, not tiny defaults */
.pd-wid .pd-time-chip,
.pd-wid .pd-time-chip-first,
.pd-wid .pd-time-more-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
}
.pd-wid .pd-time-chip.sel,
.pd-wid .pd-time-chip-first.sel{
  background: #cba871;
  border-color: #cba871;
  color: #03060c;
  box-shadow: 0 8px 22px rgba(203,168,113,.32);
}
.pd-wid .pd-time-chip-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

/* Add-on chips — bigger tap targets */
.pd-wid .pd-addon-chips-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.pd-wid .pd-addon-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.pd-wid .pd-addon-chip.on{
  background: rgba(203,168,113,.18);
  border-color: #cba871;
  color: #fff;
}
.pd-wid .pd-addon-chip-price{
  color: #cba871;
  font-weight: 700;
}

/* Primary CTA — never tiny */
.pd-wid .pd-next,
.pd-wid .pd-cta,
.pd-wid [data-action="confirm-submit"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg,#cba871,#e4cb94);
  color: #03060c;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .03em;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 10px 24px rgba(203,168,113,.36), inset 0 1px 0 rgba(255,255,255,.22);
}
.pd-wid .pd-next:disabled,
.pd-wid [data-action="confirm-submit"]:disabled{
  opacity: .55; cursor: not-allowed;
  box-shadow: none;
}