/*
Theme Name: Porto
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive Wordpress Multi Purpose + eCommerce Theme.
Version: 7.9.2
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: woocommerce, business, corporate, e-commerce, blog, news, education, food-and-drink, portfolio, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, block-styles, custom-background, custom-colors, custom-header, custom-logo, footer-widgets, template-editing, grid-layout, one-column, wide-blocks
Text Domain: porto
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/
.bypostauthor { display: block; }
/* ظرف کلی دسته‌بندی */
.category-buttons {
    display: flex;
    gap: 10px;
    padding: 10px;
    overflow-x: auto;       /* اسکرول در موبایل */
    white-space: nowrap;
    justify-content: flex-start;
    box-sizing: border-box;
    max-width: 100%;
}

/* هر آیتم دسته‌بندی (شامل تصویر و دکمه) */
.category-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 160px;
    box-sizing: border-box;
}

/* استایل تصویر در حالت موبایل */
.category-item img {
    width: 160px;
    height: 120px;
    object-fit: cover;
    margin-bottom: 5px;
    max-width: 100%;
}

/* استایل دکمه دسته‌بندی */
.category-btn {
    display: inline-block;
    width: 160px;
    padding: 10px;
    background: white;
    border: 2px solid black;
    border-radius: 5px;
    text-decoration: none;
    color: black;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
}

/* هاور دکمه */
.category-btn:hover {
    background-color: black;
    color: white;
}

/* تنظیمات برای دسکتاپ */
@media (min-width: 768px) {
    .category-buttons {
        justify-content: center;    /* وسط‌چین */
        overflow-x: hidden;         /* حذف اسکرول */
        white-space: nowrap;        /* موندن در یک خط */
        flex-wrap: nowrap;          /* نره خط بعد */
    }

    .category-item {
        min-width: 250px;
        flex: 1 1 auto;             /* اندازه تطبیقی برای فیت شدن در عرض */
    }

    .category-item img {
        width: 100%;
        height: auto;
        max-width: 250px;
        aspect-ratio: 3 / 2;
    }

    .category-btn {
        width: 100%;
        max-width: 250px;
    }
}


.collapsible-container {
  position: relative;
  background-color: #f9f9f9;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: inherit; /* فونت پیش‌فرض سیستم */
}

.collapsible-text {
  max-height: 80px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked ~ .collapsible-text {
  max-height: 500px;
}

label {
  display: block; /* پایین متن قرار بگیره */
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold; /* پررنگ کردن متن */
  color: #000000; /* مشکی */
  margin-top: 10px;
}

label::after {
  content: '\25BC'; /* فلش به سمت پایین */
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.3s;
}

input[type="checkbox"]:checked + label::after {
  transform: rotate(180deg); /* چرخش فلش هنگام باز شدن */
}
/* بخش اول: استایل‌های مشترک (اندازه، فونت، گوشه‌های گرد و...) */
.single_add_to_cart_button,
.view-cart-btn {
  border-radius: 15px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  min-height: 57px;
  outline: none;
  padding: 16px 24px;
  text-align: center;
  text-decoration: none;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  width: auto;
  will-change: transform;
}

/* بخش دوم: استایل دکمه اصلی (افزودن به سبد خرید) */
.single_add_to_cart_button {
  background-color: #87b28e; /* پس‌زمینه سبز اصلی */
  color: #454545; /* متن تیره */
  border: 2px solid #87b28e;
}

.single_add_to_cart_button:hover {
  background-color: #826092; /* هاور بنفش */
  color: #ffffff;
  border-color: #826092;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

/* بخش سوم: استایل دکمه فرعی (مشاهده سبد خرید) - استایل روح */
.view-cart-btn {
  background-color: transparent; /* پس‌زمینه شفاف */
  color: #454545; /* متن تیره */
  border: 2px solid #454545; /* حاشیه تیره */
}

.view-cart-btn:hover {
  background-color: #454545; /* پس‌زمینه در حالت هاور تیره می‌شود */
  color: #ffffff; /* متن سفید می‌شود */
  border-color: #454545;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

/* بخش چهارم: استایل مشترک در لحظه کلیک */
.single_add_to_cart_button:active,
.view-cart-btn:active {
  box-shadow: none;
  transform: translateY(0);
}
/* اصلاح چیدمان فرم افزودن به سبد خرید در صفحه محصول */
.woocommerce div.product form.cart {
  display: flex; /* آیتم‌ها را در یک ردیف قرار می‌دهد */
  align-items: center; /* آیتم‌ها را به صورت عمودی وسط‌چین می‌کند */
  flex-wrap: wrap; /* اجازه می‌دهد در صفحه‌های خیلی کوچک به سطر بعدی بروند */
  gap: 15px; /* یک فاصله ۱۵ پیکسلی بین فیلد تعداد و دکمه ایجاد می‌کند */
}
/* استایل جدید و توپر برای دکمه صفحه بعدی */
a.next.page-numbers {
  background-color: #87b28e !important; /* پس‌زمینه سبز */
  color: #454545 !important; /* متن خاکستری تیره */
  border: 2px solid #87b28e !important; /* حاشیه همرنگ */
  border-radius: 15px !important;
  padding: 12px 28px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

/* حالت هاور */
a.next.page-numbers:hover {
  background-color: #826092 !important; /* پس‌زمینه بنفش می‌شود */
  color: #ffffff !important; /* متن سفید می‌شود */
  border-color: #826092 !important;
}
.bypostauthor { display: block; }