/* ============================================================
   THE ULTIMATE SYSTEM - Shared base styles + storefront
   Theme variables come from css/theme.php (white-label engine)
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background:var(--light); color:var(--text);
    font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--primary-hover); }
h1,h2,h3,h4 { color:var(--heading); font-weight:700; line-height:1.25; }

/* ---------- Buttons ---------- */
.btn {
    display:inline-flex; align-items:center; gap:8px; justify-content:center;
    padding:10px 18px; border-radius:var(--radius); border:none;
    font:inherit; font-weight:600; font-size:0.92rem; cursor:pointer;
    transition:var(--transition); white-space:nowrap;
}
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); transform:translateY(-1px); box-shadow:var(--shadow); }
.btn-outline { background:transparent; color:var(--primary); border:2px solid var(--primary); }
.btn-outline:hover { background:var(--primary); color:#fff; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { filter:brightness(0.9); }
.btn-success { background:var(--success); color:#fff; }
.btn-ghost { background:color-mix(in srgb, var(--dark) 6%, transparent); color:var(--text); }
.btn-ghost:hover { background:color-mix(in srgb, var(--dark) 12%, transparent); }
.btn-sm { padding:6px 12px; font-size:0.82rem; border-radius:8px; }
.btn-lg { padding:14px 28px; font-size:1rem; }
.btn-block { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none!important; }

/* ---------- Forms ---------- */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-weight:600; font-size:0.85rem; margin-bottom:6px; color:var(--heading); }
.form-control, input[type=text], input[type=number], input[type=email], input[type=password],
input[type=date], input[type=time], input[type=url], input[type=search], select, textarea {
    width:100%; padding:11px 14px; border:2px solid var(--border); border-radius:var(--radius);
    font:inherit; font-size:0.92rem; background:var(--surface); color:var(--text);
    transition:border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    outline:none; border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}
textarea.form-control, textarea { min-height:90px; resize:vertical; font:inherit; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-row-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.checkbox-row { display:flex; align-items:center; gap:10px; }
.checkbox-row input[type=checkbox] { width:20px; height:20px; accent-color:var(--primary); }
.field-hint { font-size:0.78rem; color:var(--gray); margin-top:4px; }

/* ---------- Cards / tables / badges ---------- */
.card { background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:26px; }
.card h3 { margin-bottom:16px; font-size:1.05rem; }
.section-gap { margin-top:24px; }
.table-wrap { overflow-x:auto; border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); }
table.data-table { width:100%; border-collapse:collapse; min-width:640px; }
.data-table thead th {
    text-align:left; padding:14px 16px; font-size:0.75rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--gray); border-bottom:2px solid var(--border); background:var(--surface-2);
}
.data-table tbody td { padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
.data-table tbody tr:hover { background:var(--primary-soft); }
.data-table tbody tr:last-child td { border-bottom:none; }
.table-empty { text-align:center; padding:48px 20px!important; color:var(--gray); }
.badge { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px; font-size:0.74rem; font-weight:700; }
.badge-success { background:rgba(16,185,129,.14); color:#047857; }
.badge-warning { background:rgba(245,158,11,.16); color:#b45309; }
.badge-danger  { background:rgba(239,68,68,.14);  color:#b91c1c; }
.badge-info    { background:rgba(59,130,246,.14); color:#1d4ed8; }
.badge-gray    { background:rgba(100,116,139,.14);color:#475569; }
.badge-primary { background:var(--primary-soft); color:var(--primary-hover); }

/* ---------- Toast notifications ---------- */
.toast-stack { position:fixed; top:22px; right:22px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.toast {
    min-width:280px; max-width:380px; padding:14px 18px; border-radius:12px; color:#fff;
    font-weight:600; font-size:0.9rem; box-shadow:var(--shadow-lg);
    animation:toastIn .3s ease; display:flex; align-items:center; gap:10px;
}
.toast.success { background:var(--success); } .toast.error { background:var(--danger); }
.toast.info { background:var(--info); }
@keyframes toastIn { from { opacity:0; transform:translateX(40px);} to { opacity:1; transform:none;} }

/* ---------- Modal ---------- */
.modal-overlay {
    position:fixed; inset:0; background:color-mix(in srgb, var(--dark) 55%, transparent); z-index:9000;
    display:flex; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(3px);
}
.modal-box {
    background:var(--surface); border-radius:var(--radius-lg); width:min(680px,100%);
    max-height:88vh; display:flex; flex-direction:column; animation:modalIn .25s ease; box-shadow:var(--shadow-lg);
}
.modal-box.modal-wide { width:min(960px,100%); }
@keyframes modalIn { from { opacity:0; transform:scale(.96) translateY(12px);} to { opacity:1; transform:none;} }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--border); }
.modal-head h3 { font-size:1.02rem; }
.modal-close { background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--gray); line-height:1; }
.modal-body { padding:24px; overflow-y:auto; }
.modal-foot { padding:16px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }

/* ---------- Storefront ---------- */
.sf-topbar { background:var(--dark); color:#cbd5e1; font-size:0.84rem; padding:8px 0; }
.sf-topbar-inner { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; justify-content:space-evenly; gap:16px; flex-wrap:wrap; }
.sf-topbar-right { display:flex; align-items:center; gap:14px; }
a.sf-staff-login { color:#94a3b8; font-weight:500; font-size:0.82rem; text-decoration:none; }
a.sf-staff-login:hover { color:#fff; }
.sf-header { background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:500; }
.sf-header-inner { max-width:1200px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.sf-brand { display:flex; align-items:center; gap:12px; }
.sf-brand img { height:46px; width:auto; }
.sf-brand-name { font-weight:800; font-size:1.15rem; color:var(--heading); letter-spacing:-.01em; }
.sf-nav a { margin-left:22px; font-weight:600; font-size:0.92rem; color:var(--text); position:relative; }
.sf-nav a:hover { color:var(--primary-hover); }
.sf-nav a.sf-on { color:var(--primary-hover); }
.sf-nav a.sf-on::after { content:''; position:absolute; left:22px; right:0; bottom:-7px; height:3px; border-radius:99px; background:var(--primary); }

/* ---------- Visitor 🌞/🌙 theme switch ---------- */
.wl-theme-toggle {
    width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
    background:var(--surface); color:var(--heading); cursor:pointer; flex:0 0 auto;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:0.95rem; transition:var(--transition); margin-left:14px;
}
.wl-theme-toggle:hover { color:var(--primary); border-color:var(--primary); transform:rotate(15deg); }
.sf-hero { background: radial-gradient(1100px 520px at 85% -12%, color-mix(in srgb, var(--primary) 34%, transparent), transparent 62%),
                     radial-gradient(900px 460px at 8% 115%, color-mix(in srgb, var(--secondary) 22%, transparent), transparent 60%),
                     linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%); color:#fff; padding:96px 24px; text-align:center; }
.sf-hero h1 { color:#fff; font-size:clamp(2rem,5vw,3.2rem); letter-spacing:-.03em; margin-bottom:14px; }
.sf-hero p { color:var(--gray); font-size:1.08rem; max-width:640px; margin:0 auto 30px; }
.sf-section { max-width:1200px; margin:0 auto; padding:64px 24px; }
.sf-section-title { text-align:center; margin-bottom:40px; }
.sf-section-title::after { content:''; display:block; width:56px; height:4px; border-radius:99px; background:linear-gradient(90deg, var(--primary), var(--secondary)); margin:16px auto 0; }
.sf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:22px; }
.product-card {
    background:var(--surface); border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:var(--shadow); border:1px solid var(--border); transition:var(--transition); display:flex; flex-direction:column;
}
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--primary) 35%, transparent); }
.product-card-img { aspect-ratio:4/3; background:var(--light); display:flex; align-items:center; justify-content:center; color:var(--gray); font-size:2rem; overflow:hidden; }
.product-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.product-card:hover .product-card-img img { transform:scale(1.05); }
.product-card-body { padding:18px; flex:1; display:flex; flex-direction:column; gap:8px; }
.product-card-body h4 { font-size:0.98rem; }
.product-card-desc { font-size:0.83rem; color:var(--gray); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.product-price { font-weight:800; color:var(--primary); font-size:1.08rem; margin-top:auto; }
.sf-footer { background:var(--dark); color:var(--gray); padding:44px 24px; margin-top:60px; }
.sf-footer-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-size:0.88rem; }
.sf-empty { text-align:center; color:var(--gray); padding:60px 20px; grid-column:1/-1; }

/* ---------- Slim page band (v3.1 — shop / inner page headers) ---------- */
.sf-pageband {
    background: radial-gradient(1100px 520px at 85% -12%, color-mix(in srgb, var(--primary) 34%, transparent), transparent 62%),
                linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
    color:#fff; padding:46px 24px; text-align:center;
}
.sf-pageband h1 { color:#fff; font-size:clamp(1.7rem,3.6vw,2.4rem); letter-spacing:-.02em; margin-bottom:8px; }
.sf-pageband p { color:var(--gray); max-width:640px; margin:0 auto; font-size:1rem; }


@media (max-width:768px) {
    .form-row, .form-row-3 { grid-template-columns:1fr; }
    .sf-header-inner { flex-direction:column; gap:10px; padding:12px 18px; }
    .sf-nav { display:flex; flex-wrap:wrap; justify-content:center; row-gap:10px; }
    .sf-nav a { margin-left:8px; margin-right:8px; }
}

/* ============================================================
   v2.6 — Storefront pop-ups
   (Admin ▸ White Label & Settings ▸ Pop-ups)
   Cookie-consent banner + under-construction/maintenance modal.
   Both follow the white-label theme variables automatically.
   ============================================================ */
.wl-cookiebar {
    position:fixed; left:18px; bottom:18px; z-index:1200;
    max-width:430px; width:calc(100% - 36px);
    background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
    border:1px solid var(--border); padding:18px 18px 16px;
    animation:wlPopIn .35s ease;
}
.wl-cookiebar[hidden] { display:none!important; }
.wl-cookiebar-inner { display:flex; align-items:flex-start; gap:14px; }
.wl-cookiebar-icon {
    flex:0 0 auto; width:42px; height:42px; border-radius:12px;
    background:color-mix(in srgb, var(--primary) 12%, transparent);
    color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.15rem;
}
.wl-cookiebar-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

.wl-modal-overlay {
    position:fixed; inset:0; z-index:1300; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--dark) 55%, transparent); backdrop-filter:blur(3px); padding:24px;
    opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.wl-modal-overlay.shown { opacity:1; visibility:visible; }
.wl-modal {
    position:relative; max-width:460px; width:100%; background:var(--surface); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg); padding:34px 28px 28px; text-align:center;
    transform:translateY(14px) scale(.97); transition:transform .3s ease;
}
.wl-modal-overlay.shown .wl-modal { transform:translateY(0) scale(1); }
.wl-modal-close {
    position:absolute; top:12px; right:14px; border:none; background:transparent; cursor:pointer;
    font-size:1.4rem; line-height:1; color:var(--gray);
}
.wl-modal-close:hover { color:var(--heading); }
.wl-modal-icon {
    width:64px; height:64px; margin:0 auto 16px; border-radius:18px;
    background:color-mix(in srgb, var(--primary) 12%, transparent);
    color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.7rem;
}
.wl-modal h3 { margin-bottom:10px; }
.wl-modal p { color:var(--text); font-size:.95rem; margin-bottom:20px; }

@keyframes wlPopIn {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
}

@media (max-width:640px) {
    .wl-cookiebar { left:12px; right:12px; bottom:12px; width:auto; max-width:none; padding:16px; }
    .wl-cookiebar-inner { flex-wrap:wrap; }
}
/* ============================================================
   v4.5.1 - Dark-mode polish (html[data-theme="dark"])
   The pastel badge pills keep their translucent tint; only the
   text swaps to the bright semantic colour so it stays readable
   on the dark surface (benefits storefront + admin alike).
   ============================================================ */
html[data-theme="dark"] .badge-success { color:var(--success); }
html[data-theme="dark"] .badge-warning { color:var(--warning); }
html[data-theme="dark"] .badge-danger  { color:var(--danger); }
html[data-theme="dark"] .badge-info    { color:var(--info); }
html[data-theme="dark"] .badge-gray    { color:var(--gray); }