/* ============================================================
   استایل‌های تکمیلی - Kian Electronic
   ============================================================ */

/* ============================================================
   1. Import Design System
   ============================================================ */
   @import url('design-system.css');

   /* ============================================================
      2. General Styles
      ============================================================ */
   
   /* ====== Selection ====== */
   ::selection {
       background: var(--color-primary);
       color: var(--text-white);
   }
   
   ::-moz-selection {
       background: var(--color-primary);
       color: var(--text-white);
   }
   
   /* ====== Scrollbar ====== */
   ::-webkit-scrollbar {
       width: 8px;
       height: 8px;
   }
   
   ::-webkit-scrollbar-track {
       background: var(--bg-secondary);
   }
   
   ::-webkit-scrollbar-thumb {
       background: var(--color-gold);
       border-radius: 4px;
   }
   
   ::-webkit-scrollbar-thumb:hover {
       background: var(--color-primary);
   }
   
   /* ============================================================
      3. Loading / Preloader
      ============================================================ */
   .preloader {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: var(--bg-primary);
       z-index: 9999;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: opacity 0.6s ease, visibility 0.6s ease;
   }
   
   .preloader.hidden {
       opacity: 0;
       visibility: hidden;
   }
   
   .preloader-spinner {
       width: 40px;
       height: 40px;
       border: 3px solid var(--border-light);
       border-top-color: var(--color-gold);
       border-radius: 50%;
       animation: spin 0.8s linear infinite;
   }
   
   @keyframes spin {
       to { transform: rotate(360deg); }
   }
   
   /* ============================================================
      4. Breadcrumb
      ============================================================ */
   .breadcrumb {
       padding: 16px 0;
       font-size: 14px;
       color: var(--text-muted);
       border-bottom: 1px solid var(--border-light);
       margin-bottom: 24px;
   }
   
   .breadcrumb a {
       color: var(--color-gold);
       text-decoration: none;
       transition: color var(--transition-base);
   }
   
   .breadcrumb a:hover {
       color: var(--color-primary);
   }
   
   .breadcrumb .separator {
       margin: 0 8px;
       color: var(--text-muted);
   }
   
   /* ============================================================
      5. Pagination
      ============================================================ */
   .pagination {
       display: flex;
       justify-content: center;
       gap: 8px;
       margin-top: 32px;
       flex-wrap: wrap;
   }
   
   .pagination a,
   .pagination span {
       display: flex;
       align-items: center;
       justify-content: center;
       min-width: 40px;
       height: 40px;
       padding: 0 12px;
       border: 1px solid var(--border-light);
       border-radius: var(--radius-sm);
       font-size: 14px;
       color: var(--text-secondary);
       text-decoration: none;
       transition: all var(--transition-base);
   }
   
   .pagination a:hover {
       border-color: var(--color-gold);
       color: var(--color-primary);
   }
   
   .pagination a.active,
   .pagination span.active {
       background: var(--color-primary);
       border-color: var(--color-primary);
       color: var(--text-white);
   }
   
   .pagination a.disabled,
   .pagination span.disabled {
       opacity: 0.4;
       cursor: not-allowed;
   }
   
   /* ============================================================
      6. Alerts / Messages
      ============================================================ */
   .alert {
       padding: 16px 20px;
       border-radius: var(--radius-sm);
       margin-bottom: 16px;
       font-size: 14px;
       display: flex;
       align-items: center;
       gap: 12px;
   }
   
   .alert-success {
       background: #d4edda;
       color: #155724;
       border: 1px solid #c3e6cb;
   }
   
   .alert-error {
       background: #f8d7da;
       color: #721c24;
       border: 1px solid #f5c6cb;
   }
   
   .alert-warning {
       background: #fff3cd;
       color: #856404;
       border: 1px solid #ffeeba;
   }
   
   .alert-info {
       background: #d1ecf1;
       color: #0c5460;
       border: 1px solid #bee5eb;
   }
   
   /* ============================================================
      7. Tabs
      ============================================================ */
   .tabs {
       display: flex;
       gap: 0;
       border-bottom: 1px solid var(--border-light);
       margin-bottom: 24px;
   }
   
   .tabs .tab-btn {
       padding: 12px 24px;
       background: transparent;
       border: none;
       border-bottom: 2px solid transparent;
       font-family: var(--font-body);
       font-size: 15px;
       font-weight: var(--font-weight-medium);
       color: var(--text-secondary);
       cursor: pointer;
       transition: all var(--transition-base);
   }
   
   .tabs .tab-btn:hover {
       color: var(--text-primary);
   }
   
   .tabs .tab-btn.active {
       color: var(--color-primary);
       border-bottom-color: var(--color-primary);
   }
   
   .tab-content {
       display: none;
   }
   
   .tab-content.active {
       display: block;
   }
   
   /* ============================================================
      8. Modal
      ============================================================ */
   .modal-overlay {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(0, 0, 0, 0.5);
       z-index: var(--z-modal);
       display: none;
       align-items: center;
       justify-content: center;
       padding: 20px;
   }
   
   .modal-overlay.active {
       display: flex;
   }
   
   .modal {
       background: var(--bg-secondary);
       border-radius: var(--radius-lg);
       max-width: 600px;
       width: 100%;
       max-height: 90vh;
       overflow-y: auto;
       padding: 32px;
       position: relative;
       animation: modalSlide 0.3s ease;
   }
   
   @keyframes modalSlide {
       from {
           transform: translateY(-20px);
           opacity: 0;
       }
       to {
           transform: translateY(0);
           opacity: 1;
       }
   }
   
   .modal-close {
       position: absolute;
       top: 16px;
       right: 16px;
       background: none;
       border: none;
       font-size: 24px;
       color: var(--text-muted);
       cursor: pointer;
       transition: color var(--transition-base);
   }
   
   .modal-close:hover {
       color: var(--text-primary);
   }
   
   /* ============================================================
      9. Wishlist Button
      ============================================================ */
   .wishlist-btn {
       background: none;
       border: none;
       cursor: pointer;
       color: var(--text-muted);
       transition: all var(--transition-base);
       padding: 4px;
       font-size: 20px;
   }
   
   .wishlist-btn:hover {
       color: #e74c3c;
       transform: scale(1.1);
   }
   
   .wishlist-btn.active {
       color: #e74c3c;
   }
   
   /* ============================================================
      10. Quantity Selector
      ============================================================ */
   .quantity-selector {
       display: flex;
       align-items: center;
       gap: 4px;
   }
   
   .quantity-selector button {
       width: 36px;
       height: 36px;
       background: var(--bg-secondary);
       border: 1px solid var(--border-light);
       border-radius: var(--radius-sm);
       font-size: 18px;
       cursor: pointer;
       transition: all var(--transition-base);
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--text-primary);
   }
   
   .quantity-selector button:hover {
       border-color: var(--color-gold);
       background: var(--bg-white);
   }
   
   .quantity-selector input {
       width: 50px;
       height: 36px;
       text-align: center;
       border: 1px solid var(--border-light);
       border-radius: var(--radius-sm);
       font-family: var(--font-body);
       font-size: 16px;
       font-weight: var(--font-weight-medium);
       background: var(--bg-white);
       color: var(--text-primary);
       outline: none;
   }
   
   .quantity-selector input:focus {
       border-color: var(--color-gold);
   }
   
   /* ============================================================
      11. Rating Stars
      ============================================================ */
   .rating {
       display: flex;
       gap: 2px;
       color: var(--text-muted);
   }
   
   .rating .star {
       font-size: 16px;
   }
   
   .rating .star.filled {
       color: #f5a623;
   }
   
   /* ============================================================
      12. Tooltip
      ============================================================ */
   .tooltip {
       position: relative;
   }
   
   .tooltip .tooltip-text {
       position: absolute;
       bottom: calc(100% + 8px);
       left: 50%;
       transform: translateX(-50%);
       background: var(--text-primary);
       color: var(--text-white);
       padding: 6px 12px;
       border-radius: var(--radius-sm);
       font-size: 12px;
       white-space: nowrap;
       opacity: 0;
       visibility: hidden;
       transition: all var(--transition-base);
   }
   
   .tooltip .tooltip-text::after {
       content: '';
       position: absolute;
       top: 100%;
       left: 50%;
       transform: translateX(-50%);
       border: 6px solid transparent;
       border-top-color: var(--text-primary);
   }
   
   .tooltip:hover .tooltip-text {
       opacity: 1;
       visibility: visible;
   }
   
   /* ============================================================
      13. Responsive Utilities
      ============================================================ */
   .hide-desktop {
       display: none !important;
   }
   
   .hide-mobile {
       display: block !important;
   }
   
   /* ============================================================
      Responsive Breakpoints
      ============================================================ */
   @media (max-width: 992px) {
       .hide-desktop {
           display: block !important;
       }
       .hide-mobile {
           display: none !important;
       }
   }
   
   @media (max-width: 576px) {
       .modal {
           padding: 20px;
       }
       .tabs .tab-btn {
           padding: 10px 16px;
           font-size: 13px;
       }
   }
   
   /* ============================================================
      Print Styles
      ============================================================ */
   @media print {
       .no-print {
           display: none !important;
       }
       body {
           background: white !important;
           color: black !important;
       }
       .container {
           max-width: 100% !important;
           padding: 0 !important;
       }
   }