/* ========================================
 * TODAY'S DEAL - homepage section, header CTA, floating badge
 * ======================================== */

/* Tighter than the default .section padding - user wants less empty
   space above the heading so all 6 products are closer to the fold. */
.todays-deal-section {
    background: linear-gradient(180deg, var(--color-accent-light) 0%, var(--color-bg) 100%);
    padding-top: var(--space-6);
    padding-bottom: var(--space-8);
}

@media (min-width: 768px) {
    .todays-deal-section {
        padding-top: var(--space-8);
        padding-bottom: var(--space-10);
    }
}

@media (min-width: 1024px) {
    .todays-deal-section {
        padding-top: var(--space-8);
        padding-bottom: var(--space-12);
    }
}

.todays-deal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.todays-deal__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--color-text);
    margin: 0;
}

.todays-deal__icon {
    color: var(--color-accent);
    font-size: var(--text-2xl);
}

.todays-deal__pulse {
    animation: todays-deal-pulse 1.4s ease-in-out infinite;
}

@keyframes todays-deal-pulse {
    0%, 100% {
        color: var(--color-text);
        text-shadow: none;
    }
    50% {
        color: var(--color-accent);
        text-shadow: 0 0 16px rgba(var(--color-primary-rgb), 0.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .todays-deal__pulse {
        animation: none;
        color: var(--color-accent);
    }
}

.todays-deal__view-all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--duration-150) var(--ease-out);
}

.todays-deal__view-all:hover {
    color: var(--color-primary-hover);
}

.todays-deal__disclaimer {
    margin-top: var(--space-4);
}

/* ========================================
 * DISCOUNT % - site-wide, every place a discounted price shows (acms_card,
 * acms_grid, acms_list - single reviews, roundups, comparison rows, Today's
 * Deal, /deals/ page). Bigger + a fast, punchy blink so the % is the first
 * thing that grabs attention, consistent everywhere.
 * ======================================== */

.acms-grid__price-discount,
.acms-price-inline__discount {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    animation: todays-deal-discount-blink 0.7s ease-in-out infinite;
}

.acms-badge--discount,
.acms-list__discount {
    font-size: 13px;
    animation: todays-deal-discount-badge-blink 0.7s ease-in-out infinite;
}

@keyframes todays-deal-discount-blink {
    0%, 100% {
        color: var(--color-error);
        transform: scale(1);
    }
    50% {
        color: var(--color-accent);
        transform: scale(1.12);
    }
}

@keyframes todays-deal-discount-badge-blink {
    0%, 100% {
        background-color: var(--color-error);
        transform: scale(1);
    }
    50% {
        background-color: var(--color-accent);
        transform: scale(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .acms-grid__price-discount,
    .acms-price-inline__discount {
        animation: none;
        color: var(--color-error);
    }

    .acms-badge--discount,
    .acms-list__discount {
        animation: none;
        background-color: var(--color-error);
    }
}

/* ========================================
 * HEADER CTA - "Today's Deals" button (site-header.php + nav-mobile.php)
 * More prominent + blinking than the plain static version - pulses
 * background color + a soft glow, plus a gentle scale "breathe".
 * ======================================== */

.header__cta,
.mobile-nav__cta {
    animation: header-cta-pulse 1.6s ease-in-out infinite;
    position: relative;
}

@keyframes header-cta-pulse {
    0%, 100% {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
        box-shadow: 0 0 0 rgba(224, 122, 95, 0);
        transform: scale(1);
    }
    50% {
        background-color: var(--color-accent-hover);
        border-color: var(--color-accent-hover);
        box-shadow: 0 0 14px rgba(224, 122, 95, 0.55);
        transform: scale(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header__cta,
    .mobile-nav__cta {
        animation: none;
        background-color: var(--color-accent);
        border-color: var(--color-accent);
    }
}

/* ========================================
 * FLOATING DEALS BADGE - fixed, every page, bottom-left (existing
 * .acms-notification toast already owns bottom-right, see post.css)
 * ======================================== */

.floating-deals-badge {
    position: fixed;
    left: var(--space-4);
    bottom: var(--space-4);
    left: max(var(--space-4), env(safe-area-inset-left));
    bottom: max(var(--space-4), env(safe-area-inset-bottom));
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2-5) var(--space-4);
    background-color: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    animation: floating-badge-pulse 1.6s ease-in-out infinite;
    transition: transform var(--duration-150) var(--ease-out);
}

.floating-deals-badge:hover {
    transform: scale(1.06);
}

.floating-deals-badge i {
    font-size: var(--text-base);
}

@keyframes floating-badge-pulse {
    0%, 100% {
        box-shadow: var(--shadow-lg), 0 0 0 rgba(224, 122, 95, 0);
    }
    50% {
        box-shadow: var(--shadow-lg), 0 0 16px rgba(224, 122, 95, 0.6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-deals-badge {
        animation: none;
    }
}

/* Small screens: keep the icon + a small label (not icon-only) so it still
   reads as "deals" at a glance, just compact enough to not cover content. */
@media (max-width: 480px) {
    .floating-deals-badge {
        padding: var(--space-2) var(--space-3);
        gap: var(--space-1);
    }

    .floating-deals-badge span {
        font-size: var(--text-xs);
    }

    .floating-deals-badge i {
        font-size: var(--text-sm);
    }
}

/* On the deals page itself, stop pulsing everything that points to it -
   no point blinking at a page the visitor is already looking at. */
.is-deals-page .header__cta,
.is-deals-page .mobile-nav__cta,
.is-deals-page .floating-deals-badge {
    animation: none;
}

/* ========================================
 * INLINE PRICE - [acms_price asin="..."] output, used next to hand-written
 * CTA buttons embedded in post content (Quick Verdict / Final Verdict boxes)
 * ======================================== */

.acms-price-inline {
    /* inline-flex (not flex) so it flows on the same line as the hand-written
       CTA button right after it, instead of forcing its own line - the
       button itself is already inline-flex (.acms-btn in frontend.css), so
       browser text-flow lines them up naturally and only wraps if the
       combined width doesn't fit. */
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-2) var(--space-3) var(--space-2) 0;
    vertical-align: middle;
}

/* Reuse the plugin's own shared price-color variables (frontend.css) so
   [acms_price] matches acms_card/grid/list exactly instead of drifting to
   the theme's separate neutral text tokens. */
.acms-price-inline__current {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--acms-price-color, #b12704);
}

.acms-price-inline__original {
    font-size: var(--text-sm);
    color: var(--acms-price-original, #000000);
}

.acms-price-inline__updated {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ========================================
 * STICKY PRICE BAR - single-product review pages, sits right below the
 * (already sticky) site header, slides in once scrolled past the fold.
 * ======================================== */

.sticky-price-bar {
    position: fixed;
    top: var(--header-height-mobile);
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-120%);
    opacity: 0;
    transition: transform var(--duration-300) var(--ease-out), opacity var(--duration-300) var(--ease-out);
    pointer-events: none;
}

.sticky-price-bar.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 768px) {
    .sticky-price-bar {
        top: var(--header-height);
    }
}

.sticky-price-bar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.sticky-price-bar__image {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.sticky-price-bar__title {
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sticky-price-bar__price {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--acms-price-color, #b12704);
    white-space: nowrap;
}

.sticky-price-bar__original {
    font-size: var(--text-xs);
    color: var(--acms-price-original, #000000);
    white-space: nowrap;
    text-decoration: line-through;
}

.sticky-price-bar__discount {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    white-space: nowrap;
    animation: todays-deal-discount-blink 0.7s ease-in-out infinite;
}

.sticky-price-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .sticky-price-bar__title {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sticky-price-bar {
        transition: none;
    }

    .sticky-price-bar__discount {
        animation: none;
        color: var(--color-error);
    }
}

/* ========================================
 * CLS-FIX 2026-07-25: guaranteed-final-word override for the Today's Deal
 * grid's column count, using a 2-class selector (.todays-deal-section
 * .acms-grid) so it beats affiliatecms-pro/assets/css/frontend.css's own
 * .acms-grid media queries (1-class selector, same specificity as this
 * file's cascade position can't reliably guarantee winning) NO MATTER which
 * stylesheet finishes loading first. Root cause: frontend.js's responsive JS
 * (applyResponsiveClasses()) measures the grid's own offsetWidth (~32px
 * narrower than viewport, inside .container's 16px+16px padding), while
 * frontend.css's media queries match raw VIEWPORT width using the SAME
 * breakpoint numbers (389/600/900) - so CSS and JS disagreed right at the
 * boundary (e.g. 390px viewport: CSS picks 2-col via frontend.css, JS's
 * 358px measured container picks 1-col), causing a large layout shift when
 * JS "corrected" it after first paint. This section is always full-viewport-
 * width (never sidebar-nested), so these +32px-adjusted thresholds are safe
 * to hardcode here - do NOT copy this pattern anywhere the grid might be
 * narrower than the full container (padding math would differ).
 * Deliberately scoped to .todays-deal-section only - frontend.css itself is
 * left untouched to avoid affecting any other .acms-grid usage site-wide
 * (roundup articles, comparison sections, etc.) which may sit in different
 * container widths.
 * ======================================== */
@media (max-width: 421px) {
    .todays-deal-section .acms-grid {
        --acms-grid-columns: 1;
        --acms-grid-gap: var(--space-3);
    }
}

@media (min-width: 422px) and (max-width: 632px) {
    .todays-deal-section .acms-grid {
        --acms-grid-columns: 2;
        --acms-grid-gap: var(--space-2);
    }
}

@media (min-width: 633px) and (max-width: 932px) {
    .todays-deal-section .acms-grid {
        --acms-grid-columns: 3;
        --acms-grid-gap: var(--space-4);
    }
}