/* عكيفك - Style */
:root{
    --primary: #6b1f1f;
    --secondary: #d4922a;
    --btn-color: #6b1f1f;
    --bg: #f7f3ec;
    --surface: #ffffff;
    --text: #2b2320;
    --text-muted: #766b62;
    --border: #eae2d6;
    --radius: 16px;
}
[data-theme="dark"]{
    --bg: #17130f;
    --surface: #241d17;
    --text: #f2ece3;
    --text-muted: #b9ac9d;
    --border: #362c22;
}

*{box-sizing:border-box}
body{
    font-family:'Cairo', Tahoma, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin:0;
    transition: background .25s, color .25s;
    padding-bottom: 70px;
}
a{color:inherit}

/* Header */
.site-header{
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top:0;
    z-index: 50;
}
.brand{ color: var(--text); }
.logo-frame{ width:42px; height:42px; border-radius:12px; background:#fff; border:1px solid rgba(0,0,0,.08); box-shadow:0 2px 6px rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:4px; flex-shrink:0; }
.logo-img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.brand-name{ font-weight:800; font-size:1.25rem; color: var(--primary); }
.icon-btn{
    width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background: var(--bg); color: var(--text);
    border:1px solid var(--border); text-decoration:none;
    font-size:1.1rem; position:relative;
}
.icon-btn:hover{ background: var(--primary); color:#fff; }
.icon-btn-sm{ width:28px; height:28px; font-size:.8rem; }
.cart-badge{
    position:absolute; top:-4px; left:-4px;
    background: var(--secondary); color:#fff;
    font-size:.65rem; min-width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-weight:700;
}
.site-nav{ background: var(--primary); }
.nav-link-custom{
    color:#fff; text-decoration:none; font-weight:600; font-size:.95rem;
    opacity:.9;
}
.nav-link-custom:hover{ opacity:1; text-decoration:underline; }

/* Hero */
.hero{
    background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55)), var(--hero-img) center/cover no-repeat;
    color:#fff; padding: 70px 20px; text-align:center; border-radius: 0 0 28px 28px;
}
.hero h1{ font-weight:800; font-size:2.2rem; margin-bottom:8px; }
.hero p{ opacity:.9; margin-bottom:24px; }
.btn-primary-brand{
    background: var(--btn-color); border:none; color:#fff;
    padding: 12px 32px; border-radius: 40px; font-weight:700;
    font-size:1.05rem; text-decoration:none; display:inline-block;
}
.btn-primary-brand:hover{ filter:brightness(0.88); color:#fff; }

/* Category cards */
.section-title{ font-weight:800; margin: 32px 0 18px; text-align:center; color: var(--primary); }
.cat-card{
    background: var(--surface); border-radius: var(--radius);
    overflow:hidden; text-decoration:none; color: var(--text);
    border:1px solid var(--border); display:block; height:100%;
    transition: transform .2s;
}
.cat-card:hover{ transform: translateY(-4px); color: var(--text); }
.cat-card img{ width:100%; height:150px; object-fit:cover; }
.cat-card .cat-body{ padding:14px; text-align:center; }
.cat-card .cat-body h5{ font-weight:800; margin-bottom:4px; }
.cat-card .cat-body small{ color: var(--text-muted); }

/* Product cards */
.product-card{
    background: var(--surface); border-radius: var(--radius);
    border:1px solid var(--border); overflow:hidden; height:100%;
    display:flex; flex-direction:column;
}
.product-card img{ width:100%; height:160px; object-fit:cover; }
.product-card .p-body{ padding:14px; flex:1; display:flex; flex-direction:column; }
.product-card h6{ font-weight:800; margin-bottom:4px; }
.product-card p{ color: var(--text-muted); font-size:.85rem; flex:1; }
.product-card .price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.price-tag{ font-weight:800; color: var(--primary); font-size:1.05rem; }
.add-btn{
    background: var(--btn-color); color:#fff; border:none; border-radius:10px;
    padding:8px 14px; font-weight:700; font-size:.85rem;
    min-height:44px; min-width:44px; /* حد أدنى موصى به لمس بالهاتف (Apple HIG / WCAG 2.5.5) */
}
.add-btn:disabled{ background:#aaa; }
.qty-control{ display:flex; align-items:center; gap:8px; }
.qty-control button{
    width:40px;height:40px;border-radius:8px;border:1px solid var(--border);
    background:var(--bg); font-weight:800;
}

/* Category chips (menu page) */
.chip-scroll-wrap{ position:relative; }
.chip-scroll{
    display:flex; gap:10px; overflow-x:auto; padding:14px 2px;
    scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
}
.chip-scroll::-webkit-scrollbar{ display:none; }
/* تلميح بصري خفيف يوري إنه في أقسام إضافية تقدر "تسحبها" — بيظهر بس لو المحتوى
   فعلاً أطول من المساحة المتاحة (عن طريق كلاس has-overflow يُضاف بجافاسكريبت) */
.chip-scroll-wrap.has-overflow::after{
    content:''; position:absolute; top:14px; bottom:14px; inset-inline-start:0; width:28px;
    background:linear-gradient(to left, transparent, var(--bg, #fff));
    pointer-events:none;
}
[dir="rtl"] .chip-scroll-wrap.has-overflow::after{ background:linear-gradient(to right, transparent, var(--bg, #fff)); }
.chip{
    white-space:nowrap; padding:8px 18px; border-radius:30px;
    background: var(--surface); border:1px solid var(--border);
    text-decoration:none; color: var(--text); font-weight:700; font-size:.9rem;
}
.chip.active, .chip:hover{ background: var(--primary); color:#fff; border-color: var(--primary); }

/* Cart page */
.cart-item{
    display:flex; gap:12px; align-items:center; background:var(--surface);
    border:1px solid var(--border); border-radius:14px; padding:12px; margin-bottom:10px;
}
.cart-item img{ width:70px;height:70px; border-radius:10px; object-fit:cover; }
.cart-summary{
    background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px;
    position: sticky; top: 90px;
}
.summary-row{ display:flex; justify-content:space-between; margin-bottom:8px; color: var(--text-muted); }
.summary-row.total{ font-weight:800; font-size:1.2rem; color: var(--text); border-top:1px solid var(--border); padding-top:10px; margin-top:10px; }

/* Floating cart bar (mobile) */
.floating-cart-bar{
    position: fixed; bottom:0; left:0; right:0; z-index:60;
    background: var(--primary); color:#fff; padding:14px 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,.15);
}
.floating-cart-bar .btn{ background:#fff; color:var(--primary); border-radius:20px; font-weight:700; padding:4px 16px; }

/* Footer */
.site-footer{ background: var(--surface); border-top:1px solid var(--border); margin-top:40px; }
.site-footer h5, .site-footer h6{ color: var(--primary); font-weight:800; }
.footer-contact-list{ display:flex; flex-direction:column; gap:8px; }
.footer-contact-row{ display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 8px; font-size:.85rem; }
.footer-contact-row .fc-label{ flex-shrink:0; min-width:70px; font-weight:800; color:var(--primary); }
.footer-contact-row .fc-value{ color:var(--text-muted,#6b6b76); }

/* Forms */
.form-control, .form-select{
    background: var(--surface); color: var(--text); border:1px solid var(--border);
    border-radius:10px;
}
.form-control:focus{ box-shadow: 0 0 0 3px rgba(107,31,31,.15); border-color: var(--primary); }

/* Empty state */
.empty-state{ text-align:center; padding:60px 20px; color: var(--text-muted); }
.empty-state i{ font-size:3rem; color: var(--border); }

@media (max-width: 576px){
    .hero{ padding: 50px 16px; border-radius:0 0 20px 20px; }
    .hero h1{ font-size:1.6rem; }

    /* ===== هيدر الموبايل — تخفيف الازدحام + إبراز اللوغو ===== */
    .site-header .container.d-flex{ gap:6px; }
    .brand{ min-width:0; flex-shrink:1; }
    .logo-frame{
        width:44px; height:44px; flex-shrink:0;
        box-shadow:0 0 0 3px rgba(255,255,255,.6), 0 6px 16px -4px rgba(0,0,0,.18);
        border-color:rgba(0,0,0,.05);
    }
    .brand-name{
        font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
        max-width:38vw; display:inline-block;
    }
    .icon-btn{ width:34px; height:34px; font-size:1rem; }
    .site-header .d-flex.align-items-center.gap-2:last-child{ gap:5px !important; }
}