/**
 * trial_popup.css — site-wide "claim 3 free premium articles" popup.
 *
 * The popup consists of two wrappers + the card itself:
 *
 *   .trend-trial-popup-root         position:fixed, full viewport, click-through
 *     .trend-trial-popup-container  shares site .container width (1088px), right-
 *                                   or bottom-anchored depending on viewport
 *       .trend-trial-popup          the actual dark card — catches clicks
 *
 * The root wrapper is the trick that keeps the popup "non-blocking":
 * pointer-events:none lets mouse/touch events pass through empty areas to
 * the page behind; only the popup card opts back in with pointer-events:auto.
 * No backdrop, no overlay — the user can scroll, click links, and navigate
 * the rest of the page while the popup is visible.
 *
 * Visibility is driven by the native `hidden` attribute (toggled by
 * assets/js/trial_popup.js). A small slide-in animation runs via the
 * `is-visible` class so the popup doesn't pop out of nowhere.
 */

/* Root — full-viewport fixed wrapper. z-index high enough to clear the
   sticky header (site header uses ~1000) but below any modal/dialog stack
   that might exist later. pointer-events:none is the key line here. */
.trend-trial-popup-root {
    position: fixed;
    inset: 0;
    z-index: 9500;
    pointer-events: none;
}
.trend-trial-popup-root[hidden] { display: none; }

/* Container mirrors the site's .container exactly. The real .container
   on trend.az has THREE breakpoints (from the source SCSS):
     - up to 1444px:    max-width: 1088px
                        ($minFullContainerWidth = 728+300+30+15*2)
     - 1445–1716px:     max-width: calc(100vw - 357px)
                        (357 = $brandingMinWidth*2 + $scrollBarWidth —
                         the side-branding ad rails hug the container)
     - 1717px and up:   max-width: 1360px   (hard cap)
   Earlier revisions used a flat max-width: 1088px which drifted away from
   the true container edge on wide monitors. Mirroring all three steps
   keeps the popup pinned to the exact left edge of the site's content
   grid at every viewport width. */
.trend-trial-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: flex-start; /* pin to left */
}
/* Mid-range: branding rails kick in, container tracks viewport width
   minus the rail allowance. */
@media only screen and (min-width: 1445px) {
    .trend-trial-popup-container { max-width: calc(100vw - 357px); }
}
/* Wide: container hits its hard cap and stays there. */
@media only screen and (min-width: 1717px) {
    .trend-trial-popup-container { max-width: 1360px; }
}

/* The card itself — dark slate with Trend-brand red accents. 360px width
   on desktop is enough for 2 lines of title + ~3 lines of body + a full-
   width CTA without feeling cramped.

   translateY starts slightly below final position so the entrance slides
   up when the root is un-hidden (see .is-visible below). */
.trend-trial-popup {
    pointer-events: auto;
    position: relative;
    /* Bumped from 360 → 420px width and padded more generously (32/36/30)
       so the card feels like a proper banner rather than a side notification.
       Gives the 2-line title and 3-line body room to breathe without wrapping
       awkwardly in any of the 5 locales. */
    width: 420px;
    max-width: 100%;
    margin: 0 0 32px;
    padding: 32px 36px 30px;
    background: #0F1826;
    color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 24px 56px -12px rgba(0, 0, 0, 0.60),
                0 10px 22px -6px rgba(0, 0, 0, 0.38);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.trend-trial-popup-root.is-visible .trend-trial-popup {
    opacity: 1;
    transform: translateY(0);
}

/* Close (×) — top-right, muted white, darkens on hover. Generous hit
   area (28px) without a visible button frame. */
.trend-trial-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: 6px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.trend-trial-popup-close:hover,
.trend-trial-popup-close:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

/* Title — bold, tight line-height. Reserves right padding so long
   translations don't collide with the close button. */
.trend-trial-popup-title {
    margin: 0 32px 14px 0;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
}

/* Short red accent bar — classic Trend brand cue (same red as the site's
   theme-color #87080E, nudged slightly brighter so it reads against the
   dark card). */
.trend-trial-popup-accent {
    width: 52px;
    height: 3px;
    margin: 0 0 18px;
    background: #C8101A;
    border-radius: 2px;
}

/* Body — first sentence regular, emphasized sentence bold (rendered as
   <strong> inside the paragraph). Line-height kept generous for legibility
   on a dark background. */
.trend-trial-popup-body {
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.6;
    color: #E7ECF2;
}
.trend-trial-popup-body strong {
    display: inline; /* stays inline — translators may need to reflow */
    color: #ffffff;
    font-weight: 700;
}

/* CTA button — full-width, saturated Trend red. Uppercase + letter-spacing
   matches the "CLAIM OFFER" treatment in the reference screenshot. */
.trend-trial-popup-cta {
    display: block;
    width: 100%;
    padding: 15px 18px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff !important; /* overrides global <a> color rules */
    background: #C8101A;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s, transform 0.08s;
}
.trend-trial-popup-cta:hover,
.trend-trial-popup-cta:focus-visible {
    background: #A50D15;
    outline: none;
}
.trend-trial-popup-cta:active {
    transform: translateY(1px);
}

/* Mobile — bottom-docked sheet spanning the full viewport width. Rounded
   top corners only, no bottom margin (flush to the bottom edge), and a
   50vh max-height so it never covers more than half the screen regardless
   of content length (overflow scrolls inside the card). */
@media (max-width: 600px) {
    .trend-trial-popup-container {
        padding: 0;
    }
    .trend-trial-popup {
        width: 100%;
        margin: 0;
        padding: 28px 24px 24px;
        border-radius: 14px 14px 0 0;
        max-height: 50vh;
        overflow-y: auto;
        box-shadow: 0 -10px 30px -5px rgba(0, 0, 0, 0.45);
    }
    .trend-trial-popup-title {
        font-size: 22px;
    }
}