/* public/css/style.css */

/* فونت وزیرمتن به صورت سراسری در هدر با تگ <style> و Tailwind config اعمال شده است. */

/* استایل‌های پایه برای اسلایدر Swiper */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1.2rem !important; /* Adjust size as needed */
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: #ccc; /* Default bullet color */
    opacity: 0.7;
    transition: background-color 0.3s, opacity 0.3s;
}

.swiper-pagination-bullet-active {
    background-color: theme('colors.primary.DEFAULT'); /* Active bullet color from Tailwind config */
    opacity: 1;
}

/* برای انیمیشن‌های ظریف (مثال) */
.animate-slide-up {
    opacity: 0;
    transform: translateY(20px);
    animation: slideUpAnimation 0.6s ease-out forwards;
}

.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-600 { animation-delay: 0.6s; }


@keyframes slideUpAnimation {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* استایل برای هایلایت کردن لینک فعال منو (اگر کلاس nav-link-active در Tailwind تعریف نشده باشد) */
/* .nav-link-active {
    color: #3b82f6; // theme('colors.primary.DEFAULT')
    font-weight: 600;
    border-bottom: 2px solid #3b82f6;
} */

/* استایل برای کارت محصول (اگر نیاز به استایل‌های پیچیده‌تر از Tailwind دارید) */
.product-card-hover-shadow {
    transition: box-shadow 0.3s ease-in-out;
}
.product-card-hover-shadow:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* استایل برای نمایش بهتر دراپ‌دان منو در حالت هاور */
.dropdown .dropdown-menu {
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

/* برای اطمینان از اینکه منوی موبایل روی محتوا قرار می‌گیرد */
#mobileMenu {
    /* background-color: white; */ /* Tailwind already sets this */
}
/* ==========================================================================
   Vendor Panel Custom Stylesheet
   ========================================================================== */

/* 1. متغیرهای CSS برای تم‌بندی آسان */
:root {
    --vp-primary-color: #4a69bd;
    --vp-success-color: #28a745;
    --vp-danger-color: #dc3545;
    --vp-warning-color: #ffc107;
    --vp-info-color: #17a2b8;
    --vp-secondary-color: #6c757d;

    --vp-bg-color: #f8f9fa;
    --vp-card-bg: #ffffff;
    --vp-text-color: #495057;
    --vp-heading-color: #212529;
    --vp-border-color: #dee2e6;
    --vp-font-family: 'Vazirmatn', sans-serif;
    
    --vp-border-radius: 0.375rem;
    --vp-box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
}

/* 2. استایل‌های عمومی */
.vp-container {
    font-family: var(--vp-font-family);
    direction: rtl;
    width: 100%;
    padding: 1.5rem;
    margin: 0 auto;
}
.vp-container h1, .vp-container h2, .vp-container h3 {
    color: var(--vp-heading-color);
}
.vp-container a {
    text-decoration: none;
}

/* 3. ساختار و لایه‌بندی */
.vp-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.vp-grid {
    display: grid;
    gap: 1.5rem;
}
.vp-grid-2-col {
    grid-template-columns: 1fr;
}
@media (min-width: 992px) {
    .vp-grid-2-col {
        grid-template-columns: 2fr 1fr;
    }
}

/* 4. کامپوننت کارت (Card) */
.vp-card {
    background-color: var(--vp-card-bg);
    border: 1px solid var(--vp-border-color);
    border-radius: var(--vp-border-radius);
    box-shadow: var(--vp-box-shadow);
    margin-bottom: 1.5rem;
}
.vp-card-header {
    padding: 1rem 1.25rem;
    background-color: #fcfcfc;
    border-bottom: 1px solid var(--vp-border-color);
    font-weight: 600;
    color: var(--vp-primary-color);
}
.vp-card-body {
    padding: 1.25rem;
}

/* 5. دکمه‌ها (Button) */
.vp-btn {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border-radius: var(--vp-border-radius);
    transition: all 0.2s ease-in-out;
}
.vp-btn-primary { color: #fff; background-color: var(--vp-primary-color); }
.vp-btn-primary:hover { background-color: #3b569a; }
.vp-btn-secondary { color: #fff; background-color: var(--vp-secondary-color); }
.vp-btn-secondary:hover { background-color: #5a6268; }
.vp-btn-success { color: #fff; background-color: var(--vp-success-color); }
.vp-btn-success:hover { background-color: #218838; }
.vp-btn-danger { color: #fff; background-color: var(--vp-danger-color); }
.vp-btn-danger:hover { background-color: #c82333; }
.vp-btn-warning { color: #212529; background-color: var(--vp-warning-color); }
.vp-btn-warning:hover { background-color: #e0a800; }
.vp-btn-info { color: #fff; background-color: var(--vp-info-color); }
.vp-btn-info:hover { background-color: #138496; }

/* 6. فرم‌ها (Form) */
.vp-form-group { margin-bottom: 1.25rem; }
.vp-form-label { display: block; margin-bottom: 0.5rem; font-weight: 600; }
.vp-form-control, .vp-form-select {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--vp-border-color);
    border-radius: var(--vp-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.vp-form-control:focus, .vp-form-select:focus {
    border-color: var(--vp-primary-color);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(74, 105, 189, 0.25);
}
.vp-form-text { font-size: 0.875em; color: var(--vp-secondary-color); }
.vp-form-check { display: flex; align-items: center; gap: 0.5rem; }

/* 7. جدول (Table) */
.vp-table-responsive { width: 100%; overflow-x: auto; }
.vp-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--vp-text-color);
    font-size: 0.9em;
}
.vp-table th, .vp-table td {
    padding: 0.9rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--vp-border-color);
    text-align: right;
}
.vp-table thead th {
    background-color: #f3f6f9;
    font-weight: 600;
}
.vp-table tbody tr:hover { background-color: #f8f9fa; }
.vp-table .vp-table-actions { white-space: nowrap; }

/* 8. نشان (Badge) */
.vp-badge {
    display: inline-block;
    padding: 0.4em 0.65em;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border-radius: var(--vp-border-radius);
    color: #fff;
}
.bg-success { background-color: var(--vp-success-color); }
.bg-warning { background-color: var(--vp-warning-color); color: #212529;}
.bg-danger { background-color: var(--vp-danger-color); }
.bg-info { background-color: var(--vp-info-color); }
.bg-secondary { background-color: var(--vp-secondary-color); }

/* 9. پیغام (Alert) */
.vp-alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--vp-border-radius);
}
.vp-alert-info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }
.vp-alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }

/* 10. آکاردئون (برای مدیریت تنوع‌ها) */
.vp-accordion .vp-accordion-item {
    border: 1px solid var(--vp-border-color);
    border-bottom: none;
}
.vp-accordion .vp-accordion-item:first-of-type { border-top-left-radius: var(--vp-border-radius); border-top-right-radius: var(--vp-border-radius); }
.vp-accordion .vp-accordion-item:last-of-type { border-bottom: 1px solid var(--vp-border-color); border-bottom-right-radius: var(--vp-border-radius); border-bottom-left-radius: var(--vp-border-radius); }
.vp-accordion-header { margin: 0; }
.vp-accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    color: var(--vp-heading-color);
    text-align: right;
    background-color: #f7f7f7;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: all 0.2s;
}
.vp-accordion-button:not(.collapsed) { color: var(--vp-primary-color); background-color: #eef2ff; }
.vp-accordion-button:hover { z-index: 2; }
.vp-accordion-button:focus { z-index: 3; border-color: var(--vp-primary-color); outline: 0; box-shadow: 0 0 0 .25rem rgba(74, 105, 189, 0.25); }
.vp-accordion-body { padding: 1.25rem; }
/* =================================================================
    تعریف فونت وزیرمتن (Vazirmatn) برای استفاده در سایت
   ================================================================= */

/* وزن معمولی (Regular) */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; /* یا normal */
  font-style: normal;
  font-display: swap;
}

/* وزن متوسط (Medium) */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* وزن نیمه‌ضخیم (Semi-Bold) */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* وزن ضخیم (Bold) */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700; /* یا bold */
  font-style: normal;
  font-display: swap;
}

/* وزن خیلی ضخیم (ExtraBold) */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* وزن سیاه (Black) - برای تیترهای بسیار بزرگ */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}