/* =====================================================================
   STOREFRONT EXPERIENCE — branch picker, fulfilment/location modal,
   checkout redesign. All classes are prefixed `qrx-` so nothing here can
   ever collide with theme.css / admin.css class names.
   ===================================================================== */

   .storefront-content input.form-control,
   .storefront-content input.form-select,
   .storefront-content select.form-select,
   .storefront-content textarea.form-control {
    
     
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    
     background: #fff;
     box-shadow: none;
     transition: border-color 0.15s ease, box-shadow 0.15s ease;
   }


/* ---- blurred decorative backdrop (branches landing page) ---- */
.qrx-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; filter: blur(7px) saturate(1.1); opacity: 0.55; pointer-events: none; }
.qrx-backdrop .qm-item-card { cursor: default; }
.qrx-backdrop-pills { display: flex; gap: 0.75rem; padding: 5rem 2rem 1rem; }
.qrx-backdrop-pill { width: 92px; height: 92px; border-radius: var(--radius-md); background: var(--accent-soft); flex-shrink: 0; }
.qrx-backdrop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; padding: 0 2rem; }
.qrx-backdrop-card { height: 210px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.qrx-backdrop-card::before { content: ''; display: block; height: 130px; background: var(--surface-muted); border-radius: var(--radius-md) var(--radius-md) 0 0; }

/* ---- overlay + popup shell, reused by branch picker & fulfilment/location modal ---- */
.qrx-overlay {
  position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand-primary) 55%, transparent); backdrop-filter: blur(3px);
  padding: 1rem; animation: qrx-fade-in 0.25s ease both;
}
@keyframes qrx-fade-in { from { opacity: 0; } to { opacity: 1; } }

.qrx-popup {
  background: var(--surface); border-radius: 22px; box-shadow: 0 24px 60px rgba(1, 31, 71, 0.28);
  width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
  animation: qrx-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes qrx-pop-in { from { opacity: 0; transform: translateY(24px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } }

.qrx-popup-header {
  background: linear-gradient(135deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 78%, black));
  color: #fff; padding: 1.5rem 1.5rem 1.25rem; position: relative;
}
.qrx-popup-header-icon { width: 3rem; height: 3rem; border-radius: 50%; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 0.7rem; animation: pulse-ring 2s ease-out infinite; }
.qrx-popup-title { font-weight: 700; font-size: 1.15rem; }
.qrx-popup-subtitle { font-size: 0.82rem; opacity: 0.85; margin-top: 0.25rem; }
.qrx-popup-close {
  position: absolute; top: 1rem; inset-inline-end: 1rem; width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: none; color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.qrx-popup-close:hover { background: rgba(255,255,255,0.3); }
.qrx-popup-body { padding: 1.4rem 1.5rem 1.6rem; }

/* ---- branch cards inside the popup ---- */
.qrx-branch-list { display: flex; flex-direction: column; gap: 0.7rem; }
.qrx-branch-card {
  display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; border-radius: var(--radius-md);
  border: 1.5px solid var(--line); cursor: pointer; text-decoration: none; color: inherit;
  transition: all 0.18s ease;
}
.qrx-branch-card:hover { border-color: var(--brand-accent); background: var(--accent-soft); transform: translateY(-2px); }
.qrx-branch-icon { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent-soft); color: var(--brand-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qrx-branch-name { font-weight: 700; }
.qrx-branch-meta { font-size: 0.78rem; color: var(--muted); margin-top: 0.1rem; }
.qrx-branch-status { margin-inline-start: auto; font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: var(--radius-full); white-space: nowrap; }
.qrx-branch-status.open { background: color-mix(in srgb, var(--success) 14%, white); color: var(--success); }
.qrx-branch-status.closed { background: color-mix(in srgb, var(--danger) 14%, white); color: var(--danger); }

/* ---- fulfilment choice cards ---- */
.qrx-fulfil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.qrx-fulfil-card {
  border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 1.4rem 1rem; text-align: center;
  cursor: pointer; transition: all 0.18s ease; background: var(--surface);
}
.qrx-fulfil-card:hover { border-color: var(--brand-accent); background: var(--accent-soft); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.qrx-fulfil-card i { font-size: 1.9rem; color: var(--brand-accent); margin-bottom: 0.6rem; display: block; }
.qrx-fulfil-card-title { font-weight: 700; font-size: 0.95rem; }
.qrx-fulfil-card-desc { font-size: 0.72rem; color: var(--muted); margin-top: 0.2rem; }

.qrx-fulfil-card.active-pill { border-color: var(--brand-accent); background: var(--accent-soft); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-accent) 25%, transparent); }

/* ---- location step: map, search, current-location, out-of-zone gauge ---- */
.qrx-map { height: 300px; border-radius: var(--radius-md); overflow: hidden; margin: 0.9rem 0; border: 1px solid var(--line); }
.qrx-search-wrap { position: relative; }
.qrx-search-wrap i { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 0.9rem; color: var(--muted); }
.qrx-search-input { width: 100%; padding: 0.75rem 1rem 0.75rem 2.4rem; border-radius: var(--radius-md); border: 1.5px solid var(--line); }
[dir='rtl'] .qrx-search-input { padding: 0.75rem 2.4rem 0.75rem 1rem; }
[dir='rtl'] .qrx-search-wrap i { inset-inline-start: unset; inset-inline-end: 0.9rem; }

.qrx-gauge { margin: 1rem 0; }
.qrx-gauge-track { height: 10px; border-radius: var(--radius-full); background: var(--surface-muted); overflow: hidden; }
.qrx-gauge-fill { height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--success), var(--warning), var(--danger)); transition: width 0.6s ease; }
.qrx-gauge-label { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); margin-top: 0.4rem; }
.qrx-gauge-message { display: flex; align-items: center; gap: 0.6rem; background: color-mix(in srgb, var(--danger) 8%, white); border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--line)); border-radius: var(--radius-md); padding: 0.8rem 1rem; margin-top: 0.9rem; font-size: 0.82rem; color: color-mix(in srgb, var(--danger) 80%, black); }
.qrx-gauge-message i { font-size: 1.2rem; color: var(--danger); flex-shrink: 0; }

/* ---- prominent "delivering to / table" bar, top of menu & checkout ---- */
.qrx-context-bar {
  display: flex; align-items: center; gap: 0.9rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 0.85rem 1.1rem; margin-bottom: 1.1rem; box-shadow: var(--shadow-sm);
}
.qrx-context-icon { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent-soft); color: var(--brand-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qrx-context-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.qrx-context-value { font-weight: 700; font-size: 0.9rem; }
.qrx-context-change { margin-inline-start: auto; background: var(--surface-muted); border: none; border-radius: var(--radius-full); padding: 0.4rem 0.9rem; font-size: 0.78rem; font-weight: 700; color: var(--brand-primary); white-space: nowrap; transition: all 0.15s ease; }
.qrx-context-change:hover { background: var(--accent-soft); color: var(--brand-accent); }

/* ---- coupon card ---- */
.qrx-coupon-row { display: flex; gap: 0.6rem; }
.qrx-coupon-row input { flex: 1; }
.qrx-coupon-applied {
  display: flex; align-items: center; gap: 0.7rem; background: color-mix(in srgb, var(--success) 10%, white);
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--line)); border-radius: var(--radius-md); padding: 0.75rem 1rem;
  animation: pop-in 0.25s ease both;
}
.qrx-coupon-applied i.fa-circle-check { color: var(--success); font-size: 1.1rem; }
.qrx-coupon-applied-remove { margin-inline-start: auto; background: none; border: none; color: var(--muted); }
.qrx-coupon-applied-remove:hover { color: var(--danger); }

/* ---- loyalty card ---- */
.qrx-loyalty-head { display: flex; align-items: center; gap: 0.5rem; }
.qrx-info-btn { background: none; border: none; color: var(--muted); font-size: 0.9rem; }
.qrx-info-btn:hover { color: var(--brand-accent); }
.qrx-loyalty-row { display: flex; align-items: center; gap: 1rem; margin-top: 0.9rem; flex-wrap: wrap; }

.qrx-stepper {
  display: inline-flex; align-items: center; gap: 0.15rem;
  background: var(--surface-muted); border-radius: var(--radius-full); padding: 0.3rem;
}
.qrx-stepper-btn {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: none; background: #fff;
  color: var(--brand-primary); box-shadow: var(--shadow-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem;
  transition: all 0.15s ease;
}
.qrx-stepper-btn:hover { background: var(--brand-accent); color: #fff; transform: scale(1.06); }
.qrx-stepper-btn:active { transform: scale(0.94); }

.qrx-stepper-value {
  width: 3.4rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
  background: transparent; border: none; box-shadow: none; color: var(--ink); font-size: 1rem;
  -moz-appearance: textfield;
}
.qrx-stepper-value::-webkit-outer-spin-button,
.qrx-stepper-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qrx-stepper-value:focus { outline: none; }

.qrx-loyalty-max {
  display: inline-flex; align-items: center; gap: 0.4rem; background: var(--accent-soft);
  border: none; border-radius: var(--radius-full); padding: 0.5rem 0.95rem;
  color: color-mix(in srgb, var(--brand-accent) 85%, black); font-weight: 700; font-size: 0.78rem;
  white-space: nowrap; transition: all 0.15s ease;
}
.qrx-loyalty-max:hover { background: var(--brand-accent); color: #fff; }
.qrx-loyalty-preview { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; font-size: 0.85rem; color: var(--brand-accent); font-weight: 700; min-height: 1.2rem; }
.qrx-loyalty-preview i { animation: qrx-coin-spin 0.5s ease; }
@keyframes qrx-coin-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

@media (max-width: 480px) {
  .qrx-fulfil-grid { grid-template-columns: 1fr; }
}


/* =====================================================================
   ORDER CARD FAMILY — shared by checkout.ejs and track.ejs. Moved here
   (was previously only defined inline in track.ejs) so any page that
   reuses these classes actually gets them, instead of silently
   rendering unstyled.
   ===================================================================== */
   .track-hero { background: linear-gradient(135deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 80%, black)); color: #fff; border-radius: var(--radius-md); padding: 1.4rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
   .track-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
   .track-order-no { font-weight: 700; font-size: 1.15rem; }
   .track-branch { font-size: 0.85rem; opacity: 0.85; margin-top: 0.2rem; }
   .track-fulfil-badge { background: rgba(255,255,255,0.14); border-radius: var(--radius-full); padding: 0.4rem 0.85rem; font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
   .track-hero-meta { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid rgba(255,255,255,0.15); }
   .track-meta-item { font-size: 0.8rem; opacity: 0.9; display: flex; align-items: center; gap: 0.5rem; }
   .track-meta-item i { width: 1rem; text-align: center; opacity: 0.8; }
   
   .track-banner { display: flex; align-items: center; gap: 0.9rem; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--brand-accent) 30%, var(--line)); border-radius: var(--radius-md); padding: 1rem 1.1rem; margin-bottom: 1rem; }
   .track-banner i { font-size: 1.5rem; color: var(--brand-accent); }
   .track-banner-danger { background: color-mix(in srgb, var(--danger) 10%, white); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
   .track-banner-danger i { color: var(--danger); }
   
   .track-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1.3rem; margin-bottom: 1rem; }
   .track-card-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.9rem; display: flex; align-items: center; gap: 0.5rem; color: var(--brand-primary); }
   .track-card-title i { color: var(--brand-accent); flex-shrink: 0; }
   
   .track-next { font-size: 0.82rem; color: var(--muted); margin-bottom: 1.1rem; display: flex; align-items: center; gap: 0.5rem; }
   .track-next strong { color: var(--brand-accent); }
   
   .track-timeline { display: flex; flex-direction: column; }
   .track-step { display: flex; gap: 0.9rem; position: relative; padding-bottom: 1.6rem; }
   .track-step:last-child { padding-bottom: 0; }
   .track-step-line {
     position: absolute; inset-inline-start: 1.1rem; top: 2.4rem; bottom: -0.2rem; width: 3px;
     background: var(--line); border-radius: var(--radius-full); overflow: hidden;
   }
   .track-step:last-child .track-step-line { display: none; }
   .track-step-line-fill { width: 100%; height: 0%; background: var(--brand-accent); transition: height 0.6s ease; }
   .track-step-icon {
     width: 2.3rem; height: 2.3rem; border-radius: 50%; flex-shrink: 0; z-index: 1;
     display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
     background: var(--surface-muted); color: var(--muted); border: 2px solid var(--line);
     transition: all 0.4s ease;
   }
   .track-step.done .track-step-icon { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
   .track-step.active .track-step-icon { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; animation: pulse-ring 1.6s ease-out infinite; }
   .track-step-body { padding-top: 0.15rem; }
   .track-step-title { font-weight: 700; color: var(--muted); font-size: 0.92rem; transition: color 0.3s ease; }
   .track-step.done .track-step-title, .track-step.active .track-step-title { color: var(--ink); }
   .track-step-desc { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; max-height: 0; opacity: 0; overflow: hidden; transition: all 0.35s ease; }
   .track-step.active .track-step-desc { max-height: 3rem; opacity: 1; margin-top: 0.25rem; }
   .track-step-time { font-size: 0.7rem; color: var(--muted); margin-top: 0.2rem; }
   
   .track-line-row { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
   .track-line-row:last-of-type { border-bottom: none; }
   .track-line-qty { font-weight: 700; color: var(--brand-accent); min-width: 1.6rem; }
   
   .track-summary { border-top: 1px dashed var(--line); margin-top: 0.7rem; padding-top: 0.7rem; }
   .track-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--muted); padding: 0.2rem 0; gap: 0.5rem; }
   .track-summary-row i { margin-inline-end: 0.3rem; }
   .track-summary-discount { color: var(--success); }
   .track-summary-total { font-weight: 700; font-size: 1.05rem; color: var(--brand-primary); border-top: 1px solid var(--line); margin-top: 0.4rem; padding-top: 0.55rem; }
   
   .track-payment-badge { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--surface-muted); border-radius: var(--radius-full); padding: 0.4rem 0.9rem; font-size: 0.78rem; font-weight: 600; color: var(--brand-primary); margin-top: 0.9rem; }
   .track-notes { margin-top: 0.7rem; font-size: 0.8rem; color: var(--muted); background: var(--surface-muted); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; }


   /* Same Google Places z-index issue as admin-orders.css — the suggestion
   dropdown needs to sit above the qrx-overlay (z-index: 4000). */
.pac-container { z-index: 4100 !important; }

/* Same problem, same fix, for SweetAlert2 — the "out of range" and
   "location access needed" popups both fire from inside qrx-overlay
   (z-index: 4000) but SweetAlert2's own stacking context defaults below
   that, so the alert rendered trapped behind the modal instead of on top
   of it — visible but unclickable until the modal underneath was closed. */
.swal2-container { z-index: 4200 !important; }


/* ---- auth pages (phone / otp) ---- */
.qrx-auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.2rem; background: var(--surface-muted); }
.qrx-auth-card { background: var(--surface); border-radius: var(--radius-md); box-shadow: 0 20px 50px rgba(2, 30, 71, 0.14); max-width: 440px; width: 100%; padding: 2rem; }
.qrx-auth-label { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.82rem; color: var(--brand-primary); margin-bottom: 0.5rem; }
.qrx-auth-label i { color: var(--brand-accent); }
.qrx-auth-divider { display: flex; align-items: center; text-align: center; color: var(--muted); font-size: 0.78rem; margin: 1.1rem 0; }
.qrx-auth-divider::before, .qrx-auth-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--line); }
.qrx-auth-divider span { padding: 0 0.8rem; }
.qrx-social-btn { display: flex; align-items: center; justify-content: center; gap: 0.6rem; font-weight: 700; }
.qrx-auth-guest-link { display: block; text-align: center; margin-top: 1.1rem; color: var(--brand-accent); font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.qrx-auth-guest-link:hover { text-decoration: underline; }
.qrx-auth-back-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.82rem; text-decoration: none; margin-top: 1.2rem; }
.qrx-auth-back-link:hover { color: var(--brand-accent); }

/* intl-tel-input polish to match the rest of the app's inputs */
.iti { width: 100%; }
.qrx-phone-input { width: 100%; border-radius: var(--radius-md); padding: 0.75rem 1rem; border: 1.5px solid var(--line); font-size: 1rem; }
.qrx-phone-input:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent) 15%, transparent); }
[dir='rtl'] .iti__flag-container { left: 0; right: auto; }




/* ---- "not deliverable here" state (delivery-address.ejs) ---- */
.qrx-not-deliverable { text-align: center; padding-top: 0.4rem; }
.qrx-not-deliverable-icon {
  width: 3.4rem; height: 3.4rem; border-radius: 50%; margin: 0 auto 0.8rem;
  background: color-mix(in srgb, var(--danger) 10%, white); color: var(--danger);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.qrx-not-deliverable-title { font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-bottom: 0.9rem; }
   

/* ---- closed/busy/temp-closed blocking popup (menu.ejs) ---- */
.qrx-hours-row { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin: 0.4rem 0 0.2rem; }
.qrx-hours-arrow { color: var(--muted); font-size: 0.9rem; }
[dir='rtl'] .qrx-hours-arrow { transform: scaleX(-1); }
.qrx-hours-chip {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  background: var(--surface-muted); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 0.7rem 1.1rem; min-width: 100px;
}
.qrx-hours-chip i { color: var(--brand-accent); font-size: 1rem; }
.qrx-hours-chip-label { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.qrx-hours-chip-value { font-weight: 700; font-size: 1rem; color: var(--ink); }
   

.qrx-default-badge {
  display: inline-block; background: var(--accent-soft); color: var(--brand-accent);
  font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: var(--radius-full);
  margin-inline-start: 0.3rem; vertical-align: middle;
}




/* =====================================================================
   GLOBAL SWEETALERT2 THEME — split into two contexts:
     1. Big centered dialogs (Swal.fire / QRX.confirm) — the qrx-popup look
     2. Compact corner toasts (QRX.toast, toast:true mode) — small, inline
   The earlier version styled both with the same rules, which forced a
   dialog-sized icon (4.4rem) onto a toast's tiny icon geometry and broke
   it visually — SweetAlert2's built-in icons use pseudo-elements
   positioned relative to their own size, so an unexpected forced size
   corrupts the shape rather than just "looking too big."
   ===================================================================== */

   /* ---- icon glyph sizing, now that iconHtml replaces SweetAlert2's own
   built-in shapes with real FontAwesome icons — proportioned separately
   for the big dialog circle vs. the small toast circle ---- */
.swal2-popup:not(.swal2-toast) .swal2-icon-content i { font-size: 2.1rem; }
.swal2-toast .swal2-icon-content i { font-size: 1rem; }

/* success/error previously relied on SweetAlert2's own hardcoded line
   colors — now that they're plain icon glyphs, they need an explicit
   color or they'd render as plain black text */
.swal2-icon.swal2-success { color: var(--success) !important; }
.swal2-icon.swal2-error { color: var(--danger) !important; }

/* ---- shared: icon color treatment, same brand colors either context ---- */
.swal2-icon.swal2-warning { background: color-mix(in srgb, var(--warning) 14%, white) !important; border-color: transparent !important; color: var(--warning) !important; }
.swal2-icon.swal2-error { background: color-mix(in srgb, var(--danger) 12%, white) !important; border-color: transparent !important; }
.swal2-icon.swal2-success { background: color-mix(in srgb, var(--success) 12%, white) !important; border-color: transparent !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--success) 35%, transparent) !important; }
.swal2-icon.swal2-info { background: var(--accent-soft) !important; border-color: transparent !important; color: var(--brand-accent) !important; }
.swal2-icon.swal2-question { background: var(--accent-soft) !important; border-color: transparent !important; color: var(--brand-accent) !important; }

/* ---- big centered dialogs only — everything scoped away from toast mode ---- */
.swal2-popup:not(.swal2-toast) {
  border-radius: 22px !important;
  padding: 2rem 1.9rem 1.8rem !important;
  font-family: inherit !important;
  box-shadow: 0 24px 60px rgba(1, 31, 71, 0.28) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--brand-primary) !important;
  padding: 0 !important;
  margin: 0.5rem 0 0 !important;
}

.swal2-popup:not(.swal2-toast) .swal2-html-container {
  font-size: 0.88rem !important;
  color: var(--muted) !important;
  margin: 0.6rem 0 0 !important;
  line-height: 1.6 !important;
}

.swal2-popup:not(.swal2-toast) .swal2-icon {
  border-width: 0 !important;
  width: 4.4rem !important;
  height: 4.4rem !important;
  margin: 0.3rem auto 0.9rem !important;
}

.swal2-popup:not(.swal2-toast) .swal2-actions { gap: 0.7rem !important; margin-top: 1.5rem !important; }
.swal2-popup:not(.swal2-toast) .swal2-styled {
  border-radius: var(--radius-full) !important;
  padding: 0.7rem 1.9rem !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}
.swal2-popup:not(.swal2-toast) .swal2-styled:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 25%, transparent) !important; }
.swal2-popup:not(.swal2-toast) .swal2-confirm.swal2-styled { background: var(--brand-accent) !important; }
.swal2-popup:not(.swal2-toast) .swal2-confirm.swal2-styled:hover { filter: brightness(0.94); transform: translateY(-1px); }
.swal2-popup:not(.swal2-toast) .swal2-cancel.swal2-styled { background: var(--surface-muted) !important; color: var(--brand-primary) !important; }
.swal2-popup:not(.swal2-toast) .swal2-cancel.swal2-styled:hover { background: color-mix(in srgb, var(--danger) 10%, white) !important; color: var(--danger) !important; }

.swal2-close { color: var(--muted) !important; transition: color 0.15s ease !important; }
.swal2-close:hover { color: var(--brand-accent) !important; }

/* ---- compact corner toasts only (QRX.toast) — proper small sizing,
   never the dialog's dimensions ---- */
.swal2-toast {
  border-radius: 14px !important;
  padding: 0.75rem 1.1rem !important;
  box-shadow: 0 8px 24px rgba(1, 31, 71, 0.18) !important;
  font-family: inherit !important;
  display: flex !important;
  align-items: center !important;
}
.swal2-toast .swal2-icon {
  width: 1.7rem !important;
  height: 1.7rem !important;
  min-width: 1.7rem !important;
  margin-inline-end: 0.7rem !important;
  border-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.swal2-toast .swal2-icon-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.swal2-toast .swal2-title {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.swal2-toast .swal2-timer-progress-bar { background: var(--brand-accent) !important; }

/* keep everything above the qrx-overlay/modals, same fix as before */
.swal2-container { z-index: 100000 !important; }

  .qrx-tip-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .qrx-tip-pills .tip-pill { flex: 0 0 auto; padding: 0.55rem 1.1rem; }


  /* ---- table-session-pay.ejs ---- */
.tsp-hero { text-align: center; padding: 1.4rem 1rem; margin-bottom: 1rem; }
.tsp-hero-icon {
  width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--accent-soft); color: var(--brand-accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin: 0 auto 0.7rem;
}
.tsp-hero-title { font-weight: 700; font-size: 1.15rem; color: var(--brand-primary); }
.tsp-hero-sub { font-size: 0.82rem; color: var(--muted); margin-top: 0.2rem; }

.tsp-order-card { padding: 1.1rem 1.2rem; }
.tsp-order-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.6rem; }
.tsp-order-number { font-weight: 700; font-size: 0.92rem; color: var(--brand-primary); display: flex; align-items: center; gap: 0.4rem; }
.tsp-order-number i { color: var(--brand-accent); font-size: 0.82rem; }
.tsp-order-total { font-weight: 700; font-size: 1rem; color: var(--brand-primary); }
.tsp-order-badge {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; font-weight: 700;
  padding: 0.15rem 0.55rem; border-radius: var(--radius-full); margin-top: 0.3rem;
}
.tsp-badge-tab { background: var(--accent-soft); color: var(--brand-accent); }
.tsp-badge-paid { background: color-mix(in srgb, var(--success) 12%, white); color: var(--success); }

.tsp-order-items { border-top: 1px dashed var(--line); margin-top: 0.3rem; padding-top: 0.6rem; }
.tsp-order-item-row { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--muted); padding: 0.2rem 0; }
.tsp-item-qty { color: var(--brand-accent); font-weight: 700; margin-inline-end: 0.2rem; }

.tsp-track-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin-top: 0.8rem; padding: 0.55rem; border-radius: var(--radius-sm);
  background: var(--surface-muted); color: var(--brand-primary); font-weight: 700; font-size: 0.8rem;
  text-decoration: none; transition: background 0.15s ease;
}
.tsp-track-btn:hover { background: var(--accent-soft); color: var(--brand-accent); }


.tsp-pay-hint {
  font-size: 0.74rem; color: var(--muted); text-align: center;
  margin: 0.4rem 0 1rem; display: flex; align-items: center; justify-content: center; gap: 0.35rem;
}
.tsp-pay-hint i { color: var(--brand-accent); }


.tcq-bank-note {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--brand-primary);
  background: var(--accent-soft); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin-bottom: 1rem;
}
.tcq-bank-note i { color: var(--brand-accent); }