/**
 * promo_popup.css — full-width bottom-of-container promo banner.
 *
 * Shared layout for promo_popup_v1.tpl.php + v2.tpl.php (independent
 * A/B variants). Different copy per template, identical visual shell.
 *
 * Structure:
 *
 *   .trend-promo-popup-root         position:fixed, full viewport, click-through
 *     .trend-promo-popup-container  shares site .container width (1088px etc)
 *       .trend-promo-popup          the actual dark banner card
 *         .trend-promo-popup-close      × in the top-right corner
 *         .trend-promo-popup-content    title + body block
 *         .trend-promo-popup-cta        CTA button on the right
 *
 * Difference from trial_popup.css (small bottom-LEFT card):
 *   - Card is full container width, horizontally laid out: text on
 *     the left, CTA pill on the right. Bigger visual presence so it
 *     pulls attention more aggressively than the unobtrusive bottom-
 *     left tray.
 *   - Mobile collapses to a stacked vertical card (title → body →
 *     full-width CTA), still pinned to the bottom edge.
 *
 * Visibility is driven by the native `hidden` attribute (toggled by
 * assets/js/promo_popup.js). A small slide-up animation runs via the
 * `is-visible` class so the banner doesn't pop out of nowhere.
 */

/* Root — full-viewport fixed wrapper, pointer-events:none lets the
   page behind stay interactive (no backdrop, no overlay). z-index
   matches trial_popup so a stray simultaneous open looks coherent. */
.trend-promo-popup-root {
    position: fixed;
    inset: 0;
    z-index: 9500;
    pointer-events: none;
}
.trend-promo-popup-root[hidden] { display: none; }

/* Container mirrors site .container width, same 3-step breakpoint
   logic as trial_popup.css. Pinned to the bottom of the viewport
   horizontally centred. */
.trend-promo-popup-container {
    width: 100%;
    max-width: 1088px;
    height: 100%;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: flex-end;       /* pin to bottom */
    justify-content: stretch;    /* card spans full width */
}
@media only screen and (min-width: 1445px) {
    .trend-promo-popup-container { max-width: calc(100vw - 357px); }
}
@media only screen and (min-width: 1717px) {
    .trend-promo-popup-container { max-width: 1360px; }
}

/* The banner card — dark slate with a brand-red accent gradient.
   Horizontal layout: text block on the left, CTA on the right.
   Fills the full container width so it reads as a wide attention-
   grabbing strip rather than a small notification.
   2026-bump: bigger paddings, larger type, dual-layer background
   (linear base + radial highlight) so the banner has more visual
   presence and reads as a hero card rather than a notification. */
.trend-promo-popup {
    pointer-events: auto;
    position: relative;
    width: 100%;
    margin: 0 0 32px;
    padding: 56px 48px 56px 56px;
    display: flex;
    align-items: center;
    gap: 32px;
    /* Two-layer background: a soft warm radial halo on the right
       (where the CTA sits — pulls the eye toward the action) over a
       deep navy linear base. Trend brand red tinted at 18% so the
       glow registers without overpowering the type. */
    background:
        radial-gradient(circle at 88% 50%, rgba(200, 16, 26, 0.18) 0%, transparent 55%),
        linear-gradient(135deg, #0F1826 0%, #1B2740 60%, #243456 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 28px 68px -14px rgba(0, 0, 0, 0.65),
                0 12px 26px -6px rgba(0, 0, 0, 0.42);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.32s ease, transform 0.32s ease;
}
/* Brand-red accent bar at the LEFT edge — bumped to 6px and given a
   subtle vertical gradient so it reads as a strong identity cue
   rather than a thin pinstripe. Insets adjusted (24px) to track the
   taller padding so the stripe stays visually centred on the card. */
.trend-promo-popup::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 24px;
    width: 6px;
    border-radius: 3px 0 0 3px;
    background: linear-gradient(180deg, #E11924 0%, #C8101A 50%, #A50D15 100%);
    box-shadow: 0 0 18px -2px rgba(225, 25, 36, 0.55);
}
.trend-promo-popup-root.is-visible .trend-promo-popup {
    opacity: 1;
    transform: translateY(0);
}

/* Close (×) — top-right, muted white, darkens on hover. Slightly
   bigger hit area to match the bumped card scale. */
.trend-promo-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: rgba(255, 255, 255, 0.55);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.trend-promo-popup-close:hover,
.trend-promo-popup-close:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    outline: none;
}

/* Content block — title + body stacked, takes available horizontal
   space. min-width:0 lets it shrink (vital for narrow containers
   without breaking the flex layout). Right padding leaves room for
   the close button so the title can't collide with the × even if
   translations grow long. */
.trend-promo-popup-content {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 32px;
}

.trend-promo-popup-title {
    margin: 0 0 10px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: #ffffff;
    /* Subtle brand-tinted text shadow so the title reads crisp over
       the gradient background — too small to notice as a "shadow",
       big enough to add definition. */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.trend-promo-popup-body {
    margin: 0;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 400;
    color: #DCE3EE;
}

/* CTA — pill on the right of the banner. Saturated Trend red gradient,
   generous padding, brighter glow so it reads as a primary action
   even at a glance. Bumped from the previous unobtrusive button. */
.trend-promo-popup-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 38px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #ffffff !important;   /* override global anchor color */
    background: linear-gradient(135deg, #E11924 0%, #C8101A 100%);
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, transform 0.08s, box-shadow 0.18s;
    box-shadow: 0 10px 24px -6px rgba(200, 16, 26, 0.65),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.trend-promo-popup-cta:hover,
.trend-promo-popup-cta:focus-visible {
    background: linear-gradient(135deg, #C8101A 0%, #A50D15 100%);
    box-shadow: 0 14px 30px -6px rgba(200, 16, 26, 0.75),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
    outline: none;
    transform: translateY(-1px);
}
.trend-promo-popup-cta:active {
    transform: translateY(1px);
}

/* Tablet — tighter padding, slightly smaller title, but layout stays
   horizontal. */
@media (max-width: 900px) {
    .trend-promo-popup {
        padding: 42px 32px 42px 40px;
        gap: 24px;
    }
    .trend-promo-popup-title {
        font-size: 24px;
    }
    .trend-promo-popup-body {
        font-size: 17px;
    }
    .trend-promo-popup-cta {
        padding: 15px 28px;
        font-size: 15px;
    }
}

/* Mobile — stack vertically, full viewport width, flush-bottom sheet
   like trial_popup. Close button stays in top-right; content above the
   CTA which spans the full sheet width. */
@media (max-width: 600px) {
    .trend-promo-popup-container {
        padding: 0;
    }
    .trend-promo-popup {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        width: 100%;
        margin: 0;
        padding: 44px 24px 36px;
        border-radius: 16px 16px 0 0;
        max-height: 70vh;
        overflow-y: auto;
        box-shadow: 0 -14px 36px -6px rgba(0, 0, 0, 0.5);
    }
    /* Vertical accent bar shifts to a top horizontal bar on mobile —
       matches the bottom-docked sheet's reading direction. */
    .trend-promo-popup::before {
        left: 24px;
        right: 24px;
        top: 0;
        bottom: auto;
        width: auto;
        height: 4px;
        border-radius: 0 0 3px 3px;
        background: linear-gradient(90deg, #E11924 0%, #C8101A 50%, #A50D15 100%);
    }
    .trend-promo-popup-content {
        padding-right: 36px;   /* room for close button only */
    }
    .trend-promo-popup-title {
        font-size: 23px;
        margin-bottom: 10px;
        line-height: 1.22;
    }
    .trend-promo-popup-body {
        font-size: 17px;
        line-height: 1.5;
    }
    .trend-promo-popup-cta {
        width: 100%;
        padding: 16px 18px;
        font-size: 16px;
    }
}