/* ==========================================================================
   SAS PAY — Souq design tokens — BACKEND MIRROR (Blade payment pages + store)
   --------------------------------------------------------------------------
   MIRRORED FROM: ../sas-pay-frontend/src/design-system/_tokens.scss
   Canonical source of truth: sas-pay-frontend/docs/BRAND.md

   RULES
   - Keep the custom properties below byte-equivalent to the frontend tokens.
   - Any change happens in the frontend file FIRST, then is mirrored here in
     the same commit (roadmap docs/redesign-plan.md rule 2).
   - Import via Vite in Blade bundles (Phase 6.7); do not hand-edit values.
   ========================================================================== */

:root {
  /* Color - surfaces */
  --sp-ink: #281f18;
  --sp-ink-soft: #4a3f35;
  --sp-ink-faint: #7c6f61;
  --sp-paper: #faf5ec;
  --sp-surface: #fffdf8;
  --sp-sand: #f4ebdc;
  --sp-sand-deep: #efe3d0;
  --sp-hairline: #c9b896;

  /* Color - brand */
  --sp-terra: #b4471f;
  --sp-terra-deep: #9a3a18;
  --sp-terra-soft: #c4552d;
  --sp-terra-wash: #f7e3d8;

  /* Color - status (the ONLY status palette) */
  --sp-paid: #56633a;
  --sp-paid-wash: #e9ecdd;
  --sp-pending: #a87a2e;
  --sp-pending-wash: #f6ecd9;
  --sp-expired: #8e4a38;
  --sp-expired-wash: #f3e2dc;

  /* Lines & shadows */
  --sp-line: rgba(40, 31, 24, 0.9);
  --sp-line-soft: rgba(40, 31, 24, 0.18);
  --sp-shadow: 4px 4px 0 rgba(40, 31, 24, 0.16);
  --sp-shadow-raised: 6px 6px 0 rgba(40, 31, 24, 0.14);

  /* Radii & spacing */
  --sp-radius: 10px;
  --sp-radius-tile: 10px 26px 10px 10px;
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 12px;
  --sp-space-4: 16px;
  --sp-space-5: 24px;
  --sp-space-6: 32px;
  --sp-space-7: 48px;
  --sp-space-8: 64px;

  /* Typography */
  --sp-font-ar: 'Cairo', system-ui, sans-serif;
  --sp-font-label: 'Archivo', 'Cairo', sans-serif;
  --sp-fz-display: clamp(2.5rem, 6vw, 4.25rem);
  --sp-fz-h1: 2rem;
  --sp-fz-h2: 1.5rem;
  --sp-fz-body: 1rem;
  --sp-fz-small: 0.875rem;
  --sp-fz-micro: 0.6875rem;
}

/* Breakpoints (CSS has no custom-media; mirror as a comment):
   <768px mobile (off-canvas drawer + slim top bar, single column)
   768-1023px tablet (72px icon rail, 2-up grids)
   >=1024px desktop (260px sidebar, content max 1360px at >=1440px) */

/* --------------------------------------------------------------------------
   Minimal component classes for Blade pages (receipt checkout, store, invoices)
   Recipes documented in sas-pay-frontend/docs/BRAND.md section 6.
   -------------------------------------------------------------------------- */

.sp-btn-primary {
  font-family: var(--sp-font-ar);
  font-weight: 700;
  font-size: var(--sp-fz-body);
  color: var(--sp-surface);
  background: var(--sp-terra);
  border: 2px solid var(--sp-line);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow);
  padding: var(--sp-space-2) var(--sp-space-5);
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.sp-btn-primary:hover { background: var(--sp-terra-deep); }
.sp-btn-primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--sp-line-soft); }

.sp-btn-ghost {
  font-family: var(--sp-font-ar);
  font-weight: 600;
  font-size: var(--sp-fz-body);
  color: var(--sp-ink);
  background: transparent;
  border: 2px solid var(--sp-line);
  border-radius: var(--sp-radius);
  padding: var(--sp-space-2) var(--sp-space-5);
  cursor: pointer;
}
.sp-btn-ghost:hover { background: var(--sp-sand-deep); }

.sp-input {
  font-family: var(--sp-font-ar);
  font-size: var(--sp-fz-body);
  color: var(--sp-ink);
  background: var(--sp-sand);
  border: 2px solid var(--sp-line);
  border-radius: var(--sp-radius);
  padding: var(--sp-space-2) var(--sp-space-3);
  width: 100%;
}
.sp-input::placeholder { color: var(--sp-ink-faint); }
.sp-input:focus-visible { outline: 2px solid var(--sp-terra); outline-offset: 2px; }

.sp-card {
  background: var(--sp-surface);
  border: 2px solid var(--sp-line);
  border-top: 4px solid var(--sp-ink);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow);
}

.sp-stamp {
  display: inline-block;
  transform: rotate(-2deg);
  border: 1.5px solid currentColor;
  border-radius: 6px;
  padding: 1px var(--sp-space-2);
  font-weight: 700;
  font-size: var(--sp-fz-small);
  line-height: 1.8;
}
.sp-stamp-paid { color: var(--sp-paid); background: var(--sp-paid-wash); border-color: var(--sp-paid); }
.sp-stamp-pending { color: var(--sp-pending); background: var(--sp-pending-wash); border-color: var(--sp-pending); }
.sp-stamp-expired { color: var(--sp-expired); background: var(--sp-expired-wash); border-color: var(--sp-expired); }

.sp-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.sp-table thead th {
  background: var(--sp-sand);
  border-top: 2px solid var(--sp-line);
  border-bottom: 2px solid var(--sp-line);
  font-weight: 700;
  text-align: start;
  padding: var(--sp-space-3) var(--sp-space-4);
}
.sp-table tbody td {
  border-bottom: 1px solid var(--sp-line-soft);
  padding: var(--sp-space-3) var(--sp-space-4);
}
.sp-table tbody tr:hover { background: var(--sp-sand-deep); }

.sp-micro-label {
  font-family: var(--sp-font-label);
  font-weight: 700;
  font-size: var(--sp-fz-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sp-ink-soft);
}

/* ============================================================
   Bootstrap bridge — Souq recolor for customer-facing Blade
   pages (loaded after bootstrap.min.css in layouts.main).
   Recolors bootstrap chrome ONLY; no layout changes.
   ============================================================ */
body {
  background: var(--sp-paper);
  color: var(--sp-ink);
}

/* Buttons — flat terracotta / outline, hard offset shadow */
.btn-primary,
.btn-warning {
  background: var(--sp-terra);
  border: 2px solid var(--sp-ink);
  color: #fff;
  font-weight: 700;
  border-radius: var(--sp-radius);
  box-shadow: 3px 3px 0 var(--sp-shadow);
}
.btn-primary:hover, .btn-primary:focus,
.btn-warning:hover, .btn-warning:focus {
  background: var(--sp-terra-deep);
  color: #fff;
}
.btn-outline-danger,
.btn-outline-secondary {
  color: var(--sp-ink);
  border: 2px solid var(--sp-ink);
  border-radius: var(--sp-radius);
  font-weight: 700;
}
.btn-outline-danger:hover { background: var(--sp-terra); border-color: var(--sp-terra); color: #fff; }

/* Cards — paper surface, ink border, Souq shadow */
.card {
  background: var(--sp-surface);
  border: 2px solid var(--sp-line);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow);
}

/* Alerts → washes */
.alert-info {
  background: var(--sp-sand);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  color: var(--sp-ink);
}
.alert-secondary {
  background: var(--sp-sand);
  border: 1px solid var(--sp-line);
  color: var(--sp-ink);
}
.alert-warning {
  background: var(--sp-pending-wash);
  border: 1px solid var(--sp-pending);
  border-radius: var(--sp-radius);
  color: var(--sp-ink);
}
.alert-danger {
  background: var(--sp-expired-wash);
  border: 2px solid var(--sp-expired);
  border-radius: var(--sp-radius);
  color: var(--sp-ink);
  font-weight: 600;
}
.alert-success, .text-success { color: var(--sp-paid) !important; }
.text-warning { color: var(--sp-terra) !important; }
.text-secondary, .text-muted { color: var(--sp-ink-soft) !important; }

/* Status buttons — flat token fills (btn-success/danger/info/dark/secondary) */
.btn-success {
  background: var(--sp-paid);
  border: 2px solid var(--sp-ink);
  color: #fff;
  font-weight: 700;
  border-radius: var(--sp-radius);
  box-shadow: 3px 3px 0 var(--sp-shadow);
}
.btn-success:hover, .btn-success:focus { background: var(--sp-ink); color: #fff; }

.btn-danger {
  background: var(--sp-expired);
  border: 2px solid var(--sp-ink);
  color: #fff;
  font-weight: 700;
  border-radius: var(--sp-radius);
  box-shadow: 3px 3px 0 var(--sp-shadow);
}
.btn-danger:hover, .btn-danger:focus { background: var(--sp-ink); color: #fff; }

.btn-info {
  background: var(--sp-sand);
  border: 2px solid var(--sp-ink);
  color: var(--sp-ink);
  font-weight: 700;
  border-radius: var(--sp-radius);
}
.btn-info:hover, .btn-info:focus { background: var(--sp-sand-deep); color: var(--sp-ink); }

.btn-dark {
  background: var(--sp-ink);
  border: 2px solid var(--sp-ink);
  color: #fff;
  font-weight: 700;
  border-radius: var(--sp-radius);
  box-shadow: 3px 3px 0 var(--sp-shadow);
}
.btn-dark:hover, .btn-dark:focus { background: var(--sp-ink-soft); color: #fff; }

.btn-secondary {
  background: var(--sp-sand);
  border: 2px solid var(--sp-ink);
  color: var(--sp-ink);
  font-weight: 600;
  border-radius: var(--sp-radius);
}
.btn-secondary:hover, .btn-secondary:focus { background: var(--sp-sand-deep); color: var(--sp-ink); }

/* Bootstrap utility RGB remap — Souq palette drives .text-* / .bg-* / .border-*
   utilities, badges, progress bars and checked inputs. */
:root {
  --bs-primary-rgb: 180, 71, 31;  /* --sp-terra */
  --bs-success-rgb: 86, 99, 58;   /* --sp-paid */
  --bs-danger-rgb: 142, 74, 56;   /* --sp-expired */
  --bs-warning-rgb: 180, 71, 31;  /* --sp-terra */
  --bs-info-rgb: 74, 63, 53;      /* --sp-ink-soft */
  --bs-dark-rgb: 40, 31, 24;      /* --sp-ink */
}
.text-primary { color: var(--sp-terra) !important; }
.text-danger { color: var(--sp-expired) !important; }
.text-dark { color: var(--sp-ink) !important; }
.text-info { color: var(--sp-ink-soft) !important; }
.text-light { color: var(--sp-paper) !important; }
.form-check-input:checked { background-color: var(--sp-terra); border-color: var(--sp-terra); }
.form-check-input:focus { border-color: var(--sp-terra); box-shadow: 0 0 0 0.25rem var(--sp-terra-wash); }

/* Inputs — sand fill, 2px ink border, terracotta focus (brand recipe) */
.form-control, .form-select {
  background: var(--sp-sand);
  border: 2px solid var(--sp-line);
  color: var(--sp-ink);
  border-radius: var(--sp-radius);
}
.form-control::placeholder { color: var(--sp-ink-faint); }
.form-control:focus, .form-select:focus {
  background: var(--sp-sand);
  border-color: var(--sp-terra);
  color: var(--sp-ink);
  box-shadow: 0 0 0 0.25rem var(--sp-terra-wash);
}
.input-group-text {
  background: var(--sp-sand-deep);
  border: 2px solid var(--sp-line);
  color: var(--sp-ink);
}

/* SweetAlert (v1 lib theme) — Souq recolor for payment-page dialogs.
   !important required: sweet_alert.css is @push-ed after this file in <head>. */
.sweet-alert {
  background-color: var(--sp-surface) !important;
  border: 2px solid var(--sp-line);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow-raised) !important;
}
.sweet-alert h2 { color: var(--sp-ink) !important; }
.sweet-alert p { color: var(--sp-ink-soft) !important; }
.sweet-alert .sa-icon { border-color: var(--sp-sand-deep) !important; }
.sweet-alert .sa-icon.sa-error { border-color: var(--sp-expired) !important; }
.sweet-alert .sa-icon.sa-error .sa-line { background-color: var(--sp-expired) !important; }
.sweet-alert .sa-icon.sa-warning { border-color: var(--sp-pending) !important; }
.sweet-alert .sa-icon.sa-warning .sa-body,
.sweet-alert .sa-icon.sa-warning .sa-dot { background-color: var(--sp-pending) !important; }
.sweet-alert .sa-icon.sa-info { border-color: var(--sp-ink-soft) !important; }
.sweet-alert .sa-icon.sa-info::before,
.sweet-alert .sa-icon.sa-info::after { background-color: var(--sp-ink-soft) !important; }
.sweet-alert .sa-icon.sa-success { border-color: var(--sp-paid) !important; }
.sweet-alert .sa-icon.sa-success .sa-placeholder { border-color: var(--sp-paid-wash) !important; }
.sweet-alert .sa-icon.sa-success .sa-line { background-color: var(--sp-paid) !important; }
.sweet-alert button.confirm {
  background-color: var(--sp-terra) !important;
  border: 2px solid var(--sp-ink);
  border-radius: var(--sp-radius);
  color: var(--sp-surface) !important;
  font-weight: 700;
  box-shadow: var(--sp-shadow);
}
.sweet-alert button.confirm:hover { background-color: var(--sp-terra-deep) !important; }
.sweet-alert button.cancel {
  background-color: var(--sp-sand) !important;
  border: 2px solid var(--sp-ink);
  border-radius: var(--sp-radius);
  color: var(--sp-ink) !important;
  font-weight: 600;
}
.sweet-alert button.cancel:hover { background-color: var(--sp-sand-deep) !important; }
.sweet-alert input { border: 2px solid var(--sp-line) !important; border-radius: var(--sp-radius) !important; }

/* Headings */
h1, h2, h3, h4, h5, h6 { color: var(--sp-ink); font-weight: 800; }
hr { border-top: 2px dashed var(--sp-line); opacity: 1; }