/* مسیر: vira-product-elements/assets/css/vira-elements.css */

/* 
 * استایل‌های پایه برای برند Vira
 * رنگ اصلی: #ff5a00
 */
.vira-product-gallery-wrapper,
.vira-add-to-cart-wrapper,
.vira-product-attributes-wrapper {
    margin-bottom: 20px;
}

/* 
 * اصلاح ساختار کانتینر سبد خرید برای فول‌عرض شدن دکمه و قرارگیری در یک خط 
 */
.vira-add-to-cart-wrapper {
    display: flex !important;
    align-items: stretch !important; /* هم‌ارتفاع شدن المان‌ها */
    gap: 15px; /* فاصله بین دکمه خرید و انتخابگر تعداد */
    flex-wrap: nowrap !important; /* جلوگیری قطعی از شکستن به خط بعد */
    width: 100% !important;
}

/* اعمال فلکس به فرم ووکامرس داخل کانتینر برای اطمینان از قرارگیری در یک خط */
.vira-add-to-cart-wrapper form.cart {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 15px !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
}

/* استایل دکمه سبد خرید ووکامرس (فول‌عرض و ایزوله شده از قالب) */
.vira-add-to-cart-wrapper button.button.alt {
    background-color: var(--vira-btn-color, #ff5a00) !important; /* استفاده از متغیر برای رنگ داینامیک */
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    flex: 1 !important; /* این ویژگی باعث می‌شود دکمه تمام فضای باقیمانده کانتینر را بگیرد */
    height: 48px !important; /* تنظیم ارتفاع ثابت برای همگام‌سازی با باکس تعداد */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 20px !important;
    font-family: 'iranyekan', 'iransans', sans-serif !important;
    font-weight: bold !important;
    font-size: 16px !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.vira-add-to-cart-wrapper button.button.alt:hover {
    filter: brightness(0.9) !important; /* تاریک‌تر شدن هوشمند رنگ برای هاور، بدون نیاز به تعیین کد رنگ ثابت */
}

/* ==================================================
   استایل‌های گالری محصول
   ================================================== */
.vira-product-gallery-wrapper .vira-main-image {
    margin-bottom: 15px;
    border: 1px solid #efefef;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff; /* برای تصاویر شفاف */
}

.vira-product-gallery-wrapper .vira-main-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.vira-product-gallery-wrapper .vira-gallery-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 ستون برای تصاویر کوچک */
    gap: 10px;
}

.vira-product-gallery-wrapper .vira-thumbnail {
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.vira-product-gallery-wrapper .vira-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* افکت هاور با رنگ برند */
.vira-product-gallery-wrapper .vira-thumbnail:hover {
    border-color: #ff5a00;
    transform: translateY(-2px);
}

/* ==================================================
   استایل‌های انتخابگر تعداد (مثبت و منفی) - جون‌دارتر شده
   ================================================== */
.vira-add-to-cart-wrapper .quantity {
    display: inline-flex !important;
    align-items: stretch !important; /* کشیده شدن دکمه‌ها برای پر کردن ارتفاع */
    border: 1px solid #e0e0e0 !important; /* حاشیه کمی واضح‌تر */
    border-radius: 4px;
    overflow: hidden;
    margin: 0 !important;
    height: 48px !important; /* هم‌ارتفاع با دکمه سبد خرید */
    background: #fff !important;
}

.vira-add-to-cart-wrapper .quantity input.qty {
    width: 50px !important; /* عریض‌تر شدن فیلد */
    height: 100% !important;
    border: none !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 16px !important; /* عدد بزرگ‌تر */
    color: #333 !important;
    background-color: transparent !important;
    -moz-appearance: textfield;
    padding: 0 !important;
    margin: 0 !important;
}

/* مخفی کردن فلش‌های پیش‌فرض مرورگر برای input number */
.vira-add-to-cart-wrapper .quantity input.qty::-webkit-outer-spin-button,
.vira-add-to-cart-wrapper .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.vira-add-to-cart-wrapper .vira-qty-btn {
    width: 42px !important; /* دکمه عریض‌تر و جون‌دارتر */
    height: 100% !important;
    background-color: #f0f0f0 !important; /* رنگ توپرتر و کمی تیره‌تر از قبل */
    border: none !important;
    color: #333 !important; /* جلوگیری قطعی از ارث‌بری */
    font-size: 20px !important; /* علامت + و - بزرگ‌تر */
    font-weight: bold !important;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
}

.vira-add-to-cart-wrapper .vira-qty-btn:hover {
    background-color: var(--vira-btn-color, #ff5a00) !important;
    color: #ffffff !important;
}

/* ==================================================
   استایل‌های مشخصات فنی (ویژگی‌های محصول)
   ================================================== */
.vira-product-attributes-wrapper table.woocommerce-product-attributes {
    width: 100%;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0;
    background: transparent !important;
}

/* تبدیل ساختار جدول به گرید کارتی برای دسکتاپ و تبلت */
.vira-product-attributes-wrapper table.woocommerce-product-attributes tbody {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr); /* دو ستونه در دسکتاپ */
    gap: 15px;
    width: 100%;
}

/* استفاده از Flexbox برای کنار هم قرار دادن عنوان و مقدار در یک خط */
.vira-product-attributes-wrapper table.woocommerce-product-attributes tr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    background-color: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    padding: 12px 16px;
    transition: all 0.3s ease;
    margin: 0 !important;
}

.vira-product-attributes-wrapper table.woocommerce-product-attributes tr:hover {
    box-shadow: 0 4px 12px rgba(255, 90, 0, 0.08); /* هاله ملایم رنگ برند در هاور */
    border-color: #ffe0cc !important;
    transform: translateY(-2px);
}

.vira-product-attributes-wrapper table.woocommerce-product-attributes th {
    display: inline-block !important;
    width: auto !important;
    background-color: transparent !important;
    border: none !important; /* حذف خط چین قبلی */
    padding: 0 !important;
    margin: 0 !important;
    color: #000000 !important; /* تغییر به مشکی برای خوانایی بیشتر */
    font-size: 14px;
    font-weight: bold !important; /* بولد شدن عنوان */
    text-align: right;
    font-family: 'iranyekan', 'iransans', sans-serif !important; /* اولویت با ایران‌یکان برای اعداد */
}

/* اضافه کردن یک نشانگر شیک کنار عنوان‌ها */
.vira-product-attributes-wrapper table.woocommerce-product-attributes th::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #ff5a00;
    border-radius: 50%;
    margin-left: 8px;
    vertical-align: middle;
}

.vira-product-attributes-wrapper table.woocommerce-product-attributes td {
    display: inline-block !important;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
    color: #000000 !important; /* تغییر به مشکی برای خوانایی بیشتر */
    font-size: 14px;
    font-weight: 500;
    text-align: left !important;
    background: transparent !important;
    font-family: 'iranyekan', 'iransans', sans-serif !important; /* اولویت با ایران‌یکان برای اعداد */
}

.vira-product-attributes-wrapper table.woocommerce-product-attributes td p {
    margin: 0;
    padding: 0;
}

/* حالت موبایل - تک ستونه (ویژگی‌ها همچنان در یک خط روبروی هم می‌مانند) */
@media (max-width: 768px) {
    .vira-product-attributes-wrapper table.woocommerce-product-attributes tbody {
        grid-template-columns: 1fr; /* یک ستونه در موبایل */
        gap: 10px;
    }
}

/* اضافه شده برای غلبه بر display: flex !important جهت مخفی‌سازی */
.vira-product-attributes-wrapper table.woocommerce-product-attributes tr.vira-attr-hidden {
    display: none !important;
}

/* ==================================================
   استایل‌های دکمه نمایش بیشتر / کمتر (جدید)
   ================================================== */
.vira-attr-toggle-wrap {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    position: relative;
}

/* خط تزئینی پشت دکمه */
.vira-attr-toggle-wrap::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #efefef;
    z-index: 1;
}

.vira-attr-toggle-btn {
    background: #ffffff !important; /* جلوگیری از ارث‌بری رنگ پس‌زمینه از قالب */
    border: 1px solid #ff5a00 !important; /* جلوگیری از ارث‌بری حاشیه */
    color: #ff5a00 !important; /* جلوگیری از ارث‌بری رنگ متن */
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'iranyekan', 'iransans', sans-serif !important; /* اعمال فونت */
}

/* اعمال !important در استیت‌های هاور، فوکوس و اکتیو برای خنثی کردن کلاس‌های قالب */
.vira-attr-toggle-btn:hover,
.vira-attr-toggle-btn:focus,
.vira-attr-toggle-btn:active {
    background: #ff5a00 !important;
    color: #ffffff !important;
    border-color: #ff5a00 !important;
    outline: none !important;
    box-shadow: none !important;
}

.vira-attr-toggle-btn span.dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}