/* =========================================================
Aurora Café — RTL-first, Light Slate Palette
- Samsung Tab 11" + Desktop
- Categories on top (home), order details below
- Category images: unified square, full-bleed cover
========================================================= */
/* ---------- Design Tokens ---------- */
:root{
/* Light palette */
--bg1:#f5f7fb;
--bg2:#eef3f9;
--text:#0f172a;
--muted:#5b677a;
--line:#d9e1ec;
--aurora-1:#7c9aff; /* periwinkle */
--aurora-2:#33e1ed; /* aqua */
--aurora-3:#67e8a6; /* mint */
--accent:#ffb454; /* honey orange */
--ok:#22c55e;
--err:#ef4444;
--radius:16px;
--shadow:0 10px 30px rgba(15,23,42,.10);
--tap:48px; --tap-sm:42px;
--gap-1:10px; --gap-2:14px; --gap-3:18px;
}
/* ---------- Reset & Base ---------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{color-scheme:light}
body{
direction: rtl;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
color:var(--text); line-height:1.5; overflow-x:hidden;
background:
radial-gradient(1200px 800px at 70% -10%, rgba(124,154,255,.18) 0%, transparent 60%),
radial-gradient(900px 600px at 0% 110%, rgba(51,225,237,.14) 0%, transparent 60%),
linear-gradient(160deg, var(--bg1), var(--bg2));
background-attachment:fixed;
}
body::before{
content:""; position:fixed; inset:-10% -10% auto -10%; height:60vh; z-index:-1; opacity:.22;
background: conic-gradient(from 210deg at 10% 50%, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-1));
filter: blur(56px) saturate(110%);
}
:focus-visible{outline:3px solid var(--aurora-2);outline-offset:3px;border-radius:12px}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ---------- App Shell ---------- */
#appRoot{min-height:100dvh;display:flex;flex-direction:column}
/* ---------- Header ---------- */
.header{
position:sticky; top:0; z-index:60;
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:10px clamp(12px,3vw,20px);
background:linear-gradient(180deg,#ffffff,#f8fbff);
border-bottom:1px solid var(--line);
box-shadow:0 2px 12px rgba(15,23,42,.04);
}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#eef3f9;border:1px solid #e3e8f0}
.brand h1{margin:0;font-size:18px;font-weight:900;color:var(--text)}
.header-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.net{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px}
.dot{width:12px;height:12px;border-radius:50%;background:var(--err);box-shadow:0 0 0 2px #fecaca90;border:1px solid #ffd9d9}
.user-pill{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#eef3f9;border:1px solid #dce2eb;color:var(--text);font-weight:700}
.user-email{font-weight:700;color:var(--text)}
.cart-btn{
background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 14px;
color:var(--text);font-weight:700;cursor:pointer
}
#logoutBtnTop{
background:#fff;border:2px solid #ef4444;color:#ef4444;border-radius:999px;padding:6px 14px;font-weight:800
}
#logoutBtnTop:hover{background:#fee2e2}
/* ---------- Container & Layout ---------- */
.container{max-width:1380px;width:100%;margin:0 auto;padding-inline: clamp(10px,2.6vw,28px)}
.layout{display:grid;grid-template-columns:380px 1fr;gap:var(--gap-2);margin-top:8px;flex:1;min-height:0}
@media (max-width:1200px){ .layout{grid-template-columns:340px 1fr} }
@media (max-width:1024px){ .layout{grid-template-columns:1fr} }
.panel{
background:linear-gradient(180deg,#ffffff,#f8fbff);
border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
padding:14px; display:flex; flex-direction:column; min-height:0;
}
/* Home: categories on top, order panel below (all sizes) */
#appRoot.home .layout{display:block;margin:0;padding-top:8px}
#appRoot.home .layout > section.panel{margin:0 0 14px 0}
/* ---------- Inputs & Buttons ---------- */
input,select,textarea,button{
font-size:16px;min-height:var(--tap-sm);border-radius:12px;
border:1px solid var(--line);padding:10px 12px;background:#fff;color:var(--text);
transition:box-shadow .2s,border-color .2s,transform .06s;
}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px #33e1ed33;border-color:#33e1ed66}
textarea{resize:vertical}
.btn{cursor:pointer;user-select:none;background:#f2f6fb;border:1px solid #dfe6f1}
.btn:hover{filter:brightness(1.03)}
.btn:active{transform:translateY(1px)}
.btn.primary{
background:linear-gradient(90deg,var(--aurora-2),var(--aurora-3));
color:#0b1117;border:none;font-weight:900
}
.btn.secondary{background:#fff}
.btn.danger{background:#ffe9e9;border-color:#ffd1d1;color:#b42323}
.btn[disabled]{opacity:.6;cursor:not-allowed}
/* ---------- Badges ---------- */
.badge{
display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;margin-inline-start:8px;
border-radius:9999px;background:linear-gradient(90deg,var(--aurora-1),var(--aurora-2));color:#0c0f13;font-weight:900;font-size:13px
}
@keyframes bump{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-2px) scale(1.14)}100%{transform:translateY(0) scale(1)}}
.badge.bump{animation:bump .35s ease}
/* ---------- Cart ---------- */
.cart-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.total{font-size:18px;font-weight:900}
#cartList{overflow:auto;flex:1;min-height:120px}
.cart-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed #e4ebf4}
.cart-item > .meta{flex:1}
.rowmuted{font-size:12px;color:var(--muted)}
.qty{width:90px;text-align:center}
.cart-thumb{width:44px;height:44px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#f4f7fc}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.pills{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.pill{padding:6px 10px;border:1px solid var(--line);border-radius:999px;cursor:pointer;background:#fff;min-width:44px;min-height:36px;color:var(--text)}
.pill.active{background:linear-gradient(90deg,var(--aurora-1),var(--aurora-2));color:#0b1117;border-color:transparent}
/* Qty group (all places) */
.qty-group{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.qty-btn{min-width:var(--tap-sm);min-height:var(--tap-sm);border:none;background:#eef3f9;color:var(--text);font-size:18px;font-weight:800;cursor:pointer}
.qty-input{width:62px;min-height:var(--tap-sm);text-align:center;border:none;background:#fff;color:var(--text);font-weight:800}
/* ---------- Categories (square, full image, title below) ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.cat-card{
display:grid;grid-template-rows:1fr 52px;
background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
box-shadow:0 8px 24px rgba(15,23,42,.06);cursor:pointer;transition:transform .1s ease, box-shadow .2s ease;
}
.cat-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(15,23,42,.08)}
.cat-visual{width:100%;aspect-ratio:1/1}
.cat-visual img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.cat-title{
display:grid;place-items:center;height:52px;min-height:52px;
padding:0 12px;background:#f6f9ff;color:var(--text);border-top:1px solid var(--line);
font-weight:900;text-align:center;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2
}
/* ---------- Products ---------- */
.products-scroll{
overflow:auto;border:1px solid var(--line);border-radius:16px;
padding-bottom:max(8px, env(safe-area-inset-bottom));
background:linear-gradient(180deg,#ffffff,#f8fbff);
max-height: calc(100dvh - 240px);
}
@media (max-width:640px){ .products-scroll{max-height:none} }
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.product-card{
background:linear-gradient(180deg,#ffffff,#f8fbff);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow)
}
.product-thumb{width:100%;aspect-ratio:4/3;object-fit:contain;background:#f4f7fc;border:1px solid var(--line);border-radius:12px;padding:6px;margin-bottom:8px}
.product-footer{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:6px}
.product-name{margin:0;font-weight:900;font-size:18px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width: clamp(120px, 28vw, 220px)}
.price-chip{
display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
background:linear-gradient(90deg,#f3f7ff,#eef4fb);border:1px solid var(--line);font-weight:900;font-size:14px;color:#0f172a;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06)
}
/* Add-to-cart feedback (optional; JS can toggle .added) */
.product-card.added{animation:added 600ms ease}
@keyframes added{0%{box-shadow:0 0 0 0 rgba(103,232,166,0)}30%{box-shadow:0 0 0 6px rgba(103,232,166,.22)}100%{box-shadow:var(--shadow)}}
/* Backbar (inside productsView) */
.modern-backbar{
position:sticky;top:0;z-index:61;display:flex;align-items:center;gap:8px;
background:linear-gradient(180deg,#ffffff,#f8fbff);border-bottom:1px solid var(--line);padding:8px 12px
}
.back-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--text);cursor:pointer}
.cart-btn{background:#fff}
/* Search input */
.search-wrap{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
#search{min-width:200px;font-size:14px;background:#fff;color:var(--text);border:1px solid var(--line);border-radius:12px}
#search::placeholder{color:#6b7280}
@media (max-width:720px){ #search{min-width:140px} }
/* ---------- Table → cards on small screens ---------- */
@media (max-width:640px){
#productsTable thead{display:none}
#productsTable,#productsTable tbody,#productsTable tr,#productsTable td{display:block;width:100%}
#productsTable tr{
background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;box-shadow:var(--shadow)
}
#productsTable td{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:none!important}
#productsTable td::before{content:attr(data-label);font-weight:700;color:var(--muted);margin-inline-end:10px}
#productsTable .qty{width:90px}
#productsTable button{padding:10px 14px}
}
/* ---------- Toast ---------- */
.toast{
position:fixed; inset-inline-start:max(16px, env(safe-area-inset-left)); inset-block-end:max(16px, env(safe-area-inset-bottom));
background:linear-gradient(90deg,var(--aurora-1),var(--aurora-2)); color:#0b1117;
padding:12px 14px;border-radius:14px;box-shadow:var(--shadow);z-index:9999;font-weight:900;display:none
}
/* ---------- Order Preview (Cart Overlay) ---------- */
.order-preview{position:fixed;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,249,255,.92));z-index:999;display:flex;justify-content:center;align-items:flex-start;padding-top:40px}
.order-preview-content{background:#ffffff;color:var(--text);border-radius:16px;padding:20px;width:92%;max-width:680px;max-height:80%;overflow:auto;box-shadow:0 12px 36px rgba(15,23,42,.12);border:1px solid var(--line)}
.order-preview-content.compact{max-width:420px}
.preview-actions .qty-btn{min-width:36px;min-height:36px}
#closePreview{background:#fff;color:#b42323;border:1px solid #ffd1d1;border-radius:12px;font-weight:800}
#orderPreview .qty-group,#orderPreview .qty-group.sm{background:#fff;border:1px solid var(--line);border-radius:12px}
#orderPreview .qty-btn{background:#eef3f9;color:var(--text);border:none;min-width:42px;min-height:42px;font-weight:800}
#orderPreview .qty-input{background:#fff;color:var(--text);border:none;min-height:42px;width:64px;font-weight:800}
#orderPreview .btn.danger{background:#ffe9e9;color:#b42323;border:1px solid #ffd1d1}
#orderPreview .rowmuted{color:var(--muted)}
#orderPreview .order-preview-content img{border:1px solid var(--line);background:#f4f7fc;border-radius:6px}
/* ---------- Fullscreen flows (productsView) ---------- */
.fullscreen{
position:fixed; inset:0; background:linear-gradient(160deg, var(--bg1), var(--bg2)); z-index:80;
display:flex; flex-direction:column;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.fullscreen .modern-backbar{position:sticky;top:0;margin:0;border:none;border-radius:0}
.fullscreen .products-scroll{
flex:1 1 auto; height:auto; max-height:none; overflow:auto; -webkit-overflow-scrolling:touch;
border:none; border-radius:0; padding:0 0 max(12px, env(safe-area-inset-bottom))
}
@media (min-width:834px) and (max-width:1180px){
#productsView.fullscreen .products-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
#productsView.fullscreen .product-thumb{max-height:180px;object-fit:contain;padding:6px;background:#f4f7fc}
}
@media (max-width:640px){
#productsView.fullscreen .product-thumb{max-height:150px;object-fit:contain;padding:6px}
}
.body-lock{overflow:hidden}
/* ---------- Motion prefs ---------- */
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
}
/* ---------- Samsung Tab 11" ergonomics ---------- */
@media (min-width:834px) and (max-width:1180px){
.qty-btn{min-width:48px;min-height:48px;font-size:20px}
.qty-input{min-height:48px;width:68px}
.btn.primary{min-height:46px}
}
/* ---------- Login Screen — Light ---------- */
#lockScreen.order-preview{
background:linear-gradient(180deg,#ffffff,#f6f9ff);
padding-top:0;align-items:center;justify-content:center;z-index:1000
}
#lockScreen .order-preview-content{
background:#ffffff;color:var(--text);border:1px solid var(--line);border-radius:16px;
box-shadow:0 12px 36px rgba(15,23,42,.12);width:92%;max-width:420px;padding:20px
}
#lockScreen .order-preview-content h2{color:var(--text)}
#emailInput,#passInput{
background:#fff;color:var(--text);border:1px solid var(--line);border-radius:12px;
box-shadow:0 1px 0 rgba(15,23,42,.02) inset
}
#emailInput::placeholder,#passInput::placeholder{color:#6b7280}
#loginBtn{
background:linear-gradient(90deg,var(--aurora-2),var(--aurora-3));
color:#0b1117;border:none;border-radius:12px;min-height:42px;font-weight:900
}
#logoutBtn{
background:#fff;color:var(--text);border:1px solid var(--line);border-radius:12px;min-height:42px;font-weight:800
}
/* soften any underlying bars if visible during login */
#lockScreen + .header,#lockScreen ~ .header{background:linear-gradient(180deg,#ffffff,#f6f9ff);border-bottom:1px solid var(--line)}
#lockScreen ~ .modern-backbar{background:linear-gradient(180deg,#ffffff,#f6f9ff);border-bottom:1px solid var(--line)}
/* Header overall */
.header{
position:sticky;top:0;z-index:60;
display:flex;align-items:center;justify-content:space-between;
padding:10px clamp(12px,3vw,20px);
background:linear-gradient(180deg,#ffffff,#f8fbff);
border-bottom:1px solid #d9e1ec;
box-shadow:0 2px 10px rgba(15,23,42,.06);
}
/* מותג */
.brand{display:flex;align-items:center;gap:10px}
.logo{width:44px;height:44px;display:grid;place-items:center;
border-radius:12px;background:#eef3f9;border:1px solid #e0e7f1}
.site-title{margin:0;font-size:20px;font-weight:900;color:#0f172a}
/* בקרי משתמש */
.header-controls{display:flex;align-items:center;gap:12px}
/* סל */
.cart-btn{
background:#fff;border:1px solid #d9e1ec;border-radius:12px;
padding:6px 14px;font-weight:700;color:#0f172a;cursor:pointer;
display:flex;align-items:center;gap:6px
}
/* יציאה */
#logoutBtnTop{
background:#fff;border:2px solid #ef4444;color:#ef4444;
border-radius:12px;padding:6px 14px;font-weight:800;cursor:pointer
}
#logoutBtnTop:hover{background:#fee2e2}
/* אימייל */
.user-pill{
display:flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:999px;
background:#eef3f9;border:1px solid #dce2eb;color:#0f172a;font-weight:700
}
/* מצב רשת */
.net{display:flex;align-items:center;gap:6px;color:#5b677a;font-size:14px}
.dot{width:12px;height:12px;border-radius:50%;
background:#22c55e; /* ירוק = מחובר */
border:1px solid #b3e6c2;box-shadow:0 0 0 2px #dcfce7}
/* מצב בית: קטגוריות למעלה, פרטי הזמנה למטה */
#appRoot.home .layout{
display:block !important;
margin:0 !important;
padding-top:8px !important;
}
#appRoot.home .layout > section.panel{
margin:0 0 14px 0 !important;
}
/* ודא שקטגוריות מופיעות ראשונות */
#appRoot.home #categoriesView{
order:1 !important;
}
#appRoot.home #cartPanel{
order:2 !important;
}
/* Settings popover */
.settings-popover{
position: fixed;
top: 70px; /* ממש מתחת להדר */
inset-inline-end: clamp(12px, 3vw, 24px);
background:#fff;
color:#0f172a;
border:1px solid #d9e1ec;
border-radius:12px;
padding:12px;
box-shadow: 0 12px 24px rgba(15,23,42,.12);
z-index: 1200;
min-width: 220px;
}
.settings-popover.hidden{ display:none; }
.settings-row{
display:flex; align-items:center; justify-content:space-between;
gap:12px; padding:8px 0; border-bottom:1px dashed #e5edf6;
}
.settings-row:last-child{ border-bottom:none; }
#settingsBtn{ border:1px solid #d9e1ec; background:#fff; border-radius:12px; padding:6px 12px; }
/* ===== Settings popover & quick toggles (UI polish) ===== */
/* כפתור גלגל־שיניים */
#settingsBtn{
border:1px solid var(--line);
background:#fff;
border-radius:12px;
padding:6px 12px;
line-height:1;
}
/* הפופאובר עצמו (כבר יש אצלך, זה רק חיזוקים זעירים) */
.settings-popover{
position:fixed;
top: calc(56px + 8px); /* קצת מתחת להדר */
inset-inline-end: clamp(12px, 3vw, 24px);
background:#fff;
color:var(--text);
border:1px solid var(--line);
border-radius:12px;
padding:12px;
box-shadow:0 12px 24px rgba(15,23,42,.12);
z-index:1200;
min-width:220px;
}
.settings-popover.hidden{ display:none; }
.settings-row{
display:flex; align-items:center; justify-content:space-between;
gap:12px; padding:8px 0; border-bottom:1px dashed #e5edf6;
}
.settings-row:last-child{ border-bottom:none; }
/* אייקוני טוגל מהירים בהדר (אם הוספת ב־HTML):
*/
.quick-toggle{
border:1px solid var(--line);
background:#fff;
border-radius:12px;
width:40px; height:36px;
display:grid; place-items:center;
font-size:18px; cursor:pointer;
}
.quick-toggle[aria-pressed="false"]{
opacity:.6;
}
/* היילייט טאץ' נקי באנדרואיד */
button, .btn, .back-btn, .cart-btn { -webkit-tap-highlight-color: transparent; }
/* וידוא שהאוברליי של הסל מעל הכל ובגוון בהיר (כבר קיים, חיזוק בלבד) */
.order-preview{ z-index: 1300; background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(246,249,255,.95)); }
/* ===== Login Screen (modern) ===== */
.login-backdrop {
position: fixed;
inset: 0;
display: grid;
place-items: center;
background: rgba(20, 16, 12, 0.6);
backdrop-filter: blur(3px);
z-index: 9999;
}
.login-card {
width: min(92vw, 420px);
background: #fff;
border-radius: 18px;
box-shadow: 0 12px 30px rgba(0,0,0,.18);
padding: 20px 20px 16px;
direction: rtl;
}
.login-head {
display: grid;
grid-template-columns: 54px 1fr;
gap: 12px;
align-items: center;
margin-bottom: 14px;
}
.login-head .logo {
width: 54px; height: 54px;
display: grid; place-items: center;
border-radius: 14px;
background: #2a1e14;
color: #fff; font-size: 28px;
}
.login-head h2 { margin: 0 0 4px; font-size: 1.2rem; }
.login-head p { margin: 0; color: #666; font-size: .95rem; }
.login-card .row { margin: 10px 0; }
.login-card label { display: inline-block; margin-bottom: 6px; font-weight: 600; }
.login-card input {
width: 100%;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid #ddd;
outline: none;
}
.login-card input:focus { border-color: #2a1e14; box-shadow: 0 0 0 3px rgba(42,30,20,.15); }
.login-card .actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.login-card .btn { cursor: pointer; border: none; border-radius: 12px; padding: 10px 14px; }
.login-card .btn.primary { background: #2a1e14; color: #fff; }
.login-card .btn.secondary { background: #eee; color: #222; }
/* התאמה למצב כהה אם יש לכם תמיכה כללית */
@media (prefers-color-scheme: dark) {
.login-card { background: #1f1b17; color: #eee; }
.login-card input { background: #17130f; border-color: #3a342e; color: #eee; }
.login-card .btn.secondary { background: #2c2722; color: #eee; }
}
/* === LOGIN OVERLAY (force on top & centered) === */
.login-backdrop{
position: fixed !important;
inset: 0 !important; /* full screen */
display: grid !important;
place-items: center !important; /* center the card */
background: rgba(0,0,0,.45) !important;
backdrop-filter: blur(3px);
z-index: 2147483647 !important; /* מעל כל השכבות (toast/preview וכו') */
}
.login-backdrop.hidden { display: none !important; }
.login-card{
width: min(92vw, 420px);
margin: 0; /* אין יישור לפינה */
background: #1f1b17; /* כהה אלגנטי */
color: #fff;
border-radius: 16px;
box-shadow: 0 12px 30px rgba(0,0,0,.28);
padding: 16px 16px 14px;
}
.body-lock { overflow: hidden !important; } /* לא מאפשר גלילה מאחור */
/* אם יש לך שכבות עם z-index גבוהות במיוחד, זה ידחוף את הלוגין מעליהן */
.order-preview, #toast, .fx-layer { z-index: 9999; } /* לא חובה, רק יישור קו */
.login-backdrop { position:fixed; inset:0; display:grid; place-items:center; z-index:99999; }
.login-backdrop.hidden { display:none; }
.body-lock { overflow:hidden; }
.login-backdrop { position:fixed; inset:0; display:grid; place-items:center; z-index:99999; }
.body-lock { overflow:hidden; }
/* תוספות */
.addon-card {
display: block;
cursor: pointer;
border-radius: 16px;
overflow: hidden;
background: #1e1e22;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.addon-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.addon-content {
display: flex;
flex-direction: column;
align-items: center;
padding: 14px;
gap: 10px;
}
.addon-content img {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 12px;
border: 2px solid #444;
transition: transform 0.3s ease;
}
.addon-card:hover img {
transform: scale(1.08);
}
.addon-content span {
font-size: 15px;
color: #fff;
font-weight: 500;
text-align: center;
}
.addon-card input:checked + .addon-content {
background: linear-gradient(135deg, #2f80ed, #56ccf2);
color: #fff;
}
/* نمط بديل في حال عدم دعم :has() — يعتمد على صنف is-checked من JS */
.addon-card.is-checked .addon-content{
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color:#fff;
border-radius: calc(var(--card-radius) - 2px);
}
.addon-card.is-checked img{
transform: scale(1.02);
border-color: rgba(255,255,255,.65);
}
.addon-card.is-checked span{ color:#fff; }
/* إمكانية وصول وحجم منطقة اللمس */
.addon-card input{
width: 1px; height:1px; opacity:0; position:absolute; pointer-events:none; /* مخفي بصرياً */
}
.addon-content{ min-height: clamp(110px, 28vw, 160px); }
/* تحسينات شاشات كبيرة */
@media (min-width: 1024px){
.addons-grid{
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
}
/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
.addon-card, .addon-content img{
transition: none;
}
}
/* النص */
.addon-content span{
color: var(--text);
font-weight: 600;
line-height: 1.2;
font-size: clamp(13px, 2.8vw, 16px);
}
/* تأثيرات تفاعل */
.addon-card:hover,
.addon-card:focus-within{
transform: translateY(-4px);
box-shadow: 0 10px 22px rgba(0,0,0,.35);
border-color:#3a3a40;
}
.addon-card:hover img{ transform: scale(1.05); }
/* حالة التحديد (مدعومة في متصفحات حديثة) */
.addon-card:has(input:checked) .addon-content{
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color:#fff;
border-radius: calc(var(--card-radius) - 2px);
}
.addon-card:has(input:checked) img{
transform: scale(1.02);
border-color: rgba(255,255,255,.65);
}
.addon-card:has(input:checked) span{ color:#fff; }
/* إمكانية وصول وحجم منطقة اللمس */
.addon-card input{
width: 1px; height:1px; opacity:0; position:absolute; pointer-events:none; /* مخفي بصرياً */
}
.addon-content{ min-height: clamp(110px, 28vw, 160px); }
/* محتوى البطاقة */
.addon-content{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap: clamp(8px, 1.5vw, 12px);
padding: clamp(10px, 3.5vw, 16px);
text-align:center;
}
/* الصورة بحجم مرن + نسبة أبعاد ثابتة لثبات التخطيط */
.addon-content img{
width: clamp(64px, 18vw, 96px);
height: clamp(64px, 18vw, 96px);
object-fit: cover;
border-radius: 14px;
border: 1.5px solid #3a3a40;
transition: transform .25s ease;
}
/* بطاقة الإضافة */
.addon-card{
display:block;
cursor:pointer;
border-radius: var(--card-radius);
background: var(--card-bg);
border:1px solid var(--card-border);
box-shadow: var(--shadow);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
-webkit-tap-highlight-color: transparent;
outline: none;
}
/* شبكة مرنة تستجيب لحجم الشاشة */
.addons-grid{
display:grid;
gap: clamp(10px, 2vw, 18px);
grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 28vw, 180px), 1fr));
align-items: stretch;
}
/* ==== Addons in modal: 2-cols + inner scroll (scoped) ==== */
/* הופך את רשימת התוספות לרשת של 2 עמודות בתוך המודאל בלבד */
.order-preview-content #addonsList{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
/* יאפשר לרשימה לתפוס את הגובה שנשאר ולגלול */
flex: 1 1 auto;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 8px 4px;
}
/* במסכים צרים — עמודה אחת נוחה */
@media (max-width: 540px){
.order-preview-content #addonsList{
grid-template-columns: 1fr;
}
}
/* מוודא שמיכל התוכן של המודאל מנהל גבהים כמו Flex ונותן מקום לגלילה פנימית */
.order-preview-content{
display: flex;
flex-direction: column;
max-height: min(80vh, 720px); /* כבר היה 80%, מוסיף תקרה קשיחה */
overflow: hidden; /* הגלילה על הרשימה עצמה (#addonsList) */
}
/* הכרטיסים נשארים יפים בתוך התאים של הגריד */
.order-preview-content #addonsList .addon-card{
width: 100%;
height: auto;
}
/* מחזק את מימדי התמונה בתוך תא גריד קטן יותר */
.order-preview-content #addonsList .addon-content img{
width: 64px;
height: 64px;
}
/* סרגל כפתורי אישור/מחיקה – דביק לתחתית המודאל כדי שתמיד יהיה זמין */
.order-preview-content .preview-actions{
position: sticky;
bottom: 0;
z-index: 2;
background:
linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 28%, #ffffff 100%);
padding-top: 10px;
margin-top: 8px;
border-top: 1px solid var(--line);
}
/* שמירה על שוליים בטוחים בטאבלטים עם notch/מחוות */
@supports (padding: max(0px)){
.order-preview-content .preview-actions{
padding-bottom: max(10px, env(safe-area-inset-bottom));
}
}
/* ==== Fix: addon label contrast on dark modal ==== */
/* מצב רגיל – טקסט בהיר על רקע כהה */
.order-preview-content #addonsList .addon-content span{
color: #e6edf7 !important; /* בהיר, קריא על רקע שחור */
}
/* מצב בחירה – ודא שלבן מנצח כל כלל אחר */
.order-preview-content #addonsList .addon-card input:checked + .addon-content span,
.order-preview-content #addonsList .addon-card.is-checked .addon-content span,
.order-preview-content #addonsList .addon-card:has(input:checked) .addon-content span{
color: #ffffff !important;
}
/* רענון מסגרת תמונה על כהה (אופציונלי, לשיפור ניגוד) */
.order-preview-content #addonsList .addon-content img{
border-color: #4b4f57;
}
/* ===== Modal Addons: readable labels on dark background ===== */
/* 1) מחליף את משתנה --text רק בתוך המודאל כך שיהיה בהיר */
.order-preview-content{
--text: #e6edf7; /* טקסט בהיר כברירת מחדל בתוך המודאל בלבד */
color: var(--text);
}
/* 2) ודא שהטקסט של שם התוספת תמיד בהיר במצב רגיל */
.order-preview-content #addonsList .addon-card .addon-content > span{
color: #e6edf7 !important;
}
/* 3) במצב בחירה — הטקסט לבן חד */
.order-preview-content #addonsList .addon-card input:checked + .addon-content,
.order-preview-content #addonsList .addon-card:has(input:checked) .addon-content,
.order-preview-content #addonsList .addon-card.is-checked .addon-content{
color:#ffffff !important;
}
.order-preview-content #addonsList .addon-card input:checked + .addon-content > span,
.order-preview-content #addonsList .addon-card:has(input:checked) .addon-content > span,
.order-preview-content #addonsList .addon-card.is-checked .addon-content > span{
color:#ffffff !important;
}
/* 4) מסגרת התמונה על רקע כהה (קונטרסט עדין) */
.order-preview-content #addonsList .addon-content img{
border-color:#4b4f57 !important;
}
/* מק' */
/* ===== Addons Overlay (dark) — 2 cols, scroll, readable labels ===== */
/* מבנה גבהים למודאל הכהה */
#addonsOverlay > div{
display:flex;
flex-direction:column;
max-height: min(80vh, 720px);
overflow:hidden; /* הגלילה תהיה על הרשימה עצמה */
}
/* רשימת התוספות: שתי עמודות + גלילה פנימית */
#addonsOverlay #addonsList{
display:grid !important;
grid-template-columns: repeat(2, minmax(0,1fr));
gap:12px;
flex:1 1 auto;
overflow:auto;
-webkit-overflow-scrolling:touch;
padding:8px 4px;
}
@media (max-width:540px){
#addonsOverlay #addonsList{ grid-template-columns:1fr; }
}
/* שמות התוספות על רקע שחור – בהיר תמיד, לבן כשנבחר */
#addonsOverlay #addonsList .addon-content > span{
color:#e9effa !important; /* קריא על כהה */
text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
#addonsOverlay #addonsList .addon-card input:checked + .addon-content > span,
#addonsOverlay #addonsList .addon-card.is-checked .addon-content > span,
#addonsOverlay #addonsList .addon-card:has(input:checked) .addon-content > span{
color:#ffffff !important;
}
/* קונטרסט עדין למסגרת התמונה על כהה */
#addonsOverlay #addonsList .addon-content img{
border-color:#4b4f57 !important;
}
/* סרגל הכפתורים בתחתית – דביק ונראה תמיד */
#addonsOverlay > div > div:last-child{
position:sticky;
bottom:0;
z-index:2;
background: linear-gradient(180deg, rgba(28,28,30,0) 0%, rgba(28,28,30,.92) 38%, #1c1c1e 100%);
padding-top:10px;
}
/* לשמור על מימדי הכרטיסים יפים ברשת */
#addonsOverlay #addonsList .addon-card{ width:100%; height:auto; }
#addonsOverlay #addonsList .addon-content img{ width:64px; height:64px; }
/* גגגג */
/* ===================== FIX 1: Cart preview colors ===================== */
/* החזרה לצבע טקסט כהה בתוך חלון הסל בלבד (מביא בחזרה את הקריאוּת) */
#orderPreview .order-preview-content{
--text: #0f172a; /* כהה — כמו ברירת המחדל באתר */
color: var(--text) !important;
}
#orderPreview .order-preview-content h2,
#orderPreview .order-preview-content .cart-item,
#orderPreview .order-preview-content .cart-item *:not(.rowmuted){
color: var(--text) !important;
}
/* טקסט משני נשאר עדין */
#orderPreview .order-preview-content .rowmuted{
color: var(--muted) !important;
}
/* ============== FIX 2: Addons overlay – light UI + selection ============== */
/* פאנל המודאל בפנים – רקע ולוק כמו הקטגוריות/מוצרים */
#addonsOverlay > div{
display:flex;
flex-direction:column;
background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
color: var(--text) !important;
border: 1px solid var(--line) !important;
border-radius: 16px !important;
box-shadow: var(--shadow);
max-height: min(80vh, 720px);
overflow: hidden; /* הגלילה תהיה על הרשימה */
}
/* כותרת המודאל */
#addonsOverlay h2{ color: var(--text) !important; }
/* רשימת התוספות – שתי עמודות + גלילה פנימית */
#addonsOverlay #addonsList{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
flex: 1 1 auto;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 10px 6px 12px;
}
@media (max-width:540px){
#addonsOverlay #addonsList{ grid-template-columns: 1fr; }
}
/* כרטיס תוספת – לבן, כמו כרטיסי מוצרים */
#addonsOverlay #addonsList .addon-card{
background: #fff !important;
border: 1px solid var(--line) !important;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(15,23,42,.06);
transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
#addonsOverlay #addonsList .addon-card:hover{
transform: translateY(-2px);
box-shadow: 0 18px 40px rgba(15,23,42,.08);
}
/* תוכן הכרטיס */
#addonsOverlay #addonsList .addon-content{
padding: 14px;
gap: 10px;
}
#addonsOverlay #addonsList .addon-content img{
width: 70px; height: 70px;
object-fit: cover;
border-radius: 12px;
border: 1px solid var(--line) !important;
}
#addonsOverlay #addonsList .addon-content > span{
font-size: 15px;
font-weight: 700;
color: var(--text) !important; /* תמיד קריא על רקע לבן */
text-align: center;
}
/* הדגשת בחירה – שינוי רקע הכרטיס + גבול */
#addonsOverlay #addonsList .addon-card input:checked + .addon-content,
#addonsOverlay #addonsList .addon-card.is-checked .addon-content,
#addonsOverlay #addonsList .addon-card:has(input:checked) .addon-content{
background: linear-gradient(90deg, var(--aurora-1), var(--aurora-2)) !important;
border-radius: 14px;
color: #0b1117 !important; /* טקסט כהה על הגרדיאנט הבהיר */
}
#addonsOverlay #addonsList .addon-card input:checked + .addon-content > span,
#addonsOverlay #addonsList .addon-card.is-checked .addon-content > span,
#addonsOverlay #addonsList .addon-card:has(input:checked) .addon-content > span{
color: #0b1117 !important;
}
#addonsOverlay #addonsList .addon-card input:checked + .addon-content img,
#addonsOverlay #addonsList .addon-card.is-checked .addon-content img,
#addonsOverlay #addonsList .addon-card:has(input:checked) .addon-content img{
border-color: rgba(12,15,19,.28) !important;
}
/* כפתורי “مسح / تأكيد” – תמיד נראים בתחתית */
#addonsOverlay > div > div:last-child{
position: sticky;
bottom: 0;
z-index: 2;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(248,251,255,.92) 38%, #f8fbff 100%);
padding-top: 10px;
}
/* ===== Hotdog add-ons: show labels clearly on light cards ===== */
#addonsOverlay #addonsList .addon-card .addon-content > span{
display:block;
margin-top:6px;
font-weight:700;
line-height:1.25;
color:#0f172a !important; /* כהה תמיד על כרטיס לבן */
min-height:1.2em; /* מונע קריסה/חתיכה של השורה */
}
/* בחירה – רקע הודגש, טקסט נשאר קריא */
#addonsOverlay #addonsList .addon-card input:checked + .addon-content,
#addonsOverlay #addonsList .addon-card.is-checked .addon-content,
#addonsOverlay #addonsList .addon-card:has(input:checked) .addon-content{
background: linear-gradient(90deg, var(--aurora-2), var(--aurora-3)) !important;
border-radius:14px;
}
#addonsOverlay #addonsList .addon-card input:checked + .addon-content > span,
#addonsOverlay #addonsList .addon-card.is-checked .addon-content > span,
#addonsOverlay #addonsList .addon-card:has(input:checked) .addon-content > span{
color:#0b1117 !important; /* ניגודיות טובה על הגרדיאנט */
}
/* ===== Make labels always visible, regardless of count ===== */
#addonsOverlay #addonsList .addon-card{
overflow: visible; /* לא לחתוך את הטקסט */
}
#addonsOverlay #addonsList .addon-content{
min-height: auto; /* אל תכריח גובה שמוריד טקסט */
}
#addonsOverlay #addonsList .addon-content > span{
display: block !important;
margin-top: 6px;
line-height: 1.25;
font-weight: 700;
color: #0f172a !important; /* כהה על רקע לבן */
opacity: 1 !important;
visibility: visible !important;
white-space: normal;
}
/* הדגשת בחירה ברורה */
#addonsOverlay #addonsList .addon-card input:checked + .addon-content,
#addonsOverlay #addonsList .addon-card.is-checked .addon-content,
#addonsOverlay #addonsList .addon-card:has(input:checked) .addon-content{
background: linear-gradient(90deg, var(--aurora-1), var(--aurora-2)) !important;
border-radius: 14px;
color: #0b1117 !important;
}
#addonsOverlay #addonsList .addon-card:has(input:checked) .addon-content > span{
color: #0b1117 !important;
}
/* ===== Addons Overlay — Full-bleed image + label below ===== */
/* יחס תמונה (אפשר 1/1 או 4/3) */
#addonsOverlay{ --addon-ar: 1 / 1; }
/* מבנה הגריד נשאר 2 עמודות; אין שינוי כאן */
/* הכרטיס עצמו: בלי רקע פנימי שיגבור על התמונה */
#addonsOverlay #addonsList .addon-card{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible; /* שלא יחתוך טקסט */
}
/* התוכן – בלי מרווחים מיותרים, התמונה מעל והטקסט מתחת */
#addonsOverlay #addonsList .addon-content{
padding: 0 !important;
gap: 8px !important;
align-items: stretch !important;
}
/* התמונה ממלאת את כל המסגרת של הכרטיס */
#addonsOverlay #addonsList .addon-content > img{
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: var(--addon-ar) !important; /* 1:1 ברירת מחדל */
object-fit: cover !important;
border-radius: 16px !important;
border: 1px solid var(--line) !important;
background: #f4f7fc !important;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* שם התוספת מתחת לתמונה */
#addonsOverlay #addonsList .addon-content > span{
display: block !important;
margin: 6px 8px 2px !important;
text-align: center !important;
font-weight: 700 !important;
line-height: 1.25 !important;
color: #0f172a !important; /* כהה על רקע בהיר */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* מצב ריחוף קטן (טאבלט/דסקטופ) */
@media (hover:hover){
#addonsOverlay #addonsList .addon-card:hover .addon-content > img{
transform: scale(1.01);
box-shadow: 0 10px 24px rgba(15,23,42,.12);
}
}
/* ==== בחירה: מדגישים את הכרטיס ע"י טבעת על התמונה + שינוי צבע לשם ==== */
/* מבטלים רקע גרדיינט ישן שכיסה את הכל */
#addonsOverlay #addonsList .addon-card input:checked + .addon-content{
background: transparent !important;
}
/* טבעת/מסגרת בולטת על התמונה בעת בחירה */
#addonsOverlay #addonsList .addon-card input:checked + .addon-content > img,
#addonsOverlay #addonsList .addon-card.is-checked .addon-content > img,
#addonsOverlay #addonsList .addon-card:has(input:checked) .addon-content > img{
border-color: var(--aurora-2) !important;
box-shadow:
0 0 0 3px color-mix(in srgb, var(--aurora-2) 70%, #fff 30%),
0 10px 28px rgba(15,23,42,.16) !important;
transform: scale(1.01);
}
/* שם מודגש קלות בבחירה */
#addonsOverlay #addonsList .addon-card input:checked + .addon-content > span,
#addonsOverlay #addonsList .addon-card.is-checked .addon-content > span,
#addonsOverlay #addonsList .addon-card:has(input:checked) .addon-content > span{
color: #0b1117 !important;
}
/* אופציונלי: רוצה יחס 4:3 במקום ריבוע? בטל את השורה הקודמת והדבק: */
/* #addonsOverlay{ --addon-ar: 4 / 3; } */
/* סל חדש כולל תוספות */
/* Addons chips inside cart & order preview */
#cartList .addons-row,
#orderPreview .addons-row{
display:flex; gap:6px; flex-wrap:wrap; margin-top:4px;
}
#cartList .addon-chip,
#orderPreview .addon-chip{
display:inline-flex; align-items:center; gap:6px;
padding:4px 8px; border:1px solid var(--line);
border-radius:999px; background:#fff; color:var(--text);
font-size:12px; line-height:1;
}
#cartList .addon-chip img,
#orderPreview .addon-chip img{
width:16px; height:16px; object-fit:cover;
border-radius:4px; border:1px solid #e5eaf3;
}
#cartList .addon-chip.more,
#orderPreview .addon-chip.more{
background:#f2f6fb; font-weight:700;
}
/* בדיקה לתוספות בסל */
#cartList .addon-chip .label,
#orderPreview .addon-chip .label{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 16ch;
}
#cartList .addon-chip:focus-visible,
#orderPreview .addon-chip:focus-visible{
outline: 3px solid var(--aurora-2);
outline-offset: 2px;
border-radius: 999px;
}
/* 2 */
/* כרטיס תוספת במודאל: תמונה מלאה + כותרת מתחת */
#addonsList .addon-card{
display: block;
overflow: hidden;
border-radius: 16px;
background: linear-gradient(180deg,#ffffff,#f8fbff);
border: 1px solid var(--line);
}
#addonsList .addon-content{
display: grid;
grid-template-rows: 1fr auto;
padding: 0; /* בלי ריפוד כדי שהתמונה באמת תיגע בקצוות */
}
#addonsList .addon-content img{
width: 100%;
aspect-ratio: 1 / 1; /* ריבוע יציב */
object-fit: cover; /* ממלאת את המסגרת */
border: 0; /* אין מסגרת פנימית */
border-radius: 0;
}
#addonsList .addon-content > span{
display: block;
text-align: center;
font-weight: 700;
padding: 8px 10px;
border-top: 1px solid var(--line);
color: var(--text);
background: linear-gradient(180deg,#f6f9ff,#fff);
}
/* מצב בחירה – היילייט לתוספת שסימנו */
#addonsList .addon-card.is-checked .addon-content > span{
background: linear-gradient(90deg,var(--aurora-1),var(--aurora-2));
color: #0b1117;
}
/* 3 */
/* קופסת המודאל עצמה */
#addonsOverlay > div{
background: linear-gradient(180deg,#ffffff,#f8fbff);
color: var(--text);
border: 1px solid var(--line);
}
/* להקטנת חלון התוספות */
/* ==== Addons modal: smaller cards (only inside #addonsOverlay) ==== */
/* פרמטרים נוחים לשינוי מהיר */
#addonsOverlay{
--addon-cols: 3; /* כמה עמודות בטאבלט */
--addon-min: 120px; /* רוחב מינימלי לכל כרטיס */
--addon-gap: 8px; /* רווח בין כרטיסים */
--addon-label: 13px; /* גודל פונט לשם התוספת */
}
/* גוף הקופסה – שיהיה עמודה ויאפשר גלילה פנימית לרשימה */
#addonsOverlay > div{
display: flex;
flex-direction: column;
max-height: min(80vh, 640px);
}
/* הרשת של התוספות: יותר עמודות + רווחים קטנים יותר */
#addonsOverlay .addons-grid{
display: grid !important;
gap: var(--addon-gap);
grid-template-columns: repeat(var(--addon-cols), minmax(var(--addon-min), 1fr));
padding: 8px 6px;
flex: 1 1 auto;
overflow: auto; /* גלילה פנימית אם יש הרבה תוספות */
-webkit-overflow-scrolling: touch;
}
/* במסכים צרים – 2 עמודות; בפלאפון קטן – עמודה אחת */
@media (max-width: 540px){
#addonsOverlay{ --addon-cols: 2; --addon-min: 110px; }
}
@media (max-width: 380px){
#addonsOverlay{ --addon-cols: 1; --addon-min: 140px; }
}
/* כרטיס התוספת קטן ועדין */
#addonsOverlay .addon-card{
border-radius: 12px;
border: 1px solid var(--line);
background: linear-gradient(180deg,#ffffff,#f8fbff);
}
/* תמונה מלאה במסגרת, שם מתחת – בקטן */
#addonsOverlay .addon-content{
display: grid;
grid-template-rows: 1fr auto;
padding: 0; /* בלי מרווחים כדי שלא "יגדיל" את הכרטיס */
min-height: auto; /* מבטל כל מינימום גלובלי */
}
#addonsOverlay .addon-content img{
width: 100%;
aspect-ratio: 1 / 1; /* ריבוע יציב */
object-fit: cover;
border: 0;
border-radius: 0;
}
/* כיתוב קטן יותר וצפוף יותר */
#addonsOverlay .addon-content > span{
font-size: var(--addon-label);
font-weight: 700;
padding: 6px 8px;
text-align: center;
border-top: 1px solid var(--line);
color: var(--text);
background: linear-gradient(180deg,#f6f9ff,#fff);
}
/* היילייט כשמסמנים תוספת */
#addonsOverlay .addon-card.is-checked .addon-content > span{
background: linear-gradient(90deg,var(--aurora-1),var(--aurora-2));
color:#0b1117;
}
/* ביטול כללים גלובליים שמגדילים (אם הוגדרו קודם) */
#addonsOverlay .addon-content{ min-height: auto !important; }
#addonsOverlay .addons-grid{ grid-auto-rows: auto !important; }
/* check */
/* ==== Addons modal: make room for 4 columns ==== */
/* עוקף את ה-inline width שעל ה-div הפנימי של המודאל */
#addonsOverlay > div{
width: min(860px, 96vw) !important; /* היה 520px */
max-height: min(82vh, 720px);
}
/* מספר עמודות ומינימום רוחב לכרטיס */
#addonsOverlay{
--addon-cols: 4; /* 4 עמודות כברירת מחדל */
--addon-min: 140px; /* מינימום רוחב לכל כרטיס */
--addon-gap: 8px;
}
/* הרשת עצמה (אם כבר הגדרת—הכל טוב, זה רק וידוא) */
#addonsOverlay .addons-grid{
display: grid !important;
gap: var(--addon-gap);
grid-template-columns: repeat(var(--addon-cols), minmax(var(--addon-min), 1fr));
padding: 8px 6px;
flex: 1 1 auto;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/* התאמות למסכים צרים */
@media (max-width: 720px){
#addonsOverlay{ --addon-cols: 3; }
}
@media (max-width: 540px){
#addonsOverlay{ --addon-cols: 2; --addon-min: 110px; }
}
@media (max-width: 380px){
#addonsOverlay{ --addon-cols: 1; --addon-min: 140px; }
}
/* */
/* ==== Samsung 11" tablet: force 4 columns in addons modal ==== */
/* עוקף inline width של הקופסה הפנימית */
#addonsOverlay > div{
width: min(940px, 96vw) !important; /* מרווח ל-4 עמודות */
max-height: min(82vh, 720px);
}
/* ברירת מחדל ל-4 עמודות + מינימום קלף קטן */
#addonsOverlay{
--addon-cols: 4;
--addon-min: 140px; /* אם עדיין לא נכנס – נסה 130px */
--addon-gap: 8px;
}
/* מכריח את פריסת ה-grid של התוספות בתוך המודאל (עוקף כל כלל כללי) */
#addonsOverlay .addons-grid{
display: grid !important;
gap: var(--addon-gap) !important;
grid-template-columns: repeat(var(--addon-cols), minmax(var(--addon-min), 1fr)) !important;
padding: 8px 6px;
flex: 1 1 auto;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/* טווחים ל-11" (פוטרט/לנדסקייפ) – ודא 4 עמודות */
@media (min-width: 800px) and (max-width: 1280px){
#addonsOverlay{ --addon-cols: 4; }
}
/* במסכים צרים יותר נרד ל-3/2/1 עמודות */
@media (max-width: 720px){ #addonsOverlay{ --addon-cols: 3; } }
@media (max-width: 540px){ #addonsOverlay{ --addon-cols: 2; --addon-min: 110px; } }
@media (max-width: 380px){ #addonsOverlay{ --addon-cols: 1; --addon-min: 140px; } }
/* לוודא שהתמונה/כותרת לא “מנפחים” קלף */
#addonsOverlay .addon-content{ padding: 0 !important; min-height: auto !important; }
#addonsOverlay .addon-content img{
width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 0; border-radius: 0;
}
#addonsOverlay .addon-content > span{
font-size: 13px; font-weight: 700; padding: 6px 8px; text-align: center;
border-top: 1px solid var(--line); background: linear-gradient(180deg,#f6f9ff,#fff);
}
#addonsOverlay .addon-card.is-checked .addon-content > span{
background: linear-gradient(90deg,var(--aurora-1),var(--aurora-2));
color:#0b1117;
}
@keyframes flash {
0% { background: rgba(255,255,0,0.25); }
100% { background: transparent; }
}
#fxLayer { transition: background .25s; }
/* =========================================================
Dark Mode Layer — non-destructive overrides
מפעיל ערכת כהה כשיש html.dark
========================================================= */
html.dark{ color-scheme: dark; }
html.dark{
/* ערכי בסיס כהים */
--bg1:#0b0f14;
--bg2:#0d1117;
--text:#e6edf7;
--muted:#9aa4b2;
--line:#2b3440;
/* משטחי UI */
--panel-1:#0f141b;
--panel-2:#0b1117;
--thumb:#11161c;
}
/* רקע כללי + “אורורה” עדין יותר */
html.dark body{
color:var(--text);
background:
radial-gradient(1200px 800px at 70% -10%, rgba(124,154,255,.10) 0%, transparent 60%),
radial-gradient(900px 600px at 0% 110%, rgba(51,225,237,.10) 0%, transparent 60%),
linear-gradient(160deg, var(--bg1), var(--bg2));
}
html.dark body::before{
opacity:.16; filter: blur(60px) saturate(110%);
}
/* מעטפת/פאנלים/סרגלים */
html.dark .header,
html.dark .panel,
html.dark .products-scroll,
html.dark .modern-backbar,
html.dark .settings-popover{
background: linear-gradient(180deg, var(--panel-1), var(--panel-2)) !important;
border-color: var(--line) !important;
color: var(--text) !important;
box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
/* כרטיסים (קטגוריות/מוצרים/תוספות) */
html.dark .cat-card,
html.dark .product-card,
html.dark #addonsOverlay #addonsList .addon-card,
html.dark #addonsList .addon-card{
background: linear-gradient(180deg, var(--panel-1), var(--panel-2)) !important;
border-color: var(--line) !important;
box-shadow: 0 8px 24px rgba(0,0,0,.25) !important;
}
html.dark .cat-title{
background: color-mix(in srgb, var(--panel-2) 90%, black 10%) !important;
border-top-color: var(--line) !important;
color: var(--text) !important;
}
/* תמונות/תמונות־אצבע */
html.dark .product-thumb,
html.dark .cart-thumb,
html.dark #orderPreview .order-preview-content img,
html.dark #addonsOverlay #addonsList .addon-content img,
html.dark #addonsList .addon-content img{
background: var(--thumb) !important;
border-color: var(--line) !important;
}
/* שדות וקונטרולים */
html.dark input,
html.dark select,
html.dark textarea,
html.dark button:not(.btn.primary){
background: var(--panel-1) !important;
color: var(--text) !important;
border-color: var(--line) !important;
box-shadow: none !important;
}
/* כפתורים כלליים */
html.dark .btn.secondary,
html.dark .cart-btn,
html.dark .back-btn,
html.dark #logoutBtnTop,
html.dark #logoutBtn,
html.dark #orderPreview .btn.danger{
background: var(--panel-1) !important;
color: var(--text) !important;
border-color: var(--line) !important;
}
/* צ'יפים/תגיות מחיר */
html.dark .price-chip{
background: linear-gradient(90deg, #0f141b, #11161c) !important;
border-color: var(--line) !important;
color: var(--text) !important;
}
html.dark .rowmuted{ color: var(--muted) !important; }
/* טוסט/אוברליי סל/מודאלים/כניסה */
html.dark .toast{
/* משאיר את הגרדיינט הממותג, רק טקסט כהה */
color:#0b1117 !important;
}
html.dark .order-preview{
background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.72)) !important;
}
html.dark .order-preview-content,
html.dark #orderPreview .order-preview-content,
html.dark #addonsOverlay > div{
background: var(--panel-1) !important;
color: var(--text) !important;
border-color: var(--line) !important;
}
/* לוגין */
html.dark .login-backdrop{ background: rgba(0,0,0,.6) !important; }
html.dark .login-card{
background:#171b21 !important;
color:var(--text) !important;
border-color:var(--line) !important;
}
/* קוסמטיקה קטנה */
html.dark .cat-card:hover,
html.dark .product-card:hover{
box-shadow: 0 18px 40px rgba(0,0,0,.32) !important;
}
/* =========================================================
Dark Mode Layer — non-destructive overrides
מפעיל ערכת כהה כשיש html.dark
========================================================= */
html.dark{ color-scheme: dark; }
html.dark{
/* ערכי בסיס כהים */
--bg1:#0b0f14;
--bg2:#0d1117;
--text:#e6edf7;
--muted:#9aa4b2;
--line:#2b3440;
/* משטחי UI */
--panel-1:#0f141b;
--panel-2:#0b1117;
--thumb:#11161c;
}
/* רקע כללי + “אורורה” עדין יותר */
html.dark body{
color:var(--text);
background:
radial-gradient(1200px 800px at 70% -10%, rgba(124,154,255,.10) 0%, transparent 60%),
radial-gradient(900px 600px at 0% 110%, rgba(51,225,237,.10) 0%, transparent 60%),
linear-gradient(160deg, var(--bg1), var(--bg2));
}
html.dark body::before{
opacity:.16; filter: blur(60px) saturate(110%);
}
/* מעטפת/פאנלים/סרגלים */
html.dark .header,
html.dark .panel,
html.dark .products-scroll,
html.dark .modern-backbar,
html.dark .settings-popover{
background: linear-gradient(180deg, var(--panel-1), var(--panel-2)) !important;
border-color: var(--line) !important;
color: var(--text) !important;
box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
/* כרטיסים (קטגוריות/מוצרים/תוספות) */
html.dark .cat-card,
html.dark .product-card,
html.dark #addonsOverlay #addonsList .addon-card,
html.dark #addonsList .addon-card{
background: linear-gradient(180deg, var(--panel-1), var(--panel-2)) !important;
border-color: var(--line) !important;
box-shadow: 0 8px 24px rgba(0,0,0,.25) !important;
}
html.dark .cat-title{
background: color-mix(in srgb, var(--panel-2) 90%, black 10%) !important;
border-top-color: var(--line) !important;
color: var(--text) !important;
}
/* תמונות/תמונות־אצבע */
html.dark .product-thumb,
html.dark .cart-thumb,
html.dark #orderPreview .order-preview-content img,
html.dark #addonsOverlay #addonsList .addon-content img,
html.dark #addonsList .addon-content img{
background: var(--thumb) !important;
border-color: var(--line) !important;
}
/* שדות וקונטרולים */
html.dark input,
html.dark select,
html.dark textarea,
html.dark button:not(.btn.primary){
background: var(--panel-1) !important;
color: var(--text) !important;
border-color: var(--line) !important;
box-shadow: none !important;
}
/* כפתורים כלליים */
html.dark .btn.secondary,
html.dark .cart-btn,
html.dark .back-btn,
html.dark #logoutBtnTop,
html.dark #logoutBtn,
html.dark #orderPreview .btn.danger{
background: var(--panel-1) !important;
color: var(--text) !important;
border-color: var(--line) !important;
}
/* צ'יפים/תגיות מחיר */
html.dark .price-chip{
background: linear-gradient(90deg, #0f141b, #11161c) !important;
border-color: var(--line) !important;
color: var(--text) !important;
}
html.dark .rowmuted{ color: var(--muted) !important; }
/* טוסט/אוברליי סל/מודאלים/כניסה */
html.dark .toast{
/* משאיר את הגרדיינט הממותג, רק טקסט כהה */
color:#0b1117 !important;
}
html.dark .order-preview{
background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.72)) !important;
}
html.dark .order-preview-content,
html.dark #orderPreview .order-preview-content,
html.dark #addonsOverlay > div{
background: var(--panel-1) !important;
color: var(--text) !important;
border-color: var(--line) !important;
}
/* לוגין */
html.dark .login-backdrop{ background: rgba(0,0,0,.6) !important; }
html.dark .login-card{
background:#171b21 !important;
color:var(--text) !important;
border-color:var(--line) !important;
}
/* קוסמטיקה קטנה */
html.dark .cat-card:hover,
html.dark .product-card:hover{
box-shadow: 0 18px 40px rgba(0,0,0,.32) !important;
}
/* ==== DARK PATCH (ضعه في آخر الملف) ==== */
/* الهيدر: كبسولة الإيميل + زر السلة + حالة الشبكة */
html.dark .user-pill,
html.dark .user-email{
background: var(--panel-1) !important;
color: var(--text) !important;
border-color: var(--line) !important;
}
html.dark .cart-btn{
background: var(--panel-1) !important;
color: var(--text) !important;
border-color: var(--line) !important;
}
html.dark .net{ color: var(--muted) !important; }
html.dark .dot{
background:#22c55e !important;
box-shadow:0 0 0 2px rgba(34,197,94,.25) !important;
border-color:#14532d !important;
}
/* سلة/المعاينة: أعد النص ليكون فاتحاً في الوضع الداكن */
html.dark #orderPreview .order-preview-content{
--text:#e6edf7 !important;
color: var(--text) !important;
background: var(--panel-1) !important;
border-color: var(--line) !important;
}
html.dark #orderPreview .order-preview-content .rowmuted{
color: var(--muted) !important;
}
/* قائمة السلة (يمين/أسفل) */
html.dark #cartList,
html.dark #cartList *:not(.rowmuted){
color: var(--text) !important;
}
html.dark #cartList .rowmuted{ color: var(--muted) !important; }
html.dark .total{ color: var(--text) !important; }
/* أزرار الكمية +/− وإدخال العدد */
html.dark .qty-group{
background: var(--panel-1) !important;
border-color: var(--line) !important;
}
html.dark .qty-btn{
background: var(--panel-2) !important;
color: var(--text) !important;
border: none !important;
}
html.dark .qty-input{
background: var(--panel-1) !important;
color: var(--text) !important;
border: none !important;
}
/* زر الحذف (danger) ليظهر بوضوح */
html.dark .btn.danger{
background:#3b1a1a !important;
border-color:#5b2525 !important;
color:#fca5a5 !important;
}
/* الحقول والـplaceholder */
html.dark input,
html.dark select,
html.dark textarea{
background: var(--panel-1) !important;
color: var(--text) !important;
border-color: var(--line) !important;
}
html.dark ::placeholder{ color:#94a3b8 !important; }
/* العناوين داخل المودالات/السلة */
html.dark #addonsOverlay h2,
html.dark #orderPreview h2,
html.dark .cart-title{
color: var(--text) !important;
}
/* ==== DARK PATCH — Add-ons labels/readability ==== */
/* כל תגיות השמות של התוספות — בהיר וקריא בדארק */
html.dark #addonsOverlay :is(#addonsList, .addons-grid) .addon-card .addon-content > span,
html.dark .order-preview-content #addonsList .addon-card .addon-content > span,
html.dark #addonsList .addon-card .addon-content > span{
color: var(--text) !important; /* #e6edf7 */
text-shadow: 0 1px 1px rgba(0,0,0,.35); /* עוזר על תמונות כהות */
}
/* גם כשהכרטיס מסומן (עם .is-checked / input:checked / :has) — תשמור על בהיר */
html.dark :is(#addonsOverlay, .order-preview-content) #addonsList
.addon-card:is(.is-checked, :has(input:checked)) .addon-content > span{
color: var(--text) !important;
}
/* רקע/מסגרת כרטיסים כהים (אם הכרטיסים לא “שקופים”) */
html.dark #addonsOverlay #addonsList .addon-card,
html.dark #addonsList .addon-card{
background: linear-gradient(180deg, var(--panel-1), var(--panel-2)) !important;
border-color: var(--line) !important;
}
/* תמונות בתוך כרטיסי תוספות — מסגרת עדינה בדארק */
html.dark #addonsOverlay #addonsList .addon-content img,
html.dark #addonsList .addon-content img{
border-color: var(--line) !important;
}
/* ביטול כלל ישן שמכריח טקסט כהה בתוך הסל/מודאל (גורם להיעלמות בטקסט בדארק) */
html.dark #orderPreview .order-preview-content{
--text:#e6edf7 !important;
color: var(--text) !important;
}
/* ==== DARK CART/PREVIEW PATCH — paste at END ==== */
/* A) Add-ons chips inside cart & order preview */
html.dark #orderPreview .addon-chip,
html.dark #cartList .addon-chip{
background: var(--panel-2) !important;
color: var(--text) !important;
border-color: var(--line) !important;
}
html.dark #orderPreview .addon-chip .label,
html.dark #cartList .addon-chip .label{
color: var(--text) !important;
}
html.dark #orderPreview .addon-chip.more,
html.dark #cartList .addon-chip.more{
background: var(--panel-1) !important;
color: var(--text) !important;
border-color: var(--line) !important;
}
html.dark #orderPreview .addon-chip img,
html.dark #cartList .addon-chip img{
border-color: var(--line) !important;
}
/* B) Quantity group inside order preview (kills the white tray) */
html.dark #orderPreview .qty-group,
html.dark #orderPreview .qty-group.sm{
background: var(--panel-1) !important;
border-color: var(--line) !important;
background-image: none !important;
box-shadow: none !important;
}
html.dark #orderPreview .qty-btn{
background: var(--panel-2) !important;
color: var(--text) !important;
border: none !important;
}
html.dark #orderPreview .qty-input{
background: var(--panel-1) !important;
color: var(--text) !important;
border: none !important;
}
/* C) Prices in cart & preview */
html.dark #cartList .price,
html.dark #cartList .item-price,
html.dark #cartList .sum,
html.dark #cartList .amount,
html.dark #orderPreview .price,
html.dark #orderPreview .item-price,
html.dark #orderPreview .sum,
html.dark #orderPreview .amount{
color: var(--text) !important;
}
html.dark #orderPreview .price-chip,
html.dark #cartList .price-chip{
background: linear-gradient(90deg, #0f141b, #11161c) !important;
color: var(--text) !important;
border-color: var(--line) !important;
}
/* D) (אופציונלי) ודא שגם הכפתורים העגולים לא ייעלמו */
html.dark #orderPreview .btn.danger{ color:#fca5a5 !important; }
/* ===================== DARK PATCH — paste at END ===================== */
/* 1) Table number pills: מצב רגיל + מצב בחירה בדארק */
html.dark .pill{
background: var(--panel-2) !important;
color: var(--text) !important;
border-color: var(--line) !important;
}
html.dark .pill.active,
html.dark .pill:has(input:checked),
html.dark .pill.is-checked,
html.dark .pill[aria-pressed="true"]{
background: linear-gradient(90deg, var(--aurora-1), var(--aurora-2)) !important;
color: #0b1117 !important; /* טקסט כהה על גרדיאנט בהיר */
border-color: transparent !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--aurora-2) 32%, transparent) inset;
}
html.dark .pill .num{ color: inherit !important; }
html.dark .pill input{ position:absolute; inset:0; opacity:0; pointer-events:none; }
/* 2) Qty group — לבטל “מגש” לבן + ליישר צבעים בסל וב־Preview */
html.dark .qty-group,
html.dark #cartList .qty-group,
html.dark #orderPreview .qty-group,
html.dark #orderPreview .qty-group.sm{
background: var(--panel-1) !important;
border-color: var(--line) !important;
background-image: none !important;
box-shadow: none !important;
}
html.dark .qty-btn,
html.dark #orderPreview .qty-btn{
background: var(--panel-2) !important;
color: var(--text) !important;
border: none !important;
}
html.dark .qty-input,
html.dark #orderPreview .qty-input{
background: var(--panel-1) !important;
color: var(--text) !important;
border: none !important;
}
/* 3) מחיר ליד הכמות — ודאות ניגודיות */
html.dark #cartList .item-price,
html.dark #cartList .price,
html.dark #cartList [class*="price"],
html.dark #cartList .amount,
html.dark #cartList .sum,
html.dark #orderPreview .item-price,
html.dark #orderPreview .price,
html.dark #orderPreview [class*="price"],
html.dark #orderPreview .amount,
html.dark #orderPreview .sum{
color: var(--text) !important;
}
/* מחיר ב-chip אם משתמשים במחלקה הזאת */
html.dark #cartList .price-chip,
html.dark #orderPreview .price-chip{
background: linear-gradient(90deg, #0f141b, #11161c) !important;
border-color: var(--line) !important;
color: var(--text) !important;
}
/* Add-ons chips בסל/ב־Preview — לא לבן בדארק */
html.dark #orderPreview .addon-chip,
html.dark #cartList .addon-chip{
background: var(--panel-2) !important;
color: var(--text) !important;
border-color: var(--line) !important;
}
html.dark #orderPreview .addon-chip .label,
html.dark #cartList .addon-chip .label{ color: var(--text) !important; }
html.dark #orderPreview .addon-chip.more,
html.dark #cartList .addon-chip.more{
background: var(--panel-1) !important;
color: var(--text) !important;
border-color: var(--line) !important;
}
html.dark #orderPreview .addon-chip img,
html.dark #cartList .addon-chip img{ border-color: var(--line) !important; }
/* תוויות שמות התוספות בכל וריאציה בדארק – תמיד בהירות */
html.dark #addonsOverlay :is(#addonsList, .addons-grid) .addon-card .addon-content > span,
html.dark .order-preview-content #addonsList .addon-card .addon-content > span,
html.dark #addonsList .addon-card .addon-content > span{
color: var(--text) !important;
text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
/* שים לב: יש לך כלל שמכריח Light בתוך ה־Preview.
הפוך אותו לגרסת לייט כדי שלא יתנגש: */
html:not(.dark) #orderPreview .order-preview-content{
--text: #0f172a; color: var(--text);
}
/* */
/* Ephemeral ready modal */
.ready-modal {
position: fixed; inset: 0;
display: grid; place-items: center;
background: rgba(0,0,0,.45);
z-index: 99999;
}
.ready-modal.hidden { display: none; }
.ready-modal-box {
width: min(480px, 92vw);
border-radius: 14px;
padding: 16px 18px;
background: var(--card-bg, #fff);
color: var(--card-fg, #111);
box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
html.dark .ready-modal-box {
--card-bg:#1e1f22;
--card-fg:#fff;
}
.ready-modal-box h3 { margin: 0 0 8px; font-size: 20px; }
.ready-modal-body { font-size: 16px; line-height: 1.6; margin-bottom: 12px; }
.ready-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* */
/* === Header Centered Refresh — put at END of CSS === */
:root{ --tap:48px; --tap-sm:42px; }
/* رأس الصفحة: شعار وعنوان في المنتصف + شريط أيقونات مرتب */
.header{
position: sticky; top:0; z-index:60;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:10px; text-align:center;
padding:12px clamp(12px,3vw,20px);
background:linear-gradient(180deg,#ffffff,#f8fbff);
border-bottom:1px solid var(--line);
box-shadow:0 2px 12px rgba(15,23,42,.06);
}
.brand{ display:flex; align-items:center; justify-content:center; gap:10px }
.site-title{ margin:0; font-weight:900; font-size:clamp(18px,2.2vw,24px); }
/* شريط الأيقونات: يتمركز ويتلف تلقائيًا على سطر/سطرين حسب العرض */
.header-controls{
display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
gap:8px 10px; width:100%; max-width:min(980px, 96vw);
}
/* أحجام متساوية ولمسات حديثة للأزرار/الشرائح */
.header-controls :is(.cart-btn,.back-btn,.btn,#settingsBtn,.quick-toggle,.chip){
min-height: var(--tap-sm);
display:inline-flex; align-items:center; justify-content:center;
padding:8px 12px; border-radius:12px;
}
.quick-toggle{ width:auto; min-width:40px; }
/* كبسولة البريد + حالة الشبكة تظهر أنيقة ومتماسكة */
.user-pill{ font-weight:700; padding:6px 12px; }
.net{ font-size:14px; gap:6px }
.dot{ width:12px; height:12px; border-radius:50% }
/* شارة السلة بحجم ثابت وجميل */
.badge{ min-width:24px; height:24px; font-size:12px; }
/* استجابة إضافية: فراغات أفضل على الشاشات الكبيرة */
@media (min-width:1024px){
.header{ padding-block:14px }
.header-controls{ gap:10px 12px }
}
/* وضع داكن — تأكد أن كل شيء يبقى مقروء ومتمركز */
html.dark .header{ background:linear-gradient(180deg, var(--panel-1), var(--panel-2))!important }
html.dark .site-title{ color:var(--text)!important }
html.dark .header-controls :is(.cart-btn,.back-btn,.btn,#settingsBtn,.quick-toggle,.chip){
background: var(--panel-1)!important; color: var(--text)!important; border-color: var(--line)!important;
}
/* ===== Mobile polish for header controls ===== */
@media (max-width: 520px){
.header-controls{ gap:6px 8px }
.header-controls :is(.btn,.cart-btn,.quick-toggle,#settingsBtn,.chip){
padding:6px 10px; min-height:38px; font-size:14px;
}
.user-pill{ padding:6px 10px; font-size:14px; }
.site-title{ font-size:18px }
}
/* Popover tidy (يحترم الداكن تلقائيًا من القواعد الموجودة) */
.settings-popover{ max-width: 280px; }
.settings-row button{ min-height:36px; }
/* */
/* ===== Dark Fix Pack — Cart Preview + Qty + Table Pills (PUT LAST) ===== */
/* 1) Preview بالسلة: رجّع الألوان للنص والخلفية والحدود */
html.dark #orderPreview,
html.dark #orderPreview .order-preview-content{
background: var(--panel-1) !important;
color: var(--text) !important;
border-color: var(--line) !important;
}
html.dark #orderPreview h2,
html.dark #orderPreview .cart-item,
html.dark #orderPreview .cart-item *:not(.rowmuted){
color: var(--text) !important;
}
html.dark #orderPreview .rowmuted{ color: var(--muted) !important; }
/* 2) إزالة “الصينية”/التدرج الأبيض حول أزرار الكمية */
html.dark :is(#orderPreview, .product-card, #cartList) .qty-group{
background: var(--panel-1) !important;
border-color: var(--line) !important;
background-image: none !important;
box-shadow: none !important;
}
html.dark :is(#orderPreview, .product-card, #cartList) .qty-btn{
background: var(--panel-2) !important;
color: var(--text) !important;
border: none !important;
}
html.dark :is(#orderPreview, .product-card, #cartList) .qty-input{
background: var(--panel-1) !important;
color: var(--text) !important;
border: none !important;
}
/* 3) أسعار داخل السلة/المعاينة */
html.dark #cartList :is(.price,.item-price,.sum,.amount),
html.dark #orderPreview :is(.price,.item-price,.sum,.amount){
color: var(--text) !important;
}
html.dark #orderPreview .price-chip,
html.dark #cartList .price-chip{
background: linear-gradient(90deg,#0f141b,#11161c) !important;
border-color: var(--line) !important;
color: var(--text) !important;
}
/* 4) صور مصغرة وإطارات */
html.dark #orderPreview .order-preview-content img,
html.dark .cart-thumb{ border-color: var(--line) !important; background: var(--thumb) !important; }
/* 5) زر إغلاق/خطر واضح في دارك */
html.dark #orderPreview .btn.danger{
background: #3b1a1a !important; border-color:#5b2525 !important; color:#fca5a5 !important;
}
/* 6) حبوب أرقام الطاولات — حالة عادية + حالة تحديد */
html.dark .pills .pill{
background: var(--panel-2) !important;
color: var(--text) !important;
border: 1px solid var(--line) !important;
}
html.dark .pills .pill:is(.active,[aria-pressed="true"],.is-checked){
background: linear-gradient(90deg, var(--aurora-1), var(--aurora-2)) !important;
color: #0b1117 !important;
border-color: transparent !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--aurora-2) 35%, transparent) inset !important;
}
/* 7) طبقة التعتيم خلف المعاينة (لتمنع الخلفية الفاتحة) */
html.dark .order-preview{
background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.72)) !important;
}
/* ===== Dark Cart Fix — V2 (price visibility + white slab) ===== */
/* 1) ألغِ أي طبقة/خلفية فاتحة على عناصر صف السلة داخل الـPreview */
html.dark #orderPreview .cart-item,
html.dark #orderPreview .cart-item *{
background: transparent !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
}
html.dark #orderPreview .cart-item::before,
html.dark #orderPreview .cart-item::after{
content: none !important;
background: transparent !important;
box-shadow: none !important;
}
/* أبقِ أزرار الكمية والزر الخطر بتصميمها الداكن (لا نلمسهم بالخلفية الشفافة أعلاه) */
html.dark #orderPreview .qty-group{ background: var(--panel-1) !important; border-color: var(--line) !important; }
html.dark #orderPreview .qty-btn{ background: var(--panel-2) !important; color: var(--text) !important; border: none !important; }
html.dark #orderPreview .qty-input{ background: var(--panel-1) !important; color: var(--text) !important; border: none !important; }
html.dark #orderPreview .btn.danger{ background:#3b1a1a !important; border-color:#5b2525 !important; color:#fca5a5 !important; }
/* 2) السعر/المبالغ — لون واضح + فوق أي طبقة محتملة */
html.dark #orderPreview .cart-item :is(.price,.item-price,.amount,.sum,[class*="price"]){
color: var(--text) !important;
position: relative; z-index: 2;
mix-blend-mode: normal !important; /* يلغي أي مزج يبهت النص */
-webkit-text-fill-color: var(--text) !important; /* يحسم سفاري */
}
/* في قائمة السلة الجانبية أيضاً (لو كانت موجودة) */
html.dark #cartList :is(.price,.item-price,.amount,.sum,[class*="price"]){
color: var(--text) !important;
position: relative; z-index: 2;
-webkit-text-fill-color: var(--text) !important;
}
html.dark #cartList .cart-item,
html.dark #cartList .cart-item *{
background: transparent !important;
}
html.dark #cartList .qty-group{ background: var(--panel-1) !important; border-color: var(--line) !important; }
html.dark #cartList .qty-btn{ background: var(--panel-2) !important; color: var(--text) !important; }
html.dark #cartList .qty-input{ background: var(--panel-1) !important; color: var(--text) !important; }
/* 3) لو في “شريحة” فاتحة خلف السعر قادمة من chip/badge قديم */
html.dark #orderPreview .price-chip,
html.dark #cartList .price-chip{
background: linear-gradient(90deg,#0f141b,#11161c) !important;
color: var(--text) !important;
border-color: var(--line) !important;
box-shadow: none !important;
}
/* 4) صور مصغرة و حدود موحدة */
html.dark #orderPreview .order-preview-content img,
html.dark #cartList .cart-thumb{
background: var(--thumb) !important;
border-color: var(--line) !important;
}
/* 5) طبقة التعتيم خلف المعاينة */
html.dark .order-preview{
background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.72)) !important;
}
/* ===== Order Preview — fix white slab + show price in dark (PUT LAST) ===== */
/* 1) قصِر الـsticky toolbar على الشريط العلوي/السفلي فقط (الابن المباشر) */
#orderPreview .order-preview-content > .preview-actions{
position: sticky;
bottom: 0;
z-index: 2;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(248,251,255,.92) 38%, #f8fbff 100%);
padding-top: 10px;
margin-top: 8px;
border-top: 1px solid var(--line);
}
/* النسخة الداكنة للtoolbar فقط */
html.dark #orderPreview .order-preview-content > .preview-actions{
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(15,23,42,.85) 38%, var(--panel-1) 100%) !important;
border-top-color: var(--line) !important;
}
/* 2) أعِد ضبط .preview-actions داخل عناصر السلة (لا sticky ولا خلفية) */
#orderPreview .order-preview-content .item .preview-actions{
position: static !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
display: inline-flex; align-items: center; gap: 8px;
}
/* 3) إظهار السعر (class=line-total) بوضوح، خصوصاً في الوضع الداكن */
#orderPreview .line-total{
display:inline-flex; align-items:center;
padding:6px 10px; border-radius:999px;
font-weight:800;
background: linear-gradient(90deg,#f3f7ff,#eef4fb);
border:1px solid var(--line);
}
html.dark #orderPreview .line-total{
color: var(--text) !important;
-webkit-text-fill-color: var(--text) !important; /* سفاري */
mix-blend-mode: normal !important;
position: relative; z-index: 2;
background: linear-gradient(90deg,#0f141b,#11161c) !important;
border-color: var(--line) !important;
}
/* 4) تأكيد تظبيط مجموعة الكمية في الداكن (لوح أبيض كان ظاهر) */
html.dark #orderPreview .qty-group{
background: var(--panel-1) !important;
border-color: var(--line) !important;
background-image: none !important;
box-shadow: none !important;
}
html.dark #orderPreview .qty-btn{ background: var(--panel-2) !important; color: var(--text) !important; border: none !important; }
html.dark #orderPreview .qty-input{ background: var(--panel-1) !important; color: var(--text) !important; border: none !important; }
/* ==== Addons modal — DARK fix + compact grid (PUT LAST) ==== */
/* 0) صندوق المودال في الداكن */
html.dark #addonsOverlay > div{
background: linear-gradient(180deg, var(--panel-1), var(--panel-2)) !important;
color: var(--text) !important;
border-color: var(--line) !important;
}
/* 1) شبكة أصغر + أعمدة أكثر (Tablet/Mobile friendly) */
#addonsOverlay .addons-grid{
display:grid !important;
gap:10px !important;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; /* غيّر 140 ↔ 120 لتكبير/تصغير */
align-items: stretch;
}
@media (max-width:720px){ #addonsOverlay .addons-grid{ grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width:540px){ #addonsOverlay .addons-grid{ grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width:380px){ #addonsOverlay .addons-grid{ grid-template-columns: 1fr !important; } }
/* 2) بطاقة الإضافة: بدون خلفيات أو ظلال تفرض أبيض */
#addonsOverlay #addonsList .addon-card{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: none;
}
#addonsOverlay #addonsList .addon-content{
display:grid !important;
grid-template-rows: 1fr auto;
padding:0 !important;
}
/* 3) الصورة — أصغر، 1:1، إطار داكن نظيف */
#addonsOverlay #addonsList .addon-content > img{
width:100% !important;
aspect-ratio:1/1 !important;
object-fit:cover !important;
border-radius:16px !important;
border:1px solid var(--line) !important;
background: var(--thumb) !important;
}
/* 4) شريط الاسم أسفل الصورة — ألغِ الشريط الأبيض واجعل النص واضح */
#addonsOverlay #addonsList .addon-content > span{
margin-top:6px !important;
padding:6px 8px !important;
text-align:center !important;
font-weight:700 !important;
line-height:1.25 !important;
font-size:14px !important;
background: transparent !important; /* ← يقتل الخلفية البيضاء */
border-top: 0 !important;
color: var(--text) !important; /* واضح في الداكن */
-webkit-text-fill-color: var(--text) !important; /* سفاري */
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
/* 5) تمييز العنصر المختار — حلقة حول الصورة + نص أبيض */
#addonsOverlay #addonsList .addon-card.is-checked .addon-content > img,
#addonsOverlay #addonsList .addon-card:has(input:checked) .addon-content > img{
border-color: var(--aurora-2) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--aurora-2) 65%, transparent) !important;
}
html.dark #addonsOverlay #addonsList .addon-card.is-checked .addon-content > span,
html.dark #addonsOverlay #addonsList .addon-card:has(input:checked) .addon-content > span{
color:#ffffff !important;
}
html:not(.dark) #addonsOverlay #addonsList .addon-card.is-checked .addon-content > img,
html:not(.dark) #addonsOverlay #addonsList .addon-card:has(input:checked) .addon-content > img{
border-color: var(--aurora-1) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--aurora-1) 55%, transparent) !important;
}
/* 6) إمكانية وصول: حلقة تركيز عند التنقل بالكيبورد */
#addonsOverlay #addonsList .addon-card:focus-visible .addon-content > img{
outline:3px solid var(--aurora-2) !important;
outline-offset:3px !important;
}
/* ===== Cart CTA Boost — bigger & bolder (PUT LAST) ===== */
/* صف الأزرار */
#cartPanel .actions{
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
margin-top:12px;
}
/* تكبير الزرين */
#cartPanel .actions .btn{
min-height:56px;
padding:12px 18px;
font-size:18px;
border-radius:16px;
font-weight:900;
letter-spacing:.2px;
box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
/* إرسال الطلبية — أبرز */
#sendBtn{
flex:1 1 auto;
background: linear-gradient(90deg,var(--aurora-2),var(--aurora-3)) !important;
color:#0b1117 !important;
border:none !important;
box-shadow: 0 10px 28px rgba(51,225,237,.28), 0 2px 8px rgba(0,0,0,.12);
transform: translateY(0);
transition: transform .08s ease, filter .15s ease;
}
#sendBtn:hover{ filter:saturate(1.06) brightness(1.02); transform: translateY(-1px); }
#sendBtn:active{ transform: translateY(0); }
/* حذف الكل — مع أيقونة 🗑️ */
#clearCart{
display:inline-flex; align-items:center; gap:10px;
background: linear-gradient(180deg,#fff,#f9f2f2) !important;
color:#b42323 !important;
border:2px solid #ffd1d1 !important;
font-weight:900;
}
#clearCart::before{
content:"🗑️";
font-size:20px; line-height:1;
display:inline-block;
}
/* وضع داكن */
html.dark #clearCart{
background:#3b1a1a !important;
color:#fca5a5 !important;
border-color:#5b2525 !important;
}
html.dark #sendBtn{
/* يظل بارزاً أيضاً في الداكن */
box-shadow: 0 10px 28px rgba(103,232,166,.22), 0 2px 8px rgba(0,0,0,.35);
}
/* موبايل: اجعل زر الإرسال بعرض كامل والزر الآخر تحته إن لزم */
@media (max-width:540px){
#cartPanel .actions{ gap:10px }
#sendBtn{ flex: 1 0 100%; }
#clearCart{ flex: 1 0 auto; justify-content:center; }
}
/* ===== Send button icon (RTL-friendly) ===== */
#sendBtn{
position:relative;
display:inline-flex; align-items:center; justify-content:center;
gap:10px; /* fallback لو المتصفح تجاهل ::before */
}
/* أيقونة قبل النص (تظهر يمين النص في RTL) */
#sendBtn::before{
content: "📤"; /* بدّل إلى "✅" إن أردت */
font-size: 20px; line-height:1;
display:inline-block;
/* مسافة بين الأيقونة والنص مع احترام RTL/LTR */
margin-inline-start: 0;
margin-inline-end: 10px;
}
/* لمسة حركة خفيفة */
#sendBtn:hover::before{ transform: translateY(-1px); }
#sendBtn:active::before{ transform: translateY(0); }
/* موبايل: أيقونة أصغر قليلًا */
@media (max-width:540px){
#sendBtn{ gap:8px }
#sendBtn::before{ font-size:18px; margin-inline-end:8px; }
}
/* =========================================================
Aurora Café — Mobile Overrides ONLY
✅ Don't touch tablet/desktop (min-width: 834px remains as-is)
✅ Target phones & small devices
✅ Smaller add-ons images
Paste AT THE END of your current CSS
========================================================= */
/* ----- Foundation for phones (≤ 540px) ----- */
@media (max-width: 540px){
:root{
--tap:44px; --tap-sm:38px; /* slightly tighter touch targets */
--radius:14px;
--gap-1:8px; --gap-2:10px; --gap-3:14px;
}
/* App shell & header */
.header{
gap:8px; padding:10px 12px;
}
.logo{ width:40px; height:40px; border-radius:10px }
.brand h1,.site-title{ font-size:18px }
.header-controls{ gap:6px 8px }
.user-pill,.cart-btn,.back-btn,.btn,#settingsBtn,.quick-toggle{ min-height:38px; padding:6px 10px; font-size:14px }
/* Layout → single column, tighter paddings */
.container{ padding-inline: 10px }
.layout{ display:block; margin:0; }
.panel{ padding:12px; border-radius:14px }
/* Categories grid: more, smaller cards */
.cat-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:10px }
.cat-card{ border-radius:14px }
.cat-title{ height:46px; min-height:46px; font-size:14px }
.cat-visual{ aspect-ratio: 1 / 1 }
/* Products grid: 2 cols on phones, drop to 1 on very small */
.products-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px }
@media (max-width: 380px){ .products-grid{ grid-template-columns: 1fr } }
.product-card{ padding:10px; border-radius:14px }
.product-thumb{ aspect-ratio: 4 / 3; max-height: 140px; padding:6px }
.product-name{ font-size:16px; max-width: 70vw }
.price-chip{ font-size:13px; padding:6px 8px }
/* Search shrinks a bit */
#search{ min-width: 130px; font-size: 13px }
/* Modern backbar in fullscreen products */
.fullscreen .modern-backbar{ padding:8px 10px }
#productsView.fullscreen .product-thumb{ max-height: 130px }
/* Cart panel actions — mobile-first */
#cartPanel .actions{ gap:10px }
#sendBtn{ flex: 1 0 100%; }
#clearCart{ flex: 1 0 auto; justify-content:center }
/* Table → cards (you already have) — small tune */
#productsTable tr{ padding:10px }
}
/* ----- Add-ons: smaller images everywhere by default on phones ----- */
@media (max-width: 540px){
/* Generic add-on card (outside modal) */
.addon-content{ gap:8px; padding:10px }
.addon-content img{ width:58px; height:58px; border-radius:12px }
.addon-content span{ font-size:14px }
}
/* ----- Add-ons inside order preview modal (#orderPreview) ----- */
@media (max-width: 540px){
.order-preview-content{ max-width: 92vw; border-radius:14px }
.order-preview-content #addonsList{ grid-template-columns: 1fr; gap:10px; padding:8px 4px }
.order-preview-content #addonsList .addon-content img{ width:60px; height:60px }
.order-preview-content .preview-actions{ gap:8px }
}
/* ----- Add-ons Overlay modal (#addonsOverlay) — compact grid & images ----- */
@media (max-width: 540px){
#addonsOverlay > div{ width: min(520px, 96vw) !important; max-height: min(82vh, 640px) }
#addonsOverlay .addons-grid{ grid-template-columns: repeat(2, minmax(110px,1fr)) !important; gap:8px }
@media (max-width:380px){ #addonsOverlay .addons-grid{ grid-template-columns: 1fr !important } }
/* Full-bleed image + label below, smaller */
#addonsOverlay #addonsList .addon-card{ border-radius:12px }
#addonsOverlay #addonsList .addon-content{ gap:6px; padding:0 }
#addonsOverlay #addonsList .addon-content > img{
aspect-ratio: 1 / 1 !important; border-radius:12px !important; /* smaller corners */
}
#addonsOverlay #addonsList .addon-content > span{ font-size:13px; padding:6px 8px }
}
/* ----- Ultra-small devices (≤ 360px) safety net ----- */
@media (max-width: 360px){
.cat-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
.product-thumb{ max-height: 120px }
.addon-content img{ width:52px; height:52px }
}
/* ----- Dark-mode tweaks remain inherited from existing rules ----- */
/* No extra dark overrides required: we rely on your html.dark layer */