/**
 * PFD Brand Banner — square card filling the dealstore brand column.
 *
 * Sized fluidly: width:100% of the brand column + aspect-ratio:1/1, so it is
 * 320x320 on desktop and shrinks with the column. Capped at 320px when the
 * layout stacks (see the media query at the end).
 *
 * Loaded via wp_enqueue_style() with a dependency on the theme stylesheet, so
 * these rules always come AFTER the theme's. The previous inline <style> block
 * printed at wp_head priority 1, i.e. BEFORE the theme, which meant any theme
 * rule of equal specificity won — most notably `.pfd-brand-col > *` in the
 * mobile query, which matched this element because it is a direct child of
 * .pfd-brand-col (theme uses display:contents there).
 *
 * Every rule is scoped to .pfd-brand-banner so nothing leaks into the theme.
 */

.pfd-brand-banner {
    /* Fills the brand column exactly like the .pfd-brand-box blocks above it —
       a fixed 300px left it 20px narrower and visibly inset. aspect-ratio
       keeps it square at any column width. */
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 1 / 1;

    /* flex:0 0 auto stops the parent flex context (mobile: .pfd-brand-layout
       becomes flex column with align-items:stretch once .pfd-brand-col turns
       into display:contents) from resizing this item vertically. Horizontal
       stretch is what makes width:100% resolve to the full row. */
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 18px 16px;
    border: 1px solid #e5e5e5;
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    overflow: hidden;

    /*
     * The block above is [std_dealstore_info], whose CSS sets margin-top:20px
     * and NO margin-bottom (simple-trustpilot-display/assets/css/frontend.css)
     * — with a 0 top margin here the two boxes sat flush. 20px matches the gap
     * between the brand boxes above it. 15px below matches .pfd-brand-box and
     * collapses cleanly with .pfd-brand-side-widgets' own margin-top:15px.
     */
    margin: 20px 0 15px;
}

/* No descendant box-sizing reset needed: the theme sets
   `*, *::before, *::after { box-sizing: border-box }` globally. */

.pfd-banner-headline {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.3;
    color: #222;
    /* Never squash the text: the badge slot is the only element allowed to
       absorb a shortfall, and it does so by shrinking a circle, not by cutting
       copy short. */
    flex: 0 0 auto;
    /* Cap at 3 lines: a long brand name must not push the badge or the chip
       out of the square, whose height is fixed by aspect-ratio. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
 * Discount badge — the only place the discount number appears.
 *
 * The slot is the flexible element, not the description: it takes whatever
 * height is left over (flex-grow) and centres the circle inside it. That is
 * what removes the empty band the card used to have in the middle — before
 * this, .pfd-banner-desc grew to fill the slack while its text stayed at the
 * top of the box, leaving dead space above the chip.
 *
 * Height budget at 320x320: the badge is 132px. Content box is 320 - 2
 * (border) - 36 (18px padding) = 282px, and the typical stack costs:
 *   headline 1 line   19.5   (all 45 badged brands fit on one line)
 *   desc     3 lines  56.6
 *   chip              34.0
 *   3 x 10px gap      30.0
 *   ----------------------
 *   fixed            140.1  ->  slot gets 141.9px, badge needs 132px.
 *
 * 132px is the largest size that still fits the *untrimmed* layout — the
 * 18px padding, 10px gaps, 10px chip padding and the desc's third line are all
 * original values, none of which had to be sacrificed. (176px would have
 * needed every one of them reduced, and the result read as too dominant.)
 *
 * Worst case is a 3-line headline, which totals 179.1px of fixed content and
 * leaves 102.9px, so the badge shrinks to that rather than overflowing. It
 * stays a circle because width is derived from aspect-ratio, not set
 * alongside height.
 *
 * The badge holds THREE lines ("Up to" / "30%" / "OFF") and still fits at every
 * size it can shrink to. Verified in headless Chrome by forcing the slot from
 * 141px down to 88px: the circle shrinks 132 -> 88px, the value font follows via
 * cqw (40px -> 26.7px), and the widest line is measured against the chord it
 * sits on, not the diameter — all three lines stay inside at every step. The
 * value line is the binding constraint at 78px wide on a 132px circle; "Up to"
 * is only 54px, so adding it did not make the stack any harder to fit.
 */
.pfd-banner-badge-slot {
    flex: 1 1 auto;
    /* min-height:0 is what lets this slot give height back — a flex item will
       not otherwise shrink below its content's height, so the card would clip. */
    min-height: 0;
    display: flex;
    /* Column, not the default row: only then is the badge's height on the main
       axis, so flex-shrink can actually reduce it on a narrow phone. In a row
       the height is the cross axis and align-items pins it regardless.
       align-items centres horizontally, justify-content centres vertically. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pfd-banner-badge {
    /*
     * 132px, but shrinkable: height is the specified size and width comes from
     * aspect-ratio, so when the slot runs short the circle gets smaller instead
     * of being clipped by the card's overflow:hidden. flex-shrink is what makes
     * that safe at every viewport — the card is square, so a narrow phone makes
     * it short as well as narrow, and 132px does not survive that.
     *
     * max-width keeps a very small phone from producing a circle wider than the
     * card: below ~160px of available width the height-derived size would
     * overflow horizontally, and this caps it (aspect-ratio then reduces the
     * height to match, so it stays round).
     */
    flex: 0 1 auto;
    height: 132px;
    width: auto;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    border-radius: 50%;
    /* Query container for the two spans inside, so their type scales with the
       circle instead of being pinned to px. Without this the text overflows
       once the badge shrinks: a fixed 40px "20%" needs a 77.8px chord, but at
       a 103px circle the chord at the text's midline is only 71.9px. inline-size
       (not size) is enough for cqw and avoids any interaction with the
       aspect-ratio that derives this element's width from its height. */
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    /* Theme accent (--pfd-accent, #fa9e19). This sheet loads after the theme
       via wp_enqueue_style(), so the variable is already defined; the literal
       fallback covers any other theme where it is not. */
    background: var(--pfd-accent, #fa9e19);
    /*
     * Dark text, not white. On #fa9e19 white gives only 2.09:1 — below the 3:1
     * floor for large text. #1a1a1a (the theme's --pfd-dark) gives 8.28:1,
     * which passes AAA, and still reads as a sale sticker because the circle
     * keeps the accent colour.
     */
    color: var(--pfd-dark, #1a1a1a);
    /* Ring scales with the circle: 5px on a 132px badge reads like the 3px did
       on the old 88px one. */
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.32);
}

/*
 * Type is sized in cqw against the badge, so it scales down with the circle.
 * A fixed px size would overflow: the badge flex-shrinks to ~103px when the
 * headline takes 3 lines (and smaller still on a narrow phone), and at 103px a
 * 40px "20%" needs a 77.8px chord but only 71.9px is available. At cqw the
 * ratio holds at every size, so the text always stays inside the ring.
 *
 * Percentages of the 132px circle: 40/132 = 30.3cqw, 15/132 = 11.4cqw.
 * The px line first is the fallback for browsers without container queries;
 * the cqw line overrides it where supported.
 */
.pfd-banner-badge-value {
    font-size: 40px;
    font-size: 30.3cqw;
    font-weight: bold;
    line-height: 1;
    letter-spacing: -0.75px;
    letter-spacing: -0.57cqw;
}

/*
 * "Up to" above the number, styled to match "OFF" below it — same size,
 * weight, tracking and opacity — so the circle reads as three centred lines
 * with the number as the visual anchor. It is a prefix, not a qualifier tucked
 * into a corner: a bare "30% OFF" would promise the full 30% on every account,
 * when the code actually discounts by account type and this value is the
 * ceiling.
 *
 * Same cqw basis as .pfd-banner-badge-unit (11.4cqw = 15px on the 132px
 * circle), so the two small lines stay in step as the badge flex-shrinks.
 * The margin is on top here rather than below, mirroring the unit's own
 * separation from the number.
 */
.pfd-banner-badge-prefix {
    margin-bottom: 4px;
    margin-bottom: 3cqw;
    font-size: 15px;
    font-size: 11.4cqw;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 1.8px;
    letter-spacing: 1.36cqw;
    text-transform: uppercase;
    opacity: 0.85;
}

.pfd-banner-badge-unit {
    margin-top: 4px;
    margin-top: 3cqw;
    font-size: 15px;
    font-size: 11.4cqw;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 1.8px;
    letter-spacing: 1.36cqw;
    text-transform: uppercase;
    opacity: 0.85;
}

.pfd-banner-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #444;
    /* Never grows (the badge slot owns the slack) and never squashes — the
       line-clamp is what keeps it inside the square, not flex shrinking. */
    flex: 0 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
 * No-discount variant (6 of the 51 brands that have an affiliate code leave
 * affiliate_discount empty, so there is no badge to fill the middle). Growing
 * the description there would just re-create the dead band, so instead the
 * whole stack is centred vertically and the copy gets its lines back — with no
 * badge competing for height there is room for 4.
 */
.pfd-brand-banner--nobadge {
    justify-content: center;
}

.pfd-brand-banner--nobadge .pfd-banner-desc {
    -webkit-line-clamp: 4;
}

.pfd-banner-chip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.pfd-copy-chip {
    cursor: pointer;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 0;
    background: #111;
    color: #fff;
    font-family: inherit;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pfd-copy-chip:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Tooltip created by JS on copy. */
.pfd-copy-tooltip {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/*
 * Stacked layout (theme switches .pfd-brand-col to display:contents here, so
 * this card becomes a direct flex item of .pfd-brand-layout).
 *
 * The theme's `.pfd-brand-col > *` rule zeroes margin on every child and lets
 * the 20px flex gap do the spacing — but it has the same specificity as this
 * file's base rule, and this file now loads later, so the 20px/15px margins
 * above would win and double up with the gap. Reset them here.
 *
 * max-width caps the square: without it, width:100% + aspect-ratio would
 * render a ~738px giant on a tablet, because the brand column is unwrapped and
 * this item spans the whole row.
 *
 * The cap is 400px rather than 320px. On desktop the brand column is itself
 * 320px, so this value never binds there - it only exists for the stacked
 * layout. But once the column is unwrapped, the .pfd-brand-box blocks sitting
 * beside this card have no width cap of their own: align-items:stretch hands
 * them the full container width (viewport - 30px, .pfd-container's padding).
 * With a 320px cap the card came out ~40px narrower than its neighbours on a
 * 390px phone, which is what made it look undersized.
 *
 * 400px is the container width of the largest real phone (430px viewport -
 * 30px), so below that the cap never binds and the card always matches the
 * boxes around it, while anything wider (480px phablet, 768px tablet, 991px)
 * still stops at 400px instead of becoming a giant square.
 *
 * A narrower card does not starve the badge: .pfd-banner-badge flex-shrinks
 * the circle once the leftover height drops below 88px, which happens under
 * roughly a 350px viewport.
 */
@media (max-width: 991px) {
    .pfd-brand-banner {
        width: 100%;
        /* 400px, not 320px — see the note above this block for why. */
        max-width: 400px;
        margin: 0 auto;
    }
}