/**
 * Shayan Mobile Pro — رنگ‌بندی به سبک یوبایل (سواچ‌های رنگی صفحهٔ محصول)
 * استایل فرم نسخه‌های متغیر + دایره‌های رنگی + قیمت لحظه‌ای هر رنگ.
 */

/* ------------------------- فرم نسخه‌های متغیر ---------------------------- */

.smp-woo-page table.variations {
        border: 0;
        margin: 0 0 4px;
        width: 100%;
}

.smp-woo-page table.variations tbody tr {
        background: transparent;
}

.smp-woo-page table.variations th,
.smp-woo-page table.variations td {
        border: 0;
        background: transparent;
        padding: 10px 0;
        vertical-align: middle;
}

.smp-woo-page table.variations td.label {
        padding-inline-end: 14px;
        white-space: nowrap;
        width: 1%;
}

.smp-woo-page table.variations td.label label {
        font-weight: 700;
        font-size: 14px;
        color: var(--smp-text);
        margin: 0;
}

.smp-woo-page table.variations td.value {
        width: 100%;
}

/* ------------------------------ سواچ‌ها --------------------------------- */

.smp-swatches-wrap {
        width: 100%;
}

/* سِلِکت اصلی پنهان می‌ماند ولی در DOM هست تا ووکامرس کار کند */
.smp-swatches-wrap select {
        display: none !important;
}

.smp-swatches {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 4px 0 2px;
}

.smp-swatch {
        appearance: none;
        -webkit-appearance: none;
        position: relative;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
        border: 2px solid var(--smp-border-strong);
        box-shadow: inset 0 2px 6px rgba(2, 6, 23, 0.18), inset 0 0 0 1px rgba(2, 6, 23, 0.08);
        cursor: pointer;
        transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
        overflow: hidden;
        flex: 0 0 auto;
        -webkit-tap-highlight-color: transparent;
}

.smp-swatch:hover {
        transform: translateY(-2px);
}

/* حلقهٔ انتخاب به سبک یوبایل */
.smp-swatch.is-active {
        box-shadow:
                0 0 0 3px var(--smp-bg),
                0 0 0 5px var(--smp-primary),
                inset 0 2px 6px rgba(2, 6, 23, 0.18);
}

/* تیکِ انتخاب */
.smp-swatch.is-active::after {
        content: '';
        position: absolute;
        inset: 0;
        margin: auto;
        width: 16px;
        height: 9px;
        border-left: 2.5px solid #fff;
        border-bottom: 2.5px solid #fff;
        transform: rotate(-45deg) translate(0, -1px);
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}

/* رنگ‌های روشن: تیک مشکی خواناتر است */
.smp-swatch.is-active.smp-swatch--light::after {
        border-color: rgba(15, 23, 42, .8);
        filter: none;
}

/* سواچ متنی (رنگ ناشناخته) — قرص نام‌دار */
.smp-swatch--text {
        width: auto;
        min-width: 44px;
        height: 40px;
        border-radius: 999px;
        padding: 0 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--smp-surface-strong);
        -webkit-backdrop-filter: var(--smp-blur);
        backdrop-filter: var(--smp-blur);
        box-shadow: var(--smp-shadow-sm);
        border: 1.5px solid var(--smp-border);
        font-family: var(--smp-font);
        font-size: 13.5px;
        font-weight: 600;
        color: var(--smp-text);
        overflow: visible;
}

.smp-swatch--text span {
        line-height: 1;
        white-space: nowrap;
}

.smp-swatch--text.is-active {
        border-color: var(--smp-primary);
        box-shadow: 0 0 0 3px var(--smp-primary-soft), var(--smp-shadow-sm);
        color: var(--smp-primary);
}

.smp-swatch--text.is-active::after {
        display: none;
}

/* ترکیب ناموجود */
.smp-swatch.is-disabled {
        opacity: .38;
        cursor: not-allowed;
        -webkit-filter: grayscale(.65);
        filter: grayscale(.65);
        transform: none !important;
}

.smp-swatch.is-disabled::before {
        content: '';
        position: absolute;
        inset: -6px;
        margin: auto;
        width: 130%;
        height: 2px;
        background: var(--smp-danger);
        transform: rotate(-38deg);
        border-radius: 2px;
        opacity: .75;
}

/* لینک «پاک‌کردن» ووکامرس */
.smp-woo-page .reset_variations {
        display: inline-block;
        margin-inline-start: 6px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--smp-danger);
        text-decoration: none;
        vertical-align: middle;
        opacity: .85;
}

.smp-woo-page .reset_variations:hover {
        opacity: 1;
}

/* ---------------------- قیمت و موجودیِ هر نسخه --------------------------- */

.smp-woo-page .woocommerce-variation {
        margin-bottom: 6px;
}

.smp-woo-page .woocommerce-variation-price {
        margin: 10px 0 4px;
}

.smp-woo-page .woocommerce-variation-price .price {
        font-size: 22px;
        font-weight: 800;
        color: var(--smp-text);
        display: inline-block;
}

.smp-woo-page .woocommerce-variation-price .price del {
        font-size: 15px;
        font-weight: 500;
        color: var(--smp-muted);
        opacity: .8;
}

.smp-woo-page .woocommerce-variation-price .price ins {
        text-decoration: none;
}

.smp-woo-page .woocommerce-variation-availability .stock {
        display: inline-block;
        margin: 2px 0 8px;
        font-size: 13px;
        font-weight: 600;
}

.smp-woo-page .woocommerce-variation-availability .stock.in-stock {
        color: var(--smp-success);
}

.smp-woo-page .woocommerce-variation-availability .stock.out-of-stock {
        color: var(--smp-danger);
}

/* ------------------------------ تاریک ----------------------------------- */

html[data-theme='dark'] .smp-swatch {
        border-color: rgba(148, 163, 184, .28);
        box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45);
}

html[data-theme='dark'] .smp-swatch.is-active {
        box-shadow:
                0 0 0 3px var(--smp-bg),
                0 0 0 5px var(--smp-primary),
                inset 0 2px 6px rgba(0, 0, 0, .45);
}

html[data-theme='dark'] .smp-swatch--text {
        background: var(--smp-surface-strong);
        color: var(--smp-text);
}

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

@media (max-width: 600px) {
        /* برچسب بالای سواچ‌ها (چیدمان یوبایل) */
        .smp-woo-page table.variations,
        .smp-woo-page table.variations tbody,
        .smp-woo-page table.variations tbody tr {
                display: block;
                width: 100%;
        }

        .smp-woo-page table.variations tbody td {
                display: block;
                width: 100%;
                padding: 6px 0;
        }

        .smp-woo-page table.variations tbody td.label {
                width: 100%;
                white-space: normal;
                padding-inline-end: 0;
        }

        .smp-swatches {
                gap: 11px;
        }

        .smp-swatch,
        .smp-swatch--text {
                width: 38px;
                height: 38px;
        }

        .smp-swatch--text {
                width: auto;
                padding: 0 16px;
        }

        .smp-woo-page .woocommerce-variation-price .price {
                font-size: 20px;
        }
}