/**
 * BestDeal - Global Frontoffice Styles
 * Modern e-commerce styling with animated badges and typography standards
 */

/* ==========================================================================
   1. TYPOGRAPHY - Minimum 1.5rem enforcement
   ========================================================================== */

:root {
    --font-size-min: 1.5rem;
    --font-size-base: 1.5rem;
    --font-size-sm: 1.5rem;
    --font-size-md: 1.6rem;
    --font-size-lg: 1.8rem;
    --font-size-xl: 2rem;
    --font-size-xxl: 2.4rem;

    /* Brand Colors */
    --color-primary: #b4975a;
    --color-primary-dark: #9a8049;
    --color-secondary: #1a1a2e;
    --color-text: #333;
    --color-text-muted: #666;
    --color-border: #eee;
    --color-bg-light: #f8f9fa;
}

/* Base typography - enforce minimum 1.5rem */
body {
    font-size: var(--font-size-base);
    line-height: 1.6;
}

/* Text elements - minimum font size */
p,
span,
a,
li,
label,
td,
th,
div,
.text,
.content,
.description {
    font-size: max(inherit, 1.5rem);
}

/* Form elements */
input,
textarea,
select,
button {
    font-size: max(1.5rem, inherit);
}

/* Small text that should still respect minimum */
.small-text,
small,
.text-sm,
.text-small,
.caption,
.helper-text,
.form-text {
    font-size: 1.5rem !important;
}

/* Exclude icons from font size rules */
i,
svg,
.fa,
.fas,
.far,
.fab,
.fal,
.fad,
[class^="fa-"],
[class*=" fa-"],
.icon,
.rating__list--icon,
.rating__list--icon__svg {
    font-size: inherit;
}

/* Headings remain unaffected (they're already > 1.5rem) */
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2.2rem; }
h3, .h3 { font-size: 1.85rem; }
h4, .h4 { font-size: 1.6rem; }
h5, .h5 { font-size: 1.5rem; }
h6, .h6 { font-size: 1.5rem; }


/* ==========================================================================
   2. PRODUCT BADGES - Animated Gradient Backgrounds
   ========================================================================== */

/* Base Badge Style */
.product-badge,
.badge,
.product__badge--items,
.product__badge--itemssalepromo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 2rem;
    line-height: 2rem;
    padding: 0 10px;
    font-weight: 700;
    font-size: 1.4rem;
    color: #fff;
    border-radius: 6px 0 6px 0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;

    /* Animation setup */
    background-size: 200% 200%;
    animation: badge-gradient-slide 3s ease infinite;
}

/* Gradient Animation Keyframes */
@keyframes badge-gradient-slide {
    0% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* Promo Badge - Red to Dark Red to Black */
.product-badge--promo,
.badge--promo,
.product__badge--itemssalepromo,
[class*="badge"][class*="promo"] {
    background: linear-gradient(
        90deg,
        #ff4757 0%,
        #e74c3c 25%,
        #c0392b 50%,
        #1a1a1a 75%,
        #ff4757 100%
    );
    background-size: 300% 100%;
}

/* New Badge - Teal to Green gradient */
.product-badge--new,
.badge--new,
.product__badge--items.new,
[class*="badge"][class*="new"] {
    background: linear-gradient(
        90deg,
        #00d2d3 0%,
        #1abc9c 33%,
        #27ae60 66%,
        #00d2d3 100%
    );
    background-size: 300% 100%;
}

/* Sold Out Badge - Gray to Dark Gray to Black */
.product-badge--soldout,
.badge--soldout,
.product__badge--items.depleted,
.product__badge--items.epuise,
[class*="badge"][class*="soldout"],
[class*="badge"][class*="epuise"] {
    background: linear-gradient(
        90deg,
        #6c757d 0%,
        #495057 33%,
        #212529 66%,
        #6c757d 100%
    );
    background-size: 300% 100%;
}

/* Bestseller Badge - Gold to Orange gradient */
.product-badge--bestseller,
.badge--bestseller,
[class*="badge"][class*="bestseller"],
[class*="badge"][class*="top"] {
    background: linear-gradient(
        90deg,
        #f39c12 0%,
        #e67e22 33%,
        #d35400 66%,
        #f39c12 100%
    );
    background-size: 300% 100%;
}

/* Badge icon styling */
.product-badge i,
.badge i,
.product__badge--items i,
.product__badge--itemssalepromo i {
    font-size: 1rem;
    margin-right: 4px;
}


/* ==========================================================================
   3. PRODUCT CARD ENHANCEMENTS
   ========================================================================== */

/* Product title link - ensure minimum font size */
.product__items--content__title,
.product__items--content__title a,
.product-card__title,
.product-card__title a {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
}

.product__items--content__title a:hover,
.product-card__title a:hover {
    color: var(--color-primary);
}

/* Price styling */
.current__price,
.product-card__price-current {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary);
}

.old__price,
.product-card__price-old,
.product-card__price-original {
    font-size: 1.5rem;
    color: #999;
    text-decoration: line-through;
}

/* Add to cart button text */
.add__to--cart__text,
.product-card__cart-btn span {
    font-size: 1.5rem;
    font-weight: 600;
}


/* ==========================================================================
   4. SECTION HEADINGS
   ========================================================================== */

.section__heading--maintitle {
    font-size: 2.2rem !important;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}



/* ==========================================================================
   5. TABS & BUTTONS
   ========================================================================== */

.product__tab--primary__btn__list,
.product-tabs__btn {
    font-size: 1.5rem !important;
    font-weight: 600;
    padding: 12px 24px;
}

.primary__btn,
.view-all-btn {
    font-size: 1.5rem !important;
    font-weight: 600;
}


/* ==========================================================================
   6. CATEGORY BANNERS
   ========================================================================== */

.banner__items--content__title,
.category-card__title {
    font-size: 1.5rem;
    font-weight: 700;
}


/* ==========================================================================
   7. LOADING & EMPTY STATES
   ========================================================================== */

.loading-text,
.empty-state__text,
.empty-text {
    font-size: 1.5rem;
    color: var(--color-text-muted);
}


/* ==========================================================================
   8. FORM ELEMENTS
   ========================================================================== */

.form-control,
.input-field,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
    font-size: 1.5rem;
}

.form-label,
label {
    font-size: 1.5rem;
    font-weight: 500;
}


/* ==========================================================================
   9. NAVIGATION & MENU
   ========================================================================== */

.nav-link,
.menu-link,
.header__menu--items,
.header__menu--link {
    font-size: 1.5rem;
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.footer__widget--title {
    font-size: 1.6rem;
    font-weight: 700;
}

.footer__widget--menu__text,
.footer__widget--menu a {
    font-size: 1.5rem;
}


/* ==========================================================================
   11. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 991px) {
    :root {
        --font-size-min: 1.4rem;
        --font-size-base: 1.4rem;
    }

    .product-badge,
    .badge,
    .product__badge--items,
    .product__badge--itemssalepromo {
        font-size: 1.3rem;
        height: 1.8rem;
        line-height: 1.8rem;
        padding: 0 8px;
    }

    .section__heading--maintitle {
        font-size: 1.85rem !important;
    }
}

@media (max-width: 767px) {
    :root {
        --font-size-min: 1.3rem;
        --font-size-base: 1.3rem;
    }

    .product-badge,
    .badge,
    .product__badge--items,
    .product__badge--itemssalepromo {
        font-size: 1.2rem;
        height: 1.6rem;
        line-height: 1.6rem;
        padding: 0 7px;
    }

    .section__heading--maintitle {
        font-size: 1.5rem !important;
    }

    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.8rem; }
    h3, .h3 { font-size: 1.6rem; }
}


/* ==========================================================================
   12. UTILITY CLASSES
   ========================================================================== */

.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-muted { color: var(--color-text-muted) !important; }

.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-light { background-color: var(--color-bg-light) !important; }


/* ==========================================================================
   13. ENSURE ANIMATION PERFORMANCE
   ========================================================================== */

.product-badge,
.badge,
.product__badge--items,
.product__badge--itemssalepromo {
    will-change: background-position;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .product-badge,
    .badge,
    .product__badge--items,
    .product__badge--itemssalepromo {
        animation: none;
        background-size: 100% 100%;
    }
}