/* Customer Module CSS - Completely isolated with CSS Modules */
/* This file uses CSS modules for automatic scoping */

.DDx91GkUNnAr7myXU3ad {
  background: white;
  min-height: 100vh;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Embedded/overlay mode - auto height for iframes */
html.overlay-embed-mode .DDx91GkUNnAr7myXU3ad {
  min-height: auto;
  height: auto;
}

html.overlay-embed-mode .m8UociAKQdFtlEhqzYP8 {
  max-width: 100%;
  padding: 16px;
}

html.mobile-overlay-mode .m8UociAKQdFtlEhqzYP8 {
  padding: 12px;
}

html.overlay-embed-mode .hfly3Yxu6iLpDBKUXmXx {
  position: static;
}

.m8UociAKQdFtlEhqzYP8 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.O9Jgit5Z6PSUn6FLA4Va {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.08);
}

.b8WlxeMDpSVdSZBJQ_zt {
  padding: 13px 24px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.18s ease;
  font-family: inherit;
}

.uDe8yzzuRiBtGm56CDd7 {
  background: #1f2937;
  color: white;
  letter-spacing: -0.01em;
}

.uDe8yzzuRiBtGm56CDd7:hover {
  background: #111827;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(31, 41, 55, 0.25);
}

/* ─── Gift Card Layout ─────────────────────────────────── */

.XMvg_SzuhU2bVotxoSuZ {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Preview at the top — full width of the container */
.pq6e14qOPhcsphkPf30Y {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 20px rgba(0,0,0,0.08);
  box-sizing: border-box;
}

/* Constrain the preview card to a sensible width — centered inside the top container */
.smeVFtMcy5gFofmvxJOx {
  width: 100%;
  max-width: 460px;
}

/* Form sections — full width below the preview */
.JKsAM1WJYTCr3QR1cx1t {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Legacy — kept for any existing references, no longer rendered */
.KWuJkSLD8aQlsWwcrHTR {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.R5m9aeQnq19y4tYLf12r {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hfly3Yxu6iLpDBKUXmXx {
  display: none;
}

/* Mobile */
@media (max-width: 768px) {
  .XMvg_SzuhU2bVotxoSuZ {
    padding: 12px 16px;
    gap: 16px;
  }
  .m8UociAKQdFtlEhqzYP8 {
    padding: 16px 12px;
  }
  .O9Jgit5Z6PSUn6FLA4Va {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .XMvg_SzuhU2bVotxoSuZ {
    padding: 8px 12px;
  }
  .m8UociAKQdFtlEhqzYP8 {
    padding: 12px 8px;
  }
  .Ers5rweS46KsMKRikykX {
    padding: 14px;
  }
}

/* ─── Form Sections ───────────────────────────────────── */

.Ers5rweS46KsMKRikykX {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px;
  box-sizing: border-box;
  overflow: visible;
  transition: border-color 0.15s ease;
}

.Ers5rweS46KsMKRikykX:focus-within {
  border-color: #9ca3af;
}

.jNDoE5rukwKxEWW4RmTQ {
  grid-column: 1 / -1;
}

.ipWRi7416CfZyRD7fL4O {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.kg1g4vbWhkxpXWSCi8vF {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #1f2937;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0;
  text-transform: none;
}

/* ─── Amount Buttons ──────────────────────────────────── */

.UVAxDqISdIVoR2ljMPdg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wD70Z45IsKnZn0cQPCeU {
  padding: 11px 20px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1 0 auto;
  min-width: 90px;
  white-space: nowrap;
  text-align: center;
  letter-spacing: -0.01em;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.wD70Z45IsKnZn0cQPCeU:hover {
  border-color: #374151;
  background: #f9fafb;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.RXEPZ0PBPcBYwnP_5FT5 {
  background: #1f2937;
  border-color: #1f2937;
  color: #fff;
  box-shadow: 0 2px 8px rgba(31,41,55,0.22);
}

.RXEPZ0PBPcBYwnP_5FT5:hover {
  background: #111827;
  border-color: #111827;
  box-shadow: 0 4px 14px rgba(31,41,55,0.28);
  transform: translateY(-1px);
}

.CxI5tpHAPOdp_TLJbuwC {
  margin-top: 12px;
}

.s5pZV3znCRjt1Ab61v3O {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 6px;
  display: block;
}

.doEP6l9FwP1F9ziRpUel {
  display: flex;
  align-items: center;
  max-width: 200px;
}

.ai7DseOXXPZZ9yyEhEvm {
  padding: 9px 11px;
  background: #f3f4f6;
  border: 1.5px solid #e5e7eb;
  border-right: none;
  border-radius: 10px 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

/* ─── Form Controls ───────────────────────────────────── */

.PUTy7YqXK5Mti1iRIKxw {
  margin-bottom: 12px;
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
}

.PUTy7YqXK5Mti1iRIKxw:last-child {
  margin-bottom: 0;
}

.Fcg6hEUoZ9c0xXKxKH1d {
  display: flex;
  align-items: center;
  gap: 8px;
}

.Fcg6hEUoZ9c0xXKxKH1d .p1UZPA3FtabiUuMOE40H {
  margin-bottom: 0;
  white-space: nowrap;
  min-width: fit-content;
}

.p1UZPA3FtabiUuMOE40H {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 5px;
  letter-spacing: 0.01em;
}

.odvbuxr16T9ofeI9DACQ {
  width: 100%;
  max-width: none;
  padding: 10px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 400;
  color: #1f2937;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-width: 0;
  box-sizing: border-box;
  font-family: inherit;
}

.odvbuxr16T9ofeI9DACQ:focus {
  outline: none;
  border-color: #374151;
  box-shadow: 0 0 0 3px rgba(31,41,55,0.07);
}

.odvbuxr16T9ofeI9DACQ::placeholder {
  color: #c4c9d4;
  font-weight: 400;
}

.dCUxZrd3jSrtiB0xLkHF {
  border-radius: 0 9px 9px 0;
}

.JtNrCPvv9nEpPr1aqZtA {
  resize: vertical;
  min-height: 64px;
}

.tNzIM30hWldmOArjSWgh {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
  display: block;
}

.lLlemHcPQ3QgZ8YK2t1r {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.axxBpt1lrJjjnf_zN0vf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.lLlemHcPQ3QgZ8YK2t1r .PUTy7YqXK5Mti1iRIKxw,
.axxBpt1lrJjjnf_zN0vf .PUTy7YqXK5Mti1iRIKxw {
  min-width: 0;
  margin-bottom: 0;
}

.lLlemHcPQ3QgZ8YK2t1r .odvbuxr16T9ofeI9DACQ,
.axxBpt1lrJjjnf_zN0vf .odvbuxr16T9ofeI9DACQ {
  min-width: 0;
  width: 100%;
}

@media (max-width: 576px) {
  .lLlemHcPQ3QgZ8YK2t1r,
  .axxBpt1lrJjjnf_zN0vf {
    grid-template-columns: 1fr;
  }
}

/* ─── Radio Options ───────────────────────────────────── */

.rfbrbVCtdKJTCbiqRrMc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jldonFMNHnxU37S4Iw5v {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 8px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.15s ease;
  background: #fff;
}

.jldonFMNHnxU37S4Iw5v:has(.YGlFOiELqiBEqKy88Ss0:checked) {
  border-color: #1f2937;
  background: #f9fafb;
}

.YGlFOiELqiBEqKy88Ss0 {
  width: 15px;
  height: 15px;
  accent-color: #1f2937;
  cursor: pointer;
}

.NPbxDasmvk0pplMZrYSq {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

/* ─── Art Style Grid ──────────────────────────────────── */

.C1Z0hrzBIegiVKvbzuWe {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.s1mMwfmoK_OPAOwPsfVS {
  padding: 8px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.s1mMwfmoK_OPAOwPsfVS:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}

.VBWlZQebVzobaCUKPXxF {
  background: #1f2937;
  border-color: #1f2937;
  color: #fff;
}

.de525vl4JJkYXeMVOktg {
  box-shadow: 0 0 0 2.5px #1f2937;
}

.RqaBb_00tbHbFl0sV8S8 {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  background: #e0e7ff;
  color: #3730a3;
  border-radius: 4px;
}

.ZQgzLGnWmQ5H9Q6gzfMs {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  background: #d1fae5;
  color: #065f46;
  border-radius: 4px;
}

.Eup8M_zVqR8bVawcpd9K {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── Image Upload ────────────────────────────────────── */

.SLPWAQJZkcyGqojST51r {
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s ease;
  background: #fafafa;
}

.SLPWAQJZkcyGqojST51r:hover {
  border-color: #374151;
  background: #f5f5f5;
}

.jDpkWo7b4W76ANgV2Lxr {
  width: 44px;
  height: 44px;
  color: #9ca3af;
  margin-bottom: 10px;
}

.ahUadwjU3uDO2QqusTba {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin: 0 0 4px 0;
}

.SAfVbtqsLcJkvFBz1azG {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
}

.YHH7tarnrFmz5heC1Kqi {
  display: none;
}

/* ─── Image Preview ───────────────────────────────────── */

.x5sOmBfmgnNU8zEW2qof {
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}

.p2bvyJSxODutAEHMlunA {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.WjBUXrcd5YrvcgLbi2CV {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.aftqhvYd4yQ9PLYDmPsP {
  padding: 5px 12px;
  border: 1.5px solid #fca5a5;
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #dc2626;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.aftqhvYd4yQ9PLYDmPsP:hover {
  background: #fef2f2;
  border-color: #ef4444;
}

.vsc9nsKFottJ3_pPu2Vv {
  max-width: 100%;
  max-height: 120px;
  border-radius: 8px;
  object-fit: contain;
  display: block;
  margin-bottom: 10px;
}

.V1W0hrN8xF6Yd1mkg3AE {
  width: 100%;
  padding: 11px 16px;
  border: none;
  border-radius: 10px;
  background: #1f2937;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  letter-spacing: -0.01em;
}

.V1W0hrN8xF6Yd1mkg3AE:hover {
  background: #111827;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(31,41,55,0.25);
}

.V1W0hrN8xF6Yd1mkg3AE:disabled {
  background: #d1d5db;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ─── Processing / Spinner ────────────────────────────── */

.h1E4yZlo5_KFw9UB8MAY {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
}

.e3PEWZxYFUXB_sPVq1qj {
  width: 18px;
  height: 18px;
  border: 2px solid #e5e7eb;
  border-top-color: #1f2937;
  border-radius: 50%;
  animation: m4347aUCjijGtW9DX1QS 0.75s linear infinite;
}

@keyframes m4347aUCjijGtW9DX1QS {
  to { transform: rotate(360deg); }
}

._1uF_y_mPrlqXmiSSzwf {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

/* ─── Success State ───────────────────────────────────── */

.MoJ1qHYkXWYVINLlNdw5 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  color: #065f46;
  font-size: 13px;
  font-weight: 600;
  background: #ecfdf5;
  border-radius: 8px;
}

.Xpfc8ZzjiHsYLwpimhRE {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ─── Error & Status Messages ─────────────────────────── */

.tJBpQuqlrxVbJJtrycom {
  padding: 12px 16px;
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-radius: 10px;
  color: #dc2626;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
}

.o6Zy56No7TaPZFz6GcNA {
  text-align: right;
  padding: 4px 8px;
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 8px;
}

.MvnVSLixCtk3zTgwWi5a {
  color: #d97706;
  font-weight: 500;
}

.y2n2mSj5Gkn2_nY7gFol {
  color: #065f46;
  font-weight: 500;
}

/* ─── Preview Card ────────────────────────────────────── */

.Ko49V9ogFcKUTuWxf5tE {
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.L19DRS1XKgzjQ2oT7vqJ {
  width: 100%;
  aspect-ratio: 1.6;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  position: relative;
  background: #1f2937;
}

.tU1y3cnIjcBpnlLVEwCC {
  background-size: cover;
  background-position: center;
}

.tU1y3cnIjcBpnlLVEwCC::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.28) 0%,
    rgba(0,0,0,0.04) 45%,
    rgba(0,0,0,0.52) 100%
  );
  pointer-events: none;
}

.BBSFP7CDbYDzLA0dFeck {
  position: absolute;
  inset: 0;
  padding: 14px;
  z-index: 1;
}

.k04gZtDTsHj4BcleGUS5 {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 70px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  font-style: italic;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.4);
  line-height: 1.2;
  z-index: 2;
}

.i9uSmtTLxN7CmT37wA4R {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-block;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  padding: 4px 9px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.78rem;
  color: #fff;
  z-index: 2;
}

.lf9YGncSC2gKqq5Fjiy8 {
  position: absolute;
  top: 46px;
  left: 14px;
  height: 26px;
  max-width: 90px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)) brightness(1.05);
  z-index: 2;
}

.yYYljuO_qnImIXBoqpyd {
  position: absolute;
  bottom: 30px;
  left: 10px;
  right: 10px;
  color: rgba(255,255,255,0.92);
  font-size: 0.72rem;
  margin: 0;
  font-style: italic;
  line-height: 1.35;
  text-align: center;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
  padding: 5px 8px;
  border-radius: 5px;
  z-index: 2;
}

.CfcuQPl2fTiop1bvnHeg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 12px;
  background: rgba(0,0,0,0.50);
  backdrop-filter: blur(4px);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 2px;
  text-align: center;
  z-index: 2;
}

.jb4PhssFFmYhxiqoPo7X { display: none; }
.YeGTmpCZa8XPf6VZVjRi  { display: none; }

/* ─── Email Preview ───────────────────────────────────── */

.AazqztrTGhRNlqL9o0eK {
  background: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  max-width: 100%;
}

.ji_TRdVldhHFdRoY5EQW {
  width: 100%;
  padding: 30px 20px 20px 20px;
  text-align: center;
}

.u_kNGvhUHAOFN84ANxeG {
  max-width: 100%;
  width: 400px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.bUCziW8lRNWIkpvp1NQw {
  padding: 10px 40px 40px 40px;
  text-align: center;
}

.vTtWcYS1Hhy1pEYUSuC0 {
  height: 40px;
  max-width: 150px;
  object-fit: contain;
  margin-bottom: 16px;
}

.iM9eVVU5okQREIAeWHXi {
  font-size: 18px;
  letter-spacing: 1px;
  color: #333;
  margin: 0 0 20px 0;
  font-weight: 600;
}

.cqn2uNZb7h6vBS224rTw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 30px;
  border-radius: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  margin-bottom: 20px;
}

._ujT5kPoSblD0n8bInhR {
  display: inline-block;
  background: #1f2937;
  color: #fff;
  padding: 30px 40px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 20px;
}

.tfSO0MWd4gUBXwLdLeKR {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #666;
  margin: 0;
  font-weight: 600;
}

.LxTITIGzcSMmH4u4Jpgh {
  font-family: 'Courier New', Courier, monospace;
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: 2px;
  margin: 0;
}

.PzZ9RV_qKIThVrha7pJu {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin: 0 0 20px 0;
}

.ZcP9ZtXJ5HcVeudb6ZKZ {
  font-size: 13px;
  color: #888;
  font-style: italic;
  margin: 0;
}

/* ─── Submit Button ───────────────────────────────────── */

.VcEyIHGknLJHjbjNMtkz {
  width: 100%;
  padding: 15px 24px;
  border: none;
  border-radius: 11px;
  background: #1f2937;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
  margin-top: 16px;
  letter-spacing: -0.01em;
  font-family: inherit;
}

.VcEyIHGknLJHjbjNMtkz:hover {
  background: #111827;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(31,41,55,0.25);
}

.VcEyIHGknLJHjbjNMtkz:disabled {
  background: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.vl-ab-title{font-size:clamp(32px,4vw,56px);line-height:1.1;font-weight:700;color:#1d1d1b;margin:0 0 24px}.vl-page{font-family:"Helvetica Neue",Helvetica,Inter,Arial,sans-serif;color:#1d1d1b;background:#f0f1eb;margin:0;min-height:100dvh;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;overflow-x:hidden}.vl-page *,.vl-page *::before,.vl-page *::after{box-sizing:border-box}.vl-page img,.vl-page svg{display:block;max-width:100%;height:auto}.vl-page a{color:inherit;text-decoration:none}.vl-page button{font-family:inherit}.vl-loading{min-height:100dvh;display:flex;align-items:center;justify-content:center;font-family:"Helvetica Neue",Helvetica,Inter,Arial,sans-serif;font-size:18px;color:#1d1d1b;opacity:.4;background:#f0f1eb}html{scroll-behavior:smooth}.vl-section{position:relative;width:100%;min-height:100vh;min-height:100dvh;scroll-margin-top:0;overflow:hidden}.vl-section--home{background:#f0f1eb}.vl-section--stations{background:#f2e3d5}.vl-section--faq{background:#f0f1eb}.vl-section--about{background:#d5e4f2}.vl-section--stations{overflow:visible;min-height:max(100dvh,900px)}.vl-home-logo-mark{width:100%;height:auto;display:block}.vl-home-badge{display:flex;flex-direction:column;gap:0}.vl-home-badge-line{font-size:clamp(20px,2.8vw,38px);font-weight:800;line-height:1.1;letter-spacing:-0.02em;color:#1d1d1b;margin:0}.vl-home-tickets{display:inline-flex;align-items:center;justify-content:center;height:clamp(40px,5vw,54px);padding:0 clamp(22px,3vw,34px);border:1.5px solid #1d1d1b;border-radius:999px;font-size:clamp(14px,1vw,16px);font-weight:500;letter-spacing:.3px;color:#1d1d1b;background:rgba(0,0,0,0);white-space:nowrap;transition:background 180ms ease,color 180ms ease}.vl-home-tickets:hover{background:#1d1d1b;color:#f0f1eb}.vl-home-tickets:focus-visible{outline:2px solid #1d1d1b;outline-offset:3px}.vl-home-figure,.vl-home-brand{width:100%;height:auto;display:block}.vl-st-num{font-size:clamp(72px,14vw,200px);font-weight:800;line-height:.85;letter-spacing:-0.03em;margin:0}.vl-st-words{display:flex;flex-wrap:nowrap;gap:0 clamp(12px,2vw,24px);white-space:nowrap;font-size:clamp(32px,5vw,72px);font-weight:800;line-height:1;letter-spacing:-0.02em;margin:0}.vl-st-words .sta{color:#1d1d1b}.vl-st-words .mon{color:rgba(29,29,27,.55)}.vl-st-subtitle{font-size:clamp(16px,1.15vw,19px);font-weight:500;line-height:1.55;margin:0;color:#1d1d1b}.vl-st-trail{position:relative}.vl-st-trail img{width:100%;height:auto}.vl-st-visual{position:relative;display:grid;place-items:center}.vl-st-visual img{width:100%;height:auto;object-fit:contain}.vl-faq-h1{font-size:clamp(28px,3.2vw,44px);font-weight:800;line-height:1;letter-spacing:-0.02em;margin:0}.vl-faq-subhead{font-size:15px;font-weight:700;line-height:1.3;color:#1d1d1b;margin:0}.vl-faq-list{border-top:1px solid #1d1d1b;max-width:880px}.vl-faq-row{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:clamp(16px,2.4vh,24px) 4px;background:rgba(0,0,0,0);border:none;border-bottom:1px solid #1d1d1b;font-size:clamp(16px,1.15vw,19px);font-weight:500;color:#1d1d1b;text-align:left;cursor:pointer;transition:opacity 150ms ease}.vl-faq-row:hover{opacity:.7}.vl-faq-row:focus-visible{outline:2px solid #1d1d1b;outline-offset:-2px}.vl-faq-row .q{flex:1 1 auto}.vl-faq-row .plus{flex:0 0 auto;font-size:clamp(20px,2vw,26px);font-weight:400;line-height:1;transition:transform 220ms ease}.vl-faq-row[aria-expanded=true] .plus{transform:rotate(45deg)}.vl-faq-answer{padding:0 4px clamp(18px,3vh,26px) 4px;font-size:clamp(16px,1.15vw,19px);line-height:1.6;font-weight:400;color:#1d1d1b;opacity:.82;border-bottom:1px solid #1d1d1b;max-width:70ch}.vl-faq-answer p{margin:0 0 1em 0}.vl-faq-answer p:last-child{margin-bottom:0}.vl-faq-answer a{text-decoration:underline}.vl-faq-empty{font-size:clamp(16px,1.15vw,19px);color:rgba(29,29,27,.55);padding:24px 4px;border-top:1px solid #1d1d1b;border-bottom:1px solid #1d1d1b}.vl-ab-visual{position:relative;display:grid;place-items:center}.vl-ab-visual img{width:100%;height:auto;object-fit:cover;aspect-ratio:1/1;clip-path:circle(50% at 50% 50%)}.vl-ab-visual-2{position:relative;display:grid;place-items:center}.vl-ab-visual-2 img{width:100%;height:auto;object-fit:cover;aspect-ratio:1/1;clip-path:polygon(0% 0%, 100% 0%, 50% 100%)}.vl-ab-text p,.vl-ab-text div{font-size:clamp(16px,1.15vw,19px);line-height:1.6;margin:0 0 1em 0;color:#1d1d1b}.vl-ab-text p:last-child,.vl-ab-text div:last-child{margin-bottom:0}.vl-ab-brand{position:relative}.vl-ab-brand img{width:100%;height:auto;opacity:.9}.vl-global-nav{display:flex;align-items:stretch;gap:4px;padding:8px 14px;background:hsla(0,0%,100%,.96);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.08);border-radius:999px;box-shadow:0 10px 28px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06)}.vl-global-nav a{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px clamp(14px,3vw,22px);border-radius:18px;font-size:13px;font-weight:500;color:#1d1d1b;text-decoration:none;transition:opacity 160ms ease;min-width:56px}.vl-global-nav a .vl-nav-ico{display:block;width:22px;height:22px}.vl-global-nav a .vl-nav-ico svg{width:100%;height:100%;display:block}.vl-global-nav a .vl-nav-lbl{line-height:1}.vl-global-nav a:hover{opacity:.7}.vl-global-nav a.is-active{opacity:1;font-weight:600}.vl-global-nav a:focus-visible{outline:2px solid #1d1d1b;outline-offset:2px}body:has(.vl-page--root){background:#f0f1eb;margin:0;padding:0}body:has(.vl-page--root) ._ai_fab{display:none !important}@media(max-width: 768px){.vl-page--root .vl-section{display:flex !important;flex-direction:column !important;align-items:stretch;min-height:auto;padding:20px 16px 28px;gap:14px}.vl-page--root .vl-section>[data-vl-el]{position:static !important;left:auto !important;top:auto !important;right:auto !important;bottom:auto !important;transform:none !important;transform-origin:top left !important;width:100% !important;max-width:100%}.vl-page--root .vl-section--home{min-height:100dvh;padding:18px 18px 110px;gap:0;position:relative !important}.vl-page--root .vl-section--home>[data-vl-el=home_logo]{display:none !important}.vl-page--root .vl-section--home>[data-vl-el=home_badge]{display:none !important}.vl-page--root .vl-section--home>[data-vl-el=home_tickets]{order:1;width:auto !important;align-self:flex-end}.vl-page--root .vl-section--home>[data-vl-el=home_tickets] .vl-home-tickets{border:none;background:rgba(0,0,0,0);height:auto;padding:2px 0;text-decoration:underline;text-underline-offset:4px;font-size:15px;font-weight:500}.vl-page--root .vl-section--home>[data-vl-el=home_tickets] .vl-home-tickets:hover{background:rgba(0,0,0,0);color:#1d1d1b;opacity:.7}.vl-page--root .vl-section--home>[data-vl-el=home_figure]{order:2;width:70% !important;align-self:flex-end;margin-top:8px;margin-right:-8px}.vl-page--root .vl-section--home>[data-vl-el=home_figure] img{width:100%;height:auto;max-height:78vh;object-fit:contain;display:block;margin-left:auto}.vl-page--root .vl-section--home>[data-vl-el=home_brand]{position:absolute !important;left:18px !important;top:50% !important;transform:translateY(-50%) !important;width:38% !important;max-width:170px;z-index:3}.vl-page--root .vl-section--home>[data-vl-el=home_brand] img{width:100%;height:auto;display:block}.vl-page--root .vl-section--stations{min-height:auto;padding:28px 0 90px;gap:8px;overflow:hidden}.vl-page--root .vl-section--stations>[data-vl-el=stations_visual]{display:none !important}.vl-page--root .vl-section--stations>[data-vl-el=stations_num]{order:1;width:auto !important;align-self:flex-start;padding-left:16px;white-space:nowrap}.vl-page--root .vl-section--stations>[data-vl-el=stations_words]{order:2;width:calc(100% - 32px) !important;align-self:flex-start;padding:0 16px;margin-top:-8px;white-space:nowrap;overflow:hidden}.vl-page--root .vl-section--stations>[data-vl-el=stations_subtitle]{order:3;padding:0 16px;margin-bottom:12px}.vl-page--root .vl-section--stations>[data-vl-el=stations_trail]{order:4;width:100% !important;max-width:360px;align-self:center}.vl-page--root .vl-section--stations>[data-vl-el=stations_trail] svg,.vl-page--root .vl-section--stations>[data-vl-el=stations_trail] img{width:100%;height:auto;display:block}.vl-st-num{font-size:clamp(56px,16vw,88px);line-height:.9;font-weight:800}.vl-st-words{font-size:clamp(20px,6vw,36px);line-height:1.05;flex-wrap:nowrap;display:block}.vl-st-words .sta,.vl-st-words .mon{display:inline}.vl-st-subtitle{font-size:clamp(15px,4.2vw,18px)}.vl-page--root .vl-section--faq{min-height:auto;padding:40px 20px 110px;gap:10px}.vl-page--root .vl-section--faq>[data-vl-el=faq_heading]{order:1}.vl-page--root .vl-section--faq>[data-vl-el=faq_subhead]{order:2;margin:4px 0 4px}.vl-page--root .vl-section--faq>[data-vl-el=faq_list]{order:3}.vl-faq-h1{font-size:clamp(40px,11vw,56px);line-height:1}.vl-faq-subhead{font-size:15px;font-weight:700}.vl-faq-row{font-size:16px;padding:14px 4px}.vl-page--root .vl-section--about{min-height:auto;padding:40px 20px 110px;flex-direction:row !important;flex-wrap:wrap !important;align-items:flex-start;gap:12px}.vl-page--root .vl-section--about>[data-vl-el=about_heading]{order:1;flex:0 0 100%;width:100% !important}.vl-page--root .vl-section--about>[data-vl-el=about_body]{order:2;flex:0 0 100%;width:100% !important;margin-bottom:4px}.vl-page--root .vl-section--about>[data-vl-el=about_visual]{display:block !important;order:3;flex:0 0 calc(50% - 6px);width:calc(50% - 6px) !important}.vl-page--root .vl-section--about>[data-vl-el=about_visual_2]{order:3;flex:0 0 calc(50% - 6px);width:calc(50% - 6px) !important}.vl-page--root .vl-section--about>[data-vl-el=about_brand]{order:4;flex:0 0 auto;width:130px !important;margin-left:auto;margin-top:4px}.vl-ab-title{font-size:clamp(32px,9vw,52px);line-height:1.05;margin:0 0 14px}.vl-ab-body{font-size:clamp(15px,4vw,17px);line-height:1.55}.vl-global-nav{padding:6px 8px !important}.vl-global-nav a{padding:6px 10px;font-size:11px;min-width:44px}.vl-global-nav a .vl-nav-ico{width:18px;height:18px}}@media(max-width: 420px){.vl-page--root .vl-section{padding-left:14px;padding-right:14px}}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}html{scroll-behavior:auto}}
/* Viewing Room Modal Styles - Mobile First */

/* Viewing Room Page Container */
.vr-page-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 40px 20px;
  background: #2c2c2c;
  min-height: 100vh;
  color: #fff;
}

.vr-page-header {
  text-align: center;
  margin-bottom: 60px;
}

.vr-page-title {
  font-size: 2.5rem;
  font-weight: 300;
  margin-bottom: 16px;
  letter-spacing: 1px;
}

.vr-page-subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
}

/* Artwork Grid */
.vr-artworks-grid {
  max-width: 1400px;
  margin: 0 auto;
}

.vr-artwork-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 40px;
}

.vr-artwork-image-container {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
}

.vr-artwork-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.vr-artwork-image-container:hover .vr-artwork-image {
  transform: scale(1.02);
}

.vr-artwork-info {
  padding: 20px 0;
}

.vr-artwork-title {
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 8px;
  color: #fff;
}

.vr-artwork-artist {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
}

.vr-artwork-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}

.vr-artwork-category {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-block;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.7);
}

/* Loading and Error States */
.vr-loading-container,
.vr-error-container {
  background-color: #2E2E2E;
  min-height: 100vh;
}

.vr-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: color 0.2s;
  background: transparent;
  border: none;
  padding: 0;
}

.vr-read-more:hover {
  color: #fff;
}

.vr-artwork-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 0 0 40px 0;
}

/* Overlay Modal (Single-click zoom) */
.vr-overlay-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}

.vr-overlay-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Detail Modal (Read more) */
.vr-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 2000;
  overflow-y: auto;
  padding: 16px;
}

.vr-detail-container {
  max-width: 100%;
  margin: 0 auto;
  background: #1a1a1a;
  border-radius: 8px;
  overflow: hidden;
}

.vr-detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 10;
  transition: background 0.2s;
}

.vr-detail-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.vr-detail-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vr-detail-image-container {
  width: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.vr-detail-image {
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.vr-detail-info-container {
  padding: 24px;
}

.vr-tab-buttons {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 24px;
}

.vr-tab-button {
  padding: 12px 24px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.vr-tab-button:hover {
  color: rgba(255, 255, 255, 0.9);
}

.vr-tab-button.active {
  color: #fff;
  border-bottom-color: #fff;
}

.vr-tab-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vr-info-section {
  margin-top: 80px;
}

.vr-metadata-box {
  background-color: #242424;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

/* Typography Tokens */
.vr-heading-xs {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.vr-heading-sm {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
}

.vr-heading-md {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.vr-text-body {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.vr-text-body-lg {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.125rem;
}

.vr-text-muted {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}

.vr-text-primary {
  font-size: 1rem;
  color: #fff;
}

.vr-text-uppercase {
  text-transform: uppercase;
}

.vr-text-capitalize {
  text-transform: capitalize;
}

/* Layout Helpers */
.vr-section {
  margin-bottom: 24px;
}

.vr-stack-sm {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vr-stack-md {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vr-stack-lg {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Metadata Item Components */
.vr-metadata-item {
  margin-bottom: 20px;
}

.vr-metadata-item:last-child {
  margin-bottom: 0;
}

.vr-metadata-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.vr-metadata-value {
  font-size: 1rem;
  color: #fff;
}

/* File Information Grid */
.vr-file-info {
  margin-top: 32px;
}

.vr-file-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}

.vr-file-info-row {
  display: flex;
  gap: 8px;
}

.vr-file-info-label {
  color: rgba(255, 255, 255, 0.5);
  text-transform: capitalize;
  min-width: 100px;
}

.vr-file-info-value {
  color: rgba(255, 255, 255, 0.6);
}

/* Artist Info Sections */
.vr-artist-section {
  margin-bottom: 24px;
}

/* Desktop Styles (≥1024px) */
@media (min-width: 1024px) {
  /* Page Container */
  .vr-page-container {
    padding: 60px 40px;
  }
  
  /* Artwork Grid - Two columns on desktop */
  .vr-artwork-row {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Overlay Modal - Constrain image size */
  .vr-overlay-image {
    max-width: 80vw;
    max-height: 85vh;
  }
  
  /* Detail Modal - Two-column layout */
  .vr-detail-modal {
    padding: 40px;
  }
  
  .vr-detail-container {
    max-width: 1200px;
  }
  
  .vr-detail-content {
    flex-direction: row;
    gap: 40px;
  }
  
  .vr-detail-image-container {
    flex: 0 0 55%;
    max-height: 85vh;
    padding: 40px;
  }
  
  .vr-detail-image {
    max-height: 85vh;
  }
  
  .vr-detail-info-container {
    flex: 1;
    overflow-y: auto;
    max-height: 85vh;
    padding: 40px 40px 40px 0;
  }
  
  .vr-info-section {
    margin-top: 24px;
  }
}

/* Import viewing room modal styles */

/* --ve-page-bg is set on :root by applyBranding() in ModernProductBooking.jsx
   when a product has a landing background colour configured. All outer wrappers
   (html, body, customer-context, customer-app-container) use it so the full
   browser viewport fills the chosen colour — not just the 680px-wide inner
   container. clearBranding() removes it, reverting to the default grey. */
html, body {
  background-color: var(--ve-page-bg, #f8f9fa);
}

/* Order-journey typography scope.
   The order pages (guest data, checkout, both confirmations, reservation
   confirmation, promo error) are standalone inline-styled shells: they do not use
   .customer-context, so none of the tokens above reach them, and several set no font
   at all. Rather than guess at their existing class names, each of those pages opts
   in by adding `ve-journey` to its own root element — so this is the one place a
   product's chosen fonts and text colours reach every heading and every run of body
   text on them.

   Every value falls back to `inherit`/`revert`, so a product with nothing configured
   renders exactly as before. No !important anywhere: inline styles must still win,
   because individual elements legitimately override these (status banners, the
   contrast-checked button label). */
.ve-journey {
  font-family: var(--ve-font-body, inherit);
  color: var(--ve-text-color, inherit);
}

.ve-journey h1,
.ve-journey h2,
.ve-journey h3,
.ve-journey h4,
.ve-journey h5,
.ve-journey h6 {
  font-family: var(--ve-font-heading, var(--ve-font-body, inherit));
  color: var(--ve-heading-color, inherit);
}

/* `revert` (not `inherit`) so an unbranded link keeps the browser's own link colour
   instead of silently turning into body text. */
.ve-journey a {
  color: var(--ve-link-color, revert);
}

/* Shared purchase-journey visual frame (see JourneyFrame.jsx).
   ---------------------------------------------------------------------------
   The backdrop is a fixed, full-viewport layer OUTSIDE the content column. The
   old rule painted the background image on .modern-booking-container — the
   680px card — which is precisely why a background used as a hero looked like a
   cramped thumbnail stuffed into the card instead of artwork behind the page.

   Wallpaper and hero are mutually exclusive: applyBranding only ever sets one of
   --ve-background-image / --ve-hero-image (normalizeProductBranding nulls the
   other), and JourneyFrame additionally pins --ve-background-image to none in
   hero mode. Every value falls back so an unbranded journey renders as before. */
.ve-journey-frame {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* 100vh on a phone is the viewport with the address bar *hidden*, so a
     full-height journey page is taller than what you can actually see and the
     page rubber-bands. dvh tracks the visible viewport. The vh line stays as the
     pre-dvh declaration for older engines — CSS cascade, not a branding value. */
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--ve-background-color, var(--ve-page-bg, #f8f9fa));
  /* The journey's surfaces are whatever the venue chose in Design Studio. A
     mobile UA in automatic dark mode would invert those into colours nobody
     picked, so opt the frame out of being auto-darkened. This declares how the
     existing colours should be interpreted; it sets no colour of its own. */
  color-scheme: light;
  /* Without this, mobile Safari holds a ~300ms double-tap delay on every button
     in the flow — including Pay. Inherited by everything inside the frame. */
  touch-action: manipulation;
}

/* Fixed, not absolute: the wallpaper must stay put on a long checkout rather
   than scrolling away or stretching to the full document height. */
.ve-journey-frame__backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: var(--ve-background-image, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Readability scrim over the wallpaper. Opacity 0 by default, so a product that
   never configured an overlay gets no tint at all. */
.ve-journey-frame__backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, var(--ve-overlay-opacity, 0));
}

/* Hero mode: the image appears exactly once, full width, above the content.
   Rendered only when a hero image exists, so it can never leave an empty band. */
.ve-journey-frame__hero {
  flex: 0 0 auto;
  height: clamp(180px, 32vw, 420px);
  background-image: var(--ve-hero-image, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* One content width for the entire journey. --ve-max-width comes from the
   product's layout mode, so centred/wide still work — they now apply to every
   step instead of only the booking page. The width lives on the content column
   rather than on the card, so pages that keep their own card (the booking page's
   .booking-content) line up with pages that use the shared surface. */
/* The insets keep content clear of the notch, the rounded display corners and
   the home indicator on a modern phone — most visibly the last CTA and the
   footer, which otherwise sit underneath the home bar. `0px` is the value the
   inset already has on a device with no cutout, not an invented default. */
.ve-journey-frame__content {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  width: min(100%, var(--ve-max-width, 680px));
  margin: 0 auto;
  padding:
    24px
    calc(16px + env(safe-area-inset-right, 0px))
    calc(24px + env(safe-area-inset-bottom, 0px))
    calc(16px + env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

/* Shared header band: the logo, any route header controls, and the step
   indicator. Every step used to size and place its own logo (60/200 here,
   60/150 there, none at all on two pages), which is the most visible reason the
   journey read as separate products. One rule now owns it. */
.ve-journey-frame__header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 20px;
}

/* 60px / 200px is the size the journey pages already used; it is the
   stylesheet's own default, not a branding token — the product's Design Studio
   logo sizing applies to the booking page's own logo element, which supplies
   its own max-height through the frame's header slot. */
.ve-journey-frame__logo {
  display: block;
  max-height: 60px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

.ve-journey-frame__progress {
  width: 100%;
}

.ve-journey-frame__main {
  display: block;
}

/* Outside the surface: the footer belongs to the page, not to the card. */
.ve-journey-frame__footer {
  margin-top: 32px;
}

/* The shared card treatment: one radius, one shadow, one background token for
   every step that does not already own a card. */
.ve-journey-frame__surface {
  width: 100%;
  background-color: var(--ve-card-bg, #ffffff);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* Keeps coloured status banners and hero strips inside the rounded corners. */
  overflow: hidden;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Shared journey section styles.

   Every step of the order journey is built from the same three pieces: a
   section panel inset into the card, an optional nested panel inside it, and
   form fields. They used to be re-declared as inline literals on each page
   (`#f8f9fa` fill, `#e9ecef` hairline, `#ced4da` field border), which is how
   the pages ended up as white blocks inside a dark branded card with their
   headings painted white-on-white.

   Defined once here, and painted only from tokens. `--ve-inset-bg` and
   `--ve-hairline` are derived by applyBranding from the palette the venue
   actually configured; when there is no palette, the literals below are the
   ones the pages used before, so an unbranded journey renders unchanged.
   --------------------------------------------------------------------------- */
.ve-panel {
  background-color: var(--ve-inset-bg, #f8f9fa);
  border: 1px solid var(--ve-hairline, #e9ecef);
  border-radius: 12px;
  padding: 24px;
  box-sizing: border-box;
}

/* A panel nested inside a section — one guest's fields, one order line. It sits
   ON the card colour so it reads as raised out of the section around it. */
.ve-subpanel {
  background-color: var(--ve-card-bg, #ffffff);
  border: 1px solid var(--ve-hairline, #dee2e6);
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
}

/* Rules between rows and above totals. Hairline only, never a colour to read. */
.ve-divider-top {
  border-top: 1px solid var(--ve-hairline, #eeeeee);
}

.ve-divider-bottom {
  border-bottom: 1px solid var(--ve-hairline, #eeeeee);
}

/* The field itself follows the card, so a dark palette gets dark fields with
   light text instead of white slabs punched through the design. */
.ve-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--ve-hairline, #ced4da);
  border-radius: 6px;
  background-color: var(--ve-card-bg, #ffffff);
  color: var(--ve-text-color, #212529);
  /* 16px exactly: below this, iOS Safari zooms the page when the field takes
     focus and throws the buyer out of position mid-form. */
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.15s ease-in-out;
  box-sizing: border-box;
}

.ve-input::placeholder {
  color: var(--ve-muted-text-color, #6c757d);
  opacity: 1;
}

/* Hover/focus tint the boundary only; the real focus indicator is the journey
   focus ring declared at the end of this file. */
.ve-input:focus {
  border-color: var(--ve-primary, #007bff);
}

/* Hover for journey call-to-action links and buttons.

   These used to be JS `onMouseOver` handlers assigning `#333` / `#f8f9fa`
   straight onto element.style — an inline write that beats every stylesheet, so
   a branded button reverted to black the moment the pointer touched it. A
   relative brightness shift needs no literal at all, so it works on any palette
   the venue picks, light or dark. */
.ve-cta,
.ve-cta-secondary {
  transition: filter 0.2s ease-in-out;
}

.ve-cta:hover,
.ve-cta-secondary:hover {
  filter: brightness(0.92);
}

/* On a dark palette, darkening reads as "nothing happened" — lift instead. */
@media (prefers-color-scheme: dark) {
  .ve-cta:hover,
  .ve-cta-secondary:hover {
    filter: brightness(1.12);
  }
}

.ve-field-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ve-muted-text-color, #555555);
  margin-bottom: 6px;
}

/* Nothing inside the journey may push the page sideways on a phone. The frame
   is the only element that can enforce this once for every step. */
.ve-journey-frame,
.ve-journey-frame__content,
.ve-journey-frame__main,
.ve-journey-frame__surface {
  max-width: 100%;
  overflow-x: hidden;
}

/* Keyboard focus ring for the journey lives at the END of this file — see
   "journey focus ring" there. It has to be declared after the various
   `.customer-context .form-input:focus { outline: none }` rules, which are more
   specific than a single `.ve-journey-frame` class and would otherwise strip
   the ring straight back off. */

/* Form controls do not inherit the page font — that is a UA default, and it is
   why several journey inputs rendered at 13.33px even though nothing asked for
   a small font. Under 16px, iOS Safari zooms the page when the field takes
   focus. Inline styles still win, so a field that deliberately sets a larger
   size keeps it; this only supplies the floor that was missing. */
.ve-journey-frame input,
.ve-journey-frame select,
.ve-journey-frame textarea {
  font-family: inherit;
  font-size: 1rem;
}

/* Minimum comfortable hit area for anything tappable in the purchase flow.
   Applied at the frame because the controls come from several shared
   components (language toggle, member controls, each page's own buttons) that
   each had their own idea of button size — the journey is the level where "you
   can hit it with a thumb" is a single promise.

   min-height/min-width rather than height: a control that is already larger
   keeps its size, and text that wraps still grows the button.
   Checkboxes and radios are excluded — their box is meant to be small, and the
   hit area belongs to the label wrapping them. */
.ve-journey-frame button,
.ve-journey-frame a[role='button'],
.ve-journey-frame [role='button'],
.ve-journey-frame input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
.ve-journey-frame select,
.ve-journey-frame textarea {
  min-height: 44px;
}

/* Buttons whose label is short (a language code, an icon) still need the width. */
.ve-journey-frame button,
.ve-journey-frame [role='button'] {
  min-width: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .ve-journey-frame *,
  .ve-journey-frame *::before,
  .ve-journey-frame *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 768px) {
  /* Must repeat the insets: this overrides the padding shorthand above, and
     dropping them here would put the notch handling back on desktop only —
     exactly the devices that never have a cutout. */
  .ve-journey-frame__content {
    padding:
      16px
      calc(12px + env(safe-area-inset-right, 0px))
      calc(16px + env(safe-area-inset-bottom, 0px))
      calc(12px + env(safe-area-inset-left, 0px));
  }

  .ve-journey-frame__header {
    gap: 12px;
    margin-bottom: 16px;
  }

  .ve-journey-frame__logo {
    max-height: 48px;
  }
}

/* Inside the full-page frame, the booking container is no longer a page shell:
   the frame owns the background, outer padding, full-height column and surface.
   Keeping those old values would double the padding and create a second card
   inside the shared one. This deliberately excludes overlay, school, event and
   edit-booking flows, which do not render through JourneyFrame. */
.ve-journey-frame .customer-context,
.ve-journey-frame .customer-context .modern-booking-container {
  background-color: transparent;
  background-image: none;
  min-height: 0;
}

.ve-journey-frame .customer-context .modern-booking-container {
  max-width: none;
  margin: 0;
  padding: 0;
  position: static;
  isolation: auto;
}

.ve-journey-frame .customer-context .booking-content {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   EMBEDDED FRAME — the overlay widget, same journey, someone else's page.
   The overlay used to bypass JourneyFrame entirely and hand-roll its own
   chrome, which is how it acquired a second stepper definition and a loose
   footer. It now renders the same frame; only the page-level assumptions are
   withdrawn here. The frame's shared header, progress row, surface and footer
   all still apply, so the controls and spacing cannot drift again.
   ------------------------------------------------------------------------ */
.ve-journey-frame--embedded {
  /* A widget must be as tall as its content: the host page decides the
     viewport, and 100dvh inside an iframe would force a scrollbar. */
  min-height: 0;
  /* No page background either — the embed sits on the host's own surface. */
  background-color: transparent;
}

.ve-journey-frame--embedded .ve-journey-frame__content {
  /* The host controls the width. Keeping the journey's 680px column here would
     letterbox the widget inside an already narrow iframe. */
  width: 100%;
  max-width: none;
  padding:
    16px
    calc(16px + env(safe-area-inset-right, 0px))
    calc(16px + env(safe-area-inset-bottom, 0px))
    calc(16px + env(safe-area-inset-left, 0px));
}

/* One card, not two: the embed's own .booking-content is the card here, so the
   shared surface stays structural. */
.ve-journey-frame--embedded .ve-journey-frame__surface {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.ve-journey-frame--embedded .ve-journey-frame__footer {
  margin-top: 24px;
}

/* ---------------------------------------------------------------------------
   VENUE FOOTER — the last section of the journey, not a slab beneath it.
   Every colour below was previously an inline literal in VenueFooter.jsx
   (#ffffff, #1e293b, #64748b, #f1f5f9, #e2e8f0), including two JS hover
   handlers that wrote colours onto element.style. Inline styles outrank the
   whole cascade, so branding could never reach the footer and a dark venue got
   a white slab under a dark page.

   The surface is `transparent` on purpose: inside the frame the footer sits
   over the page background, so adopting it is what makes the footer read as
   part of the same page. Separation comes from a hairline and spacing, not
   from a competing block of colour. Anything that does need a colour takes it
   from the same --ve-* tokens the rest of the journey uses, each with the
   value it rendered at before as the fallback, so an unbranded venue is
   unchanged.
   ------------------------------------------------------------------------ */
.ve-venue-footer {
  position: relative;
  background-color: transparent;
  color: var(--ve-text-color, #1e293b);
  padding: 48px 24px;
  margin-top: 80px;
  text-align: center;
}

/* Hairlines are drawn with currentColor at low opacity rather than a fixed
   grey. A grey rule is only ever correct on one background; this one is
   legible on a white card and on a dark branded page, and it needs no token
   that Design Studio does not already expose. */
.ve-venue-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: currentColor;
  opacity: 0.16;
}

/* Inside the frame, .ve-journey-frame__footer already supplies the gap above
   and the content column supplies the side padding. */
.ve-venue-footer--embedded {
  padding: 24px;
  margin-top: 0;
}

.ve-venue-footer__inner {
  max-width: 800px;
  margin: 0 auto;
}

.ve-venue-footer__inner--narrow {
  max-width: 1200px;
}

.ve-venue-footer__logo {
  margin-bottom: 24px;
}

.ve-venue-footer__logo img {
  max-height: 60px;
  max-width: 200px;
  object-fit: contain;
}

.ve-venue-footer__name {
  margin: 0 0 12px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ve-heading-color, #1e293b);
  font-family: var(--ve-font-heading, inherit);
}

.ve-venue-footer__text {
  margin: 0 0 16px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ve-muted-text-color, #64748b);
}

.ve-venue-footer__social {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 24px 0;
  flex-wrap: wrap;
}

/* Outlined rather than filled. A #f1f5f9 chip is invisible on a light card and
   a bright blob on a dark one; an outline in currentColor is correct on both,
   and it matches the circular language the guest stepper uses. */
.ve-venue-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid currentColor;
  color: var(--ve-muted-text-color, #64748b);
  transition: color 0.2s ease, transform 0.2s ease;
}

.ve-venue-footer__social-link:hover {
  color: var(--ve-link-color, var(--ve-text-color, #1e293b));
  transform: translateY(-1px);
}

.ve-venue-footer__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 24px;
}

.ve-venue-footer__link {
  font-size: 13px;
  color: var(--ve-link-color, var(--ve-muted-text-color, #64748b));
  /* text-decoration rather than a border-bottom in a fixed grey: it inherits
     the link's own colour, so it can never be a stale #cbd5e1 line under a
     branded link. */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  /* Journey touch floor: the visual text stays 13px, the hit area does not. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.ve-venue-footer__link:hover {
  color: var(--ve-text-color, #1e293b);
}

/* All policy and contact links — Terms, Privacy, email, contact form, etc. —
   live in one centered, wrapping row directly below the company address.
   New links are added via footer_links; the row grows and wraps naturally,
   no layout change required. No divider or top-padding: it is part of the
   address block, not a separate legal section. */
.ve-venue-footer__page-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 24px;
  margin-bottom: 20px;
}

/* T&C / Privacy links use the venue link and body-font tokens, so they remain
   part of the same brand system as the email/footer treatment rather than
   falling through to browser anchor styling. */

.ve-venue-footer__legal-link {
  font-size: 13px;
  font-family: var(--ve-font-body);
  font-weight: 500;
  /* No fallback: --ve-link-color is guaranteed by the branding resolver
     (explicit link colour, else the venue's text colour). If it is ever
     missing, that is a resolver bug to fix — not something to paper over. */
  color: var(--ve-link-color);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.ve-venue-footer__legal-link:hover {
  color: var(--ve-link-color);
  opacity: 0.75;
}

.ve-venue-footer__legal-sep {
  font-size: 13px;
  font-family: var(--ve-font-body);
  color: var(--ve-muted-text-color);
  user-select: none;
}

/* #94a3b8 on white measured 2.56:1 — under the 4.5:1 floor for 13px text on
   every step of the journey. The muted token's own fallback (#64748b) measures
   4.76:1, so the line still reads as secondary without being unreadable. */
.ve-venue-footer__copyright {
  margin: 0;
  font-size: 13px;
  color: var(--ve-muted-text-color, #64748b);
}

@media (max-width: 768px) {
  .ve-venue-footer {
    padding: 32px 16px;
    margin-top: 48px;
  }

  .ve-venue-footer--embedded {
    padding: 20px 0 0;
    margin-top: 0;
  }
}

/* Customer-specific styles - scoped to prevent conflicts */
/* The --customer-* tokens below are the page's own defaults.  Each one that a
   product's Design Studio can control is expressed as var(--ve-x, <default>),
   so setting a --ve-* custom property re-colours every rule that already used
   the token — no extra selectors, no !important, and no change in appearance
   for products with nothing configured. */
/* The token definitions are declared for the journey frame as well as for
   .customer-context. JourneyFrame lifts shared chrome (the step indicator, the
   logo, the footer) out of .customer-context, and a custom property that is not
   in scope makes the whole declaration invalid at computed-value time — the
   colour silently falls back to `inherit`, which is how the progress steps went
   from light-on-dark to unreadable dark-on-dark. Declarations only; the frame
   keeps its own typography and background. */
.customer-context,
.ve-journey-frame {
  --customer-primary: var(--ve-primary, #000000);
  --customer-secondary: var(--ve-secondary, #6b7280);
  --customer-success: #10b981;
  --customer-warning: #f59e0b;
  --customer-danger: #ef4444;
  --customer-bg: #f5f5f5;
  --customer-white: #ffffff;
  --customer-text: var(--ve-text-color, #1f2937);
  /* #9ca3af measured 2.5:1 on the white card — under the 4.5:1 floor, and the
     reason the "GUESTS / PAY / DONE" steps were barely legible. #6b7280 is the
     next stop on the same grey ramp and measures 4.83:1. Only the default
     changes: a venue that sets --ve-muted-text-color still wins. */
  --customer-text-light: var(--ve-muted-text-color, #6b7280);
  --customer-border: #e5e7eb;
  --customer-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.customer-context {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: var(--ve-page-bg, #f8f9fa);
}

.customer-app-container {
  min-height: 100vh;
  background-color: var(--ve-page-bg, #f8f9fa);
}

/* Modern Booking Container
   --ve-* custom properties are set at runtime by applyBranding() in
   ModernProductBooking.jsx.  When unset, each var() falls back to the
   existing --customer-* token or a static default, preserving current
   appearance for products that have no custom branding configured. */
.customer-context .modern-booking-container {
  max-width: var(--ve-max-width, 680px);
  margin: 0 auto;
  padding: 24px 16px;
  background: var(--ve-background-color, var(--customer-bg));
  background-image: none;
  min-height: 100vh;
  font-family: var(--ve-font-body, 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  color: var(--ve-text-color, #333);
  position: relative;
  /* Stacking context so ::before z-index:-1 stays inside the container
     and cannot bleed below the page background */
  isolation: isolate;
}

/* Background overlay — --ve-overlay-opacity is 0 by default (invisible).
   z-index:-1 keeps the overlay behind all in-flow content within the
   isolation context established on the container. */
.customer-context .modern-booking-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  pointer-events: none;
  z-index: -1;
}

/* ========================================
   DATE PICKER - Full-Width Clickable Control
   ======================================== */

.customer-context .date-picker-container {
  display: flex;
  justify-content: center;
  margin: 0 auto 20px auto;
  padding: 0 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  isolation: isolate;
}

.customer-context .date-picker-wrapper {
  display: block;
  width: 100%;
  max-width: 320px;
  position: relative;
  cursor: pointer;
}

.customer-context .date-picker-input {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  text-align: center;
  color: #1a1a1a;
  background: #f5f5f7;
  border: 1px solid #d2d2d7;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.customer-context .date-picker-input:focus {
  outline: none;
  background: #e8e8ed;
  border-color: #007aff;
}

.customer-context .date-picker-input.is-empty {
  color: #666;
}

.customer-context .date-picker-input::-webkit-datetime-edit-text,
.customer-context .date-picker-input::-webkit-datetime-edit-month-field,
.customer-context .date-picker-input::-webkit-datetime-edit-day-field,
.customer-context .date-picker-input::-webkit-datetime-edit-year-field {
  color: inherit;
}

.customer-context .date-picker-input.is-empty::-webkit-datetime-edit-text,
.customer-context .date-picker-input.is-empty::-webkit-datetime-edit-month-field,
.customer-context .date-picker-input.is-empty::-webkit-datetime-edit-day-field,
.customer-context .date-picker-input.is-empty::-webkit-datetime-edit-year-field {
  color: transparent;
}

.customer-context .date-picker-input::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.customer-context .date-picker-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #666;
  font-size: 15px;
  font-weight: 500;
  pointer-events: none;
  z-index: 2;
  background: #ececf1;
  padding: 4px 12px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Booking Header Row - contains progress steps and account button */
/* Each rule below is also matched inside JourneyFrame's progress slot. The step
   indicator now lives in the shared frame header rather than inside
   .customer-context, and without the second selector it loses its flex layout
   entirely and stacks one step per line. Same declarations, one source. */
.customer-context .booking-header-row,
.ve-journey-frame__progress .booking-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--customer-border);
  gap: 16px;
}

/* In the frame the row is the header band itself, so it must not add the
   booking page's inner bottom margin on top of the header's own gap. */
.ve-journey-frame__progress .booking-header-row {
  margin-bottom: 0;
}

.customer-context .header-account-slot,
.ve-journey-frame__progress .header-account-slot {
  flex-shrink: 0;
}

/* Progress Steps */
.customer-context .progress-steps,
.ve-journey-frame__progress .progress-steps {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.customer-context .progress-step,
.ve-journey-frame__progress .progress-step {
  font-size: 12px;
  font-weight: 500;
  color: var(--customer-text-light);
  letter-spacing: 0.3px;
  padding: 0 8px;
}

.customer-context .progress-step.active,
.ve-journey-frame__progress .progress-step.active {
  color: var(--customer-text);
  font-weight: 600;
  position: relative;
}

.customer-context .progress-step.active::after,
.ve-journey-frame__progress .progress-step.active::after {
  content: '';
  position: absolute;
  bottom: -21px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ve-primary, var(--customer-primary));
}

.customer-context .progress-divider,
.ve-journey-frame__progress .progress-divider {
  width: 24px;
  height: 1px;
  background: var(--customer-border);
}

/* Header text colour: in the frame the row sits on the page backdrop, which in
   background mode is the product's own image or colour. --ve-header-text is the
   token Design Studio already uses for this row on the booking page. */
.ve-journey-frame__progress .progress-step {
  color: var(--ve-header-text, var(--customer-text-light));
}

.ve-journey-frame__progress .progress-step.active {
  color: var(--ve-header-text, var(--customer-text));
}

/* Main Content */
.customer-context .booking-content {
  background: var(--ve-card-bg, var(--customer-white));
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Heading colour and font — set via --ve-heading-color / --ve-font-heading by applyBranding() */
.customer-context .modern-booking-container h1,
.customer-context .modern-booking-container h2,
.customer-context .modern-booking-container h3,
.customer-context .modern-booking-container h4 {
  color: var(--ve-heading-color, var(--customer-text));
  font-family: var(--ve-font-heading, inherit);
}

/* Header row background/text — set via --ve-header-bg / --ve-header-text by applyBranding() */
.customer-context .modern-booking-container .booking-header-row {
  background: var(--ve-header-bg, transparent);
}

.customer-context .modern-booking-container .progress-step,
.customer-context .modern-booking-container .ve-progress-step {
  color: var(--ve-header-text, var(--customer-text-light));
}

.customer-context .modern-booking-container .progress-step.active,
.customer-context .modern-booking-container .ve-progress-step.active {
  color: var(--ve-header-text, var(--customer-text));
}

/* Text colour cascade — these selectors are more specific than the container-level
   color rule so they must reference --ve-text-color explicitly.  Falls back to the
   existing --customer-text value so appearance is unchanged when no branding is set. */
.customer-context .modern-booking-container .product-description,
.customer-context .modern-booking-container .info-label,
.customer-context .modern-booking-container .info-value,
.customer-context .modern-booking-container .guest-info p,
.customer-context .modern-booking-container .total-amount,
.customer-context .modern-booking-container .price-display,
.customer-context .modern-booking-container .quantity-value,
.customer-context .modern-booking-container .form-group label,
.customer-context .modern-booking-container .section-header p,
.customer-context .modern-booking-container .guest-info h3 {
  color: var(--ve-text-color, var(--customer-text));
}

.customer-context .section-header {
  margin-bottom: 20px;
}

.customer-context .section-header h1 {
  font-size: 24px;
  font-weight: 600;
  color: var(--customer-text);
  margin-bottom: 8px;
}

.customer-context .section-header p {
  font-size: 14px;
  color: var(--customer-text-light);
  margin: 0;
}

.customer-context .section-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--customer-text);
  margin-bottom: 6px;
}

.customer-context .section-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--customer-text);
  margin-bottom: 4px;
}

/* Product Info Section */
.customer-context .hero-image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 24px;
}

.customer-context .product-description {
  margin-bottom: 24px;
  color: var(--customer-text);
  line-height: 1.6;
}

.customer-context .product-info-section {
  margin: 24px 0;
  padding: 20px;
  /* --customer-bg is a fixed light grey, so this rule used to pin one box in
     the middle of a branded journey to #f5f5f5 — and being two classes deep it
     outranked the shared panel styles. The configured surface wins when there
     is one; the old grey stays as the fallback for unbranded venues. */
  background: var(--ve-inset-bg, var(--customer-bg));
  border-radius: 8px;
}

/* Shared journey surfaces restated at this rule's specificity so a page can opt
   a legacy `.product-info-section` box into the branded panel treatment. */
.customer-context .ve-panel {
  background-color: var(--ve-inset-bg, #f8f9fa);
  border: 1px solid var(--ve-hairline, #e9ecef);
  border-radius: 12px;
  padding: 24px;
}

.customer-context .ve-subpanel {
  background-color: var(--ve-card-bg, #ffffff);
  border: 1px solid var(--ve-hairline, #dee2e6);
  border-radius: 8px;
  padding: 20px;
}

.customer-context .product-info-section h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--customer-text);
  margin-bottom: 16px;
}

.customer-context .info-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.customer-context .info-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.customer-context .info-label {
  font-weight: 600;
  color: var(--customer-text);
  min-width: 120px;
}

.customer-context .info-value {
  color: var(--customer-text);
  flex: 1;
}

/* Messages */
.customer-context .info-message {
  padding: 12px 16px;
  background: #dbeafe;
  border-left: 4px solid #3b82f6;
  border-radius: 4px;
  color: var(--customer-text);
  margin: 16px 0;
}

.customer-context .error-message {
  padding: 12px 16px;
  background: #fee2e2;
  border-left: 4px solid #dc3545;
  border-radius: 4px;
  color: #dc2626;
  margin: 16px 0;
}

.customer-context .field-error {
  display: block;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 4px;
}

/* Guest Selection Row - CSS Grid for cross-browser alignment */
.customer-context .guest-selection-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px auto;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid #f0f0f0;
}

.customer-context .guest-selection-row:last-child {
  border-bottom: none;
}

.customer-context .guest-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.customer-context .guest-info h3 {
  font-size: 18px;
  font-weight: 500;
  color: var(--customer-text);
  margin: 0;
  line-height: 1.2;
}

.customer-context .guest-info p {
  font-size: 14px;
  color: var(--customer-text-light);
  margin: 0;
  line-height: 1.4;
}

.customer-context .guest-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.customer-context .price-display {
  font-size: 16px;
  color: var(--customer-text);
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

.customer-context .quantity-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The one definition of the guest stepper, for every route.
   ---------------------------------------------------------------------------
   This used to be `background: var(--customer-white)` — a hardcoded #ffffff
   with no --ve- bridge — under `color: var(--customer-text)`, which IS bridged
   to --ve-text-color. A venue with light body text therefore rendered a
   near-white glyph on a permanently white disc, and the +/- controls simply
   were not there. The surface and the glyph must come from the same contract.

   They come from the CTA pair (--ve-btn-bg / --ve-btn-text), the same tokens
   .proceed-btn uses: incrementing a guest count is a real action, so it should
   read with the same weight as the venue's primary button, and the two tokens
   are already chosen to contrast each other. The fallbacks are the CTA's own
   fallbacks, so an unbranded venue gets a stepper that matches its unbranded
   Proceed button rather than a third, unrelated grey. */
.customer-context .quantity-btn {
  width: 44px;
  height: 44px;
  /* min-* as well as width/height: the frame's 44px floor is a min-height, and
     a route-level `width` would otherwise be free to shrink the target back. */
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  background: var(--ve-btn-bg, var(--customer-primary));
  color: var(--ve-btn-text, #ffffff);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* brightness() rather than a second colour: any venue's CTA colour lightens
   correctly under it, so hover needs no token of its own. */
.customer-context .quantity-btn:hover:not(:disabled) {
  filter: brightness(1.12);
}

.customer-context .quantity-btn:active:not(:disabled) {
  transform: scale(0.94);
}

/* A disabled stepper is judged against the CARD, not against its own fill —
   it no longer has a fill. Using --ve-btn-text here (the on-CTA colour) is the
   trap: on a venue whose CTA is dark, that is white, and a white glyph on the
   card is invisible all over again. The muted body token is the card-relative
   one, and it is the same token the rest of the journey's secondary text uses. */
.customer-context .quantity-btn:disabled {
  background: transparent;
  border-color: var(--ve-muted-text-color, var(--customer-text-light));
  color: var(--ve-muted-text-color, var(--customer-text-light));
  cursor: not-allowed;
}

/* Composition Picker — card-based family ticket selection */
/* UI UX PRO MAX: touch-action manipulation, min-height ≥44pt, 150ms transitions, ARIA radio */
.customer-context .composition-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.customer-context .composition-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 16px;
  min-height: 72px;
  border: 1.5px solid var(--customer-border);
  border-radius: 10px;
  background: var(--customer-white);
  cursor: pointer;
  touch-action: manipulation;
  text-align: left;
  font-family: inherit;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
  width: 100%;
  box-sizing: border-box;
}

.customer-context .composition-card:hover {
  border-color: var(--customer-primary);
}

.customer-context .composition-card:focus-visible {
  outline: 2px solid var(--customer-primary);
  outline-offset: 2px;
}

.customer-context .composition-card--selected {
  border: 2px solid var(--customer-primary);
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.customer-context .composition-card-types {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.customer-context .composition-card-type {
  font-size: 15px;
  font-weight: 500;
  color: var(--customer-text);
  line-height: 1.4;
}

.customer-context .composition-card--selected .composition-card-type {
  font-weight: 600;
}

.customer-context .composition-card-price {
  font-size: 13px;
  color: var(--customer-text-light);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

@media (max-width: 480px) {
  .customer-context .composition-picker {
    gap: 8px;
  }
  .customer-context .composition-card {
    padding: 12px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-context .composition-card {
    transition: none;
  }
}

.customer-context .quantity-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--customer-text);
  min-width: 24px;
  text-align: center;
}

.customer-context .divider {
  height: 1px;
  background: var(--customer-border);
  margin: 24px 0;
}

/* Total Section */
.customer-context .total-section {
  margin: 40px 0;
}

.customer-context .total-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.customer-context .total-label h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--customer-text);
  margin: 0 0 4px 0;
}

.customer-context .total-label p {
  font-size: 14px;
  color: var(--customer-text-light);
  margin: 0;
}

.customer-context .total-amount {
  font-size: 32px;
  font-weight: 700;
  color: var(--customer-text);
}

/* Action Section */
.customer-context .action-section {
  margin-top: 40px;
  text-align: right;
}

.customer-context .proceed-btn {
  background: var(--ve-btn-bg, var(--customer-primary));
  color: var(--ve-btn-text, white);
  border: none;
  border-radius: 12px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 200px;
}

.customer-context .proceed-btn:hover {
  background: var(--ve-btn-bg, #333333);
  filter: brightness(0.88);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.customer-context .proceed-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Error Message */
.customer-context .error-message {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 14px;
}

/* Loading State */
.customer-context .loading-state {
  text-align: center;
  padding: 60px 20px;
}

.customer-context .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--customer-border);
  border-top: 3px solid var(--customer-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Error State */
.customer-context .error-state {
  text-align: center;
  padding: 60px 20px;
}

.customer-context .error-state h2 {
  color: var(--customer-danger);
  margin-bottom: 16px;
}

.customer-context .btn-secondary {
  background: var(--customer-white);
  color: var(--customer-primary);
  border: 1px solid var(--customer-border);
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.customer-context .btn-secondary:hover {
  border-color: var(--customer-primary);
  background: var(--customer-primary);
  color: white;
}

/* Guest Form Styles */
.customer-context .guest-form-section {
  margin-bottom: 32px;
}

.customer-context .guest-form-section h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--customer-text);
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--customer-border);
}

.customer-context .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 16px;
}

.customer-context .form-group {
  display: flex;
  flex-direction: column;
}

.customer-context .form-group label {
  font-size: 14px;
  font-weight: 500;
  color: var(--customer-text);
  margin-bottom: 8px;
}

.customer-context .form-input {
  padding: 12px 16px;
  border: 1px solid var(--customer-border);
  border-radius: 8px;
  font-size: 16px;
  background: var(--customer-white);
  transition: border-color 0.2s ease;
}

.customer-context .form-input:focus {
  outline: none;
  border-color: var(--customer-primary);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.customer-context .form-input:required {
  border-left: 3px solid var(--customer-primary);
}

.customer-context .action-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--customer-border);
}

@media (max-width: 768px) {
  .customer-context .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .customer-context .action-section {
    flex-direction: column;
    gap: 16px;
  }
  
  .customer-context .proceed-btn,
  .customer-context .btn-secondary {
    width: 100%;
  }
  
  /* Mobile-friendly booking container */
  .customer-context .modern-booking-container {
    padding: 20px 12px;
  }
  
  /* Mobile-friendly booking content */
  .customer-context .booking-content {
    padding: 20px;
    border-radius: 12px;
  }
  
  /* Mobile-friendly booking header. Mirrored onto the frame's progress slot for
     the same reason as the desktop rules above: the row is no longer inside
     .customer-context on the journey pages. */
  .customer-context .booking-header-row,
  .ve-journey-frame__progress .booking-header-row {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
  }

  .ve-journey-frame__progress .booking-header-row {
    margin-bottom: 0;
  }

  .customer-context .booking-header-row .progress-steps,
  .ve-journey-frame__progress .booking-header-row .progress-steps {
    order: 2;
    width: 100%;
  }

  .customer-context .booking-header-row .header-account-slot,
  .ve-journey-frame__progress .booking-header-row .header-account-slot {
    order: 1;
    margin-left: auto;
  }

  /* Mobile-friendly progress steps */
  .customer-context .progress-steps,
  .ve-journey-frame__progress .progress-steps {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0;
  }
  
  .customer-context .progress-step,
  .ve-journey-frame__progress .progress-step {
    font-size: 11px;
    padding: 0 6px;
    white-space: nowrap;
  }
  
  .customer-context .progress-divider,
  .ve-journey-frame__progress .progress-divider {
    width: 20px;
    flex-shrink: 0;
  }
  
  /* Mobile-friendly guest selection */
  .customer-context .guest-selection-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    padding: 20px 0;
  }
  
  .customer-context .guest-info {
    grid-column: 1;
    grid-row: 1;
  }
  
  .customer-context .price-display {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  
  .customer-context .guest-controls {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-end;
  }
  
  /* Mobile-friendly section headers */
  .customer-context .section-header h1 {
    font-size: 20px;
  }
  
  .customer-context .section-header p {
    font-size: 14px;
  }

  /* Mobile add-ons (non-overlay). The price + stepper were one inline flex row,
     so on a narrow phone the "− 1 +" stepper pushed past the panel's right edge.
     Fix grounded in ui-ux-pro-max (searched: --domain ux / --domain web):
       - horizontal-scroll (High): wrap the row so the controls drop onto their
         own full-width line below — uses vertical space, can never exceed the
         viewport width, so the stepper stays inside the panel.
       - content-priority: name + description stay on top; price + stepper below.
       - alignment: the price stays flush-right on its OWN line so its last digit
         lands on the same vertical edge as the guest price and the order total
         (both sit at the panel's right edge in this layout). The overlay grid's
         [price | stepper] side-by-side would shift the price left of that edge,
         so it is deliberately NOT reused here.
       - number-tabular: tabular figures + nowrap so the price never wraps.
       - touch-target-size (High): 44x44 buttons. touch-spacing (Med): 8px gap.
       - tap-delay (Med): touch-action: manipulation. press-feedback: :active.
     Scoped to non-overlay so the overlay-mode grid is untouched; !important
     beats the component's inline styles (same convention the overlay rules use). */
  html:not(.mobile-overlay-mode) .customer-context .addon-content {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  html:not(.mobile-overlay-mode) .customer-context .addon-details {
    min-width: 0 !important;
  }

  html:not(.mobile-overlay-mode) .customer-context .addon-controls {
    flex: 0 0 100% !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 12px !important;
  }

  html:not(.mobile-overlay-mode) .customer-context .addon-controls .addon-price {
    white-space: nowrap !important;
  }

  html:not(.mobile-overlay-mode) .customer-context .addon-controls .quantity-controls {
    gap: 8px !important;
  }

  /* Size and press feedback are the shared stepper's own, on every route and
     every breakpoint — an add-on stepper is the same control as a guest
     stepper. The `background: var(--customer-primary) !important; color: #fff`
     press state that used to live here was a third opinion about what the
     control looks like, and the only one that ignored --ve-btn-text. */
}

/* Customer product booking styles */
.customer-context .booking-container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 24px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--customer-text);
  background: var(--customer-bg);
  min-height: 100vh;
}

.customer-context .booking-header {
  margin-bottom: 32px;
  text-align: center;
}

.customer-context .booking-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #2c3e50;
}

.customer-context .booking-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #5D6975;
  max-width: 800px;
  margin: 0 auto 20px;
}

.customer-context .booking-card {
  background: var(--customer-white);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--customer-shadow);
  margin-bottom: 24px;
}

.customer-context .booking-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 4px;
}

.customer-context .booking-tab {
  flex: 1;
  padding: 12px 24px;
  text-align: center;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
  font-weight: 500;
}

.customer-context .booking-tab.active {
  background: var(--customer-primary);
  color: white;
}

.customer-context .booking-tab:not(.active) {
  color: var(--customer-text-light);
}

/* Customer form styles */
.customer-context .customer-form-group {
  margin-bottom: 20px;
}

.customer-context .customer-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--customer-text);
}

.customer-context .customer-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--customer-border);
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s;
}

.customer-context .customer-input:focus {
  outline: none;
  border-color: var(--customer-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.customer-context .customer-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.customer-context .customer-btn-primary {
  background: var(--customer-primary);
  color: white;
}

.customer-context .customer-btn-primary:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.customer-context .customer-btn-secondary {
  background: var(--customer-white);
  color: var(--customer-primary);
  border: 1px solid var(--customer-border);
}

.customer-context .customer-btn-secondary:hover {
  border-color: var(--customer-primary);
}

/* Fix for EventDetailPage: Override legacy stepper CSS that hides form children */
.customer-context .booking-content form > * {
  display: block !important;
}

/* ==========================================================================
   OVERLAY EMBED MODE - Full screen white background for iframe embeds
   Applied when ?overlay=true is in the URL
   ========================================================================== */

html.overlay-embed-mode,
html.overlay-embed-mode body,
html.overlay-embed-mode body.customer-body {
  background: #ffffff !important;
  background-color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
}

html.overlay-embed-mode .customer-context,
html.overlay-embed-mode .customer-app-container,
html.overlay-embed-mode #root,
html.overlay-embed-mode #root > div {
  background: #ffffff !important;
  background-color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  max-width: none !important;
  width: 100% !important;
  box-shadow: none !important;
  border: none !important;
}

html.overlay-embed-mode .modern-booking-container {
  background: #ffffff !important;
  max-width: none !important;
  width: 100% !important;
  padding: 16px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: auto !important;
}

html.overlay-embed-mode .booking-content {
  background: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

html.overlay-embed-mode .progress-steps {
  margin: 0 0 16px 0 !important;
  padding: 0 0 16px 0 !important;
}

html.overlay-embed-mode .back-to-products,
html.overlay-embed-mode a[href*="All Products"],
html.overlay-embed-mode .breadcrumb {
  display: none !important;
}

/* ==========================================================================
   WHITNEY MUSEUM MOBILE OVERLAY - Apple HIG (16-20px margins)
   Applied when mobile=true AND overlay=true
   Reference: transact.whitney.org ticket booking
   ========================================================================== */

/* CRITICAL: Override the overlay-embed-mode padding:0 with proper Whitney margins */
html.mobile-overlay-mode .modern-booking-container {
  padding: 16px 20px !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html.mobile-overlay-mode .booking-content {
  padding: 0 !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Style header controls in mobile overlay - keep My Account visible */
html.mobile-overlay-mode .modern-booking-container > div:first-child {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 8px 0 !important;
  margin-bottom: 16px !important;
  background: transparent !important;
}

/* Whitney Step Navigation - Horizontal Text with Checkmark */
html.mobile-overlay-mode .progress-steps {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 0 0 16px 0 !important;
  margin: 0 0 24px 0 !important;
  border-bottom: 1px solid #e9ecef !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html.mobile-overlay-mode .progress-step {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #868e96 !important;
  white-space: nowrap !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

html.mobile-overlay-mode .progress-step.active {
  font-weight: 700 !important;
  color: #212529 !important;
  background: transparent !important;
}

html.mobile-overlay-mode .progress-step.completed::before {
  content: '\2713 ' !important;
  color: #212529 !important;
}

html.mobile-overlay-mode .progress-divider {
  display: none !important;
}

/* Whitney Main Heading */
html.mobile-overlay-mode .product-info-section {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 32px 0 !important;
}

html.mobile-overlay-mode .product-info-section h1,
html.mobile-overlay-mode .product-name {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #212529 !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
  text-transform: uppercase !important;
}

/* Whitney Section Headers */
html.mobile-overlay-mode .booking-content h3,
html.mobile-overlay-mode .section-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #212529 !important;
  margin: 24px 0 8px 0 !important;
}

html.mobile-overlay-mode .section-description {
  font-size: 14px !important;
  color: #6c757d !important;
  margin: 0 0 16px 0 !important;
}

/* ==========================================================================
   WHITNEY GRID SYSTEM - Strict Alignment
   High specificity to override .customer-context base styles
   ========================================================================== */

/* Guest Selection Row - Grid layout */
html.mobile-overlay-mode .customer-context .guest-selection-row,
html.mobile-overlay-mode.customer-context .guest-selection-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #e9ecef !important;
}

/* Guest Controls - price and stepper, right aligned.
   The stepper's own width is set by the shared definition, so this no longer
   pins a 132px track sized for the old square control. */
html.mobile-overlay-mode .customer-context .guest-controls,
html.mobile-overlay-mode.customer-context .guest-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

/* Price display - fixed width, right aligned for digit alignment.
   Colour intentionally absent: it belongs to the shared .price-display rule,
   which is bridged to --ve-text-color. Restating #212529 here is what made the
   overlay ignore branding. */
html.mobile-overlay-mode .customer-context .price-display,
html.mobile-overlay-mode.customer-context .price-display {
  font-size: 16px !important;
  font-weight: 400 !important;
  text-align: right !important;
  min-width: 84px !important;
  font-variant-numeric: tabular-nums !important;
}

/* Quantity Controls Container - layout only.
   -------------------------------------------------------------------------
   Everything that used to live below this rule (a `:first-child` minus button,
   a bordered `.quantity-value` cell and a `:last-child` plus button, each with
   `!important` #ffffff surfaces, #212529 borders and `border-radius: 0`) has
   been deleted rather than re-tokened. It was a second, contradictory
   definition of a control that already has one: the same stepper rendered as a
   white segmented box here and as a circle everywhere else, and neither could
   follow the venue's branding. The shared definition now applies on every
   route, so the overlay only says how the row is laid out. */
html.mobile-overlay-mode .customer-context .quantity-controls,
html.mobile-overlay-mode.customer-context .quantity-controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   WHITNEY DATE BUTTON - 44px minimum touch target
   ========================================================================== */
html.mobile-overlay-mode .customer-context .date-selector button,
html.mobile-overlay-mode .customer-context .time-slot-selector button,
html.mobile-overlay-mode .customer-context [class*="date"] button,
html.mobile-overlay-mode .customer-context [class*="slot"] button,
html.mobile-overlay-mode.customer-context .date-selector button,
html.mobile-overlay-mode.customer-context .time-slot-selector button,
html.mobile-overlay-mode .whitney-date-button,
html.mobile-overlay-mode.customer-context .whitney-date-button,
.whitney-date-button {
  min-height: 44px !important;
  height: auto !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  border: 1px solid #212529 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #212529 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  width: auto !important;
  text-align: left !important;
}

/* ==========================================================================
   WHITNEY ADDON CARDS - Grid aligned with ticket rows
   ========================================================================== */

html.mobile-overlay-mode .addon-item,
html.mobile-overlay-mode .whitney-addon-card {
  display: block !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #e9ecef !important;
  background: transparent !important;
}

html.mobile-overlay-mode .addon-item:last-child {
  border-bottom: none !important;
}

/* Addon header with checkbox */
html.mobile-overlay-mode .addon-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

html.mobile-overlay-mode .addon-checkbox {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  border-radius: 4px !important;
}

html.mobile-overlay-mode .addon-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #212529 !important;
}

html.mobile-overlay-mode .addon-description {
  font-size: 14px !important;
  color: #6c757d !important;
  margin: 4px 0 0 0 !important;
}

/* Addon Controls Row - Grid: [Price 100px] [Qty Controls 132px] right-aligned */
html.mobile-overlay-mode .customer-context .addon-controls,
html.mobile-overlay-mode.customer-context .addon-controls {
  display: grid !important;
  grid-template-columns: 100px 132px !important;
  gap: 12px !important;
  justify-content: end !important;
  align-items: center !important;
  margin-top: 12px !important;
}

/* Addon Price - right aligned, same width as ticket prices for digit alignment */
html.mobile-overlay-mode .customer-context .addon-price,
html.mobile-overlay-mode.customer-context .addon-price,
html.mobile-overlay-mode .customer-context .whitney-price-amount,
html.mobile-overlay-mode.customer-context .whitney-price-amount {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #28a745 !important;
  text-align: right !important;
  width: 100px !important;
  min-width: 100px !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

/* CRITICAL: Prevent addon layout shift when selected */
html.mobile-overlay-mode .customer-context .addon-item.selected,
html.mobile-overlay-mode.customer-context .addon-item.selected,
html.mobile-overlay-mode .customer-context .whitney-addon-card.selected,
html.mobile-overlay-mode.customer-context .whitney-addon-card.selected {
  display: block !important;
  padding: 16px 0 !important;
  background: transparent !important;
}

html.mobile-overlay-mode .customer-context .addon-item.selected .addon-controls,
html.mobile-overlay-mode.customer-context .addon-item.selected .addon-controls {
  display: grid !important;
  grid-template-columns: 100px 132px !important;
  gap: 12px !important;
  justify-content: end !important;
  align-items: center !important;
  margin-top: 12px !important;
}

/* Whitney Upsell Box */
html.mobile-overlay-mode .upsell-box,
html.mobile-overlay-mode .membership-upsell {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid #e9ecef !important;
}

html.mobile-overlay-mode .upsell-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #212529 !important;
}

html.mobile-overlay-mode .upsell-subtitle {
  font-size: 14px !important;
  color: #6c757d !important;
}

html.mobile-overlay-mode .upsell-btn,
html.mobile-overlay-mode .upgrade-btn {
  padding: 12px 24px !important;
  border: 1px solid #212529 !important;
  background: #ffffff !important;
  color: #212529 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

/* Whitney Summary Section - Grid aligned with prices above */
html.mobile-overlay-mode .customer-context .order-summary,
html.mobile-overlay-mode.customer-context .order-summary,
html.mobile-overlay-mode .customer-context .price-summary,
html.mobile-overlay-mode.customer-context .price-summary {
  padding: 20px 0 !important;
  border-top: 1px solid #e9ecef !important;
  margin-top: 24px !important;
  background: transparent !important;
}

/* Total Section - single line layout */
html.mobile-overlay-mode .customer-context .total-section,
html.mobile-overlay-mode.customer-context .total-section {
  margin: 24px 0 !important;
  padding-top: 16px !important;
  border-top: 1px solid #e9ecef !important;
}

/* Total Row - Grid: [Labels] [Amount right-aligned] */
html.mobile-overlay-mode .customer-context .total-row,
html.mobile-overlay-mode.customer-context .total-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 16px !important;
  align-items: baseline !important;
  padding: 0 !important;
}

html.mobile-overlay-mode .customer-context .total-label,
html.mobile-overlay-mode.customer-context .total-label {
  display: block !important;
}

html.mobile-overlay-mode .customer-context .total-label h3,
html.mobile-overlay-mode.customer-context .total-label h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #212529 !important;
  margin: 0 !important;
}

html.mobile-overlay-mode .customer-context .total-label p,
html.mobile-overlay-mode.customer-context .total-label p {
  font-size: 12px !important;
  color: #6c757d !important;
  margin: 2px 0 0 0 !important;
}

/* Total Amount - SINGLE LINE, right aligned */
html.mobile-overlay-mode .customer-context .total-amount,
html.mobile-overlay-mode.customer-context .total-amount,
html.mobile-overlay-mode .customer-context .whitney-price-amount.total-amount,
html.mobile-overlay-mode.customer-context .whitney-price-amount.total-amount {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #212529 !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

/* Whitney Primary CTA - Full Width Black Button */
html.mobile-overlay-mode .checkout-button,
html.mobile-overlay-mode .cta-button,
html.mobile-overlay-mode .proceed-button,
html.mobile-overlay-mode button.primary,
html.mobile-overlay-mode .btn-primary {
  display: block !important;
  width: 100% !important;
  padding: 18px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  background: #212529 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  margin-top: 24px !important;
  -webkit-tap-highlight-color: transparent !important;
}

html.mobile-overlay-mode .checkout-button:disabled,
html.mobile-overlay-mode .cta-button:disabled,
html.mobile-overlay-mode .proceed-button:disabled {
  background: #adb5bd !important;
  cursor: not-allowed !important;
}

/* Hide decorative elements in mobile */
html.mobile-overlay-mode .hero-image,
html.mobile-overlay-mode .product-image-container,
html.mobile-overlay-mode .product-info-section > div[style*="background-image"] {
  display: none !important;
}

/* Proper text colors */
html.mobile-overlay-mode p {
  color: #6c757d !important;
}

html.mobile-overlay-mode a {
  color: #212529 !important;
  text-decoration: underline !important;
}
/* ============================================================
   TIMESLOT AVAILABILITY GRID
   ------------------------------------------------------------
   States come from booking_controller.ex `availability_state`:
     high      -> green   (good availability)
     low       -> amber   (limited availability)
     sold_out  -> red     (not bookable)

   All interaction states live here in CSS. Hover/selection must
   NEVER be applied by mutating element.style from a React mouse
   handler: `e.target` resolves to whichever child node the
   pointer is over, so the colour lands on an inner text row and
   the matching mouseleave (fired from a different child) never
   clears it, leaving stranded grey blocks on the card.

   Status is encoded three ways so it never depends on colour
   alone: a left accent bar, a status dot, and the status text.
   ============================================================ */

.ve-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

/* Busy days use progressive disclosure, not a nested scroll area: customers
   see enough choices to decide quickly, then explicitly reveal the remainder.
   This button follows the same card-relative token system as the journey and
   has the 44px mobile touch floor required for a control below a dense grid. */
.ve-slot-disclosure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  padding: 10px 16px;
  border: 1px solid var(--ve-muted-text-color, #64748b);
  border-radius: 10px;
  background: transparent;
  color: var(--ve-link-color, var(--ve-text-color, #1e293b));
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.ve-slot-disclosure:hover {
  background-color: color-mix(in srgb, var(--ve-card-bg, #ffffff) 88%, var(--ve-muted-text-color, #64748b));
}

.ve-slot-disclosure:active {
  transform: scale(0.99);
}

.ve-slot-disclosure:focus-visible,
.calendar-picker__month-button:focus-visible,
.calendar-picker__clear-date:focus-visible {
  outline-color: var(--ve-link-color, #1a4fd6);
  outline-style: solid;
  outline-width: 3px;
  outline-offset: 3px;
}

/* Calendar controls are deliberately classes rather than per-element inline
   colours. That leaves every visual value reachable by the journey tokens and
   gives keyboard/touch controls a consistent, measured target size. */
.calendar-picker__month-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--ve-muted-text-color, #64748b);
  border-radius: 8px;
  background: transparent;
  color: var(--ve-link-color, var(--ve-text-color, #1e293b));
  font: inherit;
  font-size: 1.125rem;
  cursor: pointer;
  touch-action: manipulation;
}

.calendar-picker__month-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.calendar-picker__clear-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ve-muted-text-color, #64748b);
  font: inherit;
  font-size: 1.25rem;
  cursor: pointer;
  touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
  .ve-slot-disclosure {
    transition: none;
  }
}

.ve-slot {
  /* 44px is the accessible minimum; three stacked rows land well above it. */
  min-height: 88px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  width: 100%;
  margin: 0;
  padding: 12px 14px 12px 20px;
  border: 1px solid #d5dae1;
  border-radius: 10px;
  background-color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Left accent bar — the positional cue that carries state without colour. */
.ve-slot::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 8px;
  width: 4px;
  border-radius: 2px;
  background-color: #9aa3ad;
}

.ve-slot__time {
  font-size: 1rem;
  font-weight: 600;
  color: #14181d;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.ve-slot__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: #444c55;
}

.ve-slot__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}

.ve-slot__price {
  font-size: 0.875rem;
  font-weight: 600;
  color: #14181d;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* ---- Green: good availability ---- */
.ve-slot--high { border-color: #a9dfbd; background-color: #f4fcf7; }
.ve-slot--high::before { background-color: #15803d; }
.ve-slot--high .ve-slot__status { color: #146c33; }   /* 5.4:1 on #f4fcf7 */
.ve-slot--high:hover { border-color: #15803d; background-color: #e9f8ef; }

/* ---- Amber: limited availability ---- */
.ve-slot--low { border-color: #f2d38a; background-color: #fffaef; }
.ve-slot--low::before { background-color: #a45b06; }
.ve-slot--low .ve-slot__status { color: #8a4c04; }    /* 6.1:1 on #fffaef */
.ve-slot--low:hover { border-color: #a45b06; background-color: #fdf3de; }

/* ---- Red: sold out (not bookable) ---- */
.ve-slot--sold_out {
  border-color: #f0bfbf;
  background-color: #fdf5f5;
  cursor: not-allowed;
}
.ve-slot--sold_out::before { background-color: #b3261e; }
.ve-slot--sold_out .ve-slot__status { color: #a01b14; }  /* 6.3:1 on #fdf5f5 */
.ve-slot--sold_out .ve-slot__time,
.ve-slot--sold_out .ve-slot__price { color: #5d5555; }

/* Disabled slots keep full text contrast — they must stay readable,
   so no opacity fade is applied. */
.ve-slot:disabled { cursor: not-allowed; }

/* ---- Selected ---- */
.ve-slot.is-selected {
  border-color: #1a4fd6;
  box-shadow: 0 0 0 3px rgba(26, 79, 214, 0.28);
}
.ve-slot.is-selected .ve-slot__time { color: #143d9e; }
.ve-slot.is-selected .ve-slot__time::after {
  content: " \2713";
  font-weight: 700;
}

.ve-slot:focus-visible {
  outline: 3px solid #1a4fd6;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ve-slot { transition: none; }
}

@media (prefers-contrast: more) {
  .ve-slot { border-width: 2px; }
  .ve-slot::before { width: 6px; }
}

/* ---------------------------------------------------------------------------
   Journey focus ring
   ---------------------------------------------------------------------------
   Declared last, and with the frame class repeated, on purpose.

   The rules above include several `.customer-context .form-input:focus {
   outline: none }` variants. Those are three-class specificity, so a plain
   `.ve-journey-frame :focus-visible` lost to them and the ring computed to
   `outline-width: 0` — the audit caught keyboard focus being invisible on the
   guest and payment fields. Repeating the class matches their specificity, and
   being last in the file wins the tie. No `!important` needed.

   Colour comes from the venue's own primary token, falling back to
   `currentColor` — the text colour already on the element — rather than a
   colour we invented.

   Longhands, not the `outline:` shorthand. A shorthand containing var() is
   stored as "pending substitution" and is dropped wholesale if substitution
   does not resolve cleanly — which is exactly what happened: buttons computed
   `outline-style: solid; outline-width: 0px`, so the ring was declared but
   never drawn. Setting the three longhands separately keeps the width even
   when the colour token is absent. */
.ve-journey-frame.ve-journey-frame.ve-journey-frame :focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-color: var(--ve-primary, currentColor);
  outline-offset: 2px;
}

.customer-context .school-booking-wizard .product-info-section{background-color:var(--customer-white);border:1px solid var(--customer-border);border-radius:12px;padding:24px;margin-bottom:24px}.customer-context .school-booking-wizard .product-title{font-size:1.75rem;font-weight:700;margin:0 0 16px 0;color:var(--customer-text);line-height:1.2;word-break:break-word}.customer-context .school-booking-wizard .product-description{font-size:1rem;color:var(--customer-secondary);line-height:1.6;margin:0}.customer-context .school-booking-wizard .section-header{margin-top:24px;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--customer-border)}.customer-context .school-booking-wizard .section-header h2{font-size:1.25rem;font-weight:600;color:var(--customer-text);margin:0 0 4px 0}.customer-context .school-booking-wizard .section-header p{font-size:.875rem;color:var(--customer-secondary);margin:0}.customer-context .school-booking-wizard .form-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:1px solid var(--customer-border)}.customer-context .school-booking-wizard .form-row:last-child{border-bottom:none}.customer-context .school-booking-wizard .form-label-group{flex:0 0 200px;min-width:0}.customer-context .school-booking-wizard .form-label-group h3{font-size:.9375rem;font-weight:500;color:var(--customer-text);margin:0 0 4px 0}.customer-context .school-booking-wizard .form-label-group p{font-size:.8125rem;color:var(--customer-secondary);margin:4px 0 0 0}.customer-context .school-booking-wizard .form-label-group .required{color:var(--customer-danger);margin-left:2px}.customer-context .school-booking-wizard .form-controls{flex:1;min-width:0;max-width:100%}.customer-context .school-booking-wizard .form-input{width:100%;max-width:400px;padding:12px 16px;border:1px solid var(--customer-border);border-radius:8px;font-size:16px;color:var(--customer-text);background:var(--customer-white);transition:border-color .2s ease,box-shadow .2s ease;box-sizing:border-box}.customer-context .school-booking-wizard .form-input:focus{outline:none;border-color:var(--customer-primary);box-shadow:0 0 0 3px rgba(0,0,0,.1)}.customer-context .school-booking-wizard .form-input::placeholder{color:var(--customer-text-light)}.customer-context .school-booking-wizard .form-input-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:400px}.customer-context .school-booking-wizard .form-select{width:100%;max-width:400px;padding:12px 16px;border:1px solid var(--customer-border);border-radius:8px;font-size:16px;color:var(--customer-text);background-color:var(--customer-white);transition:border-color .2s ease,box-shadow .2s ease;box-sizing:border-box;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27M2 5l6 6 6-6%27/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:16px 12px;padding-right:40px}.customer-context .school-booking-wizard .form-select:focus{outline:none;border-color:var(--customer-primary);box-shadow:0 0 0 3px rgba(0,0,0,.1)}.customer-context .school-booking-wizard .error-message{background-color:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:var(--customer-danger);padding:16px;margin-top:16px;font-size:.875rem}.customer-context .school-booking-wizard .action-section{margin-top:24px;padding-top:16px}.customer-context .school-booking-wizard .proceed-btn{width:100%;max-width:400px;padding:16px 24px;border:none;border-radius:8px;background:var(--customer-primary);font-size:1rem;font-weight:600;color:var(--customer-white);cursor:pointer;transition:all .2s ease}.customer-context .school-booking-wizard .proceed-btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px);box-shadow:var(--customer-shadow)}.customer-context .school-booking-wizard .proceed-btn:disabled{background:var(--customer-secondary);cursor:not-allowed;transform:none}@media(max-width: 768px){.customer-context .school-booking-wizard .form-row{flex-direction:column;gap:8px}.customer-context .school-booking-wizard .form-label-group{flex:none;width:100%}.customer-context .school-booking-wizard .form-controls{width:100%}.customer-context .school-booking-wizard .form-input,.customer-context .school-booking-wizard .form-select,.customer-context .school-booking-wizard .form-input-grid,.customer-context .school-booking-wizard .proceed-btn{max-width:100%}.customer-context .school-booking-wizard .form-input-grid{grid-template-columns:1fr}.customer-context .school-booking-wizard .product-title{font-size:1.5rem}.customer-context .school-booking-wizard .product-info-section{padding:16px}}@media(max-width: 480px){.customer-context .school-booking-wizard .product-info-section{padding:12px;margin-bottom:16px}.customer-context .school-booking-wizard .section-header{margin-top:16px}.customer-context .school-booking-wizard .section-header h2{font-size:1.125rem}.customer-context .school-booking-wizard .form-row{padding:12px 0}.customer-context .school-booking-wizard .form-label-group h3{font-size:.875rem}}

/*# sourceMappingURL=customer.css.map*/