/* ===========================================================================
   فست‌کارت — سیستمِ رنگ. دور ۴۷ (docs/47 §۱۳)
   ===========================================================================

   تا امروز این قالب یک رنگ داشت: `--theme-color` در ۳۱۲ قاعدهٔ
   `minified-style.css`. دکمهٔ خرید، قیمت، برچسبِ «تازه»، خطِ زیرِ عنوان و
   آیکونِ پشتیبانی همه همان فیروزه‌ای بودند — پس هیچ‌کدام دیده نمی‌شد.

   حالا هر «کار» رنگِ خودش را دارد و نامِ آن کار، نه نامِ رنگ:

       --theme-accent        برند: لینک، قیمت، آیکون، دکمهٔ جست‌وجو
       --theme-accent-deep   برندِ تیره: پای صفحه، هاورِ دکمه‌های برند
       --theme-cta           فقط خرید: «افزودن به سبد»، «ادامهٔ خرید»، «پرداخت»
       --theme-highlight     نکتهٔ کوچک: نشانِ «تازه»، تزئینِ عنوان
       --theme-sale          تخفیف: درصد، قیمتِ خط‌خورده
       --theme-success       موجود و موفق
       --theme-page / -surface / -border / -ink / -muted   زمینه، کارت، مرز، متن

   همه از `apps/appearance/design.py` می‌آیند و فروشنده در «تنظیماتِ قالب ←
   رنگ» عوضشان می‌کند. نوشتهٔ روی هر رنگِ پُر (`--theme-on-*`) خودکار
   انتخاب می‌شود — سفید روی نارنجی ۲٫۶ به ۱ است و خوانده نمی‌شود.

   ── چرا یک فایل و نه ویرایشِ هر صفحه ─────────────────────────────────

   صفحه‌های بازطراحی‌شده (`.pdp-page`، `.plp`، `.mz`) متغیرهای رنگِ خودشان را
   دارند. اینجا همان متغیرها از رنگ‌های فروشگاه تغذیه می‌شوند؛ پس صفحه
   نوشته‌شده می‌ماند و فقط منبعِ رنگ عوض می‌شود. این فایل بعد از همهٔ
   شیوه‌نامه‌های قالب بار می‌شود (`layout/master.html`) و با ویژگیِ برابر
   برنده است.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   پایه — زمینه، متن، کارت
   --------------------------------------------------------------------------- */

body {
    background-color: var(--theme-page);
    color: var(--theme-ink);
}

/* زمینهٔ صفحه کمی خاکستری است تا کارتِ سفید بی سایهٔ سنگین جدا شود؛ هر سطحی
   که «کارت» است باید خودش زمینه داشته باشد، وگرنه روی خاکستری شفاف می‌ماند. */
header,
.product-box-3,
.product-box-4,
.category-box-list,
.shop-category-box,
.brand-box,
.pdp-card,
.cart-table,
.summery-box,
.left-sidebar-checkout,
.right-side-summery-box {
    background-color: var(--theme-surface);
}

.product-box-3,
.product-box-4,
.category-box-list,
.brand-box {
    border-color: var(--theme-border);
}

.text-content,
.span-name,
.product-box-3 .product-detail .span-name,
.text-muted {
    color: var(--theme-muted) !important;
}

.name,
.text-title,
.product-box-4 .product-detail .name,
.product-box-3 .product-detail .name {
    color: var(--theme-ink);
}

/* ---------------------------------------------------------------------------
   خرید — یک رنگ، فقط برای پول خرج‌کردن
   ---------------------------------------------------------------------------
   `theme-bg-color` روی این دکمه‌ها رنگِ برند را می‌داد؛ اینجا به رنگِ خرید
   برمی‌گردد. دکمهٔ «مشاهده» (`view-product-button`) خرید نیست و برند می‌ماند. */

.btn-add-cart.addcart-button,
.add-to-cart-box .btn-add-cart.addcart-button.theme-bg-color,
.btn-checkout,
.btn-checkout.theme-bg-color,
.pdp-page .pdp-bb__cta .btn-add-to-cart {
    background: var(--theme-cta) !important;
    color: var(--theme-on-cta) !important;
    border-color: transparent;
}

.btn-add-cart.addcart-button:hover,
.btn-checkout:hover,
.pdp-page .pdp-bb__cta .btn-add-to-cart:hover {
    background: var(--theme-cta-strong) !important;
    color: var(--theme-on-cta) !important;
}

.btn-add-cart.addcart-button .add-icon,
.btn-add-cart.addcart-button .add-icon i {
    color: var(--theme-cta);
}

.view-product-button {
    background: var(--theme-accent-wash) !important;
    color: var(--theme-accent) !important;
}

.view-product-button:hover {
    background: var(--theme-accent) !important;
    color: var(--theme-on-accent) !important;
}

/* دکمهٔ «دستیار» کنارِ جست‌وجو برند است، نه خرید. */
.hs-ai-btn {
    background: var(--theme-accent);
    color: var(--theme-on-accent);
}

.hs-ai-btn:hover {
    background: var(--theme-accent-deep);
    color: var(--theme-on-accent-deep);
}

/* ---------------------------------------------------------------------------
   تخفیف و موجودی
   --------------------------------------------------------------------------- */

:root {
    /* `foundation.css` قیمتِ خط‌خوردهٔ هر چهار قالب را با این رنگ می‌کشد. */
    --ds-price-was: var(--theme-sale-ink);
}

.ds-price__was,
.price del {
    color: var(--theme-sale-ink);
}

.ds-price__now,
.product-box-4 .price .theme-color,
.product-box-3 .price .theme-color {
    color: var(--theme-accent) !important;
}

.offer-label,
.label-tag,
.discount-badge,
.offer-badge {
    background: var(--theme-sale) !important;
    color: var(--theme-on-sale) !important;
}

/* «در انبار موجود نیست» در کارت؛ پیش‌تر `style="color:#50607c"`ِ درون‌خطی. */
.fk-out-of-stock {
    font-size: 12px;
    color: var(--theme-muted);
}

/* ---------------------------------------------------------------------------
   تزئینِ عنوان‌ها — نکته، نه برند
   ---------------------------------------------------------------------------
   خطِ دوتکه و لوزیِ زیرِ «جدیدترین محصولات» با رنگِ برجسته می‌آید، تا عنوان
   (به رنگِ متن) و تزئینش با هم رقابت نکنند. */

.title .title-leaf svg,
.title .title-leaf,
.title-leaf svg {
    fill: var(--theme-highlight);
    color: var(--theme-highlight);
}

/* ---------------------------------------------------------------------------
   صفحه‌های بازطراحی‌شده — متغیرهای خودشان، از رنگ‌های فروشگاه
   --------------------------------------------------------------------------- */

.pdp-page,
.plp,
.mz {
    --pdp-ink: var(--theme-ink);
    --pdp-text: color-mix(in srgb, var(--theme-ink) 82%, var(--theme-surface));
    --pdp-muted: var(--theme-muted);
    --pdp-line: var(--theme-border);
    --pdp-line-soft: color-mix(in srgb, var(--theme-border) 55%, var(--theme-surface));
    --pdp-canvas: var(--theme-page);
    --pdp-surface: var(--theme-surface);
    --pdp-ok: var(--theme-success-ink);
    --pdp-ok-bg: var(--theme-success-soft);
    --pdp-bad: var(--theme-sale-ink);
    --pdp-bad-bg: var(--theme-sale-soft);
    --pdp-sale: var(--theme-sale);

    --plp-ink: var(--theme-ink);
    --plp-text: color-mix(in srgb, var(--theme-ink) 82%, var(--theme-surface));
    --plp-muted: var(--theme-muted);
    --plp-line: var(--theme-border);
    --plp-line-soft: color-mix(in srgb, var(--theme-border) 55%, var(--theme-surface));
    --plp-canvas: var(--theme-page);
    --plp-surface: var(--theme-surface);
    --plp-sale: var(--theme-sale);
    --plp-sale-bg: var(--theme-sale-soft);

    --mz-ink: var(--theme-ink);
    --mz-text: color-mix(in srgb, var(--theme-ink) 82%, var(--theme-surface));
    --mz-muted: var(--theme-muted);
    --mz-line: var(--theme-border);
    --mz-canvas: var(--theme-page);
    --mz-surface: var(--theme-surface);
}

/* نشانِ درصدِ تخفیف روی رنگِ تخفیف، با نوشتهٔ خوانا. */
.pdp-page .pdp-bb__off {
    background: var(--theme-sale);
    color: var(--theme-on-sale);
}

/* ---------------------------------------------------------------------------
   پای صفحه — برندِ تیره
   ---------------------------------------------------------------------------
   پای صفحهٔ روشن روی زمینهٔ روشن، صفحه را «تمام‌نشده» نشان می‌داد. برندِ تیره
   پایانِ صفحه را می‌بندد و هویتِ فروشگاه را بی‌آنکه با دکمه‌ها رقابت کند
   تکرار می‌کند. */

footer {
    background: var(--theme-accent-deep) !important;
    background-image: none !important;
    color: var(--theme-on-accent-deep);
    --theme-line: color-mix(in srgb, var(--theme-on-accent-deep) 16%, transparent);
}

footer .footer-title h4,
footer .footer-title h3,
footer .footer-title,
footer h4,
footer h5 {
    color: var(--theme-on-accent-deep);
}

footer a,
footer .text-content,
footer li,
footer p,
footer span {
    color: color-mix(in srgb, var(--theme-on-accent-deep) 78%, transparent) !important;
}

footer a:hover,
footer a:focus-visible {
    color: var(--theme-highlight) !important;
}

footer .main-footer,
footer .sub-footer {
    border-color: color-mix(in srgb, var(--theme-on-accent-deep) 16%, transparent) !important;
}

/* Round 50 — شماره و ایمیلِ ستونِ «تماس با ما» مشکی بود.

   `minified-style.css` آن‌ها را با گزینشگرِ هفت‌تکه‌ای رنگ می‌کند
   (`footer .main-footer .footer-contact ul li .footer-number .contact-number h5
   {color:#222}`) و قاعدهٔ کوتاهِ `footer h5` بالا از آن می‌باخت: رنگِ
   سخت‌نوشتهٔ قالبِ خریداری‌شده روی برندِ تیره تقریباً نامرئی بود. این‌جا با
   همان وزنِ گزینشگر جوابش را می‌دهیم — نه `!important` — تا اگر روزی قالبی
   رنگِ روشن‌تری برای این ستون خواست، باز بتواند. خطِ نقطه‌چینِ میانِ
   ردیف‌ها و آیکون‌ها هم به جای `#c1c1c1` و `#4a5568` از همان پالت می‌آیند. */
footer .main-footer .footer-contact ul li .footer-number .contact-number h5 {
    color: var(--theme-on-accent-deep);
}

footer .main-footer .footer-contact ul li .footer-number i,
footer .main-footer .footer-contact ul li .footer-number .feather {
    color: var(--theme-highlight);
    stroke: currentColor;
}

footer .main-footer .footer-contact ul li::before {
    border-bottom-color: color-mix(in srgb, var(--theme-on-accent-deep) 22%, transparent);
}

footer .ts-seals__item {
    background: var(--theme-surface);
}

/* طرحِ سبزی و میوهٔ قالبِ خریداری‌شده (`footer::before`) روی برندِ تیره لکهٔ روشن می‌انداخت. */
footer::before,
footer::after {
    background-image: none !important;
    opacity: 0;
}

/* لوزیِ زیرِ عنوان خط را با یک قابِ سفید می‌بُرد؛ روی زمینهٔ خاکستری آن قاب یک مربعِ سفید بود. */
.title .title-leaf,
.title .title-leaf svg,
.title-leaf svg {
    background-color: var(--theme-page);
}

/* ---------------------------------------------------------------------------
   سبد، ارسال و پرداخت — فیروزه‌ایِ سخت‌نوشتهٔ قالب
   ---------------------------------------------------------------------------
   نوارِ مرحله‌ها، پیوندهای «جست‌وجوی محصولات» و دکمهٔ آبیِ قالب در
   `minified-style.css` با `#41c1c6` و `#1ca2bd` نوشته شده‌اند، نه با متغیر؛
   پس هر رنگی که فروشنده بگذارد این‌ها فیروزه‌ای می‌ماندند. */

.c-checkout-stepbar__step-image-wrapper {
    border-color: var(--theme-accent);
}

.c-checkout-stepbar__step-image-wrapper::before,
.c-checkout-stepbar__step-image-wrapper::after {
    background-color: var(--theme-accent);
}

.c-checkout-stepbar__step-title {
    color: var(--theme-accent);
}

.btn-link-spoiler,
.o-text-blue,
.remember a,
.remember a:hover,
.registery .login-register a,
.loginy .login-register a,
.c-product__params ul li.c-product__params-more-handler::before,
.c-profile-stats__col p span.o-text-blue {
    color: var(--theme-accent);
}

.c-checkout-details p span.text-highlight-green {
    background-color: var(--theme-success-soft);
    color: var(--theme-success-ink);
}

.c-checkout-payment__box-inputs .o-form__row.is-success .o-form__field-input {
    border-color: var(--theme-success);
    color: var(--theme-success-ink);
}

.c-checkout-payment__box-inputs .o-form__row.is-success .o-form__field-hint {
    color: var(--theme-success-ink);
}

.c-profile-order-steps__item + hr,
.c-profile-order-steps__item + hr::before {
    background-color: var(--theme-accent);
}

/* دکمهٔ اصلیِ بوت‌استرپ در فروشگاه (مثلِ «ادامهٔ خرید در فروشگاه») برند است، نه خرید. */
.btn-primary,
.btn-primary:focus {
    background-color: var(--theme-accent);
    border-color: var(--theme-accent);
    color: var(--theme-on-accent);
}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--theme-accent-deep);
    border-color: var(--theme-accent-deep);
    color: var(--theme-on-accent-deep);
}

/* ---------------------------------------------------------------------------
   حباب گفت‌وگو و نوارِ پایینِ موبایل
   ---------------------------------------------------------------------------
   زیرِ ۷۶۸ پیکسل `.mobile-menu` (حدودِ ۶۶ پیکسل، چسبیده به پایین) دیده می‌شود و حبابِ پشتیبانی که
   ۲۰ پیکسل از پایین می‌نشست درست روی دکمهٔ «سبد» می‌افتاد. حباب بالای نوار می‌رود.
   `body .sw-root` چون `support-widget.css` تهِ صفحه و پس از این پرونده بار می‌شود. */
@media (max-width: 767.98px) {
    body .sw-root {
        inset-block-end: calc(80px + env(safe-area-inset-bottom, 0px));
    }
}