/* Red Leaf Liquidation - Canadian Red & White Theme */

:root {
    --canadian-red: #D80621;
    --canadian-red-dark: #a80018;
    --canadian-red-light: rgba(216, 6, 33, 0.1);
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

/* Add a red top stripe to the header */
header.shadow-gray,
header.shadow-sm {
    border-top: 4px solid var(--canadian-red) !important;
}

/* Override navy blue backgrounds to Canadian red */
.bg-navyBlue,
[class*="bg-\[#060C3B\]"] {
    background-color: var(--canadian-red) !important;
}

.text-navyBlue,
[class*="text-\[#060C3B\]"] {
    color: var(--canadian-red) !important;
}

.border-navyBlue,
[class*="border-\[#060C3B\]"] {
    border-color: var(--canadian-red) !important;
}

/* ============================================
   PRIMARY BUTTONS - Canadian Red
   ============================================ */
.primary-button {
    background-color: var(--canadian-red) !important;
    border-color: var(--canadian-red) !important;
    color: #ffffff !important;
}

.primary-button:hover {
    background-color: var(--canadian-red-dark) !important;
    opacity: 1 !important;
}

/* Secondary button */
.secondary-button {
    color: var(--canadian-red) !important;
    border-color: var(--canadian-red) !important;
}

.secondary-button:hover {
    background-color: var(--canadian-red-light) !important;
}

/* ============================================
   LINKS & ACCENTS
   ============================================ */
a:not([class*="text-"]):not([class*="bg-"]) {
    color: inherit;
}

/* Active/focused states */
::selection {
    background-color: rgba(216, 6, 33, 0.2) !important;
}

input:focus,
textarea:focus,
select:focus {
    outline-color: var(--canadian-red) !important;
    border-color: var(--canadian-red) !important;
    box-shadow: 0 0 0 2px rgba(216, 6, 33, 0.15) !important;
}

/* ============================================
   PRICE & BADGES
   ============================================ */
.text-darkPink,
[class*="text-\[#F85156\]"] {
    color: var(--canadian-red) !important;
}

/* Sale/discount badges */
[class*="bg-darkPink"],
.bg-darkPink {
    background-color: var(--canadian-red) !important;
}

/* ============================================
   STORE BRANDING - Header Logo Area
   ============================================ */
/* Red banner at top of page for branding */
body::before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
}

/* Site title display in header */
.store-name-display {
    color: var(--canadian-red) !important;
    font-weight: 700 !important;
}

/* ============================================
   CHECKOUT & CART
   ============================================ */
/* Progress indicators */
[class*="text-blue"],
[class*="bg-blue"] {
    /* Keep as-is for accessibility */
}

/* Checkout button override */
button[type="submit"].primary-button,
.checkout-btn {
    background-color: var(--canadian-red) !important;
    border-color: var(--canadian-red) !important;
}

/* ============================================
   MOBILE NAV 
   ============================================ */
.mobile-nav-bg,
[class*="bg-navyBlue"] {
    background-color: var(--canadian-red) !important;
}

/* ============================================
   CATEGORY PILLS & FILTERS
   ============================================ */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: var(--canadian-red) !important;
}

/* ============================================
   FOOTER
   ============================================ */
footer [class*="bg-navyBlue"],
footer.bg-navyBlue {
    background-color: var(--canadian-red) !important;
}

/* ============================================
   STORE HEADER LOGO CUSTOM
   ============================================ */
.store-logo-text {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--canadian-red) !important;
    letter-spacing: -0.02em !important;
}

/* Red leaf logo emoji positioning */
.store-logo-container {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}