/* Crustas themes — CSS variables drive both the user site and the admin panel.
   The theme is set on <html data-theme="..."> by the server ONLY, from the
   database: Admin -> Settings -> Website Theme (user site) / Admin Theme
   (admin panel). There is no theme switcher on the website or in the admin
   topbar; themes are changed in Settings only. */
:root, html[data-theme="light"]{
  --primary:#c81e1e; --primary-dark:#a81616; --primary-soft:#ffe9e7;
  --bg:#fff8f6; --surface:#ffffff; --surface2:#f7f7f8; --text:#1a1a1a; --muted:#666666;
  --border:#eeeeee; --chip-bg:#ffffff; --header-bg:#f2f2f2; --sidebar-bg:#111111; --sidebar-text:#dddddd;
  --topbar-bg:#ffffff; --shadow:0 2px 10px rgba(0,0,0,.06);
}
html[data-theme="dark"]{
  --primary:#e5484d; --primary-dark:#c73e42; --primary-soft:#3a1d1d;
  --bg:#141414; --surface:#1f1f1f; --surface2:#262626; --text:#f2f2f2; --muted:#aaaaaa;
  --border:#333333; --chip-bg:#262626; --header-bg:#1f1f1f; --sidebar-bg:#0b0b0b; --sidebar-text:#cccccc;
  --topbar-bg:#1f1f1f; --shadow:0 2px 10px rgba(0,0,0,.4);
}
html[data-theme="crimson"]{
  --primary:#a50034; --primary-dark:#7d0027; --primary-soft:#ffe3ea;
  --bg:#fff5f7; --surface:#ffffff; --surface2:#fbeef1; --text:#2b0a14; --muted:#7a5560;
  --border:#f3dfe4; --chip-bg:#ffffff; --header-bg:#fbeef1; --sidebar-bg:#4a0019; --sidebar-text:#f3d7de;
  --topbar-bg:#ffffff; --shadow:0 2px 10px rgba(165,0,52,.08);
}
html[data-theme="emerald"]{
  --primary:#0a7a4d; --primary-dark:#065c3a; --primary-soft:#dff5e9;
  --bg:#f2faf5; --surface:#ffffff; --surface2:#eaf6ef; --text:#0f241a; --muted:#557064;
  --border:#ddefe6; --chip-bg:#ffffff; --header-bg:#e6f4ec; --sidebar-bg:#063d27; --sidebar-text:#cfeede;
  --topbar-bg:#ffffff; --shadow:0 2px 10px rgba(10,122,77,.08);
}
html[data-theme="ocean"]{
  --primary:#0b6fa4; --primary-dark:#085a86; --primary-soft:#e0f1fa;
  --bg:#f2f8fc; --surface:#ffffff; --surface2:#e9f3f9; --text:#0d2233; --muted:#557088;
  --border:#dcecf5; --chip-bg:#ffffff; --header-bg:#e3eff7; --sidebar-bg:#07324a; --sidebar-text:#cfe8f5;
  --topbar-bg:#ffffff; --shadow:0 2px 10px rgba(11,111,164,.08);
}
html[data-theme="sunset"]{
  --primary:#e8590c; --primary-dark:#c24a08; --primary-soft:#ffeedd;
  --bg:#fff7ef; --surface:#ffffff; --surface2:#fdefe2; --text:#2b1a0d; --muted:#7a6a58;
  --border:#f6e3cd; --chip-bg:#ffffff; --header-bg:#fdeeda; --sidebar-bg:#4a2403; --sidebar-text:#f5ddc2;
  --topbar-bg:#ffffff; --shadow:0 2px 10px rgba(232,89,12,.08);
}
html[data-theme="royal"]{
  --primary:#6d28d9; --primary-dark:#5519b3; --primary-soft:#ede4fb;
  --bg:#f7f4ff; --surface:#ffffff; --surface2:#efe9fd; --text:#1d1233; --muted:#6b5f85;
  --border:#e6defa; --chip-bg:#ffffff; --header-bg:#ece5fb; --sidebar-bg:#2a0f52; --sidebar-text:#dcd0f5;
  --topbar-bg:#ffffff; --shadow:0 2px 10px rgba(109,40,217,.08);
}
/* --- User site overrides (applied after the inline styles) --- */
body{background:var(--bg);color:var(--text)}
a{color:var(--primary)}
.header-bar{background:var(--header-bg)}
.header-bar .loc,.header-actions a{color:var(--text)}
.logo{color:var(--primary)}
.logo span{color:var(--text)}
.cart-btn,.btn,.viewcart-bar,.fab-top,.fab-search{background:var(--primary)}
.cart-btn:hover,.btn:hover{background:var(--primary-dark)}
.btn-dark{background:var(--sidebar-bg);color:#fff}.btn-dark:hover{background:var(--sidebar-bg);opacity:.85}
.btn-light{background:var(--surface);color:var(--primary)}
.btn-outline{background:var(--surface);color:var(--primary);border-color:var(--primary)}
.card,.drawer,.modal{background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:var(--shadow)}
.card-body h3 a{color:var(--text)!important}
.card-body p,.seo-text{color:var(--muted)}
.price{color:var(--primary)}
.chip{background:var(--chip-bg);color:var(--text);border-color:var(--border)}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.chips{background:var(--bg)}
input,select,textarea{background:var(--surface);color:var(--text);border-color:var(--border)}
input:focus,select:focus,textarea:focus{border-color:var(--primary)}
label{color:var(--text)}
.section-title{border-left-color:var(--primary)}
.section-title small{color:var(--muted)}
.paystrip{background:var(--surface);border-color:var(--border)}
.totals-box{background:var(--surface2);border-color:var(--border)}
.drawer-head{background:var(--primary)}
.pill-btn{background:var(--surface);color:var(--text);border-color:var(--border)}
.pill-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.variant-pill{background:var(--primary-soft);color:var(--primary)}
.qty-box button{border-color:var(--primary);color:var(--primary);background:var(--surface)}
.stepper button{border-color:var(--primary);color:var(--primary);background:var(--surface)}
table th,table td{border-bottom-color:var(--border)}
footer{background:var(--sidebar-bg);color:#ddd}
/* --- Admin overrides --- */
.admin-body{background:var(--bg);color:var(--text)}
.admin-sidebar{background:var(--sidebar-bg);color:var(--sidebar-text)}
.admin-sidebar a{color:var(--sidebar-text)}
.admin-sidebar a:hover{background:rgba(255,255,255,.12);color:#fff}
.admin-sidebar a.active{background:var(--primary);color:#fff}
.admin-topbar{background:var(--topbar-bg);color:var(--text);border-bottom:1px solid var(--border)}
.admin-card{background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:var(--shadow)}
.admin-table{background:var(--surface);color:var(--text)}
.admin-table th,.admin-table td{border-bottom-color:var(--border)}
.admin-input{background:var(--surface);color:var(--text);border-color:var(--border)}
.status-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800;text-transform:capitalize}
.status-placed{background:#fff3cd;color:#7a5b00}
.status-preparing{background:#dbeafe;color:#1d4ed8}
.status-on-the-way{background:#ede4fb;color:#6d28d9}
.status-delivered{background:#dcfce7;color:#166534}
.status-cancelled{background:#fee2e2;color:#b91c1c}
/* Styled pagination (site + admin) */
.pagination{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:20px 0}
.page-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:8px 16px;font-weight:800;font-size:14px;text-decoration:none}
a.page-btn:hover{border-color:var(--primary);color:var(--primary)}
.page-btn.current{background:var(--primary);border-color:var(--primary);color:#fff}
.page-btn.disabled{opacity:.45;cursor:not-allowed}
/* Admin list toolbar + styled tables */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:0 0 14px}
.search-form{display:flex;gap:8px;flex:1;max-width:460px}
.search-form input{flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-size:15px}
.admin-table{border:1px solid var(--border);border-radius:14px;overflow-x:auto;overflow-y:hidden;box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}
.admin-table table{width:100%;border-collapse:collapse;background:var(--surface)}
.admin-table th{text-align:left;background:var(--surface2);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:12px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.admin-table td{padding:13px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.admin-table tbody tr:last-child td{border-bottom:0}
.admin-table tbody tr:hover{background:var(--surface2)}
.admin-table .actions{white-space:nowrap;text-align:right}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800}
.pill-green{background:#dcfce7;color:#166534}
.pill-red{background:#fee2e2;color:#b91c1c}
.pill-grey{background:#e5e7eb;color:#374151}
.pill-blue{background:#dbeafe;color:#1d4ed8}
/* Account left tabs + complaint stepper.
   NOTE: the complaint stepper uses .cstepper/.cstep — NOT .stepper/.step —
   because .stepper is the cart quantity stepper in layouts/app.blade.php
   (inline <style> loads after theme.css and would override these rules,
   which is what made the complaint stepper go up-down in v5). */
.account-layout{display:flex;gap:24px;align-items:flex-start}
.account-tabs{width:230px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px;position:sticky;top:96px}
.account-tabs a{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:10px;font-weight:700;color:var(--text);margin-bottom:4px}
.account-tabs a:hover{background:var(--surface2)}
.account-tabs a.active{background:var(--primary);color:#fff}
.account-main{flex:1;min-width:0}
.account-main .card{padding:18px 20px}
.account-main .card h2{margin-top:0}
.cstepper{display:flex;gap:0;margin:6px 0 20px;align-items:flex-start}
.cstep{flex:1;min-width:0;text-align:center;position:relative;padding-top:38px;font-weight:700;font-size:14px;line-height:1.3}
.cstep::before{content:attr(data-n);position:absolute;top:0;left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:var(--surface2);color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:900;border:2px solid var(--border);line-height:1}
.cstep::after{content:'';position:absolute;top:15px;left:calc(-50% + 18px);right:calc(50% + 18px);height:2px;background:var(--border)}
.cstep:first-child::after{display:none}
.cstep.active::before{background:var(--primary);border-color:var(--primary);color:#fff}
.cstep.active{color:var(--primary)}
.cstep.done::before{background:var(--primary);border-color:var(--primary);color:#fff;content:'✓'}
@media (min-width:641px){ .cstep{white-space:nowrap} }
.radio-card{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--border);border-radius:14px;padding:14px;cursor:pointer;font-weight:700;background:var(--surface)}
.radio-card:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.radio-card input{width:20px;height:20px;accent-color:var(--primary);margin-top:2px}
@media (max-width:760px){
  .account-layout{flex-direction:column}
  .account-tabs{width:100%;position:static;display:flex;overflow-x:auto;gap:6px;padding:8px}
  .account-tabs a{white-space:nowrap;margin-bottom:0;flex-shrink:0}
}

/* Rich Menu drawer (right side) */
.drawer-loc{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:6px}
.drawer-loc small{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.drawer-loc strong{font-size:15px}
.drawer-sec{margin:20px 0 6px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.drawer-link{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;font-weight:700;color:var(--text)}
.drawer-link:hover{background:var(--surface2)}
.drawer-link .ico{width:36px;height:36px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.drawer-link small{display:block;font-weight:600;color:var(--muted);font-size:12px}
.drawer-foot{margin-top:24px;border-top:1px solid var(--border);padding-top:14px;font-size:14px}
.drawer-foot small{color:var(--muted)}

/* Complaint form padding (Issue 1, v5) — every field gets comfortable,
   consistent spacing; nothing touches a card edge. */
.complaint-wrap .card{padding:26px 28px}
.complaint-wrap .complaint-hero{padding:30px 32px}
.complaint-wrap .complaint-step{padding:26px 28px}
.complaint-wrap label{display:block;font-weight:700;margin:18px 0 6px}
/* .complaint-wrap label:first-of-type{margin-top:0} */
.complaint-wrap input,.complaint-wrap select,.complaint-wrap textarea{margin:0 0 4px;padding:12px 14px}
.complaint-wrap input[type=file]{padding:10px 12px}
.complaint-wrap textarea{min-height:120px}
.complaint-wrap .file-name{display:block;margin-top:6px;color:var(--muted);font-size:13px}
.complaint-wrap .radio-card{padding:16px 18px}
.complaint-wrap .complaint-radio-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.complaint-wrap .step-nav{display:flex;gap:10px;margin-top:22px}
.complaint-wrap .step-nav .btn{margin:0}
.complaint-wrap .step-intro{color:var(--muted);margin:6px 0 18px}
@media (max-width:640px){
  .complaint-wrap .card,.complaint-wrap .complaint-step{padding:20px}
  .complaint-wrap .complaint-hero{padding:22px 20px}
  .complaint-wrap .complaint-radio-grid{grid-template-columns:1fr}
  .complaint-wrap .step-nav{flex-direction:column}
  .complaint-wrap .step-nav .btn{width:100%;text-align:center}
}

/* Horizontal-scroll rows: arrow buttons + hidden scrollbar (Issue 3, v5;
   fixed in v6). The arrows sit OUTSIDE the scrollable row as flex items
   flanking it — they are never covered by the chips/cards. The old
   absolutely-positioned arrows were hidden behind the chips because the
   chips row has z-index:20 while the arrows only had z-index:6. */
.scroll-wrap{position:relative;display:flex;align-items:center;gap:10px}
.scroll-wrap .chips,.scroll-wrap .carousel{flex:1;min-width:0}
.scroll-arrow{position:static;transform:none;flex-shrink:0;z-index:6;width:38px;height:38px;border-radius:50%;border:2px solid var(--border);background:var(--surface);color:var(--primary);font-size:22px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.18);line-height:1;padding:0 0 2px}
.scroll-arrow:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.scroll-arrow:disabled{opacity:.35;cursor:not-allowed}
.scroll-arrow:disabled:hover{background:var(--surface);color:var(--primary);border-color:var(--border)}
@media (max-width:640px){
  .scroll-arrow{width:32px;height:32px;font-size:18px}
}

/* Admin tables on mobile (v7). Root cause: .admin-table had
   overflow:hidden and the table was width:100% with nowrap headers and
   nowrap action buttons, so wide tables ran off the right edge of the page
   and the Actions column was unreachable. Now every admin table scrolls
   horizontally INSIDE its card (min-width keeps columns readable) and a
   hint line tells the user to swipe. The page itself never overflows. */
@media (max-width:900px){
  .admin-table table{min-width:640px}
  .admin-table::after{content:'← Swipe to see all columns →';display:block;padding:8px 14px;font-size:12px;font-weight:700;color:var(--muted);background:var(--surface2);border-top:1px solid var(--border)}
  .search-form{flex-wrap:wrap}
  .search-form input{flex:1 1 200px}
  .search-form select{flex:0 1 170px}
}