/* ALTR Tokens (Guest) — light theme */
:root{
  /* Brand */
  --olive:#66694A;
  --midnight:#253243;
  --choco:#4D2F22;
  --terracotta:#B35A32;
  --ochre:#C9903A;
  --charcoal:#212222;
  --slate:#A2A9C2;
  --ivory:#E7E0D2;
  --peach:#EBD4C6;
  --white:#FFFFFF;

  /* RGB for alpha uses */
  --charcoal-rgb:33 34 34;
  --midnight-rgb:37 50 67;

  /* Surfaces & text */
  --bg: var(--ivory);            /* page background */
  --surface:#F0EDE7;             /* CARD background (Soft) — per your request */
  --surface-alt: var(--white);   /* Secondary surface */
  --surface-special: var(--peach);

  --text: var(--charcoal);
  --text-muted: color-mix(in srgb, var(--charcoal) 70%, transparent);

  /* Links */
  --link: var(--terracotta);

  /* Border & accents */
  --border: rgb(var(--charcoal-rgb) / 0.14);
  --accent-main: var(--choco);
  --accent-system: var(--midnight);
  --accent-success: var(--olive);
  --accent-warning: var(--ochre);
  --accent-danger: var(--terracotta);
  --accent-info: var(--slate);

  /* Shape & spacing */
  --radius:0; /* Guest = square */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-6:1.5rem;

  /* Breakpoints (FIX: previously missing) */
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1280px;

  /* Motion */
  --dur-1:120ms;
  --dur-2:180ms;
  --ease:cubic-bezier(.2,0,0,1);
}

@media (prefers-reduced-motion:reduce){
  :root{ --dur-1:0ms; --dur-2:0ms; }
}


/* ALTR Guest Kit — base styles (mobile-first, token-driven) */
/* Global safety: never allow page-wide horizontal scroll */
html, body { overflow-x: hidden; }

/* Source picker: contain everything and clip overflow */
.source-picker { 
  position: relative; 
  overflow: hidden;    /* <-- prevents arrows/track from pushing page width */
}

/* Keep your desktop grid as-is; only mobile becomes carousel */
@media (max-width: 767.98px){
  .source-picker__grid{
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;                /* enables swipe */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 0 var(--space-4);
    margin: 0;
    width: 100%;
    box-sizing: border-box;

    /* Hide the “inbuilt” scrollbar */
    scrollbar-width: none;           /* Firefox */
  }
  .source-picker__grid::-webkit-scrollbar{ display: none; } /* WebKit */

  /* 3 cards visible on phone; adjust if you want 2 */
  .source-card{
    flex: 0 0 calc((100% - 2 * var(--space-3) - 2 * var(--space-4)) / 3);
    scroll-snap-align: center;
    min-width: 120px; /* guard for tiny screens */
  }

  /* Keep nav buttons inside the clipped container */
  .sp-nav{
    position: absolute;
    top: 70%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border);
    background: var(--surface);
    z-index: 2;
    /* make sure taps go to buttons but not block swipe through the middle */
  }
  .sp-prev{ left: var(--space-2); }
  .sp-next{ right: var(--space-2); }

  /* Edge fades (visual hint to swipe) */
  .source-picker::before,
  .source-picker::after{
    content:"";
    position:absolute; top:0; bottom:0; width:24px; z-index:1;
    pointer-events:none;               /* doesn't block taps */
  }
  .source-picker::before{ left:0;  background: none; }
  .source-picker::after { right:0; background: none; }

  /* Keep the tip visible and centered on mobile */
  .carousel__hint{
    display:block;
    text-align:center;
    padding: var(--space-2) 0;
  }
}

/* Reset & base */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body {
  font-family: "Work Sans";
  line-height: 1.6;
}

/* Typography */
h1,h2,h3,h4 { font-family: "Jura", ui-sans-serif, system-ui; line-height: 1.25; margin: 0 0 var(--space-3); }
h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem); }
h2 { font-size: clamp(1.3rem, 1.0rem + 1.5vw, 1.8rem); }
h3 { font-size: clamp(1.15rem, 1rem + 1vw, 1.4rem); }
p { margin: 0 0 var(--space-3); color: var(--text); font-family:'Work Sans'}
.muted { color: var(--text-muted); }
.small { font-size:.775rem;    font-weight: 400!important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Layout helpers */
.container { max-width: 1100px; margin: 0 auto; padding: var(--space-6) var(--space-4); }
.section { margin-block: var(--space-6); }
.row { display:flex; gap: var(--space-3); align-items:center; flex-wrap:wrap; }
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Links (FIX: clearer hover/focus) */
a { color: var(--link); text-underline-offset: 3px; transition: color var(--dur-1) var(--ease), text-decoration-thickness var(--dur-1) var(--ease); }
a:hover { text-decoration-thickness: 2px; color: color-mix(in srgb, var(--link) 86%, black 14%); }
a:focus-visible { outline: 2px solid var(--accent-system); outline-offset: 2px; }

/* Cards (FIX: card hover feedback) */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.card:hover { border-color: rgb(var(--charcoal-rgb) / 0.25); box-shadow: 0 1px 0 0 rgb(var(--charcoal-rgb) / 0.10); }
.card.alt { background: var(--surface-alt); }
.card.special { background: var(--surface-special); }
.card--primary{ background: var(--surface); }
.card--secondary{ background: var(--surface-alt); }
.card--form{ background: var(--surface-alt); border:0.5px solid #cecece; padding:6%;}
.card--promo{ background: var(--surface-special); }
.card__head{ margin-bottom: var(--space-3); }
.card__title{ margin-top: var(--space-3); }


/* Buttons (FIX: more obvious hover/active) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .625rem 1rem; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; font-family:'Work Sans';
  font-weight: 500; text-decoration: none;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), filter var(--dur-1) var(--ease);
}
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent-system); outline-offset: 2px; }

.btn-primary { background: var(--accent-main); color: var(--white); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { filter: brightness(0.9); }

.btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: rgb(var(--charcoal-rgb) / 0.05); border-color: rgb(var(--charcoal-rgb) / 0.25); }
.btn-secondary:active { background: rgb(var(--charcoal-rgb) / 0.1); }

.btn-success { background: var(--accent-success); color: var(--white); }
.btn-success:hover { filter: brightness(1.06); }
.btn-success:active { filter: brightness(0.9); }

.btn-warning { background: var(--accent-warning); color: var(--white); }
.btn-warning:hover { filter: brightness(1.06); }
.btn-warning:active { filter: brightness(0.9); }

.btn-danger { background: var(--accent-danger); color: var(--white); }
.btn-danger:hover { filter: brightness(1.06); }
.btn-danger:active { filter: brightness(0.9); }

.btn-quiet { background: transparent; color: var(--text); text-decoration: underline; border: 1px solid transparent; }
.btn-quiet:hover { color: var(--accent-system); }

/* Forms (FIX: consistent, end-to-end inputs) */
.form { display: grid; gap: .75rem; font-family: 'Jura'!important; }
.form--stack { width: 100%; }
.form__field { display: grid; gap: .375rem; font-weight: 600; }
.form__field > input[type="text"],
.form__field > input[type="email"],
.form__field > select,
.form__field > textarea {
  width: 100%; min-height: 44px; padding: .65rem .75rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);font-family: 'Jura'!important; 
}
input::placeholder, textarea::placeholder { color: var(--text-muted);font-family: 'Jura'!important;  }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-system); outline-offset: 2px;font-family: 'Jura'!important;  }

/* Switch (toggle) */
.switch { display: inline-flex; align-items: center; gap: .5rem; }
.switch input { appearance: none; width: 42px; height: 24px; background: rgb(var(--charcoal-rgb) / 0.3);
  border-radius: var(--radius); position: relative; outline: none; transition: background var(--dur-1) var(--ease);
}
.switch input::after { content: ""; width: 20px; height: 20px; background: var(--white); position: absolute; top: 2px; left: 2px; transition: transform var(--dur-1) var(--ease); }
.switch input:checked { background: var(--accent-system); }
.switch input:checked::after { transform: translateX(18px); }

/* Switch (toggle) */
.switch-special { display: inline-flex; align-items: center; gap: .5rem; }
.switch-special input { appearance: none; width: 42px; height: 24px; background: var(--accent-success);
  border-radius: var(--radius); position: relative; outline: none; transition: background var(--dur-1) var(--ease);
}
.switch-special input::after { content: ""; width: 20px; height: 20px; background: #fff; position: absolute; top: 2px; left: 2px; transition: transform var(--dur-1) var(--ease); }
.switch-special input:checked { background: var(--accent-system); }
.switch-special input:checked::after { transform: translateX(18px); }


/* Progress */
.progress { background: #f0ede7; border: 1px solid var(--border); border-radius: var(--radius); height: 10px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent-system); }
.progress.success > span { background: var(--accent-success); }
.progress.warning > span { background: var(--accent-warning); }
.progress.danger > span { background: var(--accent-danger); }

/* Chips / badges */
.badge { display: inline-block; padding: .25rem .5rem; border-radius: var(--radius); font-size: .875rem; border: 1px solid transparent;    font-family: 'Work Sans';font-weight:800;  }
.badge.info { background: color-mix(in srgb, var(--accent-info) 20%, transparent); color: var(--text); border-color: color-mix(in srgb, var(--accent-info) 55%, transparent);    font-family: 'Work Sans';font-weight:500;  }
.badge.success { background: color-mix(in srgb, var(--accent-success) 20%, transparent); border-color: color-mix(in srgb, var(--accent-success) 55%, transparent);    font-family: 'Work Sans'; font-weight:800; }
.badge.warning { background: color-mix(in srgb, var(--accent-warning) 20%, transparent); border-color: color-mix(in srgb, var(--accent-warning) 55%, transparent);    font-family: 'Work Sans';font-weight:800;      width: 100%;
    margin: 15px 0px;}
.badge.danger { background: color-mix(in srgb, var(--accent-danger) 20%, transparent); border-color: color-mix(in srgb, var(--accent-danger) 55%, transparent);    font-family: 'Work Sans'; font-weight:800; }
.badge.neutral { background: transparent; border-color: var(--border); color: var(--text);    font-family: 'Work Sans'; font-weight:600;font-size: 12px;
    margin-bottom: 10px; }

/* Alerts */
.alert { position:relative; border: 1px solid var(--border); padding: .75rem 1rem; border-radius: var(--radius); background: var(--surface-alt); }
.alert::before{ content:""; position:absolute; inset-block:0; inset-inline-start:0; width:4px; background: var(--accent-info); }
.alert.info{ background: color-mix(in srgb, var(--accent-info) 12%, var(--surface-alt)); }
.alert.info::before{ background: var(--accent-info); }
.alert.success{ background: color-mix(in srgb, var(--accent-success) 12%, var(--surface-alt)); }
.alert.success::before{ background: var(--accent-success); }
.alert.warning{ background: color-mix(in srgb, var(--accent-warning) 12%, var(--surface-alt)); }
.alert.warning::before{ background: var(--accent-warning); }
.alert.danger{ background: color-mix(in srgb, var(--accent-danger) 12%, var(--surface-alt)); }
.alert.danger::before{ background: var(--accent-danger); }

/* Media aspect helpers */
.media{ position:relative; width:100%; background: var(--surface-alt); border:0px solid var(--border); }
.media img{ width:100%; height:100%; display:block; }
.media--16x9{ aspect-ratio: 16/9; }
.media--4x3{ aspect-ratio: 4/3; }
.media--1x1{ aspect-ratio: 1/1; }
.media--cover img{ object-fit: cover; }
.media--contain img{ object-fit: contain; background: var(--white); }
.media--fullbleed{ border:none; background: transparent; }

/* Carousel (FIX: mobile snap + desktop grid) */
.carousel{ overflow-x:auto; -webkit-overflow-scrolling: touch; scroll-padding-inline: var(--space-4); }
.carousel__track{ display:flex; gap: var(--space-4); scroll-snap-type:x mandatory; padding: 0 var(--space-4) var(--space-2); }
.carousel__card{ flex: 0 0 85%; scroll-snap-align: center; }
.carousel__hint{ margin-top: var(--space-2); }
@media (min-width: var(--bp-sm)){
  .carousel{ overflow: visible; }
  .carousel__track{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4); padding: 0; scroll-snap-type: none; }
  .carousel__card{ flex: 0 0 auto; scroll-snap-align: none; }
}

/* Tap-to-Expand list */
.taplist{ list-style:none; margin:0; padding:0; border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; }
.taplist__item + .taplist__item{ border-top:1px solid var(--border); }
.taplist__row{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); padding: .75rem 1rem; }
.taplist__lead{ display:flex; gap: var(--space-3); align-items:center; min-width:0; }
.taplist__cell--primary{ display:inline-block; max-width: 18ch; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.taplist__cell--secondary{ display:inline-block; max-width: 18ch; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.taplist__status{ display:flex; gap: var(--space-3); align-items:center; }
.taplist__toggle{ min-height: 36px; }
.taplist__details[hidden]{ display:none; }
.taplist__details{ padding: .75rem 1rem; background: var(--surface-alt); border-top:1px solid var(--border); }
.taplist__grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); }
@media (max-width: 420px){
  .taplist__grid{ grid-template-columns: 1fr 1fr; }
}

/* Responsive grid demo 4→3→2→1 (FIX: uses new tokens) */
.grid--demo{ display:grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: var(--bp-sm)){ .grid--demo{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: var(--bp-md)){ .grid--demo{ grid-template-columns: repeat(3,1fr); } }
@media (min-width: var(--bp-lg)){ .grid--demo{ grid-template-columns: repeat(4,1fr); } }

/* Logout overlay */
.overlay[hidden]{ display:none; }
.overlay{ position:fixed; inset:0; z-index:50; }
.overlay__backdrop{ position:absolute; inset:0; background: rgb(var(--charcoal-rgb) / .45); }
.overlay__dialog{ position:relative; max-width: min(520px, 92vw); margin: 10vh auto; background: var(--surface); border:1px solid var(--border); padding: var(--space-4); border-radius: var(--radius); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn, .switch input::after, .card { transition: none; }
}

/* ---- Wizard: steps & progress ---- */
.wizard-progress { margin-bottom: var(--space-3); }
.wizard-progress .progress { height: 8px; }
#wizard-progress-bar { display:block; height:100%; background: var(--accent-system); transition: width var(--dur-2) var(--ease); }

.wizard-steps { gap: 3px; }
.wizard-steps .step { opacity: .55; border-color: var(--border); }
.wizard-steps .step.active { opacity: 1; border-color: var(--accent-system); }
.wizard-steps .step.completed { opacity: 1; border-color: var(--accent-success); background: color-mix(in srgb, var(--accent-success) 14%, transparent); }
.wizard-steps .step.upcoming { opacity: .5; }

/* Hide future steps on step 0 */
.wizard-steps.hide-future .step:not([data-step="0"]) { display:none; }

/* ---- Form: neat 2-column grid on ≥ 700px ---- */
.checkin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 700px){
  .checkin-grid { grid-template-columns: 1fr 1fr; }
  .checkin-grid .field-group { min-width: 0; }
  .checkin-grid .actions.full-width { grid-column: 1 / -1; }
  .checkin-grid .field-group[style*="grid-column:1/-1"] { grid-column: 1 / -1 !important; }
}

/* Inputs visual alignment */
.form__field-input, .checkin-grid input[type="text"], .checkin-grid input[type="email"], .checkin-grid input[type="number"], .checkin-grid input[type="time"], .checkin-grid select, .checkin-grid textarea {font-family:'Jura';
  width: 100%;
  min-height: 44px;
  padding: .65rem .75rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* 1) iPhone fix: keep form controls at 16px+ so Safari won't auto-zoom */
@media (max-width: 767.98px){
  input, select, textarea, 
  .form__field-input,
  .checkin-grid input[type="text"],
  .checkin-grid input[type="email"],
  .checkin-grid input[type="number"],
  .checkin-grid input[type="time"],
  .checkin-grid select,
  .checkin-grid textarea {
    font-size: 16px !important;   /* <-- the key */
    line-height: 1.4;
  }

  /* placeholders too, so Safari doesn't compute <16px */
  input::placeholder, textarea::placeholder { font-size: 16px !important; }
}

/* 2) iOS-specific safety (if you want even stricter targeting) */
@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: 16px; }
}

/* 3) Keep tap behavior snappy; avoid double-tap zoom on buttons/links */
button, .btn, a.btn { touch-action: manipulation; }

/* Optional niceties */
html { -webkit-text-size-adjust: 100%; }   /* keep iOS from “helpfully” resizing text */


/* Small helper for tooltip buttons */
.inline-help { display:inline-flex; gap:.35rem; align-items:center; font-weight:600; }
.inline-help .fa-solid { font-size: .9em; color: var(--text-muted); }
.inline-help:hover .fa-solid { color: var(--accent-system); }

/* Segmented toggle shell */
.seg-toggle { display:inline-flex; border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; }
.seg-toggle__btn { padding:.5rem .75rem; cursor:pointer; background: var(--surface); border-right:1px solid var(--border); user-select:none; }
.seg-toggle__btn:last-child { border-right:none; }
.seg-toggle__btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent-system) 12%, var(--surface)); font-weight:700; }

/* Alerts inline (nicer than default) */
.alert.inline { margin-top: .5rem; padding:.5rem .75rem; font-weight:600; }

/* Step badges clarity */
.wizard-steps .step.active   { border-color: var(--accent-system); }
.wizard-steps .step.completed{ border-color: var(--accent-success); }

/* Source picker (progressive enhancement) */
.source-picker { margin-top: var(--space-3);
margin-bottom: var(--space-3);}
.source-picker__grid { display:grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.source-card {
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  background: var(--surface-alt); border:1px solid var(--border); padding: .75rem; cursor:pointer;
  transition: filter var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.source-card.active { border-color: var(--accent-system); }
.source-card:hover  { filter: brightness(1.02); }
.source-card__label { font-weight:500; font-size:.6rem; text-align:center; }

/* Progress animation already in your CSS; ensure visible height */
.wizard-progress .progress { height: 8px; }

/* Source picker container */
.source-picker { margin-top: var(--space-3); position: relative; }

/* Desktop/tablet: keep grid */
.source-picker__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* mobile fallback if no media support */
}

.mb-mobile { margin-bottom: 4%; }

@media (min-width: 768px){ /* desktop breakpoint */
  .mb-mobile { margin-bottom: 0; }
}

/* Cards */
.source-card {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: .75rem;
  cursor: pointer;
  transition: filter var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  min-width: 120px; /* helps when used in carousel */
}
.source-card:hover  { filter: brightness(1.02); }
.source-card.active { border-color: var(--accent-system); }
.source-card .media { width: 50px; height: 50px; }
.source-card__label { font-weight: 600; font-size: .5rem; text-align: center;    letter-spacing: 0.5px;
    text-transform: uppercase; }

/* --- Mobile: turn grid into a horizontal carousel --- */
@media (max-width: 767.98px) {
  .source-picker__grid {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-3);
    scroll-snap-type: x mandatory;
    padding: 0px;
  }
  .source-card {
    flex: 0 0 calc((100% - 2 * var(--space-3) - 2 * var(--space-4)) / 3); /* 3 cards in viewport */
    scroll-snap-align: center;
  }

  /* Carousel controls */
  .sp-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 26px; height:26px;
    border: 1px solid var(--border);
    background: var(--surface);
    z-index: 2;
  }
  .sp-prev { left: 0px; }
  .sp-next { right:0px; }
}

 /* Help hint bubble */
.help-icon {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.help-icon .hint-bubble {
  position: absolute;
  bottom: 125%; left: 50%;
  transform: translateX(-50%);
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
  padding: .5rem .75rem;
  font-size: .8rem;
  line-height: 1.3;
  border-radius: var(--radius);
  width: max-content; max-width: 220px;
  white-space: normal;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-1) var(--ease);
  z-index: 20;
}

/* small arrow */
.help-icon .hint-bubble::after {
  content:"";
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--surface-alt) transparent transparent transparent;
}

/* Show on hover (desktop) */
@media (hover:hover) {
  .help-icon:hover .hint-bubble { opacity: 1; pointer-events: auto; }
}

/* Show on tap/click (mobile) — via JS toggling .active */
.help-icon.active .hint-bubble { opacity: 1; pointer-events: auto; }

/* Make the icon a proper tap target and keep bubble on top */
.help-icon { 
  position: relative; 
  cursor: pointer; 
  display: inline-flex; 
  align-items: center; 
  touch-action: manipulation;  /* faster taps; avoids double events */
  z-index: 30;
}
.help-icon .hint-bubble { z-index: 40; } /* above neighbors */

/* ensure the label container doesn't clip the bubble */
.inline-help,
.Form-ezee-label { position: relative; overflow: visible;font-size: 12px;font-weight:600!important; font-family:'Work Sans'; }

/* bigger tap target + stacking */
.help-icon { position: relative; cursor: pointer; display: inline-flex; align-items: center; touch-action: manipulation; z-index: 30; }
.help-icon .hint-bubble { z-index: 40; }

/* Summary card overrides (uses your tokens) */
.summary-card { padding: var(--space-4); }

/* Table base */
.ezee-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-alt);
  border: 0px solid var(--border);
  padding: 10px!important;
        font-size: 12px!important;
    
}
.ezee-table th,
.ezee-table td {
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.ezee-table th {
  width: 42%;
  text-align: left;
  font-weight: 700;
  background: color-mix(in srgb, var(--midnight) 6%, transparent);
}

/* Remove last row border */
.ezee-table tr:last-child th,
.ezee-table tr:last-child td { border-bottom: none; }

/* Responsive stacking: rows become label/value blocks on narrow screens */
@media (max-width: 640px){
  .table-wrap { overflow: hidden; } /* avoid side-scroll from long values */
  .ezee-table { border: 1px solid var(--border); }
  .ezee-table tbody, .ezee-table tr, .ezee-table th, .ezee-table td { display: block; width: 100%;border: 0px solid var(--border);
  padding: 8px 5px 0px 4px !important;
        font-size: 12px!important; }
  .ezee-table th {
    background: transparent;
    border-bottom: 0;
    padding-bottom: .25rem;
    color: var(--text-muted);
    font-weight: 600;
  }
  .ezee-table td {
    padding-top: 0;
    margin-bottom: .5rem;
    border-bottom: 1px dashed var(--border);
  }
  .ezee-table tr:last-child td { border-bottom: 0; }
}

/* If values may be long (voucher IDs), enable wrapping but keep nice breaks */
.ezee-table td { word-break: break-word; }

/* Final confirmation spacing */
.final-confirmation { padding: var(--space-4); }
.final-confirmation .card__title { margin: 0; }
.final-actions { margin-top: var(--space-3); gap: var(--space-3); }