/* ============================================================================
   قالب کشاورز — اپ سفارش
   ============================================================================
   جهت‌گیری: مدرن و مینیمال. کارت و سایه کمتر، خطِ نازک و فضای خالی بیشتر،
   تایپوگرافی با تضاد وزن به‌جای تضاد رنگ.

   ⚠️ اینجا عمداً رنگ نوشته نمی‌شود. رنگ‌ها از تنظیمات پنل می‌آیند و این فایل
      پیش از بلوک :root بارگذاری می‌شود؛ اگر رنگ بنویسیم، تغییر رنگ در پنل
      بی‌اثر می‌شود. هرجا رنگ لازم است از متغیرهای موجود استفاده شده.
   ============================================================================ */

/* ── ارتفاع هدر ────────────────────────────────────────────────────────────
   پایه هدر را fixed می‌کند و بقیهٔ چیدمان را با ‎--header-height‎ زیرش می‌چیند:
   فاصلهٔ بالای بدنه، نقطهٔ چسبیدن نوار دسته‌بندی، و ارتفاع سبد و صفحهٔ پرداخت.

   چون این قالب هدر را از ۴۵ به ۱۵۰ پیکسل می‌برد، اگر این متغیر به‌روز نشود
   نوار دسته‌بندی بالاتر از انتهای هدر می‌چسبد و محصولات از لای آن فاصله
   دیده می‌شوند.

       ۱۵۰ (عکس) + ۸ (padding بالا) + ۴۴ (دکمه‌ها) + ۱۲ (padding پایین) = ۲۱۴
*/
:root {
    --header-height: 214px;
}

@media (max-width: 768px) {
    :root { --header-height: 196px; }   /* عکس ۱۳۲ + ۶۴ */
}

/* ── هدر: عکس رستوران به‌جای کادر رنگی ──────────────────────────────────────
   سورس پایه هدر را یک نوار گرادیانتِ ۴۵ پیکسلی می‌کند و عکس را پنهان.
   کشاورز عکس واقعی رستوران را می‌خواهد که پایینش در پس‌زمینه محو شود، پس
   گرادیان و لایه‌های تزئینی‌اش خنثی می‌شوند و ماسک برمی‌گردد.                */
.header-background {
    height: 150px;
    background: var(--bg-main);
}

.header-background::before,
.header-background::after {
    content: none;
}

.header-bg-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* محو شدن لبهٔ پایین تا با پس‌زمینه یکی شود */
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 45%, #000 100%);
    mask-image: linear-gradient(to top, transparent 0%, #000 45%, #000 100%);
}

/* لوگو پایین‌تر می‌نشیند چون هدر بلندتر شده */
.header-logo-container {
    top: 96px;
    right: 1.25rem;
}

.logo {
    width: 72px;
    height: 72px;
    border: 3px solid var(--bg-main);
    box-shadow: none;
}

.header-content {
    background: transparent;
    border: none;
    padding: 0.5rem 1rem 0.75rem;
}

.header-spacer {
    width: 84px;
}

@media (max-width: 768px) {
    .header-background { height: 132px; }
    .header-logo-container { top: 84px; right: 1rem; }
    .logo { width: 66px; height: 66px; }
    .header-spacer { width: 76px; }
}

/* ── دسته‌بندی‌ها: نوار سبک، بدون سایه ───────────────────────────────────── */
.categories-wrapper {
    background: var(--bg-main);
    box-shadow: none;
    border-bottom: 1px solid var(--border-light);
}

.category-item {
    padding: 0.7rem 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-bottom-width: 1.5px;
}

.scroll-btn {
    background: var(--bg-main);
    border-color: var(--border-light);
    box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   فهرست غذا: هر ردیف یک غذا
   ══════════════════════════════════════════════════════════════════════════
   الگو از اپ‌های سفارش غذایی که خوب کار می‌کنند گرفته شده (اسنپ‌فود،
   تپسی‌فود، Uber Eats، Deliveroo). چند تصمیم که پشتشان دلیل هست:

   • یک غذا در هر ردیف: در ستونِ نصف‌عرض، توضیح غذا یا بریده می‌شد یا کارت را
     می‌کشید و ردیف‌ها ناهم‌قد می‌شدند. تمام‌عرض یعنی دو خط توضیح راحت جا
     می‌شود و ارتفاع ردیف‌ها یکسان می‌ماند.

   • خط به‌جای کادر: نودودو جعبهٔ کنار هم چشم را خسته می‌کند. خط مو ریتم
     می‌سازد بدون شلوغی — همان کاری که منوی چاپی می‌کند.

   • دکمهٔ گرد روی گوشهٔ قاب، نه دکمهٔ تمام‌عرضِ ته کارت: جای ثابت و قابل حدس،
     و چون تنها عنصر پررنگِ ردیف است، بیشتر دیده می‌شود.

   • شمارنده دقیقاً همان‌جا و هم‌ارتفاع دکمه می‌نشیند تا ردیف موقع افزودن به
     سبد نپرد.

   ساختار HTML دست نخورده — همان چیزی که theme/js/scripts.js می‌سازد.

   ⚠️ همین بلوک با اندازه‌های درشت‌تر در menu.css هم هست. عمداً import نشده:
      هر فایل قالب با تاریخ تغییر خودش نسخه‌گذاری می‌شود و فایلِ import‌شده از
      آن نسخه بی‌خبر می‌ماند. اگر یکی را عوض کردید، دیگری را هم نگاه کنید.    */

.products-container {
    display: block;
    padding: 0 0 5.5rem;
    max-width: 46rem;
    margin-inline: auto;
}

/* ── ردیف ─────────────────────────────────────────────────────────────────── */
.product-card {
    position: relative;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    padding: 0.9rem 1rem;
    overflow: visible;
    transition: background-color 0.18s ease;
}

.product-card:last-child {
    border-bottom: none;
}

.product-card:hover {
    box-shadow: none;
    transform: none;
    background: rgba(var(--primary-rgb), 0.028);
}

/* ردیفی که چیزی از آن در سبد است، یک نوار باریک رنگی کنارش می‌گیرد */
.product-card:has(.quantity-control)::after,
.product-card:has(.product-cart-items)::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.6rem;
    bottom: 0.6rem;
    width: 3px;
    border-radius: 3px;
    background: var(--primary);
}

.product-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
}

/* ── متن ──────────────────────────────────────────────────────────────────── */
.product-details {
    flex: 1 1 auto;
    min-width: 0;              /* بدون این، متن بلند ستون را پهن می‌کند */
    display: block;
}

/* توضیح، داخل تگ عنوان تودرتوست (ساختار JS مشترک)، پس عنوان نباید وزن و
   line-height خودش را به آن تحمیل کند. */
.product-name {
    display: block;
    margin: 0;
    padding-top: 0;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.55;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.product-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0.15rem 0 0;
    padding-top: 0;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0;
    text-align: start;         /* justify روی دو خط فاصلهٔ کلمات را می‌کشد */
    color: var(--text-secondary);
}

.product-price {
    margin-top: 0.45rem;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--primary);
}

.product-price span {
    font-weight: 500;
    font-size: 0.72rem;
    opacity: 0.75;
    margin-inline-start: 0.1rem;
}

/* ── ستون تصویر و دکمه ────────────────────────────────────────────────────── */
.product-actions {
    flex: 0 0 auto;
    position: relative;
    display: block;
    align-self: center;
    width: 92px;
    height: 92px;
}

.product-image-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    background: var(--bg-hover);
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    display: block;
}

/* ── غذای بدون عکس ────────────────────────────────────────────────────────
   حدود دوسوم محصولات این استقرار عکس ندارند و روی NoImage.png می‌نشینند —
   یک «بشقاب خاکستری» درشت که در همهٔ ردیف‌ها تکرار می‌شود.

   دو راه بود: قاب را کلاً برداریم، یا جایش چیز آرام‌تری بگذاریم. برداشتنِ قاب
   فهرست را ناهموار می‌کرد (یک‌سوم ردیف‌ها عکس دارند و بلندترند). پس قاب سر
   جایش می‌ماند و به یک کاشیِ کم‌رنگِ هم‌رنگ برند با نشانِ محوِ قاشق‌وچنگال
   تبدیل می‌شود: ریتم ردیف‌ها یکدست می‌ماند و چشم روی چیزی گیر نمی‌کند.

   شرط روی نام فایل است نه روی قالب، پس هر عکسی که بعداً بارگذاری شود
   خودبه‌خود جای کاشی را می‌گیرد.                                            */
.product-image-wrapper:not(:has(img[data-src]:not([data-src=""]):not([data-src*="noimage" i]))) {
    background: linear-gradient(145deg,
                rgba(var(--primary-rgb), 0.11),
                rgba(var(--primary-rgb), 0.035));
}

.product-image-wrapper:not(:has(img[data-src]:not([data-src=""]):not([data-src*="noimage" i]))) img {
    visibility: hidden;
}

.product-image-wrapper:not(:has(img[data-src]:not([data-src=""]):not([data-src*="noimage" i])))::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto auto 55% auto;
    width: 26px;
    height: 26px;
    background: rgba(var(--primary-rgb), 0.34);
    -webkit-mask: var(--ks-cutlery) no-repeat center / contain;
    mask: var(--ks-cutlery) no-repeat center / contain;
}

/* نشانِ قاشق‌وچنگال به‌صورت SVG درون‌خطی — بدون وابستگی به فونت آیکن */
.products-container {
    --ks-cutlery: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v6.4a2.6 2.6 0 0 0 1.9 2.5V22h1.9V10.9A2.6 2.6 0 0 0 12.7 8.4V2h-1.4v5.6h-1V2H9v5.6H8V2H7zM17.4 2c-1.6 1-2.5 2.9-2.5 5.4 0 2 .7 3.4 1.9 4V22h1.9V2h-1.3z'/%3E%3C/svg%3E");
}

/* ── دکمهٔ افزودن: همیشه روی گوشهٔ قاب ─────────────────────────────────────
   جای ثابت یعنی چشم بعد از چند ردیف یاد می‌گیرد کجا را بزند، و ارتفاع ردیف
   با افزودن به سبد نمی‌پرد چون شمارنده هم‌ارتفاع دکمه است و همان‌جا می‌نشیند.

   ⚠️ حتماً زیر ‎.product-actions‎ محدود بماند. ‎.quantity-control‎ در سبد کناری
      و صفحهٔ پرداخت هم هست؛ اگر بدون محدوده نوشته شود، شمارندهٔ آن‌ها هم
      absolute می‌شود و از جایش می‌پرد.                                       */
.product-actions .add-btn,
.product-actions .quantity-control {
    position: absolute;
    bottom: 6px;
    inset-inline-start: 6px;
    z-index: 2;
    margin-top: 0;
}

/* شمارنده تمام‌عرضِ قاب می‌شود (قاعدهٔ ‎inset-inline‎ پایین‌تر)، ولی دکمهٔ
   افزودن باید گرد و لنگرگرفته از یک گوشه بماند. */
.product-actions .add-btn {
    inset-inline-end: auto;
}

.add-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.add-btn:hover {
    background: var(--primary-dark);
    color: #fff;
    transform: none;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}

.add-btn:active {
    transform: scale(0.92);
}

/* ── شمارنده روی قاب ────────────────────────────────────────────────────────
   با ‎inset-inline-start‎ تنها، شمارنده از یک لبه لنگر می‌گرفت و چون از قاب
   پهن‌تر بود، از سمت دیگر بیرون می‌زد و به لبهٔ ردیف می‌چسبید. با لنگرکردن به
   هر دو لبه، عرضش خودش را با قاب تنظیم می‌کند و همیشه با همان فاصلهٔ دکمه
   داخل قاب می‌ماند.                                                          */
.product-actions .quantity-control {
    inset-inline: 6px;
    width: auto;
    height: 36px;
    padding: 0 0.15rem;
    gap: 0;
    justify-content: space-between;
    border: none;
    border-radius: 999px;
    background: var(--bg-main);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* شمارندهٔ سبد کناری و صفحهٔ پرداخت: همان زبان، بدون سایه و بدون جابه‌جایی */
.cart-item-inline .quantity-control,
.cart-sidebar .quantity-control,
.checkout-section .quantity-control {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    padding: 0 0.15rem;
}

.quantity-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--primary);
    font-size: 0.8rem;
}

.quantity-btn:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    box-shadow: none;
}

.quantity {
    min-width: 22px;
    font-weight: 800;
    font-size: 0.9rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── نشان پکیج ────────────────────────────────────────────────────────────
   در چیدمان شبکه‌ای روی گوشهٔ عکس می‌نشست؛ آنجا با دکمه تداخل پیدا می‌کند،
   پس به یک برچسب کوچک بالای نام تبدیل می‌شود.                               */
.package-badge {
    position: static;
    display: inline-block;
    margin-bottom: 0.3rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.7;
}

/* شمارندهٔ چند-عکسی به گوشهٔ مقابلِ دکمه می‌رود تا رویش نیفتد */
.product-image-badge {
    inset-inline-end: 6px;
    inset-inline-start: auto;
    top: 6px;
    bottom: auto;
    border-radius: 999px;
}

/* ── آیتم‌های انتخاب‌شده زیر ردیف (فقط غذاهای دارای افزودنی) ─────────────── */
.product-cart-items {
    margin-top: 0.7rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.product-cart-items .cart-item-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: rgba(var(--primary-rgb), 0.03);
}

.product-cart-items .cart-item-title {
    font-size: 0.85rem;
    font-weight: 700;
}

.product-cart-items .cart-item-addons {
    font-size: 0.74rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

.product-cart-items .cart-item-price {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary);
    margin-top: 0.15rem;
}

.product-cart-items .quantity-control {
    height: 32px;
}

.product-cart-items .quantity-btn {
    width: 26px;
    height: 26px;
}

/* ── صفحه‌های باریک ───────────────────────────────────────────────────────── */
@media (max-width: 420px) {
    .product-card { padding: 0.75rem 0.85rem; }
    .product-main { gap: 0.7rem; }
    .product-name { font-size: 0.9rem; }
    .product-description { font-size: 0.75rem; }
    .product-price { font-size: 0.9rem; }
    .product-actions { width: 82px; height: 82px; }
}

/* ── سبد شناور: نوار تخت و پهن ───────────────────────────────────────────── */
.floating-cart {
    border-radius: 10px;
    padding: 0.85rem 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    min-width: 90%;
    font-weight: 700;
}

.floating-cart:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}

.cart-count {
    border-radius: 6px;
    font-weight: 800;
}

/* ── سبد و پرداخت ─────────────────────────────────────────────────────────── */
.cart-item-inline {
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border-light);
}

.cart-item-image {
    border-radius: 8px;
    box-shadow: none;
}

.checkout-section {
    border-radius: 12px;
    box-shadow: none;
    border: 1px solid var(--border-light);
    padding: 1.1rem;
}

.checkout-btn,
.checkout-next-btn,
.checkout-back-btn,
.auth-submit-btn,
.address-confirm-btn,
.note-save-btn {
    border-radius: 10px;
    box-shadow: none;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.checkout-btn:hover,
.auth-submit-btn:hover,
.address-confirm-btn:hover,
.note-save-btn:hover {
    transform: none;
    box-shadow: none;
}

.time-label,
.payment-content,
.address-item {
    border-radius: 10px;
    border-width: 1.5px;
}

.time-option input[type="radio"]:checked + .time-label {
    transform: none;
}

/* ── فرم‌ها: حاشیهٔ نازک‌تر ───────────────────────────────────────────────── */
.form-input,
.form-textarea,
.form-select,
.note-textarea,
.discount-input,
.otp-input {
    border-width: 1.5px;
    border-radius: 10px;
}

/* ── مودال‌ها: لبهٔ نرم بالا ─────────────────────────────────────────────── */
.note-modal,
.auth-modal,
.address-modal {
    border-radius: 16px 16px 0 0;
}

.cart-sidebar {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
}