/* Lyra Blocks & Templates — public front-end styles.
 *
 * Loaded on every front-end page view AND inside the builder iframe
 * preview, so blocks that rely on class-based effects (like the Flip
 * Box's 3D hover/tap rotation) animate identically on the published
 * site and while editing.
 *
 * All selectors are namespaced with `lyra-bt-` so they can't collide with
 * theme or Lyra core CSS.
 *
 * ── Flip Box (4 motion variations) ────────────────────────────────────
 *
 * Class contract — each variation uses a different wrapper class,
 * applied via Lyra's universal `css_class` field on the preset's
 * nested containers. All four variations use the same child class
 * structure for simplicity:
 *
 *   Variation          Wrapper class              Structure inside
 *   ─────────────────  ─────────────────────────  ──────────────────────────
 *   Left-edge pivot    .lyra-bt-flipbook-left         back + front faces
 *   Right-edge pivot   .lyra-bt-flipbook-right        back + front faces
 *   Top-edge pivot     .lyra-bt-flipbook-top          back + front faces
 *   Center card flip   .lyra-bt-flipbox-wrap          inner → front + back
 *
 * The !important flags are pragmatic — Lyra's container renderer emits
 * inline `position:relative` on the element chosen by its layout
 * fields, which would otherwise beat our positioning by specificity
 * (inline > class).
 *
 * Triggers supported (by design, per user spec):
 *   - :hover (desktop)
 *   - :focus-within (keyboard users)
 *   - .is-flipped class toggled by frontend.js on click/tap/Enter/Space
 *
 * Shadow on the turning edge: the front face grows a directional box-
 * shadow during rotation, simulating light catching a paper page as
 * it lifts off the surface.
 * ────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════
 * Shared wrapper — every variation needs 3D perspective and a definite
 * height so the absolutely-positioned faces have something to fill.
 * The min-height fallback kicks in if the user clears the container-
 * height field in Lyra's settings.
 * ══════════════════════════════════════════════════════════════════════ */
.lyra-bt-flipbox-wrap,
.lyra-bt-flipbook-left,
.lyra-bt-flipbook-right,
.lyra-bt-flipbook-top {
    position: relative !important;
    perspective: 1400px;
    -webkit-perspective: 1400px;
    min-height: 320px;
    cursor: pointer;
    outline: none;
}
.lyra-bt-flipbox-wrap:focus-visible,
.lyra-bt-flipbook-left:focus-visible,
.lyra-bt-flipbook-right:focus-visible,
.lyra-bt-flipbook-top:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 4px;
}

/* ══════════════════════════════════════════════════════════════════════
 * CENTER CARD FLIP — front + back stacked inside a rotating inner.
 * This is the classic implementation; used when the user picks
 * "Center Card Flip" variation.
 * ══════════════════════════════════════════════════════════════════════ */
.lyra-bt-flipbox-inner {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.4, 0, .2, 1);
    -webkit-transition: -webkit-transform .7s cubic-bezier(.4, 0, .2, 1);
}
.lyra-bt-flipbox-wrap:hover .lyra-bt-flipbox-inner,
.lyra-bt-flipbox-wrap:focus-within .lyra-bt-flipbox-inner,
.lyra-bt-flipbox-wrap.is-flipped .lyra-bt-flipbox-inner {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.lyra-bt-flipbox-face-front,
.lyra-bt-flipbox-face-back {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    transition: box-shadow .7s cubic-bezier(.4, 0, .2, 1);
}
.lyra-bt-flipbox-face-back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
/* Paper-turn shadow — appears on the FRONT face as it starts turning
 * (symmetric shadow since the axis is central). */
.lyra-bt-flipbox-wrap:hover .lyra-bt-flipbox-face-front,
.lyra-bt-flipbox-wrap:focus-within .lyra-bt-flipbox-face-front,
.lyra-bt-flipbox-wrap.is-flipped .lyra-bt-flipbox-face-front {
    box-shadow: 0 12px 28px -6px rgba(15, 23, 42, .35);
}

/* ══════════════════════════════════════════════════════════════════════
 * EDGE-PIVOT PAGE TURN (shared bits)
 * The front face peels back around one edge, revealing the back face
 * which sits permanently underneath. This is the "page being turned"
 * motion: you can see both pages during the animation (tilting front +
 * static back), then backface-hidden hides the front once it crosses
 * perpendicular.
 * ══════════════════════════════════════════════════════════════════════ */
.lyra-bt-flipbook-back,
.lyra-bt-flipbook-front {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.lyra-bt-flipbook-back  { z-index: 1; }
.lyra-bt-flipbook-front {
    z-index: 2;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Same easing curve for transform AND box-shadow so the paper-turn
     * shadow tracks the rotation exactly. */
    transition: transform .85s cubic-bezier(.4, .05, .2, 1),
                box-shadow .85s cubic-bezier(.4, .05, .2, 1);
    -webkit-transition: -webkit-transform .85s cubic-bezier(.4, .05, .2, 1),
                        box-shadow .85s cubic-bezier(.4, .05, .2, 1);
    /* Rest-state shadow = transparent rgba (NOT `none`) so the
     * animation can interpolate to/from the hover shadow smoothly. */
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* ── LEFT-edge pivot (spine on the left) ─────────────────────────── */
.lyra-bt-flipbook-left .lyra-bt-flipbook-front {
    transform-origin: left center;
}
.lyra-bt-flipbook-left:hover .lyra-bt-flipbook-front,
.lyra-bt-flipbook-left:focus-within .lyra-bt-flipbook-front,
.lyra-bt-flipbook-left.is-flipped .lyra-bt-flipbook-front {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    /* Shadow swells on the RIGHT side (opposite the spine) as the
     * page lifts off. Negative Y pushes the shadow slightly up so it
     * reads like overhead lighting. */
    box-shadow: 18px -4px 32px -4px rgba(15, 23, 42, .35);
}

/* ── RIGHT-edge pivot (spine on the right) ───────────────────────── */
.lyra-bt-flipbook-right .lyra-bt-flipbook-front {
    transform-origin: right center;
}
.lyra-bt-flipbook-right:hover .lyra-bt-flipbook-front,
.lyra-bt-flipbook-right:focus-within .lyra-bt-flipbook-front,
.lyra-bt-flipbook-right.is-flipped .lyra-bt-flipbook-front {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    box-shadow: -18px -4px 32px -4px rgba(15, 23, 42, .35);
}

/* ── TOP-edge pivot (spine on the top — notepad flip) ────────────── */
.lyra-bt-flipbook-top .lyra-bt-flipbook-front {
    transform-origin: top center;
}
.lyra-bt-flipbook-top:hover .lyra-bt-flipbook-front,
.lyra-bt-flipbook-top:focus-within .lyra-bt-flipbook-front,
.lyra-bt-flipbook-top.is-flipped .lyra-bt-flipbook-front {
    transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
    /* Shadow drops below the lifting edge. */
    box-shadow: 0 18px 32px -4px rgba(15, 23, 42, .35);
}

/* ══════════════════════════════════════════════════════════════════════
 * Respect prefers-reduced-motion — the flip still works (faces still
 * swap visibility), but transitions are disabled so there's no motion.
 * ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .lyra-bt-flipbox-inner,
    .lyra-bt-flipbook-front,
    .lyra-bt-flipbox-face-front {
        transition: none !important;
        -webkit-transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
 * ICON LIST — rules lifted byte-for-byte from Lyra's layout.css "37. ICON
 * LIST" section, removed from Lyra in the same revision that added
 * LYRA_BT_Owned_Blocks. The block markup is `.wppw-icon-list` (group wrapper)
 * with a `.wppw-icon-list-items` <ul> of `.wppw-icon-list-item` rows;
 * each row has a `.wppw-icon-list-icon` swatch (28px green-circle that
 * holds either an emoji glyph or a 24px <img class="wppw-icon-list-img">)
 * and a `.wppw-icon-list-content` text column with optional <strong>
 * bold label + em-dash + `.wppw-icon-list-desc` description span.
 * Optional CTA below uses `.wppw-icon-list-btn-wrap` / `.wppw-icon-list-btn`.
 *
 * Note: this stylesheet is enqueued unconditionally on every front-end
 * page (see LYRA_BT_Admin::enqueue_frontend()), unlike Lyra's bucket-split
 * CSS which loads per-block. That's the existing pattern this add-on
 * uses — keeping it here matches the flip-book / flip-box rules above.
 * ══════════════════════════════════════════════════════════════════════ */
.wppw-icon-list { padding: 20px 20px; margin: 1em auto; }
.wppw-icon-list h2 { font-size: clamp(22px, 3.5vw, 28px); font-weight: 700; color: var(--wppw-dark); margin: 0 0 16px; }
.wppw-icon-list-items { list-style: none; margin: 0; padding: 0; }
.wppw-icon-list-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.wppw-icon-list-item:last-child { border-bottom: none; }
.wppw-icon-list-icon {
    flex-shrink: 0; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; color: var(--wppw-success);
    background: #e6f7ed; border-radius: 50%;
}
/* Custom icon images: constrained to 24px tall to match the visual weight
   of emoji glyphs in the same list. width:auto preserves aspect ratio for
   non-square logos/badges. The parent .wppw-icon-list-icon is 28px so the
   24px image sits centered inside the green circle background. */
.wppw-icon-list-img {
    max-height: 24px; max-width: 24px; width: auto; height: auto;
    display: block; object-fit: contain;
}
.wppw-icon-list-content { flex: 1; font-size: 15px; line-height: 1.6; color: var(--wppw-text); }
.wppw-icon-list-content strong { color: var(--wppw-dark); }
/* Optional button below the list. Flex-centered so the button is centered
   within the full-width container while remaining auto-sized by its label. */
.wppw-icon-list-btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.wppw-icon-list-btn { display: inline-block; }

/* ══════════════════════════════════════════════════════════════════════
 * PRICING — rules lifted from Lyra's layout.css "11. PRICING" section.
 * Block markup is `.wppw-pricing` (group wrapper) with the section
 * heading first, optional intro <p>, then a sequence of
 * <h3.wppw-pricing-subheading> + <ul> sub-section pairs, optional CTA
 * <a.wp-block-button__link>. The :first-of-type rule on h3 zeros the
 * border-top so the sub-section divider only appears BETWEEN sections,
 * not above the first one.
 * ══════════════════════════════════════════════════════════════════════ */
.wppw-pricing {
    background: var(--wppw-light);
    border: 1px solid var(--wppw-border);
    border-radius: var(--wppw-radius);
    padding: 36px 32px;
    margin: 2em auto;
}
.wppw-pricing h2 { font-size: clamp(22px, 3.5vw, 28px); font-weight: 700; color: var(--wppw-dark); margin: 0 0 12px; }
.wppw-pricing > p { font-size: 15px; color: var(--wppw-muted); margin: 0 0 24px; }
.wppw-pricing h3 { font-size: 18px; font-weight: 700; color: var(--wppw-primary); margin: 24px 0 10px; padding-top: 16px; border-top: 1px solid var(--wppw-border); }
.wppw-pricing h3:first-of-type { border-top: none; padding-top: 0; }
.wppw-pricing ul { padding-left: 20px; margin: 0 0 16px; }
.wppw-pricing li { font-size: 15px; line-height: 1.65; color: var(--wppw-text); margin-bottom: 8px; }
.wppw-pricing .wp-block-button__link { margin-top: 12px; }

/* ══════════════════════════════════════════════════════════════════════
 * CASE STUDY — rules lifted from Lyra's layout.css "23. CASE STUDY"
 * section. Block markup is `.wppw-case-study` (group wrapper) with the
 * heading, location <p>, two-column before/after photos in
 * `.wppw-case-photos`, three labelled sections (`.wppw-case-section`
 * each containing an <h3> + body), optional savings callout pill
 * (`.wppw-case-savings`), and an optional CTA wrapped in
 * `.wppw-case-btn-wrap`.
 * ══════════════════════════════════════════════════════════════════════ */
.wppw-case-study {
    background: var(--wppw-light);
    border: 1px solid var(--wppw-border);
    border-radius: var(--wppw-radius);
    padding: 36px 32px;
    margin: 2em auto;
}
.wppw-case-study h2 { font-size: 24px; font-weight: 700; color: var(--wppw-dark); margin: 0 0 8px; }
.wppw-case-location { font-size: 14px; color: var(--wppw-muted); margin: 0 0 20px; }
.wppw-case-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 1.5em 0;
}
@media (max-width: 680px) { .wppw-case-photos { grid-template-columns: 1fr; } }
.wppw-case-section { margin-bottom: 20px; }
.wppw-case-section h3 { font-size: 17px; font-weight: 700; color: var(--wppw-primary); margin: 0 0 8px; }
.wppw-case-section p { font-size: 15px; line-height: 1.65; color: var(--wppw-text); margin: 0; }
.wppw-case-savings {
    display: inline-block;
    background: #e6f7ed;
    color: #1a6b3a;
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 12px;
}
/* Optional button below the case study. Flex-centered so the button is
   centered within the full-width container while remaining auto-sized by
   its label — matches the cta_banner button pattern. */
.wppw-case-btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.wppw-case-btn { display: inline-block; }

/* ══════════════════════════════════════════════════════════════════════
 * RELATED SERVICES — rules lifted from Lyra's layout.css "25. RELATED
 * SERVICES" section. Block markup is `.wppw-related-services` (group
 * wrapper) with the heading and a vertical stack of `.wppw-related-row`
 * row wrappers — each row is its own grid of up to 3
 * `.wppw-related-card` cards. Each card has an <h3> title, a <p>
 * description, and an optional CTA button.
 * ══════════════════════════════════════════════════════════════════════ */
.wppw-related-services {
    padding: 24px 20px;
    /* flow-root establishes a new block formatting context so that top/bottom
       margins on child row wrappers (.wppw-related-row) cannot collapse
       through this container's edges. */
    display: flow-root;
}
.wppw-related-services h2 { font-size: 24px; font-weight: 700; color: var(--wppw-dark); margin: 0 0 20px; }
/* Outer grid is now a vertical stack of row wrappers. The per-row grid
   layout that formerly lived here has moved to .wppw-related-row so each
   row can take its own margin/padding/bg/border-radius independently. */
.wppw-related-grid {
    display: flow-root;
}
.wppw-related-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.wppw-related-card {
    background: #fff;
    border: 1px solid var(--wppw-border);
    border-radius: var(--wppw-radius);
    padding: 24px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.wppw-related-card:hover { transform: translateY(-3px); box-shadow: var(--wppw-shadow-lg); }
.wppw-related-card h3 { font-size: 17px; font-weight: 700; color: var(--wppw-dark); margin: 0 0 8px; }
.wppw-related-card p { font-size: 14px; line-height: 1.6; color: var(--wppw-muted); margin: 0 0 14px; }
.wppw-related-card .wp-block-button__link { font-size: 14px; padding: 9px 20px; }

/* ══════════════════════════════════════════════════════════════════════
 * STATS BAR — rules lifted byte-for-byte from Lyra's layout.css "13.
 * STATS BAR" section. Block markup is `.wppw-stats-bar` (group wrapper)
 * with N `.wppw-stat` flex children, each containing a value span and a
 * label span. The flex layout wraps cleanly to multiple rows on narrow
 * viewports.
 * ══════════════════════════════════════════════════════════════════════ */
.wppw-stats-bar {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 28px 20px;
    background: var(--wppw-dark);
    border-radius: var(--wppw-radius);
    margin: 2em auto;
    max-width: var(--wppw-max-w);
}
.wppw-stat {
    text-align: center;
    flex: 1 1 140px;
    padding: 12px 16px;
}
.wppw-stat-value { display: block; font-size: 32px; font-weight: 800; color: var(--wppw-accent); line-height: 1.2; }
.wppw-stat-label { display: block; font-size: 13px; color: #b0b0c0; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }

/* ══════════════════════════════════════════════════════════════════════
 * GUARANTEE / WARRANTY — rules lifted byte-for-byte from Lyra's
 * layout.css "16. GUARANTEE / WARRANTY" section. Block markup is
 * `.wppw-guarantee` (group wrapper) with `.wppw-guarantee-body` containing
 * a heading, a `.wppw-guarantee-badge` duration pill, the WYSIWYG body
 * content, and an optional `.wppw-guarantee-link` to the full policy.
 *
 * The `.wppw-guarantee-icon` rule below is dead — it was the leading
 * shield emoji <div> that used to sit above the body, removed per
 * an earlier user request. The CSS rule is preserved here (rather than
 * deleted) to match the "leave the unused rule, harmless" decision
 * documented in render_guarantee.
 * ══════════════════════════════════════════════════════════════════════ */
.wppw-guarantee {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: #fffaf0;
    border: 1px solid #f0e4c4;
    border-radius: var(--wppw-radius);
    padding: 28px;
    margin: 2em auto;
}
.wppw-guarantee-icon { font-size: 40px; flex-shrink: 0; }
.wppw-guarantee-body h3 { font-size: 19px; font-weight: 700; color: var(--wppw-dark); margin: 0 0 8px; }
.wppw-guarantee-badge {
    display: inline-block;
    background: var(--wppw-accent);
    color: #fff;
    padding: 3px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}
.wppw-guarantee-body p { font-size: 15px; line-height: 1.65; color: var(--wppw-text); margin: 0 0 10px; }
.wppw-guarantee-link { color: var(--wppw-primary); font-weight: 500; text-decoration: none; }
.wppw-guarantee-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
 * MISSION & VISION STATEMENT — rules lifted byte-for-byte from Lyra's
 * old layout.css "COMPANY BLOCKS" umbrella section. Block markup is
 * `.wppw-mission-vision` (group wrapper) plus a layout class
 * (`wppw-mv-side_by_side` or `wppw-mv-stacked`), with `.wppw-mv-inner`
 * containing the heading, optional `.wppw-mv-image`, and a
 * `.wppw-mv-statements` 2-column grid of two
 * `.wppw-mv-panel` cards (one mission, one vision). The vision panel
 * gets a different border-top color via `.wppw-mv-vision`.
 * ══════════════════════════════════════════════════════════════════════ */
.wppw-mission-vision {
    padding: 56px 24px;
}
.wppw-mv-inner {
    max-width: var(--wppw-max-w);
    margin: 0 auto;
}
.wppw-mission-vision h2,
.wppw-mission-vision h3:first-child {
    font-size: clamp(22px, 3.5vw, 32px);
    font-weight: 700;
    color: var(--wppw-dark);
    margin: 0 0 40px;
    text-align: center;
}
.wppw-mv-image {
    margin-bottom: 36px;
    border-radius: calc(var(--wppw-radius) + 4px);
    overflow: hidden;
    box-shadow: var(--wppw-shadow-lg);
}
.wppw-mv-image img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
}
.wppw-mv-statements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.wppw-mv-panel {
    background: #fff;
    border-radius: calc(var(--wppw-radius) + 2px);
    padding: 36px 32px;
    box-shadow: var(--wppw-shadow);
    border-top: 4px solid var(--wppw-primary);
    position: relative;
}
.wppw-mv-vision {
    border-top-color: var(--wppw-primary-h);
}
.wppw-mv-panel-icon {
    font-size: 32px;
    margin-bottom: 14px;
    line-height: 1;
}
.wppw-mv-sub {
    font-size: 20px;
    font-weight: 700;
    color: var(--wppw-dark);
    margin: 0 0 14px;
}
.wppw-mv-body {
    font-size: 15px;
    line-height: 1.75;
    color: var(--wppw-text);
}
.wppw-mv-body p { margin: 0; }
/* Side-by-side: image floats left when image is present */
.wppw-mv-side_by_side .wppw-mv-inner {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 40px;
    align-items: start;
}
.wppw-mv-side_by_side .wppw-mv-image {
    margin-bottom: 0;
    position: sticky;
    top: 100px;
}
.wppw-mv-side_by_side .wppw-mv-image img { height: 100%; min-height: 340px; }
/* Stacked: full-width image then panels side by side */
.wppw-mv-stacked .wppw-mv-statements { margin-top: 0; }
@media (max-width: 768px) {
    .wppw-mv-statements { grid-template-columns: 1fr; }
    .wppw-mv-side_by_side .wppw-mv-inner { grid-template-columns: 1fr; }
    .wppw-mv-side_by_side .wppw-mv-image { position: static; }
}

/* ══════════════════════════════════════════════════════════════════════
 * LEADERSHIP & TEAM PROFILES — rules lifted byte-for-byte from Lyra's
 * old layout.css "COMPANY BLOCKS" umbrella section. Block markup is
 * `.wppw-leadership-profiles` (group wrapper) with `.wppw-lp-inner`
 * containing a heading and a `.wppw-lp-grid` auto-fill grid of
 * `.wppw-lp-card` cards. Each card has a photo or initials tile, a
 * `.wppw-lp-info` block with name/department/title/bio. When the
 * photo field is empty, the renderer substitutes an initials tile
 * (`.wppw-lp-initials`) styled with a dark→blue diagonal gradient.
 * ══════════════════════════════════════════════════════════════════════ */
.wppw-leadership-profiles {
    padding: 56px 24px;
    background: var(--wppw-light);
}
.wppw-lp-inner {
    max-width: var(--wppw-max-w);
    margin: 0 auto;
}
.wppw-leadership-profiles h2,
.wppw-leadership-profiles h3:first-child {
    font-size: clamp(22px, 3.5vw, 32px);
    font-weight: 700;
    color: var(--wppw-dark);
    margin: 0 0 40px;
    text-align: center;
}
.wppw-lp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
}
.wppw-lp-card {
    background: #fff;
    border-radius: calc(var(--wppw-radius) + 2px);
    box-shadow: var(--wppw-shadow);
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s;
    display: flex;
    flex-direction: column;
}
.wppw-lp-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--wppw-shadow-lg);
}
.wppw-lp-photo-wrap {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--wppw-dark), var(--wppw-primary-h));
    flex-shrink: 0;
}
.wppw-lp-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}
.wppw-lp-card:hover .wppw-lp-photo {
    transform: scale(1.04);
}
.wppw-lp-initials {
    display: flex;
    align-items: center;
    justify-content: center;
}
.wppw-lp-initials span {
    font-size: 56px;
    font-weight: 800;
    color: rgba(255,255,255,0.6);
    line-height: 1;
    font-family: 'Poppins', sans-serif;
}
.wppw-lp-info {
    padding: 24px 22px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.wppw-lp-dept {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wppw-primary);
    background: rgba(253,129,39,0.1);
    border-radius: 20px;
    padding: 3px 10px;
    margin: 3px 0;
    width: fit-content;
}
.wppw-lp-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--wppw-dark);
    margin: 0 0 4px;
}
.wppw-lp-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--wppw-muted);
    margin: 0 0 14px;
    border-bottom: 1px solid var(--wppw-border);
    padding-bottom: 14px;
}
.wppw-lp-bio {
    font-size: 14px;
    line-height: 1.7;
    color: var(--wppw-text);
    margin: 0;
    flex: 1;
}
@media (max-width: 560px) {
    .wppw-lp-grid { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════════
   FLIP BOX (native flip_box block — moved out of Lyra core)
   ─────────────────────────────────────────────────────────────────────
   Note: this is the .wppw-flip-* class set used by the native flip_box
   block we own here (see LYRA_BT_Owned_Blocks::render_flip_box). It is
   distinct from the .lyra-bt-flipbox-* / .lyra-bt-flipbook-* class set above,
   which is used by the four preset variations built from container
   blocks. The two systems coexist intentionally — pages stored before
   this move continue to render with the .wppw-flip-* classes.
   ═════════════════════════════════════════════════════════════════════ */
.wppw-flip-box { perspective: 1000px; max-width: 400px; margin: 0 auto; }
.wppw-flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s ease; transform-style: preserve-3d; }
.wppw-flip-box:hover .wppw-flip-inner { transform: rotateY(180deg); }
.wppw-flip-vertical:hover .wppw-flip-inner { transform: rotateX(180deg); }
.wppw-flip-vertical .wppw-flip-back { transform: rotateX(180deg); }
.wppw-flip-front, .wppw-flip-back {
    position: absolute; inset: 0; backface-visibility: hidden;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; color: #fff; padding: 24px; text-align: center;
    overflow: hidden;
}
.wppw-flip-overlay {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
}
.wppw-flip-content { position: relative; z-index: 2; }
.wppw-flip-back { transform: rotateY(180deg); }
.wppw-flip-content h3 { margin-bottom: 8px; font-size: 20px; }
.wppw-flip-content p { font-size: 14px; opacity: .9; margin-bottom: 12px; }
.wppw-flip-icon { font-size: 36px; display: block; margin-bottom: 12px; }
.wppw-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ═════════════════════════════════════════════════════════════════════
   PDF EMBED (native pdf_embed block — moved out of Lyra core)
   ─────────────────────────────────────────────────────────────────────
   Note: in Lyra core these declarations were emitted under shared
   selectors with .wppw-youtube-embed and .wppw-google-map. Now that the
   block lives here, the same declarations are duplicated under the
   .wppw-pdf-* selectors so existing pages render byte-identically. The
   shared youtube/google_map portion stays in Lyra core CSS.
   ═════════════════════════════════════════════════════════════════════ */
.wppw-pdf-embed { padding: 24px 20px; margin: 1em auto; }
.wppw-pdf-embed h2 { font-size: 24px; font-weight: 700; color: var(--wppw-dark); margin: 0 0 16px; }
.wppw-pdf-wrap { border-radius: var(--wppw-radius); overflow: hidden; box-shadow: var(--wppw-shadow-lg); }
.wppw-pdf-wrap iframe { display: block; }
.wppw-pdf-fallback { margin-top: 10px; }
.wppw-pdf-fallback a { color: var(--wppw-link-color, var(--wppw-primary)); font-weight: 500; text-decoration: none; }
.wppw-pdf-fallback a:hover { text-decoration: underline; }

/* ═════════════════════════════════════════════════════════════════════
   NEWSLETTER (native newsletter block — moved out of Lyra core)
   ═════════════════════════════════════════════════════════════════════ */
.wppw-newsletter { text-align: center; padding: 32px 16px; }
.wppw-nl-sub { color: #666; font-size: 15px; margin: 8px 0 20px; }
.wppw-nl-form { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; }
.wppw-nl-stacked .wppw-nl-form { flex-direction: column; }
.wppw-nl-form input[type="email"] {
    flex: 1; padding: 12px 16px; border: 1px solid #d0d0d8; border-radius: 6px;
    font-size: 15px; outline: none;
}
.wppw-nl-form input:focus { border-color: #1a4e8a; box-shadow: 0 0 0 3px rgba(26,78,138,.1); }
.wppw-nl-form button {
    padding: 12px 24px; background: #1a4e8a; color: #fff; border: none;
    border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background .2s;
}
.wppw-nl-form button:hover { background: #2a6ab8; }

/* ═════════════════════════════════════════════════════════════════════
   BUSINESS HOURS (native business_hours block — moved out of Lyra core)
   ═════════════════════════════════════════════════════════════════════ */
.wppw-business-hours { max-width: 520px; margin: 0 auto; }
.wppw-business-hours h2 { margin-bottom: 16px; }
.wppw-bh-table { border: 1px solid #e2e2e8; border-radius: 8px; overflow: hidden; }
.wppw-bh-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f4;
    font-size: 15px;
    transition: background 0.2s;
}
.wppw-bh-row:last-child { border-bottom: none; }
.wppw-bh-day   { font-weight: 600; color: #1a1a2e; }
.wppw-bh-hours { color: #555; }
.wppw-bh-closed .wppw-bh-hours { color: #c0392b; font-weight: 500; }
.wppw-bh-today {
    background: rgba(26,78,138,0.06);
    border-left: 3px solid #1a4e8a;
    padding-left: 17px;
}
.wppw-bh-today .wppw-bh-day { color: #1a4e8a; }

/* ═════════════════════════════════════════════════════════════════════
   SOCIAL ICONS — block-specific layer (native social_icons block —
   moved out of Lyra core).
   ─────────────────────────────────────────────────────────────────────
   Note: the base .wppw-social-link infrastructure rules (anchor styling,
   hover transition, svg display) ALSO ship from this add-on now —
   relocated from Lyra core when short_bio was moved here too. Both
   consumers of those base selectors (this block and short_bio's
   .wppw-team-social row) now live in the add-on, so the base layer
   was moved with them. See the SHORT BIO BASE INFRASTRUCTURE section
   below for the .wppw-social-link / .wppw-team-social rules.
   ═════════════════════════════════════════════════════════════════════ */
.wppw-social-icons { padding: 12px 0; }
.wppw-social-align-left   { text-align: left; }
.wppw-social-align-center { text-align: center; }
.wppw-social-align-right  { text-align: right; }

/* Sizes */
.wppw-social-size-small  .wppw-social-link { width: 32px; height: 32px; }
.wppw-social-size-small  .wppw-social-link svg { width: 16px; height: 16px; }
.wppw-social-size-medium .wppw-social-link { width: 40px; height: 40px; }
.wppw-social-size-medium .wppw-social-link svg { width: 20px; height: 20px; }
.wppw-social-size-large  .wppw-social-link { width: 52px; height: 52px; }
.wppw-social-size-large  .wppw-social-link svg { width: 26px; height: 26px; }

/* Filled style */
.wppw-social-style-filled { border-radius: 50%; }
.wppw-social-facebook.wppw-social-style-filled  { background: #1877F2; }
.wppw-social-instagram.wppw-social-style-filled  { background: #E4405F; }
.wppw-social-twitter.wppw-social-style-filled     { background: #000; }
.wppw-social-linkedin.wppw-social-style-filled    { background: #0A66C2; }
.wppw-social-youtube.wppw-social-style-filled     { background: #FF0000; }
.wppw-social-google.wppw-social-style-filled      { background: #4285F4; }
.wppw-social-yelp.wppw-social-style-filled        { background: #AF0606; }
.wppw-social-email.wppw-social-style-filled       { background: #1a4e8a; }
.wppw-social-phone.wppw-social-style-filled       { background: #27ae60; }

/* Outline style */
.wppw-social-style-outline { border-radius: 50%; border: 2px solid currentColor; background: transparent; }
.wppw-social-facebook.wppw-social-style-outline  { color: #1877F2; }
.wppw-social-instagram.wppw-social-style-outline  { color: #E4405F; }
.wppw-social-twitter.wppw-social-style-outline     { color: #000; }
.wppw-social-linkedin.wppw-social-style-outline    { color: #0A66C2; }
.wppw-social-youtube.wppw-social-style-outline     { color: #FF0000; }
.wppw-social-google.wppw-social-style-outline      { color: #4285F4; }
.wppw-social-yelp.wppw-social-style-outline        { color: #AF0606; }
.wppw-social-email.wppw-social-style-outline       { color: #1a4e8a; }
.wppw-social-phone.wppw-social-style-outline       { color: #27ae60; }

/* Plain style */
.wppw-social-style-plain { background: transparent; }
.wppw-social-facebook.wppw-social-style-plain  { color: #1877F2; }
.wppw-social-instagram.wppw-social-style-plain  { color: #E4405F; }
.wppw-social-twitter.wppw-social-style-plain     { color: #000; }
.wppw-social-linkedin.wppw-social-style-plain    { color: #0A66C2; }
.wppw-social-youtube.wppw-social-style-plain     { color: #FF0000; }
.wppw-social-google.wppw-social-style-plain      { color: #4285F4; }
.wppw-social-yelp.wppw-social-style-plain        { color: #AF0606; }
.wppw-social-email.wppw-social-style-plain       { color: #1a4e8a; }
.wppw-social-phone.wppw-social-style-plain       { color: #27ae60; }

/* ═════════════════════════════════════════════════════════════════════
   REVIEW (single — native review block, moved out of Lyra core)
   ═════════════════════════════════════════════════════════════════════ */
.wppw-review {
    background: var(--wppw-light);
    border: 1px solid var(--wppw-border);
    border-radius: var(--wppw-radius);
    padding: 28px 32px;
    margin: 1.5em auto;
}
.wppw-stars { color: #f5a623; font-size: 20px; margin: 0 0 10px; letter-spacing: 2px; }
.wppw-review-quote { font-style: italic; font-size: 16px; color: #444; line-height: 1.65; margin: 0 0 14px; }
.wppw-review-author { font-size: 15px; margin: 0; color: var(--wppw-text); }
.wppw-review-date { font-size: 12px; color: #999; margin: 4px 0 0; }

/* ═════════════════════════════════════════════════════════════════════
   REVIEW GRID (native review_grid block, moved out of Lyra core)
   ═════════════════════════════════════════════════════════════════════ */
.wppw-review-grid { padding: 24px 20px; }
.wppw-review-grid h2 { font-size: clamp(22px, 3.5vw, 28px); font-weight: 700; color: var(--wppw-dark); margin: 0 0 20px; }
.wppw-review-grid-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin: 0 0 16px;
}
.wppw-review-card {
    background: #fff;
    border: 1px solid var(--wppw-border);
    border-radius: var(--wppw-radius);
    padding: 24px;
    transition: box-shadow 0.2s;
}
.wppw-review-card:hover { box-shadow: var(--wppw-shadow-lg); }
.wppw-review-card .wppw-stars { color: #f5a623; font-size: 18px; margin: 0 0 10px; letter-spacing: 2px; }
.wppw-review-card .wppw-review-quote { font-style: italic; color: #444; line-height: 1.65; margin: 0 0 14px; font-size: 15px; }
.wppw-review-card .wppw-review-author { font-size: 14px; margin: 0; color: var(--wppw-dark); }
.wppw-review-card .wppw-review-date { font-size: 12px; color: #999; margin: 4px 0 0; }

/* ═════════════════════════════════════════════════════════════════════
   REVIEW CAROUSEL (carousel mode of review_grid)
   Front-end JS: initReviewCarousels() in this add-on's frontend.js.
   ═════════════════════════════════════════════════════════════════════ */
.wppw-review-carousel-viewport { overflow: hidden; position: relative; }
.wppw-review-grid .wppw-review-grid-inner { display: grid; gap: 16px; }
.wppw-review-cols-2 { grid-template-columns: 1fr 1fr; }
.wppw-review-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 768px) { .wppw-review-cols-2, .wppw-review-cols-3 { grid-template-columns: 1fr; } }
.wppw-review-carousel .wppw-review-carousel-track {
    display: flex; transition: transform .4s ease;
}
.wppw-review-carousel .wppw-review-slide { flex: 0 0 100%; padding: 0 8px; box-sizing: border-box; }
.wppw-review-carousel-nav { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.wppw-rc-prev, .wppw-rc-next {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid #d0d0d8;
    background: #fff; font-size: 20px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; transition: all .15s;
    color: #1a4e8a;
}
.wppw-rc-prev:hover, .wppw-rc-next:hover { background: #1a4e8a; color: #fff; border-color: #1a4e8a; }

/* ═════════════════════════════════════════════════════════════════════
   HISTORY TIMELINE (native history_timeline block, moved out of Lyra core)
   Centered vertical timeline with alternating left/right cards,
   date labels, colored dots, and a scroll-fill progress line.
   Front-end JS: initTimelines() in this add-on's frontend.js.
   ═════════════════════════════════════════════════════════════════════ */
.wppw-history-timeline {
    padding: 24px 20px;
    margin: 2em auto;
}
.wppw-history-timeline h2 {
    font-size: clamp(22px, 3.5vw, 30px);
    font-weight: 700;
    color: var(--wppw-dark);
    margin: 0 0 32px;
    text-align: center;
}

/* Wrapper holds the center line + entries */
.wppw-ht-wrapper {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Center vertical line */
.wppw-ht-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--wppw-border);
    transform: translateX(-50%);
    border-radius: 2px;
    z-index: 0;
}
.wppw-ht-line-fill {
    width: 100%;
    height: 0;
    background: var(--wppw-primary);
    border-radius: 2px;
    transition: height 0.1s linear;
}

/* Each entry */
.wppw-ht-entry {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    gap: 0;
    align-items: start;
    position: relative;
    margin-bottom: 48px;
}
.wppw-ht-entry:last-child { margin-bottom: 0; }

/* Dot on the center line */
.wppw-ht-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--wppw-primary);
    border: 3px solid #6DB5FB;
    justify-self: center;
    align-self: start;
    margin-top: 18px;
    z-index: 2;
    box-shadow: 0 0 0 4px #fff;
    transition: transform 0.3s, box-shadow 0.3s;
}
.wppw-ht-entry:hover .wppw-ht-dot {
    transform: scale(1.3);
    box-shadow: 0 0 0 6px #fff, 0 0 12px rgba(26,78,138,0.3);
}

/* Date label */
.wppw-ht-label {
    display: flex;
    align-items: start;
    padding-top: 16px;
}
.wppw-ht-date {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: var(--wppw-dark);
    background: #fff;
    border: 2px solid #8A8A8A;
    border-radius: 5px;
    padding: 4px 14px;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
}

/* Card */
.wppw-ht-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px 24px;
    box-shadow: 0 0 20px 1px rgba(0,0,0,0.1);
    position: relative;
    transition: transform 0.25s, box-shadow 0.25s;
}
.wppw-ht-card::before {
    content: '';
    position: absolute;
    top: 20px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
}
.wppw-ht-entry:hover .wppw-ht-card {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px -10px rgba(140,140,140,0.74);
}
.wppw-ht-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--wppw-dark);
    margin: 0 0 10px;
    font-family: 'Poppins', sans-serif;
}
.wppw-ht-desc {
    font-size: 15px;
    line-height: 1.65;
    color: #666;
    font-family: 'Lato', sans-serif;
}
.wppw-ht-desc p { margin: 0 0 8px; }
.wppw-ht-desc p:last-child { margin-bottom: 0; }
.wppw-ht-desc a { color: var(--wppw-link-color, var(--wppw-primary)); font-weight: 600; }

/* LEFT entry: label on right, card on left */
.wppw-ht-left .wppw-ht-label { grid-column: 3; justify-content: flex-start; padding-left: 16px; }
.wppw-ht-left .wppw-ht-dot   { grid-column: 2; grid-row: 1; }
.wppw-ht-left .wppw-ht-card  { grid-column: 1; grid-row: 1; }
.wppw-ht-left .wppw-ht-card::before { right: -20px; border-left-color: #fff; }

/* RIGHT entry: label on left, card on right */
.wppw-ht-right .wppw-ht-label { grid-column: 1; justify-content: flex-end; padding-right: 16px; }
.wppw-ht-right .wppw-ht-dot   { grid-column: 2; grid-row: 1; }
.wppw-ht-right .wppw-ht-card  { grid-column: 3; grid-row: 1; }
.wppw-ht-right .wppw-ht-card::before { left: -20px; border-right-color: #fff; }

/* Colored card variant (from Elementor data — first 4 entries had bg colors) */
.wppw-ht-card[style*="border-top"] .wppw-ht-title { color: var(--wppw-dark); }

/* ── Mobile: single column ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .wppw-ht-wrapper { padding-left: 28px; }
    .wppw-ht-line { left: 14px; transform: none; }
    .wppw-ht-entry {
        grid-template-columns: 28px 1fr;
        gap: 0 12px;
        margin-bottom: 32px;
    }
    .wppw-ht-dot {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 14px;
        height: 14px;
        margin-top: 20px;
    }
    .wppw-ht-label {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-content: flex-start !important;
        padding: 0 0 8px !important;
    }
    .wppw-ht-card {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
    .wppw-ht-card::before { display: none; }
}

/* Timeline entry entrance animation — only activates when frontend.js adds
   the .wppw-ht-animated class to the wrapper. Without JS (e.g. in the
   builder preview iframe), entries stay fully visible. */
.wppw-ht-animated .wppw-ht-entry {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.wppw-ht-animated .wppw-ht-entry.wppw-ht-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   IMAGE ACCORDION PANELS (native image_accordion block, moved out of Lyra core)
   Horizontal expanding panels — click to open, first panel open by default.
   Relocated verbatim from Lyra core's admin/css/layout.css — only
   image_accordion uses these selectors, and image_accordion now lives in
   this add-on. No behavior change.
   ═══════════════════════════════════════════════════════════════════════════ */
.wppw-image-accordion { width: 100%; }
.wppw-image-accordion h2 { margin-bottom: 20px; }

.wppw-ia-track {
    display: flex;
    gap: 6px;
    overflow: hidden;
    border-radius: 10px;
}

.wppw-ia-panel {
    position: relative;
    flex: 0 0 72px;              /* collapsed width */
    background-size: cover;
    background-position: center;
    background-color: #1a4e8a;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: flex .5s cubic-bezier(.4,0,.2,1);
}

.wppw-ia-panel--active {
    flex: 1 1 auto;              /* expanded fills remaining space */
    cursor: default;
}

/* Dark overlay */
.wppw-ia-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.28) 55%,
        rgba(0,0,0,.12) 100%
    );
    transition: background .4s;
}
.wppw-ia-panel--active .wppw-ia-overlay {
    background: linear-gradient(
        to top,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.22) 60%,
        rgba(0,0,0,.06) 100%
    );
}

/* Content — hidden when collapsed, visible when active */
.wppw-ia-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 22px 22px;
    color: #fff;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s .1s, transform .35s .1s;
    pointer-events: none;
}
.wppw-ia-panel--active .wppw-ia-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Collapsed label — rotated title shown on non-active panels */
.wppw-ia-panel::before {
    content: attr(data-title);
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) rotate(-90deg);
    transform-origin: center center;
    color: rgba(255,255,255,.85);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    opacity: 1;
    transition: opacity .2s;
    pointer-events: none;
}
.wppw-ia-panel--active::before { opacity: 0; }

.wppw-ia-title {
    font-size: 1.3em;
    font-weight: 700;
    margin: 0 0 8px;
    color: #fff;
    line-height: 1.3;
}
.wppw-ia-desc {
    font-size: 14px;
    color: rgba(255,255,255,.88);
    margin: 0 0 14px;
    line-height: 1.6;
}
.wppw-ia-link {
    display: inline-block;
    background: var(--lyra-header-link, #1a4e8a);
    color: #fff;
    padding: 9px 18px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s;
}
.wppw-ia-link:hover { background: var(--lyra-header-hover, #c8a04a); }

/* Placeholder (no image set) */
.wppw-ia-panel:not([style*="background-image"]) {
    background: linear-gradient(135deg, #1a4e8a 0%, #0f3260 100%);
}

@media (max-width: 640px) {
    .wppw-ia-track {
        flex-direction: column;
        height: auto !important;
    }
    .wppw-ia-panel {
        flex: none !important;
        height: 240px;
    }
    .wppw-ia-panel--active { height: 340px; }
    .wppw-ia-panel::before { display: none; }
    .wppw-ia-content { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CUSTOM HTML / SHORTCODE (native custom_html block, moved out of Lyra core)
   Relocated verbatim from Lyra core's admin/css/layout.css — only
   custom_html uses these selectors, and custom_html now lives in this
   add-on. No behavior change.
   ═══════════════════════════════════════════════════════════════════════════ */
.wppw-custom-html { padding: 20px 20px; margin: 1em auto; }
.wppw-custom-html h2 { font-size: 24px; font-weight: 700; color: var(--wppw-dark); margin: 0 0 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SHORT BIO (native short_bio block, moved out of Lyra core)
   Photo + name + job title + bio + profile link, with optional social
   icons row. Relocated verbatim from Lyra core's admin/css/layout.css —
   only short_bio uses these block-specific selectors, and short_bio
   now lives in this add-on. No behavior change.
   ═══════════════════════════════════════════════════════════════════════════ */
.wppw-short-bio {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    background: var(--wppw-light);
    border: 1px solid var(--wppw-border);
    border-radius: var(--wppw-radius);
    padding: 28px;
    margin: 1.5em auto;
}
.wppw-short-bio > img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: var(--wppw-radius);
    flex-shrink: 0;
    box-shadow: var(--wppw-shadow);
}
.wppw-team-info h3 { font-size: 20px; font-weight: 700; color: var(--wppw-dark); margin: 0 0 4px; }
.wppw-team-title { font-size: 14px; color: var(--wppw-primary); font-weight: 600; margin: 0 0 12px; }
.wppw-team-info p { font-size: 15px; line-height: 1.65; color: var(--wppw-text); margin: 0 0 12px; }
.wppw-team-info a { color: var(--wppw-link-color, var(--wppw-primary)); font-weight: 500; text-decoration: none; }
.wppw-team-info a:hover { color: var(--wppw-accent); text-decoration: underline; }
@media (max-width: 600px) {
    .wppw-short-bio { flex-direction: column; align-items: center; text-align: center; }
    .wppw-short-bio > img { width: 120px; height: 120px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHORT BIO BASE INFRASTRUCTURE — .wppw-social-link anchor styling and
   .wppw-team-social row. Relocated from Lyra core (was needed there
   because short_bio depended on it; now both consumers — short_bio
   and the social_icons block above — live in this add-on, so the
   base layer ships from here too). The block-specific social_icons
   layer above (.wppw-social-icons container, sizes, per-platform
   color combos) sits on TOP of these rules.
   ═══════════════════════════════════════════════════════════════════════════ */
.wppw-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 6px;
    text-decoration: none;
    transition: transform 0.15s, background 0.2s;
    color: #fff;
}
.wppw-social-link:hover { transform: translateY(-2px); }
.wppw-social-link svg { display: block; }

/* ── Team Member social row ────────────────────────────────────────── */
.wppw-team-social {
    display: flex;
    gap: 8px;
    margin: 10px 0;
}
.wppw-team-social .wppw-social-link {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #1a4e8a;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wppw-team-social .wppw-social-link svg { width: 16px; height: 16px; }
.wppw-team-social .wppw-social-link:hover { background: #c8a04a; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROCESS STEPS 1 (native process_steps block, moved out of Lyra core)
   Numbered ordered-list flow with optional CTA button. Relocated verbatim
   from Lyra core's admin/css/layout.css — only process_steps uses these
   selectors, and it now lives in this add-on. No behavior change.
   ═══════════════════════════════════════════════════════════════════════════ */
.wppw-process-steps { padding: 24px 20px; }
.wppw-process-steps h2 { font-size: clamp(22px, 3.5vw, 28px); font-weight: 700; color: var(--wppw-dark); margin: 0 0 20px; }
.wppw-process-steps ol {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0 0 20px;
}
.wppw-process-steps li {
    counter-increment: step;
    position: relative;
    padding: 14px 16px 14px 56px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--wppw-text);
    border-left: 2px solid var(--wppw-border);
    margin-bottom: 4px;
}
.wppw-process-steps li::before {
    content: counter(step);
    position: absolute;
    left: -14px;
    top: 12px;
    width: 28px;
    height: 28px;
    background: var(--wppw-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROCESS STEPS 2 (native process_timeline block, moved out of Lyra core)
   Vertical timeline of circled numbers with step titles and descriptions.
   Relocated verbatim from Lyra core's admin/css/layout.css — only
   process_timeline uses these selectors, and it now lives in this add-on.
   No behavior change.
   ═══════════════════════════════════════════════════════════════════════════ */
.wppw-process-timeline { padding: 24px 20px; }
.wppw-process-timeline h2 { font-size: clamp(22px, 3.5vw, 28px); font-weight: 700; color: var(--wppw-dark); margin: 0 0 28px; }
.wppw-timeline { position: relative; padding-left: 48px; }
.wppw-timeline::before { content: ''; position: absolute; left: 18px; top: 0; bottom: 0; width: 2px; background: var(--wppw-border); }
.wppw-timeline-step { position: relative; margin-bottom: 28px; }
.wppw-timeline-num {
    position: absolute;
    left: -48px;
    top: 0;
    width: 36px;
    height: 36px;
    background: var(--wppw-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    z-index: 1;
}
.wppw-timeline-body h3 { font-size: 17px; font-weight: 700; color: var(--wppw-dark); margin: 0 0 6px; }
.wppw-timeline-body p { font-size: 15px; line-height: 1.65; color: var(--wppw-muted); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Newly moved blocks — CSS lifted from Lyra's layout.css when these blocks
   were moved into this add-on. Sections preserve their original section
   headers for traceability.

   For youtube_embed, the original layout.css EMBEDS section had combined
   .wppw-youtube-embed, .wppw-google-map selectors. The youtube_embed
   half lives here; the .wppw-google-map half stays in Lyra's layout.css
   under the renamed "GOOGLE MAP EMBED" section. The .wppw-embed-caption
   selector is duplicated in both places (same precedent as pdf_embed
   when it was moved out earlier).
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   3. BEFORE / AFTER
   ═══════════════════════════════════════════════════════════════════════════ */
.wppw-before-after {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 2em auto;
}
.wppw-ba-col { display: flex; flex-direction: column; }
.wppw-ba-img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--wppw-radius);
    box-shadow: var(--wppw-shadow);
    background: var(--wppw-light);
    line-height: 0;
}
.wppw-ba-img-wrap img { width: 100%; height: auto; display: block; transition: transform 0.4s ease; }
.wppw-ba-img-wrap a { display: block; text-decoration: none; cursor: zoom-in; }
.wppw-ba-img-wrap a:hover img { transform: scale(1.04); }
.wppw-ba-badge {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 14px; border-radius: 100px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: #fff; pointer-events: none; z-index: 2; line-height: 1.4;
}
.wppw-ba-before { background: rgba(192,57,43,0.88); }
.wppw-ba-after  { background: rgba(39,174,96,0.88); }
.wppw-ba-caption { font-size: 13.5px; color: #555; line-height: 1.5; margin: 10px 0 0; padding: 0 2px; }
.wppw-ba-empty { text-align: center; padding: 40px; color: #999; }
@media (max-width: 680px) { .wppw-before-after { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   6. CONTACT FORM
   ═══════════════════════════════════════════════════════════════════════════ */
.wppw-contact-form {
    background: var(--wppw-light);
    border: 1px solid var(--wppw-border);
    border-radius: var(--wppw-radius);
    padding: 36px 32px;
    margin: 2em auto;
}
.wppw-contact-form h2 { font-size: 24px; font-weight: 700; color: var(--wppw-dark); margin: 0 0 24px; }
.wppw-contact-form .wppw-form label { font-size: 14px; font-weight: 600; color: var(--wppw-dark); display: block; margin-bottom: 16px; }
.wppw-contact-form .wppw-form input[type="text"],
.wppw-contact-form .wppw-form input[type="email"],
.wppw-contact-form .wppw-form input[type="tel"],
.wppw-contact-form .wppw-form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--wppw-border);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    margin-top: 4px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.wppw-contact-form .wppw-form input:focus,
.wppw-contact-form .wppw-form textarea:focus { border-color: var(--wppw-primary); box-shadow: 0 0 0 3px rgba(26,78,138,0.1); outline: none; }
.wppw-contact-form .wppw-form button[type="submit"] {
    background: var(--wppw-primary);
    color: #fff;
    border: none;
    padding: 13px 36px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.wppw-contact-form .wppw-form button[type="submit"]:hover { background: var(--wppw-primary-h); transform: translateY(-1px); }
.wppw-form-footnote { font-size: 12px; color: #999; margin-top: 12px; }

/* ═════════════════════════════════════════════════════════════════════
   CUSTOM FORM FIELDS (contact_form enhancement)
   ═════════════════════════════════════════════════════════════════════ */
.wppw-form-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.wppw-form-field { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; }
.wppw-form-field.wppw-field-half { flex: 1 1 calc(50% - 6px); min-width: 180px; }
.wppw-form-field label { font-size: 13px; font-weight: 500; color: #333; }
.wppw-form-field input, .wppw-form-field textarea, .wppw-form-field select {
    padding: 10px 12px; border: 1px solid #d0d0d8; border-radius: 6px; font-size: 14px;
    font-family: inherit; outline: none; transition: border-color .2s;
}
.wppw-form-field input:focus, .wppw-form-field textarea:focus, .wppw-form-field select:focus {
    border-color: #1a4e8a; box-shadow: 0 0 0 3px rgba(26,78,138,.08);
}
.wppw-form-submit { margin-top: 8px; }
.wppw-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════════
   14. VIDEO BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */
.wppw-video-block { margin: 2em auto; text-align: center; }
.wppw-video-block video,
.wppw-video-block img { max-width: 100%; border-radius: var(--wppw-radius); box-shadow: var(--wppw-shadow-lg); }
.wppw-video-block a { display: inline-block; position: relative; }
.wppw-video-caption { font-size: 14px; color: var(--wppw-muted); margin-top: 10px; }

/* ── Image Overlay (click-to-play) ─────────────────────────────────────
   Wrapper positions the overlay <div> on top of the <video>. The overlay
   carries the overlay-image as a background and centers the play SVG.
   Size and color of the SVG are set inline from the block's data fields
   (image_overlay_play_size / image_overlay_play_color), so this CSS only
   handles layout — never tries to override the inline width/height/color. */
.wppw-video-overlay-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border-radius: var(--wppw-radius);
    overflow: hidden;
    box-shadow: var(--wppw-shadow-lg);
}
.wppw-video-overlay-wrap .wppw-video-el {
    display: block;
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
}
.wppw-video-overlay {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.wppw-video-overlay:focus {
    outline: 2px solid var(--wppw-primary);
    outline-offset: -2px;
}
.wppw-video-play-icon {
    pointer-events: none;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. COMPARISON TABLE
   ═══════════════════════════════════════════════════════════════════════════ */
.wppw-comparison-table { padding: 24px 20px; }
.wppw-comparison-table h2 { font-size: 24px; font-weight: 700; color: var(--wppw-dark); margin: 0 0 20px; }
.wppw-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wppw-comparison-table table {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--wppw-radius);
    overflow: hidden;
    box-shadow: var(--wppw-shadow);
}
.wppw-comparison-table th,
.wppw-comparison-table td {
    padding: 14px 18px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid var(--wppw-border);
}
.wppw-comparison-table thead th { background: var(--wppw-dark); color: #fff; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.wppw-comparison-table tbody th { font-weight: 600; color: var(--wppw-dark); background: var(--wppw-light); }
.wppw-comparison-table tbody tr:hover td { background: #f0f5ff; }
.wppw-comparison-table tbody tr:last-child td,
.wppw-comparison-table tbody tr:last-child th { border-bottom: none; }

/* ═════════════════════════════════════════════════════════════════════
   CONTENT TOGGLE
   ═════════════════════════════════════════════════════════════════════ */
.wppw-ct-switcher { display: flex; justify-content: center; gap: 0; margin-bottom: 20px; }
.wppw-ct-btn {
    padding: 10px 28px; font-size: 14px; font-weight: 500; cursor: pointer;
    border: 2px solid #1a4e8a; background: transparent; color: #1a4e8a;
    transition: all .2s;
}
.wppw-ct-btn:first-child { border-radius: 6px 0 0 6px; }
.wppw-ct-btn:last-child  { border-radius: 0 6px 6px 0; border-left: none; }
.wppw-ct-btn.wppw-ct-active { background: #1a4e8a; color: #fff; }
.wppw-ct-panel { display: none; }
.wppw-ct-panel.wppw-ct-show { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   29. YOUTUBE EMBED — moved out of Lyra's shared EMBEDS section.
   ═══════════════════════════════════════════════════════════════════════════ */
.wppw-youtube-embed { padding: 24px 20px; margin: 1em auto; }
.wppw-youtube-embed h2 { font-size: 24px; font-weight: 700; color: var(--wppw-dark); margin: 0 0 16px; }
.wppw-video-wrap { border-radius: var(--wppw-radius); overflow: hidden; box-shadow: var(--wppw-shadow-lg); }
.wppw-video-wrap iframe { display: block; }
.wppw-embed-caption { font-size: 14px; color: var(--wppw-muted); margin-top: 10px; }

/* ══════════════════════════════════════════════════════════════════════════
   CHART BLOCKS (bar_chart, line_chart, pie_chart)
   ─── The actual chart graphics are rendered as inline SVG by ApexCharts;
   these rules cover only the surrounding wrapper, heading, caption, and
   the loading-placeholder min-height that prevents layout shift while the
   library boots. The library's own CSS ships separately at
   assets/vendor/apexcharts.css and is enqueued conditionally by the main
   plugin file when at least one chart block is on the page.
   ══════════════════════════════════════════════════════════════════════════ */
.wppw-chart {
    padding: 24px 20px;
    margin: 1em auto;
    background: #ffffff;
    border-radius: var(--wppw-radius);
}
.wppw-chart h1, .wppw-chart h2, .wppw-chart h3,
.wppw-chart h4, .wppw-chart h5, .wppw-chart h6 {
    font-size: 24px;
    font-weight: 700;
    color: var(--wppw-dark);
    margin: 0 0 16px;
}
.wppw-chart-canvas {
    /* min-height set inline by the renderer to match the user-chosen
       chart_height — prevents CLS before ApexCharts paints. */
    width: 100%;
    position: relative;
}
.wppw-chart-caption {
    font-size: 14px;
    color: var(--wppw-muted);
    margin-top: 14px;
    text-align: center;
    line-height: 1.5;
}
/* ApexCharts injects its own SVG with very small default font sizes —
   nudge them up a touch so they read well on marketing pages without
   needing the user to override anything. These selectors only apply
   inside our chart wrappers, so other ApexCharts uses on the same site
   (if any) are not affected. */
.wppw-chart .apexcharts-text          { font-family: inherit; }
.wppw-chart .apexcharts-legend-text   { font-size: 13px !important; color: var(--wppw-dark) !important; }
.wppw-chart .apexcharts-tooltip       { font-family: inherit; box-shadow: var(--wppw-shadow-lg); }
.wppw-chart .apexcharts-datalabel,
.wppw-chart .apexcharts-data-labels text { font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   DATA TABLE BLOCKS (data_table_modern, data_table_classic, data_table_bold)
   ─── Three visually distinct themes scoped to their per-block wrapper
   class. Grid.js renders all three with our custom className map so we
   own every visual decision (no Mermaid-theme CSS imported). The shared
   .wppw-data-table base class handles wrapper geometry; each per-block
   class layers its theme on top.

   Per-block CSS custom properties are read off the wrapper:
     --wppw-dt-accent       : header background / sort indicator color
     --wppw-dt-header-text  : header text color
     --wppw-dt-max-height   : optional scroll cap (only set when > 0)

   Visual toggles set as classes on the wrapper:
     .is-striped         : zebra row backgrounds
     .is-hover           : highlight row on pointer hover
     .is-compact         : tighter cell padding for dense tables
     .is-sticky-header   : header row stays visible while scrolling
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shared base ──────────────────────────────────────────────────────── */
.wppw-data-table {
    padding: 24px 20px;
    margin: 1em auto;
    background: #ffffff;
    border-radius: var(--wppw-radius);
    --wppw-dt-accent: #3b82f6;            /* default fallback if not overridden inline */
    --wppw-dt-header-text: #0f172a;
}
.wppw-data-table h1, .wppw-data-table h2, .wppw-data-table h3,
.wppw-data-table h4, .wppw-data-table h5, .wppw-data-table h6 {
    font-size: 24px;
    font-weight: 700;
    color: var(--wppw-dark);
    margin: 0 0 16px;
}
.wppw-data-table-caption {
    font-size: 14px;
    color: var(--wppw-muted);
    margin-top: 14px;
    text-align: center;
    line-height: 1.5;
}
.wppw-data-table-canvas {
    width: 100%;
    overflow-x: auto;
}
.wppw-data-table.is-sticky-header .wppw-data-table-canvas {
    max-height: var(--wppw-dt-max-height, 480px);
    overflow-y: auto;
}
.wppw-data-table-fallback {
    width: 100%;
    border-collapse: collapse;
    font-family: inherit;
    font-size: 14px;
}
.wppw-data-table-fallback th,
.wppw-data-table-fallback td {
    padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
}

/* ── Grid.js bare element resets (since we don't load Mermaid theme) ──── */
.wppw-data-table .wppw-gridjs-container { width: 100%; }
.wppw-data-table .wppw-gridjs-table {
    width: 100%;
    border-collapse: collapse;
    font-family: inherit;
    font-size: 14px;
    color: var(--wppw-dark);
}
.wppw-data-table .wppw-gridjs-th,
.wppw-data-table .wppw-gridjs-td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: middle;
}
.wppw-data-table.is-compact .wppw-gridjs-th,
.wppw-data-table.is-compact .wppw-gridjs-td {
    padding: 6px 10px;
    font-size: 13px;
}
.wppw-data-table .wppw-gridjs-th {
    font-weight: 600;
    color: var(--wppw-dt-header-text);
    user-select: none;
    cursor: default;
    white-space: nowrap;
}
.wppw-data-table .wppw-gridjs-th[data-sort] { cursor: pointer; }
.wppw-data-table .wppw-gridjs-th .gridjs-sort-icon {
    margin-left: 6px;
    opacity: 0.4;
    transition: opacity .15s ease;
}
.wppw-data-table .wppw-gridjs-th:hover .gridjs-sort-icon { opacity: 0.85; }
.wppw-data-table .wppw-gridjs-search {
    margin-bottom: 14px;
}
.wppw-data-table .wppw-gridjs-search input {
    width: 100%;
    max-width: 320px;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.wppw-data-table .wppw-gridjs-search input:focus {
    outline: none;
    border-color: var(--wppw-dt-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.wppw-data-table.is-sticky-header .wppw-gridjs-thead .wppw-gridjs-tr,
.wppw-data-table.is-sticky-header .wppw-gridjs-thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ── Pagination ──────────────────────────────────────────────────────── */
.wppw-data-table .wppw-gridjs-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--wppw-muted);
}
.wppw-data-table .wppw-gridjs-pagination .gridjs-pages { display: flex; gap: 4px; }
.wppw-data-table .wppw-gridjs-page-btn {
    min-width: 32px;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    font-family: inherit;
    font-size: 13px;
    color: var(--wppw-dark);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.wppw-data-table .wppw-gridjs-page-btn:hover:not([disabled]) {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.wppw-data-table .wppw-gridjs-page-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.wppw-data-table .wppw-gridjs-page-current {
    background: var(--wppw-dt-accent) !important;
    border-color: var(--wppw-dt-accent) !important;
    color: #ffffff !important;
}
.wppw-data-table .wppw-gridjs-notfound {
    padding: 40px 20px;
    text-align: center;
    color: var(--wppw-muted);
    font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════
   THEME 1 — Modern. Minimal, lots of whitespace, header is just a thin
   accent-colored underline. Bottom-border-only rows, no zebra by default,
   subtle hover.
   ══════════════════════════════════════════════════════════════════════ */
.wppw-data-table-modern .wppw-gridjs-thead {
    border-bottom: 2px solid var(--wppw-dt-accent);
}
.wppw-data-table-modern .wppw-gridjs-th {
    background: transparent;
    color: var(--wppw-dt-header-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
    font-weight: 700;
    padding-bottom: 14px;
}
.wppw-data-table-modern .wppw-gridjs-tbody .wppw-gridjs-tr {
    border-bottom: 1px solid #f1f5f9;
}
.wppw-data-table-modern.is-striped .wppw-gridjs-tbody .wppw-gridjs-tr:nth-child(even) {
    background: #fafbfc;
}
.wppw-data-table-modern.is-hover .wppw-gridjs-tbody .wppw-gridjs-tr:hover {
    background: rgba(59, 130, 246, 0.04);
}

/* ══════════════════════════════════════════════════════════════════════
   THEME 2 — Classic. Traditional bordered grid, solid colored header row,
   default zebra striping, denser padding. Spreadsheet-style.
   ══════════════════════════════════════════════════════════════════════ */
.wppw-data-table-classic .wppw-gridjs-table {
    border: 1px solid #cbd5e1;
}
.wppw-data-table-classic .wppw-gridjs-th {
    background: var(--wppw-dt-accent);
    color: var(--wppw-dt-header-text);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid #cbd5e1;
}
.wppw-data-table-classic .wppw-gridjs-th:last-child { border-right: none; }
.wppw-data-table-classic .wppw-gridjs-td {
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}
.wppw-data-table-classic .wppw-gridjs-td:last-child { border-right: none; }
.wppw-data-table-classic .wppw-gridjs-tbody .wppw-gridjs-tr:last-child .wppw-gridjs-td { border-bottom: none; }
.wppw-data-table-classic.is-striped .wppw-gridjs-tbody .wppw-gridjs-tr:nth-child(even) {
    background: #f8fafc;
}
.wppw-data-table-classic.is-hover .wppw-gridjs-tbody .wppw-gridjs-tr:hover {
    background: #f1f5f9;
}

/* ══════════════════════════════════════════════════════════════════════
   THEME 3 — Bold. Dark dashboard aesthetic. High-contrast type, accent-
   colored header strip, strong row hover, no row borders. Sticky header
   default makes sense here since dashboards are often tall.
   ══════════════════════════════════════════════════════════════════════ */
.wppw-data-table-bold {
    background: #0f172a;
    color: #e2e8f0;
}
.wppw-data-table-bold h1, .wppw-data-table-bold h2, .wppw-data-table-bold h3,
.wppw-data-table-bold h4, .wppw-data-table-bold h5, .wppw-data-table-bold h6 {
    color: #ffffff;
}
.wppw-data-table-bold .wppw-data-table-caption { color: #94a3b8; }
.wppw-data-table-bold .wppw-gridjs-table { color: #e2e8f0; }
.wppw-data-table-bold .wppw-gridjs-thead { border-bottom: 1px solid var(--wppw-dt-accent); }
.wppw-data-table-bold .wppw-gridjs-th {
    background: transparent;
    color: var(--wppw-dt-header-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    font-weight: 700;
}
.wppw-data-table-bold .wppw-gridjs-td {
    border-bottom: 1px solid #1e293b;
}
.wppw-data-table-bold .wppw-gridjs-tbody .wppw-gridjs-tr:last-child .wppw-gridjs-td { border-bottom: none; }
.wppw-data-table-bold.is-striped .wppw-gridjs-tbody .wppw-gridjs-tr:nth-child(even) {
    background: #1e293b;
}
.wppw-data-table-bold.is-hover .wppw-gridjs-tbody .wppw-gridjs-tr:hover {
    background: rgba(251, 191, 36, 0.08);
}
.wppw-data-table-bold .wppw-gridjs-search input {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}
.wppw-data-table-bold .wppw-gridjs-search input::placeholder { color: #64748b; }
.wppw-data-table-bold .wppw-gridjs-search input:focus {
    border-color: var(--wppw-dt-accent);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.20);
}
.wppw-data-table-bold .wppw-gridjs-pagination { color: #94a3b8; }
.wppw-data-table-bold .wppw-gridjs-page-btn {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}
.wppw-data-table-bold .wppw-gridjs-page-btn:hover:not([disabled]) {
    background: #334155;
}
.wppw-data-table-bold .wppw-gridjs-notfound { color: #64748b; }

/* ══════════════════════════════════════════════════════════════════════════
   LOGO CLOUD
   Grid of partner/client logos. Grayscale-by-default + color-on-hover
   classes are toggled by the renderer; per-instance max-height, gap, and
   default opacity are passed through CSS custom properties on the wrapper.
   ══════════════════════════════════════════════════════════════════════════ */
.wppw-logo-cloud { padding: 40px 20px; margin: 1em auto; text-align: center; }
.wppw-logo-cloud h1, .wppw-logo-cloud h2, .wppw-logo-cloud h3,
.wppw-logo-cloud h4, .wppw-logo-cloud h5, .wppw-logo-cloud h6 {
    font-size: 24px; font-weight: 700; color: var(--wppw-dark); margin: 0 0 12px;
}
.wppw-logo-cloud-sub { font-size: 15px; color: var(--wppw-muted); margin: 0 0 32px; }
.wppw-lc-grid {
    display: grid;
    grid-template-columns: repeat(var(--wppw-lc-cols, 4), minmax(0, 1fr));
    gap: var(--wppw-lc-gap, 32px);
    align-items: center;
    justify-items: center;
}
.wppw-logo-cloud.wppw-lc-cols-2 .wppw-lc-grid { --wppw-lc-cols: 2; }
.wppw-logo-cloud.wppw-lc-cols-3 .wppw-lc-grid { --wppw-lc-cols: 3; }
.wppw-logo-cloud.wppw-lc-cols-4 .wppw-lc-grid { --wppw-lc-cols: 4; }
.wppw-logo-cloud.wppw-lc-cols-5 .wppw-lc-grid { --wppw-lc-cols: 5; }
.wppw-logo-cloud.wppw-lc-cols-6 .wppw-lc-grid { --wppw-lc-cols: 6; }
.wppw-lc-item {
    display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: 200px;
    transition: filter .25s ease, opacity .25s ease;
}
.wppw-lc-item img {
    max-width: 100%;
    max-height: var(--wppw-lc-max-h, 60px);
    object-fit: contain;
    display: block;
}
.wppw-lc-item.is-empty {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 20px 16px;
    color: #94a3b8;
    font-size: 13px;
    height: var(--wppw-lc-max-h, 60px);
}
.wppw-logo-cloud.is-grayscale .wppw-lc-item img {
    filter: grayscale(100%);
    opacity: var(--wppw-lc-opacity, 0.7);
}
.wppw-logo-cloud.is-grayscale.is-hover-color .wppw-lc-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}
@media (max-width: 780px) {
    .wppw-logo-cloud.wppw-lc-cols-5 .wppw-lc-grid,
    .wppw-logo-cloud.wppw-lc-cols-6 .wppw-lc-grid { --wppw-lc-cols: 3; }
    .wppw-logo-cloud.wppw-lc-cols-3 .wppw-lc-grid,
    .wppw-logo-cloud.wppw-lc-cols-4 .wppw-lc-grid { --wppw-lc-cols: 3; }
}
@media (max-width: 480px) {
    .wppw-lc-grid { --wppw-lc-cols: 2; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TABS
   4 visual styles (underline / pill / filled / bordered) scoped via
   wppw-tabs-style-* classes. Alignment via wppw-tabs-align-* on the same
   wrapper. Active state toggled by frontend.js via wppw-tab-active /
   wppw-tab-show classes.
   ══════════════════════════════════════════════════════════════════════════ */
.wppw-tabs { padding: 24px 20px; margin: 1em auto; --wppw-tabs-accent: #3b82f6; }
.wppw-tabs h1, .wppw-tabs h2, .wppw-tabs h3,
.wppw-tabs h4, .wppw-tabs h5, .wppw-tabs h6 {
    font-size: 24px; font-weight: 700; color: var(--wppw-dark); margin: 0 0 20px;
}
.wppw-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 24px;
}
.wppw-tabs-align-center  .wppw-tabs-nav { justify-content: center; }
.wppw-tabs-align-right   .wppw-tabs-nav { justify-content: flex-end; }
.wppw-tabs-align-stretch .wppw-tab-btn  { flex: 1; }
.wppw-tab-btn {
    background: transparent;
    border: none;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all .2s ease;
}
.wppw-tab-btn:hover { color: var(--wppw-tabs-accent); }
.wppw-tab-panel { display: none; padding: 8px 0; line-height: 1.7; color: var(--wppw-dark); }
.wppw-tab-panel.wppw-tab-show { display: block; }
.wppw-tab-panel p { margin: 0 0 1em; }

/* Style 1: Underline */
.wppw-tabs-style-underline .wppw-tabs-nav {
    border-bottom: 1px solid #e2e8f0;
    gap: 0;
}
.wppw-tabs-style-underline .wppw-tab-btn {
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 0;
    padding-bottom: 12px;
}
.wppw-tabs-style-underline .wppw-tab-btn.wppw-tab-active {
    color: var(--wppw-tabs-accent);
    border-bottom-color: var(--wppw-tabs-accent);
}

/* Style 2: Pill */
.wppw-tabs-style-pill .wppw-tab-btn {
    background: #f1f5f9;
    border-radius: 999px;
    padding: 8px 18px;
}
.wppw-tabs-style-pill .wppw-tab-btn.wppw-tab-active {
    background: var(--wppw-tabs-accent);
    color: #ffffff;
}

/* Style 3: Filled */
.wppw-tabs-style-filled .wppw-tab-btn {
    border-radius: 8px 8px 0 0;
    padding: 12px 20px;
}
.wppw-tabs-style-filled .wppw-tab-btn.wppw-tab-active {
    background: var(--wppw-tabs-accent);
    color: #ffffff;
}
.wppw-tabs-style-filled .wppw-tabs-panels {
    background: rgba(59, 130, 246, 0.04);
    padding: 20px;
    border-radius: 0 8px 8px 8px;
}

/* Style 4: Bordered (classic browser tabs) */
.wppw-tabs-style-bordered .wppw-tabs-nav {
    border-bottom: 2px solid var(--wppw-tabs-accent);
    gap: 0;
}
.wppw-tabs-style-bordered .wppw-tab-btn {
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    margin-bottom: -2px;
    padding: 10px 20px;
}
.wppw-tabs-style-bordered .wppw-tab-btn.wppw-tab-active {
    background: #ffffff;
    border-color: var(--wppw-tabs-accent);
    color: var(--wppw-tabs-accent);
}

/* ══════════════════════════════════════════════════════════════════════════
   STICKY CTA BAR
   Fixed-position (top or bottom). Slide-in animation handled here; click
   dismissal + scroll trigger behavior in frontend.js.
   ══════════════════════════════════════════════════════════════════════════ */
.wppw-sticky-cta {
    position: fixed;
    left: 0; right: 0;
    z-index: 9999;
    background: var(--wppw-scta-bg, #0f172a);
    color: var(--wppw-scta-text, #ffffff);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 300ms ease-out;
}
.wppw-sticky-cta-top {
    top: 0;
    bottom: auto;
    transform: translateY(-100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.wppw-sticky-cta-bottom { bottom: 0; }
.wppw-sticky-cta.is-visible { transform: translateY(0); }
.wppw-sticky-cta.is-dismissed { display: none; }
.wppw-scta-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    position: relative;
}
.wppw-scta-msg { font-size: 15px; font-weight: 500; }
.wppw-scta-btn {
    display: inline-block;
    padding: 10px 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    transition: transform .15s ease, box-shadow .15s ease;
}
.wppw-scta-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.wppw-scta-dismiss {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: inherit;
    font-size: 24px;
    line-height: 1;
    width: 32px;
    height: 32px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity .15s ease;
}
.wppw-scta-dismiss:hover { opacity: 1; }
@media (max-width: 600px) {
    .wppw-scta-msg { font-size: 14px; text-align: center; }
    .wppw-scta-inner { padding-right: 48px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ANIMATED COUNTER
   Multi-up grid of count-up numbers. JS in frontend.js does the count
   animation on IntersectionObserver trigger — CSS only handles layout
   and typography.
   ══════════════════════════════════════════════════════════════════════════ */
.wppw-animated-counter {
    padding: 40px 20px;
    margin: 1em auto;
    text-align: center;
    --wppw-ac-value-color: #0f172a;
    --wppw-ac-label-color: #64748b;
    --wppw-ac-value-size: 48px;
}
.wppw-animated-counter h1, .wppw-animated-counter h2, .wppw-animated-counter h3,
.wppw-animated-counter h4, .wppw-animated-counter h5, .wppw-animated-counter h6 {
    font-size: 24px; font-weight: 700; color: var(--wppw-dark); margin: 0 0 12px;
}
.wppw-ac-sub { font-size: 15px; color: var(--wppw-muted); margin: 0 0 36px; }
.wppw-ac-grid {
    display: grid;
    grid-template-columns: repeat(var(--wppw-ac-cols, 4), minmax(0, 1fr));
    gap: 32px;
    align-items: center;
}
.wppw-animated-counter.wppw-ac-cols-2 .wppw-ac-grid { --wppw-ac-cols: 2; }
.wppw-animated-counter.wppw-ac-cols-3 .wppw-ac-grid { --wppw-ac-cols: 3; }
.wppw-animated-counter.wppw-ac-cols-4 .wppw-ac-grid { --wppw-ac-cols: 4; }
.wppw-animated-counter.wppw-ac-cols-5 .wppw-ac-grid { --wppw-ac-cols: 5; }
.wppw-animated-counter.is-divided .wppw-ac-item:not(:last-child) {
    border-right: 1px solid #e2e8f0;
}
.wppw-ac-item { padding: 0 12px; }
.wppw-ac-value {
    font-size: var(--wppw-ac-value-size);
    font-weight: 800;
    color: var(--wppw-ac-value-color);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}
.wppw-ac-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--wppw-ac-label-color);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
@media (max-width: 780px) {
    .wppw-animated-counter.wppw-ac-cols-4 .wppw-ac-grid,
    .wppw-animated-counter.wppw-ac-cols-5 .wppw-ac-grid { --wppw-ac-cols: 2; }
    .wppw-animated-counter.is-divided .wppw-ac-item:not(:last-child) {
        border-right: none; border-bottom: 1px solid #e2e8f0; padding-bottom: 24px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MAP WITH MARKERS
   Wrapper styling only — Leaflet handles all the canvas/SVG/tile drawing
   internally. Leaflet's own CSS is enqueued separately as 'lyra-bt-leaflet'.
   ══════════════════════════════════════════════════════════════════════════ */
.wppw-map-markers { padding: 24px 20px; margin: 1em auto; }
.wppw-map-markers h1, .wppw-map-markers h2, .wppw-map-markers h3,
.wppw-map-markers h4, .wppw-map-markers h5, .wppw-map-markers h6 {
    font-size: 24px; font-weight: 700; color: var(--wppw-dark); margin: 0 0 16px;
}
.wppw-map-canvas {
    width: 100%;
    border-radius: var(--wppw-radius);
    overflow: hidden;
    box-shadow: var(--wppw-shadow-lg);
}
.wppw-map-caption {
    font-size: 14px; color: var(--wppw-muted);
    margin-top: 14px; text-align: center;
}
/* Leaflet popup font normalization */
.wppw-map-markers .leaflet-popup-content {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
}
.wppw-map-markers .leaflet-popup-content strong {
    display: block;
    font-size: 15px;
    color: var(--wppw-dark);
    margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   AUDIO / PODCAST PLAYER
   Two render modes share the same outer wrapper:
   - .wppw-ap-embed     → iframe wrapper (Spotify/Apple/SoundCloud); the
                          embed provides its own player UI inside the
                          iframe so we only style the wrapper geometry.
   - .wppw-ap-html5     → custom <audio> player UI rendered server-side
                          and wired to the hidden <audio> element by the
                          IIFE in frontend.js. Three style variants
                          (.wppw-ap-style-card / -minimal / -compact)
                          differ in layout density.

   Per-instance colors via CSS custom properties on the wrapper:
     --wppw-ap-accent   : play button bg, scrubber fill
     --wppw-ap-bg       : player background
     --wppw-ap-text     : title/artist text color
   ══════════════════════════════════════════════════════════════════════════ */

.wppw-audio-player {
    padding: 24px 20px;
    margin: 1em auto;
    --wppw-ap-accent: #3b82f6;
    --wppw-ap-bg:     #ffffff;
    --wppw-ap-text:   #0f172a;
}
.wppw-audio-player h1, .wppw-audio-player h2, .wppw-audio-player h3,
.wppw-audio-player h4, .wppw-audio-player h5, .wppw-audio-player h6 {
    font-size: 24px; font-weight: 700; color: var(--wppw-dark); margin: 0 0 16px;
}
.wppw-ap-description {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--wppw-muted);
}
.wppw-ap-empty .wppw-ap-placeholder {
    padding: 40px 24px;
    text-align: center;
    color: var(--wppw-muted);
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: var(--wppw-radius);
    font-size: 14px;
}

/* ── Embed mode (Spotify / Apple Podcasts / SoundCloud) ─────────── */
.wppw-ap-iframe-wrap {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--wppw-shadow-lg);
}
.wppw-ap-iframe { display: block; width: 100%; border: 0; }

/* ── HTML5 mode — hide native audio element ──────────────────────── */
.wppw-ap-html5 .wppw-ap-native { display: none; }

/* ── HTML5 mode — shared player UI ───────────────────────────────── */
.wppw-ap-html5 .wppw-ap-body {
    background: var(--wppw-ap-bg);
    color:      var(--wppw-ap-text);
    border-radius: 12px;
    box-shadow: var(--wppw-shadow-md);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.wppw-ap-cover {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wppw-ap-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wppw-ap-cover-placeholder { color: #94a3b8; }
.wppw-ap-main {
    flex: 1 1 auto;
    min-width: 0;  /* prevent flex children from overflowing the scrubber */
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wppw-ap-meta { line-height: 1.3; }
.wppw-ap-title  { font-size: 16px; font-weight: 700; color: var(--wppw-ap-text); }
.wppw-ap-artist { font-size: 13px; color: #64748b; margin-top: 2px; }

/* ── HTML5 mode — controls row (play button + scrubber + time) ──── */
.wppw-ap-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wppw-ap-play {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--wppw-ap-accent);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
.wppw-ap-play:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.wppw-ap-play svg { display: block; }
.wppw-ap-play .wppw-ap-icon-play  { margin-left: 2px; /* optical centering */ }
.wppw-ap-progress {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.wppw-ap-time {
    flex: 0 0 auto;
    font-size: 12px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    min-width: 38px;
}
.wppw-ap-time-duration { text-align: right; }
.wppw-ap-scrubber {
    flex: 1 1 auto;
    position: relative;
    height: 16px;  /* taller hit area for easier touch */
    cursor: pointer;
}
.wppw-ap-scrubber:focus { outline: none; }
.wppw-ap-scrubber:focus-visible .wppw-ap-scrubber-track {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .25);
}
.wppw-ap-scrubber-track,
.wppw-ap-scrubber-fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    height: 4px;
    border-radius: 999px;
}
.wppw-ap-scrubber-track { width: 100%; background: #e2e8f0; }
.wppw-ap-scrubber-fill  { width: 0;    background: var(--wppw-ap-accent); transition: width .1s linear; }
.wppw-ap-scrubber-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--wppw-ap-accent);
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    transition: left .1s linear, transform .1s ease;
}
.wppw-ap-scrubber:hover .wppw-ap-scrubber-thumb { transform: translate(-50%, -50%) scale(1.25); }

/* ── HTML5 mode — download link ──────────────────────────────────── */
.wppw-ap-download {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    color: var(--wppw-ap-accent);
    text-decoration: none;
    font-weight: 600;
}
.wppw-ap-download:hover { text-decoration: underline; }

/* ── HTML5 mode — minimal style (no cover, just controls + title) ── */
.wppw-ap-style-minimal .wppw-ap-cover { display: none; }
.wppw-ap-style-minimal .wppw-ap-body { padding: 14px 16px; }

/* ── HTML5 mode — compact style (single-row, dense) ──────────────── */
.wppw-ap-style-compact .wppw-ap-cover { display: none; }
.wppw-ap-style-compact .wppw-ap-body { padding: 10px 14px; gap: 12px; }
.wppw-ap-style-compact .wppw-ap-main { flex-direction: row; align-items: center; gap: 16px; }
.wppw-ap-style-compact .wppw-ap-meta { flex: 0 1 auto; min-width: 0; }
.wppw-ap-style-compact .wppw-ap-title  { font-size: 14px; }
.wppw-ap-style-compact .wppw-ap-artist { display: none; }
.wppw-ap-style-compact .wppw-ap-controls { flex: 1 1 auto; }
.wppw-ap-style-compact .wppw-ap-play { width: 36px; height: 36px; }

/* ── Responsive — stack cover + controls on narrow screens ───────── */
@media (max-width: 600px) {
    .wppw-ap-html5 .wppw-ap-body { flex-direction: column; align-items: stretch; }
    .wppw-ap-cover { width: 100%; height: 200px; }
    .wppw-ap-style-compact .wppw-ap-main { flex-direction: column; align-items: stretch; gap: 8px; }
}


/* ════════════════════════════════════════════════════════════════════════
 * FORM BLOCKS — shared styles for all 5 forms (multi-step / quote /
 * survey / booking / job application). CSS variables (--lyra-bt-form-accent,
 * --lyra-bt-form-bg, --lyra-bt-form-label) are set inline by each form's
 * renderer so the user's editor color choices propagate without needing
 * to regenerate stylesheets.
 *
 * Architecture:
 *   .lyra-bt-form                  — base form wrapper (every form has it)
 *   .lyra-bt-form-{type}           — per-form-type variant (multi-step-form,
 *                                quote-calculator, survey-form, booking-
 *                                form, job-application-form)
 *   .lyra-bt-form-field            — universal field wrapper
 *   .lyra-bt-form-row              — half-width side-by-side container
 *   .lyra-bt-form-error            — per-field inline error
 *   .lyra-bt-form-status           — top-level success/error banner
 *   .lyra-bt-hp                    — honeypot (always hidden)
 *   .lyra-bt-form-progress         — multi-step progress bar
 *   .lyra-bt-quote-*               — quote calculator items + total widget
 *   .lyra-bt-form-question         — survey question block
 *   .lyra-bt-scale-{5,10}          — survey rating scales
 *   .lyra-bt-jobapp-section        — job application fieldset grouping
 * ════════════════════════════════════════════════════════════════════════ */

.lyra-bt-form {
    /* Defaults — overridden by inline CSS vars from the renderer */
    --lyra-bt-form-accent: #3b82f6;
    --lyra-bt-form-bg:     #ffffff;
    --lyra-bt-form-label:  #0f172a;
    --lyra-bt-form-border: #e2e8f0;
    --lyra-bt-form-muted:  #64748b;
    --lyra-bt-form-error:  #ef4444;
    --lyra-bt-form-success:#10b981;
    --lyra-bt-form-radius: 8px;

    background: var(--lyra-bt-form-bg);
    border-radius: var(--lyra-bt-form-radius);
    padding: 28px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--lyra-bt-form-label);
    line-height: 1.5;
}
.lyra-bt-form-sub {
    color: var(--lyra-bt-form-muted);
    margin: 0 0 20px;
    font-size: 15px;
}

/* ── Honeypot (always hidden, never visible to users) ───────────────── */
.lyra-bt-form .lyra-bt-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ── Field wrapper + label + input ──────────────────────────────────── */
.lyra-bt-form-field {
    margin-bottom: 16px;
    position: relative;
}
.lyra-bt-form-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.lyra-bt-form-row > .lyra-bt-form-field { flex: 1 1 0; }
.lyra-bt-field-half { flex: 1 1 calc(50% - 8px); min-width: 240px; }
.lyra-bt-field-full { flex: 1 1 100%; }

.lyra-bt-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--lyra-bt-form-label);
    margin-bottom: 6px;
}
.lyra-bt-required-mark {
    color: var(--lyra-bt-form-error);
    font-weight: 700;
    margin-left: 2px;
}

.lyra-bt-form input[type="text"],
.lyra-bt-form input[type="email"],
.lyra-bt-form input[type="tel"],
.lyra-bt-form input[type="url"],
.lyra-bt-form input[type="number"],
.lyra-bt-form input[type="date"],
.lyra-bt-form input[type="time"],
.lyra-bt-form input[type="file"],
.lyra-bt-form select,
.lyra-bt-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--lyra-bt-form-label);
    background: #ffffff;
    border: 1px solid var(--lyra-bt-form-border);
    border-radius: 6px;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance: none;
}
.lyra-bt-form input[type="file"] {
    padding: 8px 12px;
    background: #f8fafc;
    cursor: pointer;
}
.lyra-bt-form select {
    /* Add a subtle dropdown arrow since we removed -webkit-appearance */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    padding-right: 36px;
}
.lyra-bt-form textarea {
    resize: vertical;
    min-height: 80px;
}
.lyra-bt-form input:focus,
.lyra-bt-form select:focus,
.lyra-bt-form textarea:focus {
    outline: none;
    border-color: var(--lyra-bt-form-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lyra-bt-form-accent) 18%, transparent);
}
.lyra-bt-form .lyra-bt-field-invalid {
    border-color: var(--lyra-bt-form-error);
}
.lyra-bt-form .lyra-bt-field-invalid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lyra-bt-form-error) 18%, transparent);
}

.lyra-bt-form-help {
    font-size: 12px;
    color: var(--lyra-bt-form-muted);
    margin-top: 6px;
}
.lyra-bt-form-error {
    font-size: 13px;
    color: var(--lyra-bt-form-error);
    margin-top: 6px;
    font-weight: 500;
}
.lyra-bt-file-selected {
    font-size: 13px;
    color: var(--lyra-bt-form-success);
    margin-top: 6px;
    font-weight: 500;
}

/* ── Radio + checkbox groups ────────────────────────────────────────── */
.lyra-bt-radio-group,
.lyra-bt-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lyra-bt-radio,
.lyra-bt-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--lyra-bt-form-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-size: 14px;
}
.lyra-bt-radio:hover,
.lyra-bt-checkbox:hover {
    background: #f8fafc;
    border-color: color-mix(in srgb, var(--lyra-bt-form-accent) 40%, var(--lyra-bt-form-border));
}
.lyra-bt-radio input,
.lyra-bt-checkbox input {
    accent-color: var(--lyra-bt-form-accent);
}

/* ── Single checkbox (lyra-bt-checkbox-single) ─────────────────────────── */
/* Used by the new `checkbox` field type — distinct from checkbox_group
 * (multi-pick). Renders as a row with the prompt to the right of the box. */
.lyra-bt-checkbox-single {
    margin-top: 4px;
}

/* ── Acceptance / consent ──────────────────────────────────────────── */
/* The "I agree to the terms" pattern. The label can carry an HTML link
 * (e.g. to a privacy policy) so it gets a slightly looser layout than a
 * plain checkbox. */
.lyra-bt-acceptance {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--lyra-bt-form-border);
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.5;
    color: var(--lyra-bt-form-label);
    background: #ffffff;
}
.lyra-bt-acceptance input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--lyra-bt-form-accent);
}
.lyra-bt-acceptance:hover {
    border-color: color-mix(in srgb, var(--lyra-bt-form-accent) 40%, var(--lyra-bt-form-border));
}
.lyra-bt-acceptance-text a {
    color: var(--lyra-bt-form-accent);
    text-decoration: underline;
}

/* ── Display-only HTML field ───────────────────────────────────────── */
/* The `html` field type is a content slot — typography matches the
 * surrounding form so editor-supplied content blends in. */
.lyra-bt-field-type-html {
    color: var(--lyra-bt-form-label);
    line-height: 1.55;
}
.lyra-bt-field-type-html p { margin: 0 0 8px; }
.lyra-bt-field-type-html p:last-child { margin-bottom: 0; }
.lyra-bt-field-type-html a { color: var(--lyra-bt-form-accent); }

/* ── Step (in-line page-break section divider) ─────────────────────── */
/* Used when the user inserts a `step` field into a non-multi-step form
 * to create a labelled section break. The multi_step_form block already
 * has its own .lyra-bt-form-step inside .lyra-bt-form-steps-container; this is
 * the alternative inline marker. */
.lyra-bt-field-type-step {
    border-top: 1px solid var(--lyra-bt-form-border);
    margin-top: 8px;
    padding-top: 16px;
}
.lyra-bt-field-type-step .lyra-bt-form-step-header {
    margin-bottom: 0;
}

/* ── Time picker ───────────────────────────────────────────────────── */
.lyra-bt-field-type-time input[type="time"] {
    /* native control already covers this; just match other inputs' sizing */
}

/* ── Generic file field (per-field upload) ─────────────────────────── */
.lyra-bt-field-type-file input[type="file"] {
    padding: 8px;
    background: #f8fafc;
}
.lyra-bt-file-selected {
    margin-top: 6px;
    font-size: 13px;
    color: var(--lyra-bt-form-success);
    font-weight: 500;
}

/* ── Password field ────────────────────────────────────────────────── */
/* Uses the same input styling as text — this rule is just a hook for
 * theme overrides if a site wants password-specific treatment. */
.lyra-bt-field-type-password input[type="password"] {
    font-family: inherit;
    letter-spacing: 0.05em;
}

/* ── reCAPTCHA widget + badge ──────────────────────────────────────── */
.lyra-bt-field-recaptcha {
    margin-top: 8px;
}
.lyra-bt-recaptcha-tos {
    margin-top: 12px;
    font-size: 12px;
    color: var(--lyra-bt-form-muted);
    line-height: 1.5;
}
.lyra-bt-recaptcha-tos a {
    color: var(--lyra-bt-form-accent);
    text-decoration: underline;
}
/* Per-form badge positioning for v3 — applied via JS (we add a body
 * class) or via inline-style. The "hide" mode keeps the iframe but
 * makes it invisible (per Google's ToS, you must show their terms link
 * if you hide the badge). */
.lyra-bt-form[data-lyra-bt-recaptcha-v3-badge="bottomleft"] ~ .grecaptcha-badge,
body.lyra-bt-recaptcha-bottomleft .grecaptcha-badge {
    left: 14px !important;
    right: auto !important;
}
.lyra-bt-form[data-lyra-bt-recaptcha-v3-badge="hide"] ~ .grecaptcha-badge,
body.lyra-bt-recaptcha-hide .grecaptcha-badge {
    visibility: hidden;
}

/* ── Submit button + spinner + status banner ────────────────────────── */
.lyra-bt-form-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}
.lyra-bt-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: var(--lyra-bt-form-accent);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, transform 0.05s;
}
.lyra-bt-form-submit:hover  { background: color-mix(in srgb, var(--lyra-bt-form-accent) 88%, #000000); }
.lyra-bt-form-submit:active { transform: translateY(1px); }
.lyra-bt-form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.lyra-bt-form-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--lyra-bt-form-border);
    border-top-color: var(--lyra-bt-form-accent);
    border-radius: 50%;
    animation: lyra-bt-form-spin 0.7s linear infinite;
}
.lyra-bt-form-spinner.is-visible { display: inline-block; }
@keyframes lyra-bt-form-spin {
    to { transform: rotate(360deg); }
}

.lyra-bt-form-status {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 6px;
    font-size: 14px;
    display: none;
}
.lyra-bt-form-status.is-success,
.lyra-bt-form-status.is-error {
    display: block;
}
.lyra-bt-form-status.is-success {
    background: color-mix(in srgb, var(--lyra-bt-form-success) 12%, #ffffff);
    color: color-mix(in srgb, var(--lyra-bt-form-success) 80%, #000000);
    border: 1px solid color-mix(in srgb, var(--lyra-bt-form-success) 40%, transparent);
    text-align: center;
    padding: 28px 24px;
    font-size: 16px;
}
.lyra-bt-form-status.is-error {
    background: color-mix(in srgb, var(--lyra-bt-form-error) 10%, #ffffff);
    color: color-mix(in srgb, var(--lyra-bt-form-error) 80%, #000000);
    border: 1px solid color-mix(in srgb, var(--lyra-bt-form-error) 40%, transparent);
}
.lyra-bt-form-success-icon {
    font-size: 36px;
    color: var(--lyra-bt-form-success);
    line-height: 1;
    margin-bottom: 10px;
    font-weight: 700;
}
.lyra-bt-form-success-msg {
    font-size: 17px;
    font-weight: 600;
    color: var(--lyra-bt-form-label);
}
.lyra-bt-form-success-extra {
    font-size: 14px;
    color: var(--lyra-bt-form-muted);
    margin-top: 12px;
}

/* ── Empty state (no fields configured) ─────────────────────────────── */
.lyra-bt-form-empty {
    padding: 32px;
    text-align: center;
    color: var(--lyra-bt-form-muted);
    background: #f8fafc;
    border: 1px dashed var(--lyra-bt-form-border);
    border-radius: var(--lyra-bt-form-radius);
    font-size: 14px;
}

/* ════════════════════════════════════════════════════════════════════════
 * Multi-step wizard — progress bar + step containers + nav buttons
 * ════════════════════════════════════════════════════════════════════════ */
.lyra-bt-form-progress {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    counter-reset: lyra-bt-step;
}
.lyra-bt-progress-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    color: var(--lyra-bt-form-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}
.lyra-bt-progress-step::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 50%;
    right: -50%;
    height: 2px;
    background: var(--lyra-bt-form-border);
    z-index: 0;
}
.lyra-bt-progress-step:last-child::before { display: none; }
.lyra-bt-progress-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--lyra-bt-form-border);
    color: var(--lyra-bt-form-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    position: relative;
    z-index: 1;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.lyra-bt-progress-step.is-active .lyra-bt-progress-num,
.lyra-bt-progress-step.is-done   .lyra-bt-progress-num {
    background: var(--lyra-bt-form-accent);
    border-color: var(--lyra-bt-form-accent);
    color: #ffffff;
}
.lyra-bt-progress-step.is-active { color: var(--lyra-bt-form-label); }
.lyra-bt-progress-step.is-done::before {
    background: var(--lyra-bt-form-accent);
}
.lyra-bt-progress-step.is-done .lyra-bt-progress-num::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
}
.lyra-bt-progress-step.is-done .lyra-bt-progress-num {
    color: transparent;
}
.lyra-bt-progress-title {
    font-size: 12px;
    line-height: 1.2;
}

.lyra-bt-form-step {
    animation: lyra-bt-step-in 0.25s ease-out;
}
@keyframes lyra-bt-step-in {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}
.lyra-bt-form-step-header {
    margin-bottom: 18px;
}
.lyra-bt-form-step-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--lyra-bt-form-label);
    margin: 0 0 4px;
}
.lyra-bt-form-step-desc {
    font-size: 14px;
    color: var(--lyra-bt-form-muted);
    margin: 0;
}
.lyra-bt-step-num {
    color: var(--lyra-bt-form-accent);
    margin-right: 4px;
}

.lyra-bt-step-nav {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 24px;
    align-items: center;
}
.lyra-bt-step-nav .lyra-bt-form-prev,
.lyra-bt-step-nav .lyra-bt-form-next {
    padding: 11px 22px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.lyra-bt-step-nav .lyra-bt-form-prev {
    background: transparent;
    color: var(--lyra-bt-form-muted);
    border: 1px solid var(--lyra-bt-form-border);
}
.lyra-bt-step-nav .lyra-bt-form-prev:hover {
    background: #f8fafc;
    color: var(--lyra-bt-form-label);
}
.lyra-bt-step-nav .lyra-bt-form-next {
    background: var(--lyra-bt-form-accent);
    color: #ffffff;
    border: none;
    margin-left: auto;
}
.lyra-bt-step-nav .lyra-bt-form-next:hover {
    background: color-mix(in srgb, var(--lyra-bt-form-accent) 88%, #000000);
}
/* Submit button on the wizard's last step — match Next button's right-alignment
 * so the action button sits in the same place across all steps regardless of
 * whether back navigation is enabled. */
.lyra-bt-step-nav .lyra-bt-form-submit {
    margin-left: auto;
}

/* ════════════════════════════════════════════════════════════════════════
 * Conditional Contact Form — dropdown-driven branch visibility
 *
 * Layout: always-shown fields → branching dropdown → branch sections (one
 * shown at a time, the rest are [hidden]). Each branch can carry an
 * optional description above its fields.
 * ════════════════════════════════════════════════════════════════════════ */
.lyra-bt-form-conditional-contact-form .lyra-bt-cf-always {
    /* Always-shown block sits at the top. No special spacing — relies on
     * the standard .lyra-bt-form-fields gaps between fields. */
}
.lyra-bt-form-conditional-contact-form .lyra-bt-cf-dropdown-wrap {
    /* Dropdown wrapper inherits .lyra-bt-form-field's full-width sizing. We
     * add a small amount of top margin so it visually separates from the
     * always-shown block above it. */
    margin-top: 8px;
}
.lyra-bt-form-conditional-contact-form .lyra-bt-cf-branches {
    /* Branches container — no visual styling itself; the contained
     * .lyra-bt-cf-branch is what shows/hides. */
    margin-top: 4px;
}
.lyra-bt-form-conditional-contact-form .lyra-bt-cf-branch {
    /* Each branch fades + slides in when shown. Mirrors the multi-step
     * .lyra-bt-form-step animation so the two feel like the same family. */
    animation: lyra-bt-cf-branch-in 0.22s ease-out;
    border-top: 1px dashed var(--lyra-bt-form-border);
    margin-top: 16px;
    padding-top: 18px;
}
@keyframes lyra-bt-cf-branch-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lyra-bt-form-conditional-contact-form .lyra-bt-cf-branch[hidden] {
    /* Belt-and-braces: HTML's `hidden` attribute already hides this, but
     * some themes set `display` on every element which can override the
     * UA stylesheet. !important here ensures visitors never see a hidden
     * branch even on quirky themes. */
    display: none !important;
}
.lyra-bt-form-conditional-contact-form .lyra-bt-cf-branch-desc {
    font-size: 14px;
    color: var(--lyra-bt-form-muted);
    margin: 0 0 16px;
    line-height: 1.5;
}
.lyra-bt-form-conditional-contact-form .lyra-bt-cf-branch-fields {
    /* Reuses .lyra-bt-form-fields styling. Nothing extra needed — the parent
     * .lyra-bt-form-fields rule (further up in this stylesheet) handles
     * spacing + the half/full width grid. */
}
@media (prefers-reduced-motion: reduce) {
    .lyra-bt-form-conditional-contact-form .lyra-bt-cf-branch {
        animation: none;
    }
}

/* ════════════════════════════════════════════════════════════════════════
 * Quote calculator — items, addons, live total widget
 * ════════════════════════════════════════════════════════════════════════ */
.lyra-bt-quote-items,
.lyra-bt-quote-addons {
    border: 1px solid var(--lyra-bt-form-border);
    border-radius: 8px;
    padding: 16px 18px;
    margin: 0 0 16px;
}
.lyra-bt-quote-items legend,
.lyra-bt-quote-addons legend {
    font-size: 12px;
    font-weight: 700;
    color: var(--lyra-bt-form-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 8px;
}
.lyra-bt-quote-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}
.lyra-bt-quote-item:last-child { border-bottom: none; }
.lyra-bt-quote-item-info {
    flex: 1;
    min-width: 0;
}
.lyra-bt-quote-item-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--lyra-bt-form-label);
}
.lyra-bt-quote-item-price {
    font-weight: 400;
    color: var(--lyra-bt-form-muted);
    font-size: 13px;
}
.lyra-bt-quote-desc {
    display: block;
    font-size: 12px;
    color: var(--lyra-bt-form-muted);
    margin-top: 2px;
}
.lyra-bt-quote-item-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.lyra-bt-qty-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--lyra-bt-form-border);
    background: #ffffff;
    border-radius: 6px;
    font-size: 18px;
    color: var(--lyra-bt-form-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: inherit;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.lyra-bt-qty-btn:hover {
    background: var(--lyra-bt-form-accent);
    color: #ffffff;
    border-color: var(--lyra-bt-form-accent);
}
.lyra-bt-quote-qty {
    width: 56px !important;
    text-align: center;
    padding: 6px 4px !important;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.lyra-bt-quote-addon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    flex-wrap: wrap;
}
.lyra-bt-quote-addon:last-child { border-bottom: none; }
.lyra-bt-quote-addon-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--lyra-bt-form-label);
    flex: 1;
}
.lyra-bt-quote-addon-price {
    color: var(--lyra-bt-form-accent);
    font-weight: 700;
    font-size: 14px;
}

.lyra-bt-quote-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: color-mix(in srgb, var(--lyra-bt-form-accent) 8%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--lyra-bt-form-accent) 30%, transparent);
    border-radius: 10px;
    margin: 8px 0 18px;
}
.lyra-bt-quote-total-label {
    font-size: 13px;
    font-weight: 700;
    color: color-mix(in srgb, var(--lyra-bt-form-accent) 80%, #000000);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.lyra-bt-quote-total-value {
    font-size: 26px;
    font-weight: 800;
    color: color-mix(in srgb, var(--lyra-bt-form-accent) 80%, #000000);
    font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════════
 * Survey — questions + scales
 * ════════════════════════════════════════════════════════════════════════ */
.lyra-bt-survey-questions {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
}
.lyra-bt-form-question {
    padding: 18px 20px;
    border: 1px solid var(--lyra-bt-form-border);
    border-radius: 8px;
    background: #ffffff;
}
.lyra-bt-q-num {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--lyra-bt-form-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.lyra-bt-form-q-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--lyra-bt-form-label);
    margin-bottom: 12px;
    line-height: 1.4;
}

/* Rating scales (1-5 and 0-10) — clickable button-style radios */
.lyra-bt-scale {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.lyra-bt-scale-option {
    flex: 1;
    min-width: 36px;
    cursor: pointer;
    position: relative;
}
.lyra-bt-scale-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.lyra-bt-scale-option > span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    background: #ffffff;
    border: 1px solid var(--lyra-bt-form-border);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--lyra-bt-form-muted);
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.lyra-bt-scale-option:hover > span {
    border-color: var(--lyra-bt-form-accent);
    color: var(--lyra-bt-form-accent);
}
.lyra-bt-scale-option input:checked + span {
    background: var(--lyra-bt-form-accent);
    border-color: var(--lyra-bt-form-accent);
    color: #ffffff;
}

/* ════════════════════════════════════════════════════════════════════════
 * Job application — section fieldsets
 * ════════════════════════════════════════════════════════════════════════ */
.lyra-bt-jobapp-section {
    border: 1px solid var(--lyra-bt-form-border);
    border-radius: 8px;
    padding: 18px 20px;
    margin: 0 0 16px;
}
.lyra-bt-jobapp-section legend {
    font-size: 13px;
    font-weight: 700;
    color: var(--lyra-bt-form-label);
    padding: 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lyra-bt-jobapp-section .lyra-bt-form-row:not(:last-child),
.lyra-bt-jobapp-section .lyra-bt-form-field:not(:last-child) {
    margin-bottom: 14px;
}
.lyra-bt-jobapp-section .lyra-bt-form-field:last-child {
    margin-bottom: 0;
}

/* ════════════════════════════════════════════════════════════════════════
 * Mobile responsive — stack half-width fields, narrow padding,
 * compact progress bar (number circles only, no titles).
 * ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .lyra-bt-form { padding: 20px; }
    .lyra-bt-field-half { flex: 1 1 100%; min-width: 0; }
    .lyra-bt-form-row { flex-direction: column; gap: 0; }
    .lyra-bt-progress-title { display: none; }
    .lyra-bt-progress-step::before { top: 13px; }
    .lyra-bt-quote-total { padding: 14px 18px; }
    .lyra-bt-quote-total-value { font-size: 22px; }
    .lyra-bt-step-nav { flex-direction: column-reverse; gap: 8px; }
    .lyra-bt-step-nav .lyra-bt-form-prev,
    .lyra-bt-step-nav .lyra-bt-form-next,
    .lyra-bt-step-nav .lyra-bt-form-submit { width: 100%; }
    .lyra-bt-step-nav .lyra-bt-form-next,
    .lyra-bt-step-nav .lyra-bt-form-submit { margin-left: 0; }
}


/* ════════════════════════════════════════════════════════════════════════
 * TIER COMPARISON BLOCKS — three layouts (matrix / cards / hybrid)
 * sharing tier configuration, the High-Value column highlight, and the
 * "Most Popular" badge. CSS variables (--wppw-tc-*) are set inline by
 * each renderer based on user-chosen settings (accent, card bg, badge
 * colors, border, radius), so editor color picks propagate without
 * regenerating stylesheets.
 *
 * Class structure:
 *   .wppw-tc                    — base wrapper (every layout has it)
 *   .wppw-tc-matrix             — matrix layout variant
 *   .wppw-tc-cards              — cards layout variant
 *   .wppw-tc-hybrid             — hybrid layout (cards + matrix)
 *   .wppw-tc-table              — matrix HTML table
 *   .wppw-tc-card               — single tier card
 *   .wppw-tc-card.is-highlighted — highlighted (High-Value) tier card
 *   .wppw-tc-badge              — "Most Popular" badge
 *   .wppw-tc-cell.is-highlighted — matrix cell in highlighted column
 *   .wppw-tc-tier-header.is-highlighted — matrix header for highlighted col
 * ════════════════════════════════════════════════════════════════════════ */

.wppw-tc {
    /* Defaults — overridden by inline CSS vars from the renderer */
    --wppw-tc-accent:          #3b82f6;
    --wppw-tc-card-bg:         #ffffff;
    --wppw-tc-highlighted-bg:  #eff6ff;
    --wppw-tc-border:          #e2e8f0;
    --wppw-tc-radius:          12px;
    --wppw-tc-badge-bg:        #3b82f6;
    --wppw-tc-badge-color:     #ffffff;
    --wppw-tc-tier-accent:     var(--wppw-tc-accent); /* per-tier override fallback */
    --wppw-tc-text:            #0f172a;
    --wppw-tc-muted:           #64748b;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--wppw-tc-text);
    line-height: 1.5;
}
.wppw-tc-sub {
    color: var(--wppw-tc-muted);
    margin: 0 0 24px;
    font-size: 16px;
}

/* ── Empty state (no tiers configured) ───────────────────────────── */
.wppw-tc-empty {
    padding: 32px;
    text-align: center;
    color: var(--wppw-tc-muted);
    background: #f8fafc;
    border: 1px dashed var(--wppw-tc-border);
    border-radius: var(--wppw-tc-radius);
    font-size: 14px;
}

/* ── Most Popular Badge — shared across all 3 layouts ────────────── */
.wppw-tc-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}
.wppw-tc-badge > span {
    display: inline-block;
    padding: 6px 14px;
    background: var(--wppw-tc-badge-bg);
    color: var(--wppw-tc-badge-color);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}

/* ── Price block — shared ────────────────────────────────────────── */
.wppw-tc-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
    margin: 8px 0 4px;
}
.wppw-tc-currency {
    font-size: 18px;
    font-weight: 600;
    color: var(--wppw-tc-text);
    align-self: flex-start;
    margin-top: 6px;
}
.wppw-tc-amount {
    font-size: 36px;
    font-weight: 800;
    color: var(--wppw-tc-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.wppw-tc-period {
    font-size: 14px;
    color: var(--wppw-tc-muted);
    font-weight: 500;
}
.wppw-tc-orig-price {
    color: var(--wppw-tc-muted);
    font-size: 14px;
    margin-right: 4px;
}
.wppw-tc-orig-price s .wppw-tc-amount {
    font-size: 16px;
    font-weight: 500;
    color: var(--wppw-tc-muted);
}
.wppw-tc-orig-price s .wppw-tc-currency {
    font-size: 12px;
    color: var(--wppw-tc-muted);
    margin-top: 0;
}
.wppw-tc-savings {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #047857;
    background: #d1fae5;
    padding: 2px 8px;
    border-radius: 4px;
    margin: 4px 0 8px;
}

/* ── Tier name + tagline + description — shared ──────────────────── */
.wppw-tc-tier-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--wppw-tc-text);
}
.wppw-tc-tier-tagline {
    font-size: 13px;
    color: var(--wppw-tc-muted);
    margin-top: 2px;
}
.wppw-tc-tier-desc {
    font-size: 14px;
    color: var(--wppw-tc-muted);
    margin: 12px 0;
    line-height: 1.45;
}

/* ── CTA buttons — shared ────────────────────────────────────────── */
.wppw-tc-cta {
    --wppw-tc-btn-accent: var(--wppw-tc-tier-accent, var(--wppw-tc-accent));
    display: inline-block;
    padding: 12px 22px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
    box-sizing: border-box;
}
.wppw-tc-cta-solid {
    background: var(--wppw-tc-btn-accent);
    color: #ffffff;
    border: 1px solid var(--wppw-tc-btn-accent);
}
.wppw-tc-cta-solid:hover {
    background: color-mix(in srgb, var(--wppw-tc-btn-accent) 85%, #000000);
    border-color: color-mix(in srgb, var(--wppw-tc-btn-accent) 85%, #000000);
    color: #ffffff;
}
.wppw-tc-cta-outline {
    background: transparent;
    color: var(--wppw-tc-btn-accent);
    border: 1px solid var(--wppw-tc-btn-accent);
}
.wppw-tc-cta-outline:hover {
    background: var(--wppw-tc-btn-accent);
    color: #ffffff;
}
.wppw-tc-cta:active { transform: translateY(1px); }

/* ── Check / Cross / Dash icons (matrix cells + card features) ──── */
.wppw-tc-check {
    color: var(--wppw-tc-accent);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
}
.wppw-tc-cross {
    color: #cbd5e1;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
}
.wppw-tc-dash {
    color: #cbd5e1;
    font-size: 18px;
    line-height: 1;
}
.wppw-tc-cell-text {
    color: var(--wppw-tc-text);
    font-size: 14px;
    font-weight: 500;
}

/* ── Tooltip badge (used in matrix row labels + card features) ──── */
.wppw-tc-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    cursor: help;
    margin-left: 4px;
    vertical-align: middle;
}
.wppw-tc-tooltip:hover,
.wppw-tc-tooltip:focus {
    background: var(--wppw-tc-accent);
    color: #ffffff;
    outline: none;
}

/* ════════════════════════════════════════════════════════════════════════
 * MATRIX layout — table-based feature comparison
 * ════════════════════════════════════════════════════════════════════════ */
.wppw-tc-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.wppw-tc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--wppw-tc-card-bg);
    border-radius: var(--wppw-tc-radius);
    overflow: hidden;
    border: 1px solid var(--wppw-tc-border);
    table-layout: fixed;
    min-width: 600px;
}
.wppw-tc-table thead th {
    padding: 24px 18px 20px;
    background: #ffffff;
    border-bottom: 1px solid var(--wppw-tc-border);
    text-align: center;
    vertical-align: top;
    position: relative;
}
.wppw-tc-table thead th.wppw-tc-feature-col {
    background: #f8fafc;
    text-align: left;
    width: 28%;
}
.wppw-tc-feature-col-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wppw-tc-muted);
}

.wppw-tc-tier-header.is-highlighted {
    background: var(--wppw-tc-highlighted-bg);
    box-shadow: inset 0 4px 0 var(--wppw-tc-accent);
}
.wppw-tc-tier-header .wppw-tc-tier-name { font-size: 18px; }
.wppw-tc-tier-header .wppw-tc-price     { justify-content: center; margin: 8px 0; }
.wppw-tc-tier-header .wppw-tc-cta       { margin-top: 12px; min-width: 140px; }
.wppw-tc-tier-header .wppw-tc-tier-desc { font-size: 13px; }

/* Body rows */
.wppw-tc-row th.wppw-tc-row-label {
    padding: 14px 18px;
    background: #f8fafc;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: var(--wppw-tc-text);
    border-bottom: 1px solid var(--wppw-tc-border);
}
.wppw-tc-row .wppw-tc-cell {
    padding: 14px 18px;
    text-align: center;
    border-bottom: 1px solid var(--wppw-tc-border);
    vertical-align: middle;
    background: #ffffff;
}
.wppw-tc-row .wppw-tc-cell.is-highlighted {
    background: var(--wppw-tc-highlighted-bg);
}
.wppw-tc-row-alt th.wppw-tc-row-label {
    background: #f1f5f9;
}
.wppw-tc-row-alt .wppw-tc-cell {
    background: #fcfcfd;
}
.wppw-tc-row-alt .wppw-tc-cell.is-highlighted {
    background: color-mix(in srgb, var(--wppw-tc-highlighted-bg) 92%, #000000);
}
/* Last row no border */
.wppw-tc-table tbody tr:last-child th,
.wppw-tc-table tbody tr:last-child td { border-bottom: none; }

/* Group header rows (section titles spanning all columns) */
.wppw-tc-group-row .wppw-tc-group-header {
    padding: 14px 18px 8px;
    background: #f1f5f9;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--wppw-tc-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--wppw-tc-border);
    border-top: 1px solid var(--wppw-tc-border);
}

/* Compact row variant — denser table */
.wppw-tc-matrix.is-compact .wppw-tc-row .wppw-tc-cell,
.wppw-tc-matrix.is-compact .wppw-tc-row th.wppw-tc-row-label {
    padding: 8px 14px;
}

/* ════════════════════════════════════════════════════════════════════════
 * CARDS layout — side-by-side tier cards with feature lists
 * ════════════════════════════════════════════════════════════════════════ */
.wppw-tc-cards-grid {
    display: grid;
    grid-template-columns: repeat(var(--wppw-tc-cols, 3), minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}
.wppw-tc-cards[data-tier-count="2"] .wppw-tc-cards-grid { --wppw-tc-cols: 2; }
.wppw-tc-cards[data-tier-count="3"] .wppw-tc-cards-grid { --wppw-tc-cols: 3; }
.wppw-tc-cards[data-tier-count="4"] .wppw-tc-cards-grid { --wppw-tc-cols: 4; }
.wppw-tc-cards[data-tier-count="5"] .wppw-tc-cards-grid { --wppw-tc-cols: 5; }
.wppw-tc-hybrid[data-tier-count="2"] .wppw-tc-cards-grid { --wppw-tc-cols: 2; }
.wppw-tc-hybrid[data-tier-count="3"] .wppw-tc-cards-grid { --wppw-tc-cols: 3; }
.wppw-tc-hybrid[data-tier-count="4"] .wppw-tc-cards-grid { --wppw-tc-cols: 4; }
.wppw-tc-hybrid[data-tier-count="5"] .wppw-tc-cards-grid { --wppw-tc-cols: 5; }

.wppw-tc-card {
    position: relative;
    padding: 28px 24px;
    background: var(--wppw-tc-card-bg);
    border: 1px solid var(--wppw-tc-border);
    border-radius: var(--wppw-tc-radius);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}
.wppw-tc-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}
.wppw-tc-card.is-highlighted {
    background: var(--wppw-tc-highlighted-bg);
    border: 2px solid var(--wppw-tc-accent);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.15);
    margin: -4px 0 0; /* slight pop */
}
.wppw-tc-cards.wppw-tc-layout-highlight .wppw-tc-card.is-highlighted {
    transform: scale(1.04);
    z-index: 1;
}
.wppw-tc-cards.wppw-tc-layout-highlight .wppw-tc-card.is-highlighted:hover {
    transform: scale(1.04) translateY(-2px);
}
.wppw-tc-card-header {
    margin-bottom: 4px;
}
.wppw-tc-features {
    list-style: none;
    padding: 0;
    margin: 16px 0 24px;
    flex: 1;
}
.wppw-tc-feat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--wppw-tc-text);
}
.wppw-tc-feat .wppw-tc-feat-label { flex: 1; }
.wppw-tc-feat-excluded {
    color: #cbd5e1;
    text-decoration: line-through;
}
.wppw-tc-feat-excluded .wppw-tc-feat-label { color: #cbd5e1; }
.wppw-tc-card-cta { margin-top: auto; }
.wppw-tc-card-cta .wppw-tc-cta { width: 100%; }

/* ════════════════════════════════════════════════════════════════════════
 * HYBRID layout — cards on top + matrix below, sharing tier accent
 * ════════════════════════════════════════════════════════════════════════ */
.wppw-tc-hybrid .wppw-tc-cards-grid {
    margin-bottom: 40px;
}
.wppw-tc-matrix-section {
    border-top: 1px solid var(--wppw-tc-border);
    padding-top: 32px;
    margin-top: 16px;
}
.wppw-tc-matrix-heading {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--wppw-tc-text);
    text-align: center;
}
.wppw-tc-tier-header-compact {
    padding: 16px 18px;
    background: #ffffff;
    border-bottom: 1px solid var(--wppw-tc-border);
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--wppw-tc-text);
    vertical-align: middle;
}
.wppw-tc-tier-header-compact.is-highlighted {
    background: var(--wppw-tc-highlighted-bg);
    color: var(--wppw-tc-accent);
    box-shadow: inset 0 3px 0 var(--wppw-tc-accent);
}

/* ════════════════════════════════════════════════════════════════════════
 * Mobile responsive — stack tier cards, scroll matrix horizontally,
 * collapse compact-header columns
 * ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
    .wppw-tc-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    .wppw-tc-card.is-highlighted,
    .wppw-tc-cards.wppw-tc-layout-highlight .wppw-tc-card.is-highlighted {
        transform: none;
        margin: 0;
    }
    .wppw-tc-table thead th {
        padding: 16px 10px;
    }
    .wppw-tc-tier-header .wppw-tc-tier-desc { display: none; }
    .wppw-tc-amount { font-size: 28px; }
    .wppw-tc-matrix-heading { font-size: 18px; }
}


/* ════════════════════════════════════════════════════════════════════════
 * HERO BLOCKS — 4 dynamic hero block types
 *   .wppw-impact-hero            — full-bleed video bg + parallax content
 *   .wppw-split-screen-hero      — 50/50 image + content/form split
 *   .wppw-animated-headline-hero — cycling phrases with typewriter/fade/slide
 *   .wppw-welcome-back-hero      — personalized variant swap
 *
 * Shared base class .wppw-hero applies the universal Lyra padding/margin
 * via the inner_padding_margin_targets filter mapping. CSS variables
 * (--wppw-hero-*) are set inline by each renderer based on user settings.
 * ════════════════════════════════════════════════════════════════════════ */

.wppw-hero {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Shared overlay element (sits between bg + content) */
.wppw-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Shared CTA pattern */
.wppw-hero__cta {
    --wppw-hero-cta-color: #3b82f6;
    display: inline-block;
    padding: 14px 28px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
    border: 1px solid var(--wppw-hero-cta-color);
    box-sizing: border-box;
    line-height: 1.2;
}
.wppw-hero__cta--solid {
    background: var(--wppw-hero-cta-color);
    color: #ffffff;
}
.wppw-hero__cta--solid:hover {
    background: color-mix(in srgb, var(--wppw-hero-cta-color) 85%, #000);
    border-color: color-mix(in srgb, var(--wppw-hero-cta-color) 85%, #000);
    color: #ffffff;
}
.wppw-hero__cta--outline {
    background: transparent;
    color: var(--wppw-hero-cta-color);
}
.wppw-hero__cta--outline:hover {
    background: var(--wppw-hero-cta-color);
    color: #ffffff;
}
.wppw-hero__cta--ghost {
    background: transparent;
    color: var(--wppw-hero-cta-color);
    border-color: transparent;
}
.wppw-hero__cta--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}
.wppw-hero__cta:active { transform: translateY(1px); }

/* ════════════════════════════════════════════════════════════════════════
 * 1. Impact Hero — video background + parallax content
 * ════════════════════════════════════════════════════════════════════════ */
.wppw-impact-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #ffffff;
    padding: 60px 24px;
}
.wppw-impact-hero[data-vpos="top"]    { align-items: flex-start; }
.wppw-impact-hero[data-vpos="bottom"] { align-items: flex-end;   }
.wppw-impact-hero[data-align="left"]   { justify-content: flex-start; text-align: left;   }
.wppw-impact-hero[data-align="center"] { justify-content: center;     text-align: center; }
.wppw-impact-hero[data-align="right"]  { justify-content: flex-end;   text-align: right;  }

.wppw-impact-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.wppw-impact-hero__video,
.wppw-impact-hero__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.wppw-impact-hero__poster {
    background-size: cover;
    background-position: center;
}
.wppw-impact-hero__embed {
    /* YouTube/Vimeo iframes — sized larger than viewport to crop the
     * letterbox/branding edges. Centered absolutely. */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78vh;       /* 16:9 ratio relative to viewport height */
    height: 56.25vw;       /* 16:9 ratio relative to viewport width  */
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: 0;
}
.wppw-impact-hero__content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    will-change: transform;
}
.wppw-impact-hero__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 14px;
}
.wppw-impact-hero__headline {
    font-size: clamp( 32px, 5vw, 64px );
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    color: inherit;
}
.wppw-impact-hero__sub {
    font-size: clamp( 16px, 1.6vw, 20px );
    line-height: 1.5;
    margin: 0 auto 28px;
    max-width: 600px;
    opacity: 0.9;
}
.wppw-impact-hero[data-align="left"]  .wppw-impact-hero__sub,
.wppw-impact-hero[data-align="right"] .wppw-impact-hero__sub { margin-left: 0; margin-right: 0; }
.wppw-impact-hero__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: inherit;
}
.wppw-impact-hero[data-align="center"] .wppw-impact-hero__ctas { justify-content: center; }
.wppw-impact-hero[data-align="right"]  .wppw-impact-hero__ctas { justify-content: flex-end; }

/* ════════════════════════════════════════════════════════════════════════
 * 2. Split-Screen Hero — image + content/form 50/50
 * ════════════════════════════════════════════════════════════════════════ */
.wppw-split-screen-hero {
    --wppw-hero-content-bg: #ffffff;
    --wppw-hero-image-bg:   #f1f5f9;
    --wppw-hero-accent:     #3b82f6;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}
.wppw-split-screen-hero[data-image-side="right"] {
    /* CSS doesn't reorder grid children by default — but the renderer
     * already places image-first or content-first based on this attribute. */
}
.wppw-split-hero__image-panel {
    background-color: var(--wppw-hero-image-bg);
    overflow: hidden;
    min-height: 100%;
    position: relative;
}
.wppw-split-hero__image {
    width: 100%;
    height: 100%;
    display: block;
    min-height: 100%;
}
.wppw-split-hero__content-panel {
    background-color: var(--wppw-hero-content-bg);
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}
.wppw-split-hero__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wppw-hero-accent);
    margin-bottom: 14px;
}
.wppw-split-hero__headline {
    font-size: clamp( 28px, 3.5vw, 44px );
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    color: inherit;
}
.wppw-split-hero__sub {
    font-size: 17px;
    line-height: 1.5;
    margin: 0 0 22px;
    opacity: 0.85;
}
.wppw-split-hero__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}
.wppw-split-hero__bullet {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: 15px;
}
.wppw-split-hero__bullet-icon {
    color: var(--wppw-hero-accent);
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1.4;
}
.wppw-split-hero__cta {
    --wppw-hero-cta-color: var(--wppw-hero-accent);
    align-self: flex-start;
}

/* ── Inline form (form_mode="inline") ─────────────────────────────── */
.wppw-split-hero__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wppw-split-hero__form-heading {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}
.wppw-split-hero__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.wppw-split-hero__field label {
    font-size: 13px;
    font-weight: 600;
    color: inherit;
}
.wppw-split-hero__field input[type="text"],
.wppw-split-hero__field input[type="email"],
.wppw-split-hero__field input[type="tel"],
.wppw-split-hero__field textarea {
    padding: 11px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 15px;
    background: #ffffff;
    color: #0f172a;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
}
.wppw-split-hero__field input:focus,
.wppw-split-hero__field textarea:focus {
    outline: none;
    border-color: var(--wppw-hero-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wppw-hero-accent) 25%, transparent);
}
.wppw-split-hero__field--checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400;
    font-size: 13px;
}
.wppw-split-hero__field--checkbox input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}
.wppw-split-hero__field--math input {
    max-width: 100px;
}
.wppw-split-hero__req { color: #ef4444; }
.wppw-split-hero__honey {
    position: absolute;
    left: -10000px;
    top: -10000px;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.wppw-split-hero__submit {
    --wppw-hero-cta-color: var(--wppw-hero-accent);
    background: var(--wppw-hero-cta-color);
    color: #ffffff;
    border: 1px solid var(--wppw-hero-cta-color);
    padding: 13px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 4px;
    transition: background 0.15s;
}
.wppw-split-hero__submit:hover:not(:disabled) {
    background: color-mix(in srgb, var(--wppw-hero-cta-color) 85%, #000);
}
.wppw-split-hero__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.wppw-split-hero__form-status {
    font-size: 14px;
    margin-top: 4px;
    min-height: 1em;
}
.wppw-split-hero__form-status--success {
    color: #047857;
    font-weight: 600;
}
.wppw-split-hero__form-status--error {
    color: #dc2626;
    font-weight: 600;
}
.wppw-split-hero__embedded-form { margin-top: 8px; }
.wppw-split-hero__form-empty {
    padding: 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}

/* ════════════════════════════════════════════════════════════════════════
 * 3. Animated Headline Hero — cycling phrases
 * ════════════════════════════════════════════════════════════════════════ */
.wppw-animated-headline-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    width: 100%;
}
.wppw-animated-headline-hero[data-align="left"]   { text-align: left;   justify-content: flex-start; }
.wppw-animated-headline-hero[data-align="center"] { text-align: center; justify-content: center;     }
.wppw-animated-headline-hero[data-align="right"]  { text-align: right;  justify-content: flex-end;   }
.wppw-anim-hero__content {
    position: relative;
    z-index: 2;
    max-width: 820px;
}
.wppw-anim-hero__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 14px;
}
.wppw-anim-hero__headline {
    font-size: clamp( 32px, 4.5vw, 56px );
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    color: inherit;
    /* Each "line" is the static prefix + rotating phrase + static suffix.
     * Allow phrase span to grow vertically without breaking the layout. */
}
.wppw-anim-hero__phrase {
    display: inline-block;
    color: #3b82f6;
    /* Reserve vertical space so the slide animation doesn't jump the layout */
    min-height: 1.15em;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.wppw-anim-hero__phrase--underline {
    border-bottom: 3px solid currentColor;
    padding-bottom: 2px;
}
/* Typewriter caret */
.wppw-anim-hero__phrase[data-style="typewriter"]::after {
    content: '|';
    display: inline-block;
    margin-left: 2px;
    animation: wppw-anim-hero-blink 0.9s steps(2) infinite;
    color: currentColor;
}
@keyframes wppw-anim-hero-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}
.wppw-anim-hero__sub {
    font-size: clamp( 16px, 1.6vw, 20px );
    line-height: 1.5;
    margin: 0 auto 28px;
    max-width: 620px;
    opacity: 0.9;
}
.wppw-animated-headline-hero[data-align="left"]  .wppw-anim-hero__sub,
.wppw-animated-headline-hero[data-align="right"] .wppw-anim-hero__sub { margin-left: 0; margin-right: 0; }

/* ════════════════════════════════════════════════════════════════════════
 * 4. Welcome Back Hero — personalized variant swap
 * ════════════════════════════════════════════════════════════════════════ */
.wppw-welcome-back-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    width: 100%;
}
.wppw-welcome-back-hero[data-align="left"]   { text-align: left;   justify-content: flex-start; }
.wppw-welcome-back-hero[data-align="center"] { text-align: center; justify-content: center;     }
.wppw-welcome-back-hero[data-align="right"]  { text-align: right;  justify-content: flex-end;   }
.wppw-wb-hero__content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    width: 100%;
}
.wppw-wb-hero__variant { display: none; }
.wppw-welcome-back-hero[data-state="default"]  .wppw-wb-hero__variant--default  { display: block; }
.wppw-welcome-back-hero[data-state="personal"] .wppw-wb-hero__variant--personal { display: block; }
.wppw-wb-hero__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 14px;
}
.wppw-wb-hero__headline {
    font-size: clamp( 28px, 4vw, 50px );
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    color: inherit;
}
.wppw-wb-hero__sub {
    font-size: clamp( 16px, 1.5vw, 19px );
    line-height: 1.5;
    margin: 0 auto 26px;
    max-width: 580px;
    opacity: 0.9;
}
.wppw-welcome-back-hero[data-align="left"]  .wppw-wb-hero__sub,
.wppw-welcome-back-hero[data-align="right"] .wppw-wb-hero__sub { margin-left: 0; margin-right: 0; }

/* ════════════════════════════════════════════════════════════════════════
 * Mobile responsive — stack split-screen, scale type down, simplify
 * ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
    .wppw-split-screen-hero {
        grid-template-columns: 1fr;
    }
    .wppw-split-screen-hero[data-mobile-order="content-first"] .wppw-split-hero__image-panel {
        order: 2;
    }
    .wppw-split-screen-hero[data-mobile-order="content-first"] .wppw-split-hero__content-panel {
        order: 1;
    }
    .wppw-split-hero__image-panel {
        min-height: 240px;
    }
    .wppw-split-hero__content-panel {
        padding: 40px 24px;
    }
    .wppw-impact-hero,
    .wppw-animated-headline-hero,
    .wppw-welcome-back-hero {
        padding: 40px 20px;
    }
    /* Disable parallax on mobile — janky on touch devices, draining */
    .wppw-impact-hero__content {
        transform: none !important;
    }
    /* YouTube/Vimeo embeds: drop the 16:9-aspect-cropping hack on mobile
     * (use a simple cover fit instead — partial letterbox is OK on phones) */
    .wppw-impact-hero__embed {
        width: 100%;
        height: 100%;
        transform: none;
        top: 0;
        left: 0;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   VIDEO BUBBLE POPUP
   Floating circular video trigger with modal or inline-expand video player.
   The wrapper itself stays in normal document flow (so the editor's selection
   outline lands where the user inserted the block); the actual visible
   bubble lives inside .wppw-vb-anchor which is position:fixed. Open/close +
   dismissibility + autoplay-muted-on-open are handled in frontend.js.
   ══════════════════════════════════════════════════════════════════════════ */
.wppw-video-bubble {
    position: relative;
    /* Per-instance defaults — overridden by the inline style attribute that
       the renderer emits with --wppw-vb-* custom properties. Listed here so
       cascade-failed instances still render coherently. */
    --wppw-vb-size: 80px;
    --wppw-vb-mobile-size: 60px;
    --wppw-vb-offset-x: 24px;
    --wppw-vb-offset-y: 24px;
    --wppw-vb-bg: #0f172a;
    --wppw-vb-icon-color: #ffffff;
    --wppw-vb-border-color: #ffffff;
    --wppw-vb-border-width: 0px;
    --wppw-vb-pulse-color: #3b82f6;
    --wppw-vb-tooltip-bg: #0f172a;
    --wppw-vb-tooltip-fg: #ffffff;
    --wppw-vb-backdrop-bg: #000000;
    --wppw-vb-backdrop-op: 0.7;
}

/* The anchor is the fixed-position element holding the bubble + tooltip +
   dismiss. pointer-events:none on the anchor itself, with explicit auto on
   children, ensures the empty space between flex items and the dismiss
   "stick-out" area doesn't catch stray clicks. */
.wppw-video-bubble .wppw-vb-anchor {
    position: fixed;
    z-index: 9999;
    display: flex;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 250ms ease, transform 250ms ease;
}
.wppw-video-bubble.is-visible .wppw-vb-anchor {
    opacity: 1;
    transform: scale(1);
}
.wppw-video-bubble.is-dismissed { display: none; }

/* Corner anchoring + flex direction. The flex direction pairs with the
   DOM order [bubble-wrap, tooltip] so the tooltip lands on the correct
   side: row-reverse pushes it to the LEFT of the bubble (right-positioned),
   row leaves it on the RIGHT (left-positioned). transform-origin is set
   so the appear-scale animation grows OUT of the corner. */
.wppw-vb-pos-bottom-right .wppw-vb-anchor {
    right:  var(--wppw-vb-offset-x);
    bottom: var(--wppw-vb-offset-y);
    flex-direction: row-reverse;
    transform-origin: bottom right;
}
.wppw-vb-pos-bottom-left .wppw-vb-anchor {
    left:   var(--wppw-vb-offset-x);
    bottom: var(--wppw-vb-offset-y);
    flex-direction: row;
    transform-origin: bottom left;
}
.wppw-vb-pos-top-right .wppw-vb-anchor {
    right: var(--wppw-vb-offset-x);
    top:   var(--wppw-vb-offset-y);
    flex-direction: row-reverse;
    transform-origin: top right;
}
.wppw-vb-pos-top-left .wppw-vb-anchor {
    left:  var(--wppw-vb-offset-x);
    top:   var(--wppw-vb-offset-y);
    flex-direction: row;
    transform-origin: top left;
}

/* The bubble-wrap is the relative container the dismiss X anchors against.
   Without it, an absolute-positioned X would offset against the .wppw-vb-anchor
   (which extends to include the tooltip), placing the X way off the bubble. */
.wppw-vb-bubble-wrap {
    position: relative;
    pointer-events: auto;
    flex-shrink: 0;
}

/* ── The bubble button ───────────────────────────────────────────────── */
.wppw-vb-trigger {
    pointer-events: auto;
    position: relative;
    width: var(--wppw-vb-size);
    height: var(--wppw-vb-size);
    border-radius: 50%;
    background: var(--wppw-vb-bg);
    color: var(--wppw-vb-icon-color);
    border: var(--wppw-vb-border-width) solid var(--wppw-vb-border-color);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms ease, box-shadow 200ms ease;
    /* Strip a UA-default focus outline so :focus-visible can replace it
       with our themed ring without doubling-up. */
    outline: none;
}
.wppw-vb-has-shadow .wppw-vb-trigger { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
.wppw-vb-trigger:hover { transform: scale(1.06); }
.wppw-vb-has-shadow .wppw-vb-trigger:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32); }
.wppw-vb-trigger:focus-visible {
    outline: 3px solid var(--wppw-vb-pulse-color);
    outline-offset: 3px;
}
.wppw-vb-trigger::-moz-focus-inner { border: 0; }

/* Play-icon SVG (used as the static icon AND as the play overlay glyph
   in thumbnail / video_preview modes). The glyph's visual centre sits
   left of its bounding-box centre, so a 2% rightward nudge balances it. */
.wppw-vb-play-svg {
    width:  calc(var(--wppw-vb-size) * 0.4);
    height: calc(var(--wppw-vb-size) * 0.4);
    color: var(--wppw-vb-icon-color);
    transform: translateX(2%);
}
.wppw-vb-play-static {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Thumbnail mode — image fills the circle behind a semi-transparent
   play overlay. The bg becomes black so any letterboxing on object-fit
   cover is invisible. */
.wppw-vb-style-thumbnail .wppw-vb-trigger { background: #000000; }
.wppw-vb-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wppw-vb-style-thumbnail .wppw-vb-play-overlay {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    transition: background 200ms ease;
}
.wppw-vb-style-thumbnail .wppw-vb-trigger:hover .wppw-vb-play-overlay {
    background: rgba(0, 0, 0, 0.15);
}

/* Video preview mode — same pattern as thumbnail, but with a <video>
   element instead of <img>. Hover reduces the overlay to near-invisible
   so the looping preview becomes the main visual focus. */
.wppw-vb-style-video_preview .wppw-vb-trigger { background: #000000; }
.wppw-vb-preview-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wppw-vb-style-video_preview .wppw-vb-play-overlay {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    transition: background 200ms ease;
}
.wppw-vb-style-video_preview .wppw-vb-trigger:hover .wppw-vb-play-overlay {
    background: rgba(0, 0, 0, 0.05);
}

/* ── Pulse ring ──────────────────────────────────────────────────────── */
.wppw-vb-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 0 0 var(--wppw-vb-pulse-color);
    animation: wppw-vb-pulse 2s ease-out infinite;
}
@keyframes wppw-vb-pulse {
    0%   { box-shadow: 0 0 0 0 var(--wppw-vb-pulse-color); }
    70%  { box-shadow: 0 0 0 18px rgba(0, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    /* Pulse animations can be visually distracting and may trigger
       motion sickness — respect the OS-level reduced-motion preference. */
    .wppw-vb-pulse { animation: none; }
    .wppw-video-bubble .wppw-vb-anchor { transition: opacity 150ms ease; transform: none; }
}

/* ── Tooltip ─────────────────────────────────────────────────────────── */
.wppw-vb-tooltip {
    pointer-events: auto;
    background: var(--wppw-vb-tooltip-bg);
    color: var(--wppw-vb-tooltip-fg);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    padding: 8px 14px;
    border-radius: 8px;
    margin: 0 12px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    opacity: 0.95;
}

/* ── Dismiss button ──────────────────────────────────────────────────── */
/* Position the X opposite the bubble's corner direction so it points
   INTO the viewport interior — never gets clipped by the viewport edge. */
.wppw-vb-dismiss {
    pointer-events: auto;
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 3;
    opacity: 0.85;
    transition: opacity 150ms ease, transform 150ms ease;
}
.wppw-vb-dismiss:hover { opacity: 1; transform: scale(1.05); }
.wppw-vb-dismiss:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    opacity: 1;
}

.wppw-vb-pos-bottom-right .wppw-vb-dismiss { top:    -8px; left:  -8px; }
.wppw-vb-pos-bottom-left  .wppw-vb-dismiss { top:    -8px; right: -8px; }
.wppw-vb-pos-top-right    .wppw-vb-dismiss { bottom: -8px; left:  -8px; }
.wppw-vb-pos-top-left     .wppw-vb-dismiss { bottom: -8px; right: -8px; }

/* ── Popup base (modal & inline share opacity / visibility transition) ── */
.wppw-vb-popup {
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    /* Transition visibility AFTER opacity so the popup remains clickable
       during fade-in but properly disappears from the a11y tree on close. */
    transition: opacity 200ms ease, visibility 0s 200ms;
}
.wppw-vb-popup.is-open {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transition: opacity 200ms ease;
}

/* ── Modal-style popup ───────────────────────────────────────────────── */
.wppw-vb-popup-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.wppw-vb-popup-modal .wppw-vb-backdrop {
    position: absolute;
    inset: 0;
    background: var(--wppw-vb-backdrop-bg);
    opacity: var(--wppw-vb-backdrop-op);
    cursor: pointer;
}
.wppw-vb-modal-box {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    max-width: 900px;
    width: 100%;
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.wppw-vb-modal-box .wppw-vb-video-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #000000;
    border-radius: 8px;
    overflow: hidden;
}
.wppw-vb-modal-box .wppw-vb-video {
    width: 100%;
    height: 100%;
    display: block;
}

/* Modal title / caption — own typography to read as a "modal heading"
   independent of the surrounding theme's h1-h6 cascade. */
.wppw-vb-title {
    margin: 0 0 14px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
    color: #0f172a;
    /* Breathing room so the title doesn't run under the close X. */
    padding-right: 32px;
}
.wppw-vb-caption {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #475569;
}

.wppw-vb-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #0f172a;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 150ms ease;
}
.wppw-vb-close:hover { background: #e2e8f0; }
.wppw-vb-close:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ── Inline-style popup ──────────────────────────────────────────────── */
.wppw-vb-popup-inline {
    position: fixed;
    z-index: 100000;
    width: 380px;
    max-width: calc(100vw - 32px);
}
/* Anchor the inline panel to the bubble's corner. The math:
   bubble lives at offset_y from the edge with size px of height,
   plus a 16px gap → panel sits offset_y + size + 16 px from the
   edge. This keeps the bubble visible AND non-overlapped. */
.wppw-vb-pos-bottom-right .wppw-vb-popup-inline {
    right: var(--wppw-vb-offset-x);
    bottom: calc(var(--wppw-vb-offset-y) + var(--wppw-vb-size) + 16px);
}
.wppw-vb-pos-bottom-left .wppw-vb-popup-inline {
    left: var(--wppw-vb-offset-x);
    bottom: calc(var(--wppw-vb-offset-y) + var(--wppw-vb-size) + 16px);
}
.wppw-vb-pos-top-right .wppw-vb-popup-inline {
    right: var(--wppw-vb-offset-x);
    top:   calc(var(--wppw-vb-offset-y) + var(--wppw-vb-size) + 16px);
}
.wppw-vb-pos-top-left .wppw-vb-popup-inline {
    left: var(--wppw-vb-offset-x);
    top:  calc(var(--wppw-vb-offset-y) + var(--wppw-vb-size) + 16px);
}
.wppw-vb-inline-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
    position: relative;
}
.wppw-vb-inline-box .wppw-vb-video-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #000000;
    border-radius: 8px;
    overflow: hidden;
}
.wppw-vb-inline-box .wppw-vb-video {
    width: 100%;
    height: 100%;
    display: block;
}
.wppw-vb-inline-box .wppw-vb-title { font-size: 18px; }
.wppw-vb-inline-box .wppw-vb-caption { font-size: 14px; }

/* ── Empty state placeholder ─────────────────────────────────────────── */
.wppw-vb-empty {
    padding: 24px;
    background: #fef3c7;
    border: 2px dashed #f59e0b;
    border-radius: 8px;
    text-align: center;
    color: #92400e;
}
.wppw-vb-placeholder {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

/* ── Empty state — anchored mode (bubble-sized dashed circle) ──────────
   Used when no video is configured AND the block is set to one of the
   anchored position modes with a target id. Mirrors the real bubble's
   dimensions and corner placement so the editor user can see exactly
   where the configured bubble will land before uploading. The is-visible
   class on the wrap is applied server-side (the placeholder shouldn't
   wait for the show-delay timer that gates the real bubble), so the
   .wppw-vb-anchor's opacity/scale-up transition completes immediately
   and the dashed circle appears at the configured corner straight away.
   ──────────────────────────────────────────────────────────────────── */
.wppw-vb-empty-bubble {
    width:  var(--wppw-vb-size);
    height: var(--wppw-vb-size);
    border-radius: 50%;
    /* 2px dashed border in a muted slate tone — visually clearly
       "unconfigured" and not mistakeable for a styled bubble. The faint
       fill is a 12%-opacity slate so it's still visible on white AND
       dark backgrounds without competing with the page content. */
    border: 2px dashed #94a3b8;
    background: rgba(148, 163, 184, 0.12);
    /* No interactivity — it's an indicator, not a trigger. */
    pointer-events: none;
    box-sizing: border-box;
    /* Center the play SVG inside the dashed circle. The real bubble
       gets this from .wppw-vb-trigger's flex layout; the placeholder
       isn't a button so it needs its own centering. The play SVG inside
       picks up its size from var(--wppw-vb-size) (40% of bubble) and
       its color from var(--wppw-vb-icon-color), which the renderer
       overrides to muted slate on the placeholder so the glyph reads
       as "placeholder play icon" rather than the configured bubble's
       finished icon color. */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Click-through: by default .wppw-vb-bubble-wrap re-enables pointer-events
   (so the real bubble's button is clickable inside the pointer-events:none
   .wppw-vb-anchor). The empty placeholder isn't interactive, so we revert
   that — clicks pass through to whatever's underneath in the target block.
   .wppw-vb-anchor already has pointer-events:none from the base rule. */
.wppw-vb-empty-anchored .wppw-vb-bubble-wrap {
    pointer-events: none;
}
/* Force transparent backgrounds on the wrap + intermediate elements in
   the empty-anchored placeholder. Without this, any default background
   inherited from the active theme's .wp-block-group rules (or from the
   target block's own background bleeding through the wrap) paints a
   visible rectangle around / behind the tooltip pill. !important is
   used because theme rules on .wp-block-group are commonly equal-or-
   higher specificity than this plugin's flat selectors. */
.wppw-vb-empty-anchored,
.wppw-vb-empty-anchored .wppw-vb-anchor,
.wppw-vb-empty-anchored .wppw-vb-bubble-wrap {
    background: transparent !important;
}
/* Strip the .wppw-vb-tooltip's default 0.95 opacity in the placeholder
   only — a 5% bleed-through is invisible against most page backdrops
   but conspicuous when the placeholder is anchored over a colored
   target block. The configured (real) bubble keeps the 0.95 default
   so existing pages aren't affected. */
.wppw-vb-empty-anchored .wppw-vb-tooltip {
    opacity: 1;
}
/* Mobile-behavior parity with the real bubble: 'smaller' shrinks to
   --wppw-vb-mobile-size, 'hidden' hides via the existing .wppw-vb-mobile-hidden
   rule (which already targets .wppw-vb-anchor and .wppw-vb-popup). The
   placeholder is inside .wppw-vb-anchor, so the hidden case Just Works
   without an extra rule here. */
@media (max-width: 600px) {
    .wppw-vb-mobile-smaller .wppw-vb-empty-bubble {
        width:  var(--wppw-vb-mobile-size);
        height: var(--wppw-vb-mobile-size);
    }
}

/* ── Mobile (≤600px) behavior ────────────────────────────────────────── */
@media (max-width: 600px) {
    .wppw-vb-mobile-hidden .wppw-vb-anchor,
    .wppw-vb-mobile-hidden .wppw-vb-popup { display: none !important; }

    .wppw-vb-mobile-smaller .wppw-vb-trigger {
        width:  var(--wppw-vb-mobile-size);
        height: var(--wppw-vb-mobile-size);
    }
    .wppw-vb-mobile-smaller .wppw-vb-play-svg {
        width:  calc(var(--wppw-vb-mobile-size) * 0.4);
        height: calc(var(--wppw-vb-mobile-size) * 0.4);
    }

    /* Inline panel on mobile — collapse to nearly full-width regardless
       of bubble corner, with edges flush to the viewport. The corner-
       anchored top/bottom math still applies vertically; horizontally
       we override to span the screen for legibility.

       This rule is scoped OUT of anchored_inline / anchored_overlay
       (where the popup is anchored to the bubble's actual location, not
       the viewport corners) — for those modes we want the popup to stay
       near the bubble, not jump to the screen edges. The fixed-corner
       and anchored-sticky modes both use viewport-corner positioning,
       so the full-width clamp is appropriate for both. */
    .wppw-video-bubble:not(.wppw-vb-anchored-inline):not(.wppw-vb-anchored-overlay) .wppw-vb-popup-inline {
        width: calc(100vw - 16px);
        left:  8px !important;
        right: 8px !important;
    }
    .wppw-vb-tooltip {
        font-size: 13px;
        padding: 6px 10px;
    }

    /* When mobile-smaller is active, the inline-popup vertical math
       needs to use the smaller bubble size so the panel doesn't sit
       over the smaller bubble awkwardly. Same anchored-mode scoping
       reason as above. */
    .wppw-video-bubble:not(.wppw-vb-anchored-inline):not(.wppw-vb-anchored-overlay).wppw-vb-mobile-smaller.wppw-vb-pos-bottom-right .wppw-vb-popup-inline,
    .wppw-video-bubble:not(.wppw-vb-anchored-inline):not(.wppw-vb-anchored-overlay).wppw-vb-mobile-smaller.wppw-vb-pos-bottom-left  .wppw-vb-popup-inline {
        bottom: calc(var(--wppw-vb-offset-y) + var(--wppw-vb-mobile-size) + 16px);
    }
    .wppw-video-bubble:not(.wppw-vb-anchored-inline):not(.wppw-vb-anchored-overlay).wppw-vb-mobile-smaller.wppw-vb-pos-top-right .wppw-vb-popup-inline,
    .wppw-video-bubble:not(.wppw-vb-anchored-inline):not(.wppw-vb-anchored-overlay).wppw-vb-mobile-smaller.wppw-vb-pos-top-left  .wppw-vb-popup-inline {
        top: calc(var(--wppw-vb-offset-y) + var(--wppw-vb-mobile-size) + 16px);
    }
}

/* ── VIDEO BUBBLE ANCHORED MODES ─────────────────────────────────────────
   Three runtime-applied position modes (driven from frontend.js
   applyAnchor()) override the default fixed-corner CSS:

   - .wppw-vb-anchored-inline   — wrap is moved into the target block as
                                  the FIRST CHILD, in document flow. The
                                  bubble renders as a regular block-level
                                  element above the target's existing
                                  content. No absolute positioning —
                                  Corner Position is intentionally
                                  ignored. Horizontal alignment within
                                  the target's content width comes from
                                  the Anchored Inline Alignment field,
                                  applied via the --wppw-vb-inline-align
                                  CSS variable (read by .wppw-vb-anchor's
                                  justify-content) plus the
                                  .wppw-vb-inline-{left|center|right}
                                  marker class that picks the inline
                                  popup's horizontal anchor side.

   - .wppw-vb-anchored-overlay  — wrap is moved into the target block AND
                                  positioned absolutely at the chosen
                                  corner of the target. Same corner
                                  variables (--wppw-vb-offset-*) drive
                                  the offset, but resolved against the
                                  target instead of the viewport.

   - .wppw-vb-anchored-sticky   — wrap stays fixed-corner; only the
                                  .is-visible class application is
                                  gated by IntersectionObserver in JS.
                                  No CSS override needed for sticky
                                  mode beyond what JS already does.

   The inline popup needs special handling in inline + overlay modes
   (where the bubble is no longer at the viewport corner) — it gets
   repositioned to anchor against the wrap instead of the viewport.
   The modal popup is unchanged in all modes — it's always a fullscreen
   overlay.
   ──────────────────────────────────────────────────────────────────── */

/* ── Anchored Overlay — corner-positioned within the target ──────────
   Wrap is absolutely positioned at the chosen corner of the target,
   reusing the --wppw-vb-offset-* variables as fixed mode but resolved
   against the target's positioning context (JS adds position:relative
   to the target if it was static). */
.wppw-vb-anchored-overlay {
    position: absolute !important;
    /* Reset fixed-mode corner offsets — the per-corner classes below
       set the right ones for absolute positioning. */
    right: auto !important;
    left:  auto !important;
    top:   auto !important;
    bottom: auto !important;
}
.wppw-vb-anchored-overlay.wppw-vb-pos-bottom-right {
    right: var(--wppw-vb-offset-x) !important;
    bottom: var(--wppw-vb-offset-y) !important;
}
.wppw-vb-anchored-overlay.wppw-vb-pos-bottom-left {
    left: var(--wppw-vb-offset-x) !important;
    bottom: var(--wppw-vb-offset-y) !important;
}
.wppw-vb-anchored-overlay.wppw-vb-pos-top-right {
    right: var(--wppw-vb-offset-x) !important;
    top: var(--wppw-vb-offset-y) !important;
}
.wppw-vb-anchored-overlay.wppw-vb-pos-top-left {
    left: var(--wppw-vb-offset-x) !important;
    top: var(--wppw-vb-offset-y) !important;
}
.wppw-vb-anchored-overlay .wppw-vb-anchor {
    position: static;
    /* Skip the appear-from-corner scale animation — the bubble is
       already at its final position. */
    opacity: 1;
    transform: none;
    transition: none;
}

/* ── Anchored Inline — inline document flow at start of target ──────
   No absolute positioning, no corner anchoring. Corner Position is
   overridden by the Anchored Inline Alignment field (Left/Center/Right).
   The wrap is a block-level element in flow; the .wppw-vb-anchor
   inside uses justify-content (driven from --wppw-vb-inline-align) to
   place the bubble horizontally within the target's content width.
   The wrap sits flush against surrounding content — no spacing. */
.wppw-vb-anchored-inline {
    /* In document flow as a block-level element. !important neutralizes
       the .wppw-video-bubble base rule's position:relative (used by
       fixed mode as the positioning context for its fixed-position
       .wppw-vb-anchor child; inline mode doesn't need any positioning
       context, just normal flow). */
    position: static !important;
    right: auto !important;
    left:  auto !important;
    top:   auto !important;
    bottom: auto !important;
}
.wppw-vb-anchored-inline .wppw-vb-anchor {
    /* Static (in flow), not fixed — matches the inline-flow placement
       of the wrap. Reuses the base .wppw-vb-anchor's display:flex.
       flex-direction + justify-content are set per-alignment by the
       three .wppw-vb-inline-{left|center|right} rules below — they
       have to be set explicitly here (not inherited from the corner
       classes) because the corner classes use row-reverse for right-
       side corners, which would invert visual flex-start / flex-end
       relative to the visual horizontal axis. */
    position: static;
    opacity: 1;
    transform: none;
    transition: none;
}
/* Left: bubble at the left, tooltip on its right (extends rightward
   into the target's content). Override flex-direction:row to undo
   the row-reverse from any inherited corner class. */
.wppw-vb-anchored-inline.wppw-vb-inline-left .wppw-vb-anchor {
    flex-direction: row;
    justify-content: flex-start;
}
/* Center: same row-direction as Left, just centered. Tooltip ends up
   on the right of the bubble. */
.wppw-vb-anchored-inline.wppw-vb-inline-center .wppw-vb-anchor {
    flex-direction: row;
    justify-content: center;
}
/* Right: bubble at the right, tooltip on its left (extends leftward
   into the target's content). flex-direction:row-reverse + flex-start:
   in reversed direction, flex-start packs items at the visual RIGHT,
   and the DOM order [bubble-wrap, tooltip] renders visually as
   [tooltip][bubble] — exactly what we want for right alignment. */
.wppw-vb-anchored-inline.wppw-vb-inline-right .wppw-vb-anchor {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/* Inline popup positioning for anchored-inline mode. Bubble is in flow;
   popup is absolute relative to the wrap, expanding downward from the
   bubble. Horizontal anchor matches the bubble's alignment so the
   popup visually connects to the trigger. */
.wppw-vb-anchored-inline .wppw-vb-popup-inline {
    position: absolute;
    right: auto;
    left:  auto;
    top:   calc(var(--wppw-vb-size) + 16px);
    bottom: auto;
    width: 380px;
    max-width: calc(100vw - 32px);
}
.wppw-vb-anchored-inline.wppw-vb-inline-left .wppw-vb-popup-inline {
    left: 0;
}
/* Center: span 0→0 with margin auto = horizontally centered absolute
   element. Avoids the transform-translateX(-50%) pattern that would
   conflict with any future transform on .wppw-vb-popup-inline. */
.wppw-vb-anchored-inline.wppw-vb-inline-center .wppw-vb-popup-inline {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.wppw-vb-anchored-inline.wppw-vb-inline-right .wppw-vb-popup-inline {
    right: 0;
}

/* Inline popup positioning for anchored-overlay mode (corner-based). */
.wppw-vb-anchored-overlay .wppw-vb-popup-inline {
    position: absolute;
    /* Clear the fixed-mode viewport offsets so the per-corner overrides
       below land cleanly. */
    right: auto;
    left:  auto;
    top:   auto;
    bottom: auto;
    /* Width keeps the existing default; max-width prevents it from
       breaking out of narrow target blocks. */
    width: 380px;
    max-width: calc(100vw - 32px);
}
.wppw-vb-anchored-overlay.wppw-vb-pos-bottom-right .wppw-vb-popup-inline {
    right: 0;
    bottom: calc(var(--wppw-vb-size) + 16px);
}
.wppw-vb-anchored-overlay.wppw-vb-pos-bottom-left .wppw-vb-popup-inline {
    left: 0;
    bottom: calc(var(--wppw-vb-size) + 16px);
}
.wppw-vb-anchored-overlay.wppw-vb-pos-top-right .wppw-vb-popup-inline {
    right: 0;
    top: calc(var(--wppw-vb-size) + 16px);
}
.wppw-vb-anchored-overlay.wppw-vb-pos-top-left .wppw-vb-popup-inline {
    left: 0;
    top: calc(var(--wppw-vb-size) + 16px);
}

/* Mobile (≤600px) — anchored modes shouldn't change behavior much,
   but the inline popup needs to stay readable. Override the
   default mobile rule's full-width:vw clamp for anchored cases so the
   popup stays anchored to the bubble and doesn't jump to the screen
   edges (which would visually disconnect it from the trigger). */
@media (max-width: 600px) {
    .wppw-vb-anchored-inline .wppw-vb-popup-inline,
    .wppw-vb-anchored-overlay .wppw-vb-popup-inline {
        /* Re-set to clear the !important from the default mobile rule's
           left/right values, then constrain max-width. */
        width: min(380px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
    }
}

/* ════════════════════════════════════════════════════════════════════════
 * IMAGE BUBBLE POPUP — sister of Video Bubble Popup.
 *
 * Same structural pattern: a fixed-position circular bubble lives inside
 * .wppw-ib-anchor (which is position:fixed by default). The popup is a
 * sibling so its own positioning isn't constrained by the bubble's flex
 * row. Open/close + dismissibility + reveal-after-delay are handled in
 * frontend.js. The popup contains either a single image or a carousel
 * of images (driven by the renderer's source_mode + the wrap's
 * .wppw-ib-source-{single|gallery} class).
 *
 * Class names use wppw-ib-* (Image Bubble) to keep the rules cleanly
 * separable from wppw-vb-* (Video Bubble) — every structural rule is
 * duplicated rather than shared so the two blocks can evolve
 * independently. Per-instance CSS variables (--wppw-ib-*) are emitted
 * inline by the renderer.
 * ══════════════════════════════════════════════════════════════════════════ */
.wppw-image-bubble {
    position: relative;
    /* Per-instance defaults — overridden by the inline style attribute that
       the renderer emits with --wppw-ib-* custom properties. Listed here so
       cascade-failed instances still render coherently. */
    --wppw-ib-size: 80px;
    --wppw-ib-mobile-size: 60px;
    --wppw-ib-offset-x: 24px;
    --wppw-ib-offset-y: 24px;
    --wppw-ib-bg: #0f172a;
    --wppw-ib-icon-color: #ffffff;
    --wppw-ib-border-color: #ffffff;
    --wppw-ib-border-width: 0px;
    --wppw-ib-pulse-color: #3b82f6;
    --wppw-ib-tooltip-bg: #0f172a;
    --wppw-ib-tooltip-fg: #ffffff;
    --wppw-ib-backdrop-bg: #000000;
    --wppw-ib-backdrop-op: 0.7;
}

/* The anchor is the fixed-position element holding the bubble + tooltip +
   dismiss. pointer-events:none on the anchor itself, with explicit auto on
   children, ensures stray flex gaps don't catch clicks. Mirrors video bubble. */
.wppw-image-bubble .wppw-ib-anchor {
    position: fixed;
    z-index: 9999;
    display: flex;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 250ms ease, transform 250ms ease;
}
.wppw-image-bubble.is-visible .wppw-ib-anchor {
    opacity: 1;
    transform: scale(1);
}
.wppw-image-bubble.is-dismissed { display: none; }

/* Corner anchoring + flex direction. flex-direction pairs with the DOM
   order [bubble-wrap, tooltip] so the tooltip lands on the correct side:
   row-reverse pushes it LEFT of right-positioned bubbles; row leaves it
   RIGHT of left-positioned bubbles. transform-origin grows the appear
   animation OUT of the corner. */
.wppw-ib-pos-bottom-right .wppw-ib-anchor {
    right:  var(--wppw-ib-offset-x);
    bottom: var(--wppw-ib-offset-y);
    flex-direction: row-reverse;
    transform-origin: bottom right;
}
.wppw-ib-pos-bottom-left .wppw-ib-anchor {
    left:   var(--wppw-ib-offset-x);
    bottom: var(--wppw-ib-offset-y);
    flex-direction: row;
    transform-origin: bottom left;
}
.wppw-ib-pos-top-right .wppw-ib-anchor {
    right: var(--wppw-ib-offset-x);
    top:   var(--wppw-ib-offset-y);
    flex-direction: row-reverse;
    transform-origin: top right;
}
.wppw-ib-pos-top-left .wppw-ib-anchor {
    left:  var(--wppw-ib-offset-x);
    top:   var(--wppw-ib-offset-y);
    flex-direction: row;
    transform-origin: top left;
}

/* Gap between bubble and tooltip — both sides of the bubble row. */
.wppw-image-bubble .wppw-ib-anchor > * {
    pointer-events: auto;
}
.wppw-image-bubble .wppw-ib-anchor { gap: 10px; }

/* The bubble itself — circular, sized via the size variable, recipient of
   border / shadow / clip-content semantics. .wppw-ib-bubble-wrap is the
   visual circle; .wppw-ib-trigger is the actual <button>. */
.wppw-ib-bubble-wrap {
    position: relative;
    width:  var(--wppw-ib-size);
    height: var(--wppw-ib-size);
    border-radius: 50%;
    overflow: hidden;
    background: var(--wppw-ib-bg);
}
.wppw-ib-has-shadow .wppw-ib-bubble-wrap {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.wppw-ib-has-border .wppw-ib-bubble-wrap {
    border: var(--wppw-ib-border-width) solid var(--wppw-ib-border-color);
}
.wppw-ib-trigger {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--wppw-ib-icon-color);
    cursor: pointer;
    padding: 0;
    position: relative;
    font: inherit;
}
.wppw-ib-trigger:focus-visible {
    outline: 3px solid var(--wppw-ib-pulse-color);
    outline-offset: 3px;
}

/* Picture-icon bubble mode — generic glyph centred at 60% of bubble size. */
.wppw-ib-picture-static {
    width: 60%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wppw-ib-picture-svg { width: 100%; height: 100%; display: block; }

/* Thumbnail bubble mode — uploaded image fills the circle, magnifier
   overlay fades in on hover so the click affordance stays visible. */
.wppw-ib-bubble-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wppw-ib-magnifier-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    color: var(--wppw-ib-icon-color);
    opacity: 0.85;
    transition: opacity 0.18s ease, background 0.18s ease;
}
.wppw-ib-trigger:hover .wppw-ib-magnifier-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.55);
}
.wppw-ib-magnifier-svg {
    width: 45%;
    height: 45%;
    display: block;
}

/* Auto-rotating thumbnails bubble mode — stack of <img>s, each fading
   in/out via a single shared keyframe rule with staggered animation-
   delay (PHP emits per-image delays based on slot count). */
.wppw-ib-rot-stack {
    position: absolute;
    inset: 0;
    display: block;
}
.wppw-ib-rot-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation-name: wppw-ib-rot-cycle;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes wppw-ib-rot-cycle {
    /* Image is fully visible for ~80% of its slot, then fades out, then
       stays hidden until its turn comes around again. The %s here are
       per-image fractions of the FULL cycle (animation-duration × N
       images = full cycle); each image's animation-delay offsets it. */
    0%   { opacity: 0; }
    2%   { opacity: 1; }
    20%  { opacity: 1; }
    24%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Pulse — concentric expanding ring behind the bubble. Same mechanism
   video bubble uses; placed via absolute positioning and clipped by the
   bubble-wrap's border-radius (it's a sibling INSIDE the trigger so it
   gets clipped to the circle if it grows past the edge). */
.wppw-ib-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--wppw-ib-pulse-color);
    pointer-events: none;
    animation: wppw-ib-pulse-cycle 2s ease-out infinite;
    opacity: 0;
}
@keyframes wppw-ib-pulse-cycle {
    0%   { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0;   }
}

/* Tooltip — small pill next to the bubble. flex-direction on the
   anchor controls which side it lands on. */
.wppw-ib-tooltip {
    background: var(--wppw-ib-tooltip-bg);
    color:      var(--wppw-ib-tooltip-fg);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Dismiss "×" stuck on the bubble's top-right corner — small circle
   that sits above the bubble at the corner. */
.wppw-ib-dismiss {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    z-index: 2;
}
.wppw-ib-dismiss:hover { background: #f1f5f9; }

/* Empty-state placeholder when the user hasn't uploaded anything yet. */
.wppw-ib-empty .wppw-ib-placeholder {
    background: #fffbeb;
    color: #92400e;
    border: 1px dashed #f59e0b;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 14px;
    font-style: italic;
}
.wppw-ib-empty-bubble {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px dashed currentColor;
    color: var(--wppw-ib-icon-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wppw-ib-empty-bubble .wppw-ib-picture-svg {
    width: 60%;
    height: 60%;
}

/* ── Popup (modal + inline shared base) ─────────────────────────────── */
.wppw-ib-popup {
    visibility: hidden;
    opacity: 0;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.wppw-ib-popup.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 200ms ease;
}

/* Modal popup — fullscreen backdrop + centered box. */
.wppw-ib-popup-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.wppw-ib-backdrop {
    position: absolute;
    inset: 0;
    background: var(--wppw-ib-backdrop-bg);
    opacity: var(--wppw-ib-backdrop-op);
    cursor: pointer;
}
.wppw-ib-modal-box {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* Inline popup — anchored near the bubble in fixed mode. */
.wppw-ib-popup-inline {
    position: fixed;
    z-index: 10000;
}
.wppw-ib-pos-bottom-right .wppw-ib-popup-inline {
    right:  var(--wppw-ib-offset-x);
    bottom: calc(var(--wppw-ib-offset-y) + var(--wppw-ib-size) + 16px);
}
.wppw-ib-pos-bottom-left .wppw-ib-popup-inline {
    left:   var(--wppw-ib-offset-x);
    bottom: calc(var(--wppw-ib-offset-y) + var(--wppw-ib-size) + 16px);
}
.wppw-ib-pos-top-right .wppw-ib-popup-inline {
    right: var(--wppw-ib-offset-x);
    top:   calc(var(--wppw-ib-offset-y) + var(--wppw-ib-size) + 16px);
}
.wppw-ib-pos-top-left .wppw-ib-popup-inline {
    left: var(--wppw-ib-offset-x);
    top:  calc(var(--wppw-ib-offset-y) + var(--wppw-ib-size) + 16px);
}
.wppw-ib-inline-box {
    background: #ffffff;
    border-radius: 12px;
    width: min(420px, calc(100vw - 32px));
    max-height: 80vh;
    overflow: auto;
    padding: 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

/* Close button — top-right of the popup box. */
.wppw-ib-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.wppw-ib-close:hover { background: rgba(0, 0, 0, 0.75); }
.wppw-ib-popup-inline .wppw-ib-close {
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
}
.wppw-ib-popup-inline .wppw-ib-close:hover {
    background: rgba(15, 23, 42, 0.16);
}

/* Modal title + caption typography. */
.wppw-ib-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 14px;
    padding-right: 40px; /* clear the close button */
    line-height: 1.3;
}
.wppw-ib-caption {
    font-size: 14px;
    color: #64748b;
    margin: 14px 0 0;
    line-height: 1.5;
}

/* ── Carousel stage + slides ─────────────────────────────────────────── */
.wppw-ib-stage {
    position: relative;
    background: #0b1220;
    border-radius: 8px;
    overflow: hidden;
    /* Constrain very tall images so the popup always fits in the viewport. */
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wppw-ib-popup-inline .wppw-ib-stage {
    max-height: 50vh;
}
.wppw-ib-slides {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
}
.wppw-ib-slide {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.wppw-ib-figure {
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wppw-ib-img {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #0b1220;
}
.wppw-ib-popup-inline .wppw-ib-img {
    max-height: 50vh;
}
.wppw-ib-image-caption {
    margin: 0;
    padding: 10px 14px;
    font-size: 13px;
    color: #e2e8f0;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    text-align: center;
    line-height: 1.4;
}

/* Prev / next arrows — sit on top of the stage at vertical centre.
   Hidden via display:none if the renderer didn't emit them (single
   image, or show_arrows=no), so this rule only takes effect when the
   button is in the DOM. */
.wppw-ib-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.15s ease;
    padding: 0;
}
.wppw-ib-arrow:hover  { background: rgba(0, 0, 0, 0.8); }
.wppw-ib-arrow:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
.wppw-ib-arrow-prev { left:  10px; }
.wppw-ib-arrow-next { right: 10px; }

/* Counter — top-right of the stage. */
.wppw-ib-counter {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    z-index: 2;
    letter-spacing: 0.02em;
}

/* Dot indicators — row of small circles below the stage. */
.wppw-ib-dots {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.wppw-ib-dots li { display: flex; }
.wppw-ib-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}
.wppw-ib-dot:hover { background: #94a3b8; }
.wppw-ib-dot.is-active {
    background: #0f172a;
    transform: scale(1.2);
}
.wppw-ib-dot:focus-visible {
    outline: 2px solid #0f172a;
    outline-offset: 2px;
}

/* Thumbnail strip — row of small image buttons below the stage. */
.wppw-ib-thumbs {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.wppw-ib-thumbs li { display: flex; flex: 0 0 auto; }
.wppw-ib-thumb {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    border: 2px solid transparent;
    background: #f1f5f9;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.wppw-ib-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wppw-ib-thumb:hover { border-color: #94a3b8; }
.wppw-ib-thumb.is-active {
    border-color: #0f172a;
    transform: translateY(-1px);
}
.wppw-ib-thumb:focus-visible {
    outline: 2px solid #0f172a;
    outline-offset: 2px;
}

/* When the popup is in single-image mode (renderer emits only one slide
   and no arrows/dots/etc), strip the dark stage background — single
   images often look better on a white card. */
.wppw-ib-source-single .wppw-ib-stage {
    background: transparent;
}
.wppw-ib-source-single .wppw-ib-img {
    background: transparent;
}

/* ── Anchored modes (mirror video bubble's anchored layout rules) ──── */
.wppw-ib-anchored-overlay {
    position: relative;
}
.wppw-ib-anchored-overlay .wppw-ib-anchor {
    position: absolute;
    /* Reset the fixed-mode flex direction — the anchored overlay still uses
       corner classes, but as offsets from the target's corners. */
}
.wppw-ib-anchored-overlay.wppw-ib-pos-bottom-right .wppw-ib-anchor {
    right: var(--wppw-ib-offset-x) !important;
    bottom: var(--wppw-ib-offset-y) !important;
}
.wppw-ib-anchored-overlay.wppw-ib-pos-bottom-left .wppw-ib-anchor {
    left: var(--wppw-ib-offset-x) !important;
    bottom: var(--wppw-ib-offset-y) !important;
}
.wppw-ib-anchored-overlay.wppw-ib-pos-top-right .wppw-ib-anchor {
    right: var(--wppw-ib-offset-x) !important;
    top: var(--wppw-ib-offset-y) !important;
}
.wppw-ib-anchored-overlay.wppw-ib-pos-top-left .wppw-ib-anchor {
    left: var(--wppw-ib-offset-x) !important;
    top: var(--wppw-ib-offset-y) !important;
}

/* Anchored Inline — wrap is in document flow, alignment via anchor's
   justify-content driven by --wppw-ib-inline-align (set inline by PHP). */
.wppw-ib-anchored-inline {
    position: static;
    width: 100%;
    margin: 16px 0;
}
.wppw-ib-anchored-inline .wppw-ib-anchor {
    position: static;
    display: flex;
    justify-content: var(--wppw-ib-inline-align, center);
    align-items: center;
    transform: none;
}
.wppw-ib-anchored-inline.is-visible .wppw-ib-anchor {
    transform: none; /* override the scale(1) base — inline mode doesn't pop */
}
.wppw-ib-anchored-inline .wppw-ib-popup-inline {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: calc(var(--wppw-ib-size) + 16px);
}

/* Anchored Sticky — same fixed-corner layout; visibility gated by JS via
   the standard is-visible toggle. No layout overrides needed here. */

/* Mobile responsive — smaller bubble + tighter popup. */
@media (max-width: 600px) {
    .wppw-ib-mobile-smaller .wppw-ib-bubble-wrap {
        width:  var(--wppw-ib-mobile-size);
        height: var(--wppw-ib-mobile-size);
    }
    .wppw-ib-mobile-hidden { display: none; }
    .wppw-ib-modal-box,
    .wppw-ib-inline-box {
        padding: 16px;
    }
    .wppw-ib-popup-modal { padding: 12px; }
    .wppw-ib-arrow {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }
    .wppw-ib-arrow-prev { left:  6px; }
    .wppw-ib-arrow-next { right: 6px; }
    .wppw-ib-thumb {
        width: 52px;
        height: 52px;
    }
    .wppw-ib-popup-inline {
        right: 8px !important;
        left:  8px !important;
        max-width: calc(100vw - 16px);
    }
    .wppw-ib-anchored-inline .wppw-ib-popup-inline,
    .wppw-ib-anchored-overlay .wppw-ib-popup-inline {
        width: min(380px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
    }
}

/* ════════════════════════════════════════════════════════════════════════
 * Conversation block — modern messenger UI for the front-end
 *                      (rebuilt design: iMessage / WhatsApp inspired)
 *
 * Class names mirror the PHP renderer (render_conversation) and the JS
 * polling code (which appends the same .lyra-bt-conv-msg structure for new
 * messages). Per-block CSS variables (--lyra-bt-conv-customer-bg, etc.) are
 * emitted inline by PHP from the admin's color-picker fields, plus
 * --lyra-bt-conv-radius / --lyra-bt-conv-thread-max from the new design controls.
 * Density is switched via .lyra-bt-conv-density-comfortable / -compact body
 * classes on the root element.
 *
 * Layout overview:
 *   .lyra-bt-conversation
 *     .lyra-bt-conv-header        header (heading + intro)
 *     .lyra-bt-conv-thread        scrollable message column
 *       .lyra-bt-conv-day         day separator pill ("Today" / "May 3")
 *       .lyra-bt-conv-msg         bubble row (avatar + bubble column)
 *         .lyra-bt-conv-avatar    32px circle (or spacer when grouped)
 *         .lyra-bt-conv-bubble-col
 *           .lyra-bt-conv-name    sender name (first-of-run only)
 *           .lyra-bt-conv-bubble  the speech bubble itself
 *           .lyra-bt-conv-time    timestamp (last-of-run only)
 *     .lyra-bt-conv-form          textarea + send icon button
 * ════════════════════════════════════════════════════════════════════════ */
.lyra-bt-conversation {
    /* Per-block CSS vars — defaulted here, overridden inline by PHP. */
    --lyra-bt-conv-radius: 18px;
    --lyra-bt-conv-thread-max: 480px;
    --lyra-bt-conv-heading-color: #0f172a;
    --lyra-bt-conv-customer-bg: #f1f5f9;
    --lyra-bt-conv-customer-fg: #0f172a;
    --lyra-bt-conv-admin-bg: #3b82f6;
    --lyra-bt-conv-admin-fg: #ffffff;
    /* Surface tokens — internal to the stylesheet. */
    --lyra-bt-conv-surface: #ffffff;
    --lyra-bt-conv-thread-bg: #f8fafc;
    --lyra-bt-conv-border: #e2e8f0;
    --lyra-bt-conv-muted: #64748b;
    --lyra-bt-conv-muted-2: #94a3b8;

    max-width: 720px;
    margin: 0 auto;
    background: var(--lyra-bt-conv-surface);
    border: 1px solid var(--lyra-bt-conv-border);
    border-radius: var(--lyra-bt-conv-radius);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -8px rgba(15, 23, 42, .12);
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.lyra-bt-conversation .lyra-bt-conv-header {
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--lyra-bt-conv-border);
    background: var(--lyra-bt-conv-surface);
}
.lyra-bt-conversation .lyra-bt-conv-heading {
    margin: 0 0 4px 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--lyra-bt-conv-heading-color);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.lyra-bt-conversation .lyra-bt-conv-intro {
    margin: 0;
    color: var(--lyra-bt-conv-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ── Thread (server-rendered + JS-appended bubbles) ─────────────────── */
.lyra-bt-conversation .lyra-bt-conv-thread {
    flex: 1;
    min-height: 220px;
    max-height: var(--lyra-bt-conv-thread-max);
    overflow-y: auto;
    padding: 16px 18px;
    background: var(--lyra-bt-conv-thread-bg);
    display: flex;
    flex-direction: column;
    gap: 6px;
    scroll-behavior: smooth;
    /* Subtle inset shadows to hint at scroll affordance at top/bottom. */
    background-attachment: local, local, scroll, scroll;
    background-image:
        linear-gradient(var(--lyra-bt-conv-thread-bg) 30%, rgba(248, 250, 252, 0)),
        linear-gradient(rgba(248, 250, 252, 0), var(--lyra-bt-conv-thread-bg) 70%) 0 100%,
        radial-gradient(farthest-side at 50% 0, rgba(15, 23, 42, .08), rgba(0, 0, 0, 0)),
        radial-gradient(farthest-side at 50% 100%, rgba(15, 23, 42, .08), rgba(0, 0, 0, 0)) 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 24px, 100% 24px, 100% 8px, 100% 8px;
}

/* Density variants drive thread spacing + bubble padding. */
.lyra-bt-conversation.lyra-bt-conv-density-comfortable .lyra-bt-conv-thread { gap: 6px; padding: 18px; }
.lyra-bt-conversation.lyra-bt-conv-density-compact     .lyra-bt-conv-thread { gap: 3px; padding: 12px 14px; }

/* Custom thin scrollbar (Chromium / Safari). Safe to no-op in Firefox. */
.lyra-bt-conversation .lyra-bt-conv-thread::-webkit-scrollbar { width: 8px; }
.lyra-bt-conversation .lyra-bt-conv-thread::-webkit-scrollbar-track { background: transparent; }
.lyra-bt-conversation .lyra-bt-conv-thread::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .35);
    border-radius: 4px;
}
.lyra-bt-conversation .lyra-bt-conv-thread::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .55); }

/* Empty state — friendly placeholder before any messages exist. */
.lyra-bt-conversation .lyra-bt-conv-empty-state {
    margin: auto;
    text-align: center;
    color: var(--lyra-bt-conv-muted);
    padding: 32px 20px;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.lyra-bt-conversation .lyra-bt-conv-empty-icon { color: var(--lyra-bt-conv-muted-2); opacity: .8; }
.lyra-bt-conversation .lyra-bt-conv-empty-text { line-height: 1.5; max-width: 340px; }

/* ── Day separator (Today / Yesterday / dd Mon) ─────────────────────── */
.lyra-bt-conversation .lyra-bt-conv-day {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 14px 0 8px;
    position: relative;
}
.lyra-bt-conversation .lyra-bt-conv-day:first-child { margin-top: 4px; }
.lyra-bt-conversation .lyra-bt-conv-day::before,
.lyra-bt-conversation .lyra-bt-conv-day::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(100, 116, 139, .25), transparent);
}
.lyra-bt-conversation .lyra-bt-conv-day span {
    padding: 3px 12px;
    margin: 0 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--lyra-bt-conv-muted);
    background: var(--lyra-bt-conv-thread-bg);
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Message rows ───────────────────────────────────────────────────── */
.lyra-bt-conversation .lyra-bt-conv-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 80%;
    /* Subtle slide-in / fade for newly-appended bubbles. The JS path
       always appends so this animation triggers naturally. The
       server-rendered initial pass also gets it — fine, the page
       paints once and the animation simply runs once on load. */
    animation: lyra-bt-conv-bubble-in 220ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes lyra-bt-conv-bubble-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .lyra-bt-conversation .lyra-bt-conv-msg { animation: none; }
}

.lyra-bt-conversation .lyra-bt-conv-msg.is-customer { align-self: flex-start; }
.lyra-bt-conversation .lyra-bt-conv-msg.is-admin    { align-self: flex-end; flex-direction: row-reverse; }

/* Tighten gap between consecutive same-sender messages so a stack
   feels like one block rather than independent bubbles. */
.lyra-bt-conversation .lyra-bt-conv-msg.is-grouped:not(.is-first) { margin-top: -3px; }
.lyra-bt-conversation.lyra-bt-conv-density-compact .lyra-bt-conv-msg.is-grouped:not(.is-first) { margin-top: -1px; }

/* Bubble column — name + bubble + time stack. */
.lyra-bt-conversation .lyra-bt-conv-bubble-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    gap: 4px;
}
.lyra-bt-conversation .lyra-bt-conv-msg.is-customer .lyra-bt-conv-bubble-col { align-items: flex-start; }
.lyra-bt-conversation .lyra-bt-conv-msg.is-admin    .lyra-bt-conv-bubble-col { align-items: flex-end; }

/* ── Avatar (32px circle) ───────────────────────────────────────────── */
.lyra-bt-conversation .lyra-bt-conv-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    text-transform: uppercase;
    user-select: none;
    box-shadow: 0 0 0 2px var(--lyra-bt-conv-thread-bg), 0 1px 2px rgba(15, 23, 42, .12);
}
.lyra-bt-conversation .lyra-bt-conv-avatar-img > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lyra-bt-conversation .lyra-bt-conv-avatar-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}
/* Spacer slot — preserves column alignment when grouping hides the
   avatar on subsequent same-sender messages. */
.lyra-bt-conversation .lyra-bt-conv-avatar-spacer {
    background: transparent !important;
    box-shadow: none;
    visibility: hidden;
}

/* ── Sender name (first-of-run only) ────────────────────────────────── */
.lyra-bt-conversation .lyra-bt-conv-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--lyra-bt-conv-muted);
    padding: 0 4px;
    line-height: 1;
}

/* ── Bubble ─────────────────────────────────────────────────────────── */
.lyra-bt-conversation .lyra-bt-conv-bubble {
    padding: 9px 14px;
    border-radius: 18px;
    font-size: 0.9375rem;
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.lyra-bt-conversation.lyra-bt-conv-density-comfortable .lyra-bt-conv-bubble { padding: 10px 15px; }
.lyra-bt-conversation.lyra-bt-conv-density-compact     .lyra-bt-conv-bubble { padding: 7px 12px; font-size: 0.875rem; }

.lyra-bt-conversation .lyra-bt-conv-msg.is-customer .lyra-bt-conv-bubble {
    background: var(--lyra-bt-conv-customer-bg);
    color: var(--lyra-bt-conv-customer-fg);
}
.lyra-bt-conversation .lyra-bt-conv-msg.is-admin .lyra-bt-conv-bubble {
    background: var(--lyra-bt-conv-admin-bg);
    color: var(--lyra-bt-conv-admin-fg);
    /* Soft glow under coloured admin bubbles — gives them a subtle
       lift without dropping a hard shadow. Uses the variable so it
       tracks the configured admin colour. */
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

/* iMessage-style "tail" via asymmetric corner radius — only on the
   FIRST bubble of a run on the side facing the avatar. Subsequent
   bubbles in a run keep all four corners rounded so the stack reads
   as one continuous block. */
.lyra-bt-conversation .lyra-bt-conv-msg.is-customer.is-first .lyra-bt-conv-bubble {
    border-bottom-left-radius: 4px;
}
.lyra-bt-conversation .lyra-bt-conv-msg.is-admin.is-first .lyra-bt-conv-bubble {
    border-bottom-right-radius: 4px;
}

/* ── Timestamp (last-of-run only) ───────────────────────────────────── */
.lyra-bt-conversation .lyra-bt-conv-time {
    font-size: 0.6875rem;
    color: var(--lyra-bt-conv-muted-2);
    padding: 0 4px;
    line-height: 1;
}
.lyra-bt-conversation .lyra-bt-conv-time time { color: inherit; font-style: normal; }

/* ── Form ───────────────────────────────────────────────────────────── */
.lyra-bt-conversation .lyra-bt-conv-form {
    padding: 12px 16px 14px;
    border-top: 1px solid var(--lyra-bt-conv-border);
    background: var(--lyra-bt-conv-surface);
}
.lyra-bt-conversation .lyra-bt-conv-name-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}
.lyra-bt-conversation .lyra-bt-conv-name-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--lyra-bt-conv-muted);
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}
.lyra-bt-conversation .lyra-bt-conv-name-input,
.lyra-bt-conversation .lyra-bt-conv-message-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--lyra-bt-conv-border);
    border-radius: 999px;
    padding: 9px 16px;
    font: inherit;
    color: #0f172a;
    background: #f8fafc;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.lyra-bt-conversation .lyra-bt-conv-name-input { border-radius: 12px; }
.lyra-bt-conversation .lyra-bt-conv-name-input:focus,
.lyra-bt-conversation .lyra-bt-conv-message-input:focus {
    outline: none;
    border-color: var(--lyra-bt-conv-admin-bg);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lyra-bt-conv-admin-bg) 18%, transparent);
}

/* Message row — pill-shaped textarea + circular icon-only send button. */
.lyra-bt-conversation .lyra-bt-conv-message-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.lyra-bt-conversation .lyra-bt-conv-message-input {
    flex: 1;
    resize: none;
    overflow-y: auto;
    min-height: 40px;
    max-height: 160px;
    font-size: 0.9375rem;
    line-height: 1.4;
    padding: 10px 16px;
    border-radius: 20px;
    /* Auto-grow JS resets height/scrollHeight, so this is the cap. */
}

.lyra-bt-conversation .lyra-bt-conv-send-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: var(--lyra-bt-conv-admin-bg);
    color: var(--lyra-bt-conv-admin-fg);
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: filter .15s ease, transform .08s ease, box-shadow .15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
.lyra-bt-conversation .lyra-bt-conv-send-btn:hover:not(:disabled)  { filter: brightness(1.07); transform: translateY(-1px); }
.lyra-bt-conversation .lyra-bt-conv-send-btn:active:not(:disabled) { transform: translateY(0); }
.lyra-bt-conversation .lyra-bt-conv-send-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lyra-bt-conv-admin-bg) 35%, transparent);
}
.lyra-bt-conversation .lyra-bt-conv-send-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.lyra-bt-conversation .lyra-bt-conv-send-icon { display: block; }
/* The button label is a screen-reader-only string. The button itself
   shows the icon. */
.lyra-bt-conversation .lyra-bt-conv-send-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lyra-bt-conversation .lyra-bt-conv-form-error {
    margin-top: 8px;
    font-size: 0.825rem;
    color: #dc2626;
    padding: 0 4px;
}

/* ── Logged-out state ───────────────────────────────────────────────── */
.lyra-bt-conversation.lyra-bt-conv-loggedout .lyra-bt-conv-loggedout-msg {
    padding: 28px 20px;
    text-align: center;
    color: var(--lyra-bt-conv-muted);
    font-size: 0.9375rem;
    background: var(--lyra-bt-conv-thread-bg);
    border-top: 1px solid var(--lyra-bt-conv-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.lyra-bt-conversation.lyra-bt-conv-loggedout .lyra-bt-conv-lock-icon { color: var(--lyra-bt-conv-muted-2); opacity: .85; }
.lyra-bt-conversation.lyra-bt-conv-loggedout .lyra-bt-conv-loggedout-text { line-height: 1.5; max-width: 340px; }
.lyra-bt-conversation.lyra-bt-conv-loggedout .lyra-bt-conv-login-link {
    color: var(--lyra-bt-conv-admin-bg);
    text-decoration: none;
    font-weight: 600;
}
.lyra-bt-conversation.lyra-bt-conv-loggedout .lyra-bt-conv-login-link:hover { text-decoration: underline; }

/* ── Empty/configure-needed banner ──────────────────────────────────── */
.lyra-bt-conversation.lyra-bt-conv-empty .lyra-bt-conv-placeholder {
    background: #fef3c7;
    border: 1px dashed #d97706;
    border-radius: 8px;
    padding: 14px 16px;
    color: #78350f;
    font-size: 0.9375rem;
    margin: 16px;
}

/* ── Mobile tweaks ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .lyra-bt-conversation { border-radius: 12px; }
    .lyra-bt-conversation .lyra-bt-conv-header { padding: 14px 16px 10px; }
    .lyra-bt-conversation .lyra-bt-conv-thread { padding: 12px 12px; }
    .lyra-bt-conversation.lyra-bt-conv-density-comfortable .lyra-bt-conv-thread { padding: 14px 12px; }
    .lyra-bt-conversation .lyra-bt-conv-msg { max-width: 88%; }
    .lyra-bt-conversation .lyra-bt-conv-form { padding: 10px 12px 12px; }
    .lyra-bt-conversation .lyra-bt-conv-message-input { font-size: 16px; /* iOS zoom guard */ }
}

/* ══════════════════════════════════════════════════════════════════════
 * ACCOUNT BLOCKS (login_form, login_logout, user_account) — moved
 * out of Lyra core (admin/css/layout.css). Verbatim copy of the
 * three CSS sections that shipped with Lyra. Selectors, rules,
 * and order are byte-for-byte identical so existing pages render
 * the same. Same migration pattern as before_after, video_block,
 * comparison_table, content_toggle, and youtube_embed.
 * ══════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════════
   LOGIN FORM BLOCK
   ═════════════════════════════════════════════════════════════════════ */
.wppw-login-form { display: block; }
.wppw-login-form--align-left  > .wppw-login-form__form { margin-left: 0; margin-right: auto; }
.wppw-login-form--align-right > .wppw-login-form__form { margin-left: auto; margin-right: 0; }
.wppw-login-form--align-center > .wppw-login-form__form { margin-left: auto; margin-right: auto; }
.wppw-login-form__form {
    box-sizing: border-box;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 20px;
    background: #fff;
}
.wppw-login-form__title { margin: 0 0 16px; }
.wppw-login-form__field { margin-bottom: 12px; }
.wppw-login-form__label {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}
.wppw-login-form__input {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
}
.wppw-login-form__input:focus {
    outline: 2px solid rgba(0, 102, 204, 0.35);
    outline-offset: 1px;
}
.wppw-login-form__remember {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 12px;
    font-size: 14px;
    cursor: pointer;
}
.wppw-login-form__remember input { margin: 0; }
.wppw-login-form__submit-row { margin-top: 8px; }
.wppw-login-form__submit {
    display: inline-block;
    padding: 10px 18px;
    background: #2271b1;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.wppw-login-form__submit:hover,
.wppw-login-form__submit:focus { background: #135e96; }
.wppw-login-form__helper-row {
    margin-top: 12px;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.wppw-login-form__helper-link { text-decoration: underline; }
.wppw-login-form__helper-sep { opacity: 0.5; }
.wppw-login-form--logged-in .wppw-login-form__loggedin-msg {
    margin: 0;
    padding: 12px 16px;
    background: #f5f5f5;
    border-left: 3px solid #2271b1;
    border-radius: 0 4px 4px 0;
}

/* ═════════════════════════════════════════════════════════════════════
   LOGIN/LOGOUT BLOCK
   ═════════════════════════════════════════════════════════════════════ */
.wppw-login-logout { display: block; }
.wppw-login-logout--align-left   { text-align: left;   }
.wppw-login-logout--align-center { text-align: center; }
.wppw-login-logout--align-right  { text-align: right;  }
.wppw-ll-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.wppw-ll-link--text { text-decoration: underline; }
.wppw-ll-link--button {
    background: #2271b1;
    color: #fff;
    padding: 10px 18px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}
.wppw-ll-link--button:hover,
.wppw-ll-link--button:focus { background: #135e96; color: #fff; }
.wppw-ll-icon-after { order: 2; }

/* ═════════════════════════════════════════════════════════════════════
   USER ACCOUNT BLOCK
   ═════════════════════════════════════════════════════════════════════ */
.wppw-user-account {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.wppw-user-account--align-left   { justify-content: flex-start; }
.wppw-user-account--align-center { justify-content: center;     }
.wppw-user-account--align-right  { justify-content: flex-end;   }
.wppw-ua-avatar {
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}
.wppw-ua-greeting { font-size: 14px; }
.wppw-ua-name { font-weight: 600; }
.wppw-ua-link { text-decoration: underline; }
.wppw-user-account--logged-out { display: block; } /* single link, no flex layout needed */
.wppw-user-account--logged-out.wppw-user-account--align-left   { text-align: left;   }
.wppw-user-account--logged-out.wppw-user-account--align-center { text-align: center; }
.wppw-user-account--logged-out.wppw-user-account--align-right  { text-align: right;  }

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICE TYPE TABS BLOCK
   Moved here from Lyra's admin/css/layout.css (section "10. SERVICE TABS").
   Selectors and rules are byte-identical to what Lyra shipped pre-move.
   ═══════════════════════════════════════════════════════════════════════════ */
.wppw-service-tabs { padding: 24px 20px; }
.wppw-service-tabs h2 { font-size: clamp(22px, 3.5vw, 30px); font-weight: 700; color: var(--wppw-dark); margin: 0 0 20px; }
.wppw-service-tab {
    border: 1px solid var(--wppw-border);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}
.wppw-service-tab summary {
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--wppw-dark);
    cursor: pointer;
    list-style: none;
    transition: background 0.15s;
}
.wppw-service-tab summary:hover { background: var(--wppw-light); }
.wppw-service-tab summary::-webkit-details-marker { display: none; }
.wppw-service-tab summary::after { content: '+'; float: right; font-size: 18px; color: var(--wppw-muted); }
.wppw-service-tab[open] summary::after { content: '−'; color: var(--wppw-primary); }
.wppw-service-tab[open] { border-color: var(--wppw-primary); }
.wppw-service-tab p { padding: 0 20px 16px; font-size: 15px; line-height: 1.65; color: var(--wppw-muted); margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   AVAILABILITY / NOTICE BANNER BLOCK
   Moved here from Lyra's admin/css/layout.css (section "18. NOTICE BANNER").
   Selectors and rules are byte-identical to what Lyra shipped pre-move.
   The :not(.wppw-notice-btn) exclusion in Lyra's universal button rule
   stays in core — that's a Lyra-side button-styling concern that correctly
   skips this block's button class regardless of where the .wppw-notice-btn
   styling itself lives.
   ═══════════════════════════════════════════════════════════════════════════ */
.wppw-notice {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 24px;
    border-radius: 8px;
    margin: 1.5em auto;
    font-size: 15px;
}
.wppw-notice-info    { background: #e8f0fe; color: #1a4e8a; border: 1px solid #c5d9f0; }
.wppw-notice-success { background: #e6f7ed; color: #1a6b3a; border: 1px solid #b8e2c8; }
.wppw-notice-warning { background: #fef3e0; color: #8a5a00; border: 1px solid #f0d9a8; }
.wppw-notice-msg { font-weight: 500; }
.wppw-notice-btn {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: rgba(0,0,0,0.08);
    color: inherit;
    transition: background 0.15s;
}
.wppw-notice-btn:hover { background: rgba(0,0,0,0.14); }

/* ═══════════════════════════════════════════════════════════════════════════
   COUNTDOWN TIMER BLOCK
   Moved here from Lyra's admin/css/layout.css (section "COUNTDOWN TIMER").
   Selectors and rules are byte-identical to what Lyra shipped pre-move.
   The front-end tick-every-second JS IIFE now ships from this add-on's
   frontend.js (was previously in Lyra's admin/js/layout.js).
   ═══════════════════════════════════════════════════════════════════════════ */
.wppw-countdown { text-align: center; padding: 32px 16px; }
.wppw-cd-units { display: flex; justify-content: center; gap: 16px; margin: 20px 0; flex-wrap: wrap; }
.wppw-cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 80px; }
.wppw-cd-num { font-size: 42px; font-weight: 700; color: #1a4e8a; line-height: 1; }
.wppw-cd-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #888; margin-top: 6px; }
.wppw-cd-expiry { font-size: 18px; color: #c0392b; font-weight: 600; padding: 20px 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT TICKER BLOCK
   Moved here from Lyra's admin/css/layout.css (section "CONTENT TICKER").
   Selectors, rules, and the @keyframes wppwTickerScroll animation are
   byte-identical to what Lyra shipped pre-move. The front-end scroll-
   duration calculator JS IIFE now ships from this add-on's frontend.js
   (was previously in Lyra's admin/js/layout.js).
   ═══════════════════════════════════════════════════════════════════════════ */
.wppw-content-ticker {
    display: flex; align-items: center; overflow: hidden;
    color: #fff; font-size: 14px; height: 42px;
}
.wppw-ticker-label {
    padding: 0 16px; font-weight: 700; font-size: 12px; letter-spacing: .08em;
    background: rgba(0,0,0,.2); height: 100%; display: flex; align-items: center;
    flex-shrink: 0;
}
.wppw-ticker-track { flex: 1; overflow: hidden; position: relative; height: 100%; display: flex; align-items: center; }
.wppw-ticker-scroll {
    display: flex; gap: 48px; white-space: nowrap;
    animation: wppwTickerScroll linear infinite;
}
.wppw-ticker-item { flex-shrink: 0; }
.wppw-ticker-item a { color: #fff; text-decoration: none; }
.wppw-ticker-item a:hover { text-decoration: underline; }
@keyframes wppwTickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ════════════════════════════════════════════════════════════════════════
 * Star Rating Summary block — REBUILT (modern card design with SVG stars)
 *
 * Class names mirror the PHP renderer (render_rating_summary) and the
 * companion JS IIFE in this add-on's frontend.js. If you change a class
 * name here, change it in those two places too.
 *
 * DOM structure produced by PHP:
 *   .wppw-rating-summary
 *     .wppw-rs-layout-{horizontal|stacked|card}
 *     .wppw-rs-card-{flat|bordered|elevated}
 *     .wppw-rs-emphasis-{standard|bold}
 *     [.wppw-rs-animate]
 *       .wppw-rs-row-main (card layout only)
 *         .wppw-rs-score-wrap > .wppw-rs-score + .wppw-rs-score-max
 *         .wppw-rs-block-text (card layout only)
 *           .wppw-rs-stars
 *             .wppw-rs-stars-track  → empty stars
 *             .wppw-rs-stars-fill   → filled stars (clipped to score%)
 *           .wppw-rs-meta
 *             .wppw-rs-source-logo (optional inline SVG)
 *             .wppw-rs-meta-text
 *       .wppw-rs-dist (card layout + show_distribution=yes only)
 *         .wppw-rs-dist-row × 5
 *           .wppw-rs-dist-label + .wppw-rs-dist-track + .wppw-rs-dist-pct
 *       .wppw-rs-row-action
 *         .wppw-rs-link (button-styled)
 *
 * Per-block CSS variables emitted inline by PHP:
 *   --rs-star-filled   filled-star color
 *   --rs-star-empty    empty-star color
 *   --rs-score-color   big score text color
 *   --rs-meta-color    "Based on N reviews" caption color
 *   --rs-accent        link color + distribution-bar fill color
 * ════════════════════════════════════════════════════════════════════════ */

.wppw-rating-summary {
    /* Defaults — overridden by the inline CSS vars set by PHP per-block. */
    --rs-star-filled: #f59e0b;
    --rs-star-empty:  #e2e8f0;
    --rs-score-color: #0f172a;
    --rs-meta-color:  #64748b;
    --rs-accent:      #3b82f6;

    --rs-radius:        16px;
    --rs-pad-y:         18px;
    --rs-pad-x:         24px;
    --rs-gap:           14px;
    --rs-score-size:    3rem;
    --rs-score-bold:    5rem;
    --rs-star-size:     22px;

    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--rs-gap);
    flex-wrap: wrap;
    padding: var(--rs-pad-y) var(--rs-pad-x);
    margin: 1.5em auto;
    max-width: 720px;
    border-radius: var(--rs-radius);
    background: #ffffff;
    color: var(--rs-score-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.4;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* ── Card style variants ─────────────────────────────────────────────── */
.wppw-rating-summary.wppw-rs-card-flat {
    background: transparent;
    padding: 12px 16px;
    border: none;
    box-shadow: none;
}
.wppw-rating-summary.wppw-rs-card-bordered {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: none;
}
.wppw-rating-summary.wppw-rs-card-elevated {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px -10px rgba(15, 23, 42, 0.16);
}

/* ── Layout variants ─────────────────────────────────────────────────── */
/* horizontal: single row of score | stars | meta | link. Default. */
.wppw-rating-summary.wppw-rs-layout-horizontal {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
}
.wppw-rating-summary.wppw-rs-layout-horizontal .wppw-rs-link {
    margin-left: auto;
}

/* stacked: score and stars centered, meta + link below. */
.wppw-rating-summary.wppw-rs-layout-stacked {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 10px;
    padding: 24px 24px 20px;
}
.wppw-rating-summary.wppw-rs-layout-stacked .wppw-rs-row-action {
    margin-top: 4px;
}

/* card: vertical layout with main row at top, distribution below, action at bottom. */
.wppw-rating-summary.wppw-rs-layout-card {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 24px 24px 20px;
}
.wppw-rating-summary.wppw-rs-layout-card .wppw-rs-row-main {
    display: flex;
    align-items: center;
    gap: 18px;
}
.wppw-rating-summary.wppw-rs-layout-card .wppw-rs-block-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.wppw-rating-summary.wppw-rs-layout-card .wppw-rs-row-action {
    border-top: 1px solid #f1f5f9;
    padding-top: 14px;
    margin-top: 4px;
    text-align: right;
}

/* ── Score display ──────────────────────────────────────────────────── */
.wppw-rs-score-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
    flex-shrink: 0;
}
.wppw-rs-score {
    font-size: var(--rs-score-size);
    font-weight: 800;
    color: var(--rs-score-color);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    /* Smooth count-up — JS rewrites textContent during animation. */
    transition: opacity 0.15s ease;
}
.wppw-rs-score-max {
    font-size: 1rem;
    font-weight: 600;
    color: var(--rs-meta-color);
    letter-spacing: -0.01em;
    opacity: 0.7;
}
/* Bold emphasis — much bigger score for the "trust signal" treatment. */
.wppw-rating-summary.wppw-rs-emphasis-bold {
    --rs-score-size: var(--rs-score-bold);
}
.wppw-rating-summary.wppw-rs-emphasis-bold .wppw-rs-score-max {
    font-size: 1.25rem;
}

/* ── Stars row (SVG with half-star fill via clip) ───────────────────── */
.wppw-rs-stars {
    position: relative;
    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
}
.wppw-rs-stars-track,
.wppw-rs-stars-fill {
    display: flex;
    gap: 2px;
    line-height: 0;
}
.wppw-rs-stars-track {
    color: var(--rs-star-empty);
}
/* Filled overlay — width is set inline by PHP (final %) or by JS
   (animated 0% → final %). overflow:hidden clips the half-star. */
.wppw-rs-stars-fill {
    position: absolute;
    inset: 0;
    color: var(--rs-star-filled);
    overflow: hidden;
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    /* Keep the inner stars at full size so the clip-edge cuts cleanly. */
    width: 0;
    /* Filter widen so the clip can reach the right edge of the last star. */
    white-space: nowrap;
}
.wppw-rs-stars-fill .wppw-rs-star {
    flex-shrink: 0;
}
.wppw-rs-star {
    width: var(--rs-star-size);
    height: var(--rs-star-size);
    display: inline-block;
    flex-shrink: 0;
}
.wppw-rating-summary.wppw-rs-emphasis-bold {
    --rs-star-size: 28px;
}

/* ── Meta line (logo + caption) ─────────────────────────────────────── */
.wppw-rs-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rs-meta-color);
    font-size: 0.875rem;
    line-height: 1.4;
    flex-wrap: wrap;
}
.wppw-rs-source-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.wppw-rs-source-logo .wppw-rs-logo {
    width: 18px;
    height: 18px;
    display: block;
}
.wppw-rs-meta-text {
    color: var(--rs-meta-color);
}
/* Apple logo uses currentColor so it picks up meta-color naturally. */
.wppw-rs-source-logo .wppw-rs-logo-apple {
    color: var(--rs-meta-color);
}
.wppw-rs-source-logo .wppw-rs-logo-generic {
    color: var(--rs-meta-color);
}

/* ── Link button (uses button-style classes from button_style fields) ─ */
.wppw-rs-link {
    display: inline-block;
    padding: 8px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--rs-accent);
    background: transparent;
    border: 1px solid var(--rs-accent);
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
    flex-shrink: 0;
    white-space: nowrap;
}
.wppw-rs-link:hover {
    background: var(--rs-accent);
    color: #ffffff;
}
.wppw-rs-link:active { transform: translateY(1px); }

/* ── Distribution bars (card + show_distribution=yes only) ──────────── */
.wppw-rs-dist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0;
}
.wppw-rs-dist-row {
    display: grid;
    grid-template-columns: 32px 1fr 44px;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    color: var(--rs-meta-color);
    line-height: 1.3;
}
.wppw-rs-dist-label {
    font-weight: 600;
    color: var(--rs-score-color);
    white-space: nowrap;
}
.wppw-rs-dist-track {
    height: 6px;
    background: var(--rs-star-empty);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.wppw-rs-dist-fill {
    height: 100%;
    background: var(--rs-accent);
    border-radius: 3px;
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
    /* Width is set inline by PHP (final %) or driven by JS (0 → final). */
}
.wppw-rs-dist-pct {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--rs-meta-color);
    font-weight: 500;
}

/* ── Animation initial state (set by .wppw-rs-animate class) ────────── */
/* When the block is set to animate, the score and stars-fill start at
   zero state and the JS IIFE drives them to final values once the
   block scrolls into view. The transitions above handle the visual
   easing — this just keeps the initial paint clean. */
.wppw-rating-summary.wppw-rs-animate .wppw-rs-stars-fill {
    width: 0%;
}

/* ── Mobile tweaks ──────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .wppw-rating-summary {
        --rs-score-size: 2.5rem;
        --rs-score-bold: 3.75rem;
        --rs-star-size: 20px;
        gap: 12px;
    }
    .wppw-rating-summary.wppw-rs-layout-horizontal {
        flex-direction: column;
        align-items: flex-start;
    }
    .wppw-rating-summary.wppw-rs-layout-horizontal .wppw-rs-link {
        margin-left: 0;
        align-self: stretch;
        text-align: center;
    }
    .wppw-rating-summary.wppw-rs-layout-card .wppw-rs-row-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .wppw-rating-summary.wppw-rs-layout-card .wppw-rs-row-action {
        text-align: center;
    }
    .wppw-rating-summary.wppw-rs-layout-card .wppw-rs-link {
        display: block;
    }
}

/* Reduced motion — instant transitions for users who prefer no motion. */
@media (prefers-reduced-motion: reduce) {
    .wppw-rs-stars-fill,
    .wppw-rs-dist-fill {
        transition: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
 * Mega Menu block — REBUILT (modern design, structural CSS)
 *
 * Class names mirror the PHP renderer (LYRA_BT_Owned_Blocks::render_mega_menu).
 * Originally Lyra emitted ~40 lines of inline <style> per block; now the
 * structural rules live here once and per-block dynamic values come in
 * via inline CSS variables on each <nav>.
 *
 * Modifier-class taxonomy emitted by PHP:
 *   .wppw-mm-align-{left|center|right}   bar item alignment
 *   .wppw-mm-fly-{stacked|horizontal}    flyout column layout
 *   .wppw-mm-anim-{instant|fade-down|slide-down|scale}  panel reveal anim
 *   .wppw-mm-mob-{inline|slide-left|slide-right|fullscreen}  mobile drawer
 *   .wppw-mm-hover-{color|underline|pill|scale}              link hover fx
 *   .wppw-mm-sticky                      position:sticky on the bar
 *   .wppw-mm-mobile-enabled              shows the hamburger ≤768px
 *   .wppw-mm-sep-{line|dot}              top-item separator style
 *   .wppw-mm-no-shadow                   suppresses flyout box-shadow
 *   .wppw-mm-blur-yes                    backdrop-filter on flyouts
 *   .wppw-mm-chevron-anim                rotate chevron 180° when open
 *
 * JS toggle classes (managed by frontend.js IIFE):
 *   .wppw-mm-active     on top item whose panel is open
 *   .wppw-mm-open       on panel visible / hamburger active / bar drawer open
 *   .wppw-mm-bar-open   on bar when mobile drawer is open
 *
 * Per-block CSS variables (set inline by PHP per <nav>):
 *   --mm-link / --mm-hover / --mm-active     top-item text colors
 *   --mm-size / --mm-weight                  top-item font
 *   --mm-pad-v / --mm-pad-h                  top-link padding
 *   --mm-fly-bg / --mm-fly-link / --mm-fly-hover  flyout panel colors
 *   --mm-fly-size / --mm-fly-cols / --mm-fly-pad  flyout typography + grid
 *   --mm-col-border                          column-heading underline
 *   --mm-sep-color                           top-item separator color
 *   --mm-mob-bg                              mobile drawer background
 *   --mm-mob-speed                           mobile drawer animation duration
 *   --mm-bar-bg / --mm-bar-border / --mm-bar-max-w  optional bar tokens
 *   --mm-mob-icon                            optional hamburger color
 * ════════════════════════════════════════════════════════════════════════ */

.wppw-mega-menu {
    position: relative;
    background: var(--mm-bar-bg, transparent);
    border-bottom: var(--mm-bar-border, none);
}
.wppw-mega-menu.wppw-mm-sticky {
    position: sticky;
    top: 0;
    z-index: 10000;
}

/* ── Top bar (the <ul>) ──────────────────────────────────────────────── */
.wppw-mm-bar {
    display: flex;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    gap: 0;
    max-width: var(--mm-bar-max-w, none);
}
.wppw-mm-align-center .wppw-mm-bar { justify-content: center; }
.wppw-mm-align-right  .wppw-mm-bar { justify-content: flex-end; }

.wppw-mm-top-item {
    position: relative;
    list-style: none;
}
.wppw-mm-top-item > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: var(--mm-pad-v) var(--mm-pad-h);
    color: var(--mm-link);
    font-size: var(--mm-size);
    font-weight: var(--mm-weight);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, transform 0.18s ease;
    /* Anchored origin for the hover-underline pseudo. */
    position: relative;
}

/* Active/current state — color shifts to either --mm-hover (hover/open) or
   --mm-active (current page). The hover-underline / pill / scale effects
   below extend this baseline. */
.wppw-mm-top-item > a:hover,
.wppw-mm-top-item.wppw-mm-active > a { color: var(--mm-hover); }
.wppw-mm-top-item.wppw-mm-current > a { color: var(--mm-active); }

/* Chevron — small SVG (in render output) or fallback span. We size it
   relative to the parent font so it scales with --mm-size. */
.wppw-mm-chevron {
    display: inline-flex;
    width: 0.75em;
    height: 0.75em;
    transition: transform 0.22s ease;
}
.wppw-mm-chevron-anim .wppw-mm-top-item.wppw-mm-active .wppw-mm-chevron {
    transform: rotate(180deg);
}

/* Top-item separator (between siblings). The "line" variant uses a
   border on the next sibling; "dot" uses a tiny pseudo-element to avoid
   layout-impact on the link itself. */
.wppw-mm-sep-line .wppw-mm-top-item + .wppw-mm-top-item {
    border-left: 1px solid var(--mm-sep-color);
}
.wppw-mm-sep-dot .wppw-mm-top-item + .wppw-mm-top-item > a::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--mm-sep-color);
    margin-right: calc(var(--mm-pad-h) * -1 + 6px);
    position: relative;
    left: calc(var(--mm-pad-h) * -1 + 2px);
}

/* ── Hover effect variants ──────────────────────────────────────────── */
/* The legacy "color" variant is the baseline above (just changes color).
   The other three are layered on top by the modifier on the root. */

/* color — explicit baseline marker. The .wppw-mm-top-item > a:hover rule
   above already shifts color via --mm-hover, so this selector adds no
   new declarations. Listed here so the modifier class is documented in
   the stylesheet and a future developer searching for it will find it. */
.wppw-mm-hover-color .wppw-mm-top-item > a {
    /* Baseline; no additional rules needed. */
}

/* underline — animated bottom underline that grows from the centre. */
.wppw-mm-hover-underline .wppw-mm-top-item > a {
    /* Reserve space below the link so the underline doesn't push layout. */
    padding-bottom: calc(var(--mm-pad-v) - 1px);
}
.wppw-mm-hover-underline .wppw-mm-top-item > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(var(--mm-pad-v) * 0.5);
    width: 0;
    height: 2px;
    background: var(--mm-hover);
    border-radius: 2px;
    transition: width 0.22s ease, left 0.22s ease;
}
.wppw-mm-hover-underline .wppw-mm-top-item > a:hover::after,
.wppw-mm-hover-underline .wppw-mm-top-item.wppw-mm-active > a::after,
.wppw-mm-hover-underline .wppw-mm-top-item.wppw-mm-current > a::after {
    width: calc(100% - var(--mm-pad-h) * 2 + 12px);
    left: calc(var(--mm-pad-h) - 6px);
}

/* pill — soft tinted pill behind the link on hover/active. */
.wppw-mm-hover-pill .wppw-mm-top-item > a {
    border-radius: 999px;
    margin: 0 2px;
    transition: color 0.2s ease, background 0.2s ease;
}
.wppw-mm-hover-pill .wppw-mm-top-item > a:hover,
.wppw-mm-hover-pill .wppw-mm-top-item.wppw-mm-active > a {
    background: rgba(255, 255, 255, 0.08);
}
/* When the bar has a light background var, the pill should be a tinted
   neutral — using `currentColor` would invert. The `color-mix` fallback
   lets us derive a subtle pill in either context. */
@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .wppw-mm-hover-pill .wppw-mm-top-item > a:hover,
    .wppw-mm-hover-pill .wppw-mm-top-item.wppw-mm-active > a {
        background: color-mix(in srgb, var(--mm-hover) 14%, transparent);
    }
}

/* scale — link gently grows on hover for a subtle tactile feel. */
.wppw-mm-hover-scale .wppw-mm-top-item > a {
    transition: color 0.2s ease, transform 0.18s ease;
    transform-origin: center;
}
.wppw-mm-hover-scale .wppw-mm-top-item > a:hover,
.wppw-mm-hover-scale .wppw-mm-top-item.wppw-mm-active > a {
    transform: scale(1.06);
}

/* ── Flyout panels ──────────────────────────────────────────────────── */
.wppw-mm-panels {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9999;
}
.wppw-mm-panel {
    /* Hidden by default. JS toggles .wppw-mm-open to reveal. We use
       opacity + visibility + transform so the animation system below
       has something to interpolate from. */
    background: var(--mm-fly-bg);
    padding: var(--mm-fly-pad);
    border-radius: var(--mm-fly-radius, 0);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.wppw-mm-panel.wppw-mm-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
}
.wppw-mm-no-shadow .wppw-mm-panel { box-shadow: none; }

/* Backdrop blur ("frosted glass"). The fly bg gets an alpha tint so
   the blur has something to interact with. Browsers without
   backdrop-filter just see the var color at full opacity — same as
   the legacy look, no fallback needed. */
.wppw-mm-blur-yes .wppw-mm-panel {
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
    background: color-mix(in srgb, var(--mm-fly-bg) 80%, transparent);
}

/* Reveal animations — apply the initial transform so panels start
   from the right "off" position before .wppw-mm-open lifts them in. */
.wppw-mm-anim-instant .wppw-mm-panel    { transition-duration: 0s; }
.wppw-mm-anim-fade-down .wppw-mm-panel  { transform: translateY(-6px); }
.wppw-mm-anim-fade-down .wppw-mm-panel.wppw-mm-open  { transform: translateY(0); }
.wppw-mm-anim-slide-down .wppw-mm-panel { transform: translateY(-12px); }
.wppw-mm-anim-slide-down .wppw-mm-panel.wppw-mm-open { transform: translateY(0); }
.wppw-mm-anim-scale .wppw-mm-panel      { transform: scale(0.97); transform-origin: top center; }
.wppw-mm-anim-scale .wppw-mm-panel.wppw-mm-open      { transform: scale(1); }

/* Inner grid */
.wppw-mm-panel-inner {
    display: grid;
    grid-template-columns: repeat(var(--mm-fly-cols), 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}
.wppw-mm-fly-stacked .wppw-mm-panel-inner {
    grid-template-columns: 1fr;
    max-width: 320px;
    gap: 8px;
}
.wppw-mm-fly-stacked .wppw-mm-sub-links { display: block; }
.wppw-mm-fly-stacked .wppw-mm-sub-links li { display: block; }

/* Column heading + sub-links */
.wppw-mm-col-heading {
    display: block;
    font-weight: 700;
    font-size: var(--mm-fly-size);
    color: var(--mm-fly-link);
    text-decoration: none;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mm-col-border);
    transition: color 0.15s ease;
}
.wppw-mm-col-heading:hover { color: var(--mm-fly-hover); }
.wppw-mm-sub-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wppw-mm-sub-links li a {
    display: block;
    padding: 4px 0;
    font-size: var(--mm-fly-size);
    color: var(--mm-fly-link);
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
}
.wppw-mm-sub-links li a:hover {
    color: var(--mm-fly-hover);
    transform: translateX(2px);
}

/* ── Hamburger button ──────────────────────────────────────────────── */
.wppw-mm-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    flex-direction: column;
    gap: 5px;
    /* Smooth state transition into the X morph. */
    position: relative;
    z-index: 10001;
}
.wppw-mm-hamburger > span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--mm-mob-icon, var(--mm-link));
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.2s ease;
}
.wppw-mm-hamburger.wppw-mm-open > span:nth-child(1) { transform: rotate(45deg)  translate(5px,  5px); }
.wppw-mm-hamburger.wppw-mm-open > span:nth-child(2) { opacity: 0; }
.wppw-mm-hamburger.wppw-mm-open > span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Mobile breakpoint ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Hamburger visibility — only when explicitly enabled. */
    .wppw-mm-mobile-enabled .wppw-mm-hamburger { display: flex; }

    /* INLINE drawer (legacy) — bar drops down beneath the hamburger as
       a stacked list. Same behaviour Lyra had pre-rebuild. */
    .wppw-mm-mob-inline.wppw-mm-mobile-enabled .wppw-mm-bar {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--mm-mob-bg);
    }
    .wppw-mm-mob-inline.wppw-mm-mobile-enabled .wppw-mm-bar.wppw-mm-bar-open {
        display: flex;
    }
    .wppw-mm-mob-inline.wppw-mm-mobile-enabled .wppw-mm-panels { position: static; }

    /* SLIDE drawers — bar becomes a fixed-position sheet that slides in
       from the side. We render it positioned off-screen and translate
       it into view when .wppw-mm-bar-open is added. */
    .wppw-mm-mob-slide-left.wppw-mm-mobile-enabled .wppw-mm-bar,
    .wppw-mm-mob-slide-right.wppw-mm-mobile-enabled .wppw-mm-bar,
    .wppw-mm-mob-fullscreen.wppw-mm-mobile-enabled .wppw-mm-bar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        bottom: 0;
        width: 80%;
        max-width: 360px;
        background: var(--mm-mob-bg);
        z-index: 10000;
        margin: 0;
        padding: 70px 16px 24px;
        overflow-y: auto;
        transition: transform var(--mm-mob-speed, 300ms) cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 0 0 32px rgba(0, 0, 0, 0.25);
    }
    .wppw-mm-mob-slide-left.wppw-mm-mobile-enabled  .wppw-mm-bar { left: 0;  transform: translateX(-110%); }
    .wppw-mm-mob-slide-right.wppw-mm-mobile-enabled .wppw-mm-bar { right: 0; transform: translateX( 110%); }
    .wppw-mm-mob-slide-left.wppw-mm-mobile-enabled  .wppw-mm-bar.wppw-mm-bar-open,
    .wppw-mm-mob-slide-right.wppw-mm-mobile-enabled .wppw-mm-bar.wppw-mm-bar-open {
        transform: translateX(0);
    }

    /* FULLSCREEN — entire viewport, slides in from the top. */
    .wppw-mm-mob-fullscreen.wppw-mm-mobile-enabled .wppw-mm-bar {
        width: 100%;
        max-width: none;
        right: 0;
        left: 0;
        transform: translateY(-100%);
    }
    .wppw-mm-mob-fullscreen.wppw-mm-mobile-enabled .wppw-mm-bar.wppw-mm-bar-open {
        transform: translateY(0);
    }

    /* Panels stack vertically inside the drawer + lose absolute positioning. */
    .wppw-mm-mobile-enabled .wppw-mm-panels { position: static; }
    .wppw-mm-mobile-enabled .wppw-mm-panel-inner {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Inside drawer, top-link padding goes vertical — hover effects don't
       make sense in a stacked list. */
    .wppw-mm-mob-slide-left.wppw-mm-mobile-enabled  .wppw-mm-top-item,
    .wppw-mm-mob-slide-right.wppw-mm-mobile-enabled .wppw-mm-top-item,
    .wppw-mm-mob-fullscreen.wppw-mm-mobile-enabled  .wppw-mm-top-item {
        width: 100%;
    }

    /* Separators on stacked layout: line becomes top border (legacy did this). */
    .wppw-mm-sep-line .wppw-mm-top-item + .wppw-mm-top-item {
        border-left: none;
        border-top: 1px solid var(--mm-sep-color);
    }
    .wppw-mm-sep-dot .wppw-mm-top-item + .wppw-mm-top-item > a::before {
        display: none;
    }
}

/* Reduced motion — disable all transitions/transforms for users who ask. */
@media (prefers-reduced-motion: reduce) {
    .wppw-mega-menu *,
    .wppw-mega-menu *::before,
    .wppw-mega-menu *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
 * Grid Blocks — styles for all 12 designs
 *
 * Layered CSS:
 *   1. Base wrapper + shared sub-elements (image box, title, excerpt,
 *      meta, filters, load-more, lightbox)
 *   2. Hover effects: 5 generic overrides + per-design tailored defaults
 *   3. Entry animations: fade and fade-up keyframes via class + .is-visible
 *   4. Per-design layout overrides (12 sections, one per block id)
 *   5. Responsive collapses for tablet (<= 900px) and mobile (<= 600px)
 * ════════════════════════════════════════════════════════════════════ */

/* ── 1. Base wrapper + shared sub-elements ─────────────────────────── */
.wppw-grid-block {
    --wppw-grid-cols-d: 3;
    --wppw-grid-cols-t: 2;
    --wppw-grid-cols-m: 1;
    --wppw-grid-gap: 24px;
    box-sizing: border-box;
    width: 100%;
}
.wppw-grid-block *,
.wppw-grid-block *::before,
.wppw-grid-block *::after { box-sizing: border-box; }

.wppw-grid-list {
    display: grid;
    grid-template-columns: repeat(var(--wppw-grid-cols-d), minmax(0, 1fr));
    gap: var(--wppw-grid-gap);
}

.wppw-grid-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.wppw-grid-card:hover { text-decoration: none; }

.wppw-grid-img-wrap {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    overflow: hidden;
}
.wppw-grid-img-wrap.wppw-grid-img-link,
.wppw-grid-img-wrap.wppw-grid-img-lb { cursor: pointer; }
button.wppw-grid-img-wrap { text-align: left; }

.wppw-grid-img-box {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f1f5f9;
}
.wppw-grid-img-aspect { /* padding-top set inline */ }
.wppw-grid-img-natural .wppw-grid-img { display: block; width: 100%; height: auto; }
.wppw-grid-img-aspect .wppw-grid-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wppw-grid-img-empty {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #e2e8f0 25%, #f1f5f9 25%, #f1f5f9 50%, #e2e8f0 50%, #e2e8f0 75%, #f1f5f9 75%);
    background-size: 20px 20px;
    opacity: 0.5;
}

.wppw-grid-title {
    margin: 0 0 0.5em;
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: 600;
}
.wppw-grid-title a { color: inherit; text-decoration: none; }
.wppw-grid-title a:hover { text-decoration: underline; }

.wppw-grid-excerpt {
    margin: 0 0 0.75em;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #475569;
}

.wppw-grid-meta {
    list-style: none;
    margin: 0 0 0.75em;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1em;
    font-size: 0.8rem;
    color: #64748b;
}
.wppw-grid-meta li { margin: 0; padding: 0; }
.wppw-grid-meta-cat { font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.wppw-grid-readmore {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    margin-top: 0.25em;
}
.wppw-grid-readmore:hover { text-decoration: underline; }

.wppw-grid-caption {
    padding: 0.5em 0;
    font-size: 0.85rem;
    color: #475569;
    text-align: center;
}

/* Filter chips */
.wppw-grid-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0 0 1.5em;
}
.wppw-grid-chip {
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 0.4em 1em;
    border-radius: 999px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}
.wppw-grid-chip:hover { border-color: #64748b; color: #0f172a; }
.wppw-grid-chip.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

/* Load more */
.wppw-grid-loadmore {
    display: inline-block;
    margin: 1.5em auto 0;
    padding: 0.75em 2em;
    background: #0f172a;
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.wppw-grid-block { text-align: initial; }
.wppw-grid-block > .wppw-grid-loadmore {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wppw-grid-loadmore:hover { background: #334155; transform: translateY(-1px); }
.wppw-grid-loadmore:active { transform: translateY(0); }

/* Empty state */
.wppw-grid-empty .wppw-grid-placeholder {
    padding: 2em 1.5em;
    text-align: center;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    font-size: 0.95rem;
}

/* Lightbox modal */
.wppw-grid-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
}
.wppw-grid-lightbox.is-open { display: flex; }
.wppw-grid-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
}
.wppw-grid-lightbox-stage {
    position: relative;
    width: min(95vw, 1400px);
    height: min(90vh, 900px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.wppw-grid-lightbox-figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.wppw-grid-lightbox-img {
    max-width: 90vw;
    max-height: 75vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}
.wppw-grid-lightbox-caption {
    margin-top: 1em;
    color: #fff;
    text-align: center;
    font-size: 1rem;
    max-width: 80vw;
}
.wppw-grid-lightbox-close,
.wppw-grid-lightbox-prev,
.wppw-grid-lightbox-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    border: 0;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
    line-height: 1;
}
.wppw-grid-lightbox-close:hover,
.wppw-grid-lightbox-prev:hover,
.wppw-grid-lightbox-next:hover { background: rgba(255, 255, 255, 0.3); }
.wppw-grid-lightbox-close {
    top: 1em;
    right: 1em;
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
}
.wppw-grid-lightbox-prev,
.wppw-grid-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    font-size: 2rem;
}
.wppw-grid-lightbox-prev { left: 1em; }
.wppw-grid-lightbox-next { right: 1em; }
.wppw-grid-lightbox-counter {
    position: absolute;
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.4);
    padding: 0.25em 0.75em;
    border-radius: 999px;
}

/* ── 2. Hover effects ──────────────────────────────────────────────── */

/* Generic overrides — applied when user picks anything other than 'default' */
.wppw-grid-hover-none .wppw-grid-card { transition: none; }
.wppw-grid-hover-none .wppw-grid-card:hover { transform: none !important; box-shadow: none !important; }

.wppw-grid-hover-lift .wppw-grid-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.wppw-grid-hover-lift .wppw-grid-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); }

.wppw-grid-hover-zoom .wppw-grid-img-box { overflow: hidden; }
.wppw-grid-hover-zoom .wppw-grid-img { transition: transform 0.4s ease; }
.wppw-grid-hover-zoom .wppw-grid-card:hover .wppw-grid-img { transform: scale(1.06); }

.wppw-grid-hover-darken .wppw-grid-img-box { position: relative; }
.wppw-grid-hover-darken .wppw-grid-img-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.wppw-grid-hover-darken .wppw-grid-card:hover .wppw-grid-img-box::after { opacity: 1; }

.wppw-grid-hover-border .wppw-grid-card { border-bottom: 3px solid transparent; transition: border-color 0.25s ease; }
.wppw-grid-hover-border .wppw-grid-card:hover { border-bottom-color: #2563eb; }

/* Tailored defaults per design */
.wppw-grid-hover-default.wppw-pgc .wppw-grid-card,
.wppw-grid-hover-default.wppw-pgr .wppw-grid-card,
.wppw-grid-hover-default.wppw-mgh .wppw-grid-card,
.wppw-grid-hover-default.wppw-mgf .wppw-grid-card,
.wppw-grid-hover-default.wppw-bgc .wppw-grid-card,
.wppw-grid-hover-default.wppw-bgf .wppw-grid-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.wppw-grid-hover-default.wppw-pgc .wppw-grid-card:hover,
.wppw-grid-hover-default.wppw-pgr .wppw-grid-card:hover,
.wppw-grid-hover-default.wppw-mgh .wppw-grid-card:hover,
.wppw-grid-hover-default.wppw-mgf .wppw-grid-card:hover,
.wppw-grid-hover-default.wppw-bgc .wppw-grid-card:hover,
.wppw-grid-hover-default.wppw-bgf .wppw-grid-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); }

.wppw-grid-hover-default.wppw-pgm .wppw-grid-card .wppw-grid-img-box,
.wppw-grid-hover-default.wppw-mgq .wppw-grid-card .wppw-grid-img-box { position: relative; overflow: hidden; }
.wppw-grid-hover-default.wppw-pgm .wppw-grid-img,
.wppw-grid-hover-default.wppw-mgq .wppw-grid-img { transition: transform 0.4s ease, filter 0.3s ease; }
.wppw-grid-hover-default.wppw-pgm .wppw-grid-card:hover .wppw-grid-img,
.wppw-grid-hover-default.wppw-mgq .wppw-grid-card:hover .wppw-grid-img { transform: scale(1.05); filter: brightness(0.85); }

.wppw-grid-hover-default.wppw-ggu .wppw-grid-img-box,
.wppw-grid-hover-default.wppw-ggm .wppw-grid-img-box,
.wppw-grid-hover-default.wppw-ggj .wppw-grid-img-box { overflow: hidden; }
.wppw-grid-hover-default.wppw-ggu .wppw-grid-img,
.wppw-grid-hover-default.wppw-ggm .wppw-grid-img,
.wppw-grid-hover-default.wppw-ggj .wppw-grid-img { transition: transform 0.4s ease; }
.wppw-grid-hover-default.wppw-ggu .wppw-grid-card:hover .wppw-grid-img,
.wppw-grid-hover-default.wppw-ggm .wppw-grid-card:hover .wppw-grid-img,
.wppw-grid-hover-default.wppw-ggj .wppw-grid-card:hover .wppw-grid-img { transform: scale(1.07); }

/* Editorial — subtle title color shift on hover (no transform) */
.wppw-grid-hover-default.wppw-bge .wppw-grid-title a { transition: color 0.2s ease; }
.wppw-grid-hover-default.wppw-bge .wppw-grid-card:hover .wppw-grid-title a { color: #2563eb; }

/* ── 3. Entry animations ───────────────────────────────────────────── */
.wppw-grid-anim-none [data-grid-page] { /* instant — no transition */ }

.wppw-grid-anim-fade [data-grid-page] {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}
.wppw-grid-anim-fade [data-grid-page].is-visible { opacity: 1; }

.wppw-grid-anim-fade_up [data-grid-page] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.wppw-grid-anim-fade_up [data-grid-page].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── 4. Per-design layouts ─────────────────────────────────────────── */

/* — Portfolio Classic (pgc) — */
.wppw-pgc .wppw-pgc-card {
    background: var(--wppw-pgc-card-bg, #fff);
    color: var(--wppw-pgc-card-fg, #0f172a);
    border: 1px solid var(--wppw-pgc-card-bd, #e2e8f0);
    border-radius: var(--wppw-pgc-card-r, 12px);
}
.wppw-pgc .wppw-pgc-body { padding: 1.25em; }
.wppw-pgc .wppw-grid-meta-cat {
    background: var(--wppw-pgc-badge-bg, #0f172a);
    color: #fff;
    padding: 0.2em 0.7em;
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.7rem;
    font-weight: 600;
}

/* — Portfolio Masonry (pgm) — */
.wppw-pgm .wppw-pgm-list {
    column-count: var(--wppw-grid-cols-d);
    column-gap: var(--wppw-grid-gap);
}
.wppw-pgm .wppw-pgm-card {
    display: block;
    break-inside: avoid;
    margin-bottom: var(--wppw-grid-gap);
    width: 100%;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
.wppw-pgm .wppw-pgm-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.5em 1em 1em;
    color: var(--wppw-pgm-text, #fff);
    background: var(--wppw-pgm-overlay, #000); /* solid fallback for browsers without color-mix */
    background: linear-gradient(to top,
        color-mix(in srgb, var(--wppw-pgm-overlay, #000) calc(var(--wppw-pgm-overlay-op, 0.7) * 100%), transparent) 0%,
        transparent 100%);
}
.wppw-pgm .wppw-pgm-kicker {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.4em;
    opacity: 0.9;
}
.wppw-pgm .wppw-pgm-title {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    color: inherit;
}

/* — Portfolio Carousel (pgr) — */
.wppw-pgr {
    --wppw-pgr-visible: 3;
}
.wppw-pgr .wppw-pgr-frame {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.wppw-pgr .wppw-pgr-track {
    display: flex;
    gap: var(--wppw-grid-gap);
    padding-bottom: 4px;
}
.wppw-pgr .wppw-pgr-card {
    flex: 0 0 calc((100% - (var(--wppw-pgr-visible) - 1) * var(--wppw-grid-gap)) / var(--wppw-pgr-visible));
    scroll-snap-align: start;
    background: var(--wppw-pgr-card-bg, #fff);
    color: var(--wppw-pgr-card-fg, #0f172a);
    border-radius: var(--wppw-pgr-card-r, 12px);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.wppw-pgr .wppw-pgr-body { padding: 1em 1.25em 1.25em; }
.wppw-pgr .wppw-pgr-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    z-index: 2;
    transition: background 0.2s, transform 0.15s;
}
.wppw-pgr .wppw-pgr-arrow:hover { background: #0f172a; transform: translateY(-50%) scale(1.05); }
.wppw-pgr .wppw-pgr-prev { left: 0.5em; }
.wppw-pgr .wppw-pgr-next { right: 0.5em; }
.wppw-pgr .wppw-pgr-dots {
    display: flex;
    justify-content: center;
    gap: 0.5em;
    margin-top: 1.25em;
}
.wppw-pgr .wppw-pgr-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: #cbd5e1;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.15s;
}
.wppw-pgr .wppw-pgr-dot:hover { background: #94a3b8; }
.wppw-pgr .wppw-pgr-dot.is-active { background: #0f172a; transform: scale(1.2); }

/* — Magazine Hero + Sidebar (mgh) — */
.wppw-mgh .wppw-mgh-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--wppw-grid-gap);
}
.wppw-mgh .wppw-mgh-side-col {
    display: flex;
    flex-direction: column;
    gap: var(--wppw-grid-gap);
}
.wppw-mgh .wppw-mgh-hero {
    background: var(--wppw-mgh-card-bg, #fff);
    color: var(--wppw-mgh-card-fg, #0f172a);
    overflow: hidden;
    border-radius: 8px;
}
.wppw-mgh .wppw-mgh-hero-body { padding: 1.25em; }
.wppw-mgh .wppw-mgh-overlay {
    position: relative;
    border-radius: 8px;
}
.wppw-mgh .wppw-mgh-overlay .wppw-mgh-hero-body {
    position: absolute;
    inset: auto 0 0 0;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    padding: 3em 1.5em 1.5em;
}
.wppw-mgh .wppw-mgh-overlay .wppw-mgh-hero-title a,
.wppw-mgh .wppw-mgh-overlay .wppw-mgh-hero-dek { color: #fff; }
.wppw-mgh .wppw-mgh-kicker {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--wppw-mgh-kicker, #dc2626);
    margin-bottom: 0.5em;
}
.wppw-mgh .wppw-mgh-hero-title { margin: 0 0 0.5em; font-size: 1.5rem; line-height: 1.25; }
.wppw-mgh .wppw-mgh-hero-dek { margin: 0.5em 0 0; color: #475569; }
.wppw-mgh .wppw-mgh-overlay .wppw-mgh-hero-dek { color: rgba(255, 255, 255, 0.85); }
.wppw-mgh .wppw-mgh-side {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1em;
    background: transparent;
    align-items: start;
}
.wppw-mgh .wppw-mgh-side .wppw-grid-img-wrap { border-radius: 6px; }
.wppw-mgh .wppw-mgh-side-body { padding: 0; }
.wppw-mgh .wppw-mgh-side-title { margin: 0.25em 0; font-size: 1rem; line-height: 1.3; }
.wppw-mgh .wppw-mgh-rest-row {
    display: grid;
    grid-template-columns: repeat(var(--wppw-grid-cols-d), 1fr);
    gap: var(--wppw-grid-gap);
    margin-top: var(--wppw-grid-gap);
}
.wppw-mgh .wppw-mgh-rest { background: transparent; }

/* — Magazine Quad Tiles (mgq) — */
.wppw-mgq .wppw-mgq-list {
    display: grid;
    grid-template-columns: repeat(var(--wppw-grid-cols-d), 1fr);
    gap: var(--wppw-grid-gap);
}
.wppw-mgq .wppw-mgq-tile {
    position: relative;
    color: var(--wppw-mgq-text, #fff);
    overflow: hidden;
    border-radius: 8px;
    text-decoration: none;
    display: block;
}
.wppw-mgq .wppw-mgq-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.5em 1.25em 1.25em;
    color: inherit;
    background: var(--wppw-mgq-overlay, #000); /* solid fallback */
    background: linear-gradient(to top,
        color-mix(in srgb, var(--wppw-mgq-overlay, #000) calc(var(--wppw-mgq-overlay-op, 0.7) * 100%), transparent) 0%,
        transparent 100%);
}
.wppw-mgq .wppw-mgq-kicker {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--wppw-mgq-kicker, #fbbf24);
    margin-bottom: 0.4em;
}
.wppw-mgq .wppw-mgq-title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
}

/* — Magazine Featured Strip (mgf) — */
.wppw-mgf .wppw-mgf-hero-row {
    margin-bottom: var(--wppw-grid-gap);
}
.wppw-mgf .wppw-mgf-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wppw-grid-gap);
    background: var(--wppw-mgf-card-bg, #fff);
    color: var(--wppw-mgf-card-fg, #0f172a);
    border-radius: var(--wppw-mgf-card-r, 8px);
    overflow: hidden;
    align-items: center;
}
.wppw-mgf .wppw-mgf-hero-img { padding: 0; }
.wppw-mgf .wppw-mgf-hero-body { padding: 1.5em; }
.wppw-mgf .wppw-mgf-hero-title { margin: 0.25em 0 0.5em; font-size: 1.5rem; line-height: 1.25; }
.wppw-mgf .wppw-mgf-hero-dek { margin: 0.5em 0 0; color: #475569; }
.wppw-mgf .wppw-mgf-strip-row {
    display: grid;
    grid-template-columns: repeat(var(--wppw-mgf-strip-cols, 4), 1fr);
    gap: var(--wppw-grid-gap);
}
.wppw-mgf .wppw-mgf-strip-card {
    background: var(--wppw-mgf-card-bg, #fff);
    color: var(--wppw-mgf-card-fg, #0f172a);
    border-radius: var(--wppw-mgf-card-r, 8px);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.wppw-mgf .wppw-mgf-strip-body { padding: 1em; }
.wppw-mgf .wppw-mgf-strip-title { margin: 0.25em 0; font-size: 1rem; line-height: 1.3; }
.wppw-mgf .wppw-mgf-kicker {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--wppw-mgf-kicker, #0ea5e9);
}

/* — Gallery Uniform Square (ggu) — */
.wppw-ggu .wppw-ggu-list {
    display: grid;
    grid-template-columns: repeat(var(--wppw-grid-cols-d), 1fr);
    gap: var(--wppw-grid-gap);
}
.wppw-ggu .wppw-ggu-tile { background: transparent; border-radius: 4px; overflow: hidden; }

/* — Gallery Vertical Masonry (ggm) — */
.wppw-ggm .wppw-ggm-cols {
    column-count: var(--wppw-grid-cols-d);
    column-gap: var(--wppw-grid-gap);
}
.wppw-ggm .wppw-ggm-tile {
    display: block;
    break-inside: avoid;
    margin-bottom: var(--wppw-grid-gap);
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    background: transparent;
}

/* — Gallery Justified Rows (ggj) — */
.wppw-ggj .wppw-ggj-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wppw-grid-gap);
    align-items: stretch;
}
.wppw-ggj .wppw-ggj-tile {
    height: var(--wppw-ggj-rowh, 220px);
    overflow: hidden;
    background: #f1f5f9;
    border-radius: 4px;
    margin: 0;
    flex: 0 0 calc(var(--wppw-ggj-rowh, 220px) * 1.5); /* Initial estimate before JS runs */
}
.wppw-ggj .wppw-ggj-tile .wppw-grid-img-wrap,
.wppw-ggj .wppw-ggj-tile .wppw-grid-img-box { height: 100%; }
.wppw-ggj .wppw-ggj-tile .wppw-grid-img-box {
    padding-top: 0 !important;
    position: relative;
}
.wppw-ggj .wppw-ggj-tile .wppw-grid-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* — Blog Card (bgc) — */
.wppw-bgc .wppw-bgc-card {
    background: var(--wppw-bgc-card-bg, #fff);
    color: var(--wppw-bgc-card-fg, #0f172a);
    border: 1px solid var(--wppw-bgc-card-bd, #e2e8f0);
    border-radius: var(--wppw-bgc-card-r, 12px);
}
.wppw-bgc .wppw-bgc-body { padding: 1.25em; }
.wppw-bgc .wppw-grid-meta { color: var(--wppw-bgc-meta, #64748b); }
.wppw-bgc .wppw-grid-meta-cat { color: var(--wppw-bgc-meta, #64748b); }

/* — Blog Editorial (bge) — */
.wppw-bge .wppw-bge-list { display: block; }
.wppw-bge .wppw-bge-row {
    display: grid;
    grid-template-columns: var(--wppw-bge-img-pct, 33%) 1fr;
    gap: 2em;
    padding: 1.5em 0;
    background: transparent;
    align-items: start;
}
.wppw-bge.wppw-bge-img-right .wppw-bge-row {
    grid-template-columns: 1fr var(--wppw-bge-img-pct, 33%);
}
.wppw-bge.wppw-bge-img-right .wppw-bge-img-col { order: 2; }
.wppw-bge.wppw-bge-img-right .wppw-bge-body { order: 1; }
.wppw-bge.wppw-bge-divided .wppw-bge-row { border-bottom: 1px solid var(--wppw-bge-divider, #e2e8f0); }
.wppw-bge.wppw-bge-divided .wppw-bge-row:last-child { border-bottom: 0; }
.wppw-bge .wppw-bge-img-col .wppw-grid-img-wrap { border-radius: 4px; }
.wppw-bge .wppw-bge-body .wppw-grid-title { font-size: 1.5rem; }
.wppw-bge.wppw-bge-serif .wppw-bge-body .wppw-grid-title {
    font-family: Georgia, "Times New Roman", "Source Serif Pro", serif;
    font-weight: 700;
}

/* — Blog Featured Hero + Stack (bgf) — */
.wppw-bgf .wppw-bgf-hero-row { margin-bottom: var(--wppw-grid-gap); }
.wppw-bgf .wppw-bgf-hero {
    background: var(--wppw-bgf-card-bg, #fff);
    color: var(--wppw-bgf-card-fg, #0f172a);
    border-radius: var(--wppw-bgf-card-r, 12px);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    position: relative;
}
.wppw-bgf .wppw-bgf-hero-body { padding: 1.5em; }
.wppw-bgf .wppw-bgf-overlay .wppw-bgf-hero-body {
    position: absolute;
    inset: auto 0 0 0;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    padding: 4em 1.5em 1.5em;
}
.wppw-bgf .wppw-bgf-overlay .wppw-bgf-hero-title a { color: #fff; }
.wppw-bgf .wppw-bgf-overlay .wppw-bgf-hero-dek { color: rgba(255, 255, 255, 0.85); }
.wppw-bgf .wppw-bgf-hero-title { margin: 0.25em 0 0.5em; font-size: 1.75rem; line-height: 1.2; }
.wppw-bgf .wppw-bgf-hero-dek { margin: 0.5em 0 0; color: #475569; }
.wppw-bgf .wppw-bgf-stack-list {
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.wppw-bgf .wppw-bgf-stack-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1em;
    background: transparent;
    align-items: center;
    padding: 0.5em 0;
    border-bottom: 1px solid #e2e8f0;
}
.wppw-bgf .wppw-bgf-stack-row:last-child { border-bottom: 0; }
.wppw-bgf .wppw-bgf-stack-row .wppw-grid-img-wrap { border-radius: 4px; }
.wppw-bgf .wppw-bgf-stack-title {
    margin: 0 0 0.25em;
    font-size: 1rem;
    line-height: 1.3;
}
.wppw-bgf .wppw-bgf-stack-row .wppw-grid-meta { color: var(--wppw-bgf-meta, #64748b); margin: 0; }

/* ── 5. Responsive collapses ───────────────────────────────────────── */
@media (max-width: 900px) {
    .wppw-grid-list,
    .wppw-mgq .wppw-mgq-list,
    .wppw-mgh .wppw-mgh-rest-row,
    .wppw-ggu .wppw-ggu-list {
        grid-template-columns: repeat(var(--wppw-grid-cols-t), minmax(0, 1fr));
    }
    .wppw-pgm .wppw-pgm-list,
    .wppw-ggm .wppw-ggm-cols { column-count: var(--wppw-grid-cols-t); }
    .wppw-mgh .wppw-mgh-row { grid-template-columns: 1fr; }
    .wppw-mgf .wppw-mgf-strip-row { grid-template-columns: repeat(2, 1fr); }
    .wppw-mgf .wppw-mgf-hero { grid-template-columns: 1fr; }
    .wppw-pgr { --wppw-pgr-visible: 2; }
    .wppw-bge .wppw-bge-row,
    .wppw-bge.wppw-bge-img-right .wppw-bge-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .wppw-grid-list,
    .wppw-mgq .wppw-mgq-list,
    .wppw-mgh .wppw-mgh-rest-row,
    .wppw-ggu .wppw-ggu-list {
        grid-template-columns: repeat(var(--wppw-grid-cols-m), minmax(0, 1fr));
        gap: 1em;
    }
    .wppw-pgm .wppw-pgm-list,
    .wppw-ggm .wppw-ggm-cols { column-count: var(--wppw-grid-cols-m); }
    .wppw-mgf .wppw-mgf-strip-row { grid-template-columns: 1fr; }
    .wppw-mgh .wppw-mgh-side { grid-template-columns: 1fr; gap: 0.5em; }
    .wppw-mgh .wppw-mgh-side-body { padding-top: 0.5em; }
    .wppw-bge .wppw-bge-body .wppw-grid-title { font-size: 1.2rem; }
    .wppw-bgf .wppw-bgf-stack-row { grid-template-columns: 80px 1fr; gap: 0.75em; }
    .wppw-bgf .wppw-bgf-hero-title { font-size: 1.3rem; }
    .wppw-pgr { --wppw-pgr-visible: 1; }
    .wppw-grid-lightbox-prev,
    .wppw-grid-lightbox-next { width: 44px; height: 44px; font-size: 1.5rem; }
}

/* ════════════════════════════════════════════════════════════════════
 * Hero Sliders — styles for all 4 designs
 *
 * Layered:
 *   1. Base wrapper + universal slide / bg / overlay / content
 *   2. Transition modes (fade vs slide horizontal translate)
 *   3. Ken Burns animation
 *   4. Per-design layouts (hsc, hsp, hsb, hss)
 *   5. Navigation controls (arrows, dots, thumbnails, progress)
 *   6. Empty state
 *   7. Responsive collapses (panel side-stacking on mobile, etc.)
 * ════════════════════════════════════════════════════════════════════ */

/* ── 1. Base wrapper + universal slide elements ───────────────────── */
.wppw-hero-slider {
    --wppw-hs-height: 100vh;
    --wppw-hs-aspect: 16 / 9;
    --wppw-hs-tdur: 600ms;
    --wppw-hs-eyebrow: #ffffff;
    --wppw-hs-headline: #ffffff;
    --wppw-hs-subhead: #f1f5f9;
    --wppw-hs-fallback: #1e293b;
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    color: var(--wppw-hs-headline);
}
.wppw-hero-slider *,
.wppw-hero-slider *::before,
.wppw-hero-slider *::after { box-sizing: border-box; }

/* Height modes */
.wppw-hs-h-viewport { height: var(--wppw-hs-height); }
.wppw-hs-h-pixels   { height: var(--wppw-hs-height); }
.wppw-hs-h-aspect   { aspect-ratio: var(--wppw-hs-aspect); height: auto; }

.wppw-hs-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wppw-hs-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.wppw-hs-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--wppw-hs-fallback);
}
.wppw-hs-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wppw-hs-bg-empty {
    background: linear-gradient(135deg, #475569, #1e293b);
}

.wppw-hs-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.wppw-hs-content {
    position: relative;
    z-index: 2;
    padding: 2em 1.5em;
    width: 100%;
    max-width: var(--wppw-hs-content-max, 720px);
    color: inherit;
}
.wppw-hs-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--wppw-hs-eyebrow);
    margin: 0 0 0.75em;
    border: 1px solid currentColor;
    padding: 0.3em 0.9em;
    border-radius: 999px;
    opacity: 0.9;
}
.wppw-hs-headline {
    margin: 0 0 0.5em;
    font-size: clamp(1.75rem, 4.2vw, 3.5rem);
    line-height: 1.1;
    font-weight: 500;
    color: var(--wppw-hs-headline);
}
.wppw-hs-subhead {
    margin: 0 0 1.5em;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.5;
    color: var(--wppw-hs-subhead);
    max-width: 36em;
}
.wppw-hs-ctas {
    display: flex;
    gap: 0.75em;
    flex-wrap: wrap;
}
.wppw-hs-cta {
    display: inline-block;
    padding: 0.85em 1.75em;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.15s, background 0.2s, border-color 0.2s, color 0.2s;
    cursor: pointer;
    border: 2px solid transparent;
}
.wppw-hs-cta-primary {
    background: #ffffff;
    color: #0f172a;
    border-color: #ffffff;
}
.wppw-hs-cta-primary:hover { transform: translateY(-1px); background: #f1f5f9; color: #0f172a; }
.wppw-hs-cta-secondary {
    background: transparent;
    color: var(--wppw-hs-headline);
    border-color: currentColor;
}
.wppw-hs-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

/* ── 2. Transitions (fade vs slide) ───────────────────────────────── */
/* Fade — both old + new are stacked; only .is-active is opacity:1 */
.wppw-hs-trans-fade .wppw-hs-slide {
    opacity: 0;
    transition: opacity var(--wppw-hs-tdur) ease-in-out;
    pointer-events: none;
}
.wppw-hs-trans-fade .wppw-hs-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* Slide — translate the inactive slides offscreen; active slide at 0 */
.wppw-hs-trans-slide .wppw-hs-slide {
    transform: translateX(100%);
    opacity: 0;
    transition: transform var(--wppw-hs-tdur) ease-in-out, opacity var(--wppw-hs-tdur) ease-in-out;
    pointer-events: none;
}
.wppw-hs-trans-slide .wppw-hs-slide.is-active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* ── 3. Ken Burns animation ───────────────────────────────────────── */
@keyframes wppw-hs-kb-zoom {
    0%   { transform: scale(1.0)  translate(0, 0); }
    100% { transform: scale(1.08) translate(-1%, -1%); }
}
.wppw-hs-kb .wppw-hs-slide.is-active .wppw-hs-bg img {
    animation: wppw-hs-kb-zoom 12s ease-out forwards;
    transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
    .wppw-hs-kb .wppw-hs-slide.is-active .wppw-hs-bg img {
        animation: none;
    }
}

/* ── 4. Per-design layouts ────────────────────────────────────────── */

/* Design 1 — Centered Overlay (hsc) */
.wppw-hsc .wppw-hs-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}
.wppw-hsc.wppw-hs-align-left   .wppw-hs-slide { justify-content: flex-start; }
.wppw-hsc.wppw-hs-align-left   .wppw-hs-content { text-align: left;   padding-left: clamp(1.5em, 6vw, 5em); }
.wppw-hsc.wppw-hs-align-center .wppw-hs-content { text-align: center; }
.wppw-hsc.wppw-hs-align-center .wppw-hs-content .wppw-hs-ctas { justify-content: center; }
.wppw-hsc.wppw-hs-align-right  .wppw-hs-slide { justify-content: flex-end; }
.wppw-hsc.wppw-hs-align-right  .wppw-hs-content { text-align: right;  padding-right: clamp(1.5em, 6vw, 5em); }
.wppw-hsc.wppw-hs-align-right  .wppw-hs-content .wppw-hs-ctas { justify-content: flex-end; }

/* Design 2 — Side Panel (hsp). Panel pinned to one side; image on the
   other. Z-order: bg < overlay < panel < content. */
.wppw-hsp {
    --wppw-hsp-panel-pct: 45%;
    --wppw-hsp-panel-bg: #000000;
    --wppw-hsp-panel-op: 0.62;
}
.wppw-hsp .wppw-hs-slide {
    display: flex;
    align-items: stretch;
}
.wppw-hsp.wppw-hsp-side-left  .wppw-hs-slide { justify-content: flex-start; }
.wppw-hsp.wppw-hsp-side-right .wppw-hs-slide { justify-content: flex-end; }
.wppw-hsp .wppw-hsp-panel {
    position: relative;
    z-index: 3;
    width: var(--wppw-hsp-panel-pct);
    height: 100%;
    background: var(--wppw-hsp-panel-bg);
    opacity: 1; /* panel itself is fully opaque on its own; inner overlay handled via opacity composite */
    display: flex;
    align-items: center;
    /* Use box-shadow with the panel color + opacity to create the
     * translucent fill. Avoids the issue of opacity affecting children. */
}
.wppw-hsp .wppw-hsp-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--wppw-hsp-panel-bg);
    opacity: var(--wppw-hsp-panel-op);
    z-index: -1;
}
.wppw-hsp .wppw-hsp-panel .wppw-hs-content {
    padding: 3em 2.5em;
    max-width: none;
    text-align: left;
}

/* Design 3 — Bottom Caption (hsb). Strip pinned to bottom of slide. */
.wppw-hsb {
    --wppw-hsb-strip-bg: #000000;
    --wppw-hsb-strip-op: 0.62;
    --wppw-hsb-strip-pct: 30%;
}
.wppw-hsb .wppw-hsb-strip {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    height: var(--wppw-hsb-strip-pct);
    min-height: 200px;
    display: flex;
    align-items: center;
}
.wppw-hsb .wppw-hsb-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--wppw-hsb-strip-bg);
    opacity: var(--wppw-hsb-strip-op);
    z-index: -1;
}
.wppw-hsb .wppw-hsb-strip .wppw-hs-content {
    padding: 1.5em clamp(1.5em, 6vw, 5em);
    max-width: 1200px;
    text-align: left;
}
.wppw-hsb.wppw-hsb-align-center .wppw-hsb-strip .wppw-hs-content { text-align: center; margin-left: auto; margin-right: auto; }
.wppw-hsb.wppw-hsb-align-center .wppw-hsb-strip .wppw-hs-ctas { justify-content: center; }
/* Bottom caption tightens up subhead margin so the strip stays compact */
.wppw-hsb .wppw-hsb-strip .wppw-hs-subhead { margin-bottom: 1em; }

/* Design 4 — Split Screen (hss). Two halves side by side. */
.wppw-hss {
    --wppw-hss-img-pct: 50%;
    --wppw-hss-panel-bg: #0f172a;
}
.wppw-hss .wppw-hs-slide {
    display: flex;
    align-items: stretch;
}
.wppw-hss.wppw-hss-img-right .wppw-hs-slide { flex-direction: row-reverse; }
.wppw-hss .wppw-hss-img-half {
    position: relative;
    width: var(--wppw-hss-img-pct);
    height: 100%;
    overflow: hidden;
}
.wppw-hss .wppw-hss-content-half {
    position: relative;
    width: calc(100% - var(--wppw-hss-img-pct));
    height: 100%;
    background: var(--wppw-hss-panel-bg);
    display: flex;
    align-items: center;
    z-index: 2;
}
.wppw-hss .wppw-hss-content-half .wppw-hs-content {
    padding: 3em clamp(1.5em, 4vw, 3.5em);
    max-width: none;
    text-align: left;
}

/* ── 5. Navigation controls ───────────────────────────────────────── */
.wppw-hs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    z-index: 4;
    transition: background 0.2s, transform 0.15s;
}
.wppw-hs-arrow:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: translateY(-50%) scale(1.05);
}
.wppw-hs-prev { left: 1.5em; }
.wppw-hs-next { right: 1.5em; }

.wppw-hs-dots {
    position: absolute;
    bottom: 1.25em;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5em;
    z-index: 4;
}
.wppw-hs-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.wppw-hs-dot:hover { border-color: #ffffff; }
.wppw-hs-dot.is-active { background: #ffffff; border-color: #ffffff; transform: scale(1.2); }

/* Bottom Caption design — bump dots up so they don't sit on the strip */
.wppw-hsb .wppw-hs-dots {
    bottom: calc(var(--wppw-hsb-strip-pct, 30%) + 1.25em);
}

.wppw-hs-thumbs {
    position: absolute;
    bottom: 1.25em;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5em;
    z-index: 4;
    max-width: 90%;
    overflow-x: auto;
    padding: 0.25em;
}
.wppw-hs-thumb {
    width: 80px;
    height: 50px;
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: border-color 0.2s, transform 0.15s, opacity 0.2s;
    opacity: 0.6;
}
.wppw-hs-thumb:hover { border-color: #ffffff; opacity: 0.85; }
.wppw-hs-thumb.is-active { border-color: #ffffff; opacity: 1; transform: scale(1.05); }

/* When BOTH dots and thumbs are on, raise dots higher so they don't collide */
.wppw-hero-slider:has(.wppw-hs-thumbs) .wppw-hs-dots {
    bottom: 5em;
}
.wppw-hsb:has(.wppw-hs-thumbs) .wppw-hs-dots {
    bottom: calc(var(--wppw-hsb-strip-pct, 30%) + 5em);
}

.wppw-hs-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 5;
}
.wppw-hs-progress-bar {
    height: 100%;
    background: #ffffff;
    width: 0%;
    transition: width 0s linear; /* default — JS overrides per slide */
}

/* ── 6. Empty state ───────────────────────────────────────────────── */
.wppw-hs-empty .wppw-hs-placeholder {
    padding: 3em 2em;
    text-align: center;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    font-size: 0.95rem;
    margin: 1em 0;
}

/* ── 7. Responsive collapses ──────────────────────────────────────── */
@media (max-width: 900px) {
    /* Side Panel — collapse panel to full width on mobile */
    .wppw-hsp .wppw-hsp-panel { width: 100%; }
    .wppw-hsp .wppw-hsp-panel .wppw-hs-content { padding: 2em 1.5em; }
    /* Split Screen — stack into vertical halves on mobile */
    .wppw-hss .wppw-hs-slide { flex-direction: column; }
    .wppw-hss.wppw-hss-img-right .wppw-hs-slide { flex-direction: column; }
    .wppw-hss .wppw-hss-img-half { width: 100%; height: 50%; }
    .wppw-hss .wppw-hss-content-half { width: 100%; height: 50%; }
    /* Smaller arrows on mobile */
    .wppw-hs-arrow { width: 40px; height: 40px; font-size: 1.3rem; }
    .wppw-hs-prev  { left: 0.75em; }
    .wppw-hs-next  { right: 0.75em; }
    /* Smaller thumbs on mobile */
    .wppw-hs-thumb { width: 60px; height: 38px; }
}
@media (max-width: 600px) {
    .wppw-hs-content { padding: 1.5em 1em; }
    .wppw-hs-eyebrow { font-size: 0.7rem; padding: 0.25em 0.7em; }
    .wppw-hs-headline { font-size: 1.5rem; }
    .wppw-hs-subhead { font-size: 0.95rem; }
    .wppw-hs-cta { padding: 0.7em 1.4em; font-size: 0.85rem; }
    .wppw-hs-arrow { width: 36px; height: 36px; }
    /* Bottom Caption — give the strip a bit more breathing room on mobile
       and stack CTAs */
    .wppw-hsb .wppw-hsb-strip { min-height: 160px; }
    .wppw-hsb .wppw-hsb-strip .wppw-hs-content { padding: 1em 1em; }
}

/* ════════════════════════════════════════════════════════════════════════
 * FLOATING CONTACT BUTTON
 *
 * Fixed-position bubble pinned to a configurable viewport corner. Renders
 * as a single <a> wrapped in a .wppw-fcb container. Channel selection
 * drives default brand color via inline --wppw-fcb-bg / --wppw-fcb-icon
 * CSS variables on the wrapper (set by the renderer); shape/size are
 * variant classes the wrapper carries.
 *
 * Class layering (set by renderer):
 *   .wppw-fcb                       — base
 *   .wppw-fcb-{call|sms|email|...}  — channel hook (for future per-channel CSS overrides)
 *   .wppw-fcb-shape-{round|square|pill}
 *   .wppw-fcb-size-{small|medium|large}
 *   .wppw-fcb-pos-{bottom-right|bottom-left|top-right|top-left}
 *   .wppw-fcb-device-{both|desktop|mobile}
 *   .wppw-fcb-pending               — hidden until JS reveals (scroll/delay triggers)
 *   .wppw-fcb-pulse                 — pulse-ring animation enabled
 *   .wppw-fcb-dismissed             — JS-applied after user clicks the X
 * ════════════════════════════════════════════════════════════════════════ */

.wppw-fcb {
    /* Default values for the CSS custom properties. The renderer
       overrides via inline style="--wppw-fcb-bg:...; ..."; these defaults
       only matter if the inline style is missing for some reason. */
    --wppw-fcb-bg: #0f172a;
    --wppw-fcb-icon: #ffffff;
    --wppw-fcb-pulse: #3b82f6;
    --wppw-fcb-offset-x: 24px;
    --wppw-fcb-offset-y: 24px;

    /* Per-size sizing (medium default; small/large override below). */
    --wppw-fcb-size: 56px;
    --wppw-fcb-icon-size: 24px;
    --wppw-fcb-label-size: 14px;
    --wppw-fcb-pill-pad-x: 18px;
    --wppw-fcb-pill-pad-y: 12px;
    --wppw-fcb-radius: 999px;

    position: fixed;
    z-index: 9998; /* below modals (10000+) and lightboxes, above page chrome */
    pointer-events: none; /* container itself doesn't capture; the bubble does */
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The clickable bubble — re-enables pointer events. Container stays
   pointer-events:none so the bubble's bounding box, plus the optional
   dismiss X, are the only clickable areas. */
.wppw-fcb-bubble {
    pointer-events: auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wppw-fcb-size);
    height: var(--wppw-fcb-size);
    background: var(--wppw-fcb-bg);
    color: var(--wppw-fcb-icon);
    border-radius: var(--wppw-fcb-radius);
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
    transition: transform 200ms ease, box-shadow 200ms ease;
    border: 0;
    outline: none;
    /* Prevent the anchor from inheriting page text styling. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1;
}
.wppw-fcb-bubble:hover,
.wppw-fcb-bubble:focus-visible {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 28px rgba(0,0,0,0.22), 0 4px 10px rgba(0,0,0,0.12);
    color: var(--wppw-fcb-icon); /* keep icon color stable on hover — anchors usually invert */
}
.wppw-fcb-bubble:focus-visible {
    /* Visible focus ring. Drawn outside the box-shadow so it's never
       lost behind the floating shadow on dark backgrounds. */
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

.wppw-fcb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wppw-fcb-icon-size);
    height: var(--wppw-fcb-icon-size);
    color: var(--wppw-fcb-icon);
}
.wppw-fcb-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    color: inherit;
}
.wppw-fcb-icon .dashicons {
    font-size: var(--wppw-fcb-icon-size);
    width: var(--wppw-fcb-icon-size);
    height: var(--wppw-fcb-icon-size);
    line-height: var(--wppw-fcb-icon-size);
    color: inherit;
}

/* Pill-shape: visible label sits inline with the icon. Round/square
   shapes hide the label entirely (the label only exists when shape=pill,
   the renderer doesn't emit .wppw-fcb-label-text otherwise). */
.wppw-fcb-label-text {
    color: var(--wppw-fcb-icon);
    font-size: var(--wppw-fcb-label-size);
    font-weight: 600;
    white-space: nowrap;
    margin-left: 6px;
}

/* ── Shape variants ─────────────────────────────────────────────────── */
.wppw-fcb-shape-round  .wppw-fcb-bubble { border-radius: 999px; }
.wppw-fcb-shape-square .wppw-fcb-bubble { border-radius: 12px;  }
.wppw-fcb-shape-pill   .wppw-fcb-bubble {
    border-radius: 999px;
    width: auto;             /* pill grows with label */
    height: auto;
    padding: var(--wppw-fcb-pill-pad-y) var(--wppw-fcb-pill-pad-x);
    min-height: var(--wppw-fcb-size);
}

/* ── Size variants ──────────────────────────────────────────────────── */
.wppw-fcb-size-small {
    --wppw-fcb-size: 44px;
    --wppw-fcb-icon-size: 18px;
    --wppw-fcb-label-size: 13px;
    --wppw-fcb-pill-pad-x: 14px;
    --wppw-fcb-pill-pad-y: 10px;
}
.wppw-fcb-size-medium {
    --wppw-fcb-size: 56px;
    --wppw-fcb-icon-size: 24px;
    --wppw-fcb-label-size: 14px;
    --wppw-fcb-pill-pad-x: 18px;
    --wppw-fcb-pill-pad-y: 12px;
}
.wppw-fcb-size-large {
    --wppw-fcb-size: 72px;
    --wppw-fcb-icon-size: 30px;
    --wppw-fcb-label-size: 16px;
    --wppw-fcb-pill-pad-x: 22px;
    --wppw-fcb-pill-pad-y: 16px;
}

/* ── Corner positions ───────────────────────────────────────────────── */
.wppw-fcb-pos-bottom-right { right:  var(--wppw-fcb-offset-x); bottom: var(--wppw-fcb-offset-y); }
.wppw-fcb-pos-bottom-left  { left:   var(--wppw-fcb-offset-x); bottom: var(--wppw-fcb-offset-y); }
.wppw-fcb-pos-top-right    { right:  var(--wppw-fcb-offset-x); top:    var(--wppw-fcb-offset-y); }
.wppw-fcb-pos-top-left     { left:   var(--wppw-fcb-offset-x); top:    var(--wppw-fcb-offset-y); }

/* When pinned to the LEFT corners, the dismiss X should appear to the
   RIGHT of the bubble (so it doesn't get pushed off-screen by the edge),
   and tooltips should anchor to the right. Reverse the flex direction
   for left-positioned bubbles so the bubble itself stays at the edge. */
.wppw-fcb-pos-bottom-left,
.wppw-fcb-pos-top-left {
    flex-direction: row-reverse;
}

/* ── Tooltip (round/square shapes — uses the title attribute, but we
   layer a styled bubble on top of it for visual polish). ─────────────── */
.wppw-fcb-shape-round .wppw-fcb-bubble::before,
.wppw-fcb-shape-square .wppw-fcb-bubble::before {
    content: attr(title);
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    background: #0f172a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    /* Default: tooltip to the LEFT of the bubble (right-positioned bubbles) */
    right: calc(100% + 10px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.wppw-fcb-pos-bottom-left .wppw-fcb-bubble::before,
.wppw-fcb-pos-top-left    .wppw-fcb-bubble::before {
    /* Tooltip to the RIGHT of the bubble for left-positioned variants */
    right: auto;
    left: calc(100% + 10px);
}
.wppw-fcb-shape-round .wppw-fcb-bubble:hover::before,
.wppw-fcb-shape-round .wppw-fcb-bubble:focus-visible::before,
.wppw-fcb-shape-square .wppw-fcb-bubble:hover::before,
.wppw-fcb-shape-square .wppw-fcb-bubble:focus-visible::before {
    opacity: 1;
}
/* Suppress the OS-native tooltip while our styled tooltip is visible —
   the title attr stays present for screen readers, but the browser's
   delayed yellow tooltip would double up. We can't prevent the native
   tooltip via CSS alone, so this is intentionally a soft solution: our
   styled tooltip appears immediately on hover, the OS one comes later. */

/* ── Dismiss X ──────────────────────────────────────────────────────── */
.wppw-fcb-dismiss {
    pointer-events: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.85);
    color: #ffffff;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.20);
    /* Slight overlap onto the bubble so it reads as "closing the bubble" */
    margin: 0 -4px 0 0;
    align-self: flex-start;
    transition: background 150ms ease, transform 150ms ease;
}
.wppw-fcb-pos-bottom-left .wppw-fcb-dismiss,
.wppw-fcb-pos-top-left    .wppw-fcb-dismiss {
    margin: 0 0 0 -4px;
}
.wppw-fcb-dismiss:hover { background: rgba(15, 23, 42, 1.0); transform: scale(1.1); }
.wppw-fcb-dismiss:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* ── Pulse animation (only when .wppw-fcb-pulse is on the wrapper) ──── */
.wppw-fcb-pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--wppw-fcb-pulse);
    z-index: -1;
    animation: wppw-fcb-pulse 2.2s ease-out infinite;
    pointer-events: none;
}
.wppw-fcb-pulse .wppw-fcb-bubble { isolation: isolate; }
@keyframes wppw-fcb-pulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  { transform: scale(1.6); opacity: 0;    }
    100% { transform: scale(1.6); opacity: 0;    }
}
@media (prefers-reduced-motion: reduce) {
    .wppw-fcb-bubble { transition: none; }
    .wppw-fcb-pulse-ring { animation: none; opacity: 0; }
}

/* ── Trigger states: pending = hidden until JS reveals ──────────────── */
.wppw-fcb-pending { display: none !important; }
.wppw-fcb-dismissed { display: none !important; }

/* ── Device visibility ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .wppw-fcb-device-desktop { display: none !important; }
}
@media (min-width: 601px) {
    .wppw-fcb-device-mobile  { display: none !important; }
}

/* ── Empty state placeholder (when destination not configured) ──────── */
.wppw-fcb.wppw-fcb-empty {
    position: static;
    display: block;
    padding: 0;
}
.wppw-fcb-empty .wppw-fcb-placeholder {
    background: #fff7ed;
    border: 1px dashed #f59e0b;
    color: #92400e;
    padding: 14px 18px;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

/* ── Editor canvas: when rendered inside the Lyra builder iframe, the
   block is selectable. Position:fixed inside the iframe behaves like
   inside the live page, which is what we want — but we ensure pointer
   events on the container so the block can be clicked to select. ──── */
#wppw-canvas-content .wppw-fcb {
    pointer-events: auto;
}

/* ════════════════════════════════════════════════════════════════════
 * Customer Chat — 5 block variants (v1.86.00)
 * Chrome layered around the shared .lyra-bt-conversation shell. The core
 * thread/bubble/form styles above are reused unchanged; these rules add
 * the contact field, team-bio header, quick-option chips, and the
 * compact-sidebar sizing tweaks.
 * ════════════════════════════════════════════════════════════════════ */

/* ── #2 Lead Capture: contact field (mirrors the name-row pattern) ─── */
.lyra-bt-conversation .lyra-bt-conv-contact-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}
.lyra-bt-conversation .lyra-bt-conv-contact-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--lyra-bt-conv-muted);
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}
.lyra-bt-conversation .lyra-bt-conv-contact-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--lyra-bt-conv-border);
    border-radius: 12px;
    padding: 9px 16px;
    font: inherit;
    color: #0f172a;
    background: #f8fafc;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.lyra-bt-conversation .lyra-bt-conv-contact-input:focus {
    outline: none;
    border-color: var(--lyra-bt-conv-admin-bg);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lyra-bt-conv-admin-bg) 18%, transparent);
}

/* ── #3 Team Bio Header ─────────────────────────────────────────────── */
.lyra-bt-conversation .lyra-bt-conv-bio {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--lyra-bt-conv-border);
}
.lyra-bt-conversation .lyra-bt-conv-bio-avatars {
    display: inline-flex;
    padding-left: 10px;
    flex: none;
}
.lyra-bt-conversation .lyra-bt-conv-bio-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    margin-left: -10px;
    background: #e2e8f0;
    box-shadow: 0 1px 2px rgba(15,23,42,.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.lyra-bt-conversation .lyra-bt-conv-bio-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lyra-bt-conversation .lyra-bt-conv-bio-initial {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #475569;
}
.lyra-bt-conversation .lyra-bt-conv-bio-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.lyra-bt-conversation .lyra-bt-conv-bio-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #16a34a;
}
.lyra-bt-conversation .lyra-bt-conv-bio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 0 rgba(22,163,74,.5);
    animation: lyra-bt-conv-bio-pulse 2s infinite;
}
@keyframes lyra-bt-conv-bio-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
    70%  { box-shadow: 0 0 0 6px rgba(22,163,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
@media (prefers-reduced-motion: reduce) {
    .lyra-bt-conversation .lyra-bt-conv-bio-dot { animation: none; }
}
.lyra-bt-conversation .lyra-bt-conv-bio-availability {
    font-size: 0.8125rem;
    color: var(--lyra-bt-conv-muted);
}

/* ── #4 Quick-Option Chips ──────────────────────────────────────────── */
.lyra-bt-conversation .lyra-bt-conv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px 0;
}
.lyra-bt-conversation .lyra-bt-conv-chip {
    appearance: none;
    border: 1px solid var(--lyra-bt-conv-border);
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.lyra-bt-conversation .lyra-bt-conv-chip:hover,
.lyra-bt-conversation .lyra-bt-conv-chip:focus-visible {
    outline: none;
    border-color: var(--lyra-bt-conv-admin-bg);
    color: var(--lyra-bt-conv-admin-bg);
    background: color-mix(in srgb, var(--lyra-bt-conv-admin-bg) 8%, #fff);
}

/* ── #5 Compact Sidebar: narrow, tighter utility scale ──────────────── */
.lyra-bt-conversation.lyra-bt-conv--compact {
    max-width: 360px;
}
.lyra-bt-conversation.lyra-bt-conv--compact .lyra-bt-conv-header {
    padding: 12px 14px;
}
.lyra-bt-conversation.lyra-bt-conv--compact .lyra-bt-conv-heading {
    font-size: 1rem;
}
.lyra-bt-conversation.lyra-bt-conv--compact .lyra-bt-conv-intro {
    font-size: 0.8125rem;
}
.lyra-bt-conversation.lyra-bt-conv--compact .lyra-bt-conv-bio {
    padding: 10px 12px;
    gap: 10px;
}
.lyra-bt-conversation.lyra-bt-conv--compact .lyra-bt-conv-bio-avatar {
    width: 26px;
    height: 26px;
}
.lyra-bt-conversation.lyra-bt-conv--compact .lyra-bt-conv-form {
    padding: 10px 12px 12px;
}