/* ===== Google Font ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ===== Dr Sknn Widget Styles -- Montserrat + Luxury + Micro-interactions ===== */
:root {
  --brand:#C8A74A;
  --brand-600:#B8942E;
  --ink:#1a1a1a;
  --ink-2:#333;
  --muted:#666;
  --bg:#ffffff;
  --bg-soft:#faf7ef;
  --ring:0 0 0 3px rgba(200,167,74,.28);
  --shadow-1:0 6px 16px rgba(0,0,0,.06);
  --shadow-2:0 10px 24px rgba(0,0,0,.12);
  --radius:18px;
  --radius-sm:12px;
  --speed:220ms cubic-bezier(.21,.61,.35,1);
}

#explorer {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 20px auto;
  max-width: 900px;
  color: var(--ink);
}

/* ---- Top bar ---- */

/* ---- Headings ---- */
.section-title {
  font-size: 32px;
  font-weight: 700;
  margin: 20px 0 14px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
  color: var(--ink);
}
.sub-title { font-size: 16px; font-weight: 600; margin: 12px 0; color: var(--ink-2); }
.muted { color: var(--muted); font-size: 14px; }
/* ===== Universal List Styling for All Tiers ===== */
.list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}
.list-item {
  background: #faf8f2;
  border: 1px solid #e6e0d0;
  border-radius: 12px;
  padding: 12px 16px;        /* ✅ tighter spacing */
  font-size: 16px;
  font-weight: 600;
  color: #111;
  transition: all 220ms ease;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.list-item:hover {
  background: linear-gradient(180deg,#fffdf5,#f8f2e0);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(200,167,74,0.18);
  transform: translateY(-1px);
}
/* Active / selected list item */
.list-item.active,
.list-item:focus {
  border-left: 6px solid transparent;
  border-image: linear-gradient(to bottom, #d6ba6b, #c8a74a) 1;
  background: #fffdf7;
  box-shadow: 0 0 0 2px rgba(200,167,74,.22);
}

/* ---- Ripple effect (buttons + list items) ---- */
.list-item::after,
.book-btn::after,
.back-btn::after,
.home-btn::after,
.tab-btn::after {
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:0; height:0;
  background:rgba(200,167,74,.35);
  border-radius:50%;
  transform:translate(-50%,-50%);
  opacity:0;
  pointer-events:none;
}
.list-item:active::after,
.book-btn:active::after,
.back-btn:active::after,
.home-btn:active::after,
.tab-btn:active::after {
  width:200%;
  height:200%;
  opacity:1;
  transition: width .4s ease-out, height .4s ease-out, opacity .8s ease-out;
}

/* ---- Cards ---- */
.card {
  border: 1px solid #eaeaea;
  border-radius: var(--radius);
  padding: 28px 24px 34px;
  background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform 260ms ease, box-shadow 260ms ease;
  margin: 0 auto;
  will-change: transform;
}
.card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: var(--shadow-2);
}
/* ===== Treatment Card Title Styling ===== */
.card h4 {
  font-weight: 600;              /* less bold */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 12px;
  line-height: 1.3;
  color: var(--ink);
  font-size: clamp(18px, 4vw, 24px);
}

/* ===== Price Styling ===== */
.card .price {
  font-size: 20px;
  font-weight: 800;              /* bold */
  color: var(--brand);
  margin-top: 14px;
  margin-bottom: 10px;
  text-align: center;
}

/* ===== Book Buttons ===== */
.book-btn {
  background: linear-gradient(180deg, #fdf6c9, #d4b03f);
  color: #111 !important;
  font-weight: 700;
  padding: 14px 18px;
  border-radius: 14px;
  border: none;
  box-shadow: 0 6px 16px rgba(200,167,74,.3);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.book-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #fff0a6, #caa43c);
  box-shadow: 0 10px 22px rgba(200,167,74,.38);
}

/* ===== Mobile refinements ===== */

@media (max-width: 640px) {
  .card {
    padding: 18px 14px 22px;
    border-radius: 14px;
  }
  .card h4 {
    font-size: 18px;    /* still large but single line */
  }
  .book-btn {
    margin-top: 10px;
    padding: 12px 14px;
    font-size: 15px;
    border-radius: 10px;
  }
}

/* ===== Desktop refinements ===== */
@media (min-width: 1024px) {
  .card h4 {
    font-size: 24px;   /* bigger headings on desktop */
  }
  .book-btn {
    max-width: 280px;   /* don't stretch full width */
  }
}
.book-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(200,167,74,.36); }
.back-btn,
.home-btn {
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 11px 18px;
  border-radius: 12px;
}

/* ---- Availability ---- */
.slots { font-size: 13px; color: var(--ink-2); margin-top: 8px; line-height: 1.35; }
.location-title { font-weight: 700; margin-top: 12px; color: var(--ink); }


/* ===== Desktop Enhancements ===== */
@media (min-width: 1024px) {
  .list-item {
    font-size: 16px;
    padding: 14px 16px;
  }
  .card h4 {
    font-size: 24px;
  }
  .book-btn {
    max-width: 280px;
    font-size: 16px;
  }
}
/* ===== Fullscreen Container UX (Mobile & Desktop) ===== */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #faf9f4;
  overscroll-behavior: none;     /* stop iOS bounce */
}

#drsknn-explorer {
  height: 100vh;                 /* force full viewport height */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: #faf9f4;
}

#drsknn-explorer [data-view] {
  flex: 1;
  overflow-y: auto;              /* scroll inside */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;  /* smooth momentum scroll on iOS */
  padding: 0 16px 40px;
}

/* ===== Luxury Mobile Scaling ===== */
@media (max-width: 768px) {
  /* Bigger category/treatment tiles */
  .list-item {
    font-size: 20px;              /* luxury readable size */
    padding: 20px 22px;           /* taller, thumb-friendly */
    border-radius: 16px;
  }
  .list {
    gap: 20px;
  }

  /* Headings */
  .section-title {
    font-size: 24px;
    font-weight: 700;
    margin-top: 22px;
    margin-bottom: 18px;
  }

  /* Card Titles */
  .card h4 {
    font-size: 22px;              /* larger treatment titles */
    white-space: normal;          /* allow wrap if long */
  }

  /* Descriptions */
  .card .desc {
    font-size: 17px;
    line-height: 1.65;
  }

  /* Prices */
  .card .price {
    font-size: 22px;
  }

  /* Buttons */
  .book-btn {
    width: 100%;
    max-width: none;
    padding: 18px 20px;
    font-size: 19px;
    border-radius: 16px;
  }
  .back-btn, .home-btn {
    font-size: 18px;
    padding: 16px 20px;
  }
} /* disable ripple on mobile */


  /* Ensure smooth scrolling */
  #drsknn-explorer [data-view] {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

/* Spacing between stacked cards */
.card-stack .card + .card {
  margin-top: 32px;
}
.book-btn.disabled {
  background: #f2f2f2;
  color: #888 !important;
  cursor: not-allowed;
  box-shadow: none;
}
/* ===== 3-column location grid ===== */
.location-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
  text-align: center;
}

.loc-col {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
}

.loc-col .location-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.loc-col .slots {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 10px;
}

.loc-col .book-btn {
  width: 100%;
  margin: 0;
}

.book-btn.disabled {
  background: #f2f2f2;
  color: #888 !important;
  cursor: not-allowed;
  box-shadow: none;
}

.card-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  margin-bottom: 16px;
}

.card-label {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  color: var(--ink);
  margin-bottom: 18px;
}

.price-inline {
  display: block;
  margin-top: 6px;
  font-size: 20px;
  font-weight: 600;
  color: var(--brand);
}

.subscription-note {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  text-align: justify-all;   /* or justify if you prefer */
  color: var(--ink);
  line-height: 1.5;
}
/* ---- Waitlist Modal Fixes ---- */

/* ===== $900M Waitlist Modal Styling ===== */

/* ---------- Restore original category spacing ---------- */
.list[data-list="cats"] .list-item {
  padding: 14px 18px;   /* original sizing */
  border-radius: 12px;
}

/* ---------- Modal layout & close button ---------- */
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;               /* default hidden */
  align-items: center;
  justify-content: center;
  background: rgba(20,20,20,0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 24px;
}
.booking-modal:not(.hidden) { display: flex; }

.modal-content {
  background: #fff;
  width: min(820px, 96vw);      /* was ~540px */
  border-radius: 28px;
  padding: 36px 32px 28px;      /* a bit roomier */
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  position: relative;
  animation: fadeInLuxury .35s ease;
  max-height: none;
  overflow: visible;
}
@media (max-width: 900px) {
  .modal-content { width: min(96vw, 640px); padding: 28px 22px; }
}

@keyframes fadeInLuxury {
  from { opacity:0; transform: translateY(50px) scale(.98); }
  to   { opacity:1; transform: translateY(0)    scale(1); }
}

/* Close button stays on top and clickable */
.close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 26px;
  line-height: 1;
  border: 0;
  background: transparent;
  color: #555;
  cursor: pointer;
  z-index: 2;
}
.close-btn:hover { color: var(--brand-600); }

/* Two-column desktop form; single-column mobile */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 6px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.span-2 { grid-column: 1 / -1; }
.actions { display: flex; justify-content: center; margin-top: 4px; }

/* Mobile: let modal content scroll if it needs to */
@media (max-width: 900px) {
  .modal-content { max-height: 85vh; overflow-y: auto; }
  .form-grid { grid-template-columns: 1fr; }
}

/* Lock page scroll when a modal is open */
html.modal-open, body.modal-open { overflow: hidden; }
/* -------- FORM -------- */
.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.waitlist-form input,
.waitlist-form textarea,
.waitlist-form select {
  font-family: inherit;
  font-size: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #ddd;
  background: #fcfcfc;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.waitlist-form input:focus,
.waitlist-form textarea:focus,
.waitlist-form select:focus {
  border-color: var(--brand-600);
  outline: none;
  box-shadow: var(--ring);
}

.waitlist-form textarea {
  resize: vertical;
  min-height: 100px;
}

/* -------- CONSENTS -------- */
.consents {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  padding-top: 8px;
  color: var(--muted);
}
.consents label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.consents input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-600);
  border-radius: 6px;
}

/* -------- BUTTON -------- */
.waitlist-form button[type="submit"] {
  background: linear-gradient(180deg, #fdf6c9, #d4b03f);
  color: #111;
  font-weight: 700;
  font-size: 17px;
  padding: 16px;
  border-radius: 14px;
  border: none;
  box-shadow: 0 6px 16px rgba(200, 167, 74, 0.3);
  transition: all 0.2s ease;
}
.waitlist-form button[type="submit"]:hover {
  background: linear-gradient(180deg, #fff9d1, #c7a53b);
  box-shadow: 0 8px 22px rgba(200, 167, 74, 0.45);
  transform: translateY(-1px);
}

/* -------- THANK YOU STATE -------- */
#waitlist-thankyou {
  text-align: center;
  padding: 20px 0;
}
#waitlist-thankyou h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}
#waitlist-thankyou p {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 16px;
}
#waitlist-thankyou .book-btn {
  width: 100%;
  font-size: 16px;
  padding: 14px;
  background: linear-gradient(180deg, #faf2c4, #c8a74a);
  color: #111;
  border-radius: 14px;
}

/* -------- Mobile Scaling -------- */
@media (max-width: 600px) {
  .modal-content {
    padding: 24px 20px;
    border-radius: 18px;
  }

  .waitlist-form button[type="submit"] {
    font-size: 16px;
    padding: 14px;
  }

  .close-btn {
    top: 12px;
    right: 16px;
    font-size: 22px;
  }
}
/* Lock background scroll when modal is open */
body.modal-open, html.modal-open { overflow: hidden; }

/* ---------- Two-column form grid (one page on desktop) ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin-top: 6px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-weight: 600; color: #222; }
.field input,
.field textarea,
.field select {
  border: 1px solid #ddd;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  background: #fcfcfc;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: var(--ring);
}
.field.span-2 { grid-column: 1 / -1; }
.actions { display: flex; justify-content: center; margin-top: 4px; }

/* Consents box visual spacing */
.consents { gap: 10px; color: #444; }
.consents input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand-600); }

/* ---------- Mobile: allow internal scrolling if needed ---------- */
@media (max-width: 900px) {
  .modal-content {
    max-height: 85vh;
    overflow-y: auto;   /* only scroll inside modal on small screens */
  }
  .form-grid {
    grid-template-columns: 1fr; /* single column on small screens */
  }
}
.luxury-calendar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
  margin-top: 8px;
}

.calendar-day {
  background: #faf7ef;
  border: 1px solid #e0dacb;
  padding: 14px 10px;
  border-radius: 12px;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}
.calendar-day:hover {
  background: #fff8df;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 2px rgba(200,167,74,.18);
}
.calendar-day.active {
  background: linear-gradient(180deg, #fdf6c9, #d4b03f);
  color: #111;
  border-color: #c8a74a;
  box-shadow: 0 0 0 3px rgba(200,167,74,.35);
}
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.slot-btn {
  background: #ffffff;
  border: 1px solid #e6dec5;
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.slot-btn:hover {
  background: #fff4d6;
  border-color: #d4b03f;
  box-shadow: 0 2px 8px rgba(200,167,74,.2);
}

.slot-btn.selected {
  background: linear-gradient(180deg, #fdf6c9, #d4b03f);
  border-color: #c8a74a;
  color: #111;
}
.luxury-calendar.horizontal-scroll {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.luxury-calendar.horizontal-scroll .calendar-day {
  min-width: 100px;
  flex: 0 0 auto;
}

.slot-group {
  margin-bottom: 24px;
}
.slot-group h4 {
  font-size: 16px;
  margin: 8px 0 12px;
  padding-left: 4px;
  color: #333;
  font-weight: 600;
  border-left: 3px solid #c8a74a;
}
.calendar-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.calendar-nav {
  background: #fff;
  border: 1px solid #ccc;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

.luxury-calendar.horizontal-scroll {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  flex: 1;
}
.slot-btn:hover {
  background: radial-gradient(circle at 50% 50%, #fffbe6, #fff4d6);
  transform: scale(1.05);
  border-color: var(--brand-600);
}
.booking-intro {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--muted);
  text-align: center;
}
/* Booking welcome wrapper */
.form-intro {
  margin: 0 auto 18px;
  max-width: 860px;
  padding: 20px 22px;
  border-radius: 20px;
  background: linear-gradient(180deg,#fffdf4,#fdf7e3);
  border: 1px solid #e7ddbd;
  box-shadow: 0 18px 46px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.8) inset;
  text-align: center; /* centers title + subtitle */
}

/* mobile tightening */
@media (max-width: 520px){
  .form-intro{ padding: 16px; border-radius: 14px; }
  .choice-btn{ min-width: 100%; padding: 12px 14px; border-radius: 12px; font-size: 16px; }
  .btn-choice-row{ gap: 10px; }
}

.form-title {
  font-size: clamp(26px, 3.5vw, 36px);
  line-height: 1.2;
  margin-bottom: 8px;
  font-weight: 900;
  letter-spacing: .2px;
  background: linear-gradient(180deg,#111,#444);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  text-align: center;
}

.form-subtitle {
  font-size: clamp(16px, 1.9vw, 18px);
  color: #6b5a2b;
  line-height: 1.5;
  margin-bottom: 4px;
  font-weight: 700;
  opacity: .95;
  text-align: center;
}

.gdpr-box {
  background: #f9f7ef;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid #eee0bb;
  font-size: 14px;
  margin-top: 4px;
}
.full-width {
  width: 100%;
}
.btn-choice-row {
  display: flex;
  justify-content: center;   /* center the buttons */
  gap: 16px;
  margin: 18px 0 8px;
  flex-wrap: wrap;
}

.choice-btn {
  background: linear-gradient(180deg,#fffbe5,#f5e39a);
  border: 1px solid #e6dca3;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 900;
  font-size: clamp(15px, 2vw, 17px);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 10px 28px rgba(200,167,74,.22);
  min-width: 220px;
  color: #111;
}

.choice-btn:hover {
  background: linear-gradient(180deg,#fff6c2,#efd169);
  border-color: var(--brand);
  box-shadow: 0 16px 36px rgba(200,167,74,.30);
  transform: translateY(-1px);
}
.choice-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(200,167,74,.35);
}

/* ✅ Consistent spacing for ALL list views (any level) */
.list {
  display: flex;
  flex-direction: column;
  gap: 20px !important;  /* Apply even spacing between all rows */
  margin-top: 24px;
}

.list .list-item {
  font-size: 30px;              /* previously 16px or 18px */
  padding: 22px 24px;           /* make it taller */
  border-radius: 16px;          /* smoother corners */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.2px;
}

/* ✅ Larger touch targets and spacing on mobile */
@media (max-width: 768px) {
  .list {
    gap: 24px !important;
  }

  .list .list-item {
    padding: 20px 24px;
    font-size: 20px;
    border-radius: 16px;
  }
}
/* --- Luxurious header styling --- */

.header-center {
  flex: 1;
  text-align: center;
}


/* utility */
.hidden { display: none !important; }

.pay-choice-row .book-btn.alt { opacity: 0.95 }
.pay-choice-row .hidden { display: none !important; }

/* Payment choice section */
.pay-heading {
  width: 100%;
  margin-top: 12px;
  text-align: center;
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
}

.pay-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 10px;
}

.pay-choice-row .book-btn {
  min-width: 192px;            /* larger buttons */
  height: 64px;
  font-size: 18px;
  border-radius: 16px;
  padding: 14px 18px;
}

#sms-extra {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}
#sms-extra input { max-width: 260px; }
#pay-hint {
  width: 100%;
  text-align: center;
  margin-top: 6px;
}

/* Make pay buttons full-width on small screens */
@media (max-width: 480px) {
  .pay-choice-row .book-btn { min-width: 100%; }
}
/* Confirm bar: big centered CTA */
.confirm-bar {
  display: flex;
  justify-content: center;
  margin: 14px 0 8px;
}
.confirm-bar .book-btn {
  min-width: 540px;     /* larger button */
  height: 64px;
  font-size: 18px;
  border-radius: 16px;
}
#drsknn-explorer .price-line {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #1e1e1e !important;
  margin-bottom: 6px !important;
  line-height: 1.55 !important;
  letter-spacing: 0.2px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#drsknn-explorer .price-line strong {
  font-size: 19px !important;
  font-weight: 900 !important;
  color: #1a1a1a !important; /* Crisp ink black */
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15), 0 0 1px rgba(0, 0, 0, 0.06) !important;
  letter-spacing: 0.25px;
}
/* Optional: hide hint line by default; only show on errors if you set it in JS */
#pay-hint { display: none; }

/* ===== SMS Input Upgrade (Luxury Style) ===== */
#sms-extra input[type="tel"] {
  background: #fdfaf4;
  border: 2px solid #e6dec5;
  border-radius: 16px;
  padding: 18px 20px;
  font-size: 20px;
  font-weight: 600;
  width: 100%;
  max-width: 320px;
  color: #111;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#sms-extra input[type="tel"]:focus {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(200,167,74,0.35);
  outline: none;
}

#sms-extra label {
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-2);
  margin-bottom: 6px;
  display: block;
  text-align: center;
}

#pay-hint {
  width: 100%;
  text-align: center;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #c00;
  display: none;  /* shown only on demand */
}

/* ---- Waitlist Form Luxury Fixes ---- */
.waitlist-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  margin-top: 24px;
}

/* Full-width for long fields */
.waitlist-form .span-2 {
  grid-column: span 2;
}

/* Align all form labels properly */
.waitlist-form label {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 6px;
  display: block;
  color: #333;
}

/* Inputs, selects, etc. */
.waitlist-form input,
.waitlist-form select {
  padding: 14px 16px;
  font-size: 16px;
  border-radius: 14px;
  border: 1px solid #ddd;
  width: 100%;
  background: #fcfcfc;
  font-family: inherit;
}

/* Ensure Service Requested wraps cleanly */
.waitlist-form input[readonly] {
  font-weight: 600;
  background: #f9f8f3;
  word-break: break-word;
}

/* Mobile override: single-column on small screens */
@media (max-width: 768px) {
  .waitlist-form {
    grid-template-columns: 1fr;
  }
}
.popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.4);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-box {
  background: #fff;
  padding: 20px 24px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  text-align: center;
  max-width: 400px;
}
#group-toggle {
  margin-right: 8px;
  transform: scale(1.2);
}
.basket-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}
.basket-list li {
  margin-bottom: 10px;
  line-height: 1.4;
}
.pay-heading {
  font-weight: bold;
  margin-top: 12px;
}
#sms-extra {
  margin-top: 12px;
}
.booking-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
}

.booking-modal .modal-content {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.booking-modal[aria-hidden="false"] {
  display: flex !important;
}

.booking-modal.hidden {
  display: none !important;
}
/* === BASKET UPGRADE - DR SKNN LUXURY STYLE === */
.basket-items {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}

.basket-item {
  background: #fffefb;
  border: 1px solid #e8e1cd;
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

.basket-item strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  display: block;
  margin-bottom: 10px;
}

.basket-item label {
  font-weight: 600;
  font-size: 15px;
  margin-right: 6px;
  display: inline-block;
  color: #444;
}

.basket-item select {
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 15px;
  margin-bottom: 8px;
}

.basket-item div {
  margin-bottom: 8px;
}

.basket-item .book-btn {
  background: linear-gradient(180deg, #fae5e5, #d34c4c);
  color: #fff !important;
  border-radius: 12px;
  font-size: 14px;
  padding: 10px 16px;
  box-shadow: 0 6px 12px rgba(211,76,76,.3);
  margin-top: 8px;
}

.basket-total {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 12px;
  text-align: right;
}

.basket-total.muted {
  font-weight: 600;
  font-size: 15px;
  color: var(--muted);
}

.basket-patient-info {
  margin-top: 24px;
  padding: 22px;
  background: #f9f8f4;
  border: 1px solid #eee0bb;
  border-radius: 16px;
}

#grouping-badge {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* Book All button */
#checkout-basket {
  margin-top: 24px;
  padding: 20px;
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(180deg, #fdf6c9, #d4b03f);
  color: #111;
  border-radius: 18px;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  box-shadow: 0 12px 30px rgba(200,167,74,.28);
  transition: all 0.2s ease;
}

#checkout-basket:hover {
  background: linear-gradient(180deg, #fff0a6, #caa43c);
  box-shadow: 0 14px 36px rgba(200,167,74,.36);
  transform: translateY(-1px);
}
.basket-wrapper {
  max-width: 680px;
  margin: 0 auto;
  background: #fffefb;
  padding: 30px 24px;
  border-radius: 22px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.06);
}
.toggle-pill {
  display: inline-flex;
  align-items: center;
  background: #eee;
  border-radius: 999px;
  padding: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  margin-top: 6px;
}

.toggle-pill input {
  display: none;
}

.toggle-pill .pill-option {
  padding: 6px 12px;
  border-radius: 999px;
  transition: all 0.2s ease;
  background: transparent;
}

.toggle-pill input:checked ~ .pill-option.on {
  background: #cce9da;
  color: #084c32;
}

.toggle-pill input:not(:checked) ~ .pill-option.off {
  background: #f7dada;
  color: #761919;
}
.basket-item-status {
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
  display: inline-block;
}

.basket-item-status.good {
  color: #18794e;
  background: #e7f9ee;
  padding: 4px 8px;
  border-radius: 8px;
}

.basket-item-status.warn {
  color: #7a4600;
  background: #fff5e0;
  padding: 4px 8px;
  border-radius: 8px;
}

.basket-item-status.error {
  color: #a02121;
  background: #fbe5e5;
  padding: 4px 8px;
  border-radius: 8px;
}
@media (max-width: 768px) {
  #checkout-basket {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-bottom: 0 !important;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.12);
  }
}
.empty-basket {
  padding: 40px 20px;
  text-align: center;
  color: #aaa;
  font-size: 16px;
}

.empty-basket-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.basket-total.muted:hover {
  background: linear-gradient(90deg, #fdf5c4, #f1de7e);
  padding: 4px 10px;
  border-radius: 10px;
  transition: all 0.3s ease;
  color: #333;
}
.deposit-note {
  font-size: 13px;
  margin-top: 6px;
  color: #666;
  max-width: 520px;
  line-height: 1.5;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.brand-modal-logo {
  width: 140px;
  margin: 0 auto 10px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.progress-bar {
  display: flex;
  justify-content: space-between;
  margin: 12px 0 20px;
  font-size: 14px;
  text-align: center;
}
.step {
  flex: 1;
  padding: 6px 0;
  border-bottom: 3px solid #ddd;
  color: #999;
}
.step.active {
  border-color: var(--brand-600);
  color: var(--brand-600);
  font-weight: bold;
}
.step.completed {
  border-color: #0a0;
  color: #0a0;
}
.brand-modal-logo {
  width: 140px;
  margin: 0 auto 10px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.progress-bar {
  display: flex;
  justify-content: space-between;
  margin: 12px 0 20px;
  font-size: 14px;
  text-align: center;
}
.step {
  flex: 1;
  padding: 6px 0;
  border-bottom: 3px solid #ddd;
  color: #999;
}
.step.active {
  border-color: var(--brand-600);
  color: var(--brand-600);
  font-weight: bold;
}
.step.completed {
  border-color: #0a0;
  color: #0a0;
}
.progress-bar {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 20px;
  font-size: 14px;
  text-align: center;
}
.step {
  flex: 1;
  padding: 6px;
  border-bottom: 3px solid #ddd;
  color: #999;
}
.step.active {
  border-color: var(--brand-600);
  color: var(--brand-600);
  font-weight: bold;
}
.step.completed {
  border-color: #0f0;
  color: #0a0;
}
.payment-summary {
  background: #fff9e9;
  border-radius: 12px;
  padding: 16px;
  margin: 14px 0;
  font-size: 15px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.tooltip-wrap {
  position: relative;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  color: var(--muted);
}
.tooltip {
  visibility: hidden;
  width: 280px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 8px;
  padding: 8px;
  position: absolute;
  z-index: 99;
  bottom: 130%;
  left: 50%;
  margin-left: -140px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip-wrap:hover .tooltip {
  visibility: visible;
  opacity: 1;
}
.pay-badge {
  font-size: 13px;
  color: #555;
  margin: 10px auto;
  text-align: center;
}
.book-btn.full-width {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(200, 167, 74, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(200, 167, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 167, 74, 0); }
}
/* ===== Toast Notifications ===== */
#toast {
  position: fixed;
  top: 24px;
  right: 24px;
  background: linear-gradient(180deg, #fdf6c9, #d4b03f);
  color: #111;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 6px 16px rgba(200,167,74,.3);
  z-index: 9999;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#toast.show {
  opacity: 1;
  transform: translateY(0);
}
/* ===== LUXURY CENTERED TOAST ===== */
.lux-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lux-toast.show {
  opacity: 1;
}

.lux-toast-inner {
  background: #fffdf8;
  padding: 16px 24px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2);
  border: 1px solid #f0e4c0;
  max-width: 90vw;
  text-align: center;
}
.lux-toast.success .lux-toast-inner {
  background: #e6f9ee;
  color: #18794e;
  border-color: #b4e2cc;
}
.lux-toast.error .lux-toast-inner {
  background: #fbe5e5;
  color: #a02121;
  border-color: #f3c1c1;
}
.lux-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.lux-toast.show {
  opacity: 1;
}
.lux-toast-inner {
  background: #fffdf8;
  padding: 16px 24px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2);
  border: 1px solid #f0e4c0;
  max-width: 90vw;
  text-align: center;
}

#drsknn-explorer .cat-label {
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1.5;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin-bottom: 10px;
  font-family: "Montserrat", sans-serif;
}
/* Category price microcopy */
#drsknn-explorer .pill-price{margin-top:6px;line-height:1.25}

/* Free consult badges */
#drsknn-explorer .free-block .badge-row{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 2px}
#drsknn-explorer .free-block .badge{padding:2px 8px;border-radius:12px;font-weight:700;font-size:12px;border:1px solid transparent}
#drsknn-explorer .free-block .badge-doc{background:#fff6dc;color:#7b5a00;border-color:#e9cf8b}
#drsknn-explorer .free-block .badge-nurse{background:#eaf3ff;color:#0b4aa3;border-color:#9cc4ff}
#drsknn-explorer .free-block .badge-qp{background:#f4eaff;color:#5c2fb1;border-color:#c9aff8}
#drsknn-explorer .free-block .free-note{font-size:12px;opacity:.85;margin-top:4px}
#drsknn-explorer .cat-label{display:inline-block;font-weight:600;font-size:16px;line-height:1.3;margin-bottom:2px}

#drsknn-explorer .price-stack .price-line {
  display: block;
  margin: 2px 0;
}

#drsknn-explorer .price-stack .muted {
  color: #888;
  font-size: 12px;
  margin-bottom: 3px;
}

#drsknn-explorer .free-block .badge-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 4px 0 2px;
}

#drsknn-explorer .free-block .badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 12px;
  border: 1px solid transparent;
}

/* === Modernised, High-Luxury Role Badges === */

#drsknn-explorer .free-block .badge {
  font-size: 15px;
  padding: 6px 14px;
  font-weight: 700;
  border-radius: 16px;
  display: inline-block;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  border: none;
  transition: all 0.25s ease;
}

/* === High-Luxury Role Badges v2 === */

#drsknn-explorer .free-block .badge {
  font-size: 15px;
  padding: 7px 16px;
  font-weight: 700;
  border-radius: 18px;
  display: inline-block;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  border: none;
  transition: all 0.3s ease;
  letter-spacing: 0.3px;
}

/* Doctor: crisp ivory to champagne shimmer */
#drsknn-explorer .free-block .badge-doc {
  background: linear-gradient(135deg, #fefdfb 0%, #e8d9b8 100%);
  color: #3e2c14;
  text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}

/* Nurse: clean seafoam to soft mint */
#drsknn-explorer .free-block .badge-nurse {
  background: linear-gradient(135deg, #f2fbfa 0%, #b7e5dd 100%);
  color: #24514c;
  text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}

/* Qualified Practitioner: soft orchid to lavender fog */
#drsknn-explorer .free-block .badge-qp {
  background: linear-gradient(135deg, #f9f6ff 0%, #d5c8f0 100%);
  color: #4d3c75;
  text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}

/* Optional hover glow */
#drsknn-explorer .free-block .badge:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 0 0 2px rgba(200, 167, 74, 0.2), 0 8px 20px rgba(0,0,0,0.08);
}

#drsknn-explorer .free-block .badge {
  font-size: 16px !important;
  padding: 8px 14px !important;
  border-radius: 16px !important;
}

#drsknn-explorer .free-note {
  font-size: 17px !important;
  font-weight: 600;
  padding: 12px 18px;
  line-height: 1.65;
  background: linear-gradient(90deg, #fff8dc, #f3eec0);
  border-radius: 16px;
  border: 1px solid #e7ddbd;
  color: #3a3a3a;
  box-shadow: 0 4px 16px rgba(200,167,74,.08);
}

#drsknn-explorer .free-block.split-layout {
  gap: 30px;
  flex-wrap: wrap;
  align-items: flex-start;
}

#drsknn-explorer .pill-left {
  flex: 1 1 240px;
  min-width: 240px;
}

#drsknn-explorer .pill-right {
  flex: 2 1 360px;
  min-width: 280px;
}
#drsknn-explorer .free-note {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 4px;
}
#drsknn-explorer .premium-stack {
  margin-top: 4px;
  line-height: 1.4;
}
#drsknn-explorer .premium-stack .subtle-label {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  color: #a59a7a;
  margin-bottom: 2px;
  letter-spacing: 0.4px;
}

#drsknn-explorer .badge-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
#drsknn-explorer .free-subtitle,
#drsknn-explorer .performed-label {
  font-weight: 800;
  font-size: 18px;
  color: #333;
  margin: 10px 0 8px;
  line-height: 1.5;
  letter-spacing: 0.3px;
}
#drsknn-explorer .cat-label {
  display: inline-block;
  font-weight: 1000;
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 6px;
  color: var(--ink);
  letter-spacing: -0.2px;
  font-family: "Montserrat", sans-serif;
}
#drsknn-explorer .list-item:hover .cat-label {
  color: var(--brand-600);
  text-shadow: 0 1px 0 #fff1b8, 0 0 6px rgba(200, 167, 74, 0.3);
}
#drsknn-explorer .cat-label {
  display: block;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  margin-bottom: 6px;
  color: #111;
  position: relative;
  font-family: "Montserrat", sans-serif;
  letter-spacing: -0.2px;
}

/* Subtle underline glow */
#drsknn-explorer .cat-label::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #d4b03f, #c8a74a, #e6cf84);
  border-radius: 2px;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
#drsknn-explorer .list-item:hover .cat-label {
  color: var(--brand-600);
}
#drsknn-explorer .list-item:hover .cat-label::after {
  opacity: 0.8;
}
#drsknn-explorer .category-intro-box {
  background: linear-gradient(180deg, #fffdf4, #fdf9ea);
  border: 1px solid #e7ddbd;
  border-radius: 14px;
  padding: 18px 22px;
  margin: 10px 0 24px;
  box-shadow: 0 4px 16px rgba(200, 167, 74, 0.06);
  font-family: "Montserrat", sans-serif;
}

#drsknn-explorer .category-intro-box .intro-heading {
  font-size: 16px;
  font-weight: 700;
  color: #c19d35;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

#drsknn-explorer .category-intro-box {
  background: linear-gradient(180deg, #fffdf4, #fdf9ea);
  border: 1px solid #e7ddbd;
  border-radius: 14px;
  padding: 18px 22px;
  margin: 10px 0 24px;
  box-shadow: 0 4px 16px rgba(200, 167, 74, 0.06);
  font-family: "Montserrat", sans-serif;
}
#drsknn-explorer .category-intro-box .intro-heading {
  font-size: 16px;
  font-weight: 700;
  color: #c19d35;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
#drsknn-explorer .category-intro-box .intro-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  opacity: 0.95;
}

#drsknn-explorer .category-intro-box {
  background: linear-gradient(180deg, #fffdf4, #fdf9ea);
  border: 1px solid #e7ddbd;
  border-radius: 14px;
  padding: 18px 22px;
  margin: 10px 0 24px;
  box-shadow: 0 4px 16px rgba(200, 167, 74, 0.06);
  font-family: "Montserrat", sans-serif;
}
#drsknn-explorer .category-intro-box .intro-heading {
  font-size: 16px;
  font-weight: 700;
  color: #c19d35;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
#drsknn-explorer .category-intro-box .intro-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  opacity: 0.95;
}
#drsknn-explorer .redirect-hint {
  font-size: 13px;
  margin: 8px 0 0;
  color: #7b5a00;
  background: #fff9df;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid #eadca6;
  font-weight: 500;
}
/* ===== Fix stacked service card grid for mobile ===== */
@media (max-width: 640px) {
  .location-grid {
    display: flex !important;
    flex-direction: column;
    gap: 18px;
  }

  .loc-col {
    padding: 16px;
    border-radius: 14px;
    font-size: 16px;
  }

  .loc-col .location-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
  }

  .loc-col .book-btn {
    margin-top: 10px;
    font-size: 16px;
    padding: 14px 18px;
    border-radius: 12px;
  }

  .slots {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 6px;
  }

  .card h4 {
  font-size: 26px !important;
  font-weight: 800;
  line-height: 1.45;
  margin-bottom: 16px;
}

  .desc {
    font-size: 15px;
    line-height: 1.55;
  }
}
#drsknn-explorer .free-block.split-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

#drsknn-explorer .pill-left {
  flex: 1 1 220px;
  min-width: 200px;
}

#drsknn-explorer .pill-right {
  flex: 2 1 320px;
  min-width: 260px;
}
#drsknn-explorer .free-block .badge {
  font-size: 18px !important;
  padding: 10px 20px !important;
  border-radius: 18px !important;
  font-weight: 800;
  letter-spacing: 0.4px;
}

#drsknn-explorer .free-note {
  font-size: 17px !important;
  font-weight: 600;
  padding: 16px 20px;
  line-height: 1.75;
  background: linear-gradient(90deg, #fff8dc, #f3eec0);
  border-radius: 16px;
  border: 1px solid #e7ddbd;
  color: #3a3a3a;
  box-shadow: 0 4px 16px rgba(200,167,74,.08);
}
@media (min-width: 768px) {
  html {
    font-size: 18px;
  }
}
#drsknn-explorer .list-item:hover .cat-label {
  color: var(--brand-600);
  text-shadow: 0 0 8px rgba(246, 222, 98, 0.7), 0 0 12px rgba(255, 241, 172, 0.6);
  transition: text-shadow 0.3s ease, color 0.3s ease;
}

#drsknn-explorer .free-category-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  border-bottom: 2px solid #f0e6c2;
  padding-bottom: 4px;
  margin-bottom: 6px;
  display: inline-block;
  line-height: 1.3;
}


#drsknn-explorer .free-note {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #555;
  background: linear-gradient(90deg, #fff8e6, #f6eebb);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #e7ddbd;
  box-shadow: 0 4px 12px rgba(200,167,74,.1);
}

#drsknn-explorer .free-block .badge {
  font-size: 14px;
  padding: 6px 12px;
  font-weight: 700;
  border-radius: 14px;
}
@media (max-width: 600px) {
  #drsknn-explorer .badge-row {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
  }
}

#drsknn-explorer .subtle-label {
  font-size: 16px;
  font-weight: 700;
  color: #444;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.card:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

#drsknn-explorer .pill-price {
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(180deg, #fffdee, #fdf6c9);
  border: 2px solid #e4d3a4;
  border-radius: 18px;
  padding: 18px 24px;
  margin-top: 14px;
  box-shadow: 0 12px 28px rgba(200, 167, 74, 0.12), 0 6px 16px rgba(0, 0, 0, 0.06);
  color: #3a3a3a;
  line-height: 1.6;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#drsknn-explorer .pill-price:hover {
  transform: scale(1.015);
  box-shadow: 0 14px 36px rgba(200, 167, 74, 0.2), 0 8px 20px rgba(0,0,0,0.08);
}

#drsknn-explorer .subtle-label {
  color: #a1883f;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}

#drsknn-explorer [data-view] {
  overflow-y: auto;
  scroll-behavior: auto !important;
  scroll-snap-type: y mandatory;
}
#drsknn-explorer .first-date{margin-bottom:2px;font-size:12px;opacity:.8}




















/* --- 900M UX: role rows, price pills, tidy actions --- */
#drsknn-explorer .lv-group{border-radius:16px}
#drsknn-explorer .lg-title{font-weight:900; letter-spacing:.2px; margin:6px 0 10px}

#drsknn-explorer .lg-role{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px 14px;
  align-items:start;
  border:1px solid #efe7c8;
  background:linear-gradient(180deg,#fffef8,#fffaf0);
  border-radius:14px;
  padding:12px;
}
#drsknn-explorer .lg-role .rname{
  font-weight:900;
  font-size:14px;
  letter-spacing:.3px;
  text-transform:uppercase;
  line-height:1.25;
  color:#1c1a13;
}

#drsknn-explorer .lg-actions{display:block}
#drsknn-explorer .action-stack{
  display:grid;
  gap:10px;
  justify-items:end;
}

/* Primary/secondary price pills */
#drsknn-explorer .price-pill{
  min-width:210px;
  padding:10px 16px;
  border-radius:14px;
  font-weight:900;
  border:0;
  box-shadow:0 12px 26px rgba(200,167,74,.28);
  cursor:pointer;
  line-height:1.15;
}
#drsknn-explorer .price-pill.primary{
  background:linear-gradient(180deg,#fdf6c9,#d4b03f);
}
#drsknn-explorer .price-pill.secondary{
  background:#fff;
  border:1px solid #e7dfc4;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}

/* Ghost "Add to basket" buttons, tidy pair */
#drsknn-explorer .mini-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
  width:210px;
}
#drsknn-explorer .ghost-btn{
  padding:9px 10px;
  border-radius:12px;
  border:1px dashed #e7dfc4;
  background:#fff;
  font-weight:800;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  cursor:pointer;
}

/* Responsive: collapse to full width on narrow screens */
@media (max-width: 1150px){
  #drsknn-explorer .lg-role{
    grid-template-columns: 1fr;
  }
  #drsknn-explorer .action-stack,
  #drsknn-explorer .mini-row{
    justify-items:stretch;
    width:100%;
  }
  #drsknn-explorer .price-pill,
  #drsknn-explorer .ghost-btn{ width:100% }
}
/* ---- Premium action layout for roles ---- */
#drsknn-explorer .lg-actions{display:flex;justify-content:flex-end}
#drsknn-explorer .action-stack{display:grid;gap:8px;justify-items:end}
#drsknn-explorer .mini-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

#drsknn-explorer .price-pill{
  border:none; border-radius:14px; padding:10px 14px; font-weight:900; cursor:pointer;
  box-shadow:0 10px 26px rgba(200,167,74,.25);
}
#drsknn-explorer .price-pill.primary{
  background:linear-gradient(180deg,#fdf6c9,#d4b03f);
}
#drsknn-explorer .price-pill.secondary{
  background:#fff; border:1px solid #e7dfc4; box-shadow:0 8px 18px rgba(0,0,0,.06);
}

#drsknn-explorer .ghost-btn{
  background:#fff; border:1px dashed #e7dfc4; border-radius:12px; padding:8px 12px;
  font-weight:750; cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.04);
}
#drsknn-explorer .ghost-btn:hover{transform:translateY(-1px)}
#drsknn-explorer .rname{font-weight:900}

/* Tighten the group cards just a touch */
#drsknn-explorer .lv-group{padding:14px}

#drsknn-explorer .lv-right {
  position: absolute;
  inset: 0;
  border: 0;
  width: 100%;
  height: 100vh;              /* 👈 forces exact screen height */
  min-height: 100vh;
  max-height: 100vh;
  overflow: auto;
}
#drsknn-explorer .lv-right {
  border-left: 1px solid #eee;
  padding: 18px;
  overflow-y: auto;
  height: 100vh;             /* 👈 forces the panel to take screen height */
  max-height: 100vh;
}
#drsknn-explorer .learn-viewer {
  z-index: 2147483000 !important;
}
.learn-modal-content {
  width: 96vw;
  max-width: 1280px;
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#learn-iframe-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

#learn-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
  transition: opacity 0.3s ease;
}

.learn-skeleton {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(-90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite linear;
  z-index: 1;
}

@keyframes shimmer {
  0% { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}
/* --- 900M Learn Card layout --- */
#drsknn-explorer .learn-card.pro {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 128px;
  gap: 14px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.06);
  padding: 16px;
}
#drsknn-explorer .learn-card.pro .learn-main{display:grid;gap:10px}
#drsknn-explorer .learn-card.pro .topline{
  font-weight:900;font-size:16px;letter-spacing:.2px
}
#drsknn-explorer .learn-card.pro .url-row{
  font-size:12px;color:#666;word-break:break-all
}
#drsknn-explorer .learn-card.pro .cta-row{display:flex;gap:10px;flex-wrap:wrap}
#drsknn-explorer .learn-card.pro .qr-shell{
  width:128px;height:128px;display:grid;place-items:center;
  border:1px solid #eee;border-radius:14px;background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.06)
}
#drsknn-explorer .learn-card.pro .qr-shell img{width:112px;height:112px;border-radius:10px}
#drsknn-explorer .learn-card.pro .qr-caption{
  grid-column: 2 / 3; text-align:center; font-size:11px; color:#555; margin-top:-6px
}

/* Role select modal */
#drsknn-explorer .role-grid{display:grid;gap:10px;grid-template-columns:1fr}
#drsknn-explorer .role-pill{
  display:flex;align-items:center;gap:10px;justify-content:center;
  padding:12px;border-radius:14px;border:1px solid #e7dfc4;background:#fff;
  font-weight:800;cursor:pointer;user-select:none
}
#drsknn-explorer .role-pill.selected{
  background:linear-gradient(180deg,#fff6c9,#d4b03f);
  box-shadow:0 10px 28px rgba(200,167,74,.28); border-color:#d4b03f
}
#drsknn-explorer .role-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
/* --- Performed by badges (lux) --- */
#drsknn-explorer .performed{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:4px 0 6px;
}
#drsknn-explorer .performed-label{
  font-weight:800; font-size:12px; color:#7a6a3b; text-transform:uppercase; letter-spacing:.4px;
}
#drsknn-explorer .rbadge{
  display:inline-block; padding:6px 12px; border-radius:999px; font-weight:800; font-size:12px;
  border:1px solid #e7dfc4; background:#fffaf0; box-shadow:0 3px 8px rgba(0,0,0,.04);
}
#drsknn-explorer .rbadge.r-doctor{ background:#fff6dc; border-color:#e9cf8b; color:#7b5a00; }
#drsknn-explorer .rbadge.r-nurse{ background:#eaf3ff; border-color:#9cc4ff; color:#0b4aa3; }
#drsknn-explorer .rbadge.r-qualified-practitioner{ background:#f4eaff; border-color:#c9aff8; color:#5c2fb1; }
/* --- “Available as” summary (900M tidy) --- */
#drsknn-explorer .avail-wrap{
  margin-top:10px;
  background:#fffef6;
  border:1px solid #efe4c5;
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}
#drsknn-explorer .avail-title{
  font-size:12px;
  font-weight:800;
  color:#8b7735;
  text-transform:uppercase;
  letter-spacing:.4px;
  margin-bottom:6px;
}
#drsknn-explorer .avail-grid{ display:grid; gap:6px; }
#drsknn-explorer .avail-row{
  display:flex; justify-content:space-between; align-items:center;
  font-weight:800; line-height:1.25;
}
#drsknn-explorer .avail-name{ color:#222; }
#drsknn-explorer .avail-price{ color:#C8A74A; }
/* --- Variant → Role pricing (900M) --- */
#drsknn-explorer .avail-wrap{
  margin-top:10px; background:#fffef6; border:1px solid #efe4c5;
  border-radius:12px; padding:12px; box-shadow:0 6px 18px rgba(0,0,0,.04);
}
#drsknn-explorer .avail-title{
  font-size:12px; font-weight:900; color:#8b7735; text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px;
}
#drsknn-explorer .avail-variant{
  border:1px dashed #eadfbf; border-radius:10px; padding:10px 12px; background:#fffdf7; margin-top:8px;
}
#drsknn-explorer .variant-label{
  font-size:12px; font-weight:900; color:#7a6a3b; text-transform:uppercase; letter-spacing:.3px; margin-bottom:6px;
}
#drsknn-explorer .variant-roles{ display:grid; gap:6px; }
#drsknn-explorer .role-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
#drsknn-explorer .role-price{ font-weight:900; color:#C8A74A; }
/* --- 900M Learn Card layout (QR on the right) --- */
#drsknn-explorer .learn-card.pro {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 128px;
  gap: 14px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.06);
  padding: 16px;
}
#drsknn-explorer .learn-card.pro .learn-main{display:grid;gap:10px}
#drsknn-explorer .learn-card.pro .topline{font-weight:900;font-size:16px;letter-spacing:.2px}
#drsknn-explorer .learn-card.pro .url-row{font-size:12px;color:#666;word-break:break-all}
#drsknn-explorer .learn-card.pro .cta-row{display:flex;gap:10px;flex-wrap:wrap}
#drsknn-explorer .learn-card.pro .qr-shell{
  width:128px;height:128px;display:grid;place-items:center;
  border:1px solid #eee;border-radius:14px;background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.06)
}
#drsknn-explorer .learn-card.pro .qr-shell img{width:112px;height:112px;border-radius:10px}
#drsknn-explorer .learn-card.pro .qr-caption{
  grid-column: 2 / 3; text-align:center; font-size:11px; color:#555; margin-top:-6px
}
/* QUICK BOOK — Ultra UX (optional stylesheet version) */
.booking-modal#quickbook-modal{
  background:
    radial-gradient(1200px 600px at 18% 12%, rgba(200,167,74,.13), transparent 52%),
    radial-gradient(1200px 600px at 86% 88%, rgba(0,0,0,.28), rgba(0,0,0,.66));
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
#drsknn-explorer .qbux-card{
  width:min(96vw,980px); border-radius:22px; padding:22px 22px 18px;
  background: linear-gradient(180deg, #ffffffee, #fffdf6ee);
  border:1px solid rgba(200,167,74,.22);
  box-shadow: 0 28px 90px rgba(0,0,0,.38), 0 1px 0 rgba(255,255,255,.75) inset;
  position:relative; overflow:hidden;
}
#drsknn-explorer .qbux-card::before{
  content:""; position:absolute; inset:0; padding:1px; border-radius:22px;
  background: linear-gradient(120deg, rgba(200,167,74,.55), rgba(255,255,255,0), rgba(200,167,74,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
#drsknn-explorer .qbux-h{ display:flex; align-items:center; gap:10px; margin:2px 0 4px }
#drsknn-explorer .qbux-ttl{
  font-weight:900; letter-spacing:.2px; font-size:22px;
  background:linear-gradient(180deg,#111,#444); -webkit-background-clip:text; background-clip:text; color:transparent;
}
#drsknn-explorer .qbux-sub{ color:#7b6a2f; font-size:13px; letter-spacing:.3px; margin:0 0 10px 0 }
#drsknn-explorer .qbux-close{ position:absolute; top:10px; right:14px; border:0; background:transparent; font-size:22px; color:#666; cursor:pointer }
#drsknn-explorer .qbux-locs{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 14px; background:#fffaf0; border:1px solid #efe2bf; border-radius:14px; padding:8px; box-shadow:0 8px 22px rgba(200,167,74,.12) inset }
#drsknn-explorer .qbux-loc{ border:1px solid #e7dfc4; background:#fff; color:#1c1a13; padding:8px 12px; border-radius:12px; font-weight:800; cursor:pointer }
#drsknn-explorer .qbux-loc.active{ background:linear-gradient(180deg,#fdf6c9,#d4b03f); border-color:#d4b03f; box-shadow:0 12px 30px rgba(200,167,74,.35) }
#drsknn-explorer .qbux-grid{ display:grid; gap:12px }
@media(min-width:840px){ #drsknn-explorer .qbux-grid{ grid-template-columns:1fr 1fr } }
#drsknn-explorer .qbux-cardItem{ background:linear-gradient(180deg,#ffffff,#fffaf0); border:1px solid #efe2bf; border-radius:16px; padding:12px; box-shadow:0 14px 36px rgba(0,0,0,.08) }
#drsknn-explorer .qbux-variant{ font-weight:900; letter-spacing:.2px; margin-bottom:6px }
#drsknn-explorer .qbux-row{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; border:1px dashed #eadfbf; border-radius:12px; padding:10px; background:#fffef7 }
#drsknn-explorer .qbux-role{ font-weight:900; font-size:12px; text-transform:uppercase; color:#7a6a3b; letter-spacing:.35px }
#drsknn-explorer .qbux-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end }
#drsknn-explorer .qbux-btn{ border:none; border-radius:14px; padding:10px 14px; font-weight:900; cursor:pointer; box-shadow:0 10px 26px rgba(200,167,74,.25) }
#drsknn-explorer .qbux-btn.primary{ background:linear-gradient(180deg,#fdf6c9,#d4b03f) }
#drsknn-explorer .qbux-btn.secondary{ background:#fff; border:1px solid #e7dfc4; box-shadow:0 8px 18px rgba(0,0,0,.06) }
#drsknn-explorer .qbux-empty{ padding:14px; border:1px dashed #e7dfc4; border-radius:12px; background:#fff; text-align:center; color:#666 }

/* === APPEND-ONLY — Quick Book luxe centering + big role tiles === */

/* Center the modal contents perfectly */
.booking-modal#quickbook-modal { align-items: center !important; justify-content: center !important; }

/* Wider canvas + centered layout */
.booking-modal#quickbook-modal .qb3{
  width: min(98vw, 1120px) !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Stretch the grid nicely on large screens */
.booking-modal#quickbook-modal .qb3-grid{
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 16px !important;
  justify-content: center !important;
}

/* Make each variant card breathe */
.booking-modal#quickbook-modal .qb3-card{
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 16px !important;
}

/* BIG role tiles */
.booking-modal#quickbook-modal .qb3-tile{
  padding: 16px 16px 18px !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.08) !important;
  min-height: 120px !important;
  transition: transform .15s ease, box-shadow .2s ease !important;
}
.booking-modal#quickbook-modal .qb3-tile:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.12) !important;
}

/* Hero role label */
.booking-modal#quickbook-modal .qb3-role{
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  color: #1c1a13 !important;
}

/* Price line: bold, luxe */
.booking-modal#quickbook-modal .qb3-price{
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--brand, #C8A74A) !important;
}

/* Remove the “Single” plan label completely */
.booking-modal#quickbook-modal .qb3-tile[data-plan="Single"] .qb3-plan{ display:none !important; }

/* Location chips + CTA centered */
.booking-modal#quickbook-modal #qb3-locs{ justify-content: center !important; }
.booking-modal#quickbook-modal .qb3-cta{ justify-content: center !important; }
.booking-modal#quickbook-modal .qb3-continue{ min-width: 360px !important; }

/* Optional: a refined free-consult banner (when shown by JS) */
.booking-modal#quickbook-modal .qb3-free-banner{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background: linear-gradient(90deg,#fff8dc,#f3eec0);
  border: 1px solid #e7ddbd;
  border-radius: 14px;
  padding: 12px 16px;
  margin: 6px 0 12px;
  font-weight: 800; color:#3a3a3a;
  box-shadow: 0 10px 28px rgba(200,167,74,.18);
}
.booking-modal#quickbook-modal .qb3-free-banner strong{ color:#6d540e; }
/* === 900M Quick Book — big central CTA + role emphasis + gating === */
.booking-modal#quickbook-modal .qb3-tiles{align-items:stretch}

.booking-modal#quickbook-modal .qb3-tile{
  display:grid; grid-auto-rows:max-content; align-content:start;
  text-align:center;
}

/* Big, friendly CTA line */
.booking-modal#quickbook-modal .qb3-bigcta{
  margin-top:6px;
  font-size:20px;
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.2;
}

/* Small “no times here” badge */
.booking-modal#quickbook-modal .qb3-noavail{
  margin-top:8px;
  display:inline-block;
  font-weight:800;
  font-size:12px;
  color:#7a2b00;
  background:#fff3e0;
  border:1px solid #f0cf9b;
  padding:6px 10px;
  border-radius:10px;
}

/* Disable look when a role has no availability in the selected clinic */
.booking-modal#quickbook-modal .qb3-tile.disabled{
  opacity:.45; filter:grayscale(1);
  pointer-events:none;
}

/* Make roles stand out by role-colored frames */
.booking-modal#quickbook-modal .qb3-tile[data-role="Doctor"]{
  border-width:2px;
  border-color:#e9cf8b;
  background:linear-gradient(180deg,#fffef7,#fff8e0);
}
.booking-modal#quickbook-modal .qb3-tile[data-role="Nurse"]{
  border-width:2px;
  border-color:#b7e5dd;
  background:linear-gradient(180deg,#f8fffe,#ebfaf7);
}
.booking-modal#quickbook-modal .qb3-tile[data-role="Qualified Practitioner"]{
  border-width:2px;
  border-color:#c9aff8;
  background:linear-gradient(180deg,#fbf8ff,#f3ecff);
}

/* Bigger role label (keeps your previous polish) */
.booking-modal#quickbook-modal .qb3-role{
  font-size:18px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
}

/* Hide the tiny “Single” plan chip everywhere in Quick Book */
.booking-modal#quickbook-modal .qb3-tile[data-plan="Single"] .qb3-plan{display:none !important;}


/* ============ CONDITIONS: UNSTICK THE TOOLBAR (NO OVERLAY) ============ */
#drsknn-explorer .cond-toolbar,
#drsknn-explorer .op-cond-toolbar{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}
#drsknn-explorer .cond-toolbar,
#drsknn-explorer .op-cond-toolbar { margin-bottom: 12px; }

/* (If you later want it sticky on desktop only, remove the block above and use:)
@media (min-width: 1025px){
  #drsknn-explorer .op-cond-toolbar{ position: sticky; top: calc(var(--hdrH,58px) + 10px); z-index: 3; }
}
*/

/* ============ MODALS: BIG, CLEAR, ALWAYS-VISIBLE CLOSE ============ */
.booking-modal .close-btn,
#learn-viewer .learn-close,
.booking-modal#quickbook-modal .qb3-close{
  position: sticky !important;                     /* stays visible while scrolling */
  top: calc(env(safe-area-inset-top, 8px) + 8px) !important;
  right: calc(env(safe-area-inset-right, 8px) + 8px) !important;
  margin-left: auto !important;                    /* push to right of the frame */
  width: 56px !important;
  height: 56px !important;
  font-size: 32px !important;                      /* bigger X */
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.98) !important;
  color: #222 !important;
  border: 1px solid #e7e7e7 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  z-index: 10 !important;
}

/* Keep “X” clear of the notch/safe areas */
.booking-modal .close-btn{ top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
#learn-viewer .learn-close{ top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }

/* ============ QUICK BOOK: SCROLLABLE + PINNED CLOSE ON MOBILE ============ */
.booking-modal#quickbook-modal { align-items: center !important; justify-content: center !important; }

.booking-modal#quickbook-modal .qb3{
  width: min(98vw, 1120px) !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-top: 56px; /* room for the sticky close */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  position: relative;
}

/* Make the Quick Book “X” stick within the scroller so it never disappears */
.booking-modal#quickbook-modal .qb3-close{
  position: sticky !important;
  top: calc(env(safe-area-inset-top, 8px) + 8px) !important;
  margin-left: auto !important;   /* push it to the right edge */
  right: 10px;
}

/* Fallback if sticky isn’t supported */
@supports not (position: sticky){
  .booking-modal#quickbook-modal .qb3-close{
    position: absolute !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
  }
}

/* ============ LEARN “OPEN GUIDE” POPUP: CENTER + BIG X ============ */
#learn-viewer{
  display: none; align-items: center; justify-content: center;
  padding: 10px; /* breathing room around the frame */
}
#learn-viewer.show{ display: flex; }

#learn-viewer .learn-box{
  width: min(98vw, 1100px);
  height: min(90vh, 900px);
  max-height: 90vh;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.40);
  overflow: hidden;              /* keep rounded corners crisp */
}

#learn-viewer .learn-head{
  position: sticky; top: 0; z-index: 5;
  background: #fff; border-bottom: 1px solid #eee;
  padding-right: 56px; /* space so the big X doesn't cover title */
}

#learn-viewer .learn-body{ position: relative; overflow: hidden; }
#learn-viewer .learn-iframe{ position: absolute; inset: 0; width: 100%; height: 100%; }

/* Hide the floating “Menu” bubble whenever any modal/popup is open */
body.modal-open #drsknn-menu-bubble{ display: none !important; }
/* ================================
   MOBILE QUICK BOOK — COMPACT MODE
   (≤ 430px wide)
   ================================ */
@media (max-width: 430px){
  /* Modal canvas */
  .booking-modal#quickbook-modal .qb3{
    max-height: 88vh !important;
    padding: 12px 12px 64px !important; /* tighter */
  }
  .booking-modal#quickbook-modal .qb3-sub{ font-size: 12px !important; margin-bottom: 6px !important; }

  /* Location chips */
  .booking-modal#quickbook-modal #qb3-locs{ gap: 6px !important; padding: 6px !important; }
  .booking-modal#quickbook-modal .qb3-loc{
    padding: 6px 8px !important;
    font-size: 12px !important; border-radius: 10px !important;
  }

  /* Variant cards + tiles */
  .booking-modal#quickbook-modal .qb3-grid{ grid-template-columns: 1fr !important; gap: 10px !important; }
  .booking-modal#quickbook-modal .qb3-card{ padding: 10px !important; border-radius: 12px !important; }
  .booking-modal#quickbook-modal .qb3-vtitle{ font-size: 14px !important; margin: 0 0 6px !important; }

  .booking-modal#quickbook-modal .qb3-tile{
    padding: 10px !important; min-height: unset !important; border-radius: 12px !important;
  }
  .booking-modal#quickbook-modal .qb3-role{ font-size: 13px !important; letter-spacing: .2px !important; }
  .booking-modal#quickbook-modal .qb3-plan{ display: none !important; } /* save vertical space */
  .booking-modal#quickbook-modal .qb3-price{ font-size: 16px !important; }
  .booking-modal#quickbook-modal .qb3-hint{ font-size: 11.5px !important; }

  /* “First Available Appointments” label that we inject in JS */
  #quickbook-modal .qb3-tile .qb3-hint .fa-label{ font-size: 11px !important; }
  #quickbook-modal .qb3-tile .qb3-hint .fa-times{ font-size: 12px !important; }

  /* Primary sticky CTA */
  .booking-modal#quickbook-modal .qb3-cta{ padding: 10px 12px !important; }
  .booking-modal#quickbook-modal .qb3-continue{
    width: 100% !important; min-width: 0 !important;
    height: 48px !important; font-size: 16px !important; border-radius: 12px !important;
  }

  /* Optional banner */
  .booking-modal#quickbook-modal .qb3-free-banner{
    font-size: 12px !important; padding: 8px 10px !important;
  }
}

/* Shrink “Book / Subscribe / Add to Basket” buttons inside the stacked cards too (mobile) */
@media (max-width: 430px){
  .loc-col .book-btn,
  .loc-col .basket-btn,
  .loc-col .waitlist-btn{
    font-size: 14px !important; padding: 10px 12px !important; border-radius: 10px !important;
  }
}

/* ===============================================
   CONDITIONS — RECENTER + SCROLL HINTS ON MOBILE
   =============================================== */

/* 1) Hard-centre the one-page Conditions canvas and title */
#drsknn-explorer [data-view="learn-group"] .section-title{
  text-align: center;
}
#drsknn-explorer .op-cond-wrap{
  max-width: 960px !important;
  margin: 0 auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* 2) Make the chips row obviously scrollable on phones */
#drsknn-explorer .op-chips{
  position: relative;
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* IE */
}
#drsknn-explorer .op-chips::-webkit-scrollbar{ display:none; }  /* WebKit */

@media (max-width: 900px){
  #drsknn-explorer .op-chips::after{
    content: "Swipe ›";
    position: absolute;
    right: 6px; top: 50%; transform: translateY(-50%);
    font-size: 12px; font-weight: 800; color: #7b6a2f;
    padding-left: 14px;
    background: linear-gradient(to left, #fff 60%, rgba(255,255,255,0));
    pointer-events: none;
    border-radius: 10px;
  }
}

/* 3) Single-column cards on phones, perfectly centred */
@media (max-width: 980px){
  #drsknn-explorer .op-grid{
    grid-template-columns: 1fr !important;
  }
}

/* 4) Tiny polish: keep the whole app canvas truly centred on mobile */
#drsknn-explorer [data-view]{
  margin-left: auto !important;
  margin-right: auto !important;
}
/* =========================
   CONDITIONS — CHIP HINT FIX
   (stop "Swipe ›" overlapping)
   ========================= */
@media (max-width: 900px){
  #drsknn-explorer .op-chips{
    position: relative !important;
    padding-right: 66px !important;   /* reserve space for the hint */
  }
  #drsknn-explorer .op-chips::after{
    right: 10px !important;           /* keep it visually on the edge */
    z-index: 2 !important;            /* stays above the row bg only */
    pointer-events: none !important;
  }
  /* hide the hint once the user has scrolled the chips to the end */
  #drsknn-explorer .op-chips.at-end::after{
    content: none !important;
  }
}

/* =========================================
   QUICK BOOK — HARD MOBILE GUARD (≤480px)
   (wins against earlier “luxe” blocks)
   ========================================= */
@media (max-width: 480px){
  .booking-modal#quickbook-modal .qb3{
    width: 96vw !important;
    max-height: 88vh !important;
    padding: 12px 12px 64px !important;
    overflow-y: auto !important;
  }
  .booking-modal#quickbook-modal .qb3-grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .booking-modal#quickbook-modal .qb3-tile{
    min-height: unset !important;
    padding: 10px !important;
  }
}
/* iOS-only: remove the hint and fix stacking so chips always win */
@supports (-webkit-touch-callout: none) {
  #drsknn-explorer .op-chips::after { content: none !important; }
  #drsknn-explorer .op-chips { padding-right: 0 !important; }
}

/* Make sure chips render above any pseudo-elements */
#drsknn-explorer .op-chips { position: relative !important; }
#drsknn-explorer .op-chips > * { position: relative !important; z-index: 3 !important; }
/* === FULL DESKTOP WIDTH RESTORE (≥1024px) === */
@media (min-width: 1024px){
  /* App canvas and views fill the screen */
  #drsknn-explorer{
    width: 100vw !important;
    max-width: none !important;
  }
  #drsknn-explorer [data-view]{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 24px;   /* keep a little breathing room */
    padding-right: 24px;
  }

  /* Any feature pages that were boxed */
  #drsknn-explorer .op-cond-wrap,
  #drsknn-explorer .reviews-wrap,
  #drsknn-explorer .locations-wrap,
  #drsknn-explorer .contact-wrap,
  #drsknn-explorer .learn-grid,
  #drsknn-explorer .card-stack,
  #drsknn-explorer .list{
    max-width: none !important;
    margin: 0 !important;
  }
}
/* === DESKTOP & TABLET LANDSCAPE — FULL SCREEN RESTORE === */
@media (min-width: 900px) and (orientation: landscape){

  /* App canvas (remove boxing/centering) */
  #drsknn-explorer{
    width: 100vw !important;
    max-width: none !important;
  }
  #drsknn-explorer [data-view]{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Any wrapped sections that were capped/centred */
  #drsknn-explorer .op-cond-wrap,
  #drsknn-explorer .learn-grid,
  #drsknn-explorer .card-stack,
  #drsknn-explorer .locations-wrap,
  #drsknn-explorer .reviews-wrap,
  #drsknn-explorer .contact-wrap,
  #drsknn-explorer .list{
    max-width: none !important;
    margin: 0 !important;
  }

  /* QUICK BOOK — make the modal wide & tall on desktop */
  .booking-modal#quickbook-modal .qb3{
    width: 92vw !important;
    max-width: none !important;
    height: 88vh !important;
    max-height: 88vh !important;
    overflow: auto !important;
    padding: 20px 24px 80px !important;
  }
  .booking-modal#quickbook-modal .qb3-grid{
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 16px !important;
  }

  /* TREATMENT GUIDE (Learn viewer) — use the screen */
  #learn-viewer .learn-box{
    width: 94vw !important;
    height: 90vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
  }
  #learn-viewer .learn-body,
  #learn-viewer .learn-iframe{
    height: 100% !important;
  }

  /* Generic modals (booking/waitlist/QR) – breathe more on desktop */
  .booking-modal .modal-content{
    width: 92vw !important;
    max-width: none !important;
    max-height: 90vh !important;
  }
}
/* =========================================================
   ABOUT CONDITIONS — Mobile centering & tight gutters (append-only)
   Scope: .op-cond-wrap (the one-page Conditions layout)
   Devices: mobile & small tablets only
   ========================================================= */
@media (max-width: 900px) {
  /* Hard-center the entire Conditions canvas */
  #drsknn-explorer .op-cond-wrap{
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  /* Title & toolbar align perfectly with the viewport edges */
  #drsknn-explorer .op-cond-wrap .section-title{
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Search + chips: same tight gutters, visually centered */
  #drsknn-explorer .op-cond-toolbar{
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 10px 12px !important;
    width: 100% !important;
    max-width: 720px !important;
  }
  #drsknn-explorer .op-chips{
    padding-left: 6px !important;
    padding-right: 6px !important;
    /* keep smooth swipe; no fat left gutter */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;     /* Firefox */
  }
  #drsknn-explorer .op-chips::-webkit-scrollbar{ display:none; } /* WebKit */

  /* Cards list: one column, perfectly centered, tighter rhythm */
  #drsknn-explorer .op-grid{
    grid-template-columns: 1fr !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 14px !important;
  }

  /* Individual cards breathe just right on small screens */
  #drsknn-explorer .op-card{
    padding: 14px 14px 16px !important;
    border-radius: 16px !important;
  }

  /* Make the whole view itself feel centered even if the outer
     [data-view] had generic side padding */
  #drsknn-explorer [data-view]{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Ultra-small (phones ≤ 430px): shave gutters a bit more */
@media (max-width: 430px) {
  #drsknn-explorer .op-cond-wrap,
  #drsknn-explorer .op-grid,
  #drsknn-explorer .op-cond-toolbar{
    max-width: 640px !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }
  #drsknn-explorer .op-card{ padding: 12px 12px 14px !important; }
}
/* Hard guard: hidden modals don’t intercept taps */
.booking-modal.hidden { display: none !important; pointer-events: none !important; }

/* Learn overlay: only interactive when shown */
#learn-viewer { pointer-events: none; }
#learn-viewer.show { pointer-events: auto; }
/* === Append-only safety: keep overlays honest === */
.booking-modal { z-index: 2147483646 !important; }
#learn-viewer   { z-index: 2147483000 !important; }

/* Hard guard: hidden things cannot eat taps */
.booking-modal.hidden,
#drsknn-menu-dim:not(.show),
#drsknn-menu-panel:not(.show) { pointer-events: none !important; }

#drsknn-menu-dim.show { pointer-events: auto !important; }
/* Final overlay safety */
.booking-modal.hidden,
#learn-viewer:not(.show),
#drsknn-menu-panel:not(.show),
#drsknn-menu-dim:not(.show) {
  pointer-events: none !important;
}
/* ===== Treatments – make all deeper tiers full width ===== */
/* Tier 2+: Category → families/areas → services/options → services list */
#drsknn-explorer [data-view="families-or-areas"] .list,
#drsknn-explorer [data-view="family-areas"] .list,
#drsknn-explorer [data-view="area-services"] .list,
#drsknn-explorer [data-view="options"] .list,
#drsknn-explorer [data-view="services"] .list {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Each row spans the full line */
#drsknn-explorer [data-view="families-or-areas"] .list .list-item,
#drsknn-explorer [data-view="family-areas"] .list .list-item,
#drsknn-explorer [data-view="area-services"] .list .list-item,
#drsknn-explorer [data-view="options"] .list .list-item,
#drsknn-explorer [data-view="services"] .list .list-item {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Defensive: make the view itself fluid on iPad widths */
#drsknn-explorer,
#drsknn-explorer [data-view] {
  width: 100% !important;
  max-width: none !important;
}
/* === GLOBAL X-SCROLL KILL (Safari-safe) === */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;              /* Safari 16+ */
  position: relative;
  -webkit-text-size-adjust: 100%;
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }   /* fallback */
}

/* App roots can never exceed the viewport width */
#drsknn-explorer,
#drsknn-explorer [data-view], .landing,
.learn-grid, .card-stack,
.reviews-wrap, .contact-wrap,
.locations-wrap, .op-cond-wrap,
.booking-modal, #learn-viewer {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Media & embeds never force the page wider */
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg, iframe { max-width: 100% !important; height: auto; }
table { max-width: 100%; display: block; overflow-x: auto; }

/* Touch: vertical only; don’t allow sideways panning on the page */
html, body, #drsknn-explorer, #drsknn-explorer [data-view] {
  touch-action: pan-y !important;
  overscroll-behavior-x: contain;
}

/* Keep the intentional sideways scrollers working */
.luxury-calendar.horizontal-scroll,
.op-chips {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* === Mobile logo upsize (wins over earlier 22–32px rules) === */



}

/* Small phones: a touch larger is still comfy */

/* Tighten space between the logo and Back button (mobile) */


/* =========================================================
   CONDITIONS — Mobile centering & tight gutters (append-only)
   Scope: .op-cond-wrap (the one-page Conditions layout)
   Devices: mobile & small tablets only
   ========================================================= */
@media (max-width: 900px) {
  /* Hard-center the entire Conditions canvas */
  #drsknn-explorer .op-cond-wrap{
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  /* Title & toolbar align perfectly with the viewport edges */
  #drsknn-explorer .op-cond-wrap .section-title{
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Search + chips: same tight gutters, visually centered */
  #drsknn-explorer .op-cond-toolbar{
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 10px 12px !important;
    width: 100% !important;
    max-width: 720px !important;
  }
  #drsknn-explorer .op-chips{
    padding-left: 6px !important;
    padding-right: 6px !important;
    /* keep smooth swipe; no fat left gutter */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;     /* Firefox */
  }
  #drsknn-explorer .op-chips::-webkit-scrollbar{ display:none; } /* WebKit */

  /* Cards list: one column, perfectly centered, tighter rhythm */
  #drsknn-explorer .op-grid{
    grid-template-columns: 1fr !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 14px !important;
  }

  /* Individual cards breathe just right on small screens */
  #drsknn-explorer .op-card{
    padding: 14px 14px 16px !important;
    border-radius: 16px !important;
  }

  /* Make the whole view itself feel centered even if the outer
     [data-view] had generic side padding */
  #drsknn-explorer [data-view]{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Ultra-small (phones ≤ 430px): shave gutters a bit more */
@media (max-width: 430px) {
  #drsknn-explorer .op-cond-wrap,
  #drsknn-explorer .op-grid,
  #drsknn-explorer .op-cond-toolbar{
    max-width: 640px !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }
  #drsknn-explorer .op-card{ padding: 12px 12px 14px !important; }
}
/* 🧼 Final mobile polish: always collapse to 1-column on small screens */
@media (max-width: 900px) {
  #drsknn-explorer .op-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin: 0 auto !important;
    max-width: 680px !important;
    padding: 0 14px !important;
  }
}

  /* Fullscreen brand overlay */
  #qb-loading{
    position:fixed; inset:0; z-index:2147483647;
    display:none; align-items:center; justify-content:center;
    background:
      radial-gradient(1200px 600px at 18% 12%, rgba(200,167,74,.10), transparent 52%),
      radial-gradient(1200px 600px at 86% 88%, rgba(0,0,0,.25), rgba(0,0,0,.55));
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
  }
  #qb-loading.show{ display:flex; }

  /* Center card */
  #qb-loading .qb-panel{
    width:min(92vw,560px);
    background:linear-gradient(180deg,#ffffff,#fffdf6);
    border:1px solid rgba(200,167,74,.22);
    border-radius:22px;
    box-shadow:0 30px 80px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.85) inset;
    padding:22px 24px;
    text-align:center;
  }
  #qb-loading .qb-title{
    font-weight:900; font-size:20px; letter-spacing:.2px;
    background:linear-gradient(180deg,#111,#333);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  #qb-loading .qb-sub{ color:#6f5b1e; margin-top:6px; font-weight:800; }

  /* Spinner + progress shimmer */
  #qb-loading .qb-ring{
    width:44px; height:44px; border-radius:50%;
    border:4px solid #e9dfc0; border-top-color:#C8A74A;
    margin:14px auto 8px; animation:qbspin 1s linear infinite;
  }
  @keyframes qbspin{ to{ transform:rotate(360deg) } }

  #qb-loading .qb-progress{height:4px;border-radius:999px;background:#f2eedf;overflow:hidden;margin-top:10px}
  #qb-loading .qb-progress>span{display:block;height:100%;width:35%;
    background:linear-gradient(90deg,#fdf6c9,#d4b03f);
    animation:qbflow 1.6s ease-in-out infinite}
  @keyframes qbflow{0%{margin-left:-35%}50%{margin-left:50%}100%{margin-left:100%}}

  #qb-loading .qb-hint{font-size:12px;color:#777;margin-top:6px}

  @media (max-width:430px){
    #qb-loading .qb-panel{width:min(96vw,360px);padding:16px}
    #qb-loading .qb-title{font-size:16px}
    #qb-loading .qb-sub{font-size:13px}


/* ===== PRICE LIST – luxe visuals (scoped) ===== */
#drsknn-explorer .pl-pill {
  transition: transform .15s ease, box-shadow .2s ease;
}
#drsknn-explorer .pl-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(200,167,74,.36);
}
#drsknn-explorer .pl-title { font-size: 15px; }
#drsknn-explorer .pl-price { font-size: 16px; margin-right: 6px; }

/* === LUX MOTION SYSTEM — append-only, safe, respects reduced motion === */
:root{
  --lux-ease: cubic-bezier(.22,.61,.36,1);
  --lux-ease2: cubic-bezier(.18,.84,.24,1);
}
@media (prefers-reduced-motion: reduce){
  .lux-anim-on *{ animation: none !important; transition: none !important; }
}

/* Keyframes (simple, tasteful) */
@keyframes lux-fade-up{from{opacity:0;transform:translateY(10px) scale(.98);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes lux-pop{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:scale(1)}}
@keyframes lux-shimmer{
  0%{background-position: 0% 50%}
  100%{background-position: 200% 50%}
}

/* Generic reveal token (applied via JS on intersection) */
.lux-anim-on .lux-reveal{ animation: lux-fade-up .50s var(--lux-ease) both; }
.lux-anim-on .lux-reveal.pop{ animation: lux-pop .46s var(--lux-ease2) both; }

/* Stagger helpers (JS only sets inline delays) */
.lux-delay-1{animation-delay:.05s}
.lux-delay-2{animation-delay:.10s}
.lux-delay-3{animation-delay:.15s}
.lux-delay-4{animation-delay:.20s}

/* Magnetic micro-interaction (composes with your transforms) */
[data-magnet]{
  transition: transform .20s var(--lux-ease), box-shadow .25s var(--lux-ease);
  transform: translate3d(var(--magnet-x,0), var(--magnet-y,0), 0) scale(var(--press-scale,1));
}
.is-press{ --press-scale: .985; }

/* Subtle shimmer for price emphasis (used only where JS adds .lux-price) */
.lux-price{
  background: linear-gradient(90deg, #111, #C8A74A, #111);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%;
  animation: lux-shimmer 3.2s linear infinite;
}

/* Modal ease-in without touching your logic */
.booking-modal .modal-content{
  transform: translateY(14px) scale(.985);
  opacity: 0;
  transition: transform .30s var(--lux-ease), opacity .30s var(--lux-ease);
}
.booking-modal[aria-hidden="false"] .modal-content{
  transform: none; opacity: 1;
}

/* Make common elements “reveal-ready” by default (non-intrusive) */
#drsknn-explorer .list .list-item,
#drsknn-explorer .card,
#drsknn-explorer .learn-card.pro,
#drsknn-explorer .cond-card,
#drsknn-explorer .loc-col,
#drsknn-explorer .rev-card,
#drsknn-explorer .plx-tile,
#drsknn-explorer .basket-item,
#drsknn-explorer .qb3-card,
#drsknn-explorer .qb3-tile,
.lux-calendar .calendar-day,
.slot-btn{ will-change: transform, opacity; }

/* =========================================================
   DRSKNN — Requested UX tweaks (APPEND-ONLY, non-breaking)
   ========================================================= */



/* Brighter, high-contrast Back button */
#drsknn-explorer .back-btn{
  background: linear-gradient(180deg, #fff4c2, #e2b942) !important;
  color: #111 !important;
  border: 1px solid #e8d89d !important;
  box-shadow: 0 12px 28px rgba(200,167,74,.32) !important;
  font-weight: 800 !important;
}
#drsknn-explorer .back-btn:hover{
  background: linear-gradient(180deg, #fff0a6, #caa43c) !important;
  box-shadow: 0 16px 36px rgba(200,167,74,.42) !important;
}

/* Map popup uses the standard modal shell — just ensure it floats above everything */
#map-modal.booking-modal{ z-index: 2147483647 !important; }

/* === STICKY HEADER: pin topbar above the [data-view] scroller === */
#drsknn-explorer { position: relative; }


/* Make sure the scroller never covers it */
#drsknn-explorer [data-view]{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}}


#drsknn-menu-bubble {
  display: none !important;
}

/* =========================================================
   DR SKNN — Contact Pro (900M UX) — append-only styles
   ========================================================= */
#drsknn-explorer .contact-pro {
  --gold: #C8A74A; --gold-2:#B8942E; --ink:#111; --muted:#6b6b6b;
  max-width: 1160px; margin: 0 auto; padding: 10px 16px 40px;
}

#drsknn-explorer .contact-hero {
  display:grid; gap:14px; justify-items:center; text-align:center;
  background: linear-gradient(180deg,#fffdf4,#fff7de);
  border:1px solid #e7ddbd; border-radius:22px; padding:20px 18px;
  box-shadow: 0 24px 60px rgba(200,167,74,.12);
}
#drsknn-explorer .contact-hero h1{
  font-size: clamp(24px, 3.4vw, 34px); font-weight: 900;
  background: linear-gradient(180deg,#111,#333);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin: 2px 0 4px;
}
#drsknn-explorer .open-badge{
  display:inline-flex; align-items:center; gap:8px; font-weight:800;
  padding:8px 12px; border-radius:999px; border:1px solid #e7ddbd;
  background:#fff; color:#1a1a1a;
}
#drsknn-explorer .open-badge.good{ box-shadow:0 10px 20px rgba(29,159,83,.15); }
#drsknn-explorer .open-badge.bad{  box-shadow:0 10px 20px rgba(160,33,33,.15); }

#drsknn-explorer .cta-row{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:4px;
}
#drsknn-explorer .cta-btn{
  display:inline-flex; align-items:center; gap:10px;
  border:none; border-radius:14px; cursor:pointer; text-decoration:none;
  font-weight:900; color:#111; padding:14px 18px;
  background:linear-gradient(180deg,#fdf6c9,#d4b03f);
  box-shadow:0 12px 32px rgba(200,167,74,.35);
}
#drsknn-explorer .cta-btn.alt{
  background:#fff; border:1px solid #e7dfc4; box-shadow:0 10px 24px rgba(0,0,0,.06);
}

#drsknn-explorer .contact-card-grid{
  display:grid; gap:16px; grid-template-columns:repeat(3,1fr);
  margin-top:18px;
}
@media (max-width:1024px){ #drsknn-explorer .contact-card-grid{ grid-template-columns:1fr } }

#drsknn-explorer .ct-card{
  background:#fff; border:1px solid #eee; border-radius:18px; padding:16px;
  box-shadow:0 18px 46px rgba(0,0,0,.06);
  display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center;
}
@media (max-width:520px){ #drsknn-explorer .ct-card{ grid-template-columns:1fr; text-align:center } }

#drsknn-explorer .ct-qr{
  width:120px; height:120px; border-radius:14px; border:1px solid #eee;
  box-shadow:0 8px 22px rgba(0,0,0,.08); background:#fff;
}

#drsknn-explorer .ct-title{ font-weight:900; font-size:18px; }
#drsknn-explorer .ct-sub{ font-size:14px; color:#555; margin-top:2px }
#drsknn-explorer .copy-btn{
  margin-top:8px; display:inline-block; font-weight:800; font-size:12px;
  border:1px dashed #e7dfc4; background:#fff; padding:8px 10px; border-radius:10px;
}

#drsknn-explorer .callback-wrap{
  background:#fffdf8; border:1px solid #e7ddbd; border-radius:18px;
  padding:18px; margin-top:16px; box-shadow:0 18px 46px rgba(0,0,0,.06);
}
#drsknn-explorer .callback-wrap h3{ margin:0 0 6px; font-size:18px; font-weight:900 }
#drsknn-explorer .callback-hint{ color:#6b5a2b; font-weight:700; font-size:13px }

#drsknn-explorer .mini-locations{
  display:grid; gap:16px; grid-template-columns:repeat(3,1fr); margin-top:18px;
}
@media (max-width:1024px){ #drsknn-explorer .mini-locations{ grid-template-columns:1fr } }
#drsknn-explorer .mini-loc{
  background:#fff; border:1px solid #eee; border-radius:16px; padding:14px;
  box-shadow:0 14px 36px rgba(0,0,0,.06);
}
#drsknn-explorer .mini-loc h4{ margin:0 0 6px; font-weight:900; font-size:16px }
#drsknn-explorer .mini-loc .addr{ font-size:14px; color:#333; }
#drsknn-explorer .mini-loc .open-map{
  margin-top:10px; display:inline-block; font-weight:800; border:none; cursor:pointer;
  border-radius:12px; padding:10px 12px;
  background:linear-gradient(180deg,#fdf6c9,#d4b03f); box-shadow:0 10px 26px rgba(200,167,74,.28)
}

#drsknn-explorer .success-chip{
  display:inline-flex; align-items:center; gap:8px; font-weight:800;
  padding:8px 12px; border-radius:999px; border:1px solid #bee2cd; background:#e7f9ee; color:#18794e;
}
/* light “copied!” toast */
#drsknn-explorer .copied-toast{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  background:#111; color:#fff; padding:10px 14px; border-radius:14px;
  font-size:13px; box-shadow:0 10px 30px rgba(0,0,0,.25); z-index:99999;
  opacity:0; transition:opacity .25s ease, transform .25s ease;
}
#drsknn-explorer .copied-toast.show{ opacity:1; transform:translateX(-50%) translateY(-2px) }

/* =========================================================
   DR SKNN — Contact Pro v2 (append-only refinements)
   ========================================================= */
#drsknn-explorer #contact-pro .contact-card-grid{
  display:grid; gap:16px; grid-template-columns:repeat(4, minmax(0,1fr));
}
@media (max-width: 1200px){
  #drsknn-explorer #contact-pro .contact-card-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  #drsknn-explorer #contact-pro .contact-card-grid{ grid-template-columns:1fr; }
}

/* Card + QR sizing/spacing */
#drsknn-explorer #contact-pro .ct-card{
  grid-template-columns:140px 1fr;
  gap:16px; padding:18px;
}
#drsknn-explorer #contact-pro .ct-qr{
  width:140px; height:140px; background:#fff;
  border:2px solid var(--gold, #C8A74A);
  border-radius:14px; padding:6px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* Mobile: hide QR; Desktop/Tablet: hide "Copy" buttons */
@media (max-width: 767.98px){
  #drsknn-explorer #contact-pro .ct-qr{ display:none !important; }
}
@media (min-width: 768px){
  #drsknn-explorer #contact-pro .copy-btn{ display:none !important; }
}

/* Callback button spacing/centering */
#drsknn-explorer #contact-pro .callback-wrap .actions{
  display:flex; justify-content:center;
}
#drsknn-explorer #contact-pro .callback-wrap .book-btn{
  margin:14px auto 0; padding:14px 18px;
}

/* Kiosk/Desktop: hide hero quick actions on Contact page */
@media (min-width: 768px){
  #drsknn-explorer #contact-pro .cta-row{
    display:none !important;
  }
}

/* Hide contact cards entirely on mobile; keep hero + callback */
@media (max-width: 900px){
  #drsknn-explorer #contact-pro .contact-card-grid{ display:none !important; }
  #drsknn-explorer #contact-pro .callback-wrap{ margin-top: 10px !important; }
}

/* === CONTACT — alignment & centring fix (append-only) === */

/* 1) Centre the “Request Call Back” button */
#drsknn-explorer #contact-pro #drsknn-callback .actions{
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
}
#drsknn-explorer #contact-pro #drsknn-callback .actions .book-btn{
  margin: 0 auto;
  min-width: 260px;
}

/* 2) Make the four contact cards perfectly aligned */
#drsknn-explorer #contact-pro .contact-card-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 18px;
  justify-items: center;
  align-items: start;
}
@media (max-width:1200px){
  #drsknn-explorer #contact-pro .contact-card-grid{
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}
@media (max-width:640px){
  #drsknn-explorer #contact-pro .contact-card-grid{
    grid-template-columns: 1fr;
  }
}

/* 3) Normalise each card’s internal layout (title → QR → number → button) */
#drsknn-explorer #contact-pro .ct-card{
  display: grid !important;
  grid-template-rows: auto auto auto auto;
  justify-items: center;
  text-align: center;
  width: 100%;
  max-width: 360px;
  padding: 18px;
}

#drsknn-explorer #contact-pro .ct-title{ min-height: 24px; }
#drsknn-explorer #contact-pro .ct-qr{
  width: 210px; height: 210px;
  object-fit: contain;
  display: block;
  margin: 4px 0;
}
#drsknn-explorer #contact-pro .ct-number{
  min-height: 24px;
  font-weight: 900;
}
#drsknn-explorer #contact-pro .copy-btn{ margin-top: 6px; }

/* (Mobile already hides the QR in your styles; this keeps everything centred) */

/* === DR SKNN — Contact Card Alignment Fix === */

/* 1. Grid container: clean responsive layout */
#drsknn-explorer #contact-pro .contact-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  justify-items: center;
  align-items: stretch;
  padding: 20px;
}

/* 2. Individual contact card container */
#drsknn-explorer #contact-pro .contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 16px;
  padding: 24px 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  text-align: center;
  min-height: 340px;
}

/* 3. Header alignment */
#drsknn-explorer #contact-pro .contact-card h3 {
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 14px;
  margin-top: 0;
  line-height: 1.2;
}

/* 4. QR code alignment */
#drsknn-explorer #contact-pro .contact-card img {
  display: block;
  max-width: 180px;
  width: 100%;
  height: auto;
  margin: 0 auto 14px;
}

/* 5. Contact detail (number/email) */
#drsknn-explorer #contact-pro .contact-card .contact-detail {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  word-break: break-word;
  margin-top: auto;
}

/* === FIXED ALIGNMENT: Contact Cards === */
#drsknn-explorer #contact-pro .ct-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: 24px 20px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #eee;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.06);
  height: 100%;
  min-height: 340px;
  box-sizing: border-box;
}

/* Title */
#drsknn-explorer #contact-pro .ct-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.2;
}

/* QR */
#drsknn-explorer #contact-pro .ct-qr {
  width: 160px;
  height: 160px;
  margin: 0 auto 12px;
  border: 2px solid #e7ddbd;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  background: #fff;
  object-fit: contain;
}

/* Contact Number or Email */
#drsknn-explorer #contact-pro .ct-sub {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  word-break: break-word;
  margin-top: auto;
}

/* Copy button (desktop only) */
@media (max-width: 768px){
  #drsknn-explorer #contact-pro .copy-btn { display: none !important; }
}
@media (min-width: 769px){
  #drsknn-explorer #contact-pro .copy-btn {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 800;
    border: 1px dashed #e7dfc4;
    background: #fff;
    padding: 8px 10px;
    border-radius: 10px;
    display: inline-block;
  }
}

#drsknn-explorer #contact-pro .contact-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  justify-items: center;
  align-items: stretch;
  padding: 0 10px;
}

/* ========= Device Link Controls ========= */

/* Default: disable all links unless mobile */
.mobile-link {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: #C8A74A; /* Still styled gold for visual consistency */
}

/* Mobile override: allow links */
@media (max-width: 768px) {
  .mobile-link {
    pointer-events: auto;
    cursor: pointer;
  }
}

/* Hide/show wrappers */
.mobile-only {
  display: none;
}
.desktop-only {
  display: inline;
}
@media (max-width: 768px) {
  .mobile-only {
    display: inline;
  }
  .desktop-only {
    display: none;
  }
}

#qr-contact-panel {
  transition: opacity 300ms ease;
}

#qr-contact-panel {
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms ease;
  transform: translateY(10px);
}
#qr-contact-panel.show {
  opacity: 1;
  transform: translateY(0);
}

#qr-contact-panel {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 300ms ease, transform 300ms ease;
}
#qr-contact-panel.show {
  opacity: 1;
  transform: translateY(0);
}

/* === Category thumbnail inside the left column ============================ */
#drsknn-explorer .cp-media{
  display: grid;
  place-items: center;
  margin: 2px 0 10px;
}
#drsknn-explorer .cat-thumb{
  width: 100%;
  max-width: 220px;           /* keeps it elegant on desktop */
  aspect-ratio: 4 / 3;        /* stable box; adjusts to any image */
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #eee2bf;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  background: #fff;           /* pleasant while loading */
}

/* ===== Join Waitlist → Role alternatives (append-only) ===== */
#drsknn-explorer .alt-roles{
  margin-top:10px;
  padding:12px;
  border:1px solid #e7dfc4;
  border-radius:14px;
  background:#fffaf0;
  box-shadow:0 10px 28px rgba(200,167,74,.12);
}
#drsknn-explorer .alt-roles .alt-title{
  font-weight:900;
  font-size:13px;
  color:#6b5a2b;
  margin-bottom:8px;
  letter-spacing:.2px;
  text-transform:uppercase;
}
#drsknn-explorer .alt-roles .alt-row{
  display:flex; gap:10px; flex-wrap:wrap;
}
#drsknn-explorer .alt-roles .book-btn{
  padding:10px 14px;
  border-radius:12px;
}

/* --- MOBILE BOOKING MODAL UX FIXES (append-only) --- */

/* Fit the modal to the phone viewport; scroll inside the modal, not the page */
@media (max-width: 900px){
  .booking-modal .modal-content{
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 86vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Keep the date strip visible while scrolling times */
  .calendar-pagination{
    position: sticky; top: 0; z-index: 4;
    background: #fff; padding-top: 4px;
  }
}

/* The big confirm CTA must never overflow on phones */
.booking-modal .confirm-bar .book-btn{
  min-width: 100% !important;
}

/* After confirm, payment choices stay visible on mobile */
@media (max-width: 480px){
  .pay-choice-row{
    position: sticky; bottom: 0; z-index: 5;
    background: linear-gradient(180deg,#fffdf4,#fff9e2);
    border-top: 1px solid #efe2bf;
    padding: 10px 8px;
  }
  .pay-badge{ display: block; }
}

/* Ensure any helper text/errors can actually be seen */
#pay-hint{ display: block; }