/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
*/

/* Force red theme for cart page */
:root {
  --cl-accent: 254, 26, 42 !important;
  --cl-accent-rgb: 254, 26, 42 !important;
  --bs-primary: #FE1A2A !important;
  --bs-primary-rgb: 254, 26, 42 !important;
  --bs-link-color: #FE1A2A !important;
}

/* Override any blue colors with red */
.btn-primary {
  --bs-btn-bg: #FE1A2A !important;
  --bs-btn-border-color: #FE1A2A !important;
  --bs-btn-hover-bg: #ff3344 !important;
  --bs-btn-hover-border-color: #ff3344 !important;
  --bs-btn-active-bg: #c4101e !important;
  --bs-btn-active-border-color: #c4101e !important;
  background-color: #FE1A2A !important;
  border-color: #FE1A2A !important;
}

.btn-primary:hover {
  background-color: #ff3344 !important;
  border-color: #ff3344 !important;
}

.btn-primary:active,
.btn-primary.active {
  background-color: #c4101e !important;
  border-color: #c4101e !important;
}

/* Cart specific overrides - Force red theme everywhere */
.cart .btn-primary,
.cart-page .btn-primary,
[class*="cart"] .btn-primary,
body .btn-primary,
.container .btn-primary,
button.btn-primary,
input.btn-primary,
a.btn-primary {
  background-color: #FE1A2A !important;
  border-color: #FE1A2A !important;
  color: white !important;
}

.cart .btn-primary:hover,
.cart-page .btn-primary:hover,
[class*="cart"] .btn-primary:hover,
body .btn-primary:hover,
.container .btn-primary:hover,
button.btn-primary:hover,
input.btn-primary:hover,
a.btn-primary:hover {
  background-color: #ff3344 !important;
  border-color: #ff3344 !important;
  color: white !important;
}

/* Override any blue Bootstrap defaults */
* {
  --bs-blue: #FE1A2A !important;
  --bs-indigo: #FE1A2A !important;
  --bs-purple: #FE1A2A !important;
  --bs-pink: #FE1A2A !important;
  --bs-red: #FE1A2A !important;
  --bs-orange: #FE1A2A !important;
  --bs-yellow: #FE1A2A !important;
  --bs-green: #FE1A2A !important;
  --bs-teal: #FE1A2A !important;
  --bs-cyan: #FE1A2A !important;
}

/* Force all accent colors to red */
.text-accent-500,
.border-accent-500,
.bg-accent-500,
[class*="accent"] {
  color: #FE1A2A !important;
  border-color: #FE1A2A !important;
  background-color: #FE1A2A !important;
}

/* Text colors */
.text-primary,
.link-primary,
a.text-primary {
  color: #FE1A2A !important;
}

/* Border colors */
.border-primary {
  border-color: #FE1A2A !important;
}

/* Background colors */
.bg-primary {
  background-color: #FE1A2A !important;
}

/* Form controls focus */
.form-control:focus,
.form-select:focus {
  border-color: #FE1A2A !important;
  box-shadow: 0 0 0 0.25rem rgba(254, 26, 42, 0.25) !important;
}

/* Cart page specific overrides */
[data-component-id*="cart"] *,
.cart-wrapper *,
.cart-section *,
.cart * {
  --brand: #FE1A2A !important;
  --cl-accent: 254, 26, 42 !important;
}

/* Override Tailwind blue colors */
.bg-blue-500,
.text-blue-500,
.border-blue-500 {
  background-color: #FE1A2A !important;
  color: #FE1A2A !important;
  border-color: #FE1A2A !important;
}

/* Force checkout buttons to be red */
.cart-checkout-btn,
button[type="submit"],
.btn[type="submit"] {
  background: linear-gradient(to bottom, #FE1A2A, #c4101e) !important;
  color: #ffffff !important;
  border: none !important;
}

.cart-checkout-btn:hover,
button[type="submit"]:hover,
.btn[type="submit"]:hover {
  background: linear-gradient(to bottom, #ff3344, #FE1A2A) !important;
}