/*--------------------------------------------------------------
# Color Scheme Variables
# This file contains all color scheme variables for the website
# Organized by: Primary, Secondary, Text, Background, etc.
# 
# USAGE:
#   Primary: var(--color-primary)
#   Secondary: var(--color-secondary)
#   Text: var(--color-text-primary)
#   Background: var(--color-bg-white)
#   Success: var(--color-success)
#   Warning: var(--color-warning)
#   Danger: var(--color-danger)
#   Info: var(--color-info)
--------------------------------------------------------------*/

:root {
  /* ============================================
     PRIMARY COLORS (Main Brand Color - Smooth Orange)
     ============================================ */
  --color-primary: #FF8C42;
  --color-primary-rgb: 255, 140, 66;
  --color-primary-dark: #E67A2E;
  --color-primary-light: #FFA366;
  --color-primary-hover: #FF7F35;
  --color-primary-active: #D66B1F;
  
  /* ============================================
     SECONDARY COLORS (Supporting Brand Color)
     ============================================ */
  --color-secondary: #06416F;
  --color-secondary-rgb: 6, 65, 111;
  --color-secondary-dark: #04243D;
  --color-secondary-light: #0C395B;
  --color-secondary-hover: #052D54;
  --color-secondary-active: #031F2A;
  
  /* ============================================
     TEXT COLORS
     ============================================ */
  --color-text-primary: #06416F;
  --color-text-secondary: #868EA5;
  --color-text-secondary-rgb: 134, 142, 165;
  --color-text-light: #95B7D1;
  --color-text-light-rgb: 149, 183, 209;
  --color-text-dark: #121C2C;
  --color-text-muted: #868EA5;
  --color-text-white: #ffffff;
  
  /* ============================================
     BACKGROUND COLORS
     ============================================ */
  --color-bg-white: #ffffff;
  --color-bg-white-rgb: 255, 255, 255;
  --color-bg-light: #F2F2F2;
  --color-bg-light-rgb: 242, 242, 242;
  --color-bg-dark: #000000;
  --color-bg-dark-rgb: 0, 0, 0;
  --color-bg-primary: var(--color-primary);
  --color-bg-secondary: var(--color-secondary);
  
  /* ============================================
     ACCENT COLORS
     ============================================ */
  --color-accent-1: #04243D;
  --color-accent-1-rgb: 4, 36, 61;
  --color-accent-2: #0C395B;
  --color-accent-2-rgb: 12, 57, 91;
  --color-accent-3: #121C2C;
  --color-accent-3-rgb: 18, 28, 44;
  
  /* ============================================
     SEMANTIC COLORS (Success, Warning, Danger, Info)
     ============================================ */
  --color-success: #FF7F35;
  --color-success-rgb: 255, 127, 53;
  --color-success-light: #FFF4E6;
  --color-success-dark: #CC5F1A;
  
  --color-warning: #ffc107;
  --color-warning-rgb: 255, 193, 7;
  --color-warning-light: #fff3cd;
  --color-warning-dark: #856404;
  
  --color-danger: #dc3545;
  --color-danger-rgb: 220, 53, 69;
  --color-danger-light: #f8d7da;
  --color-danger-dark: #721c24;
  
  --color-info: #17a2b8;
  --color-info-rgb: 23, 162, 184;
  --color-info-light: #d1ecf1;
  --color-info-dark: #0c5460;
  
  /* ============================================
     BORDER COLORS
     ============================================ */
  --color-border: #dee2e6;
  --color-border-light: #e9ecef;
  --color-border-dark: #868EA5;
  --color-border-primary: var(--color-primary);
  --color-border-secondary: var(--color-secondary);
  
  /* ============================================
     LEGACY COMPATIBILITY (for existing code)
     These map to the new color scheme variables
     ============================================ */
  --transwide-base: var(--color-primary);
  --transwide-base-rgb: var(--color-primary-rgb);
  --transwide-color: var(--color-text-secondary);
  --transwide-color-rgb: var(--color-text-secondary-rgb);
  --transwide-text-dark: var(--color-text-light);
  --transwide-text-dark-rgb: var(--color-text-light-rgb);
  --transwide-white: var(--color-bg-white);
  --transwide-white-rgb: var(--color-bg-white-rgb);
  --transwide-white2: var(--color-bg-light);
  --transwide-white2-rgb: var(--color-bg-light-rgb);
  --transwide-black: var(--color-secondary);
  --transwide-black-rgb: var(--color-secondary-rgb);
  --transwide-black2: var(--color-accent-1);
  --transwide-black2-rgb: var(--color-accent-1-rgb);
  --transwide-black3: var(--color-bg-dark);
  --transwide-black3-rgb: var(--color-bg-dark-rgb);
  --transwide-black4: var(--color-accent-2);
  --transwide-black4-rgb: var(--color-accent-2-rgb);
  --transwide-black5: var(--color-accent-3);
  --transwide-black5-rgb: var(--color-accent-3-rgb);
}

/* ============================================
   BOOTSTRAP SUCCESS CLASS OVERRIDES (Orange Theme)
   Override Bootstrap's default green success colors with orange
   ============================================ */
.alert-success {
  background-color: var(--color-success-light, #FFF4E6) !important;
  color: var(--color-success-dark, #CC5F1A) !important;
  border-color: #FFB380 !important;
}

.alert-success .alert-link {
  color: var(--color-success-dark, #CC5F1A) !important;
}

.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
  background-color: var(--color-success, #FF7F35) !important;
  border-color: var(--color-success, #FF7F35) !important;
  color: #ffffff !important;
}

.btn-success:hover {
  background-color: var(--color-primary-hover, #FF7F35) !important;
  border-color: var(--color-primary-hover, #FF7F35) !important;
}

.btn-outline-success {
  color: var(--color-success, #FF7F35) !important;
  border-color: var(--color-success, #FF7F35) !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
  background-color: var(--color-success, #FF7F35) !important;
  border-color: var(--color-success, #FF7F35) !important;
  color: #ffffff !important;
}

/* Override Bootstrap's success text and background utilities */
.text-success {
  color: var(--color-success, #FF7F35) !important;
}

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

.border-success {
  border-color: var(--color-success, #FF7F35) !important;
}

/* ============================================
   IMAGE COLOR FILTERS (Convert Green to Orange)
   Apply CSS filters to convert green images to orange
   ============================================ */
.main-slider-three__products__shape {
  filter: hue-rotate(120deg) saturate(1.2) brightness(1.1) !important;
  /* 
   * hue-rotate(120deg): Shifts green (#00FF00) to orange (#FF7F00)
   * saturate(1.2): Increases color saturation
   * brightness(1.1): Slightly brightens the image
   */
}

/* Convert green backgrounds in main slider to orange using overlay */
.main-slider-three__bg {
  position: relative;
}

/* Add orange overlay to convert green to orange */
.main-slider-three__bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 127, 53, 0.5) 0%, rgba(255, 140, 66, 0.4) 50%, rgba(255, 127, 53, 0.5) 100%);
  mix-blend-mode: hue;
  pointer-events: none;
  z-index: 1;
}

/* Alternative overlay for better green-to-orange conversion */
.main-slider-three__bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 127, 53, 0.25);
  mix-blend-mode: color;
  pointer-events: none;
  z-index: 2;
}

/* Convert any green elements in slider shapes */
.main-slider-three__shape-1,
.main-slider-three__shape-2 {
  filter: hue-rotate(120deg) saturate(1.1) brightness(1.05) !important;
}

/* Global filter for any remaining green images */
img[src*="main-slider"],
img[src*="shape"],
img[src*="background"],
img[src*="bg"] {
  filter: hue-rotate(120deg) saturate(1.1) brightness(1.05) !important;
}

/* Filter slider item container to convert all green within */
.main-slider-three__item {
  position: relative;
}

/* Apply filter to the entire slider item to convert green backgrounds */
.main-slider-three__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 127, 53, 0.2);
  mix-blend-mode: hue;
  pointer-events: none;
  z-index: 1;
}