/**
 * Muse Paint Bar In-Studio Private Party Self-Checkout (v2)
 * Companion stylesheet for instudio_payment_checkout_v2.php
 */

.wizard-scope * { box-sizing: border-box; }
:root {
  --blue: #0091F1;
  --blue-light: #e6f3fe;
  --dark: #1a1a1a;
  --gray-bg: #f0f0f0;
  --input-bg: #ececec;
  --border: #d5d5d5;
  --done: #1a1a1a;
  --red: #d72e6c;
  --green: #5cb85c;
}
.wizard-scope {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--gray-bg);
  color: var(--dark);
  font-weight: 400;
  padding-top: 20px;
  padding-bottom: 40px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Gray band extends full viewport width.
     Inner content is constrained by .wizard-wrap (1140px / 1268px centered). */
  width: 100%;
}

/* ============ GLOBAL HARDENING ============
   Many host themes style bare elements (h1-h6, p, ul, li, button, a, etc.) in ways
   that leak into the wizard. These resets ensure the wizard looks consistent
   regardless of what the host theme does. */
.wizard-scope h1,
.wizard-scope h2,
.wizard-scope h3,
.wizard-scope h4,
.wizard-scope h5,
.wizard-scope h6 {
  background: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  text-shadow: none;
  box-shadow: none;
  font-family: 'Poppins', sans-serif;
  color: var(--dark);
  font-style: normal;
  line-height: 1.3;
  text-align: left;
  width: auto;
}
.wizard-scope p {
  background: none;
  border: none;
  font-family: 'Poppins', sans-serif;
  color: inherit;
  font-style: normal;
  line-height: 1.5;
}
.wizard-scope ul, .wizard-scope ol {
  background: none;
  border: none;
  list-style-position: outside;
}
.wizard-scope li {
  background: none;
  border: none;
  font-family: 'Poppins', sans-serif;
  line-height: 1.5;
}
.wizard-scope button {
  font-family: 'Poppins', sans-serif;
  text-shadow: none;
  cursor: pointer;
}
.wizard-scope a {
  text-decoration: none;
  background: none;
  border: none;
}

/* ============ WIZARD WRAPPER ============ */
/* Constrains inner content to 1140px (1268px on 1601px+ screens), centered.
   The .wizard-scope outer gray background extends full viewport width. */
.wizard-scope .wizard-wrap {
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
@media (min-width: 1601px) {
  .wizard-scope .wizard-wrap { max-width: 1268px; }
}

/* ============ ALREADY-BOOKED NOTICE ============
   Shown when the controller indicates the user has an active self-checkout
   ($alreadySelfCheckout_id != 0). The .has-already-booked modifier on
   .wizard-scope hides the wizard form below via CSS so only this notice is
   visible. .wizard-wrap lives inside the form, so hiding the form is enough. */
.wizard-scope.has-already-booked > form {
  display: none !important;
}
.wizard-scope .already-booked-wrap {
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
}
.wizard-scope .already-booked-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 40px 32px;
  text-align: center;
}
.wizard-scope .already-booked-title {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--dark);
  margin: 0 0 24px;
  text-transform: uppercase;
  /* Generic .wizard-scope h1/h2/h3 reset forces text-align:left, which
     overrides the parent card's text-align:center. Restore center here. */
  text-align: center;
}
.wizard-scope .already-booked-text {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark);
  margin: 0 0 16px;
}
.wizard-scope .already-booked-text:last-child {
  margin-bottom: 0;
}
.wizard-scope .already-booked-link {
  color: var(--blue);
  text-decoration: underline;
  font-weight: 500;
}
.wizard-scope .already-booked-link:hover {
  text-decoration: none;
}
@media (max-width: 800px) {
  .wizard-scope .already-booked-wrap { padding: 24px 12px; }
  .wizard-scope .already-booked-card { padding: 28px 20px; }
  .wizard-scope .already-booked-title { font-size: 20px; }
  .wizard-scope .already-booked-text { font-size: 15px; }
}

/* ============ SUBMIT ERROR BANNER ============ */
/* Top-of-wizard red banner shown when the server passes one or more error
   variables back to the view (failed submission). Mirrors v1's .steps-errors
   block but consolidated into a single banner. PHP only renders the wrapping
   <div class="submit-errors"> when at least one error is set, so there's
   nothing to hide — its presence in the DOM means there's a message to show. */
.wizard-scope .submit-errors {
  position: relative;
  background: #fdecea;
  border: 1px solid #d8694e;
  color: #8a2a18;
  border-radius: 4px;
  padding: 14px 40px 14px 18px;
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.5;
}
.wizard-scope .submit-errors-line {
  /* Multiple errors stack vertically with a small gap. */
}
.wizard-scope .submit-errors-line + .submit-errors-line {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(216, 105, 78, 0.3);
}
.wizard-scope .submit-errors-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  color: #8a2a18;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  font-weight: 400;
}
.wizard-scope .submit-errors-close:hover { color: #5a1808; }

/* ============ PROGRESS BAR ============ */
.wizard-scope .progress-wrap {
  padding: 32px 0 24px;
}
.wizard-scope .progress-bar {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.wizard-scope .progress-line {
  position: absolute;
  top: 50%;
  left: 14px;
  right: 14px;
  height: 1.5px;
  background: var(--dark);
  z-index: 0;
}
.wizard-scope .progress-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #b0b0b0;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  position: relative;
  flex-shrink: 0;
  cursor: default;
}
.wizard-scope .progress-dot.small { width: 20px; height: 20px; font-size: 10px; }
.wizard-scope .progress-dot.current { background: var(--blue); }
.wizard-scope .progress-dot.done { background: var(--dark); cursor: pointer; }
.wizard-scope .progress-dot.done::before {
  content: "✓";
  font-size: 14px;
}
.wizard-scope .progress-dot.done .num { display: none; }

/* ============ PAGE LAYOUT ============ */
.wizard-scope .step-title-bar {
  text-align: center;
  padding: 8px 20px 32px;
}
.wizard-scope .step-title-bar h1 {
  font-size: 30px !important;
  font-weight: 500 !important;       /* Poppins Medium per design (was 700 — looked too heavy) */
  letter-spacing: 0 !important;      /* no letter-spacing per design (was 4px) */
  line-height: 1.334 !important;     /* 133.4% per design */
  margin: 0 !important;
  color: #333 !important;            /* design spec (was --dark #1a1a1a) */
  font-family: 'Poppins', sans-serif !important;
  text-align: center !important;
  text-transform: uppercase !important;
}
.wizard-scope .step-title-bar .subtitle {
  font-size: 15px;
  color: #555;
  margin-top: 8px;
  font-weight: 400;
  text-align: center;
}

.wizard-scope form,
.wizard-scope #instudio-pp-form {
  margin: 0 !important;
  padding: 0 !important;
}

/* Host-page footer override: kill the 80px top margin on .new-footer-cls so it
   sits flush against the wizard (no white gap). Bottom spacing inside the wizard
   is handled by .btn-row margin-bottom instead. */
.new-footer-cls { margin-top: 0 !important; }
.wizard-scope .container {
  margin: 0 auto;
  padding: 0;
}
.wizard-scope .step { display: none; }
.wizard-scope .step.active { display: block; }
/* When summary bar is visible (fixed-position), add bottom padding so it doesn't overlap content.
   The .has-summary-bar class is toggled on .wizard-scope by JS on steps 2-7. */
.wizard-scope.has-summary-bar .container { padding-bottom: 20px; }
/* Step 7 (Review & Pay) has more content density and a payment button at the bottom,
   so it needs extra breathing room above the fixed summary bar. */
.wizard-scope.has-summary-bar .step[data-step="7"] { padding-bottom: 60px; }
.wizard-scope .card {
  background: #fff;
  padding: 40px;
  border-radius: 2px;
  margin-bottom: 0;
}

/* ============ FORM ELEMENTS ============ */
.wizard-scope .field { margin-bottom: 22px; }
/* Reset any inherited label styling from the host theme (background/padding/border etc.) */
.wizard-scope label,
.wizard-scope .label {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  text-shadow: none !important;
  box-shadow: none !important;
  text-align: left !important;
  line-height: 1.4 !important;
  font-style: normal !important;
}
.wizard-scope .label {
  display: block;
  font-size: 13px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 10px !important;
  color: #555;
  font-weight: 500;
}
.wizard-scope .label .req { color: #d8694e; margin-left: 2px; font-weight: 400; }
.wizard-scope .input, .wizard-scope select.input, .wizard-scope textarea.input {
  width: 100% !important;
  padding: 14px 16px !important;
  /* 16px is the minimum to (a) meet WCAG body-text accessibility recommendations and
     (b) prevent iOS Safari from auto-zooming the page when an input is focused —
     inputs <16px trigger that zoom because Apple assumes the text is too small to read. */
  font-size: 16px !important;
  background: var(--input-bg) !important;
  border: 2px solid transparent !important;
  border-radius: 2px !important;
  outline: none !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400 !important;
  color: var(--dark) !important;
  transition: border-color 0.15s, background 0.15s;
  -webkit-appearance: none;
  appearance: none;
  height: auto !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  display: block !important;
}
.wizard-scope select.input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23333' d='M6 8L0 0h12z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 40px !important;
  cursor: pointer;
}
.wizard-scope .input:focus { border-color: var(--blue) !important; background: #fff !important; }
.wizard-scope .input.invalid { border-color: #d93025 !important; }
.wizard-scope textarea.input { min-height: 120px; resize: vertical; }
.wizard-scope .err {
  color: #d93025;
  font-size: 13px;
  margin-top: 4px;
  min-height: 15px;
}

/* ============ BUTTONS ============ */
.wizard-scope .btn-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
  margin-bottom: 20px;
}
.wizard-scope .btn {
  padding: 14px 40px;
  border-radius: 2px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  min-width: 160px;
}
.wizard-scope .btn-dark { background: var(--dark); color: #fff; border: 1.5px solid var(--dark); }
.wizard-scope .btn-dark:hover:not(:disabled) { background: #333; }
.wizard-scope .btn-dark:disabled { background: #aaa; border-color: #aaa; cursor: not-allowed; }
.wizard-scope .btn-light { background: #fff; color: var(--dark); border: 1.5px solid var(--dark); }
.wizard-scope .btn-light:hover { background: #f5f5f5; }

/* ============ STEP 2: CALENDAR ============ */
.wizard-scope .where-card {
  background: #fff;
  padding: 24px;
  text-align: center;
  margin-bottom: 16px;
  border-radius: 2px;
}
.wizard-scope .where-card .where-title {
  font-size: 14px;
  letter-spacing: 1.5px;
  font-weight: 700;
}
.wizard-scope .where-card .where-edit {
  color: var(--blue);
  font-weight: 700;
  margin-left: 8px;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1px;
}
.wizard-scope .where-card .where-addr {
  margin-top: 8px;
  color: #555;
  font-size: 14px;
  letter-spacing: 1.5px;
  font-weight: 400;
}

.wizard-scope .datetime-grid {
  display: grid;
  grid-template-columns: 480px 320px;  /* calendar width (400 -> 480 per request) */
  gap: 48px;
  justify-content: center;
  align-items: start;
}
@media (max-width: 800px) {
  .wizard-scope .datetime-grid { grid-template-columns: 1fr; gap: 24px; }
}

.wizard-scope .cal-header {
  background: var(--blue-light);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  margin-bottom: 20px;
}
.wizard-scope .cal-nav {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 24px;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
}
.wizard-scope .cal-month {
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
}
.wizard-scope .cal-scroll {
  position: relative;
  height: 272px;   /* fixed 6-row height: box never jumps, never collapses on load */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 4px;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}
.wizard-scope .cal-scroll::-webkit-scrollbar { width: 6px; }
.wizard-scope .cal-scroll::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.wizard-scope .cal-scroll::-webkit-scrollbar-thumb { background: #c8c8c8; border-radius: 3px; }
.wizard-scope .cal-scroll::-webkit-scrollbar-thumb:hover { background: #999; }

/* Each month block sizes naturally to its content. Scroll-snap ensures
   the scroll always lands cleanly at the top of a month, so users never
   see partial dates from two months at once. */
.wizard-scope .cal-month-block {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100%;   /* fill the fixed viewport: one month per page, no peek, stable height */
  padding-bottom: 0;
}
.wizard-scope .cal-month-block + .cal-month-block {
  border-top: none;
  padding-top: 0;
}
/* Inline month label rendered inside each month block. On the first block we
   hide it because the sticky header (#calMonth, above the scroll container)
   already shows that name — showing both would be redundant. For every
   subsequent block (Sep, Oct, ...) the label is visible so the user always
   knows which month the date numbers belong to. */
.wizard-scope .cal-month-inline-label {
  display: none;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 13px;
  color: var(--dark);
  text-align: center;
  padding: 4px 0 12px;
  text-transform: uppercase;
}
.wizard-scope .cal-month-block:first-child .cal-month-inline-label {
  display: none;
}
.wizard-scope .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px 4px;   /* row-gap 5, column-gap 4 */
  text-align: center;
  padding-top: 4px;
}
.wizard-scope .cal-day-names {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  text-align: center;
  background: #fff;
  padding-bottom: 4px;
}
/* Sticky day-name row (Mon-Sun) sits above the scrollable date grid.
   It's a sibling of #calScroll, not a child, so it doesn't move when scrolling. */
.wizard-scope .cal-day-names-sticky {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  background: #fff;
  padding: 4px;
  border-bottom: 1px solid #eee;
}
.wizard-scope .cal-day-name {
  font-size: 14px;
  color: #888;
  padding: 7px 0;
  font-weight: 400;
}
.wizard-scope .cal-day {
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  color: var(--dark);
  transition: background 0.15s;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
}
.wizard-scope .cal-day:hover:not(.disabled):not(.selected) {
  background: var(--blue-light);
  color: var(--dark);
}
.wizard-scope .cal-day.selected { background: var(--blue); color: #fff; font-weight: 700; }
.wizard-scope .cal-day.disabled { color: #c0c0c0; cursor: not-allowed; }
.wizard-scope .cal-day.empty { cursor: default; }

.wizard-scope .times-col .times-label {
  text-align: center;
  font-size: 14px;
  letter-spacing: 2px;
  color: #555;
  font-weight: 400;
  padding: 16px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wizard-scope .time-slots { display: flex; flex-direction: column; gap: 20px; }
.wizard-scope .time-slot {
  padding: 16px 20px;
  border: 1.5px solid var(--dark);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  font-size: 15px;
  display: flex;
  justify-content: center;
  gap: 16px;
  align-items: baseline;
  font-weight: 500;
}
.wizard-scope .time-slot .price { font-weight: 700; font-size: 16px; }
.wizard-scope .time-slot:hover { border-color: var(--blue); }
.wizard-scope .time-slot.selected { background: var(--blue); color: #fff; border-color: var(--blue); }

/* Booked slots: keep the same dark border as available slots (NOT blue), white bg,
   strikethrough on time only. Price stays normal/bold. Cursor disabled.
   Must override .selected + :hover. */
.wizard-scope .time-slot.booked,
.wizard-scope .time-slot.booked.selected,
.wizard-scope .time-slot.booked:hover {
  cursor: not-allowed !important;
  background: #fff !important;
  border-color: var(--dark) !important;
  color: var(--dark) !important;
  opacity: 1 !important;
}
/* Apply line-through to ONLY the time text. Putting it on the parent
   .time-slot would draw across descendants — including .price — and modern
   CSS won't let child rules remove an ancestor's text-decoration. Targeting
   just the .time span keeps the price visually intact. */
.wizard-scope .time-slot.booked .time {
  text-decoration: line-through;
}
.wizard-scope .time-slot.booked .price {
  color: var(--dark) !important;
  text-decoration: none !important;
}

/* Loading state: tiles show grey/skeleton appearance while server is fetching real prices. */
.wizard-scope .time-slot.loading {
  opacity: 0.5;
  cursor: wait;
  background: #f5f5f5;
  border-color: #ddd;
  color: #999;
  pointer-events: none;
}
.wizard-scope .time-slot.loading .price {
  color: #999;
}
.wizard-scope .timeslot-loading {
  text-align: center;
  padding: 12px 20px;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--blue);
  font-weight: 600;
  background: #eef7fe;
  border-radius: 4px;
  margin-bottom: 8px;
}

.wizard-scope .cal-footer {
  text-align: center;
  margin-top: 30px;
  font-size: 14px;
  color: #333333;
}
.wizard-scope .cal-footer a { color: var(--blue); text-decoration: none; }

/* Planner prompt inside the AVAILABLE TIMES column, directly under the slots. */
.wizard-scope .times-planner {
  text-align: center;
  margin-top: 28px;
  font-size: 14px;
  color: #888;
  line-height: 1.6;
  font-weight: 500;
}
.wizard-scope .times-planner .planner-link {
  color: var(--blue);
  font-weight: 500;
  text-decoration: none;
}
.wizard-scope .times-planner .planner-link:hover { text-decoration: underline; }
.wizard-scope .cal-warn {
  margin-top: 12px;
  color: #e07a5f;
  font-size: 14px;
}
.wizard-scope .cal-warn strong { font-weight: 700; }

/* ============ STEP 3: PACKAGES ============ */
.wizard-scope .pkg-grid {
  display: grid;
  /* Use 3 fixed columns. When one card is display:none, its track collapses
     to 0 (no min-content) and the remaining 2 cards keep their original width.
     The grid is centered within the parent so the empty column doesn't leave
     an awkward gap on one side. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 32px;
  justify-content: center;
}
/* When the grid has only 2 visible cards, constrain to ~2/3 width and center.
   :has() lets us detect the visibility state without JS class toggling. */
.wizard-scope .pkg-grid:has(.pkg-card[style*="display: none"]) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: calc(66.66% - 8px);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 800px) {
  .wizard-scope .pkg-grid,
  .wizard-scope .pkg-grid:has(.pkg-card[style*="display: none"]) {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}
.wizard-scope .pkg-card {
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s;
}
.wizard-scope .pkg-card:hover { transform: translateY(-4px); }
.wizard-scope .pkg-body {
  padding: 36px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.wizard-scope .pkg-body.lime { background: #c2d92f; }
.wizard-scope .pkg-body.teal { background: #1cc7c7; }
.wizard-scope .pkg-body.mint { background: #bef0e3; }
.wizard-scope .pkg-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1.15;
  margin-bottom: 24px;
  font-family: 'Poppins', sans-serif;
}
.wizard-scope .pkg-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: stretch;
  padding-left: 24px;
}
.wizard-scope .pkg-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  text-align: left;
  font-weight: 500;
}
.wizard-scope .pkg-features li::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><rect x='1' y='1' width='18' height='18' rx='3' fill='none' stroke='%231a1a1a' stroke-width='2'/><path d='M5 10l3 3 7-7' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
}
.wizard-scope .pkg-features small { color: #444; font-size: 13px; }

/* Price block (label + amount) pushed to the bottom of pkg-body via margin-top:auto
   so all 3 cards have their prices at the same vertical position regardless of
   how many feature items are listed above. */
.wizard-scope .pkg-price-block {
  margin-top: auto;
  padding-top: 28px;
  text-align: center;
}
.wizard-scope .pkg-price-label {
  font-size: 12px;
  letter-spacing: 1.5px;
  margin-bottom: 0;
  font-weight: 500;
  line-height: 1.2;
}
.wizard-scope .pkg-price {
  font-size: 36px;
  font-weight: 400;
  margin-top: 2px;
  margin-bottom: 16px;
  font-family: 'Poppins', sans-serif;
  line-height: 1.1;
}
.wizard-scope .pkg-btn {
  width: 100%;
  padding: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  background: #fff;
  border: 1.5px solid var(--dark);
  color: var(--dark);
  border-radius: 2px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
}
.wizard-scope .pkg-card.selected .pkg-btn {
  background: var(--dark);
  color: #fff;
}

.wizard-scope .pkg-build {
  background: #fff;
  padding: 40px;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
}
.wizard-scope .pkg-build.selected { box-shadow: inset 0 0 0 2px var(--blue); }
.wizard-scope .pkg-build h2 {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  color: var(--dark) !important;
  font-family: 'Poppins', sans-serif !important;
  text-transform: uppercase !important;
  background: none !important;
  border: none !important;
  text-align: center !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
}
.wizard-scope .pkg-build p {
  color: #555 !important;
  margin: 8px 0 !important;
  padding: 0 !important;
  background: none !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
.wizard-scope .pkg-build .start-label {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #555;
}
.wizard-scope .pkg-build .start-price {
  font-size: 32px;
  margin: 8px 0 16px;
}
.wizard-scope .pkg-build .min-note { color: #888 !important; font-size: 13px !important; }
.wizard-scope .pkg-build .select-btn {
  margin-top: 20px;
  padding: 14px 60px;
  background: #fff;
  border: 1.5px solid var(--dark);
  color: var(--dark);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  border-radius: 2px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
}
.wizard-scope .pkg-build .select-btn.is-selected {
  background: var(--dark);
  color: #fff;
}

/* ============ STEP 4: MENU ============ */
.wizard-scope .menu-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 24px;
}
@media (max-width: 800px) { .wizard-scope .menu-layout { grid-template-columns: 1fr; } }

.wizard-scope .menu-main { background: #fff; padding: 24px 32px; border-radius: 2px; }
.wizard-scope .menu-cart {
  background: #fff;
  padding: 20px;
  border-radius: 2px;
  align-self: start;
  position: sticky;
  top: 60px;
}
.wizard-scope .menu-cart h3 {
  font-size: 16px;
  letter-spacing: 1.5px;
  margin: 0 0 12px;
  color: var(--dark);
  font-weight: 700;
}
.wizard-scope .cart-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  padding: 6px 0;
  color: #555;
}
.wizard-scope .cart-line .cart-item-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wizard-scope .cart-line .cart-item-price {
  font-weight: 500;
  color: #333;
  white-space: nowrap;
}
.wizard-scope .cart-line .cart-remove {
  background: none;
  border: none;
  color: #bbb;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  transition: color 0.15s;
}
.wizard-scope .cart-line .cart-remove:hover { color: #d93025; }
.wizard-scope .cart-empty { color: #aaa; font-size: 13px; font-style: italic; }
.wizard-scope .cart-total {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 14px;
}
.wizard-scope .cart-note {
  margin-top: 15px;
  font-size: 12px;
  color: #d8694e;
  line-height: 1.4;
}

.wizard-scope .menu-section { margin-bottom: 28px; }
.wizard-scope .menu-section-head {
  background: rgba(199, 227, 252, 0.35);
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-radius: 5px;
  user-select: none;
  transition: background 0.15s;
}
.wizard-scope .menu-section-head:hover { background: rgba(199, 227, 252, 0.55); }
.wizard-scope .menu-section.locked .menu-section-head {
  cursor: default;
  background: rgba(199, 227, 252, 0.35);
}
.wizard-scope .menu-section.locked .menu-section-head:hover { background: rgba(199, 227, 252, 0.35); }
.wizard-scope .menu-section.locked .menu-section-head .chev { display: none; }
.wizard-scope .menu-section-head .count { color: #888; font-weight: 400; font-size: 12px; margin-left: 8px; }
.wizard-scope .menu-section-head .chev {
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.wizard-scope .menu-section-head .chev svg {
  width: 20px;
  height: 20px;
  display: block;
}
/* Default (expanded): chevron points UP (rotated 180deg from svg's down-pointing default).
   When collapsed: chevron points DOWN (no rotation). */
.wizard-scope .menu-section-head .chev {
  transform: rotate(180deg);
}
.wizard-scope .menu-section.collapsed .menu-section-head .chev {
  transform: rotate(0deg);
}
.wizard-scope .menu-section-body {
  overflow: hidden;
  transition: max-height 0.3s ease;
  max-height: 4000px;
}
.wizard-scope .menu-section.collapsed .menu-section-body {
  max-height: 0;
}
.wizard-scope .menu-subhead {
  background: transparent;
  color: var(--dark);
  padding: 8px 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 14px;
  border-bottom: 1px solid var(--blue);
}
.wizard-scope .menu-subhead .count { color: #888; font-weight: 400; font-size: 13px; margin-left: 6px; letter-spacing: 0; }
.wizard-scope .menu-list { padding: 0; }
/* Grid: name(+desc) takes flexible space, price auto-fits content (right-aligned),
   button has fixed width. Horizontal padding matches section-head's 16px so item names
   align with section header text vertically. */
.wizard-scope .menu-item {
  display: grid;
  grid-template-columns: 1fr auto 110px;
  gap: 20px;
  padding: 8px 16px;
  align-items: center;
}
/* Sub-category headers (Wine Bottles, Cocktails, etc.) also align with item padding */
.wizard-scope .menu-subhead {
  padding-left: 16px;
  padding-right: 16px;
}
.wizard-scope .menu-item-info { min-width: 0; }
.wizard-scope .menu-item-name {
  font-weight: 500;
  font-size: 16px;
  color: var(--dark);
}
.wizard-scope .menu-item-desc {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
  line-height: 1.4;
}
.wizard-scope .menu-item-allerg { font-size: 11px; color: #d8694e; margin-top: 2px; }
.wizard-scope .menu-item-price {
  font-weight: 500;
  font-size: 16px;
  color: var(--dark);
  text-align: right;
  white-space: nowrap;
  min-width: 50px;
}
.wizard-scope .add-btn {
  border: 1.5px solid var(--dark);
  background: #fff;
  padding: 0;
  border-radius: 2px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--dark);
  width: 100%;
  height: 36px;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  transition: background 0.15s;
}
.wizard-scope .add-btn:hover { background: #f5f5f5; }
.wizard-scope .qty-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--blue);
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
  height: 36px;
  justify-content: space-between;
}
.wizard-scope .qty-stepper button {
  background: var(--blue);
  color: #fff;
  border: none;
  width: 36px;
  height: 36px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.wizard-scope .qty-stepper button:hover { background: #007ad1; }
.wizard-scope .qty-stepper .qty {
  background: var(--blue);
  color: #fff;
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}
.wizard-scope .qty-stepper svg {
  width: 14px;
  height: 14px;
  fill: #fff;
}

/* ============ STEP 5: PAINTING ============ */
.wizard-scope .painting-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}
/* On comfortable desktop widths (≥900px), keep CANVAS SIZE + FILTERS on a
   single row. Below that the natural flex-wrap takes over and FILTERS drops
   to a second line. */
@media (min-width: 900px) {
  .wizard-scope .painting-controls { flex-wrap: nowrap; }
  .wizard-scope .filter-tabs { flex-wrap: nowrap; }
}
.wizard-scope .canvas-select {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Don't let the canvas-select get squeezed when the filter row tries to
     claim space — its select needs ~120px to render the size text. */
  flex-shrink: 0;
}
.wizard-scope .canvas-select label {
  font-size: 13px;
  letter-spacing: 1.5px;
  font-weight: 400;
  color: var(--dark);
}
.wizard-scope .canvas-select select {
  /* Compact size — only two short options ("11" x 14"" / "16" x 20""), so we
     trim horizontal padding and cap the width. Frees up space for the FILTERS
     row to fit on the same line on desktop. */
  padding: 10px 26px 10px 10px;
  max-width: 110px;
  border: 1.5px solid var(--dark);
  background: #fff;
  border-radius: 2px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%231a1a1a' d='M5 6L0 0h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.wizard-scope .filter-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wizard-scope .filter-label {
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--dark);
  margin-right: 4px;
  /* Don't let the FILTERS label wrap onto its own line. */
  white-space: nowrap;
}
.wizard-scope .filter-pill {
  padding: 8px 16px;
  background: #fff;
  border: 1.5px solid #888;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--dark);
  cursor: pointer;
  /* Don't shrink the labels — uniform pill widths look much cleaner than
     squashed text on the longer ones (LANDSCAPES, PORTRAITS). */
  white-space: nowrap;
  flex-shrink: 0;
}
.wizard-scope .filter-pill.active {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
}

/* Mobile filter dropdown — hidden by default; revealed at ≤800px (see mobile block).
   Sized to match the screenshot: label above, full-width gray pill select with chevron. */
.wizard-scope .filter-select-mobile {
  display: none;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.wizard-scope .filter-select-mobile label {
  font-size: 13px;
  letter-spacing: 1.5px;
  color: #888;
  font-weight: 400;
}
.wizard-scope .filter-select-mobile select {
  width: 100%;
  padding: 16px 40px 16px 18px;
  border: none;
  background: #efefef;
  border-radius: 6px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--dark);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'><path fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

.wizard-scope .painting-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 800px) { .wizard-scope .painting-grid { grid-template-columns: repeat(2, 1fr); } }
.wizard-scope .painting-card {
  aspect-ratio: 1;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background-size: cover;
  background-position: center;
}
.wizard-scope .painting-card .checkbox {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  background: #fff !important;
  border: none !important;
  border-radius: 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 2;
}
.wizard-scope .painting-card .checkbox svg {
  width: 16px !important;
  height: 16px !important;
  display: none;
  vertical-align: middle;
  overflow: visible;
}
.wizard-scope .painting-card .checkbox svg path {
  stroke: #1a1a1a !important;
  stroke-width: 3 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.wizard-scope .painting-card.selected {
  box-shadow: inset 0 0 0 6px var(--blue);
}
.wizard-scope .painting-card.selected .checkbox {
  background: #fff !important;
  border: none !important;
}
.wizard-scope .painting-card.selected .checkbox svg {
  display: block !important;
}
.wizard-scope .painting-card .expand {
  position: absolute;
  bottom: 8px;
  right: 8px;
  color: #fff;
  font-size: 22px;
  background: rgba(0,0,0,0.4);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.wizard-scope .painting-card .expand:hover {
  background: rgba(0,0,0,0.7);
  transform: scale(1.1);
}
.wizard-scope .painting-card.decide-later {
  background: #3a3a3a;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}
.wizard-scope .painting-card.decide-later .most-popular {
  color: var(--blue);
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.wizard-scope .painting-card.decide-later .decide-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.15;
  color: #fff;
}
.wizard-scope .view-more {
  text-align: center;
  padding: 16px;
  font-size: 14px;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--dark);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.wizard-scope .view-more:hover { color: var(--blue); }
.wizard-scope .view-more::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-right: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue);
  transform: rotate(45deg);
  margin-top: 2px;
  transition: transform 0.2s;
}
.wizard-scope .view-more.expanded::after {
  transform: rotate(-135deg);
  margin-top: 8px;
}
.wizard-scope .view-more.hidden { display: none; }

.wizard-scope .custom-card {
  background: #fff;
  padding: 32px;
  border-radius: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.wizard-scope .custom-card .custom-info { flex: 1; min-width: 280px; }
.wizard-scope .custom-card h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: var(--dark) !important;
  font-family: 'Poppins', sans-serif !important;
  text-transform: uppercase !important;
  background: none !important;
  border: none !important;
  line-height: 1.3 !important;
  text-shadow: none !important;
  text-align: left !important;
}
.wizard-scope .custom-card p {
  color: #555 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400 !important;
  background: none !important;
  text-align: left !important;
  text-transform: none !important;
}
.wizard-scope .custom-card .starts { color: #333 !important; }
.wizard-scope .custom-card .submit-idea-btn {
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  padding: 14px 32px !important;
  border-radius: 2px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  cursor: pointer !important;
  font-family: 'Poppins', sans-serif !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.wizard-scope .custom-card .submit-idea-btn:hover { background: #007ad1 !important; }

/* ============ STEP 5.5: SUBMIT IDEA ============ */
.wizard-scope .idea-card { background: #fff; padding: 40px; border-radius: 2px; }
.wizard-scope .idea-card h3,
.wizard-scope .how-works h3 {
  font-size: 14px !important;
  letter-spacing: 1.5px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  text-transform: uppercase !important;
  font-family: 'Poppins', sans-serif !important;
  background: none !important;
  border: none !important;
  text-align: left !important;
  line-height: 1.3 !important;
  text-shadow: none !important;
}
.wizard-scope .how-works h3 { margin-top: 32px !important; }
.wizard-scope .idea-card .help-text {
  color: #555 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-family: 'Poppins', sans-serif !important;
  background: none !important;
  text-align: left !important;
  font-weight: 400 !important;
}
.wizard-scope .upload-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
}
.wizard-scope .upload-row > label {
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  min-width: 130px !important;
  font-weight: 500 !important;
  color: var(--dark) !important;
  background: none !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}
.wizard-scope .upload-zone {
  flex: 1;
  background: var(--input-bg) !important;
  padding: 14px 20px !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  color: var(--dark) !important;
  border: none !important;
  font-family: 'Poppins', sans-serif !important;
}
.wizard-scope .upload-zone:hover { background: #e0e0e0 !important; }
.wizard-scope .upload-zone .upload-icon {
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wizard-scope .upload-zone .upload-label,
.wizard-scope .upload-zone .browse { text-decoration: underline; }

/* Success state after a file is selected: dark gray background, white text + checkmark */
.wizard-scope .upload-zone.success,
.wizard-scope .upload-zone.success:hover {
  background: #333333 !important;
  color: #ffffff !important;
}
.wizard-scope .upload-zone.success .upload-label {
  color: #ffffff !important;
  text-decoration: underline !important;
}
.wizard-scope .upload-zone.success .upload-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.wizard-scope .how-works ul {
  padding-left: 22px !important;
  margin: 12px 0 !important;
  color: #444 !important;
  list-style-type: disc !important;
  list-style-position: outside !important;
  background: none !important;
}
.wizard-scope .how-works li {
  margin: 8px 0 !important;
  line-height: 1.5 !important;
  font-size: 14px !important;
  color: #444 !important;
  list-style-type: disc !important;
  list-style-position: outside !important;
  display: list-item !important;
  background: none !important;
  padding: 0 !important;
  font-family: 'Poppins', sans-serif !important;
}
.wizard-scope .agree-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}
.wizard-scope .agree-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
  flex-shrink: 0;
}
.wizard-scope .agree-row label {
  cursor: pointer;
  flex: 1;
}

/* ============ STEP 6: REVIEW & PAY ============ */
.wizard-scope .review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 800px) { .wizard-scope .review-grid { grid-template-columns: 1fr; } }
.wizard-scope .review-col h2 {
  font-size: 14px;
  letter-spacing: 1.5px;
  margin: 0 0 16px;
  color: #555;
  font-weight: 700;
}

.wizard-scope .summary-section {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.wizard-scope .summary-section:last-child { border-bottom: none; }
.wizard-scope .summary-section .sec-label {
  font-size: 16px;
  letter-spacing: 1.5px;
  color: var(--dark);
  font-weight: 700;
  margin-bottom: 8px;
}
.wizard-scope .summary-section .edit-link {
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  margin-left: 8px;
  cursor: pointer;
}
.wizard-scope .summary-section .item-title { font-weight: 700; font-size: 16px; margin: 0 0 4px; }
.wizard-scope #rPainting { font-weight: 600; }
.wizard-scope .menu-subhead .serves-note { font-weight: 400; color: #888; }
.wizard-scope .summary-section .item-desc { font-size: 16px; color: #444; margin: 0; line-height: 1.5; }
.wizard-scope .summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  margin: 6px 0;
}
.wizard-scope .summary-totals .summary-line { font-size: 16px; margin: 12px 0; }
.wizard-scope .summary-totals .summary-line strong {
    font-weight: 600;
}
.wizard-scope .summary-totals .discount { color: var(--blue); font-weight: 600; }
.wizard-scope .summary-totals .grand {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 14px;
  font-weight: 700;
  font-size: 18px;
}
.wizard-scope .summary-note { color: #888; font-size: 13px; margin: 4px 0; }
/* Food & beverage minimum prompt inside the Menu & Extras review section. */
.wizard-scope .summary-min-note {
  color: #d8694e;
  font-size: 16px;
  margin: 12px 0 0;
  line-height: 1.5;
}

/* Payment side */
.wizard-scope .secure-banner {
  background: #d4eee4;
  padding: 14px 16px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.wizard-scope .promo-row { display: flex; gap: 8px; }
.wizard-scope .promo-row .input { flex: 1; }
.wizard-scope .promo-row .apply-btn {
  background: var(--dark);
  color: #fff;
  border: none;
  padding: 0 28px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
}
/* Inline status message under the promo input. Hidden when empty so it
   collapses out of the layout instead of leaving an empty gap. .is-error
   colors it red (failed validation, server error); .is-success colors it
   green (valid code applied). */
.wizard-scope .promo-message {
  font-size: 13px;
  margin-top: 6px;
  min-height: 0;
  line-height: 1.4;
}
.wizard-scope .promo-message:empty { display: none; }
.wizard-scope .promo-message.is-error   { color: #d8694e; }
.wizard-scope .promo-message.is-success { color: #2a9d4a; }
.wizard-scope .card-number-wrap { position: relative; }
/* Right padding leaves room for the .card-brand badge (Visa/MC text) inside
   the input on its right edge. */
.wizard-scope .card-number-wrap .input { padding-right: 60px; }
.wizard-scope .card-brand {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  pointer-events: none;
}
.wizard-scope .pay-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.wizard-scope .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0;
  font-size: 12px;
  color: var(--dark);
  line-height: 1.5;
}
.wizard-scope .checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 1px 0 0 0;
  accent-color: var(--blue);
  cursor: pointer;
  flex-shrink: 0;
}
.wizard-scope .checkbox-row label {
  cursor: pointer;
  flex: 1;
  /* Force size against host-theme label rules that may inherit a larger size.
     The label reset higher up doesn't lock font-size, so a host stylesheet
     (e.g. WordPress theme styling every <label>) can leak through. */
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}
.wizard-scope .checkbox-row a { color: var(--blue); text-decoration: none; }
/* Mobile: agreement checkboxes + labels are too small on a phone — enlarge both. */
@media (max-width: 800px) {
  .wizard-scope .checkbox-row { font-size: 15px; gap: 12px; margin: 18px 0; }
  .wizard-scope .checkbox-row label { font-size: 15px !important; line-height: 1.55 !important; }
  .wizard-scope .checkbox-row input[type="checkbox"] { width: 22px; height: 22px; margin-top: 1px; }
}
.wizard-scope .confirm-btn {
  width: 100%;
  background: var(--dark);
  color: #fff;
  border: none;
  padding: 18px 24px;
  margin-top: 32px;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2.5px;
  font-family: 'Poppins', sans-serif;
}
.wizard-scope .confirm-btn:hover:not(:disabled) { background: #333; }
.wizard-scope .confirm-btn:disabled { background: #aaa; cursor: not-allowed; }
.wizard-scope .confirm-btn .amount { font-size: 18px; }
.wizard-scope .prev-btn-pay {
  display: block;
  margin: 24px auto 0;
  padding: 12px 60px;
  background: #fff;
  border: 1.5px solid var(--dark);
  color: var(--dark);
  border-radius: 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
}

.wizard-scope .contact-billing-card {
  background: #fff;
  padding: 32px;
  border-radius: 2px;
  margin-bottom: 16px;
}
.wizard-scope .contact-billing-card h2 {
  text-align: center;
  font-size: 20px;
  letter-spacing: 3px;
  margin: 0 0 24px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
}
.wizard-scope .contact-billing-card .same-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 16px;
}
.wizard-scope .contact-billing-card .same-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--blue);
  cursor: pointer;
}
.wizard-scope .row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.wizard-scope .row-3col {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
}
.wizard-scope .row-3col-wide {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .wizard-scope .row-2col, .wizard-scope .row-3col, .wizard-scope .row-3col-wide { grid-template-columns: 1fr; }
}

/* ============ THANK YOU ============ */
.wizard-scope .thanks {
  text-align: center;
  padding: 60px 20px 40px;
}
.wizard-scope .thanks h1 {
  font-size: 32px;
  font-weight: 500;       /* Poppins Medium, matching the page-header spec */
  letter-spacing: 0;      /* no letter-spacing */
  color: #333;
  margin: 0 0 16px;
  font-family: 'Poppins', sans-serif;
}
.wizard-scope .thanks p { font-size: 15px; color: #444; line-height: 1.6; margin: 4px 0; font-weight: 400; }
.wizard-scope .thanks .ref { font-weight: 700; }
.wizard-scope .thanks .hear {
  margin-top: 48px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
  font-family: 'Poppins', sans-serif;
}
.wizard-scope .thanks select.input {
  max-width: 500px;
  margin: 16px auto 0;
  text-align: left;
  background-color: #fff;
  border: 1.5px solid var(--border);
}
.wizard-scope .thanks select.input:focus {
  border-color: var(--blue);
  background-color: #fff;
}

/* ============ PAINTING LIGHTBOX ============ */
.wizard-scope .lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 999;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.wizard-scope .lightbox.show { display: flex; }
.wizard-scope .lightbox-inner {
  position: relative;
  max-width: 600px;
  width: 100%;
  text-align: center;
}
.wizard-scope .lightbox-image {
  aspect-ratio: 1;
  max-height: 70vh;
  width: auto;
  margin: 0 auto;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.wizard-scope .lightbox-title {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-top: 20px;
  text-transform: uppercase;
}
.wizard-scope .lightbox-close {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 10001;
}
.wizard-scope .lightbox-close:hover { background: rgba(255,255,255,0.3); }
.wizard-scope .lightbox-select {
  margin-top: 24px;
  background: var(--blue);
  color: #fff;
  border: none;
  padding: 14px 40px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
}
.wizard-scope .lightbox-select:hover { background: #007ad1; }

/* ============ GOOGLE PLACES AUTOCOMPLETE DROPDOWN ============ */
/* Google appends the .pac-container suggestion dropdown directly to <body> at
   a default z-index of 1000. Our bottom summary bar uses z-index:2147483647
   (max int) to escape host-theme overlays. Without this rule the address
   suggestions would render BEHIND the summary bar and be unclickable. */
.pac-container { z-index: 2147483648 !important; }

/* ============ BOTTOM SUMMARY BAR ============ */
/* Shows a horizontal row of mini-columns (label on top, value below) along the
   bottom of the viewport. On desktop they wrap if needed; on mobile they scroll
   horizontally as a single row (matching the production mobile design).
   IMPORTANT: the bar is re-parented to <body> at runtime (see updateSummaryBar
   in JS) so it escapes any host-theme wrapper that has transform/filter/will-
   change — those create a containing block and pin position:fixed to it instead
   of the viewport, causing the bar to appear cut off or not full width. Because
   the bar is re-parented, the selectors below DO NOT depend on a .wizard-scope
   ancestor; they target .summary-bar directly. Font family is restated here
   since it can no longer inherit from .wizard-scope. */
.summary-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #2a2a2a;
  color: #fff;
  padding: 14px 24px;
  z-index: 2147483647;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
  border-bottom: 3px solid #2a2a2a;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
  transition: bottom 0.35s ease-out;
}
.summary-bar.show { display: block; }
body.has-summary-bar {
  /* Reserve enough bottom padding so the sticky bar doesn't cover content.
     Dynamic via --summary-bar-height (set by updateSummaryBar()) so the
     reserved space grows when the bar wraps to multiple rows on mobile.
     Falls back to 70px if the var isn't set yet. */
  padding-bottom: calc(var(--summary-bar-height, 70px) + 8px);
}
@media (min-width: 801px) {
  /* Desktop: bar is at the TOP (below nav) so swap padding direction and
     flip the shadow to point downward. */
  body.has-summary-bar { padding-bottom: 0; padding-top: 0; }
  .wizard-scope.has-summary-bar { padding-top: calc(var(--summary-bar-height, 60px) + 8px); }
  .wizard-scope.has-summary-bar .container { padding-bottom: 0; }
  .wizard-scope.has-summary-bar .step[data-step="7"] { padding-bottom: 0; }
  .summary-bar { box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important; }
}

/* When the summary bar is visible, push known bottom-anchored third-party
   widgets up so they sit just ABOVE the bar instead of being covered.
   Each widget uses inline styles set by their JS, so !important is needed
   to override their bottom: 0/14px/etc. defaults.

   --summary-bar-height is set dynamically by updateSummaryBar() based on
   the bar's measured offsetHeight, so the offset is always exactly
   bar-height + 6px breathing room regardless of how tall the bar grows
   (1 row desktop vs 2-3 rows mobile). Falls back to 0px if the var
   isn't set yet — widgets stay at their normal bottom: 0.

   Anti-FOUC: hide widgets via opacity until the JS has measured the bar
   (signaled by html[data-bar-measured]). Klaviyo etc. inject themselves
   async and may render at their default bottom:0 for a few frames before
   our offset is applied — that flash looks like the widget is "jumping"
   into place. Hiding then fading in avoids the visual jank.

   Add more selectors here if the host page injects additional bottom
   widgets (live chat, exit-intent popups, cookie banners, etc.). */
body.has-summary-bar .grecaptcha-badge,
body.has-summary-bar #kustomer-ui-sdk-iframe,
body.has-summary-bar [class*="kustomer-launcher"],
body.has-summary-bar [id*="kustomer-launcher"],
body.has-summary-bar [class*="promo-widget"],
body.has-summary-bar [class*="coupon-banner"],
body.has-summary-bar [id*="promo-widget"],
body.has-summary-bar [id*="coupon-banner"],
/* Klaviyo signup TEASER only (the small bottom-anchored $10 button). The
   hash in the class name (kl-teaser-UZ7Ht3) changes per deployment, so we
   match the kl-teaser- prefix.

   IMPORTANT: do NOT match the broad kl-private-reset-css class — that class
   is on every Klaviyo element including the expanded signup POPUP/modal
   (the full FIRST NAME / EMAIL / ZIP form). Offsetting/hiding that popup
   distorts it. Only the teaser is bottom-anchored and needs repositioning. */
body.has-summary-bar [class^="kl-teaser"],
body.has-summary-bar [class*=" kl-teaser"] {
  bottom: calc(var(--summary-bar-height, 0px) + 6px) !important;
  /* Smooth re-positioning when the bar height changes (rotation, item
     update) rather than a hard jump. */
  transition: bottom 0.15s ease-out, opacity 0.2s ease-out;
}

/* Anti-FOUC: hide widgets until the bar has been measured at least once.
   JS sets html[data-bar-measured="1"] right after the first measurement;
   until then, the widgets are invisible so users never see the bottom:0
   flash before our offset is applied. */
html:not([data-bar-measured]) body.has-summary-bar .grecaptcha-badge,
html:not([data-bar-measured]) body.has-summary-bar #kustomer-ui-sdk-iframe,
html:not([data-bar-measured]) body.has-summary-bar [class*="kustomer-launcher"],
html:not([data-bar-measured]) body.has-summary-bar [id*="kustomer-launcher"],
html:not([data-bar-measured]) body.has-summary-bar [class*="promo-widget"],
html:not([data-bar-measured]) body.has-summary-bar [class*="coupon-banner"],
html:not([data-bar-measured]) body.has-summary-bar [id*="promo-widget"],
html:not([data-bar-measured]) body.has-summary-bar [id*="coupon-banner"],
html:not([data-bar-measured]) body.has-summary-bar [class^="kl-teaser"],
html:not([data-bar-measured]) body.has-summary-bar [class*=" kl-teaser"] {
  opacity: 0 !important;
  visibility: hidden !important;
}
.summary-bar-inner {
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
/* Each item is a single inline pair: gray label, colon, bold white value. */
.summary-bar-item {
  font-size: 14px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-transform: uppercase;
}
.summary-bar-label {
  color: #aaa;
  font-weight: 500;
}
.summary-bar-value {
  color: #fff;
  font-weight: 700;
}
@media (max-width: 800px) {
  .summary-bar {
    /* Uniform side padding per design spec. The "$10 OFF" host badge is
       handled by z-index now (bar sits above it), not by left-padding. */
    padding: 14px 10px;
  }
  /* On mobile, items wrap to additional rows so all 6 stay visible without
     horizontal scrolling. justify-content:center keeps each wrapped row
     centered horizontally — looks balanced when the final row has fewer
     items than the rows above it. */
  .summary-bar-inner {
    justify-content: center;
    gap: 10px 18px;
  }
  .summary-bar-item { font-size: 12px; letter-spacing: 0.3px; }
}

/* ============================================================================
 * MOBILE RESPONSIVE
 * ============================================================================
 * Breakpoints:
 *   ≤ 800px — tablet & phone portrait (most layout collapses here)
 *   ≤ 480px — small phones (tighter spacing, smaller type)
 * Existing 800px/600px rules earlier in this file handle the major grids
 * (datetime, pkg-grid, menu-layout, painting-grid, review-grid, row-2col).
 * Block below fills the gaps and tightens spacing for thumb-sized screens.
 */

@media (max-width: 800px) {
  /* Tighten the outer wrap padding so cards don't lose width to side padding */
  .wizard-scope .wizard-wrap { padding: 0 12px; }
  .wizard-scope { padding-bottom: 24px; }

  /* Tighter card padding on mobile so form fields/cart/menu use more horizontal space.
     Desktop is 40px which eats ~80px of width — too much on a 360-400px viewport. */
  .wizard-scope .card { padding: 24px 16px; }

  /* Progress bar dots wrap naturally on narrow screens via flex.
     Tighten the progress wrap vertical padding. */
  .wizard-scope .progress-wrap { padding: 20px 0 16px; }

  /* Step title: smaller heading + smaller subtitle, less bottom space */
  .wizard-scope .step-title-bar { padding: 4px 8px 20px; }
  .wizard-scope .step-title-bar h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;     /* 120% per Mobile H1 design */
    letter-spacing: 0 !important;
  }
  .wizard-scope .step-title-bar .subtitle {
    font-size: 13px;
    margin-top: 6px;
  }

  /* Inputs / selects: slightly smaller padding to free vertical space on mobile.
     KEEP font-size at 16px even here — anything smaller triggers iOS Safari
     auto-zoom on focus, which jolts the layout every time the user taps a field. */
  .wizard-scope .input,
  .wizard-scope select.input,
  .wizard-scope textarea.input {
    padding: 14px 12px;
    font-size: 16px;
  }

  /* Calendar: a touch tighter, day pills shrink */
  .wizard-scope .cal-header { padding: 12px 16px; }
  .wizard-scope .cal-day {
    width: 36px;
    height: 36px;
    font-size: 14px;
    padding: 6px 0;
  }
  .wizard-scope .cal-day-name { font-size: 12px; padding: 6px 0; }

  /* Time slots: stack to full width so they're easy to tap */
  .wizard-scope .time-slot { font-size: 14px; padding: 14px 12px; }

  /* Menu section header: smaller padding so item count fits comfortably */
  .wizard-scope .menu-section-head { padding: 12px 14px; font-size: 13px; }
  .wizard-scope .menu-main { padding: 12px 10px; }
  /* Menu items: single horizontal line (info | price | control) on mobile, matching
     desktop layout instead of stacking. Tightened gaps and control width so it all
     fits on a 360px-wide viewport. */
  .wizard-scope .menu-item {
    display: grid;
    grid-template-columns: 1fr auto 92px;
    grid-template-areas: "info price control";
    column-gap: 10px;
    row-gap: 0;
    padding: 10px 8px;
    align-items: center;
  }
  .wizard-scope .menu-item-info { grid-area: info; }
  .wizard-scope .menu-item-price { grid-area: price; min-width: 0; }
  .wizard-scope .menu-item .add-btn,
  .wizard-scope .menu-item .qty-stepper {
    grid-area: control;
    width: 92px;
    height: 34px;
  }
  /* Qty stepper buttons: smaller plus/minus so the "+" and "-" don't get clipped
     against the qty number when the stepper is only 92px wide. */
  .wizard-scope .qty-stepper button { padding: 0 8px; font-size: 16px; }
  .wizard-scope .qty-stepper .qty { font-size: 14px; padding: 0 4px; }

  /* Cart sidebar: kill sticky so it doesn't float weirdly when stacked under menu */
  .wizard-scope .menu-cart {
    position: static;
    margin-top: 16px;
  }

  /* Package cards: comfortable padding on small screens */
  .wizard-scope .pkg-card { padding: 20px 16px; }
  /* Package name fits one line on the full-width mobile card — drop the forced break */
  .wizard-scope .pkg-title .pkg-br { display: none; }

  /* Painting filter pills: smaller font, tighter padding */
  .wizard-scope .filter-pill { padding: 6px 12px; font-size: 11px; }
  .wizard-scope .filter-label { font-size: 12px; }

  /* On mobile, hide horizontal filter pills and show the dropdown mirror instead.
     Stack canvas-select + filter-select-mobile vertically, both as label-above
     gray pill selects (matches the provided mobile mockup). */
  .wizard-scope .painting-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .wizard-scope .filter-tabs { display: none; }
  .wizard-scope .filter-select-mobile { display: flex; }
  /* Re-skin canvas-select to match the mobile mockup (label above, full-width gray pill) */
  .wizard-scope .canvas-select {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }
  .wizard-scope .canvas-select label {
    font-size: 13px;
    letter-spacing: 1.5px;
    color: #888;
    font-weight: 400;
  }
  .wizard-scope .canvas-select select {
    width: 100%;
    max-width: none;          /* override desktop max-width:110px so it matches the FILTERS pill */
    color: var(--dark);
    padding: 16px 40px 16px 18px;
    border: none;
    background-color: #efefef;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'><path fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 18px center;
  }

  /* Custom painting card: ensure stacking and remove desktop min-width.
     Desktop uses flex row with min-width:280px on .custom-info; on narrow
     phones the paragraph would shrink to ~150px wide ("Bring / your / own /
     idea / ..." one word per line). Force a vertical stack here. */
  .wizard-scope .custom-card {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 24px 16px;
  }
  .wizard-scope .custom-card .custom-info {
    min-width: 0;
    flex: none;
    width: 100%;
  }
  .wizard-scope .custom-card .submit-idea-btn { width: 100%; }

  /* Contact/Billing card: less padding so fields don't get tiny */
  .wizard-scope .contact-billing-card { padding: 20px 16px; }

  /* Payment row of 3 (exp/cvv/zip) stays as 3 cols (they're small numeric fields)
     but shrink the gap */
  .wizard-scope .pay-row-3 { gap: 8px; }

  /* Confirm button: stack amount under label so neither truncates */
  .wizard-scope .confirm-btn {
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    letter-spacing: 1.5px;
    font-size: 12px;
  }
  .wizard-scope .confirm-btn .amount { font-size: 16px; }

  /* Lightbox: smaller close button, more breathing room */
  .wizard-scope .lightbox { padding: 20px 12px; }
  .wizard-scope .lightbox-close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .wizard-scope .lightbox-image { max-height: 55vh; }

  /* Body padding-bottom rule already in this file at 800px catches summary bar.
     But also ensure normal scroll past the last NEXT button on shorter steps. */
  .wizard-scope .btn-row { margin-bottom: 24px; }
}

@media (max-width: 480px) {
  /* Tightest layer: small phones */
  .wizard-scope .wizard-wrap { padding: 0 10px; }
  .wizard-scope .step-title-bar h1 {
    font-size: 24px !important;
    letter-spacing: 0 !important;
  }
  .wizard-scope .step-title-bar .subtitle { font-size: 12px; }

  /* Progress dots smaller so they all fit a 320px screen */
  .wizard-scope .progress-dot { width: 24px; height: 24px; font-size: 11px; }
  .wizard-scope .progress-dot.small { width: 18px; height: 18px; }

  /* Calendar: larger, readable day cells; viewport sized to a 6-row month at this
     cell size (6*36 + 5*5 gap + 4 pad = 245) so there's no empty gap before AVAILABLE TIMES */
  .wizard-scope .cal-day { width: 36px; height: 36px; font-size: 16px; }
  .wizard-scope .cal-day-name { font-size: 12px; }
  .wizard-scope .cal-scroll { height: 248px; }

  /* Menu cart text more compact */
  .wizard-scope .menu-cart { padding: 16px 14px; }
  .wizard-scope .cart-line { font-size: 12px; }

  /* Custom painting card upload zone: full-width on very small screens */
  .wizard-scope .custom-card .upload-zone { width: 100%; }
}