/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/* ========================================
   BRAND COLORS & CHECKOUT DESIGN
   ======================================== */

/* Brand Colors */
:root {
  --brand-primary: #9fcd47;
  --brand-primary-dark: #5f811c;
  --brand-secondary: #2c5530;
  --brand-accent: #f4a261;
  --brand-text: #2c5530;
  --brand-light: #f8f9fa;
}

/* Header styling */
#header {
  background: var(--brand-primary) !important;
  border-bottom: 3px solid var(--brand-secondary);
}

/* ========================================
   CHECKOUT DESIGN - BRAND COLORS
   ======================================== */

/* Global buttons - ensure brand colors override default blue */
.btn-primary,
a.btn-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
a.btn-primary:hover,
.btn-primary:focus,
a.btn-primary:focus {
  background-color: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
}

.btn-outline-primary,
a.btn-outline-primary {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.btn-outline-primary:hover,
a.btn-outline-primary:hover,
.btn-outline-primary:focus,
a.btn-outline-primary:focus {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
}

/* Checkout buttons */
#checkout button,
#checkout a.btn,
#checkout .btn-primary,
.checkout button,
.checkout a.btn,
.checkout .btn-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
  transition: all 0.3s ease;
}

#checkout button:hover,
#checkout a.btn:hover,
#checkout .btn-primary:hover,
.checkout button:hover,
.checkout a.btn:hover,
.checkout .btn-primary:hover {
  background-color: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Checkout links */
#checkout a,
.checkout a {
  color: var(--brand-primary-dark) !important;
  text-decoration: none;
}

#checkout a:hover,
.checkout a:hover {
  color: var(--brand-secondary) !important;
  text-decoration: underline;
}

/* Checkout form styling */
#checkout .form-control,
.checkout .form-control {
  border-color: #ddd;
  border-radius: 4px;
}

#checkout .form-control:focus,
.checkout .form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(159, 205, 71, 0.25);
}

/* Checkout progress indicators */
#checkout .step-title,
.checkout .step-title {
  color: var(--brand-text);
  font-weight: 600;
}

/* ========================================
   PRODUCT PAGE BADGE STYLING
   ======================================== */

/* Product badges */
.product-badges .badge,
.product-flags .badge,
.product-flag {
  background-color: var(--brand-accent) !important;
  color: #ffffff !important;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Sale badge */
.product-badges .badge-sale,
.product-flag.sale {
  background-color: #e74c3c !important;
  animation: pulse 2s infinite;
}

/* New badge */
.product-badges .badge-new,
.product-flag.new {
  background-color: var(--brand-primary) !important;
}

/* Out of stock badge */
.product-badges .badge-out-of-stock,
.product-flag.out-of-stock {
  background-color: #95a5a6 !important;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ========================================
   BREADCRUMBS STYLING
   ======================================== */

.breadcrumb {
  background-color: var(--brand-light);
  border-radius: 4px;
  padding: 10px 15px;
  margin-bottom: 20px;
}

.breadcrumb-item a {
  color: var(--brand-primary-dark);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--brand-secondary);
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--brand-text);
  font-weight: 500;
}

/* ========================================
   CART STYLING
   ======================================== */

.cart-summary {
  background-color: var(--brand-light);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e9ecef;
}

.cart-summary .cart-total {
  background-color: var(--brand-primary);
  color: #ffffff;
  padding: 15px;
  border-radius: 4px;
  font-weight: 600;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
  .product-badges .badge,
  .product-flags .badge,
  .product-flag {
    font-size: 0.75em;
    padding: 4px 8px;
  }
  
  .breadcrumb {
    padding: 8px 12px;
    font-size: 0.9em;
  }
}