/* === (unchanged theme variables and base styles) === */
:root{
  --mv-gold: #d1b15d;
  --mv-gold-dark: #b49343;
  --mv-gray-900: #2f2f2f;
  --mv-gray-700: #4a4a4a;
  --mv-gray-500: #7b7b7b;
  --mv-gray-200: #f3f3f1;
  --mv-border: rgba(46,46,46,0.12);
  --card-radius: 18px;
  --card-shadow: 0 18px 45px rgba(0,0,0,0.08);
  --page-bg-image: url('/static/images/MVinceNailFront.jpg');
  --hero-image: var(--page-bg-image);

  --danger-red: #b91c1c;
  --ok-green: #166534;

  --stripe-unable-bg: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.8) 0px,
    rgba(255,255,255,0.8) 6px,
    rgba(209,67,67,0.12) 6px,
    rgba(209,67,67,0.12) 12px
  );
  --stripe-unavailable-bg: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.8) 0px,
    rgba(255,255,255,0.8) 6px,
    rgba(44,98,186,0.12) 6px,
    rgba(44,98,186,0.12) 12px
  );
}

*{ box-sizing: border-box; }
/* Allow the hero to grow when additional content (like hours) is added. */
html, body{ min-height: 100%; }
body.booking-page{
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--mv-gray-200);
  color: var(--mv-gray-900);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a{ color: inherit; }
a:hover{ color: var(--mv-gold-dark); }

/* Header -------------------------------------------------------------- */
.mv-header{
  background: #ffffff;
  border-bottom: 1px solid var(--mv-border);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 96px;
  padding: 12px 16px;
}
.mv-logo{
  max-height: 60px;
  width: auto;
  height: auto;
  display: block;
}

/* Hero ----------------------------------------------------------------- */
.hero{
  position: relative;
  overflow: hidden;
  min-height: clamp(320px, 45vw, 420px);
  display: grid;
  place-items: center;
  margin-bottom: clamp(40px, 7vw, 60px);
  background: #e7e5df;
}
.hero-bg{
  position: absolute;
  inset: 0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  filter: blur(8px) brightness(0.65);
  transform: scale(1.04);
}
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(17,17,17,0.6), rgba(17,17,17,0.35));
}
.hero-content{
  position: relative;
  z-index: 1;
  text-align: center;
  color: #ffffff;
  padding: clamp(36px, 7vw, 64px) 24px;
}
.hero-content .eyebrow{
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 14px;
  margin-bottom: 12px;
}
.hero-content h1{
  margin: 0 0 16px;
  font-family: 'Playfair Display', serif;
  font-size: clamp(44px, 6vw, 62px);
  letter-spacing: 0.12em;
}
.hero-meta{
  display: inline-flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 15px;
  background: rgba(0,0,0,0.32);
  padding: 12px 20px;
  border-radius: 999px;
}
.hero-meta .divider{ opacity: 0.65; }
.hero-meta a{ color: inherit; text-decoration: none; }
.hero-meta i{ margin-right: 6px; }
.hero-map-links{
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-map-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.14);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
}
.hero-map-btn i{ font-size: 16px; }
.hero-map-btn:hover{
  background: rgba(0,0,0,0.44);
  color: rgba(255,255,255,0.98);
}
.hero-map-btn:focus-visible{
  outline: 2px solid rgba(209,177,93,0.85);
  outline-offset: 4px;
}
.hero-hours{
  margin-top: 18px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: min(440px, 100%);
  gap: 10px;
}
.hero-hours__title{
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.hero-hours__box{
  width: 100%;
  padding: 18px 20px 16px;
  border-radius: 12px;
  border: 4px solid rgba(255,255,255,0.86);
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.32);
  text-align: left;
}
.hero-hours__grid{
  margin: 0;
  display: grid;
  gap: 8px;
}
.hero-hours__row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 18px;
  font-size: 15px;
}
.hero-hours__row dt{
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  justify-self: start;
  color: rgba(255,255,255,0.96);
}
.hero-hours__row dd{
  margin: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  justify-self: end;
  text-align: right;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.96);
}
.hero-hours__row dd.is-closed{
  opacity: 0.8;
  font-style: normal;
  letter-spacing: 0.18em;
}
.booking-app-qr{
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.booking-app-qr__prompt{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--mv-gray-700);
  text-align: center;
}
.booking-app-qr__link{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.booking-app-qr__img{
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  padding: 12px;
  border-radius: 22px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 14px 28px rgba(0,0,0,0.28);
}
.booking-app-qr__badge{
  width: 190px;
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.22));
}
.booking-app-qr__caption{
  background: rgba(0,0,0,0.32);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1.1;
  backdrop-filter: blur(10px);
}
.booking-app-qr__link:focus-visible{
  outline: 2px solid rgba(209,177,93,0.85);
  outline-offset: 6px;
  border-radius: 16px;
}

/* Booking card --------------------------------------------------------- */
.layout{
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 0 clamp(14px, 5vw, 32px) clamp(48px, 8vw, 84px);
  flex: 1 0 auto;
}
.booking-card{
  background: #ffffff;
  border-radius: var(--card-radius);
  border: 1px solid rgba(20,20,20,0.08);
  box-shadow: var(--card-shadow);
  padding: clamp(28px, 5vw, 42px);
  display: grid;
  gap: clamp(24px, 4vw, 36px);
}
.card-intro h2{
  margin: 0 0 6px;
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3vw, 32px);
  letter-spacing: 0.04em;
}
.card-intro .lede{
  margin: 0;
  color: var(--mv-gray-500);
  font-size: 16px;
}
.location-note{
  margin: 4px 0 0;
  color: var(--mv-gray-500);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.customer-form{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 26px);
}
.customer-form .field{
  display: grid;
  gap: 6px;
}
.customer-form .field--party{
  grid-column: 1 / -1;
  max-width: 360px;
}
.customer-form label{
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mv-gray-500);
}
.customer-form input{
  height: 50px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--mv-border);
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: #fff;
}
.party-size-options{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.party-size-option{
  height: 50px;
  border-radius: 10px;
  border: 1px solid var(--mv-border);
  background: #fff;
  color: var(--mv-gray-700);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.party-size-option:hover,
.party-size-option:focus-visible{
  outline: none;
  border-color: rgba(209,177,93,0.65);
  box-shadow: 0 0 0 3px rgba(209,177,93,0.18);
}
.party-size-option.is-selected{
  border-color: rgba(209,177,93,0.82);
  background: rgba(209,177,93,0.2);
  color: var(--mv-gold-dark);
  box-shadow: 0 8px 16px rgba(209,177,93,0.2);
}
.party-size-option:disabled{
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
.party-size-note{
  margin: 2px 2px 0;
  font-size: 12px;
  color: var(--mv-gray-500);
  letter-spacing: 0.02em;
}
.customer-form .field.has-error input{
  border-color: #d14343;
  box-shadow: 0 0 0 3px rgba(209,67,67,0.12);
}
.customer-form input:focus{
  border-color: var(--mv-gold-dark);
  box-shadow: 0 0 0 3px rgba(209,177,93,0.22);
  outline: none;
}
.input-error{
  min-height: 18px;
  margin: 2px 0 0;
  font-size: 13px;
  color: #d14343;
  letter-spacing: 0.02em;
}

@media (max-width: 720px){
  .customer-form{ grid-template-columns: 1fr; }
  .customer-form .field--party{ max-width: none; }
}

.path-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 26px);
}
.path-card{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 3vw, 20px);
  padding: clamp(18px, 3vw, 24px);
  border-radius: 18px;
  border: 1px solid rgba(30,30,30,0.08);
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.path-card:hover,
.path-card:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.08);
  border-color: rgba(209,177,93,0.45);
  outline: none;
}
.path-card[disabled],
.path-card.is-disabled{
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
  box-shadow: none;
  border-color: rgba(30,30,30,0.08);
  pointer-events: none;
}
.path-card:disabled{
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
  box-shadow: none;
}
.option-icon{
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: var(--mv-gold-dark);
  border: 1px solid rgba(181,148,67,0.35);
  background: rgba(209,177,93,0.15);
}
.option-copy{ display: grid; gap: 6px; }
.option-label{
  margin: 0;
  font-weight: 600;
  font-size: 16px;
}
.option-label.accent{ color: var(--mv-gold-dark); }
.option-body{
  margin: 0;
  color: var(--mv-gray-500);
  font-size: 14px;
  line-height: 1.45;
}
.option-cta{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--mv-gold);
  color: #fff;
}
.option-cta.outline{
  background: transparent;
  border: 1px solid rgba(209,177,93,0.45);
  color: var(--mv-gold-dark);
}

@media (max-width: 720px){
  .path-grid{ grid-template-columns: 1fr; }
  .path-card{ grid-template-columns: 56px 1fr; }
  .option-cta{ margin-top: 12px; justify-self: start; }
}

@media (max-width: 640px){
  .mv-header{ height: 72px; }
  .mv-logo{ max-height: 44px; }
  .hero{ min-height: 260px; margin-bottom: 32px; }
  .hero-content{ padding: 28px 12px; }
  .hero-content h1{ font-size: clamp(34px, 10vw, 42px); }
  .hero-map-btn{
    padding: 9px 14px;
    font-size: 12px;
  }
  .hero-hours{
    width: min(420px, 100%);
    gap: 8px;
  }
  .hero-hours__title{
    font-size: 18px;
  }
  .hero-hours__box{
    padding: 16px 16px 14px;
    border-width: 3px;
  }
  .hero-hours__grid{
    gap: 7px;
  }
  .hero-hours__row{
    font-size: 13px;
    gap: 14px;
  }
  .booking-app-qr__prompt{
    font-size: 15px;
  }
  .booking-app-qr__img{
    width: 170px;
    height: 170px;
    padding: 10px;
    border-radius: 20px;
  }
  .booking-app-qr__badge{
    width: 176px;
  }
  .booking-app-qr__caption{
    font-size: 11px;
    letter-spacing: 0.16em;
    padding: 7px 12px;
  }
  .layout{
    width: 100%;
    padding: 0 12px 56px;
  }
  .booking-card{
    padding: 22px 16px;
    gap: 18px;
  }
  .contact-step .path-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .path-card{
    grid-template-columns: 48px 1fr;
    padding: 14px;
    align-items:center;
  }
  .path-card .option-icon{
    width: 48px; height:48px;
  }
  .path-card .option-cta{
    margin-top:8px;
  }
  .tech-step .tech-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .tech-card{
    padding: 10px 12px;
  }
  .final-review-card{
    padding: 16px;
  }
  .final-review-toprow{
    flex-direction: column;
    gap: 12px;
  }
  .final-review-rightcol{
    width: 100%;
    align-items: flex-start;
  }
  .final-price{ font-size: 24px; }
  .final-next-btn{ width: 100%; text-align: center; }
  .final-addmore-btn{ width:100%; justify-content:center; }
  .booking-modal__dialog{
    width: min(96vw, 520px);
    padding: 16px;
  }
  .calendar-grid{
    gap: 8px 6px;
  }
  .time-columns{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .summary-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .summary-actions .btn{ width: 100%; }
}

.contact-step{ display: grid; gap: clamp(24px, 4vw, 32px); }

.tech-step{
  display: grid;
  gap: clamp(18px, 3vw, 26px);
}
.tech-step[hidden]{ display: none !important; }
.tech-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.final-header-row{
  margin-top: clamp(10px, 2vw, 18px);
}
.final-back-btn{
  font-size: 13px;
  padding: 9px 16px;
}
.tech-header h3{
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: 0.05em;
}
.back-btn{
  border: 1px solid rgba(20,20,20,0.1);
  background: #ffffff;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.back-btn:hover,
.back-btn:focus-visible{
  background: rgba(209,177,93,0.12);
  outline: none;
  transform: translateY(-1px);
}
.tech-subhead{
  margin: 0;
  color: var(--mv-gray-500);
  font-size: 15px;
}

/* ---- Final inline technician selection (post modal) ---- */
.final-review-card{
  border: 1px solid rgba(20,20,20,0.08);
  border-radius: 22px;
  box-shadow: 0 22px 40px rgba(15,23,42,0.08);
  background: #ffffff;
  padding: clamp(18px, 3vw, 26px);
  display: grid;
  gap: clamp(14px, 2vw, 20px);
}
.final-review-card[hidden]{
  display: none !important;
}
.tech-step.is-final-summary .final-chooser-card{
  display: none;
}
.final-review-toprow{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 28px);
  align-items: flex-start;
}
.final-review-leftcol{
  flex: 1 1 280px;
  display: grid;
  gap: clamp(12px, 2vw, 18px);
}
.final-field-pair{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.final-field-col{
  flex: 1 1 160px;
  display: grid;
  gap: 6px;
}
.final-field-label{
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mv-gray-500);
}
.final-field-input{
  width: 100%;
  border: 1px solid rgba(20,20,20,0.12);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  background: rgba(248,245,236,0.55);
}
.final-inline-row{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--mv-gray-700);
}
.final-datetime-row{
  flex-wrap: wrap;
  row-gap: 6px;
}
.final-calendar-icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(209,177,93,0.18);
  color: var(--mv-gold-dark);
  font-size: 18px;
}
.final-date-wrap{
  font-weight: 600;
  letter-spacing: 0.04em;
}
.final-time-row{
  display: inline-flex;
  align-items: center;
}
.final-time-range{
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.final-service-block{
  display: grid;
  gap: 6px;
}
.final-service-name{
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mv-gray-900);
}
.final-review-rightcol{
  display: grid;
  gap: 10px;
  justify-items: flex-end;
  min-width: 140px;
}
.final-service-list{
  display: grid;
  gap: 12px;
}
.final-tech-header{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 2px 2px 0;
}
.final-tech-header__label{
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mv-gray-500);
}
.final-tech-header__name{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mv-gray-900);
}
.final-service-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(209,177,93,0.35);
  background: rgba(248,245,236,0.55);
}
.final-service-info{
  display: grid;
  gap: 4px;
}
.final-service-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mv-gray-600);
}
.final-service-meta-divider{
  opacity: 0.5;
}
.final-service-time{
  font-weight: 600;
}
.final-service-tech{
  color: var(--mv-gold-dark);
  font-weight: 600;
}
.final-service-remove{
  border: 1px solid rgba(209,177,93,0.4);
  background: #fff;
  color: var(--mv-gray-500);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.final-service-remove:hover,
.final-service-remove:focus-visible{
  background: rgba(209,177,93,0.18);
  color: var(--mv-gray-900);
  outline: none;
}
.final-price{
  font-size: 24px;
  font-weight: 700;
  color: var(--mv-gray-900);
}
.final-next-btn{
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  background: var(--mv-gold);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.final-next-btn:hover,
.final-next-btn:focus-visible{
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(209,177,93,0.28);
}
.final-addmore-group{
  border-top: 1px solid rgba(20,20,20,0.08);
  padding-top: 12px;
  display: grid;
  gap: 8px;
}
.final-addmore-btn{
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--mv-gold-dark);
  cursor: pointer;
}
.final-addmore-trigger{
  border: 1px solid rgba(209,177,93,0.45);
  border-radius: 999px;
  padding: 10px 16px;
  background: #fff;
}
.final-addmore-trigger:hover,
.final-addmore-trigger:focus-visible{
  outline: none;
  background: rgba(209,177,93,0.12);
}
.final-addmore-btn .final-addmore-tech{ text-transform: uppercase; }
.final-helpernote-row{
  display: none;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--mv-gray-600);
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(248,245,236,0.7);
}
.final-helpernote-row.is-visible{
  display: flex;
}
.final-helpernote-row i{
  color: var(--mv-gold-dark);
  font-size: 18px;
  line-height: 1;
}
.final-chooser-card{
  border: 1px solid rgba(20,20,20,0.08);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(15,23,42,0.05);
  padding: clamp(16px, 3vw, 24px);
}
.final-tech-grid{
  border: none;
  background: transparent;
  padding: 0;
}
.final-tech-grid .tech-card{
  border-radius: 16px;
}
.techpicker-modal__panel{
  width: min(980px, 96vw);
}
.techpicker-modal__hint{
  margin-top: 0;
}
.techpicker-modal__scroll{
  display: grid;
  gap: 14px;
}

@media (max-width: 640px){
  .final-review-toprow{
    flex-direction: column;
    align-items: stretch;
  }
  .final-review-rightcol{
    justify-items: stretch;
  }
  .final-next-btn{
    width: 100%;
    text-align: center;
  }
  .final-tech-header__name{
    font-size: 15px;
  }
}

/* ===== FINAL REVIEW BLOCK (after confirm) ===== */
.review-block{
  border: 1px solid rgba(20,20,20,0.08);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background: #fff;
  padding: clamp(16px,2vw,20px);
  display: grid;
  gap: 16px;
  max-width: 100%;
}
.review-block[hidden]{ display:none!important; }

.review-top{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  row-gap: 16px;
  column-gap: 20px;
}

.review-lines{
  flex: 1 1 260px;
  display: grid;
  gap: 6px;
  font-size: 15px;
  line-height: 1.4;
  color: #1f1f1f;
}
.review-line{
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
  column-gap: 6px;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.4;
}
.review-label{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mv-gray-500);
  flex: 0 0 auto;
}
.review-value{
  font-weight: 600;
  color: #1a1a1a;
  flex: 0 0 auto;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.review-line.review-service,
.review-line.review-tech{
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #1a1a1a;
}

.review-side{
  flex: 0 0 auto;
  min-width: 90px;
  display: grid;
  align-content: flex-start;
  justify-items: end;
  row-gap: 10px;
}

.review-price{
  color: var(--mv-gold-dark);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .04em;
}
.review-next{
  appearance: none;
  border: 0;
  border-radius: 8px;
  background: var(--mv-gold);                          /* was #2563eb */
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(209,177,93,0.25);        /* was rgba(37,99,235,.28) */
  text-transform: uppercase;
  letter-spacing: .08em;
}
.review-next:hover,
.review-next:focus-visible{
  outline: none;
  background: var(--mv-gold-dark);                     /* was #1d4ed8 */
  box-shadow: 0 14px 28px rgba(209,177,93,0.32);        /* was rgba(37,99,235,.36) */
}


.review-addmore{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid rgba(209,177,93,0.45);
  background: #fff;
  color: var(--mv-gold-dark);
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.review-addmore i{
  font-size: 14px;
  color: var(--mv-gold-dark);
}
.review-addmore:hover,
.review-addmore:focus-visible{
  outline: none;
  background: rgba(209,177,93,0.12);
  box-shadow: 0 14px 24px rgba(209,177,93,0.24);
  transform: translateY(-1px);
}

.review-note{
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--mv-gray-700);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.review-note i{
  color: var(--mv-gray-700);
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.2;
}

/* Little banner for "None-Request available..." */
.none-banner{
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f1f6ff;
  border: 1px solid rgba(44,98,186,0.2);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--mv-gray-700);
}
.none-banner[hidden]{ display:none!important; }
.none-banner i{
  color: rgba(44,98,186,0.8);
  font-size: 16px;
}
.none-sub{
  font-size: 12px;
  color: var(--mv-gray-500);
  line-height: 1.4;
}

/* Technician grid + cards */
.tech-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(14px, 2.5vw, 20px);
  padding: clamp(18px, 3vw, 28px);
  border-radius: 18px;

  background: rgba(209,177,93,0.08);                    /* was #f1f6ff  */
  border: 1px solid rgba(209,177,93,0.35);               /* was rgba(44,98,186,0.12) */
}

.tech-card{
  display: grid;
  gap: 8px;
  padding: 16px 14px;
  border-radius: 14px;

  border: 1px solid rgba(209,177,93,0.45);               /* was rgba(44,98,186,0.18) */
  background: #ffffff;

  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  justify-items: center;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.tech-card span{ display: block; }
.tech-card__avatar{
  width: clamp(48px, 9vw, 64px);
  height: clamp(48px, 9vw, 64px);
  border-radius: 50%;
  border: 1px solid rgba(209,177,93,0.35);
  background: #f3f4f6;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.tech-card__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tech-card .tech-card__note{
  text-transform: none;
  font-size: 12px;
  color: var(--mv-gray-500);
  letter-spacing: 0.02em;
}
.tech-card:hover,
.tech-card:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(209,177,93,0.24);          /* was rgba(44,98,186,0.15) */
  border-color: rgba(209,177,93,0.65);                    /* was rgba(44,98,186,0.35) */
  outline: none;
}

.tech-card[data-selected="true"]{
  border-color: rgba(209,177,93,0.85);
  background: var(--mv-gold);
  color: #fff;
  box-shadow: 0 18px 30px rgba(209,177,93,0.32);
}
.tech-card[data-selected="true"] .tech-card__avatar{
  border-color: rgba(255,255,255,0.6);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}
.tech-card[data-selected="true"] .tech-card__note{
  color: rgba(255,255,255,0.82);
}

.tech-card--non-request{
  grid-column: 1 / -1;
  justify-items: center;
  text-align: center;
  text-transform: none;
  letter-spacing: 0.04em;
  padding: 12px 16px;
}
.tech-card--non-request .tech-card__name{
  font-size: 16px;
  font-weight: 700;
}
.tech-card--non-request .tech-card__note{
  font-size: 13px;
}

.final-tech-grid .tech-card[data-selected="true"]{
  border-color: rgba(209,177,93,0.45);
  background: #ffffff;
  color: var(--mv-gray-900);
  box-shadow: none;
}
.final-tech-grid .tech-card[data-selected="true"] .tech-card__note{
  color: var(--mv-gray-500);
}

.booking-success{
  display: none;
  align-items: center;
  gap: 14px;
  margin: 6px 0;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(209,177,93,0.12);
  color: var(--mv-gray-800);
  border: 1px solid rgba(209,177,93,0.35);
}
.booking-success.is-visible{
  display: flex;
}
.booking-success__icon{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mv-gold);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px;
}
.booking-success__copy h3{
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.booking-success__copy p{
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--mv-gray-600);
}

.booking-complete-overlay{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  opacity:0;
  pointer-events:none;
  transition: opacity 200ms ease;
  z-index:1600;
}
.booking-complete-overlay.visible{
  opacity:1;
  pointer-events:auto;
}
.booking-complete-card{
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: 1200;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffff;
  font-size: clamp(28px, 5vw, 40px);
}

/* Booking modal ------------------------------------------------------- */
.booking-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}
.booking-modal.open{ display: flex; }
.booking-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 12, 0.55);
}

/* PANEL BASE */
.booking-modal__panel{
  position: relative;
  z-index: 1;
  width: min(760px, 94vw);
  max-height: min(88vh, 800px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(209,177,93,0.45);
  box-shadow: 0 36px 90px rgba(0,0,0,0.22);
  padding: clamp(22px, 4vw, 32px);
  gap: clamp(16px, 3vw, 22px);
}
.booking-modal__panel--wide{ width: min(900px, 95vw); }

/* confirmation + tech-request panels themed like the rest */
.confirm-modal__panel,
.techreq-modal__panel{
  position: relative;
  z-index: 1;
  width: min(1000px, 95vw);
  max-height: min(88vh, 800px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(209,177,93,0.45);
  box-shadow: 0 36px 90px rgba(0,0,0,0.22);

  /* FIX: make sure footer sits inside panel instead of overflowing */
  padding: clamp(22px, 4vw, 32px);
  gap: clamp(16px, 3vw, 22px);

  /* ensure internal scroll region doesn't push footer out of bounds */
  max-width: 100%;
}

/* scroll area in modal */
.booking-modal__scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  scroll-behavior: smooth;
}
.booking-modal__scroll::-webkit-scrollbar{ width: 10px; }
.booking-modal__scroll::-webkit-scrollbar-track{
  background: rgba(224, 209, 167, 0.18);
  border-radius: 999px;
}
.booking-modal__scroll::-webkit-scrollbar-thumb{
  background: rgba(209,177,93,0.55);
  border-radius: 999px;
}
.booking-modal__scroll::-webkit-scrollbar-thumb:hover{
  background: rgba(209,177,93,0.75);
}

@media (max-width: 640px){
  .booking-modal{
    align-items: flex-start;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    padding-left: calc(env(safe-area-inset-left, 0px) + 8px);
    padding-right: calc(env(safe-area-inset-right, 0px) + 8px);
  }
  .booking-modal__panel{
    width: 100%;
    max-height: calc(100vh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 16px;
    padding: 16px;
    gap: 12px;
  }
  .booking-modal__scroll{
    padding-right: 0;
  }
}

/* headers inside modals */
.booking-modal__header,
.confirm-modal__header,
.techreq-modal__header{
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.booking-modal__header h3,
.confirm-modal__header h3,
.techreq-modal__header h3{
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: 0.06em;
}
.booking-modal__close,
.confirm-modal__close,
.techreq-modal__close{
  border: none;
  background: rgba(209,177,93,0.18);
  color: var(--mv-gray-900);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.booking-modal__close:hover,
.booking-modal__close:focus-visible,
.confirm-modal__close:hover,
.confirm-modal__close:focus-visible,
.techreq-modal__close:hover,
.techreq-modal__close:focus-visible{
  background: var(--mv-gold);
  color: #fff;
  outline: none;
  transform: rotate(90deg);
}

/* summary labels (used in time + confirm) */
.booking-modal__summary{
  flex-shrink: 0;
  display: grid;
  gap: 4px;
  font-size: 15px;
}
.booking-modal__summary .summary-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.booking-modal__summary .label{
  text-transform: uppercase;
  color: var(--mv-gray-500);
  letter-spacing: 0.05em;
}
.booking-modal__summary .label.subtle{ font-size: 13px; }
.booking-modal__summary .value{
  font-weight: 600;
  color: var(--mv-gray-900);
}

/* tech line inside service modal */
.booking-modal__tech{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mv-gray-500);
}
.booking-modal__tech-copy{
  display: grid;
  grid-auto-flow: row;
  justify-items: start;
  row-gap: 4px;
}
.booking-modal__tech-avatar{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(209,177,93,0.45);
  background: #f7f5f1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.booking-modal__tech-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.booking-modal__tech .value{
  font-size: 16px;
  font-weight: 600;
  color: var(--mv-gray-900);
}

/* =========================
   TIME MODAL INNER CONTENT
   ========================= */
.time-modal__body{ display: grid; gap: clamp(18px, 4vw, 26px); min-height: 0; }

.calendar-block{
  border: 1px solid rgba(209,177,93,0.35);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 24px);
  background: rgba(209,177,93,0.08);
}
.calendar-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.calendar-header button{
  border: none;
  background: rgba(209,177,93,0.16);
  color: var(--mv-gray-900);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.calendar-header button:hover,
.calendar-header button:focus-visible{
  background: var(--mv-gold);
  color: #fff;
  outline: none;
}
.calendar-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  font-size: 13px;
}
.calendar-grid .calendar-day{
  padding: 12px 0;
  border-radius: 12px;
  border: 1px solid rgba(30,30,30,0.08);
  background: #fff;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.calendar-grid .calendar-day.weekday{
  font-weight: 600;
  text-transform: uppercase;
  color: var(--mv-gray-500);
  cursor: default;
  border: none;
  background: transparent;
}
.calendar-grid .calendar-day.muted{ color: rgba(47,47,47,0.35); }
.calendar-grid .calendar-day.disabled{
  color: rgba(47,47,47,0.35);
  cursor: not-allowed;
  background: rgba(247,247,247,0.8);
}
.calendar-grid .calendar-day.selected{
  border-color: rgba(209,177,93,0.6);
  background: var(--mv-gold);
  color: #fff;
  box-shadow: none;
}

.service-empty{ margin: 0; font-size: 14px; color: var(--mv-gray-500); }

/* Times block --------------------------------------------------------- */
.times-block{ display: grid; gap: 16px; }
.times-header{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: var(--mv-gray-500);
}
.slot-hint{ color: var(--mv-gold-dark); font-weight: 500; }
.times-columns{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  padding-right: 6px;
}
.times-columns:focus-visible{
  outline: 2px solid rgba(209,177,93,0.65);
  outline-offset: 4px;
}
.times-column{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: rgba(248,248,248,0.74);
  border-radius: 16px;
  padding: 16px;
  gap: 12px;
}
.times-column__label{
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mv-gray-500);
}
.time-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  grid-auto-rows: 44px;
  gap: 10px;
}
.time-grid:empty::before{
  content: "No availability";
  font-size: 13px;
  color: rgba(80,80,80,0.55);
  text-align: center;
  padding: 32px 8px;
  border: 1px dashed rgba(209,177,93,0.35);
  border-radius: 12px;
  background: rgba(255,255,255,0.9);
  grid-column: 1 / -1;
  line-height: 1.4;
}
.time-slot{
  border: 1px solid rgba(30,30,30,0.08);
  border-radius: 12px;
  min-width: 90px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.time-slot:hover,
.time-slot:focus-visible{
  outline: none;
  border-color: rgba(209,177,93,0.65);
  box-shadow: 0 12px 22px rgba(209,177,93,0.22);
  transform: translateY(-2px);
}
.time-slot.disabled{
  background: repeating-linear-gradient(
    135deg,
    #f3f3f1,
    #f3f3f1 6px,
    rgba(173,173,173,0.18) 6px,
    rgba(173,173,173,0.18) 12px
  );
  color: rgba(47,47,47,0.4);
  cursor: not-allowed;
  border-color: rgba(30,30,30,0.08);
  box-shadow: none;
  transform: none;
}
.time-slot.selected{
  background: var(--mv-gold);
  color: #fff;
  border-color: rgba(209,177,93,0.85);
  box-shadow: 0 18px 28px rgba(209,177,93,0.28);
}

.booking-modal__hint{
  margin: 0;
  font-size: 14px;
  color: var(--mv-gray-500);
}
.booking-modal__selected-meta{
  margin: -8px 0 0;
  font-size: 12px;
  color: var(--mv-gold-dark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ==============================
   SERVICE LIST  (service modal)
   ============================== */
.service-groups{ overflow: visible; display: grid; gap: 14px; }
.service-empty{ margin: 0; font-size: 14px; color: var(--mv-gray-500); }
.service-group{
  border: 1px solid rgba(209,177,93,0.35);
  border-radius: 14px;
  background: rgba(209,177,93,0.08);
  padding: 10px 12px;
}
.service-group summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mv-gold-dark);
}
.service-group summary::-webkit-details-marker{ display:none; }
.service-group[open] summary .summary-icon{ transform: rotate(180deg); }
.service-group .summary-icon{ transition: transform 0.2s ease; font-size: 16px; }
.service-list{ margin-top: 10px; display: grid; gap: 8px; }
.service-item{
  width: 100%;
  border: 1px solid rgba(30,30,30,0.08);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  font-size: 17px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.service-item__name{
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}
.service-item:hover,
.service-item:focus-visible{
  outline: none;
  border-color: rgba(209,177,93,0.6);
  box-shadow: 0 12px 24px rgba(209,177,93,0.24);
  transform: translateY(-2px);
}
.service-item.is-selected{
  border-color: rgba(209,177,93,0.9);
  background: rgba(209,177,93,0.16);
  box-shadow: 0 8px 18px rgba(209,177,93,0.2);
}
.service-item__meta{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  min-height: 38px;
  min-width: 148px;
  gap: 14px;
  font-size: 14px;
  color: var(--mv-gray-500);
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1;
}
.service-item__count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--mv-gold-dark);
  letter-spacing: 0.02em;
}
.service-item__count.is-empty{
  visibility: hidden;
}
.service-item__quantity-controls{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.service-item__meta span + span::before{
  content: '\2022';
  margin-right: 8px;
  color: rgba(47,47,47,0.45);
}
.service-item__meta .service-item__quantity-controls::before{
  content: none;
  margin-right: 0;
}
.service-item__meta .service-item__count::before{
  content: none;
  margin-right: 0;
}
.service-item__qty-btn{
  width: 38px;
  height: 38px;
  border: 1px solid rgba(209,177,93,0.5);
  border-radius: 6px;
  background: #fff;
  color: var(--mv-gold-dark);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.service-item__qty-btn:hover,
.service-item__qty-btn:focus-visible{
  outline: none;
  background: rgba(209,177,93,0.12);
}
.service-item__price{ color: var(--mv-gold-dark); font-weight: 600; }

@media (max-width: 640px){
  .service-item{
    padding: 12px 12px;
    gap: 10px;
    font-size: 16px;
  }
  .service-item__meta{
    min-height: 34px;
    min-width: 126px;
    gap: 8px;
    font-size: 13px;
  }
  .service-item__count{
    min-width: 24px;
    padding: 2px 6px;
    font-size: 12px;
  }
  .service-item__quantity-controls{
    gap: 6px;
  }
  .service-item__qty-btn{
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
}

@media (max-width: 420px){
  #serviceModal .service-item{
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  #serviceModal .service-item__meta{
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    white-space: normal;
  }
}

.service-selection-summary{
  margin-top: 14px;
  border: 1px dashed rgba(209,177,93,0.55);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,250,241,0.9), rgba(255,255,255,0.96));
  padding: 12px;
}
.service-selection-divider{
  margin-top: 14px;
  border-top: 1px solid rgba(15,23,42,0.12);
}
.service-selection-summary__head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.service-selection-summary__title{
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mv-gold-dark);
}
.service-selection-summary__count{
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(209,177,93,0.5);
  color: var(--mv-gold-dark);
  background: #fff;
}
.service-selection-summary__hint{
  margin: 7px 0 9px;
  font-size: 12px;
  color: var(--mv-gray-500);
}
.service-selection-summary__list{
  display: grid;
  gap: 8px;
}
.service-selection-summary__empty{
  font-size: 12px;
  color: var(--mv-gray-500);
}
.service-selection-summary__chip{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(15,23,42,0.1);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  box-shadow: 0 6px 14px rgba(15,23,42,0.05);
}
.service-selection-summary__info{
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.service-selection-summary__controls{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.service-selection-summary__name{
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--mv-gray-900);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.service-selection-summary__meta{
  flex: 0 0 auto;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--mv-gray-500);
  white-space: nowrap;
}
.service-selection-summary__qty{
  min-width: 30px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--mv-gold-dark);
  border-radius: 999px;
  padding: 3px 8px;
}
.service-selection-summary__qty-btn{
  width: 38px;
  height: 38px;
  border: 1px solid rgba(209,177,93,0.5);
  border-radius: 6px;
  background: #fff;
  color: var(--mv-gold-dark);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.service-selection-summary__qty-btn:hover,
.service-selection-summary__qty-btn:focus-visible{
  outline: none;
  background: rgba(209,177,93,0.12);
}

@media (max-width: 640px){
  .service-selection-summary__chip{
    padding: 8px 10px;
    gap: 10px;
  }
  .service-selection-summary__info{
    gap: 8px;
  }
  .service-selection-summary__name{
    font-size: 16px;
  }
  .service-selection-summary__meta{
    font-size: 13px;
    white-space: nowrap;
  }
  .service-selection-summary__qty-btn{
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
}

/* footer buttons in modal */
.booking-modal__actions{
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: auto;        /* NEW: push footer down inside panel */
  padding-top: 12px;       /* NEW: match confirm footer spacing */
  border-top: 1px solid rgba(0,0,0,0.08); /* subtle divider like confirm */
}
.modal-cancel,
.modal-back,
.modal-add{
  border: 1px solid rgba(209,177,93,0.45);
  background: #fff;
  color: var(--mv-gold-dark);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.modal-cancel:hover,
.modal-cancel:focus-visible,
.modal-back:hover,
.modal-back:focus-visible{
  outline: none;
  background: rgba(209,177,93,0.12);
}
.modal-add{
  border: none;
  background: var(--mv-gold);                           /* was #2563eb */
  color: #fff;
  box-shadow: 0 14px 28px rgba(209,177,93,0.25);        /* was rgba(37,99,235,0.25) */
}
.modal-add:disabled{
  background: rgba(209,177,93,0.28);                    /* was rgba(37,99,235,0.28) */
  color: rgba(255,255,255,0.7);
  cursor: not-allowed;
  box-shadow: none;
}
.modal-add:not(:disabled):hover,
.modal-add:not(:disabled):focus-visible{
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 20px 34px rgba(209,177,93,0.3);         /* was rgba(37,99,235,0.3) */
}

/* Service modal footer has longer labels (Back to Services / Continue to Time) */
#serviceModal .booking-modal__scroll{
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding-right: 0;
}
#serviceModal .booking-modal__actions{
  flex-wrap: wrap;
  row-gap: 8px;
}
#serviceModal .modal-cancel,
#serviceModal .modal-back,
#serviceModal .modal-add{
  letter-spacing: 0.08em;
  padding: 10px 18px;
}

@media (max-width: 640px){
  #serviceModal .booking-modal__scroll::-webkit-scrollbar{
    width: 0;
    height: 0;
  }
  #serviceModal .booking-modal__actions{
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 8px;
  }
  #serviceModal .modal-cancel,
  #serviceModal .modal-back,
  #serviceModal .modal-add{
    width: 100%;
    text-align: center;
    padding: 10px 14px;
    font-size: 12px;
    letter-spacing: 0.06em;
  }
}


/* ==============================
   CONFIRMATION MODAL CONTENT
   ============================== */
.confirm-modal__body{
  padding-top: 4px;
  display: grid;
  row-gap: 16px;
  column-gap: 24px;
  grid-template-columns: 1fr;
  font-size: 16px;
  line-height: 1.4;
  color: #1f1f1f;

  /* make body scroll if needed so footer stays attached */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.confirm-check-text{
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.05em;
  color: var(--mv-gray-600);
}
.confirm-row{
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
  column-gap: 12px;
  align-items: baseline;
}
.confirm-label{
  flex: 0 0 140px;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--mv-gray-500);
  letter-spacing: 0.06em;
}
.confirm-value{
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* --- Custom radio look (gold text already set) --- */
.confirm-row--tech{ align-items: center; }
.confirm-tech-select{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}
.tech-choice{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.tech-choice__input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tech-choice__circle{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.28);
  display: inline-block;
  box-shadow: inset 0 0 0 2px transparent;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.tech-choice__input:checked + .tech-choice__circle{
  background: var(--mv-gold);
  border-color: var(--mv-gold);
  box-shadow: inset 0 0 0 3px #fff;
}
.tech-choice__text--none,
.tech-choice__text--req{
  color: var(--mv-gold-dark);
  font-weight: 600;
}

/* === Confirmation modal tech list (no avatars in final page, but still selectable in modal) === */
#confirmTechList{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(14px, 2.5vw, 20px);
  padding: clamp(18px, 3vw, 28px);
  border-radius: 18px;
  background: rgba(209,177,93,0.08);          /* was #f1f6ff  */
  border: 1px solid rgba(209,177,93,0.35);     /* was rgba(44,98,186,0.12) */
}

#confirmTechList[hidden]{ display:none!important; }
#confirmTechList .techreq-card{
  display: grid;
  place-items: center;
  gap: 0;
  padding: 16px 14px;
  min-height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(209,177,93,0.45);     /* was rgba(44,98,186,0.18) */
  background: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}


#confirmTechList .techreq-card:hover,
#confirmTechList .techreq-card:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(209,177,93,0.24);   /* was rgba(44,98,186,0.15) */
  border-color: rgba(209,177,93,0.65);             /* was rgba(44,98,186,0.35) */
  outline: none;
}

#confirmTechList .techreq-card.is-selected{
  background: var(--mv-gold);
  color: #fff;
  border-color: rgba(209,177,93,0.85);
  box-shadow: 0 18px 30px rgba(209,177,93,0.32);
}

/* make sure the name text also turns white */
#confirmTechList .techreq-card.is-selected .techreq-name{
  color: #fff;
}
#confirmTechList .techreq-name{
  justify-content: center;
  width: 100%;
}

/* hide avatar/checkbox visuals here; we only show the names */
#confirmTechList .techreq-avatar,
#confirmTechList input[type="checkbox"],
#confirmTechList .checkbox,
#confirmTechList .pill-check,
#confirmTechList .check,
#confirmTechList .techreq-badge{
  display: none !important;
}
#confirmTechList .techreq-card::before,
#confirmTechList .techreq-card::after{
  content: none !important;
  display: none !important;
}

/* footer buttons row in confirm modal */
.confirm-modal__footer{
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 12px;
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;

  /* keep footer attached to bottom INSIDE the modal */
  flex-shrink: 0;
}
.cm-btn{
  border: 1px solid rgba(209,177,93,0.45);
  background: #fff;
  color: var(--mv-gold-dark);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.cm-btn--ghost:hover,
.cm-btn--ghost:focus-visible{
  outline: none;
  background: rgba(209,177,93,0.12);
}
.cm-btn--primary{
  border: none;
  background: var(--mv-gold);
  color: #fff;
  box-shadow: 0 14px 28px rgba(209,177,93,0.25);
}

/* ==============================
   FINAL SUMMARY MODAL
   ============================== */
.summary-modal__panel{
  position: relative;
  z-index: 1;
  width: min(680px, 92vw);
  max-height: min(90vh, 820px);
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 30px 60px rgba(15,23,42,0.22);
  display: flex;
  flex-direction: column;
}
.summary-modal__header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px clamp(24px, 4vw, 36px);
}
.summary-modal__headcol{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.summary-modal__brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.summary-modal__brand img{
  height: 38px;
  width: auto;
  display: block;
}
.summary-modal__location{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mv-gray-800);
  white-space: nowrap;
}
.summary-modal__header h3{
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: 0.05em;
}
.summary-modal__close{
  border: none;
  background: rgba(209,177,93,0.18);
  color: var(--mv-gray-800);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.summary-modal__close:hover,
.summary-modal__close:focus-visible{
  background: var(--mv-gold);
  color: #fff;
  outline: none;
}
.summary-modal__subtitle{
  margin: 0 clamp(24px,4vw,36px);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--mv-gray-600);
}
.summary-modal__body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 18px;
  padding: clamp(24px, 4vw, 36px);
  background: rgba(249,248,241,0.65);
}
.summary-pairs{
  display: grid;
  row-gap: 10px;
}
.summary-pair{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
}
.summary-label{
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mv-gray-500);
}
.summary-value{
  font-weight: 600;
  color: var(--mv-gray-900);
}
.summary-opt-group{
  display: grid;
  gap: 8px;
}
.summary-checkbox{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--mv-gray-700);
}
.summary-checkbox input{
  width: 18px;
  height: 18px;
}
.summary-date-row{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mv-gray-700);
}
.summary-date-row i{ color: var(--mv-gold-dark); }
.summary-services{
  display: grid;
  gap: 12px;
}
.summary-service{
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(100px, auto);
  gap: 14px;
  align-items: baseline;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px dashed rgba(209,177,93,0.5);
}
.summary-service-main{
  display: grid;
  gap: 4px;
}
.summary-service-time{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mv-gray-500);
}
.summary-service-name{
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.summary-service-tech{
  font-size: 14px;
  color: var(--mv-gold-dark);
}
.summary-service-price{
  font-weight: 600;
  font-size: 15px;
  text-align: right;
}
.summary-total-row{
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--mv-gray-900);
  padding-top: 6px;
  border-top: 1px solid rgba(209,177,93,0.35);
}
.summary-note-label{
  font-size: 14px;
  font-weight: 600;
  color: var(--mv-gray-700);
}
.summary-note-input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(209,177,93,0.45);
  padding: 12px 14px;
  font-size: 14px;
  resize: vertical;
  min-height: 90px;
}
.summary-optin{
  display: grid;
  gap: 6px;
}
.summary-optin__label{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mv-gray-700);
}
.summary-optin__label input{
  width: 20px;
  height: 20px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--mv-gold-dark);
  flex-shrink: 0;
}
.summary-optin__error{
  min-height: 16px;
  font-size: 13px;
  color: #d14343;
  margin: 0 0 0 32px;
}
.summary-optin.has-error .summary-optin__label{
  color: #d14343;
}
.summary-optin.has-error .summary-optin__label input{
  outline: 2px solid #d14343;
  outline-offset: 2px;
}
.summary-modal__footer{
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px clamp(24px,4vw,36px) 26px;
}
.summary-modal__footer .cm-btn{
  min-width: 120px;
}
.cm-btn--primary:disabled{
  background: rgba(209,177,93,0.28);
  color: rgba(255,255,255,0.7);
  cursor: not-allowed;
  box-shadow: none;
}
.cm-btn--primary:not(:disabled):hover,
.cm-btn--primary:not(:disabled):focus-visible{
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 20px 34px rgba(209,177,93,0.3);
}

@media (max-width: 640px){
  .summary-modal__panel{
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 16px;
  }
  .summary-modal__header{
    padding: 16px;
    align-items: flex-start;
    gap: 10px;
  }
  .summary-modal__headcol{
    min-width: 0;
  }
  .summary-modal__brand{
    min-width: 0;
  }
  .summary-modal__brand img{
    height: 30px;
  }
  .summary-modal__location{
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.25;
  }
  .summary-modal__header h3{
    font-size: 22px;
  }
  .summary-modal__subtitle{
    margin: 0 16px;
    font-size: 12px;
  }
  .summary-modal__body{
    gap: 12px;
    padding: 16px;
  }
  .summary-pair{
    display: grid;
    gap: 4px;
  }
  .summary-value{
    overflow-wrap: anywhere;
  }
  .summary-date-row{
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .summary-service{
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }
  .summary-service-name{
    font-size: 14px;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
  }
  .summary-service-price{
    text-align: left;
  }
  .summary-note-input{
    min-height: 72px;
  }
  .summary-modal__footer{
    padding: 14px 16px 16px;
    gap: 8px;
  }
  .summary-modal__footer .cm-btn{
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* ==============================
   TECH REQUEST MODAL CONTENT
   ============================== */
.techreq-topline{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.techreq-left{ display:grid; gap:12px; }
.techreq-minirows{ display:grid; gap:6px; font-size:15px; line-height:1.4; color:#1f1f1f; }
.minirow{ display:flex; flex-wrap:wrap; row-gap:4px; column-gap:8px; align-items:baseline; }
.mini-label{ text-transform:uppercase; color: var(--mv-gray-500); font-size:13px; letter-spacing:.06em; }
.mini-value{ font-weight:600; color: var(--mv-gray-900); font-size:15px; text-transform:uppercase; letter-spacing:.04em; }

/* legend / instructions */
.techreq-legend{
  background: #f1f6ff;
  border: 1px solid rgba(44,98,186,0.2);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--mv-gray-700);
  margin-bottom: 8px;
  display: grid;
  gap: 8px;
}
.legend-row{ display:flex; align-items:center; gap:10px; }
.legend-swatch{ width:20px; height:20px; border-radius:4px; border:1px solid rgba(0,0,0,0.12); }
.legend-swatch--cant{ background: var(--stripe-unable-bg); }
.legend-swatch--unavail{ background: var(--stripe-unavailable-bg); }
.legend-text{ font-size:13px; color: var(--mv-gray-700); }

/* tech grid (also re-used inside confirm modal expansion) */
.techreq-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 12px;
}
.techreq-card{
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
  min-height: 60px;
  position: relative;
}
.techreq-card .techreq-avatar{
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: #eee;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.08);
}
.techreq-card .techreq-name{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
  column-gap: 8px;
}
.techreq-card.is-selected{
  border-color: rgba(209,177,93,0.65);
  box-shadow: 0 18px 30px rgba(209,177,93,0.22);
}
.techreq-card:not(.is-unable):not(.is-unavailable):hover,
.techreq-card:not(.is-unable):not(.is-unavailable):focus-visible{
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(0,0,0,0.12);
  border-color: rgba(0,0,0,0.3);
}

/* Footer --------------------------------------------------------------- */
.site-footer{
  background: var(--mv-gray-900);
  height: 84px;
  flex-shrink: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 24px;
}
.site-footer .footer-inner{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.site-footer .footer-copy{
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.site-footer .footer-powered{
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.site-footer .footer-logo{
  height: 24px;
  width: auto;
  display: block;
}

/* Utility -------------------------------------------------------------- */
body.modal-open{ overflow: hidden; }
.visually-hidden{
  position:absolute!important;
  height:1px;width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}