/* ============================================================
   configurator.css
   ============================================================
   مودال پیکربندی محصول — انتخاب چوب، چرم، فلز و سایز.

   ⚠️ طرح تحویلی همه‌چیز را inline style داشت. اینجا به کلاس تبدیل
   شده تا: (۱) قابل کش‌شدن باشد و با هر باز شدن مودال دوباره ساخته
   نشود، (۲) رنگ‌ها یک جا قابل تنظیم بمانند، (۳) حالت موبایل بدون
   دست‌زدن به جاوااسکریپت کار کند.

   ⚠️ فونت از Google Fonts لود *نمی‌شود*. طرح Vazirmatn را از
   fonts.googleapis.com می‌گرفت؛ روی سایت واقعی هم کند است و هم
   ممکن است در دسترس نباشد. سایت از قبل فونت محلی «sf» دارد و
   همین‌جا هم همان استفاده می‌شود.
   ============================================================ */

/* ============================================================
   دکمه‌ی باز کردن مودال
   ============================================================
   ⚠️ در نوار خرید چسبان، کنار سواچ‌های رنگ می‌نشیند و کلاس
   .sticky-buy-swatch را از همان‌جا به ارث می‌برد — پس اندازه و
   جایگاهش خودکار با بقیه یکی است.

   فقط ظاهرش عمداً فرق دارد (خط‌چین به‌جای عکس) تا معلوم باشد
   یک رنگ دیگر نیست، بلکه «بقیه‌اش اینجاست».
   ============================================================ */

.sticky-buy-more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px dashed #5c5c5c;
    color: #5c5c5c;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.sticky-buy-more:hover,
.sticky-buy-more:focus-visible {
    border-color: #b3de4f;
    color: #000;
}


:root {
    --cfg-green:   #b3de4f;   /* سبز برند — انتخاب فعال */
    --cfg-ink:     #22300c;   /* متن روی سبز */
    --cfg-clay:    #ab8c8b;   /* حالت سفارشی — عمداً از سبز جدا */
    --cfg-line:    #dcdcdc;
    --cfg-mute:    #5c5c5c;
    --cfg-panel:   #f3f3f3;
    --cfg-card:    #e9e9e9;
    --cfg-sand:    #e4ddd3;
    --cfg-scrim:   rgba(34, 34, 30, .42);
}

@keyframes cfg-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes cfg-rise { from { opacity: 0; transform: translateY(18px) scale(.985) } to { opacity: 1; transform: none } }


/* ============ پوسته ============ */

.cfg-scrim {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--cfg-scrim);
    backdrop-filter: blur(3px);
    animation: cfg-fade .2s ease;
}

.cfg-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: min(1160px, 94vw);
    height: min(780px, 90vh);
    background: var(--cfg-panel);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
    animation: cfg-rise .24s ease;
    direction: rtl;
    font-family: "sf", sans-serif;
}

/* ⚠️ کاربری که «کاهش حرکت» را روشن کرده نباید انیمیشن ببیند */
@media (prefers-reduced-motion: reduce) {
    .cfg-scrim, .cfg-panel { animation: none }
}


/* ============ سربرگ ============ */

.cfg-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 15px;
    flex: none;
}

.cfg-status {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 5px;
    font-size: 12px;
    color: var(--cfg-mute);
}

.cfg-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--cfg-green);
}

.cfg-panel.is-custom .cfg-dot { background: var(--cfg-clay) }

.cfg-title {
    margin: 0;
    font: 500 19px/1.5 "sf", sans-serif;
    color: #000;
}

.cfg-head-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: none;
}

.cfg-preset {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--cfg-line);
    background: transparent;
    font: 400 12.5px "sf", sans-serif;
    color: var(--cfg-mute);
    cursor: pointer;
    white-space: nowrap;
}

.cfg-preset:hover { color: #000; border-color: var(--cfg-mute) }

.cfg-close {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 999px;
    border: 1px solid var(--cfg-line);
    background: transparent;
    color: var(--cfg-mute);
    font-size: 15px;
    cursor: pointer;
}

.cfg-close:hover { color: #000; border-color: var(--cfg-mute) }


/* ============ ردیف مرحله‌ها ============ */

.cfg-steps {
    display: flex;
    align-items: center;
    padding: 0 24px 15px;
    border-bottom: 1px solid var(--cfg-line);
    flex: none;
}

.cfg-step {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 7px 13px 7px 8px;
    border-radius: 999px;
    border: 1px solid var(--cfg-line);
    background: transparent;
    cursor: pointer;
    font-family: "sf", sans-serif;
}

.cfg-step[aria-current="true"] {
    background: var(--cfg-green);
    border-color: var(--cfg-green);
}

.cfg-step-num {
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    background: #e9e9e9;
    color: var(--cfg-mute);
}

.cfg-step.is-done .cfg-step-num { background: var(--cfg-sand) }

.cfg-step[aria-current="true"] .cfg-step-num {
    background: var(--cfg-ink);
    color: var(--cfg-green);
}

.cfg-step-label {
    font-size: 13px;
    color: #000;
    white-space: nowrap;
}

.cfg-step[aria-current="true"] .cfg-step-label { color: var(--cfg-ink) }


/* ============ بدنه ============ */

.cfg-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 392px;
    overflow: hidden;
}

.cfg-options {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 16px 22px;
    border-left: 1px solid var(--cfg-line);
}

.cfg-options-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.cfg-axis-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.cfg-axis-title {
    margin: 0;
    font: 500 17px/1.5 "sf", sans-serif;
    color: #000;
}

.cfg-axis-count {
    font-size: 11.5px;
    color: var(--cfg-mute);
    flex: none;
}

.cfg-axis-desc {
    margin: 7px 0 15px;
    font-size: 12.5px;
    line-height: 1.95;
    color: var(--cfg-mute);
}

.cfg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.cfg-opt {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    text-align: right;
    cursor: pointer;
    border-radius: 16px;
    overflow: hidden;
    background: var(--cfg-card);
    border: 1px solid var(--cfg-line);
    font-family: "sf", sans-serif;
    transition: border-color .15s, box-shadow .15s;
}

.cfg-opt[aria-pressed="true"] {
    border: 2px solid var(--cfg-green);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

.cfg-swatch {
    position: relative;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cfg-line);
}

/* سایز عکس ندارد — عدد بزرگ نشان داده می‌شود */
.cfg-swatch--text {
    background: var(--cfg-sand);
    font: 500 26px "sf", sans-serif;
    color: var(--cfg-mute);
}

.cfg-check {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--cfg-green);
    color: var(--cfg-ink);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.cfg-opt[aria-pressed="true"] .cfg-check { display: flex }

.cfg-opt-body { padding: 11px 13px 13px }

.cfg-opt-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.cfg-opt-label { font-size: 14px; color: #000 }

.cfg-opt-code {
    direction: ltr;
    font: 500 11px ui-monospace, Menlo, monospace;
    color: var(--cfg-mute);
    flex: none;
}

.cfg-opt-price {
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--cfg-mute);
}

.cfg-opt-price.has-extra { color: #000 }


/* ============ گزینه‌ی سفارشی ============ */

.cfg-custom {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    margin-top: 14px;
    padding: 13px 15px;
    border-radius: 16px;
    cursor: pointer;
    text-align: right;
    background: transparent;
    border: 1px dashed var(--cfg-mute);
    font-family: "sf", sans-serif;
}

.cfg-custom[aria-pressed="true"] {
    background: var(--cfg-card);
    border: 2px solid var(--cfg-clay);
}

.cfg-custom-icon {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--cfg-mute);
    border: 1px dashed var(--cfg-mute);
}

.cfg-custom[aria-pressed="true"] .cfg-custom-icon {
    color: var(--cfg-clay);
    border-color: var(--cfg-clay);
}

.cfg-custom-text { flex: 1; min-width: 0; text-align: right }

.cfg-custom-title { display: block; font-size: 13.5px; color: #000 }

.cfg-custom-hint {
    display: block;
    font-size: 11.5px;
    line-height: 1.8;
    color: var(--cfg-mute);
    margin-top: 3px;
}

.cfg-custom-code {
    direction: ltr;
    font: 500 11px ui-monospace, Menlo, monospace;
    color: var(--cfg-mute);
    flex: none;
}

/* یادداشت سفارشی */
.cfg-note {
    margin-top: 12px;
    border: 1px dashed var(--cfg-clay);
    border-radius: 16px;
    padding: 14px;
    background: var(--cfg-card);
}

.cfg-note-title { font-size: 13px; color: #000; margin-bottom: 8px }

.cfg-note textarea {
    width: 100%;
    resize: vertical;
    min-height: 62px;
    border: 1px solid var(--cfg-line);
    border-radius: 12px;
    background: var(--cfg-panel);
    padding: 11px 12px;
    font: 400 12.5px/1.9 "sf", sans-serif;
    color: #000;
    outline: none;
}

.cfg-note-warn {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.85;
    color: var(--cfg-mute);
}


/* ============ پایین ستون گزینه‌ها ============ */

.cfg-nav {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 13px;
    border-top: 1px solid var(--cfg-line);
}

.cfg-counter { font-size: 12px; color: var(--cfg-mute) }

.cfg-nav-btns { display: flex; gap: 8px }

.cfg-prev, .cfg-next {
    padding: 10px 19px;
    border-radius: 999px;
    border: 1px solid var(--cfg-line);
    font: 400 13px "sf", sans-serif;
    cursor: pointer;
    white-space: nowrap;
}

.cfg-prev { background: transparent; color: var(--cfg-mute) }
.cfg-prev:disabled { color: var(--cfg-line); cursor: default }
.cfg-next { background: var(--cfg-card); color: #000 }


/* ============ ستون خلاصه ============ */

.cfg-summary {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 16px 20px;
    background: var(--cfg-card);
}

.cfg-summary-scroll { flex: 1; min-height: 0; overflow-y: auto }

.cfg-preview {
    position: relative;
    height: 190px;
    flex: none;
    border-radius: 16px;
    background: var(--cfg-line);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.cfg-scene { position: relative; width: 68%; height: 62%; margin-bottom: 26px }

.cfg-layer { position: absolute; opacity: .35; transition: background .2s, opacity .2s }
.cfg-layer.is-set { opacity: 1 }

.cfg-layer--leather { top: 0;     right: 6%;  left: 6%;  height: 26%; border-radius: 6px }
.cfg-layer--wood    { top: 26%;   right: 0;   left: 0;   height: 52%; border-radius: 4px }
.cfg-layer--metal   { top: 78%;   right: 10%; left: 10%; height: 22%; border-radius: 3px }

/*
 | ⚠️ عکس ترکیبی — همان جای .cfg-scene، وقتی عکس واقعی هر محور فعال
 | موجود باشد (productConfigLayerImage). هر لایه کل قاب را می‌پوشاند
 | (نه یک نوار تکه‌ای مثل .cfg-layer)، چون عکس‌ها با پس‌زمینه‌ی شفاف
 | و هم‌زاویه/هم‌مقیاس گرفته می‌شوند تا دقیقاً روی هم بنشینند.
 */
.cfg-photo-stack { position: relative; width: 100%; height: 100%; align-self: stretch }

.cfg-photo-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cfg-preview-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(243, 243, 243, .92);
    font-size: 10px;
    color: var(--cfg-mute);
}

/* ⚠️ این متن حذف نشود: مشتری باید بداند عکس واقعی نیست */
.cfg-disclaimer {
    margin: 10px 0 0;
    font-size: 10.5px;
    line-height: 1.8;
    color: var(--cfg-mute);
}

.cfg-chips { display: flex; gap: 7px; margin-top: 9px }

.cfg-chip-btn {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: right;
    font-family: "sf", sans-serif;
}

.cfg-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border-radius: 6px;
    font-size: 11px;
    color: var(--cfg-mute);
    background: var(--cfg-sand);
    border: 1px dashed var(--cfg-mute);
}

.cfg-chip.is-set { border: none }
.cfg-chip.is-custom { border-style: dashed; border-color: var(--cfg-clay) }
.cfg-chip-btn[aria-current="true"] .cfg-chip { box-shadow: 0 2px 0 var(--cfg-green) }

.cfg-chip-label {
    display: block;
    font-size: 10.5px;
    margin-top: 6px;
    color: var(--cfg-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cfg-chip-btn.is-set .cfg-chip-label { color: #000 }

.cfg-code-box {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 14px;
    background: var(--cfg-panel);
}

.cfg-code-label { font-size: 10.5px; color: var(--cfg-mute); margin-bottom: 5px }

.cfg-code {
    direction: ltr;
    text-align: left;
    font: 500 13.5px/1.6 ui-monospace, Menlo, monospace;
    color: #000;
    word-break: break-all;
}

.cfg-code .is-empty  { color: #9a9a9a }
.cfg-code .is-picked { color: #7a8a3c }
.cfg-code .is-custom { color: var(--cfg-clay) }
.cfg-code .is-dot    { color: #9a9a9a }

.cfg-rows {
    margin-top: 12px;
    flex: none;
    display: grid;
    gap: 7px;
    font-size: 11.5px;
}

.cfg-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    line-height: 1.7;
    color: var(--cfg-mute);
}

.cfg-row--discount { color: var(--cfg-clay) }

.cfg-quote {
    margin-top: 12px;
    padding: 12px 13px;
    border-radius: 14px;
    background: var(--cfg-panel);
    border: 1px solid var(--cfg-clay);
}

.cfg-quote-title { font-size: 13px; color: #000; margin-bottom: 5px }
.cfg-quote-text  { margin: 0; font-size: 11.5px; line-height: 1.9; color: var(--cfg-mute) }

.cfg-total {
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--cfg-line);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.cfg-total-old {
    font-size: 12px;
    color: var(--cfg-mute);
    text-decoration: line-through;
}

.cfg-total-new { font: 500 20px/1.3 "sf", sans-serif; color: #000 }

.cfg-shipping { margin-top: 10px }

.cfg-shipping span {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--cfg-sand);
    font-size: 11.5px;
    color: var(--cfg-mute);
}

.cfg-cta {
    width: 100%;
    margin-top: 12px;
    padding: 15px 18px;
    border: 0;
    border-radius: 999px;
    font: 500 15px "sf", sans-serif;
    background: var(--cfg-line);
    color: var(--cfg-mute);
    cursor: default;
}

.cfg-cta.is-ready { background: var(--cfg-green); color: var(--cfg-ink); cursor: pointer }

/* ⚠️ حالت سفارشی رنگ متفاوت دارد تا با «افزودن به سبد خرید» اشتباه نشود */
.cfg-cta.is-quote {
    background: #25d366;      /* سبز واتساپ */
    color: #fff;
    cursor: pointer;
}

.cfg-cta-note {
    margin-top: 7px;
    text-align: center;
    font-size: 11px;
    color: var(--cfg-mute);
}


/* ============ نوار موبایل ============ */

.cfg-mobile-bar { display: none }


/* ============ موبایل ============ */

@media (max-width: 900px) {

    .cfg-scrim { padding: 0 }

    .cfg-panel {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .cfg-head { padding: 16px 18px 12px }
    .cfg-preset { display: none }

    .cfg-steps {
        gap: 7px;
        padding: 0 18px 14px;
        overflow-x: auto;
    }

    .cfg-body {
        display: block;
        overflow-y: auto;
        padding-bottom: 108px;
    }

    .cfg-options {
        padding: 16px 18px 4px;
        border-left: none;
        overflow: visible;
    }

    .cfg-options-scroll { overflow-y: visible }

    .cfg-grid { grid-template-columns: 1fr 1fr; gap: 10px }
    .cfg-swatch { height: 74px }

    /* ستون خلاصه روی موبایل جای نوار پایین را می‌گیرد */
    .cfg-summary { display: none }

    .cfg-mobile-bar {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        display: block;
        background: var(--cfg-panel);
        border-top: 1px solid var(--cfg-line);
        border-radius: 20px 20px 0 0;
        padding: 12px 18px 16px;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .07);
    }

    .cfg-mobile-row { display: flex; align-items: center; gap: 12px }

    .cfg-mobile-info { flex: 1; min-width: 0 }

    .cfg-mobile-code {
        direction: ltr;
        text-align: left;
        font: 500 10.5px ui-monospace, Menlo, monospace;
        color: var(--cfg-mute);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cfg-mobile-price {
        display: flex;
        align-items: baseline;
        gap: 7px;
        margin-top: 3px;
        font: 500 15.5px "sf", sans-serif;
        color: #000;
    }

    .cfg-mobile-price small { font-size: 10.5px; color: var(--cfg-mute); font-weight: 400 }

    .cfg-mobile-bar .cfg-cta {
        width: auto;
        flex: none;
        margin-top: 0;
        padding: 13px 20px;
        font-size: 14px;
    }
}


/* ============================================================
   مودال ساده‌ی سفارش اختصاصی (custom-order.js)
   ============================================================
   ⚠️ عمداً روی همان .cfg-scrim/.cfg-panel/.cfg-head/.cfg-title/
   .cfg-close کانفیگوریتور سوار می‌شود — همان ظاهر (رنگ، فونت،
   انیمیشن) را به ارث می‌برد. فقط بدنه (.co-*) مال خودش است، چون
   محتوایش یک فرم ساده است نه محور/سواچ/قیمت.
   ============================================================ */

.co-panel {
    width: min(460px, 94vw);
    height: auto;
    max-height: 90vh;
}

.co-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 24px 24px;
    overflow-y: auto;
}

.co-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: var(--cfg-mute);
}

.co-field { display: flex; flex-direction: column; gap: 6px }

.co-field label {
    font-size: 12.5px;
    color: #000;
}

.co-field input,
.co-field textarea {
    border: 1px solid var(--cfg-line);
    border-radius: 12px;
    background: var(--cfg-card);
    padding: 11px 13px;
    font: 400 13px/1.7 "sf", sans-serif;
    color: #000;
    outline: none;
}

.co-field textarea { resize: vertical; min-height: 78px }

.co-field input:focus,
.co-field textarea:focus { border-color: var(--cfg-mute) }

.co-error {
    font-size: 12px;
    color: #b3392f;
}

.co-submit {
    margin-top: 4px;
    padding: 14px;
    border: none;
    border-radius: 999px;
    background: var(--cfg-green);
    color: var(--cfg-ink);
    font: 500 14px "sf", sans-serif;
    cursor: pointer;
}

.co-submit:hover { filter: brightness(.97) }

@media (max-width: 900px) {
    .co-panel { width: 100%; height: 100%; border-radius: 0; max-height: none }
    .co-body { padding: 0 18px 24px }
}