/* Mane Branding Override Styles */
/* This file overrides the default styling to match Mane brand identity */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Work+Sans:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

/* CSS Variables Override for Mane Branding */
:root {
  /* Primary Colors */
  --brand--color--primary: #FF0000;
  --brand--color--primary-dark: #1D1D1D;
  --brand--color--primary-light: #ff4444;
  --brand--color--primary-lighter: #fff5f5;
  
  /* Accent Colors */
  --brand--color--accent: #FF9900;
  --brand--color--accent-foreground: white;
  --mane-yellow: #fced44;
  --mane-yellow-border: #efde54;
  --mane-red: #FF0000;
  --mane-red-bg: #ff000f;
  --mane-dark: #1D1D1D;
  --mane-dark-bg: #242424;
  --mane-orange: #FF9900;
  --mane-footer-bg: #242424;
  
  /* CTA Colors */
  --brand--color--cta-primary: #FF9900;
  --brand--color--cta-primary-hover: #e68a00;
  
  /* Text Colors */
  --brand--color--text-primary: #1D1D1D;
  --brand--color--text-secondary: #333333;
  --brand--color--text-inverse: white;
  
  /* Background */
  --brand--color--background: #ffffff;
  --brand--color--surface: #fafafa;
  
  /* Font Families */
  --_text---font-family--primary: 'Work Sans', 'Poppins', sans-serif;
  --_text---font-family--heading: 'Oswald', sans-serif;
  --_text---font-family--secondary: 'Work Sans', sans-serif;
  
  /* Labels */
  --_labels---brand--color--label-savings: white;
  --_labels---brand--color--label-savings-background: #FF0000;
  --_labels---brand--color--label-urgency: #FF0000;
  --_labels---brand--color--label-urgency-background: #fff5f5;
  --_labels---brand--color--label-best-deal: #FF0000;
  --_labels---brand--color--label-best-deal-text: white;
  
  /* Component Colors */
  --component--color--radio: #FF0000;
  --component--color--outline: #FF0000;
  --component--color--label-background: #1D1D1D;
  --component--color--label: white;
  
  /* System Colors */
  --system-colors--success: #0b975f;
  --system-colors--success-light: #f5fffb;
  --system-colors--destructive: #FF0000;
}

/* Body Styling */
body {
  font-family: 'Work Sans', 'Poppins', sans-serif !important;
  color: #1D1D1D;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.display-xs, .display-sm, .display-md, .display-lg, .display-xl, .display-2xl {
  font-family: 'Oswald', sans-serif !important;
  color: #1D1D1D;
}

/* Header Styling */
.checkout__header-top,
.checkout__header-brand {
  background-color: #FFFFFF !important;
}

.brand-logo {
  max-height: 50px;
  width: auto;
}

/* Encrypted Banner */
.encrypted-banner {
  background-color: #FF0000 !important;
  color: white !important;
}

.security-banner__text {
  color: white !important;
}

.security-banner__icon svg {
  color: white !important;
}

/* Scarcity Banner */
.scarcity-banner {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%) !important;
  border: 2px solid #FF0000 !important;
  border-radius: 8px;
}

.scarcity_title {
  color: #FF0000 !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700;
}

.scarcity_subtitle {
  color: #FF0000 !important;
}

.scarcity-counter {
  color: #FF0000 !important;
  font-weight: 700;
}

/* Progress Steps */
.progress-container {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 1rem;
}

.step-label {
  font-family: 'Work Sans', sans-serif !important;
}

.step-label.active {
  color: #FF0000 !important;
  font-weight: 600;
}

.line-active {
  background-color: #FF0000 !important;
}

.arrow-active::after {
  border-color: #FF0000 !important;
}

/* Form Section Titles */
.form-section__title {
  font-family: 'Oswald', sans-serif !important;
  color: #1D1D1D !important;
  font-weight: 600;
}

/* Package Cards */
.os-card {
  border: 2px solid #e0e0e0 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease;
}

.os-card:hover {
  border-color: #FF0000 !important;
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.15);
}

.os-card.next-selected {
  border-color: #FF0000 !important;
  background-color: #fff5f5 !important;
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.2);
}

/* Radio Buttons */
.radio-style-1 {
  border-color: #FF0000 !important;
}

.radio-style-1[data-selected="true"] .radio-inner,
.os-card.next-selected .radio-inner {
  background-color: #FF0000 !important;
}

/* Badges */
.badge,
.os--badge,
.cart-pill {
  background-color: #FF0000 !important;
  color: white !important;
  font-family: 'Work Sans', sans-serif !important;
}

.badge--best-deal,
.os-card__label {
  background-color: #FF0000 !important;
  color: white !important;
}

/* Pricing */
.os-card__price-current,
.checkout__line-item__final-price,
.order-totals__value--total {
  color: #FF0000 !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700;
}

.os-card__price-compare,
.diagonal-strike {
  color: #888 !important;
  text-decoration: line-through;
}

/* Primary Button (CTA) */
.button,
.button-primary,
[data-next-checkout="submit"],
.checkout-button {
  background-color: #FF9900 !important;
  border-color: #FF9900 !important;
  color: white !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  animation: pulse 2s infinite;
}

.button:hover,
.button-primary:hover,
[data-next-checkout="submit"]:hover,
.checkout-button:hover {
  background-color: #e68a00 !important;
  border-color: #e68a00 !important;
  transform: scale(1.02);
}

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

/* Secondary Button */
.button.cc-auto,
.button--secondary {
  background-color: #1D1D1D !important;
  border-color: #1D1D1D !important;
  color: white !important;
}

.button.cc-auto:hover,
.button--secondary:hover {
  background-color: #333 !important;
  border-color: #333 !important;
}

/* Cart Box */
.cart-box {
  background-color: #f8f8f8 !important;
  border-radius: 12px;
}

.cart-box__title {
  font-family: 'Oswald', sans-serif !important;
  color: #1D1D1D !important;
  font-weight: 600;
}

/* Order Summary */
.order-summary__title {
  font-family: 'Oswald', sans-serif !important;
  color: #1D1D1D !important;
}

.order-totals__label--total {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600;
}

/* Guarantee Section */
.guarantee-section,
.guarantee-checkout__v2 {
  background: linear-gradient(135deg, #fff5f5 0%, #fff 100%) !important;
  border: 1px solid #ffcccc !important;
  border-radius: 8px;
  padding: 1rem;
}

.cart-guarantee_headline {
  font-family: 'Oswald', sans-serif !important;
  color: #FF0000 !important;
}

/* Footer */
.footer_section,
footer {
  background-color: #f5f5f5 !important;
  color: white !important;
}

.footer_legal-link {
  color: #666666 !important;
}

.footer_legal-link:hover {
  color: #FF0000 !important;
}

/* Receipt Page Specific Styles */
.receipt-check {
  color: #0b975f !important;
}

.receipt_order,
.receipt-heading {
  font-family: 'Oswald', sans-serif !important;
}

.receipt-subtitle {
  color: #666 !important;
}

.receipt_section-head .display-xs {
  font-family: 'Oswald', sans-serif !important;
  color: #1D1D1D !important;
}

.sec_title {
  font-family: 'Work Sans', sans-serif !important;
  color: #666 !important;
  font-weight: 500;
}

.sec_value {
  color: #1D1D1D !important;
}

/* Links */
.link,
a.link {
  color: #FF0000 !important;
}

.link:hover,
a.link:hover {
  color: #cc0000 !important;
}

/* Input Fields */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
.input-field {
  border-color: #e0e0e0 !important;
  font-family: 'Work Sans', sans-serif !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
.input-field:focus {
  border-color: #FF0000 !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1) !important;
}

/* Payment Methods */
.payment-method__header {
  font-family: 'Work Sans', sans-serif !important;
}

.payment-method.next-selected {
  border-color: #FF0000 !important;
  background-color: #fff5f5 !important;
}

/* Checkout Footer Links */
.checkout-footer-links .link {
  color: #666 !important;
}

.checkout-footer-links .link:hover {
  color: #FF0000 !important;
}

/* Mobile Order Summary */
.order-summary-mobile__accordion {
  background-color: #f8f8f8 !important;
}

.summary-toggle__text {
  color: #FF0000 !important;
}

/* Cart Items */
.cart-item__title {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600;
  color: #1D1D1D !important;
}

.cart-item__quantity-badge {
  background-color: #FF0000 !important;
  color: white !important;
}

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Questions/Contact Section */
.questions-text {
  color: black !important;
}

.questions-text a,
.link-tel {
  color: #055BDC !important;
}

.link-tel:hover {
  color: #fff !important;
}

/* Money Back Guarantee Text */
.mg-text {
  color: black !important;
}

/* Responsive Adjustments */
@media screen and (max-width: 767px) {
  .button,
  .button-primary,
  [data-next-checkout="submit"] {
    font-size: 1rem;
    padding: 1rem 1.5rem;
  }
  
  .form-section__title {
    font-size: 1.25rem;
  }
}

/* Additional Mane-specific utility classes */
.text-mane-red {
  color: #FF0000 !important;
}

.bg-mane-red {
  background-color: #FF0000 !important;
}

.text-mane-yellow {
  color: #fced44 !important;
}

.bg-mane-yellow {
  background-color: #fced44 !important;
}

.border-mane-red {
  border-color: #FF0000 !important;
}

.border-mane-yellow {
  border-color: #efde54 !important;
}