/* ============================================================
   GoPass Terminal — Shared Components
   Header · Step Indicator · Footer · Buttons · Cart · Card
   ============================================================ */

/* ── Header ── */
.kiosk-header {
  width: 100%;
  height: 96px;
  background: var(--brand-navy);
  padding: 0 32px 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.kiosk-header .logo {
  color: var(--text-on-dark);
  font-size: 34px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -1.5px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.kiosk-header .time {
  color: var(--text-on-dark);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Light header variant — toggled by the dev panel.
   Inviton eshop style: white background + actual Gopass SVG wordmark.
   Scoped to .kiosk-header only, so critical/red attention screens (which
   use .critical-header) are unaffected. ── */
body.light-header-mode .kiosk-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
}

body.light-header-mode .kiosk-header .logo {
  color: var(--brand-navy);
}

body.light-header-mode .kiosk-header .time {
  color: var(--brand-navy);
}

/* The dev-panel JS wraps the original wordmark in .logo-text and injects
   a sibling .logo-svg holding the real Gopass SVG. The SVG paths use
   fill="currentColor" so colour follows .logo's CSS `color`:
   - dark header: text-on-dark (white)
   - light header: brand-navy (overridden below)
   We always show the SVG once injected and hide the original text. */
.kiosk-header .logo .logo-text { display: none; }
.kiosk-header .logo .logo-svg {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.kiosk-header .logo .logo-svg svg {
  height: 32px;
  width: auto;
  display: block;
}

/* ── Step Indicator ── */
.step-indicator {
  width: 100%;
  height: 52px;
  padding: 22px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
}

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-light);
  flex-shrink: 0;
}

.step-active {
  width: 38px;
  height: 8px;
  border-radius: 4px;
  background: var(--brand-pink);
  flex-shrink: 0;
}

/* ── Footer ── */
.kiosk-footer {
  width: 100%;
  height: 104px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-light);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 16px;
}

/* ── Buttons ── */
.btn-back {
  height: 60px;
  background: var(--bg-card);
  border-radius: 30px;
  border: 1.5px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px 0 20px;
  cursor: pointer;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s;
  text-decoration: none;
}

.btn-back:hover {
  background: var(--bg-soft);
}

.btn-back i[data-lucide] {
  width: 18px;
  height: 18px;
}

.btn-primary {
  height: 60px;
  background: var(--brand-pink);
  border-radius: 30px;
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px 0 28px;
  cursor: pointer;
  color: var(--text-on-dark);
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 18px -4px rgba(229, 20, 126, 0.4);
  transition: background 0.15s, box-shadow 0.15s;
  text-decoration: none;
}

.btn-primary:hover {
  background: var(--brand-pink-dark);
  box-shadow: 0 8px 22px -4px rgba(229, 20, 126, 0.5);
}

.btn-primary i[data-lucide] {
  width: 18px;
  height: 18px;
}

/* ── Cart Group ── */
.cart-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cart-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 8px 14px;
}

.cart-badge i[data-lucide] {
  width: 22px;
  height: 22px;
  color: var(--text-secondary);
}

.cart-count {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
}

.cart-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-price);
}

/* ── Generic Card ── */
.card {
  background: var(--bg-card);
  border-radius: 20px;
  box-shadow: 0 8px 28px -8px rgba(27, 27, 92, 0.12);
}

/* ── GoX Discount Banner ── */
/* Pink info strip advertising the 1.5% GoX discount.
   Placed directly above .kiosk-footer on pages 02, 04, 05, 08, 11. */
.gox-banner {
  width: 100%;
  height: 52px;
  background: var(--brand-pink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 24px;
  flex-shrink: 0;
}

.gox-banner i[data-lucide],
.gox-banner svg {
  width: 22px;
  height: 22px;
  color: var(--brand-pink);
  stroke: var(--brand-pink);
  flex-shrink: 0;
}

.gox-banner-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.gox-w600 {
  font-weight: 600;
  color: var(--text-primary);
}

.gox-pink800 {
  font-weight: 800;
  color: var(--brand-pink-dark);
}

.gox-w800 {
  font-weight: 800;
  color: var(--text-primary);
}

/* ── Shared title blocks ── */
.screen-title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  line-height: 1.1;
}

.screen-subtitle {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-secondary);
}

.title-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}