/**
 * RC Baki Theme Colors
 * =====================
 * Centralized color system for easy customization.
 * 
 * To change colors for a new project:
 * 1. Edit the color values in :root
 * 2. All components will update automatically
 */

:root {
   /* ========================================
       PRIMARY COLORS
       ======================================== */

   /* Main theme color - used for buttons, links, accents */
   --color-primary: #fff200;
   /* Yellow */
   --color-primary-hover: #e6da00;
   /* Darker yellow for hover */
   --color-primary-light: #fffee6;
   /* Very light yellow for backgrounds */
   --color-primary-rgb: 255, 242, 0;
   /* RGB for opacity usage */

   /* Multikart template compatibility */
   --theme-color: #fff200;
   /* Must match --color-primary */
   --theme-color2: #e6da00;
   /* Must match --color-primary-hover */

   /* ========================================
       SECONDARY COLORS
       ======================================== */

   /* Secondary color - used for secondary buttons, accents */
   --color-secondary: #080808;
   /* Custom black */
   --color-secondary-hover: #000000;
   /* Darker for hover */
   --color-secondary-light: #f5f5f5;
   /* Light gray background */

   /* ========================================
       ACCENT COLORS
       ======================================== */

   /* Accent color - for special highlights */
   --color-accent: #2196f3;
   /* Blue */
   --color-accent-hover: #1976d2;
   /* Darker blue */

   /* ========================================
       SEMANTIC COLORS
       ======================================== */

   /* Success */
   --color-success: #28a745;
   --color-success-light: #d4edda;

   /* Warning */
   --color-warning: #ffc107;
   --color-warning-light: #fff3cd;

   /* Danger */
   --color-danger: #dc3545;
   --color-danger-light: #f8d7da;

   /* Info */
   --color-info: #17a2b8;
   --color-info-light: #d1ecf1;

   /* ========================================
       TEXT COLORS
       ======================================== */

   --color-text-primary: #333333;
   /* Main text */
   --color-text-secondary: #666666;
   /* Secondary text */
   --color-text-muted: #999999;
   /* Muted text */
   --color-text-light: #ffffff;
   /* Light text (on dark bg) */

   /* ========================================
       BACKGROUND COLORS
       ======================================== */

   --color-bg-primary: #ffffff;
   /* Main background */
   --color-bg-secondary: #f8f9fa;
   /* Secondary background */
   --color-bg-dark: #080808;
   /* Custom dark background */

   /* ========================================
       BORDER COLORS
       ======================================== */

   --color-border: #e0e0e0;
   --color-border-light: #f0f0f0;

   /* ========================================
       SHADOWS
       ======================================== */

   --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Background colors */
.bg-primary {
   background-color: var(--color-primary) !important;
}

.bg-secondary {
   background-color: var(--color-secondary) !important;
}

.bg-accent {
   background-color: var(--color-accent) !important;
}

.bg-success {
   background-color: var(--color-success) !important;
}

.bg-warning {
   background-color: var(--color-warning) !important;
}

.bg-danger {
   background-color: var(--color-danger) !important;
}

/* Text colors */
.text-primary {
   color: var(--color-primary) !important;
}

.text-secondary {
   color: var(--color-secondary) !important;
}

.text-accent {
   color: var(--color-accent) !important;
}

.text-muted {
   color: var(--color-text-muted) !important;
}

/* Border colors */
.border-primary {
   border-color: var(--color-primary) !important;
}

/* ========================================
   COMPONENT OVERRIDES
   ======================================== */

/* Buttons - using theme colors */
.btn-theme {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   color: var(--color-text-primary);
}

.btn-theme:hover {
   background-color: var(--color-primary-hover);
   border-color: var(--color-primary-hover);
}

.btn-theme-outline {
   background-color: transparent;
   border-color: var(--color-primary);
   color: var(--color-primary);
}

.btn-theme-outline:hover {
   background-color: var(--color-primary);
   color: var(--color-text-primary);
}

/* Links with theme color */
a.theme-link {
   color: var(--color-primary);
}

a.theme-link:hover {
   color: var(--color-primary-hover);
}

/* Badge with theme color */
.badge-theme {
   background-color: var(--color-primary);
   color: var(--color-text-primary);
}

/* Custom Button Colors */
.btn.btn-solid-black {
   background: #333 !important;
   background-color: #333 !important;
   border-color: #333 !important;
   color: #fff !important;
}

.btn.btn-solid-black:hover,
.btn.btn-solid-black:focus,
.btn.btn-solid-black:active {
   background: #000 !important;
   background-color: #000 !important;
   border-color: #000 !important;
}

/* Custom WhatsApp Button Style */
.btn.btn-solid-green {
   background: #25D366 !important;
   background-color: #25D366 !important;
   border-color: #25D366 !important;
   color: #fff !important;
}

.btn.btn-solid-green:hover,
.btn.btn-solid-green:focus,
.btn.btn-solid-green:active {
   background: #fff !important;
   background-color: #fff !important;
   color: #25D366 !important;
   border: 1px solid #25D366 !important;
}

/* Mobile Fixed Bottom Buttons */
@media (max-width: 767px) {
   .mobile-bottom-actions {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #fff;
      padding: 15px;
      box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
      z-index: 10010;
      display: flex;
      gap: 10px;
   }

   .mobile-bottom-actions .btn {
      margin: 0;
      width: 100%;
   }

   .cart-section {
      padding-bottom: 140px;
   }
}

/* Mobile Top Back Button */
@media (max-width: 767px) {
   .mobile-top-back-btn {
      position: fixed;
      top: 15px;
      left: 15px;
      z-index: 10020;
      width: 40px;
      height: 40px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      color: #333;
      font-size: 20px;
      text-decoration: none;
   }

   .mobile-top-back-btn:hover {
      color: var(--theme-color);
      background: #fff;
   }
}

/* Fixes for Mobile Layout & Back Button */
@media (max-width: 767px) {
   .cart-section {
      padding-bottom: 40px !important;
      /* Reset to normal spacing */
   }

   .mobile-top-back-btn {
      padding: 0 !important;
      line-height: normal !important;
   }

   .mobile-top-back-btn i {
      display: block;
      line-height: 1;
      font-size: 24px;
      margin-top: 2px;
   }
}

/* Final Refinement for Mobile Back Button */
@media (max-width: 767px) {
   .mobile-top-back-btn {
      top: 25px !important;
      /* Move down */
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
   }

   .mobile-top-back-btn i {
      margin: 0 !important;
      padding: 0 !important;
      line-height: 1 !important;
      font-size: 24px !important;
      transform: none !important;
   }
}

/* Color Swatch Selection (Admin) */
.color-swatch-label .color-swatch-circle {
   transition: transform 0.2s, box-shadow 0.2s;
}

.color-swatch-label:hover .color-swatch-circle {
   transform: scale(1.1);
}

.color-swatch-input:checked+.color-swatch-circle {
   box-shadow: 0 0 0 3px var(--theme-color, #007bff) !important;
   transform: scale(1.1);
}