/* ==================================================================
   استایل جدول اندازه‌گیری (نسخه ۳.۰)
   نکته مهم: ظاهر خود جدول (رنگ‌بندی پیش‌فرض، فونت، ساختار) دست‌نخورده باقی مانده
   تا با محصولاتی که قبلاً این جدول در توضیحات‌شان درج شده، هماهنگ بماند.
   رنگ هدر آکاردئونی (دکمه «نمایش جدول») از طریق CSS در runtime
   (با wp_add_inline_style) override می‌شود، طبق رنگ‌های انتخابی در پنل تنظیمات.
   ================================================================== */

.wc-size-table-wrapper {
    margin: 20px 0;
    font-family: inherit;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    direction: rtl;
}

/* هدر زیبا و جذاب (دکمه نمایش/مخفی‌کردن جدول) */
.wc-size-table-header {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: #fff;
    padding: 18px 25px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease-in-out;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.wc-size-table-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transform: skewX(-25deg);
    transition: left 0.5s;
    z-index: 0;
}

.wc-size-table-header:hover::after {
    left: 100%;
}

.wc-size-table-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.wc-size-table-header .arrow {
    font-size: 16px;
    transition: transform 0.3s ease;
    z-index: 1;
}

.wc-size-table-header.active .arrow {
    transform: rotate(180deg);
}

/* محتوای جدول بازشو */
.wc-size-table-content {
    display: none;
    padding: 25px 25px 20px;
    background: #fff;
    animation: slideDown 0.4s ease-out;
}

.wc-size-table-content.show {
    display: block;
}

/* جدول اصلی — بدون تغییر ساختاری */
.wc-size-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.wc-size-table th,
.wc-size-table td {
    padding: 14px 18px;
    text-align: right;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.3s ease;
}

.wc-size-table th {
    background: linear-gradient(135deg, #f1f3f5 0%, #dee2e6 100%);
    font-weight: bold;
    color: #343a40;
    font-size: 15px;
}

.wc-size-table td:first-child {
    font-weight: 600;
    color: #495057;
}

.wc-size-table td:last-child {
    color: #007cba;
    font-weight: bold;
}

.wc-size-table tr:hover {
    background: #f1f9ff;
}

/* استایل خاص برای جدول سایزبندی چندگانه */
.wc-size-table.multi-size th:first-child {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.wc-size-table.multi-size td:first-child {
    background: #e8f5e8;
    font-weight: bold;
    color: #155724;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 600px;
    }
}

/* ==================================================================
   ریسپانسیو‌سازی جدول سایزبندی چند‌ستونه (ویژگی جدید)
   جدول داخل یک کانتینر قابل‌اسکرول افقی قرار می‌گیرد تا در موبایل از کادر
   خارج نشود؛ ستون «سایز» (اولین ستون، سمت راست در RTL) ثابت (sticky)
   باقی می‌ماند تا کاربر همیشه بداند هر سطر مربوط به کدام سایز است.
   ================================================================== */
.wcst-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0 0 8px 8px;
    position: relative;
    scrollbar-width: thin;
}

.wcst-table-scroll::-webkit-scrollbar {
    height: 6px;
}

.wcst-table-scroll::-webkit-scrollbar-thumb {
    background: #c7c7c7;
    border-radius: 4px;
}

.wcst-table-scroll .wc-size-table.multi-size {
    min-width: 100%;
}

/* وقتی تعداد ستون‌ها زیاد است این کلاس فعال است تا یک سایه‌ی نشانگر اسکرول نمایش بدهد */
.wcst-table-scroll.wcst-scroll-hint {
    box-shadow: inset -18px 0 12px -12px rgba(0, 0, 0, 0.12);
}

.wcst-table-scroll .wc-size-table.multi-size th,
.wcst-table-scroll .wc-size-table.multi-size td {
    white-space: nowrap;
}

/* ستون سایز (اولین ستون) چسبیده به سمت راست باقی می‌ماند هنگام اسکرول */
.wcst-table-scroll .wc-size-table.multi-size th:first-child,
.wcst-table-scroll .wc-size-table.multi-size td:first-child {
    position: sticky;
    right: 0;
    z-index: 2;
    box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.08);
}

/* ==================================================================
   دکمه «سایز من می‌شه؟»
   نکته: رنگ پس‌زمینه (گرادیان) و رنگ متن این دکمه عمداً اینجا تعریف نشده‌اند؛
   این دو مقدار همیشه از طریق wp_add_inline_style و طبق تنظیمات پنل ادمین تزریق می‌شوند
   تا هیچ‌وقت با این فایل استاتیک تعارض specificity پیدا نکنند.
   ================================================================== */
.wcst-advisor-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 10px 0 0;
    padding: 13px 20px;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    direction: rtl;
}

.wcst-advisor-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.wcst-advisor-btn:active {
    transform: translateY(0);
}

.wcst-advisor-icon {
    font-size: 18px;
    line-height: 1;
}

/* ==================================================================
   مودال «سایز من می‌شه؟»
   ================================================================== */
.wcst-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 30, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.wcst-modal-overlay.wcst-open {
    opacity: 1;
    visibility: visible;
}

body.wcst-modal-locked {
    overflow: hidden;
}

.wcst-modal-box {
    background: #fff;
    width: 100%;
    max-width: 420px;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    direction: rtl;
    font-family: inherit;
    transform: translateY(28px) scale(0.92);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

.wcst-modal-overlay.wcst-open .wcst-modal-box {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.wcst-modal-header {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: #fff;
    padding: 16px 20px;
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 1;
}

.wcst-modal-close {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wcst-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.wcst-modal-body {
    padding: 20px;
}

.wcst-modal-intro {
    margin: 0 0 16px;
    font-size: 14px;
    color: #495057;
    line-height: 1.9;
}

.wcst-advisor-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

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

.wcst-field-row label {
    font-size: 13px;
    font-weight: 600;
    color: #343a40;
}

.wcst-field-row input {
    padding: 11px 14px;
    border: 1px solid #dcdfe3;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    direction: rtl;
    text-align: right;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wcst-field-row input:focus {
    outline: none;
    border-color: #6a11cb;
    box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.12);
}

.wcst-submit-btn {
    margin-top: 4px;
    padding: 13px;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.wcst-submit-btn:hover {
    opacity: 0.92;
}

/* وضعیت بارگذاری */
.wcst-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 30px 10px;
    color: #495057;
    font-size: 14px;
}

.wcst-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #e1e1e8;
    border-top-color: #6a11cb;
    border-radius: 50%;
    animation: wcst-spin 0.8s linear infinite;
}

@keyframes wcst-spin {
    to { transform: rotate(360deg); }
}

/* خطا */
.wcst-error-box {
    text-align: center;
    padding: 10px 0;
}

.wcst-error-box p {
    color: #842029;
    background: #f8d7da;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin: 0 0 14px;
    line-height: 1.8;
}

/* نتیجه */
.wcst-result-box {
    text-align: center;
    padding: 20px 14px;
    border-radius: 12px;
    margin-bottom: 14px;
}

.wcst-fit-icon {
    font-size: 34px;
    margin-bottom: 8px;
}

.wcst-recommended-size {
    font-size: 16px;
    margin-bottom: 8px;
    color: #212529;
}

.wcst-fit-message {
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    color: #343a40;
}

.wcst-result-box.wcst-fit-ok {
    background: #d1f5e0;
}

.wcst-result-box.wcst-fit-warn {
    background: #fff3cd;
}

.wcst-result-box.wcst-fit-bad {
    background: #fde2e1;
}

.wcst-result-box.wcst-fit-unknown {
    background: #eef1f5;
}

/* ==================================================================
   موبایل
   ================================================================== */
@media (max-width: 768px) {
    .wc-size-table-header {
        font-size: 15px;
        padding: 14px 18px;
    }

    .wc-size-table-content {
        padding: 16px 14px;
    }

    .wc-size-table th,
    .wc-size-table td {
        padding: 10px 12px;
        font-size: 13.5px;
    }

    .wc-size-table-header .arrow {
        font-size: 14px;
    }

    .wcst-advisor-btn {
        font-size: 14px;
        padding: 12px 16px;
    }

    .wcst-modal-box {
        max-width: 100%;
        border-radius: 14px;
    }
}