/**
 * Support hub and help centre.
 *
 * Two stylesheets in one file. The article and category pages below take every
 * colour and typeface from the theme tokens in base.css. The landing page
 * above them is scoped under `.bpr` and carries its own token set, because it
 * is the one page a stranger meets before they know what Baipar is and it was
 * designed as a piece rather than assembled from the shared parts — but those
 * tokens still resolve to the theme's own brand values, with the design's
 * literals only as the fallback, so the two halves cannot drift apart.
 *
 * Written with logical properties wherever the content flows — padding-inline,
 * margin-block — because the assistant answers in whatever language it is
 * asked in, and a help centre that cannot lay out right-to-left would be the
 * first thing to break.
 *
 * @since 1.18.0
 */

/* ═══ landing page ═══════════════════════════════════════════════════════
   Scoped under .bpr and prefixed class by class. The scope keeps this off
   the rest of the site; the prefixes keep the rest of the site off this —
   a page-builder kit styling a bare .btn or .search from the outside is
   how the field ended up wrapped under its own button once already.
   ════════════════════════════════════════════════════════════════════════ */

.bpr {
    /* Brand first, the design's own literals only as the fallback, so the
       block cannot drift away from the theme when the palette moves. */
    --bpr-red-400: #FF5A5F;
    --bpr-red-500: var(--baipar-primary, #EE1C25);
    --bpr-red-600: #D2121A;
    --bpr-navy-900: var(--baipar-secondary, #0D1930);
    --bpr-ink: var(--baipar-ink, #101C33);
    --bpr-muted: var(--baipar-muted, #6B7A93);
    --bpr-line: var(--baipar-line, #E6EBF2);
    --bpr-bg: var(--baipar-surface, #F4F7FB);
    --bpr-surface: #FFFFFF;

    --bpr-grad-red: linear-gradient(135deg, #FF4A4F 0%, #E01119 100%);
    --bpr-grad-navy: linear-gradient(160deg, #16294F 0%, #0C1730 100%);

    /* The two glows in the animated backdrops. The warm one follows the
       accent so the whole page stays of a piece when the brand colour moves;
       the cool one is its own thing, and is the reason there are two. */
    --bpr-glow-1: var(--bpr-red-500);
    --bpr-glow-2: #2F6BFF;
    --bpr-glow-3: #FF7A45;

    --bpr-radius-s: 12px;
    --bpr-radius: 18px;
    --bpr-radius-l: 26px;
    --bpr-shadow-s: 0 1px 2px rgba(13, 25, 48, .05), 0 4px 14px rgba(13, 25, 48, .05);
    --bpr-shadow-m: 0 2px 6px rgba(13, 25, 48, .05), 0 18px 44px rgba(13, 25, 48, .09);
    --bpr-shadow-red: 0 14px 30px -12px rgba(224, 17, 25, .6);
    --bpr-maxw: 1140px;

    /* Outfit carries no Arabic, so an Arabic or Persian run falls straight
       through to the theme's own body stack. That is the fallback working,
       not a bug — do not "fix" it by dropping the theme family. */
    --bpr-font: "Outfit", var(--baipar-font-body, "DM Sans"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    position: relative;
    /* The block, not the hero, is the stacking context: the search results
       have to escape the hero and land on top of the topic cards, and a
       context on the hero would trap them underneath. */
    isolation: isolate;
    overflow: hidden;
    overflow-x: hidden;
    margin: 0;
    color: var(--bpr-ink);
    font-family: var(--bpr-font);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

/* Only the whole page paints a ground and reserves the closing space. A
   single section used on its own in a builder sits on whatever the container
   behind it is, which is the entire point of having it as a widget. */
.bpr-page {
    padding-bottom: 78px;
    background: var(--bpr-bg);
}

.bpr *,
.bpr *::before,
.bpr *::after { box-sizing: border-box; }

.bpr img,
.bpr svg { display: block; max-width: 100%; }

.bpr a { color: inherit; text-decoration: none; }

.bpr h1,
.bpr h2,
.bpr h3 { margin: 0; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }

.bpr p { margin: 0; }
.bpr button { font-family: inherit; }
.bpr ::selection { background: #FFD9DB; color: var(--bpr-ink); }

/* The hero wants the full width of the page, and the theme's page template
   both boxes its main column and prints its own <h1> above the content. Both
   are undone here rather than in the theme, so the block carries its own
   layout wherever it is dropped. */
main:has(> .bpr-page) {
    width: 100%;
    max-width: none;
    padding-block: 0;
}

main:has(> .bpr-page) > h1 { display: none; }

.bpr .bpr-wrap {
    width: 100%;
    max-width: var(--bpr-maxw);
    margin-inline: auto;
    padding-inline: 24px;
}

/* An arrow means "onward", which is leftward in a right-to-left page. */
.bpr [dir="rtl"] .bpr-arrow,
[dir="rtl"] .bpr .bpr-arrow { transform: scaleX(-1); }

.bpr .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── the recolourable drawings ───────────────────────────────────────── */

/* Every hand-drawn SVG paints in currentColor from a named group, so each
   piece of a drawing is one `color` away from being restyled — which is how
   the Elementor controls reach inside them without a second copy of the
   markup per colour scheme. The defaults here are the design as drawn. */

/* The gradient stops, which is the only place the big glows can be coloured
   from — see the note beside the <defs> in parts/hero.php. */
.bpr .bpr-glow-a { stop-color: var(--bpr-glow-1); }
.bpr .bpr-glow-b { stop-color: var(--bpr-glow-2); }
.bpr .bpr-glow-c { stop-color: var(--bpr-glow-3); }

.bpr .bpr-hero-bg__dots      { color: #FFFFFF; }
.bpr .bpr-hero-bg__stars     { color: #FFFFFF; }
.bpr .bpr-hero-bg__star-warm { color: var(--bpr-red-400); }
.bpr .bpr-hero-bg__star-cool { color: var(--bpr-glow-2); }
.bpr .bpr-hero-bg__ring1     { color: var(--bpr-glow-1); }
.bpr .bpr-hero-bg__ring2     { color: #FFFFFF; }

.bpr .bpr-bubble             { color: #FFFFFF; }
.bpr .bpr-bubble__accent     { color: var(--bpr-red-400); }

/* The curve is the next section showing through, so it defaults to the page
   ground rather than to a colour of its own. */
.bpr .bpr-hero-curve         { color: var(--bpr-bg); }

.bpr .bpr-stuck-bg__dots     { color: #FFFFFF; }

.bpr .bpr-art-ink            { color: #FFFFFF; }
.bpr .bpr-art-line           { color: #FFFFFF; }
.bpr .bpr-art-accent         { color: var(--bpr-red-400); }
.bpr .bpr-art-grad-from      { stop-color: #FF4A4F; }
.bpr .bpr-art-grad-to        { stop-color: var(--bpr-red-600); }

.bpr .bpr-stuck-art img { margin-inline: auto; }

/* ── buttons ─────────────────────────────────────────────────────────── */

.bpr .bpr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
}

.bpr .bpr-btn-red {
    background: var(--bpr-grad-red);
    color: #fff;
    box-shadow: var(--bpr-shadow-red);
}

.bpr .bpr-btn-red:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -14px rgba(224, 17, 25, .7);
}

.bpr .bpr-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ── hero ────────────────────────────────────────────────────────────── */

/* background-image, not the `background` shorthand. The shorthand puts the
   gradient in background-image and resets background-color, so a flat colour
   set from the builder would paint behind the gradient and never be seen. */
.bpr .bpr-hero {
    position: relative;
    padding: 44px 0 190px;
    background-color: var(--bpr-navy-900, #0D1930);
    background-image: var(--bpr-grad-navy);
    color: #fff;
}

/* z-index: auto deliberately — the content has to stay in the block's own
   stacking context so the search dropdown inside it can outrank the cards. */
.bpr .bpr-hero > .bpr-wrap { position: relative; }

.bpr .bpr-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.bpr .bpr-hero-curve {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 150px;
}

.bpr .bpr-crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .62);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
}

.bpr .bpr-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-weight: 600;
}

.bpr .bpr-hero-head {
    position: relative;
    max-width: 760px;
    margin: 54px auto 0;
    text-align: center;
}

.bpr .bpr-hero h1 {
    margin-bottom: 12px;
    font-size: clamp(36px, 5.6vw, 60px);
    font-weight: 800;
    text-wrap: balance;
}

.bpr .bpr-hero h1 .bpr-dot { color: var(--bpr-red-400); }

.bpr .bpr-hero-head > p {
    color: rgba(226, 234, 246, .78);
    font-size: 17.5px;
}

/* ── the bubbles around the headline ─────────────────────────────────── */

.bpr .bpr-bubble {
    position: absolute;
    opacity: .9;
    pointer-events: none;
}

.bpr .bpr-b1 { top: -14px; left: -46px; width: 78px; animation: bpr-bob 7s ease-in-out infinite; }
.bpr .bpr-b2 { top: 12px; right: -52px; width: 96px; animation: bpr-bob2 9s ease-in-out infinite; }
.bpr .bpr-b3 { top: 216px; right: -92px; width: 64px; animation: bpr-bob 8s ease-in-out infinite reverse; }
.bpr .bpr-b4 { top: 248px; left: -96px; width: 58px; animation: bpr-bob2 10s ease-in-out infinite; }

@keyframes bpr-bob {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-14px) rotate(-3deg); }
}

@keyframes bpr-bob2 {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-18px) rotate(4deg); }
}

/* ── search ──────────────────────────────────────────────────────────── */

.bpr .bpr-search-wrap {
    position: relative;
    z-index: 5;
    max-width: 720px;
    margin: 40px auto 0;
}

/* nowrap and an explicit width on the field are both load-bearing: a theme
   kit setting width:100% on every input is what put the button on its own
   line and squeezed the field to nothing the first time round. */
.bpr .bpr-search {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    /* Logical, so the magnifier keeps the roomy side in a right-to-left page
       instead of the button inheriting it. */
    padding: 9px;
    padding-inline-start: 22px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 26px 60px -22px rgba(6, 14, 32, .65), 0 0 0 1px rgba(255, 255, 255, .4);
    transition: transform .25s ease, box-shadow .25s ease;
}

.bpr .bpr-search:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 30px 70px -22px rgba(6, 14, 32, .7), 0 0 0 2px var(--bpr-red-500);
}

.bpr .bpr-search .bpr-glass {
    flex: none;
    color: var(--bpr-muted);
}

.bpr .bpr-search input[type="search"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    margin: 0;
    padding-block: 12px;
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--bpr-ink);
    font-family: inherit;
    font-size: 16.5px;
    line-height: 1.4;
    text-align: start;
    -webkit-appearance: none;
    appearance: none;
}

.bpr .bpr-search input[type="search"]::placeholder { color: #9AA7BC; opacity: 1; }
.bpr .bpr-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.bpr .bpr-search .bpr-btn {
    flex: none;
    width: auto;
    padding: 13px 28px;
    font-size: 15.5px;
}

.bpr .bpr-quick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 18px;
}

.bpr .bpr-quick > span {
    align-self: center;
    color: rgba(226, 234, 246, .6);
    font-size: 13px;
}

.bpr .bpr-quick button {
    padding: 6px 13px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.bpr .bpr-quick button:hover {
    background: rgba(255, 255, 255, .2);
    transform: translateY(-2px);
}

/* ── live results ────────────────────────────────────────────────────── */

/* The script shows and hides this with the hidden attribute, and [hidden] is
   only a presentation hint — any class-level display beats it, so the empty
   panel would paint under the field until somebody typed. Ordered before the
   display rule would not help either; it needs the extra specificity. */
.bpr .bpr-results[hidden] { display: none; }

/* Floated over the curve rather than pushing the page down, so the topic
   cards do not jump every time a letter is typed. */
.bpr .bpr-results {
    position: absolute;
    z-index: 6;
    right: 0;
    left: 0;
    display: grid;
    gap: 6px;
    max-height: min(58vh, 430px);
    overflow-y: auto;
    /* Same scrollbar as the Explore filters: 6px, brand red, rounded. */
    scrollbar-width: thin;
    scrollbar-color: var(--bpr-red-500) #f1f3f7;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid var(--bpr-line);
    border-radius: var(--bpr-radius);
    background: #fff;
    box-shadow: var(--bpr-shadow-m);
    text-align: start;
}

.bpr .bpr-results::-webkit-scrollbar { width: 6px; }
.bpr .bpr-results::-webkit-scrollbar-track { margin: 6px 0; border-radius: 999px; background: #f1f3f7; }
.bpr .bpr-results::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--bpr-red-500); }
.bpr .bpr-results::-webkit-scrollbar-thumb:hover { background: var(--bpr-red-600); }

.bpr .bpr-results a {
    display: block;
    padding: 11px 14px;
    border-radius: var(--bpr-radius-s);
    transition: background .18s ease;
}

.bpr .bpr-results a:hover,
.bpr .bpr-results a:focus-visible {
    background: #FFF4F4;
    outline: none;
}

.bpr .bpr-results strong {
    display: block;
    color: var(--bpr-ink);
    font-size: 15px;
    font-weight: 600;
}

.bpr .bpr-results span {
    display: block;
    margin-top: 2px;
    color: var(--bpr-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

.bpr .bpr-results-empty {
    margin: 0;
    padding: 14px;
    color: var(--bpr-muted);
    font-size: 14px;
}

/* ── sections ────────────────────────────────────────────────────────── */

.bpr .bpr-section { padding-block: 70px; }

.bpr .bpr-section-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

.bpr .bpr-section-title h2 { font-size: 26px; font-weight: 700; }

.bpr .bpr-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--bpr-line), transparent);
}

/* ── topic cards ─────────────────────────────────────────────────────── */

.bpr .bpr-topics {
    position: relative;
    z-index: 4;
}

.bpr .bpr-topic-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.bpr .bpr-topic {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    overflow: hidden;
    padding: 28px 24px 24px;
    border: 1px solid var(--bpr-line);
    border-radius: var(--bpr-radius-l);
    background: var(--bpr-surface);
    box-shadow: var(--bpr-shadow-s);
    transition: transform .32s cubic-bezier(.2, .7, .3, 1), box-shadow .32s ease, border-color .32s ease;
}

.bpr .bpr-topic::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--bpr-grad-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}

.bpr .bpr-topic::after {
    content: "";
    position: absolute;
    top: -90px;
    right: -80px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(238, 28, 37, .09), transparent 70%);
    opacity: 0;
    transition: opacity .4s ease;
}

.bpr .bpr-topic:hover,
.bpr .bpr-topic:focus-visible {
    transform: translateY(-8px);
    border-color: #F3D4D6;
    box-shadow: var(--bpr-shadow-m);
    outline: none;
}

.bpr .bpr-topic:hover::before,
.bpr .bpr-topic:focus-visible::before { transform: scaleX(1); }

.bpr .bpr-topic:hover::after,
.bpr .bpr-topic:focus-visible::after { opacity: 1; }

.bpr .bpr-ico {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: linear-gradient(150deg, #FFF1F1, #FFE3E4);
    box-shadow: inset 0 0 0 1px rgba(238, 28, 37, .12);
    color: var(--bpr-red-500);
    transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}

.bpr .bpr-topic:hover .bpr-ico { transform: translateY(-2px) rotate(-6deg); }

.bpr .bpr-topic h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 7px;
    font-size: 17.5px;
    font-weight: 600;
}

.bpr .bpr-topic p {
    position: relative;
    z-index: 1;
    flex: 1;
    color: var(--bpr-muted);
    font-size: 14.5px;
}

.bpr .bpr-count {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    color: var(--bpr-red-600);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.bpr .bpr-count svg { transition: transform .3s ease; }
.bpr .bpr-topic:hover .bpr-count svg { transform: translateX(4px); }
[dir="rtl"] .bpr .bpr-topic:hover .bpr-count svg { transform: scaleX(-1) translateX(4px); }

/* ── most read ───────────────────────────────────────────────────────── */

.bpr .bpr-read-list { display: grid; gap: 12px; }

.bpr .bpr-read {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    max-width: 100%;
    padding: 18px 22px;
    border: 1px solid var(--bpr-line);
    border-radius: var(--bpr-radius);
    background: var(--bpr-surface);
    box-shadow: var(--bpr-shadow-s);
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease, border-color .28s ease;
}

.bpr .bpr-read:hover,
.bpr .bpr-read:focus-visible {
    border-color: #F3D4D6;
    box-shadow: var(--bpr-shadow-m);
    outline: none;
}

/* The sideways nudge only where there is a real pointer. On a touch screen
   :hover sticks after a tap, leaving the row shifted 6px out of a container
   that clips, so its right edge vanishes. */
@media (hover: hover) and (pointer: fine) {
    .bpr .bpr-read:hover,
    .bpr .bpr-read:focus-visible { transform: translateX(6px); }

    [dir="rtl"] .bpr .bpr-read:hover,
    [dir="rtl"] .bpr .bpr-read:focus-visible { transform: translateX(-6px); }

    .bpr .bpr-read:hover .bpr-go { transform: translateX(3px); }
    [dir="rtl"] .bpr .bpr-read:hover .bpr-go { transform: translateX(-3px); }
}

.bpr .bpr-n {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #FFF1F1;
    box-shadow: inset 0 0 0 1px rgba(238, 28, 37, .12);
    color: var(--bpr-red-600);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bpr .bpr-t {
    flex: 1;
    /* Both are needed: a flex item defaults to min-width:auto, which refuses
       to shrink below its content and pushes the row past the card. */
    min-width: 0;
    max-width: 100%;
}

.bpr .bpr-t strong {
    display: block;
    margin-bottom: 3px;
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: -.015em;
    /* A title with one long unbroken token — a URL, a long compound — would
       otherwise widen the row, and .bpr clips rather than scrolls, so the end
       of the row simply disappears off the edge. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.bpr .bpr-t > span {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--bpr-muted);
    font-size: 14px;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* On its own class rather than in the rule above, so the widget switch can
   take it off again. As a plain default it could only ever be turned on. */
.bpr .bpr-read--clip .bpr-t > span { white-space: nowrap; }

.bpr .bpr-go {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #F4F7FB;
    color: var(--bpr-muted);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.bpr .bpr-read:hover .bpr-go {
    background: var(--bpr-grad-red);
    color: #fff;
}

/* ── still stuck ─────────────────────────────────────────────────────── */

.bpr .bpr-stuck-wrap { padding-bottom: 10px; }

.bpr .bpr-stuck {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 44px;
    align-items: center;
    overflow: hidden;
    padding: 52px 54px;
    border-radius: 30px;
    background-color: var(--bpr-navy-900, #0D1930);
    background-image: var(--bpr-grad-navy);
    box-shadow: 0 40px 80px -34px rgba(10, 20, 44, .65);
    color: #fff;
}

.bpr .bpr-stuck-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: .85;
}

.bpr .bpr-stuck > div {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.bpr .bpr-stuck h2 {
    margin-bottom: 12px;
    font-size: clamp(26px, 3.4vw, 34px);
    font-weight: 800;
}

.bpr .bpr-lead {
    max-width: 46ch;
    color: rgba(226, 234, 246, .78);
    font-size: 16px;
}

.bpr .bpr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 26px;
}

.bpr .bpr-actions .bpr-btn-red {
    padding: 14px 28px;
    font-size: 16px;
}

.bpr .bpr-mailrow {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.bpr .bpr-mailrow p {
    margin-bottom: 12px;
    color: rgba(226, 234, 246, .65);
    font-size: 14px;
}

.bpr .bpr-mail {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.bpr .bpr-mail:hover {
    border-color: var(--bpr-red-400);
    background: rgba(238, 28, 37, .18);
    transform: translateY(-2px);
}

.bpr .bpr-mail svg { color: var(--bpr-red-400); }

/* ── reveal on scroll ────────────────────────────────────────────────── */

/* Only ever applied once the script has confirmed it can take them out
   again: without .bpr-js the whole page is simply visible. */
.bpr.bpr-js .bpr-reveal {
    opacity: 0;
    transform: translateY(22px);
}

.bpr.bpr-js .bpr-reveal.bpr-in {
    opacity: 1;
    transform: none;
    transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}

.bpr.bpr-js .bpr-reveal.bpr-d1.bpr-in { transition-delay: .08s; }
.bpr.bpr-js .bpr-reveal.bpr-d2.bpr-in { transition-delay: .16s; }
.bpr.bpr-js .bpr-reveal.bpr-d3.bpr-in { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    .bpr *,
    .bpr *::before,
    .bpr *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    .bpr.bpr-js .bpr-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── as an Elementor widget ──────────────────────────────────────────── */

/* As widgets the sections sit in containers of their own, which carry their
   own spacing, so the page-level offsets come off. In particular the topic
   cards do not climb over the hero here: on the one-shortcode page that lift
   is the design, but between two builder containers it would only collide
   with whatever padding the container has. Elementor's own margin on the
   Advanced tab is the way to put it back. */
/*
 * The results panel, once the script has moved it to the end of <body>.
 *
 * Every Elementor container carries a transform and so is a stacking context,
 * which makes the hero widget's container one indivisible layer: under the
 * section below and the panel is buried with it, over it and the hero's white
 * curve covers the tops of the topic cards. Nothing about z-index fixes that,
 * because both are the same layer — so the panel leaves the container instead.
 *
 * The host keeps the .bpr class for the design tokens, with the widget's own
 * Style tab values copied onto it, but none of .bpr's own box behaviour: no
 * clipping, and no isolation that would trap the panel all over again.
 */
.bpr.bpr-portal {
    position: static;
    overflow: visible;
    isolation: auto;
    margin: 0;
}

.bpr.bpr-portal .bpr-results {
    position: fixed;
    /* Above the page, below the sticky header, which sits at 20. */
    z-index: 15;
    right: auto;
    margin: 0;
}

.bpr-w > .bpr-topics { margin-top: 0; }
.bpr-w > .bpr-most-read,
.bpr-w > .bpr-stuck-wrap { padding-block: 0; }

/* Shown in the builder when a section has nothing to render, so an empty
   widget reads as "no content yet" rather than as a broken one. */
.bpr-empty {
    display: grid;
    gap: 4px;
    padding: 28px 24px;
    border: 1px dashed var(--bpr-line, #E6EBF2);
    border-radius: var(--bpr-radius, 18px);
    background: #fff;
    color: var(--bpr-muted, #6B7A93);
    font-family: var(--bpr-font, sans-serif);
    text-align: center;
}

.bpr-empty strong {
    color: var(--bpr-ink, #101C33);
    font-size: 15px;
    font-weight: 600;
}

.bpr-empty span { font-size: 13.5px; }

/* ── breakpoints ─────────────────────────────────────────────────────── */

@media (max-width: 1040px) {
    .bpr .bpr-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    /* The one-line summary was only released from nowrap below 620px, so every
       tablet between 621 and 860 kept a line that could not wrap. */
    .bpr .bpr-t > span { white-space: normal; }
    .bpr .bpr-read { gap: 14px; padding: 16px 18px; }

    .bpr .bpr-stuck {
        grid-template-columns: 1fr;
        padding: 40px 30px;
        text-align: start;
    }

    .bpr .bpr-stuck-art {
        order: -1;
        max-width: 320px;
    }

    .bpr .bpr-bubble { display: none; }
}

@media (max-width: 620px) {
    .bpr-page { padding-bottom: 56px; }
    .bpr .bpr-wrap { padding-inline: 18px; }
    .bpr .bpr-hero { padding: 32px 0 160px; }
    .bpr .bpr-section { padding-block: 54px; }
    .bpr .bpr-topic-grid { grid-template-columns: 1fr; }

    .bpr .bpr-search {
        flex-wrap: wrap;
        padding: 14px;
        border-radius: 26px;
    }

    .bpr .bpr-search input[type="search"] {
        flex: 1 1 100%;
        width: 100%;
        padding-inline: 6px;
    }

    .bpr .bpr-search .bpr-btn { width: 100%; }
    .bpr .bpr-search .bpr-glass { display: none; }

    .bpr .bpr-read { gap: 12px; padding: 14px 16px; }
    .bpr .bpr-n { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; }
    .bpr .bpr-t strong { font-size: 15.5px; }

    /* The row itself is the link, so the arrow is 34px plus a 12px gap spent
       on decoration at the width where space is scarcest. */
    .bpr .bpr-go { display: none; }

    .bpr .bpr-stuck {
        padding: 32px 22px;
        border-radius: 24px;
    }
}

/* ── the three section widgets, edge to edge on a phone ──────────────── */

/*
 * Only these three, and only below 620px. .bpr-wrap is shared by eight places
 * — the hero, the [baipar_support] page, and the help article and category
 * templates — and all of those keep their gutter. The widget wrapper class is
 * what separates them: a widget dropped in the builder sits in an Elementor
 * container that already supplies side padding, so this one is doubling up.
 *
 * Written at (0,3,0) with the .bpr on the front, so it beats the .bpr .bpr-wrap
 * rule above whatever order the rules end up in.
 */
@media (max-width: 620px) {
    .bpr.bpr-w-topics > .bpr-wrap,
    .bpr.bpr-w-most-read > .bpr-wrap,
    .bpr.bpr-w-stuck > .bpr-wrap {
        padding-inline: 0;
    }
}

/* ═══ article and category pages ═════════════════════════════════════════ */

.bsup-article,
.bsup-category {
    --bs-ink: var(--baipar-ink, #14223d);
    --bs-muted: var(--baipar-muted, #6d7890);
    --bs-primary: var(--baipar-primary, #e11b22);
    --bs-navy: var(--baipar-secondary, #0d1b34);
    --bs-line: var(--baipar-line, #e3e8f1);
    --bs-surface: var(--baipar-surface, #f4f7fb);
    --bs-body: var(--baipar-font-body, "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif);
    --bs-display: var(--baipar-font-display, "Plus Jakarta Sans", "DM Sans", sans-serif);

    color: var(--bs-ink);
    font-family: var(--bs-body);
}

/* ── most read, related, category list ───────────────────── */

.bsup-article__related h2 {
    margin: 0 0 12px;
    color: var(--bs-ink);
    font-family: var(--bs-display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.015em;
}

.bsup-article__related ul,
.bsup-category__list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bsup-article__related a,
.bsup-category__list a {
    display: block;
    padding: 13px 15px;
    border: 1px solid var(--bs-line);
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .16s ease, background-color .16s ease;
}

.bsup-article__related a:hover,
.bsup-category__list a:hover,
.bsup-article__related a:focus-visible,
.bsup-category__list a:focus-visible {
    border-color: var(--bs-primary);
    background: var(--bs-surface);
    outline: none;
}

.bsup-article__related strong,
.bsup-category__list strong {
    display: block;
    font-family: var(--bs-display);
    font-size: 14.5px;
    font-weight: 700;
}

.bsup-article__related span,
.bsup-category__list span {
    display: block;
    margin-top: 2px;
    color: var(--bs-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

/* ── article ────────────────────────────────────────────────────────────── */

.bsup-article,
.bsup-category {
    background: var(--bs-surface);
}

.bsup-article__shell,
.bsup-category__shell {
    width: min(var(--baipar-container-max, 1482px), 100%);
    max-width: 780px;
    margin-inline: auto;
    padding-block: clamp(24px, 4vw, 46px) clamp(40px, 7vw, 84px);
    padding-inline: 18px;
}

.bsup-article__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
    color: var(--bs-muted);
    font-size: 12.5px;
}

.bsup-article__crumbs a {
    color: var(--bs-muted);
    font-weight: 600;
    text-decoration: none;
}

.bsup-article__crumbs a:hover {
    color: var(--bs-primary);
}

.bsup-article__body {
    padding: clamp(22px, 4vw, 40px);
    border: 1px solid var(--bs-line);
    border-radius: 16px;
    background: #fff;
}

.bsup-article__body h1 {
    margin: 0 0 18px;
    color: var(--bs-ink);
    font-family: var(--bs-display);
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 800;
    letter-spacing: -.028em;
    line-height: 1.15;
    text-wrap: balance;
}

/* Held near 70 characters: the single biggest thing that decides whether a
   help article gets read to the end. */
.bsup-article__prose {
    max-width: 68ch;
    color: var(--baipar-ink, #14223d);
    font-size: 15.5px;
    line-height: 1.72;
}

.bsup-article__prose > * + * {
    margin-block-start: 1.05em;
}

.bsup-article__prose h2 {
    margin-block-start: 1.7em;
    font-family: var(--bs-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.bsup-article__prose h3 {
    margin-block-start: 1.5em;
    font-family: var(--bs-display);
    font-size: 16px;
    font-weight: 700;
}

.bsup-article__prose a {
    color: var(--bs-primary);
    text-underline-offset: 2px;
}

.bsup-article__prose ul,
.bsup-article__prose ol {
    padding-inline-start: 22px;
}

.bsup-article__prose li + li {
    margin-block-start: .4em;
}

.bsup-article__prose code {
    padding: 1px 5px;
    border: 1px solid var(--bs-line);
    border-radius: 5px;
    background: var(--bs-surface);
    font-size: .9em;
}

.bsup-article__prose img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* ── the deflection question ────────────────────────────────────────────── */

.bsup-article__vote {
    margin-block-start: 34px;
    padding-block-start: 22px;
    border-block-start: 1px solid var(--bs-line);
    text-align: center;
}

.bsup-article__vote strong {
    display: block;
    margin-bottom: 12px;
    font-family: var(--bs-display);
    font-size: 15px;
    font-weight: 700;
}

/* Same trap as .bpr-results: the script hides these once the question is
   answered, and display:flex beats the hidden attribute. */
.bsup-article__vote-buttons[hidden] { display: none; }

.bsup-article__vote-buttons {
    display: flex;
    justify-content: center;
    gap: 9px;
}

.bsup-article__vote-buttons .baipar-btn {
    min-width: 92px;
    border-radius: 999px;
}

.bsup-article__vote-said {
    margin: 12px 0 0;
    color: #0f7b4f;
    font-size: 13.5px;
    font-weight: 600;
}

.bsup-article__related {
    margin-block-start: 34px;
}

/* ── category page ──────────────────────────────────────────────────────── */

.bsup-category__head {
    margin-bottom: 22px;
}

.bsup-category__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--baipar-primary-light-background, #e01b220d);
    color: var(--bs-primary);
}

.bsup-category__head h1 {
    margin: 0 0 6px;
    color: var(--bs-ink);
    font-family: var(--bs-display);
    font-size: clamp(23px, 3.2vw, 32px);
    font-weight: 800;
    letter-spacing: -.025em;
}

.bsup-category__head p {
    margin: 0;
    max-width: 58ch;
    color: var(--bs-muted);
    font-size: 14.5px;
}

.bsup-category__children {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.bsup-category__children a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--bs-line);
    border-radius: 999px;
    background: #fff;
    color: var(--bs-ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.bsup-category__children a:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.bsup-category__children span {
    color: var(--bs-muted);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .bsup-article__related a,
    .bsup-category__list a {
        transition: none;
    }
}