/* SinglePager Portal — design system on top of DaisyUI v5 + Tailwind v4 */

/* ── Body font ─────────────────────────────────────────────────────────── */
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; color: #3A3A3A; }

/* ── Corporate theme: modern rounded corners ───────────────────────────── */
[data-theme="corporate"] {
    --rounded-box:   0.75rem;
    --rounded-btn:   0.5rem;
    --rounded-badge: 1rem;
    --tab-radius:    0.375rem;
}

/* ── Number input: hide spin arrows ────────────────────────────────────── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ── Sidebar nav link ───────────────────────────────────────────────────── */
.nav-link { display: flex; align-items: center; gap: 0.5rem; }

/* ── Helper-text labels: wrap instead of overflowing narrow columns ────────── */
.label:has(> .label-text-alt:only-child) {
    white-space: normal;
    height: auto;
}

/* ── Table: column headers ──────────────────────────────────────────────── */
.table thead th {
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 700;
    color: #1f2937;
    opacity: 1;
    border-bottom: 2px solid #e5e7eb;
}

/* ── Template / module card selection ───────────────────────────────────── */
.template-card.selected {
    border-color: var(--color-primary, #0068a7) !important;
    background: rgba(0, 104, 167, 0.05) !important;
}
.module-card.selected {
    border-color: var(--color-primary, #0068a7) !important;
    background: color-mix(in srgb, var(--color-primary, #0068a7) 5%, transparent) !important;
}

/* ── Transition helper ──────────────────────────────────────────────────── */
.transition-all { transition: all 0.2s ease; }

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — Clean & Premium
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Brand tokens ───────────────────────────────────────────────────────── */
:root {
    --sp-primary:       #0068a7;
    --sp-primary-dark:  #005590;
    --sp-primary-rgb:   0, 104, 167;
    --sp-surface:       #f8fafc;
    --sp-border:        #e2e8f0;
    --sp-text-muted:    #64748b;
    --sp-shadow-sm:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --sp-shadow-md:     0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
    --sp-shadow-lg:     0 10px 32px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
}

/* ── Gradient hero backgrounds ──────────────────────────────────────────── */
.hero-gradient {
    background: linear-gradient(135deg, #004f82 0%, var(--sp-primary) 50%, #0090d4 100%);
}
.hero-gradient-dark {
    background: linear-gradient(145deg, #0d1f35 0%, #0b3d6b 50%, var(--sp-primary) 100%);
}

/* ── Status icon circles ────────────────────────────────────────────────── */
.status-circle {
    width: 80px; height: 80px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.25rem;
}
.status-circle.success { background: rgba(34,197,94,.12); color: #16a34a; }
.status-circle.error   { background: rgba(239,68,68,.12);  color: #dc2626; }
.status-circle.warning { background: rgba(245,158,11,.12); color: #d97706; }
.status-circle.info    { background: rgba(var(--sp-primary-rgb),.12); color: var(--sp-primary); }
.status-circle.neutral { background: #f1f5f9; color: #64748b; }

/* ── Receipt row ────────────────────────────────────────────────────────── */
.receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--sp-border);
    font-size: 0.875rem;
    gap: 1rem;
}
.receipt-row:last-child { border-bottom: none; }
.receipt-label { color: var(--sp-text-muted); flex-shrink: 0; }
.receipt-value { font-weight: 500; text-align: right; overflow-wrap: break-word; }

/* ── Section label (small uppercase) ───────────────────────────────────── */
.section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sp-text-muted);
}

/* ── Product card hover ─────────────────────────────────────────────────── */
.product-card {
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.product-card:hover {
    box-shadow: var(--sp-shadow-lg);
    transform: translateY(-2px);
}

/* ── Scrollbar hidden ───────────────────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Page scrollbar: overlay style, invisible until the page is scrolled ──
   Thumb stays transparent at rest; JS (base.html) toggles .is-scrolling on
   <html> while a scroll is in progress (and briefly after), which is the
   only way to detect "currently scrolling" — pure CSS :hover only covers
   mouse position, not scroll activity. */
html {
    scrollbar-gutter: auto;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 8px;
}
html.is-scrolling::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.25);
}

/* ── Checkout step indicator ────────────────────────────────────────────── */
.step-pill {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: var(--sp-primary); color: white;
    font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
}

/* ── Safe primary foreground: text/icons/borders using the merchant's ────
   Primary Color AS a foreground color against a white/light card (prices,
   category labels, "Powered by" icon, selected-thumbnail border) instead of
   as a filled button/badge background. Regular text-primary/border-primary
   just reflect --color-primary verbatim, so a merchant-chosen white (or any
   very light) Primary Color makes them disappear against the same white
   card. --color-primary-text (set in layouts/base.html, darkened until it
   clears WCAG 4.5:1 against white) is the readable stand-in; the fallback
   chain covers pages where no merchant branding override is present. */
.text-primary-safe { color: var(--color-primary-text, var(--color-primary, var(--sp-primary))) !important; }
.border-primary-safe { border-color: var(--color-primary-text, var(--color-primary, var(--sp-primary))) !important; }

/* ── Toggle switches: fixed airpay blue when enabled, regardless of any ─── */
/* per-merchant brand color override (unlike toggle-primary, which follows  */
/* --color-primary and would shift with the merchant's own branding).       */
.toggle-airpay-blue:checked,
.toggle-airpay-blue[aria-checked="true"] {
    --input-color: #0068a7;
}

/* ── Full-bleed alerts ──────────────────────────────────────────────────────
   The test-mode / preview banners are DaisyUI alerts that span the viewport,
   and a box radius on a full-width bar reads as a mistake. Tailwind's
   rounded-none would need a CSS rebuild to exist; this does not. */
.alert.sp-bleed { border-radius: 0; }

/* ── Print styles ───────────────────────────────────────────────────────── */
@media print {
    .no-print { display: none !important; }
    .navbar { display: none !important; }
    footer { display: none !important; }
    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    .break-all {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    .print-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}