/*
 * BLACK FRIDAY THEME - TEMPORARY OVERRIDE
 *
 * This file temporarily changes the site colors to Black Friday colors (black and red)
 * for Black Friday promotion.
 *
 * CREATED: November 12, 2025
 * REMOVE AFTER: December 1, 2025
 *
 * ⚠️  IMPORTANT: THIS IS A TEMPORARY THEME FOR BLACK FRIDAY ⚠️
 *
 * TO REVERSE THESE CHANGES:
 * 1. Remove this CSS file: /static/css/blackfriday-theme.css
 * 2. Remove the link tag from base.html (line that includes this file)
 * 3. The site will automatically revert to the original orange theme
 *
 * ORIGINAL COLORS BEING OVERRIDDEN:
 * --cz-primary: #f55266 (pink/red)
 * --cz-warning: #fc9231 (orange)
 * --cz-success: #33b36b (green)
 * --cz-info: #2f6ed5 (blue)
 *
 * BLACK FRIDAY COLORS:
 * Black: #000000 (main black)
 * Red: #b61317 (Black Friday red)
 * Darker Red: #8f0f12 (for hovers/emphasis)
 */

:root, [data-bs-theme=light] {
    /* Primary color changed to Black Friday red */
    --cz-primary: #b61317 !important;
    --cz-primary-rgb: 182, 19, 23 !important;

    /* Warning color changed to Black Friday red */
    --cz-warning: #b61317 !important;
    --cz-warning-rgb: 182, 19, 23 !important;

    /* Info color changed to darker red */
    --cz-info: #8f0f12 !important;
    --cz-info-rgb: 143, 15, 18 !important;

    /* Update all the emphasis colors */
    --cz-primary-text-emphasis: #8f0f12 !important;
    --cz-warning-text-emphasis: #8f0f12 !important;
    --cz-info-text-emphasis: #6b0b0d !important;

    /* Update all the background subtle colors */
    --cz-primary-bg-subtle: #f5e6e7 !important;
    --cz-warning-bg-subtle: #f5e6e7 !important;
    --cz-info-bg-subtle: #f0e0e1 !important;

    /* Update all the border subtle colors */
    --cz-primary-border-subtle: #e0b3b5 !important;
    --cz-warning-border-subtle: #e0b3b5 !important;
    --cz-info-border-subtle: #d699a0 !important;

    /* Update link colors */
    --cz-link-color: #b61317 !important;
    --cz-link-hover-color: #8f0f12 !important;
    --cz-link-color-rgb: 182, 19, 23 !important;
    --cz-link-hover-color-rgb: 143, 15, 18 !important;
}

/* Dark theme overrides */
[data-bs-theme=dark] {
    --cz-primary-text-emphasis: #e63946 !important;
    --cz-warning-text-emphasis: #e63946 !important;
    --cz-info-text-emphasis: #ff6b78 !important;

    --cz-primary-bg-subtle: #2f1a1b !important;
    --cz-warning-bg-subtle: #2f1a1b !important;
    --cz-info-bg-subtle: #351a1d !important;

    --cz-primary-border-subtle: #4a2a2b !important;
    --cz-warning-border-subtle: #4a2a2b !important;
    --cz-info-border-subtle: #502a2d !important;

    --cz-link-color: #ff6b78 !important;
    --cz-link-hover-color: #e63946 !important;
    --cz-link-color-rgb: 255, 107, 120 !important;
    --cz-link-hover-color-rgb: 230, 57, 70 !important;
}

/* Specific button overrides */
.btn-warning {
    background-color: #b61317 !important;
    border-color: #b61317 !important;
    color: #ffffff !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: #8f0f12 !important;
    border-color: #8f0f12 !important;
    color: #ffffff !important;
}

.btn-outline-warning {
    color: #b61317 !important;
    border-color: #b61317 !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    background-color: #b61317 !important;
    border-color: #b61317 !important;
    color: #ffffff !important;
}

/* Primary button overrides */
.btn-primary {
    background-color: #b61317 !important;
    border-color: #b61317 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #8f0f12 !important;
    border-color: #8f0f12 !important;
}

.btn-outline-primary {
    color: #b61317 !important;
    border-color: #b61317 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: #b61317 !important;
    border-color: #b61317 !important;
    color: #ffffff !important;
}

/* Navbar and header overrides */
.navbar-warning,
.bg-warning {
    background-color: #b61317 !important;
    color: #ffffff !important;
}

/* Don't override text-warning and text-primary on dark backgrounds */
.bg-black .text-warning,
.navbar.bg-black .text-warning {
    color: #ffffff !important; /* Keep visible on black navbar */
}

.bg-light .text-warning,
.text-warning:not(.bg-black *, .navbar.bg-black *) {
    color: #b61317 !important;
}

.bg-light .text-primary,
.text-primary:not(.bg-black *, .navbar.bg-black *, .dropdown-menu *) {
    color: #b61317 !important;
}

/* Dropdown menu text-primary should be dark for readability */
.dropdown-menu .text-primary {
    color: #8f0f12 !important;
}

/* Alert overrides */
.alert-warning {
    background-color: #f5e6e7 !important;
    border-color: #e0b3b5 !important;
    color: #8f0f12 !important;
}

.alert-primary {
    background-color: #f5e6e7 !important;
    border-color: #e0b3b5 !important;
    color: #8f0f12 !important;
}

/* Badge overrides */
.badge.bg-warning,
.badge.bg-primary {
    background-color: #b61317 !important;
    color: #ffffff !important;
}

/* Border overrides */
.border-warning {
    border-color: #b61317 !important;
}

.border-primary {
    border-color: #b61317 !important;
}

/* Progress bar overrides */
.progress-bar,
.progress-bar-warning {
    background-color: #b61317 !important;
}

/* Form control focus overrides */
.form-control:focus,
.form-select:focus {
    border-color: #b61317 !important;
    box-shadow: 0 0 0 0.25rem rgba(182, 19, 23, 0.25) !important;
}

/* Remove the global link override - too aggressive */
/* Instead, only override specific elements where we want red links */

/* Dropdown menu items should be dark for readability */
.dropdown-menu a,
.dropdown-item,
.dropdown-menu .nav-link {
    color: #333333 !important;
}

.dropdown-menu a:hover,
.dropdown-item:hover,
.dropdown-menu .nav-link:hover {
    color: #ffffff !important;
    background-color: #b61317 !important;
}

/* Navigation bar links - keep them visible based on their background */
.navbar .nav-link,
.navbar .dropdown-toggle {
    /* Don't override - let original styling work */
}

/* Modal menu with light background needs dark text */
.modal-body.bg-light .nav-link,
.modal-body.bg-light a,
.modal-content.bg-light .nav-link,
.modal-content.bg-light a,
.bg-light .nav-link,
.list-group-item.bg-light .nav-link,
.list-group.bg-light .nav-link,
.list-group-item.bg-light a {
    color: #333333 !important;
}

.modal-body.bg-light .nav-link:hover,
.modal-body.bg-light a:hover,
.modal-content.bg-light .nav-link:hover,
.modal-content.bg-light a:hover,
.bg-light .nav-link:hover,
.list-group-item.bg-light .nav-link:hover,
.list-group.bg-light .nav-link:hover,
.list-group-item.bg-light a:hover {
    color: #b61317 !important;
}

/* Product links, footer links, etc. can be red */
.product-card a,
.footer a,
.breadcrumb a,
.card a:not(.btn) {
    color: #b61317 !important;
}

.product-card a:hover,
.footer a:hover,
.breadcrumb a:hover,
.card a:not(.btn):hover {
    color: #8f0f12 !important;
}

/* Toast overrides */
.toast-header .btn-close {
    filter: brightness(0) invert(1);
}

/* Special Black Friday banner styles with animations */
.blackfriday-banner {
    color: #ffffff !important;
    font-weight: bold !important;
    text-align: center !important;
    padding: 0.75rem 0 !important;
    margin-bottom: 0 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.5px !important;
    border-bottom: 3px solid #b61317 !important;
    border-top: 3px solid #b61317 !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    animation: blink-background 2s ease-in-out infinite !important;
}

/* Scrolling text animation - continuous seamless loop */
.blackfriday-banner-text {
    display: inline-block !important;
    white-space: nowrap !important;
    animation: scroll-text 30s linear infinite !important;
    padding-left: 100% !important;
}

/* Background blinking animation */
@keyframes blink-background {
    0%, 100% {
        background-color: #000000;
    }
    50% {
        background-color: #b61317;
    }
}

/* Text scrolling animation - seamless right to left continuous scroll */
@keyframes scroll-text {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Cart and product specific overrides */
.price-text,
.product-price {
    color: #b61317 !important;
}

/* Cartzilla icon colors */
.ci-star-filled {
    color: #b61317 !important;
}

/* List group overrides */
.list-group-item.active {
    background-color: #b61317 !important;
    border-color: #b61317 !important;
}

/* Navigation menu consistency fixes */
/* Make sure all top navigation items are white on the black navbar */
.navbar.bg-black .nav-link {
    color: #ffffff !important;
}

.navbar.bg-black .nav-link:hover,
.navbar.bg-black .nav-link:focus {
    color: #f0f0f0 !important;
}

/* Keep the text-light class working properly */
.navbar.bg-black .text-light {
    color: #ffffff !important;
}

/* Ensure dropdown links in the black navbar work properly */
.navbar.bg-black .dropdown-menu .dropdown-item {
    color: #333333 !important;
}

.navbar.bg-black .dropdown-menu .dropdown-item:hover {
    background-color: #b61317 !important;
    color: #ffffff !important;
}

/* Override any links in the black navigation bar - but NOT in modals */
.navbar.bg-black > .container a,
.navbar.bg-black > div:not(.modal) a {
    color: #ffffff !important;
}

.navbar.bg-black > .container a:hover,
.navbar.bg-black > div:not(.modal) a:hover {
    color: #f0f0f0 !important;
}

/* Info box override - change from blue to black radial gradient */
.info-box {
    background: radial-gradient(circle, #000000, #1a1a1a, #0000) !important;
}

/* IMPORTANT: Modal inside navbar must have dark text on light background */
.navbar .modal .bg-light a,
.navbar .modal .bg-light .nav-link,
.navbar .modal-content.bg-light a,
.navbar .modal-content.bg-light .nav-link,
.navbar .modal-body.bg-light a,
.navbar .modal-body.bg-light .nav-link,
.modal .list-group-item.bg-light a,
.modal .list-group-item.bg-light .nav-link {
    color: #333333 !important;
}

.navbar .modal .bg-light a:hover,
.navbar .modal .bg-light .nav-link:hover,
.navbar .modal-content.bg-light a:hover,
.navbar .modal-content.bg-light .nav-link:hover,
.navbar .modal-body.bg-light a:hover,
.navbar .modal-body.bg-light .nav-link:hover,
.modal .list-group-item.bg-light a:hover,
.modal .list-group-item.bg-light .nav-link:hover {
    color: #b61317 !important;
}