/*
* Global Color System for Demo Site
* This file contains all color variables that can be used throughout the site
*/

:root {
  /* Primary Color Palette */
  --light-green: #E3F2AA;
  --dark-green: #FF7700;
  --dark-grey: #333333;

  --light-blue: #CEE5EF;
  --dark-blue: #2C539F;
  --site-blue: #155C9B;
  --cart-button: #222e3a;

  /* Pricing Colors */
  --mrp-light-blue: #cde3ef;
  --pay-light-green: #E3F2AA;

  /* Additional Utility Colors */
  --white: #ffffff;
  --black: #000000;
  --light-gray: #f3f4f6;
  --medium-gray: #d1d5db;
  --dark-gray: #4b5563;

  /* Status Colors */
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* Brand Colors & Hovers */
  --hover-green: #8aad19;
  --hover-blue: #0056b3;
  --link-hover-blue: #028bc2;
  --pink: #FF7700;
  --hover-pink: #B8006B;

  /* Borders & Backgrounds */
  --border-color: #e0e0e0;
  --border-light: #f3f4f6;
  --bg-white: #ffffff;
  --bg-light: #f8f9fa;
}

/* Global Color Classes */
.bg-light-green {
  background-color: var(--light-green) !important;
}

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

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

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

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

.bg-mrp-light-blue {
  background-color: var(--mrp-light-blue) !important;
}

.bg-pay-light-green {
  background-color: var(--pay-light-green) !important;
}

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

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

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

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

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

.text-mrp-light-blue {
  color: var(--mrp-light-blue) !important;
}

.text-pay-light-green {
  color: var(--pay-light-green) !important;
}

.border-light-green {
  border-color: var(--light-green) !important;
}

.border-dark-green {
  border-color: var(--dark-green) !important;
}

.border-dark-grey {
  border-color: var(--dark-grey) !important;
}

.border-light-blue {
  border-color: var(--light-blue) !important;
}

.border-dark-blue {
  border-color: var(--dark-blue) !important;
}

/* Cart Added Highlight - Global Styles */
.cart-added-highlight,
.add-to-cart.cart-added-highlight,
.add-to-cart-btn.cart-added-highlight,
.shop-page-add-to-cart-btn.cart-added-highlight,
.related-products-container .add-to-cart-btn.cart-added-highlight,
.product-card .add-to-cart-btn.cart-added-highlight,
.card .add-to-cart-btn.cart-added-highlight {
  border: 2.5px solid #ffd600 !important;
  /* Yellow border */
  background: var(--dark-green) !important;
  /* Green background using CSS variable */
  color: var(--white) !important;
  box-shadow: 0 0 0 6px rgba(255, 214, 0, 0.18), 0 2px 12px rgba(40, 167, 69, 0.22) !important;
  transition: box-shadow 0.2s, border 0.2s, background 0.2s, color 0.2s !important;
  transform: scale(1.02) !important;
}

/* Ensure the highlight works on all button types */
button.cart-added-highlight,
input[type="button"].cart-added-highlight,
input[type="submit"].cart-added-highlight {
  border: 2.5px solid #ffd600 !important;
  background: var(--dark-green) !important;
  color: var(--white) !important;
  box-shadow: 0 0 0 6px rgba(255, 214, 0, 0.18), 0 2px 12px rgba(40, 167, 69, 0.22) !important;
  transition: box-shadow 0.2s, border 0.2s, background 0.2s, color 0.2s !important;
  transform: scale(1.02) !important;
}