/* ============================================================
   Axe Arena – Booking Wizard CSS
   Dark themed, step-by-step layout matching the reference UI
   ============================================================ */

:root {
  --axwiz-primary:    var(--aa-pub-primary,  #FF6B35);
  --axwiz-accent:     var(--aa-pub-accent,   #FFB347);
  --axwiz-bg:         var(--aa-pub-bg,       #0f1117);
  --axwiz-surface:    var(--aa-pub-surface,  #1a1d27);
  --axwiz-border:     #2e3248;
  --axwiz-text:       var(--aa-pub-text,     #E8EAF0);
  --axwiz-muted:      #7B8099;
  --axwiz-radius:     var(--aa-pub-radius,   12px);
  --axwiz-green:      #10B981;
  --axwiz-purple:     #8B5CF6;
  /* Customisable exterior border & outline accent points */
  --axwiz-ext-border: #2e3248;
  --axwiz-stepper-line: #6366F1;  /* connector lines between step dots */
  --axwiz-outline:    #6366F1;   /* step-dot border rings + input focus */
  /* Customisable border/outline thickness (1px | 2px | 3px) */
  --axwiz-ext-border-width: 2px;
  --axwiz-outline-width:    2px;
  /* Customisable summary font sizes */
  --axwiz-sum-label-size: 11px;
  --axwiz-sum-val-size:   16px;
  --axwiz-sum-row-size:   14px;
  --axwiz-sum-total-size: 28px;
}

/* ── Outer responsive container ────────────────────────── */
.axwiz-outer {
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  /* Fullscreen overrides applied via body.axearena-plugin-page in public.css */
}

/* ── Main wrapper ──────────────────────────────────────── */
.axwiz-wrap {
  /* Flexbox with full vendor-prefix chain for maximum browser support */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: 0;
  background: var(--axwiz-bg);
  border-radius: var(--axwiz-radius);
  overflow: hidden;
  min-height: 560px;
  /* Full font stack: iOS, Android, Windows, Linux */
  font-family: var(--aa-pub-font-body, 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif);
  color: var(--axwiz-text);
  box-shadow: 0 4px 32px rgba(0,0,0,.35);
  border: var(--axwiz-ext-border-width) solid var(--axwiz-ext-border);
  max-width: 1040px;
  margin: 0 auto;
  /* Prevent iOS Safari from auto-resizing text on rotation */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Sidebar ───────────────────────────────────────────── */
.axwiz-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--axwiz-sidebar);
  border-right: 1px solid var(--axwiz-border);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Sidebar must scroll independently so a tall logo/brand block
     never pushes step labels or the selected-service summary
     below the visible area (axwiz-wrap clips with overflow:hidden) */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,107,53,.3) transparent;
}
.axwiz-sidebar::-webkit-scrollbar { width: 3px; }
.axwiz-sidebar::-webkit-scrollbar-track { background: transparent; }
.axwiz-sidebar::-webkit-scrollbar-thumb { background: rgba(255,107,53,.3); border-radius: 2px; }

.axwiz-brand {
  margin-bottom: 20px;       /* was 28px — trimmed so steps always visible */
  font-size: .95rem;
  font-weight: 700;
  color: var(--axwiz-text);
  line-height: 1.2;
  flex-shrink: 0;            /* prevent flex from squishing the brand block */
}

.axwiz-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.axwiz-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: default;
  transition: background .2s;
}

.axwiz-step.active {
  background: rgba(255,107,53,.12);
}

.axwiz-step.completed {
  cursor: pointer;
}

.axwiz-step.completed:hover {
  background: rgba(255,255,255,.05);
}

.axwiz-step-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #222536;
  border: var(--axwiz-outline-width) solid var(--axwiz-stepper-line, var(--axwiz-outline, #6366F1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: var(--axwiz-muted);
  flex-shrink: 0;
  transition: all .25s;
}

.axwiz-step.active .axwiz-step-dot {
  background: var(--axwiz-primary);
  border-color: var(--axwiz-primary);
  color: #fff;
}

.axwiz-step.completed .axwiz-step-dot {
  background: var(--axwiz-green);
  border-color: var(--axwiz-green);
  color: #fff;
}

.axwiz-step-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--axwiz-muted);
  line-height: 1.2;
}

.axwiz-step.active .axwiz-step-label {
  color: var(--axwiz-text);
}

.axwiz-step-line {
  width: 2px;
  height: 20px;
  background: var(--axwiz-stepper-line, #6366F1);
  margin: 0 0 0 29px;
  opacity: .45;
}

/* Mini summary in sidebar after step 1 */
.axwiz-selected-summary {
  margin-top: 24px;
  padding: 12px;
  background: rgba(255,107,53,.08);
  border: 1px solid rgba(255,107,53,.2);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.axwiz-selected-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--axwiz-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  color: #fff;
  flex-shrink: 0;
}

.axwiz-selected-name {
  font-size: .8rem;
  font-weight: 700;
  color: var(--axwiz-text);
  line-height: 1.3;
}

.axwiz-selected-meta {
  font-size: .72rem;
  color: var(--axwiz-muted);
  margin-top: 2px;
}

/* ── Main content ──────────────────────────────────────── */
.axwiz-content {
  flex: 1;
  min-width: 0;
  background: var(--axwiz-surface);
  display: flex;
  flex-direction: column;
}

/* ── Panels ────────────────────────────────────────────── */
.axwiz-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  padding: 28px 32px;
  animation: axwizFadeIn .22s ease;
}

.axwiz-panel.active {
  display: flex;
}

/* Payment step can be tall — make it scroll so terms are never clipped */
#axwiz-panel-4 {
  overflow-y: auto;
  overflow-x: hidden;
}

@keyframes axwizFadeIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.axwiz-panel-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--axwiz-text);
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--axwiz-border);
}

/* ── Service grid ──────────────────────────────────────── */
.axwiz-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  flex: 1;
}

.axwiz-service-card {
  display: flex;
  background: #1e2230;
  border: 2px solid var(--axwiz-border);
  border-radius: var(--axwiz-radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s, transform .18s, box-shadow .18s;
  position: relative;
}

.axwiz-service-card:hover {
  border-color: rgba(255,107,53,.5);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
}

.axwiz-service-card.selected {
  border-color: var(--axwiz-primary);
  box-shadow: 0 0 0 1px var(--axwiz-primary), 0 6px 24px rgba(255,107,53,.2);
}

/* Card media (left strip with image or icon) */
.axwiz-card-media {
  width: 88px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.axwiz-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.axwiz-card-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* Card body (right side) */
.axwiz-card-body {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.axwiz-card-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  justify-content: space-between;
}

.axwiz-card-name {
  font-size: var(--axwiz-card-title-size, 1rem);
  font-weight: 700;
  color: var(--axwiz-text);
  margin: 0;
  line-height: 1.2;
  flex: 1;
}

.axwiz-card-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.axwiz-card-desc {
  font-size: var(--axwiz-card-desc-size, .82rem);
  color: var(--axwiz-muted);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.axwiz-pkg-services {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
}

.axwiz-pkg-tag {
  background: rgba(255,107,53,.1);
  color: var(--axwiz-primary);
  font-size: .7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
}

.axwiz-card-footer {
  margin-top: auto;
}

.axwiz-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.axwiz-card-dur {
  font-size: var(--axwiz-card-meta-size, .8rem);
  color: var(--axwiz-muted);
}

.axwiz-card-dur strong {
  color: var(--axwiz-text);
}

.axwiz-card-price-pill {
  font-size: var(--axwiz-card-price-size, .8rem);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  color: #fff;
}

.axwiz-card-orig {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.axwiz-save-badge {
  background: rgba(16,185,129,.15);
  color: var(--axwiz-green);
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid rgba(16,185,129,.3);
}

/* ── Selection indicator: outline box → filled check-square ── */
/* Always visible so customers know the card is selectable.      */
.axwiz-card-check {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 5px;
  background: rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, border-color .18s;
  flex-shrink: 0;
}
.axwiz-card-check i {
  font-size: .72rem;
  color: transparent;
  transition: color .15s;
}

.axwiz-service-card.selected .axwiz-card-check {
  background: var(--axwiz-primary);
  border-color: var(--axwiz-primary);
}
.axwiz-service-card.selected .axwiz-card-check i {
  color: #fff;
}

/* ── Form fields ───────────────────────────────────────── */
.axwiz-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.axwiz-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.axwiz-field--full {
  grid-column: 1 / -1;
}

.axwiz-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--axwiz-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.axwiz-input {
  background: var(--axwiz-bg);
  border: 1px solid var(--axwiz-border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--axwiz-input-text);
  caret-color: var(--axwiz-primary);
  font-size: .92rem;
  font-family: inherit;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}

/* ── Date & Time Step — high-contrast prominent layout ─── */

/* 2-col grid for Date + Time */
.axwiz-dt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 8px;
}

/* Field wrapper */
.axwiz-dt-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Label — bold uppercase with icon */
.axwiz-dt-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 800;
  color: var(--axwiz-primary);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.axwiz-dt-label i {
  font-size: .9rem;
  color: var(--axwiz-primary);
}

/* Input wrapper — icon left, input right */
.axwiz-dt-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* Left icon badge */
.axwiz-dt-icon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--axwiz-primary);
  border-radius: 10px 0 0 10px;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
  pointer-events: none;
  z-index: 1;
}

/* The actual input — left-padded to clear the icon badge */
.axwiz-dt-input {
  padding-left: 62px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  padding-right: 42px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: #1a1d27 !important;
  border: 2px solid rgba(255,107,53,.5) !important;
  border-radius: 10px !important;
  height: 54px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
}

/* Do NOT use appearance:none on date inputs — it hides the picker on Safari/iOS */
input[type="date"].axwiz-dt-input {
  color-scheme: dark;
  color: #fff !important;
  /* appearance kept as default so Safari/iOS still shows the native picker */
}

.axwiz-dt-input:hover {
  border-color: var(--axwiz-primary) !important;
  box-shadow: 0 0 0 2px rgba(255,107,53,.15) !important;
}

.axwiz-dt-input:focus {
  outline: none !important;
  border-color: var(--axwiz-primary) !important;
  box-shadow: 0 0 0 3px rgba(255,107,53,.28) !important;
}

/* Show placeholder text in muted color before value picked */
input[type="date"].axwiz-dt-input:not([value]),
input[type="date"].axwiz-dt-input[value=""] {
  color: rgba(255,255,255,.5) !important;
}

/* Webkit calendar icon — white, always visible */
input[type="date"].axwiz-dt-input::-webkit-calendar-picker-indicator,
input[type="time"].axwiz-dt-input::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2);
  opacity: 1;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  transition: filter .15s;
}

input[type="date"].axwiz-dt-input::-webkit-calendar-picker-indicator:hover,
input[type="time"].axwiz-dt-input::-webkit-calendar-picker-indicator:hover {
  filter: invert(1) brightness(2) sepia(1) saturate(10) hue-rotate(330deg);
}

/* Select — custom dropdown arrow, but keep native functionality */
select.axwiz-dt-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FF6B35' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
}

.axwiz-dt-select option {
  background: var(--axwiz-surface);
  color: #fff;
  font-weight: 600;
}

/* Guests count display */
.axwiz-guests-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.axwiz-guests-count {
  font-size: 1.6rem;
  font-weight: 800;
  min-width: 48px;
  text-align: center;
  color: #fff;
  line-height: 1;
}

/* Qty buttons — match the date/time height */
.axwiz-qty-btn {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--axwiz-surface);
  border: 2px solid var(--axwiz-primary);
  color: var(--axwiz-primary);
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}

.axwiz-qty-btn:hover {
  background: var(--axwiz-btn-bg);
  color: var(--axwiz-btn-text);
}

/* Responsive: stack on small screens */
@media (max-width: 640px) {
  .axwiz-dt-grid { grid-template-columns: 1fr; gap: 14px; }
  .axwiz-dt-input { height: 52px; font-size: .95rem !important; }
}

@media (max-width: 480px) {
  .axwiz-dt-icon { width: 44px; font-size: .9rem; }
  .axwiz-dt-input { padding-left: 56px !important; }
  .axwiz-qty-btn { width: 44px; height: 44px; }
}

.axwiz-input:focus {
  outline: none;
  border-color: var(--axwiz-outline);
  box-shadow: 0 0 0 var(--axwiz-outline-width) rgba(99,102,241,.18);
}

textarea.axwiz-input {
  resize: vertical;
  min-height: 80px;
}

select.axwiz-input option {
  background: var(--axwiz-surface);
  color: var(--axwiz-text);
}

/* ── Section sub-heading ───────────────────────────────── */
.axwiz-section-sub {
  font-size: .95rem;
  font-weight: 700;
  color: var(--axwiz-text);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Addons ────────────────────────────────────────────── */
.axwiz-addons-section {
  border-top: 1px solid var(--axwiz-border);
  padding-top: 20px;
  margin-top: 8px;
}

.axwiz-addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.axwiz-addon-card {
  background: var(--axwiz-bg);
  border: 2px solid var(--axwiz-border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s;
  position: relative;
}

.axwiz-addon-card.selected {
  border-color: #EC4899;
}

.axwiz-addon-card-bar {
  height: 3px;
}

.axwiz-addon-card-icon {
  width: 100%;
  /* Fallback for iOS Safari < 15 / Android WebView < 88 that don't support aspect-ratio */
  height: 0;
  padding-bottom: 56.25%; /* 16:9 = 56.25% */
  position: relative;
  aspect-ratio: 16 / 9;  /* match image-wrap proportion */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
}
/* Override padding-bottom hack on browsers that support aspect-ratio */
@supports (aspect-ratio: 16 / 9) {
  .axwiz-addon-card-icon {
    height: auto;
    padding-bottom: 0;
    position: static;
  }
}

.axwiz-addon-img-wrap {
  width: 100%;
  /* Fallback for iOS Safari < 15 / Android WebView < 88 */
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
  aspect-ratio: 16 / 9;  /* proportional regardless of card width */
  overflow: hidden;
  background: #12141e;
  flex-shrink: 0;
}
@supports (aspect-ratio: 16 / 9) {
  .axwiz-addon-img-wrap {
    height: auto;
    padding-bottom: 0;
    position: static;
  }
}

.axwiz-addon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .3s ease;
}

.axwiz-addon-card:hover .axwiz-addon-img {
  transform: scale(1.04);
}

.axwiz-addon-card-body {
  padding: 10px 12px;
}

.axwiz-addon-card-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--axwiz-text);
  margin-bottom: 4px;
}

.axwiz-addon-card-price {
  font-size: .85rem;
  font-weight: 700;
}

.axwiz-addon-qty-row {
  display: flex;
  align-items: center;
  justify-content: center;  /* centre the − N + group, not spread across card */
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--axwiz-border);
}

.axwiz-addon-qty-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #222536;
  border: 1px solid var(--axwiz-border);
  color: var(--axwiz-text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s;
  user-select: none;
}

.axwiz-addon-qty-btn:hover {
  background: var(--axwiz-primary);
}

.axwiz-addons-total {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(236,72,153,.07);
  border: 1px solid rgba(236,72,153,.2);
  border-radius: 8px;
  margin-top: 12px;
  font-size: .9rem;
  color: var(--axwiz-text);
}

/* ── Promo ─────────────────────────────────────────────── */
.axwiz-promo-row {
  margin-bottom: 20px;
}

.axwiz-promo-input-wrap {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.axwiz-promo-input-wrap .axwiz-input {
  flex: 1;
}

.axwiz-btn-promo {
  background: var(--axwiz-green);
  color: #fff;
  border: none;
  padding: 0 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}

.axwiz-btn-promo:hover { opacity: .85; }

.axwiz-btn-promo-remove {
  background: rgba(239,68,68,.15);
  color: #EF4444;
  border: 1px solid rgba(239,68,68,.3);
  padding: 0 14px;
  border-radius: 8px;
  font-size: .82rem;
  cursor: pointer;
}

.axwiz-promo-msg {
  margin-top: 8px;
  font-size: .83rem;
  padding: 8px 12px;
  border-radius: 6px;
}

.axwiz-promo-msg.success {
  background: rgba(16,185,129,.1);
  color: var(--axwiz-green);
  border: 1px solid rgba(16,185,129,.3);
}

.axwiz-promo-msg.error {
  background: rgba(239,68,68,.1);
  color: #EF4444;
  border: 1px solid rgba(239,68,68,.3);
}

/* ── Summary box ───────────────────────────────────────── */
.axwiz-summary-box {
  background: var(--axwiz-bg);
  border: 1px solid var(--axwiz-border);
  border-radius: var(--axwiz-radius);
  overflow: hidden;
  margin-bottom: 20px;
}

.axwiz-summary-service {
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  background: rgba(255,107,53,.05);
}

.axwiz-sum-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--axwiz-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  color: #fff;
  flex-shrink: 0;
}

.axwiz-sum-label {
  font-size: var(--axwiz-sum-label-size, 11px);
  color: var(--axwiz-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.axwiz-sum-val {
  font-size: var(--axwiz-sum-val-size, 16px);
  font-weight: 700;
  color: var(--axwiz-text);
}

.axwiz-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 18px;
  font-size: var(--axwiz-sum-row-size, 14px);
  color: var(--axwiz-muted);
}

.axwiz-summary-row strong {
  color: var(--axwiz-text);
  font-size: var(--axwiz-sum-row-size, 14px);
}

.axwiz-summary-divider {
  height: 1px;
  background: var(--axwiz-border);
  margin: 4px 0;
}

.axwiz-sum-total-row {
  padding: 14px 18px;
  background: rgba(255,107,53,.04);
  font-size: 1rem;
  font-weight: 700;
  color: var(--axwiz-text);
}

/* ── Payment gateways ──────────────────────────────────── */
.axwiz-gw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.axwiz-gw-tile {
  background: var(--axwiz-bg);
  border: 2px solid var(--axwiz-border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color .15s;
}

.axwiz-gw-tile.selected {
  border-color: var(--axwiz-primary);
  background: rgba(255,107,53,.05);
}

.axwiz-gw-tile:hover { border-color: rgba(255,107,53,.4); }

.axwiz-gw-body { flex: 1; }

.axwiz-gw-name {
  font-size: .92rem;
  font-weight: 700;
  color: var(--axwiz-text);
}

.axwiz-gw-tag {
  font-size: .74rem;
  color: var(--axwiz-muted);
  margin-top: 2px;
}

.axwiz-gw-check {
  color: var(--axwiz-primary);
  font-size: 1.1rem;
  opacity: 0;
  transition: opacity .15s;
}

.axwiz-gw-tile.selected .axwiz-gw-check { opacity: 1; }

.axwiz-test-badge {
  background: rgba(255,179,71,.2);
  color: #FFB347;
  font-size: .62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

/* ── Terms ─────────────────────────────────────────────── */
.axwiz-terms-block {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.axwiz-terms-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .88rem;
  color: var(--axwiz-text);
  cursor: pointer;
  line-height: 1.5;
}

.axwiz-chk {
  width: 18px;
  height: 18px;
  accent-color: var(--axwiz-primary);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}

/* ── Navigation bar ────────────────────────────────────── */
.axwiz-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  margin-top: auto;
  border-top: 1px solid var(--axwiz-border);
}

/* ── Back button ─────────────────────────────────────────── */
.axwiz-btn-back {
  background: transparent;
  border: 1.5px solid var(--axwiz-border, #2e3248);
  color: var(--axwiz-text, #E8EAF0);
  padding: 11px 20px;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: border-color .15s, background .15s;
  min-height: 44px;
}
.axwiz-btn-back:hover {
  border-color: var(--axwiz-primary, #FF6B35);
  background: rgba(255,107,53,.06);
  color: var(--axwiz-text, #E8EAF0);
}

/* ── Next button ─────────────────────────────────────────── */
.axwiz-btn-next {
  background: var(--axwiz-btn-bg, var(--axwiz-primary, #FF6B35));
  border: none;
  color: var(--axwiz-btn-text, #ffffff);
  padding: 11px 24px;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity .15s;
  letter-spacing: .3px;
  min-height: 44px;
}
.axwiz-btn-next:disabled { opacity: .4; cursor: not-allowed; }
.axwiz-btn-next:hover:not(:disabled) {
  background: var(--axwiz-btn-hover, var(--axwiz-btn-bg, #e8571f));
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

/* ── Submit / Confirm button ─────────────────────────────── */
.axwiz-btn-submit {
  background: var(--axwiz-btn-bg, var(--axwiz-primary, #FF6B35));
  border: none;
  color: var(--axwiz-btn-text, #ffffff);
  padding: 13px 28px;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: .4px;
  transition: opacity .15s, box-shadow .15s;
  min-height: 44px;
  min-width: 200px;
  box-shadow: 0 4px 18px rgba(0,0,0,.2);
}
.axwiz-btn-submit:hover:not(:disabled) {
  background: var(--axwiz-btn-hover, var(--axwiz-btn-bg, #e8571f));
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
}
.axwiz-btn-submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ── Error box ─────────────────────────────────────────── */
.axwiz-error-box {
  padding: 12px 16px;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 8px;
  color: #EF4444;
  font-size: .88rem;
  margin-bottom: 16px;
}

/* ── Success panel ─────────────────────────────────────── */
.axwiz-success-box {
  text-align: center;
  padding: 40px 20px;
}

.axwiz-success-icon {
  font-size: 3.5rem;
  color: var(--axwiz-green);
  margin-bottom: 16px;
}

.axwiz-success-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--axwiz-text);
  margin: 0 0 10px;
}

.axwiz-success-msg {
  color: var(--axwiz-muted);
  font-size: .95rem;
  margin: 0 0 16px;
}

.axwiz-ref-badge {
  display: inline-block;
  background: rgba(255,107,53,.12);
  border: 1px solid rgba(255,107,53,.3);
  border-radius: 8px;
  padding: 8px 22px;
  font-size: .95rem;
  color: var(--axwiz-text);
}

.axwiz-ref-badge strong {
  color: var(--axwiz-primary);
  font-size: 1.1rem;
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE — Multi-device: iOS / Android phones & tablets,
   Windows tablets & desktops, all screen orientations.
   Breakpoints:
     1200px  — large desktops (wide)
      900px  — small desktops / landscape tablets (iPad, Android)
      768px  — portrait tablets (iPad 9.7", standard Android tablets)
      600px  — large phones landscape / small tablets
      480px  — large phones portrait (iPhone Plus, Samsung S-series)
      375px  — standard phones (iPhone 14, Pixel)
      320px  — small phones (SE, older Android)
───────────────────────────────────────────────────────── */

/* ── Large desktop ─────────────────────────────────────── */
@media (min-width: 1200px) {
  .axwiz-outer { max-width: 1100px; }
}

/* ── Small desktop / Landscape tablet ─────────────────── */
@media (max-width: 900px) {
  .axwiz-outer { padding: 12px; }

  .axwiz-service-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .axwiz-addons-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .axwiz-time-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Portrait tablet (iPad, Android tablet) ────────────── */
@media (max-width: 768px) {
  .axwiz-outer { padding: 8px; }

  .axwiz-wrap { flex-direction: column; }

  .axwiz-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--axwiz-border);
    padding: 14px 18px;
  }

  .axwiz-brand { display: none; }

  .axwiz-steps {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    scrollbar-width: none;
  }
  .axwiz-steps::-webkit-scrollbar { display: none; }

  .axwiz-step {
    flex-direction: column;
    gap: 4px;
    padding: 10px 8px;
    min-width: 72px;
    text-align: center;
  }

  .axwiz-step-line {
    width: 24px;
    height: 2px;
    margin: 17px 0 0;
  }

  .axwiz-step-label { font-size: .70rem; }

  .axwiz-selected-summary { display: none !important; }

  .axwiz-content { padding: 0; }

  .axwiz-panel { padding: 20px 18px; }

  .axwiz-panel-title { font-size: 1.1rem; }

  .axwiz-service-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .axwiz-addons-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .axwiz-field-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .axwiz-field--full { grid-column: 1 / -1; }

  .axwiz-time-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .axwiz-order-summary {
    flex-direction: column;
  }

  /* Bigger tap targets on tablets */
  .axwiz-time-slot,
  .axwiz-btn,
  .axwiz-input,
  .axwiz-select {
    min-height: 48px;
  }
}

/* ── Large phones landscape / small tablets ────────────── */
@media (max-width: 600px) {
  .axwiz-outer { padding: 6px 4px; }

  .axwiz-panel { padding: 16px 14px; }

  .axwiz-service-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .axwiz-service-card {
    padding: 14px 10px;
  }
  .axwiz-service-card .axwiz-svc-name { font-size: .9rem; }

  .axwiz-addons-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .axwiz-time-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .axwiz-field-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Large phones portrait (iPhone Plus, Pixel XL) ─────── */
@media (max-width: 480px) {
  .axwiz-outer { padding: 4px 0; }

  .axwiz-card {
    border-radius: 12px;
  }

  .axwiz-step {
    min-width: 62px;
    padding: 8px 4px;
  }
  .axwiz-step-icon { width: 30px; height: 30px; font-size: .85rem; }
  .axwiz-step-label { font-size: .62rem; }

  .axwiz-panel { padding: 14px 12px; }
  .axwiz-panel-title { font-size: 1rem; }

  .axwiz-service-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .axwiz-service-card {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    gap: 12px;
    text-align: left;
  }

  .axwiz-svc-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 1.1rem;
    border-radius: 10px;
  }

  .axwiz-svc-body { flex: 1; }

  .axwiz-time-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }

  .axwiz-time-slot {
    padding: 10px 4px;
    font-size: .8rem;
    border-radius: 8px;
  }

  .axwiz-field-grid { grid-template-columns: 1fr; gap: 10px; }

  /* Full-width CTA buttons */
  .axwiz-footer { flex-direction: column; gap: 10px; }
  .axwiz-btn { width: 100%; justify-content: center; min-height: 50px; font-size: 1rem; }
  .axwiz-btn-back { order: 2; }
  .axwiz-btn-next,
  .axwiz-btn-confirm { order: 1; }

  /* Addon cards — full width */
  .axwiz-addons-grid { grid-template-columns: 1fr; gap: 10px; }
  .axwiz-addon-card { padding: 12px 14px; }
}

/* ── Standard phones (iPhone 14, Pixel) ────────────────── */
@media (max-width: 390px) {
  .axwiz-step-label { display: none; }

  .axwiz-panel-title { font-size: .95rem; }

  .axwiz-time-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

/* ── Small phones (iPhone SE, older Android) ────────────── */
@media (max-width: 360px) {
  .axwiz-outer { padding: 2px 0; }

  .axwiz-card { border-radius: 8px; }

  .axwiz-panel { padding: 12px 10px; }

  .axwiz-step-icon { width: 26px; height: 26px; font-size: .75rem; }

  .axwiz-time-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }
  .axwiz-time-slot { font-size: .75rem; padding: 9px 2px; }
}

/* ── Touch-device general improvements ─────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Enlarge all interactive targets for finger taps */
  .axwiz-service-card,
  .axwiz-addon-card,
  .axwiz-time-slot,
  .axwiz-btn,
  .axwiz-input,
  .axwiz-select,
  .axwiz-checkbox label,
  .axwiz-radio label {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Remove hover states that don't translate on touch */
  .axwiz-service-card:hover { transform: none; }
  .axwiz-addon-card:hover   { transform: none; }
  .axwiz-time-slot:hover    { background: var(--axwiz-surface2); }

  /* Active states for tapping feedback */
  .axwiz-service-card:active { transform: scale(.97); }
  .axwiz-addon-card:active   { transform: scale(.98); }
  .axwiz-time-slot:active    { opacity: .8; }
  .axwiz-btn:active          { opacity: .85; }
}

/* ── iOS Safari safe-area support ───────────────────────── */
@supports (padding: max(0px)) {
  .axwiz-outer {
    padding-left:  max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

/* ── Landscape orientation on phones ───────────────────── */
@media (max-width: 812px) and (orientation: landscape) {
  .axwiz-sidebar {
    padding: 10px 16px;
  }

  .axwiz-steps {
    flex-direction: row;
    overflow-x: auto;
  }

  .axwiz-panel { padding: 14px 18px; }

  .axwiz-service-grid { grid-template-columns: repeat(3, 1fr); }

  .axwiz-addons-grid { grid-template-columns: repeat(2, 1fr); }

  .axwiz-footer {
    flex-direction: row;
  }
  .axwiz-btn { width: auto; }
}

/* ─────────────────────────────────────────────────────────
   CATEGORY MODE  — Duration picker (Axe Throwing / Rage Room)
   Horizontal card layout matching the reference design screenshot
───────────────────────────────────────────────────────── */

/* Section header */
.axwiz-category-header { margin-bottom: 24px; }
.axwiz-panel-subtitle {
  color: var(--axwiz-muted);
  font-size: .9rem;
  margin: 6px 0 0;
}

/* ── Grid: single column stacked list ───────────────────── */
.axwiz-category-mode .axwiz-service-grid {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Card: horizontal flex row ──────────────────────────── */
.axwiz-category-mode .axwiz-service-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px;
  border: 1.5px solid var(--axwiz-border);
  border-radius: 14px;
  background: var(--axwiz-surface);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s, box-shadow .2s, background .2s;
  position: relative;
}

.axwiz-category-mode .axwiz-service-card:hover {
  border-color: var(--axwiz-primary);
  background: rgba(255,107,53,.04);
  box-shadow: 0 4px 20px rgba(0,0,0,.28);
}

.axwiz-category-mode .axwiz-service-card.selected {
  border-color: var(--axwiz-primary);
  background: rgba(255,107,53,.06);
  box-shadow: 0 0 0 2px rgba(255,107,53,.22), 0 4px 18px rgba(0,0,0,.25);
}

/* ── Category mode: outline box → filled check indicator ─────── */
.axwiz-category-mode .axwiz-service-card.selected::after {
  content: none; /* disabled — .axwiz-cat-check element handles selection state */
}

.axwiz-cat-check {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255,255,255,.20);
  border-radius: 5px;
  background: rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .18s, border-color .18s;
}
.axwiz-cat-check i {
  font-size: .72rem;
  color: transparent;
  transition: color .15s;
}

.axwiz-category-mode .axwiz-service-card.selected .axwiz-cat-check {
  background: var(--axwiz-primary);
  border-color: var(--axwiz-primary);
}
.axwiz-category-mode .axwiz-service-card.selected .axwiz-cat-check i {
  color: #fff;
}

/* ── Left: circular thumbnail ───────────────────────────── */
.axwiz-hcard-thumb {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.axwiz-hcard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.axwiz-hcard-thumb i {
  font-size: 1.6rem;
}

/* ── Right: content column ──────────────────────────────── */
.axwiz-hcard-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Title */
.axwiz-hcard-title {
  font-size: var(--axwiz-card-title-size, 1.05rem);
  font-weight: 700;
  color: var(--axwiz-text);
  margin-bottom: 8px;
  line-height: 1.3;
  letter-spacing: .01em;
}

/* Description */
.axwiz-hcard-desc {
  font-size: var(--axwiz-card-desc-size, .875rem);
  color: var(--axwiz-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* ── Meta row: Duration label + Price badge ─────────────── */
.axwiz-hcard-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
}

.axwiz-hcard-dur {
  font-size: var(--axwiz-card-meta-size, .875rem);
  color: var(--axwiz-text);
  font-weight: 500;
}

.axwiz-hcard-dur strong {
  font-weight: 800;
  color: var(--axwiz-text);
}

.axwiz-hcard-price-label {
  font-size: var(--axwiz-card-meta-size, .875rem);
  color: var(--axwiz-text);
  font-weight: 500;
}

.axwiz-hcard-price {
  display: inline-flex;
  align-items: center;
  padding: 5px 16px;
  border-radius: 8px;
  font-size: var(--axwiz-card-price-size, .9rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ── Responsive ─────────────────────────────────────────── */

/* Tablet — keep 2 col but tighten */
@media (max-width: 900px) {
  .axwiz-category-mode .axwiz-service-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .axwiz-hcard-thumb { width: 62px; height: 62px; min-width: 62px; }
  .axwiz-hcard-title { font-size: .98rem; }
  .axwiz-category-mode .axwiz-service-card { padding: 18px 18px; gap: 14px; }
}

/* Portrait tablet / large phone landscape — 1 col */
@media (max-width: 640px) {
  .axwiz-category-mode .axwiz-service-grid { grid-template-columns: 1fr; gap: 14px; }
  .axwiz-hcard-thumb { width: 64px; height: 64px; min-width: 64px; }
  .axwiz-category-mode .axwiz-service-card { padding: 18px 18px; gap: 16px; }
}

/* Small phone */
@media (max-width: 480px) {
  .axwiz-category-mode .axwiz-service-card { padding: 16px 14px; gap: 13px; }
  .axwiz-hcard-thumb { width: 56px; height: 56px; min-width: 56px; }
  .axwiz-hcard-title { font-size: .92rem; }
  .axwiz-hcard-desc  { font-size: .82rem; margin-bottom: 12px; }
  .axwiz-hcard-dur,
  .axwiz-hcard-price-label { font-size: .82rem; }
  .axwiz-hcard-price { font-size: .85rem; padding: 5px 13px; }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
  .axwiz-category-mode .axwiz-service-card:hover {
    border-color: var(--axwiz-border);
    background: var(--axwiz-surface);
    box-shadow: none;
  }
  .axwiz-category-mode .axwiz-service-card:active { opacity: .88; }
  .axwiz-category-mode .axwiz-service-card.selected:hover {
    border-color: var(--axwiz-primary);
    background: rgba(255,107,53,.06);
  }
}

/* ─────────────────────────────────────────────────────────
   CATEGORY GROUP HEADERS  — [axearena_book] all-services mode
───────────────────────────────────────────────────────── */
.axwiz-cat-group-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 6px;
  padding-bottom: 2px;
}

.axwiz-cat-group-header:first-child { margin-top: 0; }

.axwiz-cat-group-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  color: #fff;
  flex-shrink: 0;
}

.axwiz-cat-group-name {
  font-size: .95rem;
  font-weight: 800;
  color: var(--cat-color, var(--axwiz-primary));
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}

.axwiz-cat-group-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--cat-color, var(--axwiz-border)) 0%, transparent 100%);
  opacity: .4;
}

/* ─────────────────────────────────────────────────────────
   CARD ENTRY — Payment card details form
───────────────────────────────────────────────────────── */
.axwiz-card-entry { margin-top: 4px; }

.axwiz-card-entry-box {
  background: var(--axwiz-sidebar);
  border: 1.5px solid var(--axwiz-border);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

.axwiz-card-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.axwiz-card-input-wrap {
  position: relative;
}

.axwiz-card-input-wrap .axwiz-input {
  padding-right: 48px;
}

.axwiz-card-brand {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--axwiz-muted);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
}

.axwiz-cvv-tip {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--axwiz-muted);
  cursor: help;
  font-size: .95rem;
}

.axwiz-card-number-input {
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .05em;
}

/* Card number — highlight each group */
.axwiz-card-number-input::placeholder { font-family: inherit; letter-spacing: .08em; color: var(--axwiz-muted); }

.axwiz-card-secure-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--axwiz-muted);
  padding: 10px 12px;
  background: rgba(16,185,129,.06);
  border: 1px solid rgba(16,185,129,.15);
  border-radius: 8px;
  margin-top: 4px;
}

.axwiz-card-secure-note .fas { color: #10B981; font-size: .85rem; }

/* Responsive card entry */
@media (max-width: 480px) {
  .axwiz-card-row-2 { grid-template-columns: 1fr; gap: 12px; }
  .axwiz-card-entry-box { padding: 16px 14px; gap: 12px; }
}

/* ─────────────────────────────────────────────────────────
   TAX ROW — in summary box
───────────────────────────────────────────────────────── */
#axwiz-sum-tax-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  border-top: 1px dashed var(--axwiz-border);
  font-size: .88rem;
}

/* ─────────────────────────────────────────────────────────
   CALENDAR + TIME SLOT PICKER  (Step 2)
   Matches reference screenshot: calendar left, slots right
───────────────────────────────────────────────────────── */

/* ── Outer 2-col layout ────────────────────────────────── */
.axwiz-cal-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

/* ── Calendar box ──────────────────────────────────────── */
.axwiz-cal-box {
  background: var(--axwiz-surface);
  border: 1.5px solid var(--axwiz-border);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Month header row */
.axwiz-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.axwiz-cal-month-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--axwiz-text);
  letter-spacing: .02em;
}

.axwiz-cal-nav {
  background: none;
  border: none;
  color: var(--axwiz-text);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  transition: background .15s, color .15s;
  line-height: 1;
}
.axwiz-cal-nav:hover {
  background: rgba(255,107,53,.15);
  color: var(--axwiz-primary);
}

/* Weekday headers */
.axwiz-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}
.axwiz-cal-weekdays span {
  font-size: .72rem;
  font-weight: 700;
  color: var(--axwiz-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 6px 0;
}

/* Day grid */
.axwiz-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

/* Individual day cell */
.axwiz-cal-day {
  /* Fallback for aspect-ratio on iOS Safari < 15 */
  width: 100%;
  min-height: 36px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: default;
  color: var(--axwiz-muted);
  transition: background .15s, color .15s;
  padding: 0;
  position: relative;
}

.axwiz-cal-blank { visibility: hidden; }

.axwiz-cal-available {
  color: var(--axwiz-text);
  cursor: pointer;
}

.axwiz-cal-available:hover {
  background: rgba(255,107,53,.15);
  color: var(--axwiz-primary);
}

.axwiz-cal-today {
  border: 1.5px solid var(--axwiz-primary);
  color: var(--axwiz-primary);
}

.axwiz-cal-selected {
  background: var(--axwiz-primary) !important;
  color: #fff !important;
  border-color: var(--axwiz-primary) !important;
}

.axwiz-cal-disabled {
  color: #333a50;
  cursor: not-allowed;
  opacity: .5;
}

/* Closed / Holiday day */
.axwiz-cal-holiday {
  color: #EF4444;
  cursor: not-allowed;
  opacity: .6;
  text-decoration: line-through;
  position: relative;
}
.axwiz-cal-holiday-dot {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #EF4444;
}

/* Special hours day */
.axwiz-cal-special {
  border: 1.5px solid #F59E0B !important;
  color: #F59E0B !important;
}
.axwiz-cal-special::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #F59E0B;
}

/* Private event day — partial (some slots still available) */
.axwiz-cal-private::before {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6366F1;
}

/* Private event day — fully blocked (no sessions available at all) */
.axwiz-cal-private-blocked {
  color: #6366F1;
  cursor: not-allowed;
  opacity: .55;
  position: relative;
}
.axwiz-cal-private-blocked-dot {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6366F1;
  box-shadow: 0 0 0 2px rgba(99,102,241,.25);
}

/* Time slot notices */
.axwiz-ts-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .82rem;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 4px;
  line-height: 1.5;
}
.axwiz-ts-notice i { margin-top: 2px; flex-shrink: 0; }
.axwiz-ts-notice--special {
  background: rgba(245,158,11,.1);
  color: #F59E0B;
  border: 1px solid rgba(245,158,11,.3);
}
.axwiz-ts-notice--private {
  background: rgba(99,102,241,.1);
  color: #818CF8;
  border: 1px solid rgba(99,102,241,.3);
}
.axwiz-ts-closed {
  color: #EF4444;
  font-size: .9rem;
  text-align: center;
  padding: 24px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
}

/* ── Closed / Holiday popup panel ──────────────────────── */
.axwiz-closed-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 20px 24px;
  text-align: center;
  animation: axwizFadeIn .22s ease;
}
.axwiz-closed-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(239,68,68,.12);
  border: 2px solid rgba(239,68,68,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #EF4444;
  flex-shrink: 0;
}
.axwiz-closed-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--axwiz-text, #E8EAF0);
  letter-spacing: -.01em;
}
.axwiz-closed-date {
  font-size: .82rem;
  color: var(--axwiz-text-muted, #6B7280);
  font-weight: 500;
}
.axwiz-closed-msg {
  font-size: .88rem;
  color: var(--axwiz-text-muted, #6B7280);
  line-height: 1.55;
  max-width: 320px;
}
.axwiz-closed-next {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.25);
  border-radius: 12px;
  padding: 12px 18px;
  margin-top: 4px;
  text-align: left;
}
.axwiz-closed-next > i {
  font-size: 1.3rem;
  color: #10B981;
  flex-shrink: 0;
}
.axwiz-closed-next-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #10B981;
  margin-bottom: 4px;
}
.axwiz-closed-next-btn {
  background: rgba(16,185,129,.15);
  border: 1.5px solid rgba(16,185,129,.4);
  border-radius: 8px;
  color: #10B981;
  font-size: .88rem;
  font-weight: 700;
  padding: 7px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.axwiz-closed-next-btn:hover {
  background: rgba(16,185,129,.25);
  border-color: rgba(16,185,129,.6);
}
.axwiz-closed-hint {
  font-size: .76rem;
  color: var(--axwiz-text-muted, #6B7280);
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: .7;
}

/* ── Calendar legend ───────────────────────────────────── */
.axwiz-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 4px 2px;
  margin-top: 6px;
  border-top: 1px solid var(--axwiz-border);
}
.axwiz-cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--axwiz-muted);
}
.axwiz-cal-legend-item::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.axwiz-cal-legend-available::before  { background: rgba(255,107,53,.25); border: 1.5px solid var(--axwiz-primary); }
.axwiz-cal-legend-holiday::before    { background: rgba(239,68,68,.2);   border: 1.5px solid #EF4444; }
.axwiz-cal-legend-special::before    { background: rgba(245,158,11,.15); border: 1.5px solid #F59E0B; }
.axwiz-cal-legend-private::before    { background: rgba(99,102,241,.15); border: 1.5px solid #6366F1; }

/* ── Time slot box ─────────────────────────────────────── */
.axwiz-ts-box {
  background: var(--axwiz-surface);
  border: 1.5px solid var(--axwiz-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 400px;
}

.axwiz-ts-header {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--axwiz-border);
  flex-shrink: 0;
}

.axwiz-ts-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--axwiz-text);
}

.axwiz-ts-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--axwiz-border) transparent;
}
.axwiz-ts-body::-webkit-scrollbar { width: 6px; }
.axwiz-ts-body::-webkit-scrollbar-thumb { background: var(--axwiz-border); border-radius: 3px; }

.axwiz-ts-placeholder {
  color: var(--axwiz-muted);
  font-size: .85rem;
  text-align: center;
  padding: 24px 12px;
  line-height: 1.6;
}

/* Period group label (Morning / Afternoon etc.) */
.axwiz-ts-group-label {
  font-size: .74rem;
  font-weight: 800;
  color: var(--axwiz-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 6px 0 4px;
}

/* Time slot pill row */
.axwiz-ts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 4px;
}

/* Individual time pill */
.axwiz-ts-pill {
  background: transparent;
  border: 1.5px solid var(--axwiz-border);
  border-radius: 8px;
  color: var(--axwiz-text);
  font-size: .8rem;
  font-weight: 600;
  padding: 9px 6px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}

.axwiz-ts-pill:hover {
  border-color: var(--axwiz-primary);
  background: rgba(255,107,53,.08);
  color: var(--axwiz-primary);
}

.axwiz-ts-selected {
  background: var(--axwiz-primary) !important;
  border-color: var(--axwiz-primary) !important;
  color: #fff !important;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .axwiz-cal-layout { grid-template-columns: 1fr; gap: 14px; }
  .axwiz-ts-box { max-height: 260px; }
  .axwiz-ts-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .axwiz-cal-box  { padding: 14px 10px; }
  .axwiz-cal-day  { font-size: .8rem; border-radius: 6px; }
  .axwiz-ts-pill  { font-size: .75rem; padding: 8px 4px; }
  .axwiz-ts-row   { grid-template-columns: 1fr 1fr; gap: 5px; }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
  .axwiz-cal-available:hover { background: transparent; color: var(--axwiz-text); }
  .axwiz-cal-available:active { background: rgba(255,107,53,.2); color: var(--axwiz-primary); }
  .axwiz-ts-pill:hover { border-color: var(--axwiz-border); background: transparent; color: var(--axwiz-text); }
  .axwiz-ts-pill:active { background: rgba(255,107,53,.15); }
}

/* ─────────────────────────────────────────────────────────
   UNIFIED PAYMENT BOX — replaces gateway tiles
───────────────────────────────────────────────────────── */
.axwiz-payment-box {
  margin-top: 24px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid rgba(16,185,129,.3);
  background: var(--axwiz-sidebar);
}

.axwiz-payment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  background: rgba(16,185,129,.08);
  border-bottom: 1px solid rgba(16,185,129,.15);
}

.axwiz-payment-header .fas {
  color: #10B981;
  font-size: 1rem;
}

.axwiz-payment-header span {
  font-size: .9rem;
  font-weight: 700;
  color: #E8EAF0;
  flex: 1;
  letter-spacing: .02em;
}

.axwiz-payment-badges {
  display: flex;
  gap: 6px;
  align-items: center;
}

.axwiz-pay-badge {
  background: #fff;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 1.15rem;
  line-height: 1;
  display: flex;
  align-items: center;
}

.axwiz-pay-badge .fab.fa-cc-visa        { color: #1A1F71; }
.axwiz-pay-badge .fab.fa-cc-mastercard  { color: #EB001B; }
.axwiz-pay-badge .fab.fa-cc-amex        { color: #007BC1; }
.axwiz-pay-badge .fab.fa-cc-discover    { color: #FF6600; }

/* Card entry box inside payment box (no separate border needed) */
.axwiz-payment-box .axwiz-card-entry-box {
  border: none;
  border-radius: 0;
  background: transparent;
}

/* Secure note inside payment box */
.axwiz-card-secure-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .8rem;
  color: var(--axwiz-muted);
  padding: 11px 14px;
  background: rgba(16,185,129,.05);
  border: 1px solid rgba(16,185,129,.12);
  border-radius: 8px;
  margin-top: 4px;
  line-height: 1.5;
}
.axwiz-card-secure-note .fas { color: #10B981; font-size: .85rem; flex-shrink: 0; margin-top: 1px; }

/* ── Tax breakdown rows in summary ─────────────────────── */
.axwiz-tax-breakdown-row {
  padding-left: 16px;
  font-size: .88rem;
  border-top: none;
}

.axwiz-sum-tax-combined-row {
  border-top: 1px dashed rgba(255,179,71,.3);
  padding-top: 6px;
  margin-top: 2px;
}

.axwiz-summary-row.axwiz-sum-total-row {
  border-top: 2px solid var(--axwiz-border);
  padding-top: 10px;
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────
   GRAND TOTAL BLOCK — prominent, tax-included
───────────────────────────────────────────────────────── */
.axwiz-sum-total-block {
  background: rgba(255,107,53,.06);
  border: 1.5px solid rgba(255,107,53,.25);
  border-radius: 12px;
  padding: 16px 18px 12px;
  margin-top: 6px;
}

.axwiz-sum-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.axwiz-sum-total-label {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--axwiz-text);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.axwiz-sum-total-amount {
  font-size: var(--axwiz-sum-total-size, 28px);
  font-weight: 900;
  color: var(--axwiz-primary);
  letter-spacing: -.02em;
  line-height: 1;
}

.axwiz-sum-total-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: .78rem;
  color: #FFB347;
  line-height: 1.4;
}

.axwiz-sum-total-note .fas {
  font-size: .8rem;
  flex-shrink: 0;
  color: #FFB347;
}

/* Summary step submit — inherits from base .axwiz-btn-submit above */
/* (no overrides needed — theme CSS vars handle colour, size is already correct) */

/* ═══════════════════════════════════════════════════════════════
   BOOKING CONFIRMATION SUCCESS PANEL
   ═══════════════════════════════════════════════════════════════ */
#axwiz-panel-success {
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding: 0 16px 40px;
  animation: axwiz-fadein .4s ease;
}
@keyframes axwiz-fadein { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

.axwiz-success-wrap {
  width: 100%;
  max-width: 520px;
  text-align: center;
  padding-top: 32px;
}

/* Animated checkmark */
.axwiz-success-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
}
.axwiz-success-icon svg { width: 100%; height: 100%; }
.axwiz-check-circle {
  stroke: #4ade80;
  stroke-width: 2;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: axwiz-circle .6s cubic-bezier(.65,0,.45,1) .3s forwards;
}
.axwiz-check-tick {
  stroke: #4ade80;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: axwiz-tick .4s cubic-bezier(.65,0,.45,1) .9s forwards;
}
@keyframes axwiz-circle { to { stroke-dashoffset: 0 } }
@keyframes axwiz-tick    { to { stroke-dashoffset: 0 } }

.axwiz-success-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--aa-pub-text, #E8EAF0);
  margin: 0 0 8px;
}
.axwiz-success-msg {
  font-size: .95rem;
  opacity: .8;
  margin: 0 0 20px;
  line-height: 1.6;
}

/* Reference badge */
/* .axwiz-ref-badge layout handled below in success section */
.axwiz-ref-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .55;
  margin-bottom: 2px;
}
.axwiz-ref-num {
  font-family: monospace;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--aa-pub-primary, #FF6B35);
  letter-spacing: .06em;
}

/* Booking detail card */
.axwiz-confirm-card {
  display: none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  text-align: left;
}
.axwiz-confirm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  font-size: .9rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.axwiz-confirm-row:last-child { border-bottom: none; }
.axwiz-confirm-row i {
  width: 18px;
  text-align: center;
  color: var(--aa-pub-primary, #FF6B35);
  opacity: .8;
  flex-shrink: 0;
}

/* Charge summary */
.axwiz-charge-summary {
  display: none;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  text-align: left;
}
.axwiz-charge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  font-size: .88rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  opacity: .75;
}
.axwiz-charge-row:last-child {
  border-bottom: none;
  opacity: 1;
  font-size: .95rem;
  padding-top: 12px;
  padding-bottom: 12px;
}
.axwiz-charge-total-row strong {
  color: var(--aa-pub-primary, #FF6B35);
  font-size: 1.05rem;
}

/* Reference badge — flex row with copy button */
.axwiz-ref-badge {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 14px 20px;
  margin: 0 auto 12px;
  max-width: 340px;
  flex-wrap: wrap;
}
.axwiz-ref-copy {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 7px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--aa-pub-primary, #FF6B35);
  font-size: .8rem;
  transition: background .15s;
  flex-shrink: 0;
}
.axwiz-ref-copy:hover { background: rgba(255,255,255,.14); }

/* Save-your-ref hint */
.axwiz-ref-hint {
  font-size: .78rem;
  opacity: .6;
  margin: 0 0 16px;
  display: none;
}

/* Email confirmation notice */
.axwiz-email-notice {
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.22);
  border-radius: 10px;
  padding: 12px 18px;
  margin: 12px 0 0;
  font-size: .88rem;
  text-align: left;
  max-width: 420px;
  width: 100%;
}
.axwiz-email-notice i {
  color: #10B981;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.axwiz-email-notice #axwiz-email-note {
  color: var(--aa-pub-text, #E8EAF0);
  opacity: .85;
  line-height: 1.4;
}

/* Legacy .axwiz-email-note (plain fallback) */
.axwiz-email-note {
  font-size: .82rem;
  opacity: .6;
  margin: 4px 0 0;
}

/* ═══════════════════════════════════════════════════════════════
   CROSS-BROWSER COMPATIBILITY + FULL RESPONSIVE OVERHAUL
   Targets: Chrome, Safari, Firefox, Edge, Samsung Internet
            iOS (iPhone/iPad), Android, Windows, macOS
   ═══════════════════════════════════════════════════════════════ */

/* ── Cursor / caret color ─────────────────────────────────────── */
.axwiz-input,
.axwiz-dt-input,
textarea.axwiz-input,
select.axwiz-input,
.axwiz-promo-input-wrap .axwiz-input {
  caret-color: var(--axwiz-primary, #FF6B35);
  /* WebKit/Blink (Chrome, Safari, Edge) - auto adjust */
  -webkit-text-fill-color: var(--axwiz-input-text, #E8EAF0);
  color: var(--axwiz-input-text, #E8EAF0);
}
/* Override WebKit autofill yellow flash */
.axwiz-input:-webkit-autofill,
.axwiz-input:-webkit-autofill:hover,
.axwiz-input:-webkit-autofill:focus,
.axwiz-dt-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--axwiz-input-bg, #0f1117) inset !important;
  -webkit-text-fill-color: var(--axwiz-input-text, #E8EAF0) !important;
  caret-color: var(--axwiz-primary, #FF6B35) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ── Base resets for cross-browser consistency ────────────────── */
.axwiz-outer *,
.axwiz-outer *::before,
.axwiz-outer *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.axwiz-outer button,
.axwiz-outer input,
.axwiz-outer textarea,
.axwiz-outer select {
  font-family: var(--aa-pub-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Remove iOS/Safari default styling on inputs */
.axwiz-input,
.axwiz-dt-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* Fix Firefox select arrow */
select.axwiz-input,
select.axwiz-dt-select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237B8099' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
/* Fix Safari date input */
input[type="date"].axwiz-dt-input,
input[type="time"].axwiz-dt-input {
  -webkit-appearance: none;
  min-height: 44px;
}
/* Remove spinners from number inputs (Chrome/Safari/Firefox) */
input[type="number"].axwiz-input::-webkit-inner-spin-button,
input[type="number"].axwiz-input::-webkit-outer-spin-button { -webkit-appearance: none; }
input[type="number"].axwiz-input { -moz-appearance: textfield; }

/* ── Smooth scroll & focus outlines (accessibility) ──────────── */
/*
 * FIX (portrait freeze): REMOVED scroll-behavior:smooth from .axwiz-outer.
 * CSS scroll-behavior:smooth on a position:fixed overflow-y:auto element
 * intercepts iOS Safari's native touch-scroll engine. When a smooth-scroll
 * is in progress and a new touch starts, iOS queues the touch rather than
 * passing it to the momentum engine — the screen freezes mid-gesture.
 * Smooth programmatic scrolls (scrollIntoView) already use the JS option
 * { behavior:'smooth' } which is scoped to each call, not persistent.
 */
.axwiz-input:focus,
.axwiz-dt-input:focus,
select.axwiz-input:focus,
select.axwiz-dt-select:focus {
  outline: none;
  border-color: var(--axwiz-primary, #FF6B35);
  /* Firefox focus ring */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--axwiz-primary, #FF6B35) 20%, transparent);
}
/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .axwiz-input:focus,
  .axwiz-dt-input:focus {
    box-shadow: 0 0 0 3px rgba(255,107,53,0.2);
  }
}
/* High-contrast mode (Windows) */
@media (forced-colors: active) {
  .axwiz-input, .axwiz-dt-input {
    border: 1px solid ButtonText;
    forced-color-adjust: none;
  }
  .axwiz-btn-next, .axwiz-btn-submit {
    forced-color-adjust: none;
    background: ButtonFace;
    color: ButtonText;
  }
}

/* ── Buttons — cross-browser ──────────────────────────────────── */
.axwiz-btn-next,
.axwiz-btn-submit,
.axwiz-btn-back {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  /* Prevent text resize on iOS */
  -webkit-text-size-adjust: 100%;
  /*
   * FIX (portrait freeze): REMOVED translateZ(0).
   * GPU-promoting buttons inside an already-composited fixed overlay
   * multiplies compositing layers, starving iOS Safari of memory
   * and freezing touch events in portrait mode.
   */
  /* Minimum touch target 44px (WCAG 2.5.5) */
  min-height: 44px;
  min-width: 44px;
}
.axwiz-btn-next,
.axwiz-btn-submit {
  /* Explicit colour enforcement for Safari / older WebKit */
  background: var(--axwiz-btn-bg, var(--axwiz-primary, #FF6B35));
  color: var(--axwiz-btn-text, #ffffff) !important;
  -webkit-text-fill-color: var(--axwiz-btn-text, #ffffff);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
}
/* Prevent double-tap zoom on iOS buttons */
.axwiz-btn-next,
.axwiz-btn-submit,
.axwiz-btn-back,
.axwiz-service-card {
  touch-action: manipulation;
}

/* ── Service/add-on cards ─────────────────────────────────────── */
.axwiz-service-card {
  background: var(--axwiz-card, var(--axwiz-surface));
  -webkit-tap-highlight-color: transparent;
  /* Prevent iOS callout on long-press */
  -webkit-touch-callout: none;
}
.axwiz-service-card:hover,
.axwiz-service-card:focus-visible {
  border-color: var(--axwiz-card-hover, var(--axwiz-primary));
}
.axwiz-service-card.selected {
  border-color: var(--axwiz-card-hover, var(--axwiz-primary));
}
/* Sidebar step active color */
.axwiz-step.active .axwiz-step-dot,
.axwiz-step.completed .axwiz-step-dot {
  background: var(--axwiz-step, var(--axwiz-primary)) !important;
  border-color: var(--axwiz-step, var(--axwiz-primary)) !important;
}
/* Success panel bg */
#axwiz-panel-success {
  background: var(--axwiz-success-bg, var(--axwiz-bg));
}

/* ── Full Responsive Layout ───────────────────────────────────── */

/* Fluid base — never overflow viewport */
.axwiz-outer {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  /* Fallback for browsers without clamp() (iOS Safari < 13.4, old Android) */
  padding: 16px;
  padding: clamp(8px, 2vw, 24px);
  -webkit-overflow-scrolling: touch;
}
.axwiz-wrap {
  /* Fallback for browsers without min() (iOS Safari < 13.4, old Android) */
  max-width: 1040px;
  max-width: min(1040px, 100%);
  width: 100%;
}

/* ── Large desktop (1200px+) ─────── */
@media (min-width: 1200px) {
  .axwiz-wrap { max-width: 1100px; }
  .axwiz-content { padding: 32px 40px; }
}

/* ── Tablet landscape / small desktop (769px–1199px) ─── */
@media (max-width: 1199px) and (min-width: 769px) {
  .axwiz-sidebar { width: 190px; }
  .axwiz-content { padding: 24px 28px; }
  .axwiz-service-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tablet portrait (481px–768px) ──────────────────── */
@media (max-width: 768px) {
  .axwiz-wrap {
    flex-direction: column;
    border-radius: clamp(8px, 2vw, var(--axwiz-radius, 12px));
  }
  .axwiz-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--axwiz-border);
    padding: 14px 16px;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .axwiz-sidebar::-webkit-scrollbar { display: none; }
  .axwiz-steps {
    flex-direction: row;
    gap: 8px;
    flex: 1;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .axwiz-step {
    flex-direction: row;
    flex-shrink: 0;
    gap: 6px;
    padding: 0;
  }
  .axwiz-step-label { display: none; }
  .axwiz-content { padding: 20px 16px; }
  .axwiz-service-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .axwiz-dt-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .axwiz-name-row { flex-direction: column; gap: 12px; }
}

/* ── Mobile large (421px–480px) ─────────────────────── */
@media (max-width: 480px) {
  .axwiz-outer { padding: 8px; }
  .axwiz-content { padding: 16px 12px; }
  .axwiz-service-grid { grid-template-columns: 1fr; gap: 10px; }
  .axwiz-dt-grid { grid-template-columns: 1fr; gap: 10px; }
  .axwiz-input,
  .axwiz-dt-input {
    font-size: 16px !important; /* Prevent iOS auto-zoom on focus */
    min-height: 44px;
    padding: 12px 14px;
  }
  select.axwiz-dt-select,
  select.axwiz-input { font-size: 16px !important; min-height: 44px; }
  .axwiz-btn-next,
  .axwiz-btn-submit {
    width: 100%;
    font-size: 1rem;
    padding: 14px 20px;
  }
  .axwiz-btn-back { min-width: 80px; }
  .axwiz-nav-bar {
    flex-direction: row;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .axwiz-step-dot { width: 28px; height: 28px; font-size: .72rem; }
  .axwiz-service-card { padding: 14px 12px; }
  .axwiz-addons-grid { grid-template-columns: 1fr; gap: 8px; }
  .axwiz-summary-inner { padding: 14px; }
  .axwiz-charge-summary { padding: 0 0 8px; }
  /* Success panel */
  .axwiz-success-wrap { padding-top: 16px; }
  .axwiz-success-icon { width: 56px; height: 56px; }
  .axwiz-success-title { font-size: 1.2rem; }
  .axwiz-confirm-card,
  .axwiz-charge-summary { border-radius: 8px; }
}

/* ── Mobile small (375px iPhone SE / Android) ───────── */
@media (max-width: 390px) {
  .axwiz-outer { padding: 6px; }
  .axwiz-service-card { padding: 12px 10px; }
  .axwiz-card-title { font-size: .88rem; }
  .axwiz-card-price { font-size: 1rem; }
  .axwiz-step-dot { width: 24px; height: 24px; }
}

/* ── iOS Safari specific ─────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  /* Fix safe area insets for iPhone notch / Dynamic Island */
  .axwiz-outer {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  /*
   * FIX (portrait freeze): REMOVED -webkit-overflow-scrolling:touch
   * from .axwiz-content. It is not a scroll container — its parent
   * .axwiz-outer owns the scroll. Adding momentum-scroll to a non-
   * scrolling flex child creates a ghost scroll context that fights
   * the parent on portrait iOS, causing the freeze.
   */
  /* Fix Safari date/time picker offset */
  input[type="date"].axwiz-dt-input,
  input[type="time"].axwiz-dt-input {
    line-height: normal;
    padding-top: 13px;
    padding-bottom: 13px;
  }
  /* Fix Safari gap in flex that isn't supported in older iOS */
  .axwiz-nav-bar { gap: 10px; }
}

/* ── Firefox specific ────────────────────────────────── */
/* ── Firefox-specific focus ring (replaces deprecated @-moz-document) ── */
@supports (-moz-appearance: none) {
  .axwiz-input:focus,
  .axwiz-dt-input:focus {
    outline: 2px solid var(--axwiz-primary, #FF6B35);
    outline-offset: -2px;
  }
}

/* ── Landscape orientation (iPhone / Android) ────────── */
@media (max-width: 812px) and (orientation: landscape) and (max-height: 430px) {
  .axwiz-wrap { flex-direction: row; min-height: unset; }
  .axwiz-sidebar {
    width: 160px;
    min-width: 160px;
    flex-direction: column;
    border-right: 1px solid var(--axwiz-border);
    border-bottom: none;
    overflow-y: auto;
    overflow-x: hidden;
    /* Sidebar is a genuine independent scroll container in landscape */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  .axwiz-steps { flex-direction: column; }
  /* FIX: use 100dvh (dynamic viewport) so iOS toolbar doesn't cause overflow.
     Remove -webkit-overflow-scrolling:touch — outer overlay handles scroll. */
  .axwiz-content { max-height: 100dvh; max-height: 100vh; overflow-y: auto; overscroll-behavior-y: contain; }
}

/* ── Reduced motion (accessibility) ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .axwiz-check-circle,
  .axwiz-check-tick,
  .axwiz-service-card,
  .axwiz-btn-next,
  .axwiz-btn-submit {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Print ────────────────────────────────────────────── */
@media print {
  .axwiz-outer { background: white; color: black; }
  .axwiz-sidebar, .axwiz-nav-bar, .axwiz-payment-badges { display: none; }
  #axwiz-panel-success { display: block !important; }
  .axwiz-success-wrap { color: black; }
}

/* ── checkout.css cross-browser fixes ─────────────────────────── */
.aac-booking-form input,
.aac-booking-form select,
.aac-booking-form textarea {
  caret-color: var(--aa-pub-primary, #FF6B35);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-text-size-adjust: 100%;
}
.aac-booking-form input:-webkit-autofill,
.aac-booking-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--axwiz-input-bg, #0f1117) inset !important;
  -webkit-text-fill-color: var(--axwiz-input-text, #E8EAF0) !important;
  caret-color: var(--aa-pub-primary, #FF6B35) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TIP SECTION
   ═══════════════════════════════════════════════════════════════ */
.axwiz-tip-section {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.axwiz-tip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--axwiz-text, #E8EAF0);
}
.axwiz-tip-subtitle {
  font-size: .78rem;
  font-weight: 500;
  color: var(--axwiz-muted, #7B8099);
  opacity: 1;
}
.axwiz-tip-btns {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.axwiz-tip-btn {
  flex: 1;
  min-width: 54px;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--axwiz-text, #E8EAF0);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  touch-action: manipulation;
  min-height: 40px;
}
.axwiz-tip-btn:hover {
  border-color: var(--axwiz-primary, #FF6B35);
  color: var(--axwiz-primary, #FF6B35);
  background: rgba(255,107,53,.07);
}
.axwiz-tip-btn--active {
  border-color: var(--axwiz-primary, #FF6B35) !important;
  background: var(--axwiz-primary, #FF6B35) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.axwiz-tip-btn--custom {
  border-style: dashed;
}
.axwiz-tip-custom-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.axwiz-tip-dollar {
  font-size: 1rem;
  font-weight: 700;
  color: var(--axwiz-primary, #FF6B35);
  flex-shrink: 0;
}
.axwiz-tip-input {
  flex: 1;
  max-width: 160px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  caret-color: var(--axwiz-primary, #FF6B35);
}
.axwiz-tip-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,107,53,.07);
  border: 1px solid rgba(255,107,53,.18);
  font-size: .82rem;
  color: var(--axwiz-primary, #FF6B35);
  font-weight: 600;
}
@media (max-width: 420px) {
  .axwiz-tip-btn { font-size: .76rem; padding: 8px 4px; }
}

/* ══════════════════════════════════════════════════════════
   Multi-Size Checkbox Dropdown for Addon Cards
   ══════════════════════════════════════════════════════════ */

/* Toggle button that opens the size panel */
.axwiz-size-toggle-btn {
  width: 100%;
  margin: 8px 0 0;
  padding: 9px 14px;
  background: rgba(99,102,241,.12);
  border: 1.5px solid rgba(99,102,241,.40);
  border-radius: 8px;
  color: #c7d2fe;             /* brighter than before — easier to read */
  font-size: .84rem;          /* up from .80 */
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: background .15s, border-color .15s;
  letter-spacing: .01em;
}
.axwiz-size-toggle-btn:hover {
  background: rgba(99,102,241,.22);
  border-color: rgba(99,102,241,.70);
  color: #e0e7ff;
}
.axwiz-size-toggle-btn .axwiz-stb-badge {
  background: #6366F1;
  color: #fff;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: .74rem;
  font-weight: 700;
  display: none;
  white-space: nowrap;
}
.axwiz-size-toggle-btn.has-selection {
  border-color: #6366F1;
  background: rgba(99,102,241,.20);
  color: #e0e7ff;
}
.axwiz-size-toggle-btn.has-selection .axwiz-stb-badge {
  display: inline-block;
}

/* Dropdown panel — higher contrast surface */
.axwiz-size-dropdown {
  display: none;
  background: #141620;        /* slightly darker than card for contrast */
  border: 1.5px solid #6366F1;
  border-radius: 8px;
  margin-top: 5px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.axwiz-size-dropdown.open {
  display: block;
}
.axwiz-size-dropdown-header {
  padding: 8px 14px;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #a5b4fc;             /* indigo-300 — readable against dark bg */
  border-bottom: 1px solid rgba(99,102,241,.25);
  background: rgba(99,102,241,.10);
}

/* One row per size */
.axwiz-size-row-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;         /* more breathing room — easier to tap */
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .12s;
}
.axwiz-size-row-item:last-child { border-bottom: none; }
.axwiz-size-row-item:hover { background: rgba(255,255,255,.04); }

/* Checked row: distinct highlight so user clearly sees selected sizes */
.axwiz-size-row-item.checked {
  background: rgba(99,102,241,.10);
  border-bottom-color: rgba(99,102,241,.20);
}
.axwiz-size-row-item.checked:hover { background: rgba(99,102,241,.16); }

/* Checkbox — larger, easier to tap */
.axwiz-size-row-item input[type="checkbox"] {
  accent-color: #6366F1;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Size label — larger, high-contrast */
.axwiz-size-row-label {
  flex: 1;
  min-width: 0;
  font-size: .88rem;          /* up from .82 — readable at a glance */
  font-weight: 600;
  color: #E8EAF0;             /* explicit light — no muted colour for labels */
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.axwiz-size-row-label small {
  color: #9ca3af;             /* slightly brighter than before */
  font-size: .76rem;
  font-weight: 400;
}
/* Checked label gets accent colour so user sees what's selected */
.axwiz-size-row-item.checked .axwiz-size-row-label {
  color: #c7d2fe;
}

/*
  Per-size stepper — FIXED WIDTH so every row's − qty + group
  starts at exactly the same x-position regardless of label length.
  width: 96px = 30 + 6 + 24 + 6 + 30  (btn gap val gap btn)
*/
.axwiz-size-row-stepper {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: 96px;          /* fixed — pins stepper column to right edge */
  flex-shrink: 0;       /* never compress below 96px */
}
.axwiz-size-row-item.checked .axwiz-size-row-stepper {
  display: flex;
}

/* − and + buttons: equal square, vertically centred */
.axwiz-size-qty-btn {
  width: 30px;
  height: 30px;          /* explicit height = same as width → perfect circle */
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: var(--axwiz-text, #E8EAF0);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, border-color .12s, opacity .12s;
  flex-shrink: 0;
  user-select: none;
  padding: 0;            /* reset any UA padding that skews height */
  box-sizing: border-box;
}
.axwiz-size-qty-btn:hover  { background: rgba(99,102,241,.28); border-color: var(--axwiz-outline, #6366F1); }
.axwiz-size-qty-btn:active { transform: scale(.92); }
.axwiz-size-qty-btn:disabled,
.axwiz-size-qty-btn.disabled { opacity: .28; cursor: not-allowed; pointer-events: none; }

/* Qty number — fixed width + same height as buttons so the trio is one line */
.axwiz-size-qty-val {
  width: 24px;           /* fixed — doesn't shift when value goes 1→10 */
  height: 30px;          /* match button height exactly */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .88rem;
  font-weight: 800;
  color: #a5b4fc;
  background: rgba(99,102,241,.12);
  border-radius: 5px;
  box-sizing: border-box;
}

/* Card total-qty badge when sizes are selected */
.axwiz-addon-size-summary {
  padding: 5px 10px 8px;
  font-size: .75rem;
  color: #a5b4fc;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   BOOKING SUMMARY — CLEAN TWO-COLUMN RECEIPT LAYOUT
   
   Design rules:
   • Every row is flex, space-between. Label left, amount right.
   • All amounts are right-aligned with tabular-nums — digits stack.
   • No sign column, no icon column. Signs are part of the
     amount string styled inline. Labels have no forced indent.
   • Font size / weight / colour controlled by CSS variables
     injected from PHP (admin settings propagate cleanly).
   • Modifiers (.sp-row--tax etc.) change colour only — never
     layout, padding, or font-size, which keeps every row
     visually consistent.
   ═══════════════════════════════════════════════════════════ */

/* ── Section divider ─────────────────────────────────────── */
.sp-section-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 4px;
}
.sp-section-divider::before,
.sp-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.07);
}
.sp-section-divider span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.22);
  white-space: nowrap;
}

/* ── Base row ────────────────────────────────────────────── */
.sp-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 20px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.sp-row:last-child { border-bottom: none; }

/* ── Label ───────────────────────────────────────────────── */
.sp-lbl {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--axwiz-sum-row-size, 14px);
  font-weight: 500;
  color: #9CA3AF;
  text-align: left;
  min-width: 0;
  flex: 1;
}
.sp-lbl-icon {
  width: 16px;
  text-align: center;
  font-size: 11px;
  flex-shrink: 0;
  opacity: .6;
}
.sp-lbl-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-lbl-sub {
  font-size: calc(var(--axwiz-sum-row-size, 14px) * .82);
  font-weight: 400;
  opacity: .7;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Value ───────────────────────────────────────────────── */
/*
  Simple right-aligned cell. min-width: 88px keeps columns
  visually consistent. font-variant-numeric: tabular-nums
  means all digits are monospaced — decimal points stack.
  No sign sub-columns. Amount text is the full string: $X.XX
*/
.sp-val {
  min-width: 88px;
  text-align: right;
  font-size: var(--axwiz-sum-row-size, 14px);
  font-weight: 700;
  /* Default color via CSS variable so per-row overrides (deposit, tax, tip)
     can actually take effect. Hardcoded #E8EAF0 here blocked the deposit
     color customization setting from being applied. */
  color: var(--axwiz-sum-val-color, #E8EAF0);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  flex-shrink: 0;
}

/* ── Addon rows ──────────────────────────────────────────── */
.sp-addon-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 20px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.sp-addon-row:last-child { border-bottom: none; }

.sp-addon-lbl {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--axwiz-sum-row-size, 14px);
  text-align: left;
  min-width: 0;
  flex: 1;
}
.sp-addon-icon {
  width: 16px;
  text-align: center;
  font-size: 10px;
  color: #A78BFA;
  flex-shrink: 0;
}
.sp-addon-name {
  color: #E8EAF0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sp-addon-qty {
  color: #9CA3AF;
  font-size: calc(var(--axwiz-sum-row-size, 14px) * .86);
  white-space: nowrap;
  flex-shrink: 0;
}
.sp-addon-val {
  min-width: 88px;
  text-align: right;
  font-size: var(--axwiz-sum-row-size, 14px);
  font-weight: 700;
  color: #A78BFA;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ── Row variants ────────────────────────────────────────── */
/* Session / Deposit — font-size, color and align driven by admin settings */
#axwiz-sum-base-row .sp-lbl  {
  color: var(--axwiz-deposit-font-color, #E8EAF0); font-weight: 600;
  font-size:  var(--axwiz-deposit-font-size,  var(--axwiz-sum-row-size, 14px));
  text-align: var(--axwiz-deposit-text-align, left);
}
#axwiz-sum-base-row .sp-val  {
  color: var(--axwiz-deposit-font-color, #E8EAF0); font-weight: 600;
  font-size:  var(--axwiz-deposit-font-size,  var(--axwiz-sum-row-size, 14px));
  text-align: var(--axwiz-deposit-text-align, right);
}

/* Balance due */
.sp-row--balance {
  border-top: 1px dashed rgba(129,140,248,.22);
  border-bottom: 1px dashed rgba(129,140,248,.12);
  background: rgba(99,102,241,.04);
}
.sp-lbl--balance { color: #818CF8; font-weight: 500; }
.sp-val--balance { color: #818CF8; font-weight: 600; }

/* Subtotal */
.sp-row--subtotal {
  border-top: 1px solid rgba(255,255,255,.10) !important;
  padding-top: 9px !important;
  margin-top: 2px;
}
.sp-lbl--subtotal {
  color: #CBD5E1; font-weight: 600;
  font-size:  var(--axwiz-subtotal-font-size,  var(--axwiz-sum-row-size, 14px));
  text-align: var(--axwiz-subtotal-text-align, left);
}
.sp-val--subtotal {
  color: #CBD5E1; font-weight: 700;
  font-size:  var(--axwiz-subtotal-font-size,  var(--axwiz-sum-row-size, 14px));
  text-align: var(--axwiz-subtotal-text-align, right);
}

/* Discount */
.sp-lbl--discount { color: #10B981; }
.sp-val--discount { color: #10B981; }

/* Tax — colour/size/weight/align from admin CSS vars */
.sp-lbl--tax,
.sp-val--tax {
  color:       var(--axwiz-tax-color,       #C99A2E);
  font-size:   var(--axwiz-tax-font-size,   var(--axwiz-sum-row-size, 14px));
  font-weight: var(--axwiz-tax-font-weight, 600);
}
.sp-lbl--tax { text-align: var(--axwiz-tax-text-align, left); }
.sp-val--tax { text-align: var(--axwiz-tax-text-align, right); }

/* Tip — colour/size/weight/align from admin CSS vars */
.sp-lbl--tip,
.sp-val--tip {
  color:       var(--axwiz-tip-color,       #FF6B35);
  font-size:   var(--axwiz-tip-font-size,   var(--axwiz-sum-row-size, 14px));
  font-weight: var(--axwiz-tip-font-weight, 600);
}
.sp-lbl--tip { text-align: var(--axwiz-tip-text-align, left); }
.sp-val--tip { text-align: var(--axwiz-tip-text-align, right); }

/* ── Grand Total row ─────────────────────────────────────── */
.sp-row--total {
  border-top: 1.5px solid rgba(255,255,255,.12) !important;
  border-bottom: none !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  margin-top: 3px;
  background: rgba(255,107,53,.03);
  align-items: center;
}
.sp-total-lbl {
  font-size: var(--axwiz-tax-font-size, var(--axwiz-sum-row-size, 14px));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #E8EAF0;
  flex: 1;
  text-align: left;
}
.sp-total-val {
  text-align: right;
  font-size: var(--axwiz-tax-font-size, var(--axwiz-sum-row-size, 14px));
  font-weight: 900;
  color: #FF6B35;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   TERMS & CONDITIONS / CANCELLATION POLICY AGREEMENT
   ═══════════════════════════════════════════════════════════ */

.axwiz-terms-wrap {
  margin: 16px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Alignment driven by admin Feature Settings — default center */
  align-items: var(--axwiz-terms-align, center);
}

.axwiz-terms-row {
  display: flex;
  align-items: flex-start;
  /* Match wrap alignment so label sits correctly for left/center/right */
  justify-content: var(--axwiz-terms-align, center);
  width: 100%;
}

.axwiz-terms-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--aa-pub-text, #E8EAF0);
  max-width: 480px;  /* cap width so centered text doesn't span the full panel */
  width: 100%;
  position: relative; /* contain the absolutely-positioned native input */
}

/* Hide native checkbox — replaced by styled box */
.axwiz-terms-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  margin: 0;
}

/* Custom checkbox box */
.axwiz-terms-checkbox-box {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  min-width: 20px; /* prevent flex squeeze */
  border-radius: 5px;
  border: 2px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.07);
  margin-top: 1px;
  transition: border-color .15s, background .15s;
  box-sizing: border-box;
}

/* Checked state */
.axwiz-terms-label input[type="checkbox"]:checked + .axwiz-terms-checkbox-box {
  background: var(--axwiz-primary, #FF6B35);
  border-color: var(--axwiz-primary, #FF6B35);
}
.axwiz-terms-label input[type="checkbox"]:checked + .axwiz-terms-checkbox-box::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* Focus ring */
.axwiz-terms-label input[type="checkbox"]:focus + .axwiz-terms-checkbox-box {
  outline: 2px solid var(--axwiz-primary, #FF6B35);
  outline-offset: 2px;
}

.axwiz-terms-text {
  flex: 1;
  padding-top: 1px;
}

.axwiz-terms-link {
  color: var(--axwiz-primary, #FF6B35);
  text-decoration: underline;
  font-weight: 600;
}
.axwiz-terms-link:hover { opacity: .8; }

/* ── Terms Modal ───────────────────────────────────── */
.axwiz-terms-modal-box {
  max-width: 580px;
  width: 94%;
  border-radius: 16px;
  background: var(--axwiz-surface, #1a1d27);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}

.axwiz-terms-content p  { margin: 0 0 10px; }
.axwiz-terms-content ul { margin: 0 0 10px 20px; }
.axwiz-terms-content li { margin-bottom: 4px; }
.axwiz-terms-content a  { color: var(--axwiz-primary, #FF6B35); text-decoration: underline; }


/* ══════════════════════════════════════════════════════════════
   LANE / ROOM PICKER  —  Step 2 (Date & Time)
   Matches the service card visual language from Step 1.
══════════════════════════════════════════════════════════════ */

/* ── Section header ──────────────────────────────────────── */
.axwiz-lane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.axwiz-lane-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.axwiz-lane-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF6B35, #FFB347);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(255,107,53,.35);
}
.axwiz-lane-header-sub {
  color: #7B8099;
  font-size: .82rem;
  margin-top: 3px;
}
.axwiz-lane-count-badge {
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.28);
  color: #10B981;
  font-size: .78rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── Lane card grid ──────────────────────────────────────── */
.axwiz-lane-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 560px) {
  .axwiz-lane-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 420px) {
  .axwiz-lane-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ── Individual lane card ────────────────────────────────── */
.axwiz-lane-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 12px 14px;
  background: var(--axwiz-surface, #1e2230);
  border: 2px solid var(--axwiz-border, rgba(255,255,255,.09));
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
  text-align: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.axwiz-lane-card:hover {
  border-color: rgba(255,107,53,.5);
  background: rgba(255,107,53,.05);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.axwiz-lane-card.selected {
  border-color: var(--axwiz-primary, #FF6B35);
  background: rgba(255,107,53,.09);
  box-shadow: 0 0 0 1px var(--axwiz-primary, #FF6B35), 0 6px 24px rgba(255,107,53,.18);
  transform: translateY(-2px);
}

/* ── Checkbox in top-right (matches service card) ────────── */
.axwiz-lane-card-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid rgba(255,255,255,.18);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
  font-size: .6rem;
  color: transparent;
}
.axwiz-lane-card.selected .axwiz-lane-card-check {
  background: var(--axwiz-primary, #FF6B35);
  border-color: var(--axwiz-primary, #FF6B35);
  color: #fff;
}

/* ── Lane icon circle ────────────────────────────────────── */
.axwiz-lane-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,107,53,.25), rgba(255,179,71,.2));
  border: 2px solid rgba(255,107,53,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #FF6B35;
  transition: background .18s, border-color .18s;
}
.axwiz-lane-card.selected .axwiz-lane-card-icon {
  background: linear-gradient(135deg, #FF6B35, #FFB347);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(255,107,53,.4);
}

/* ── Lane name + capacity text ───────────────────────────── */
.axwiz-lane-card-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--axwiz-text, #E8EAF0);
  line-height: 1.25;
  margin: 0;
}
.axwiz-lane-card-cap {
  font-size: .74rem;
  color: #7B8099;
  margin: 0;
  line-height: 1.3;
}

/* ── Auto-selected badge ─────────────────────────────────── */
.axwiz-lane-auto-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.3);
  color: #10B981;
  font-size: .67rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .02em;
}

/* ── Skeleton loaders ────────────────────────────────────── */
.axwiz-lane-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 4px;
}
.axwiz-lane-skeleton {
  height: 130px;
  border-radius: 14px;
  /* FIX (portrait freeze): replaced background-position animation with a
     pseudo-element translateX shimmer. background-position animation forces
     a repaint on every frame; on iOS portrait inside a fixed overlay this
     consumes enough CPU to freeze touch input. transform:translateX runs
     entirely on the GPU compositor thread — zero main-thread repaint. */
  background: rgba(255,255,255,.04);
  overflow: hidden;
  position: relative;
}
.axwiz-lane-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.08) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: axwiz-shimmer 1.4s infinite;
}
@keyframes axwiz-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── All-booked warning ──────────────────────────────────── */
.axwiz-lane-none {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(239,68,68,.06);
  border: 1.5px solid rgba(239,68,68,.25);
  border-radius: 12px;
  color: #F87171;
  font-size: .88rem;
}
.axwiz-lane-none i {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.axwiz-lane-none strong {
  color: #F87171;
  display: block;
  margin-bottom: 4px;
}
.axwiz-lane-none p {
  margin: 0;
  color: rgba(248,113,113,.75);
  font-size: .82rem;
}

/* ── Separator line above lane section ───────────────────── */
.axwiz-lane-divider {
  height: 1px;
  background: var(--axwiz-border, rgba(255,255,255,.08));
  margin: 24px 0;
}

/* ══════════════════════════════════════════════════════════════════
   CROSS-BROWSER & CROSS-DEVICE COMPATIBILITY PATCHES
   Targets: Chrome, Safari (iOS/macOS), Firefox, Edge, Brave,
            Android WebView, Samsung Internet
   ══════════════════════════════════════════════════════════════════ */

/* ── Prevent iOS Safari input zoom (font-size < 16 px triggers zoom) ── */
.axwiz-wrap input,
.axwiz-wrap select,
.axwiz-wrap textarea {
  font-size: max(16px, 1em);   /* never below 16 px on iOS */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ── Remove default select arrow in Edge / IE ──────────────────── */
.axwiz-wrap select::-ms-expand { display: none; }

/* ── Tap highlight — remove blue flash on Android Chrome / Samsung ── */
.axwiz-wrap *      { -webkit-tap-highlight-color: transparent; }
.axwiz-wrap button { touch-action: manipulation; }

/* ── Scrollable inner panels ──────────────────────────────────── */
/*
 * FIX (portrait freeze): REMOVED -webkit-overflow-scrolling:touch from
 * .axwiz-main / .axwiz-panel / .axwiz-ts-body.
 *
 * The outer .axwiz-outer (position:fixed, overflow-y:auto) is already the
 * scroll root and has -webkit-overflow-scrolling:touch. Applying it to
 * descendant panels that don't independently scroll creates duplicate
 * momentum-scroll contexts. iOS Safari then cannot determine which context
 * should own each touch gesture — the result is the portrait freeze where
 * touches register but nothing scrolls.
 *
 * .axwiz-ts-body DOES scroll independently (time-slot list), so it keeps
 * -webkit-overflow-scrolling:touch but with overscroll-behavior:contain to
 * prevent its momentum from bubbling up to the outer overlay.
 */
.axwiz-ts-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ── Firefox: hide scrollbar track without losing scroll ability ── */
.axwiz-main,
.axwiz-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,107,53,.3) transparent;
}

/* ── WebKit scrollbar styling (Chrome, Safari, Edge, Brave) ────── */
.axwiz-main::-webkit-scrollbar,
.axwiz-panel::-webkit-scrollbar { width: 4px; }
.axwiz-main::-webkit-scrollbar-track,
.axwiz-panel::-webkit-scrollbar-track { background: transparent; }
.axwiz-main::-webkit-scrollbar-thumb,
.axwiz-panel::-webkit-scrollbar-thumb {
  background: rgba(255,107,53,.3);
  border-radius: 2px;
}

/* ── Flexbox gap fallback for Safari < 14 ──────────────────────── */
@supports not (gap: 1px) {
  .axwiz-wrap    { gap: 0 !important; }
  .axwiz-sidebar { margin-right: 0 !important; }
  .axwiz-step    { margin-bottom: 2px !important; }
  /* Service and addon grids use negative-margin pattern instead of gap */
  .axwiz-service-grid  { margin: -7px !important; }
  .axwiz-service-grid > * { margin: 7px !important; }
  .axwiz-addons-grid   { margin: -5px !important; }
  .axwiz-addons-grid > * { margin: 5px !important; }
}

/* ── CSS custom property fallback for IE 11 ─────────────────────
   IE 11 doesn't support CSS variables; give it a dark base.        */
/* Legacy IE: background fallback */
.axwiz-outer { background: #0f1117; }
.axwiz-wrap  { background: #1a1d27; color: #E8EAF0; }

/* ── Landscape mode on small phones (iPhone SE landscape etc.) ─── */
@media (max-height: 500px) and (orientation: landscape) {
  .axwiz-sidebar {
    width: 56px !important;
    padding: 12px 8px !important;
    overflow: hidden;
  }
  .axwiz-step-label,
  .axwiz-brand { display: none !important; }
  .axwiz-step-dot { margin: 0 auto; }
  .axwiz-wrap { min-height: 100vh; }
  .axwiz-outer { padding: 0 !important; }
}

/* ── Windows high-contrast mode (Edge / Chrome on Windows) ─────── */
@media (forced-colors: active) {
  .axwiz-wrap { border: 2px solid ButtonText; }
  .axwiz-btn  { forced-color-adjust: none; }
}

/* ── Print: hide the wizard shell, show only confirmation ────────── */
@media print {
  .axwiz-sidebar, .axwiz-stepper-mobile { display: none !important; }
  .axwiz-wrap { box-shadow: none; border: none; }
}

/* ── Subtotal row: ensure flex display so value stays right-aligned ── */
.sp-row--subtotal {
  display: flex !important;
}



/* ── Amount column alignment: deposit / balance / tax / tip ──────────
   All four values must share the same font-size and fixed column width
   so their right edges stack perfectly regardless of admin size settings.
   ─────────────────────────────────────────────────────────────────── */

/* All amount values: same fixed column width so every row's amount aligns */
#axwiz-sum-base-row .sp-val,
.sp-val--balance,
.sp-val--tax,
.sp-val--tip {
  width: 96px;
  min-width: 96px;
  max-width: 96px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Deposit + Balance due: color and font-size both controlled by admin settings.
   These rules are authoritative — do not add duplicate font-size rules below. */
#axwiz-sum-base-row .sp-val,
.sp-val--balance {
  color: var(--axwiz-deposit-font-color, #E8EAF0);
}

/* Sales Tax + Tip share the same font-size */
.sp-val--tax,
.sp-val--tip {
  font-size: var(--axwiz-tax-font-size, var(--axwiz-sum-row-size, 14px));
}

/* ── Flash Sale Banner ───────────────────────────────────── */
.axwiz-flash-sale-badge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 11px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,107,53,.18) 0%, rgba(255,64,129,.14) 100%);
  border: 1.5px solid rgba(255,107,53,.45);
  animation: axFlashPulse 2.4s ease-in-out infinite;
}

@keyframes axFlashPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,53,.0); }
  50%       { box-shadow: 0 0 0 6px rgba(255,107,53,.18); }
}

.axwiz-flash-label {
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .06em;
  color: #FF6B35;
  text-transform: uppercase;
}

.axwiz-flash-pct {
  font-weight: 800;
  font-size: 1.15rem;
  color: #FF6B35;
  letter-spacing: -.01em;
}

.axwiz-flash-sep {
  color: rgba(255,107,53,.5);
  font-size: .9rem;
}

.axwiz-flash-msg {
  font-size: .82rem;
  color: var(--axwiz-text, #E8EAF0);
  opacity: .88;
  font-weight: 500;
}

/* Discount row when flash sale applied */
.sp-row--discount .sp-lbl-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ── Motion: tap and select feedback ───────────────────────────────── */
.axwiz-service-card, .axwiz-lane-card, .axwiz-cal-day {
  transition: border-color .18s, box-shadow .18s, background-color .18s,
    transform .38s linear(0, 0.053, 0.168, 0.313, 0.455, 0.586, 0.698, 0.789, 0.861, 0.916, 0.954, 0.98, 0.997, 1.007, 1.012, 1.014, 1.014, 1.013, 1.011, 1.009, 1.007, 1.005, 1.003, 1.002, 1.001, 1.001, 1, 1, 1);
}
.axwiz-service-card:active, .axwiz-lane-card:active, .axwiz-cal-day:active { transform: scale(.97); transition-duration: .18s, .18s, .18s, .08s; }
.axwiz-service-card.selected .axwiz-card-check,
.axwiz-lane-card.selected .axwiz-lane-card-check { animation: axwiz-check-pop .45s linear(0, 0.048, 0.156, 0.288, 0.43, 0.564, 0.682, 0.781, 0.86, 0.918, 0.962, 0.992, 1.011, 1.022, 1.027, 1.028, 1.026, 1.023, 1.019, 1.015, 1.011, 1.008, 1.006, 1.003, 1.002, 1.001, 1, 1, 1) both; }
@keyframes axwiz-check-pop { from { transform: scale(.4); opacity: .4; } to { transform: none; opacity: 1; } }
.axwiz-lane-grid > * { animation: axwiz-fadein .3s ease-out both; }
.axwiz-lane-grid > *:nth-child(2) { animation-delay: .03s; } .axwiz-lane-grid > *:nth-child(3) { animation-delay: .06s; }
.axwiz-lane-grid > *:nth-child(4) { animation-delay: .09s; } .axwiz-lane-grid > *:nth-child(n+5) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  .axwiz-service-card, .axwiz-lane-card, .axwiz-cal-day { transition: border-color .18s, box-shadow .18s, background-color .18s; }
  .axwiz-service-card:active, .axwiz-lane-card:active, .axwiz-cal-day:active { transform: none; }
  .axwiz-card-check, .axwiz-lane-card-check, .axwiz-lane-grid > * { animation: none !important; }
}

/* ── Business Kit: category thumbnails & intake questions ── */
.axwiz-cat-group-icon.axwiz-cat-group-thumb { padding: 0; overflow: hidden; background: transparent; }
.axwiz-cat-group-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#axwiz-intake { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 14px; padding: 14px; border: 1px solid var(--axwiz-border); border-radius: var(--axwiz-radius); background: rgba(255,255,255,.02); animation: axwiz-fadein .3s ease-out both; }
.axwiz-intake-q { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.axwiz-intake-q:has(textarea) { grid-column: 1 / -1; }
.axwiz-intake-check { display: flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; padding-top: 22px; }
.axwiz-intake-check input { width: 18px; height: 18px; accent-color: var(--axwiz-primary); }
@media (prefers-reduced-motion: reduce) { #axwiz-intake { animation: none; } }