/* ===========================================================================
   EXTRA OPTIONS + ADD A NOTE + REVIEWS SUMMARY — checkout-flow sections
   ============================================================================
   Three consecutive sections that share a "dark banner header → light body"
   pattern (extra-options3 mock, v3). Each section card has:
     - white body with the same border / radius / shadow as pack-cards
     - dark gradient banner header up top with a giant decorative step number
       on the left, an eyebrow + League title + subtitle in the middle, and
       a meta chip on the right
     - solid #0364a9 strip along the bottom edge of the banner that pairs
       the dark header with the light body below

   Scoping:
     .bt-section          — shared chrome (card frame + dark banner)
     .eo-section          — Extra Options-only (tabs row + option panels)
     .note-section        — Add a Note-only (textarea + char counter)
     .rs-section          — Reviews Summary-only (stats + grid + footer)

   All three layer on top of the legacy class names that boosting-calc.js
   already targets (.extra-optionsblock, .eo-itemblock + data-eotype,
   .eo-swhitcher-content + .ON, #add-note-ta, name="note") — the JS keeps
   working unchanged.
============================================================================ */

.bt-section,
.eo-section,
.note-section,
.rs-section,
.product-reviews-composite {
    --bt-bg:          #ffffff;
    --bt-bg-soft:     #f6fafd;
    --bt-ink:         #0c1a2b;
    --bt-ink-2:       #16273d;
    --bt-ink-soft:    #4a5a6e;
    --bt-ink-muted:   #8a98a8;
    --bt-line:        #e4ecf3;
    --bt-line-soft:   #eef3f8;

    --bt-blue:        #0364a8;
    --bt-blue-deep:   #024c80;
    --bt-blue-mid:    #3a9de8;
    --bt-blue-soft:   #b8e0f4;
    --bt-blue-tint:   #eaf6fd;

    --bt-green:       #22b358;
    --bt-green-deep:  #1a8a45;
    --bt-green-soft:  #b8e8c8;
    --bt-green-tint:  #e8f7ee;

    --bt-yellow:      #fbbe24;

    /* DevTools pass: --bt-shadow-soft also commented out alongside the
       earlier --bt-shadow-pop drop. The .bt-section card now sits flush
       on the page with no drop shadow at all — the hairline border alone
       handles separation. Variable kept commented as a reference. */
    /* --bt-shadow-soft: 0 1px 2px rgba(15, 60, 100, 0.04), 0 8px 24px rgba(15, 60, 100, 0.06); */
    /* --bt-shadow-pop:  0 2px 4px rgba(15, 60, 100, 0.05), 0 24px 60px rgba(15, 60, 100, 0.08); */

    --bt-ease:        cubic-bezier(0.16, 1, 0.3, 1);

    --bt-font-display:'League', 'avenirnextcyr-bold', 'AvenirNextCyr-Bold',
                      'Montserrat', system-ui, sans-serif;
    --bt-font-body:   'avenirnextcyr-medium', 'AvenirNextCyr-Medium',
                      system-ui, sans-serif;
    --bt-font-label:  'avenirnextcyr-medium', 'AvenirNextCyr-Medium',
                      system-ui, sans-serif;

    background: var(--bt-bg);
    color: var(--bt-ink);
    font-family: var(--bt-font-body);
    border: 1px solid var(--bt-line);
    border-radius: 10px;
    /* DevTools pass: drop-shadow removed on the .bt-section family.
       The card now relies on its hairline border alone for separation
       from the page. About section explicitly overrides both below. */
    /* box-shadow: var(--bt-shadow-soft); */
    overflow: hidden;
    /* Margin bumped from 20 → 40 so the gap between adjacent
       Extra Options / Note / Reviews cards reads as breathing
       room rather than crowding. The same value also separates
       the first card from the boosting calculator block above.
       10px below to soften the gap before the next section. */
    margin-top: 40px;
    margin-bottom: 10px;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    animation: bt-reveal 0.7s var(--bt-ease) forwards;
    box-sizing: border-box;
}
.eo-section  { animation-delay: 0.05s; }
.note-section { animation-delay: 0.15s; }
.rs-section  { animation-delay: 0.25s; }
@keyframes bt-reveal { to { opacity: 1; transform: translateY(0); } }

/* Reset only INNER legacy wrappers (.extra_options) so they don't push
   the dark banner away from the top edge of the card. The OUTER wrapper
   classes (.note-section / .rs-section / .bt-section / .extra-optionsblock)
   keep their section-card chrome (1px border, 10px radius, soft shadow)
   from the rule above — earlier rounds reset those by mistake which
   stripped the visible card outline off Add a Note and About. */
.eo-section .extra_options {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.eo-section,
.note-section,
.rs-section,
.bt-section {
    padding: 0 !important;
}

/* Generic content area below the banner — used by the About section
   ([bt_about] shortcode) and any future .bt-section-based block.
   Inherits paragraph spacing / link colours from the Extra Options
   description so the typography is consistent. */
/* Generic body wrapper used by the About section (and any future
   .bt-section-based block). Padding-all-around symmetric so the
   content reads as a balanced block — top, sides, and bottom each
   get 40px. */
.bt-section .bt-section-body {
    /* DevTools pass: dropped the 40px ring — the dark banner is now hidden
       (display:none below) and WP-editor body content carries its own
       paragraph rhythm via .bt-section-body p margins. Leaving the rule
       in place so the font / colour / line-height inheritance still
       applies. */
    padding: 0;
    font-family: var(--bt-font-body);
    font-size: 16px;
    color: var(--bt-ink-soft);
    line-height: 1.65;
}
.bt-section .bt-section-body p {
    margin: 0 0 16px;
    text-align: left;
    text-indent: 0;
    padding-left: 0;
    padding-right: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 16px;
    color: #252525;
    /* DevTools pass: tightened 1.65 -> 1.3 so dense About copy reads as
       packed prose rather than airy spacing. */
    line-height: 1.3;
}
.bt-section .bt-section-body p:last-child { margin-bottom: 0; }
.bt-section .bt-section-body a { color: var(--bt-blue); text-decoration: none; }
.bt-section .bt-section-body a:hover { text-decoration: underline; }
.bt-section .bt-section-body strong { color: var(--bt-ink); font-weight: 500; }
/* Headings inside the body — League 500, left-aligned, generous top
   margin so each subsection has visual separation. Parent themes'
   main.css centres these via .service-info-text-container h2/h3 rules;
   override with !important so all About content reads as a single
   left-aligned column. */
.bt-section .bt-section-body h1,
.bt-section .bt-section-body h2,
.bt-section .bt-section-body h3,
.bt-section .bt-section-body h4 {
    font-family: var(--bt-font-display);
    font-weight: 500;
    color: var(--bt-ink);
    /* DevTools pass: tightened heading margins (28/12 -> 10/4) to keep
       the About content reading as a single dense column rather than
       widely-spaced sections. */
    margin: 10px 0 4px !important;
    padding: 0 !important;
    letter-spacing: 0;
    text-align: left !important;
    text-transform: uppercase;
    line-height: 1.2;
}
.bt-section .bt-section-body h1 { font-size: 30px; }
/* DevTools pass: h2 dropped 28 -> 26px so it matches the .bt-faq-section-title
   in about-faq.css for visual consistency across nested section levels. */
.bt-section .bt-section-body h2 { font-size: 26px; }
.bt-section .bt-section-body h3 { font-size: 22px; }
.bt-section .bt-section-body h4 { font-size: 18px; }
.bt-section .bt-section-body h1:first-child,
.bt-section .bt-section-body h2:first-child,
.bt-section .bt-section-body h3:first-child,
.bt-section .bt-section-body h4:first-child {
    margin-top: 0 !important;
}
/* Legacy .service-info-text-container has margin-bottom:80px and
   font-size:20px from main.css. Reset inside the new card body so
   the card's own padding controls spacing instead. */
.bt-section .bt-section-body.service-info-text-container,
.bt-section .service-info-text-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 16px;
}
/* About-section specific overrides — the legacy theme can drop the
   1px border off .service-info-block in some main.css branches.
   Force it back so the card always has a visible bottom edge. */
.bt-section--about,
.bt-section.service-info-block {
    /* DevTools pass: About card goes borderless + shadowless, relying on
       the surrounding sections + the inner .bt-about-faq blocks for
       structure. !important still needed because the legacy
       service-info-block selector inherits a 1px border from main.css. */
    border: 0px solid var(--bt-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* === Banner header — brand blue ====================================== */
/* Solid #0364a9 with a subtle radial highlight + a 135° gradient down
   to a deeper shade so the surface still has depth without leaving the
   brand palette. Vertical padding 30px so the title has ~30px of clear
   space above and below (per review feedback). */
.bt-section-banner,
.eo-section .bt-section-banner,
.note-section .bt-section-banner,
.rs-section .bt-section-banner,
.bt-section .bt-section-banner {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0.18), transparent 55%),
        linear-gradient(135deg, #0a72b8 0%, #0364a9 50%, #024c80 100%);
    color: #fff;
    padding: 30px 32px;
    display: flex;
    align-items: center;
    gap: 28px;
    position: relative;
    overflow: hidden;
    /* Banner restored. Earlier round set display:none on every banner;
       the WP-editor pass found the banner was needed for the toggle/meta
       chip on the right to sit on the same row as the title. Leaving
       display:flex (declared above) wins — the toggle "TOGGLE OPTION"
       label aligns to the right via .bt-banner-right's flex-shrink:0. */
}
/* Solid brand-blue strip pinned to the bottom edge of the banner — the
   same accent the pack-cards top-bar uses, just relocated to where the
   dark banner meets the light body. */
.bt-section-banner::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--bt-blue);
}

/* Step-number decoration removed per review — leave the rule as a
   no-op so any legacy markup that still emits .bt-step-number simply
   collapses out of layout instead of leaking through. */
.bt-step-number { display: none !important; }

.bt-banner-title-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}
/* Eyebrow row — kept for the Reviews Summary section's "Social proof"
   label. Removed from Extra Options + Note in their templates so the
   title can read more directly. Recoloured to a light tint that sits
   well against the brand-blue banner. */
.bt-banner-eyebrow {
    font-family: var(--bt-font-label);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    gap: 8px;
}
.bt-banner-eyebrow svg {
    width: 13px;
    height: 13px;
    color: #ff8500;
    flex-shrink: 0;
}
.bt-banner-title {
    font-family: var(--bt-font-display);
    font-weight: 500;
    font-size: 30px;
    letter-spacing: 0;
    line-height: 1.05;
    color: #fff;
    margin: 0;
}
/* Destination word ("options" / "note" / "reviews") — inherits the
   banner title's white colour so the title reads as a single unit
   against the brand-blue background. */
.bt-banner-title em {
    font-style: normal;
    font-weight: 500;
    color: inherit;
}
.bt-banner-subtitle {
    font-family: var(--bt-font-body);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    max-width: 720px;
    margin: 0;
}

/* Defensive text-colour overrides inside the banner so any custom HTML
   pasted into a .bt-section-banner (e.g. the bottom customer-support
   block on the boosting-packs page) reads as white on blue instead of
   inheriting a dark default from the parent theme's main.css. */
.bt-section-banner,
.bt-section-banner h1,
.bt-section-banner h2,
.bt-section-banner h3,
.bt-section-banner h4,
.bt-section-banner h5,
.bt-section-banner p,
.bt-section-banner strong,
.bt-section-banner b,
.bt-section-banner em,
.bt-section-banner span:not([class*="bt-blue-mid"]):not([class*="orange"]) {
    color: #fff !important;
}
.bt-section-banner a {
    color: #fff !important;
    text-decoration: underline;
}
.bt-section-banner a:hover { opacity: 0.85; }
.bt-section-banner img { max-width: 100%; height: auto; }

.bt-banner-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
}
.bt-banner-meta {
    font-family: var(--bt-font-label);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
}
.bt-banner-meta svg {
    width: 15px;
    height: 15px;
    color: var(--bt-blue-mid);
    flex-shrink: 0;
}
.bt-banner-meta em {
    font-style: normal;
    color: #fff;
    font-weight: 500;
}

/* === Extra Options — tabs row ========================================== */
.eo-section .eo-tabs {
    padding: 18px 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--bt-line);
    background: var(--bt-bg-soft);
}
.eo-section .eo-itemblock {
    padding: 11px 16px;
    background: var(--bt-bg);
    border: 2px solid var(--bt-line);
    border-radius: 4px;
    font-family: var(--bt-font-label);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #001c3f;
    cursor: pointer;
    transition: all 180ms var(--bt-ease);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    width: auto;
    height: auto;
    box-shadow: none;
    float: none;
    text-align: left;
}
/* Override the legacy `display: none` on .eo-itemicon (multiboosting
   theme hides them site-wide) and let the inline <svg> emitted by the
   template render. Sized + recoloured here via currentColor so hover
   / active states pick up the same blue accents as the tab label. */
.eo-section .eo-itemblock .eo-itemicon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #001c3f;
    flex-shrink: 0;
    transition: color 180ms ease;
}
.eo-section .eo-itemblock .eo-itemicon svg {
    width: 14px;
    height: 14px;
    display: block;
    color: inherit;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.eo-section .eo-itemblock .eo-menu-title {
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    line-height: 1;
}
.eo-section .eo-itemblock .eo-menu-title span {
    color: inherit;
    font-family: 'avenirnextcyr-bold', 'AvenirNextCyr-Bold', 'Montserrat', system-ui, sans-serif !important;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}
.eo-section .eo-itemblock .eo-infoblock,
.eo-section .eo-itemblock .eo-afterblock,
.eo-section .eo-itemblock .eo-controlinfoblock {
    display: none;
}
.eo-section .eo-itemblock:hover {
    border-color: var(--bt-blue-soft);
    color: var(--bt-blue-deep);
    background: var(--bt-blue-tint);
}
.eo-section .eo-itemblock:hover .eo-itemicon { color: var(--bt-blue); }
.eo-section .eo-itemblock.selected,
.eo-section .eo-itemblock.active {
    background: var(--bt-blue-tint);
    border-color: var(--bt-blue);
    color: var(--bt-blue-deep);
}
.eo-section .eo-itemblock.selected .eo-itemicon,
.eo-section .eo-itemblock.active  .eo-itemicon { color: var(--bt-blue); }

/* === Extra Options — content panel ===================================== */
.eo-section .eo-content,
.eo-section .eo-right-block {
    padding: 28px;
}
.eo-section .eo-right-block-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    float: none;
}
.eo-section .eo-right-block-content .eo-header-work {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
/* Stack "This option is" / price-pill / Off-On toggle vertically — each
   reads as its own line per review feedback. The label, pill, and
   toggle sit flush-left rather than crammed into a single horizontal
   row that wrapped awkwardly on narrow panels. */
.eo-section .eo-status-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: nowrap;
}
.eo-section .eo-status-label {
    font-family: var(--bt-font-display);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--bt-ink);
}
.eo-section .eo-price-pill {
    font-family: var(--bt-font-display);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 6px 12px;
    border-radius: 3px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
}
.eo-section .eo-price-pill.free {
    color: var(--bt-green-deep);
    background: var(--bt-green-tint);
    border: 1px solid var(--bt-green-soft);
}
.eo-section .eo-price-pill.paid {
    color: var(--bt-blue-deep);
    background: var(--bt-blue-tint);
    border: 1px solid var(--bt-blue-soft);
}
.eo-section .eo-price-pill-icon {
    width: 15px;
    height: 15px;
    color: var(--bt-green);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: inline-block;
    flex-shrink: 0;
}
.eo-section .eo-price-pill.paid .eo-price-pill-icon { color: var(--bt-blue); }
/* Price text inside the pill uses AvenirNextCyr (the same family as the
   "YOUR ORDER" sidebar) rather than League — League's display weight
   was rendering the dollar-amount numerals too heavy at this size. */
.eo-section .eo-price-pill .eo_costoptionsdisplay,
.eo-section .eo-price-pill .eo_costout-fixed {
    font-family: 'avenirnextcyr-bold', 'AvenirNextCyr-Bold', 'Montserrat', system-ui, sans-serif !important;
    font-weight: 500;
    font-size: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.eo-section .eo_costoptionsdisplay {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
}

/* Off/On switch — keeps legacy .eo-swhitcher-* structure but overrides
   the multiboosting / parent-theme rules (width:50px, margin-left:55px,
   background:#eb5c29!important) so the toggle renders as a proper
   sliding pill: both labels stay visible at all times, indicator moves
   between OFF and ON halves. !important is required because the
   inherited rules in product.css use it themselves. */
.eo-section .eo-control-switcher {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    float: none !important;
    width: auto !important;
}
.eo-section .eo-control-switcher .eo-swhitcher-titel,
.eo-section .eo-control-switcher .eo-conflict,
.eo-section .eo-control-switcher .eo-tooltip {
    display: none !important;
}
.eo-section .eo-swhitcher-content {
    position: relative !important;
    display: inline-flex !important;
    align-items: stretch !important;
    background: var(--bt-bg-soft) !important;
    border: 1px solid var(--bt-line) !important;
    border-radius: 4px !important;
    padding: 3px !important;
    cursor: pointer;
    min-height: auto !important;
    width: auto !important;
    min-width: 168px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    line-height: 1 !important;
    transition: border-color 200ms ease;
}
.eo-section .eo-swhitcher-content:hover { border-color: var(--bt-blue-soft) !important; }
.eo-section .eo-swhitcher-content > span {
    flex: 1 1 50% !important;
    text-align: center !important;
    padding: 9px 16px !important;
    /* AvenirNextCyr-Bold for the OFF / ON labels — the bold weight reads
       cleanly on top of both the muted (off) and green (on) indicators. */
    font-family: 'avenirnextcyr-bold', 'AvenirNextCyr-Bold',
                 'Montserrat', system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--bt-ink-muted);
    line-height: 1 !important;
    position: relative !important;
    z-index: 2 !important;
    transition: color 200ms ease;
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
}
/* Indicator pill: half-width, slides between left (OFF) and right (ON).
   Overrides the legacy width:50px + margin-left:55px implementation. */
.eo-section .eo-swhitcher-content .eo-swhitcher-box {
    position: absolute !important;
    top: 3px !important;
    bottom: 3px !important;
    left: 3px !important;
    right: auto !important;
    width: calc(50% - 3px) !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 3px !important;
    background: var(--bt-ink-muted) !important;
    box-shadow: 0 2px 6px rgba(15, 60, 100, 0.18) !important;
    transition: left 250ms var(--bt-ease), background 250ms ease !important;
    z-index: 1 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    cursor: pointer;
}
.eo-section .eo-swhitcher-content .eo-swhitcher-box .switcher-box-content {
    display: none !important;
}
.eo-section .eo-swhitcher-content .eo-swhitcher-box.ON {
    left: 50% !important;
    margin-left: 0 !important;
    background: var(--bt-green) !important;
    box-shadow: 0 2px 6px rgba(34, 179, 88, 0.40) !important;
}
/* Active label sits on top of the coloured indicator and stays white
   regardless of state — relies on the indicator's contrast for the
   active/inactive distinction. */
.eo-section .eo-swhitcher-content > span:nth-of-type(1) { color: #fff; }
.eo-section .eo-swhitcher-content:has(.eo-swhitcher-box.ON) > span:nth-of-type(1) {
    color: var(--bt-ink-muted);
}
.eo-section .eo-swhitcher-content:has(.eo-swhitcher-box.ON) > span:nth-of-type(2) {
    color: #fff;
}

/* Description text inside the panel. No max-width — the description
   reads naturally across the full content width instead of cutting
   to a narrow column. */
.eo-section .eo-content-text {
    font-family: var(--bt-font-body);
    font-size: 14px;
    color: var(--bt-ink-soft);
    line-height: 1.55;
    max-width: none;
}
.eo-section .eo-content-text p { margin: 0 0 12px; }
.eo-section .eo-content-text p:last-child { margin-bottom: 0; }
.eo-section .eo-content-text a { color: var(--bt-blue); text-decoration: none; }
.eo-section .eo-content-text a:hover { text-decoration: underline; }
.eo-section .eo-content-text strong { color: var(--bt-ink); font-weight: 500; }

/* Hide legacy in-section title — banner provides the title now. */
.eo-section .eo-title-block,
.eo-section .package_sub_title {
    display: none;
}

/* === Note section ====================================================== */
/* DevTools pass: extra top padding (24 -> 34) so the textarea sits a
   touch lower under the section banner. */
.note-section .note-content { padding: 34px 28px 28px; }
.note-section .add-note-ta-container {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    width: 100%;
}
.note-section #add-note-ta,
.note-section .note-textarea {
    width: 100%;
    min-height: 130px;
    padding: 16px 18px;
    background: var(--bt-bg-soft);
    border: 1px solid var(--bt-line);
    border-radius: 5px;
    font-family: var(--bt-font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--bt-ink);
    resize: vertical;
    transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
    box-shadow: none;
    display: block;
}
.note-section #add-note-ta:focus,
.note-section .note-textarea:focus {
    outline: none;
    border-color: var(--bt-blue);
    background: var(--bt-bg);
    box-shadow: 0 0 0 3px var(--bt-blue-tint);
}
.note-section #add-note-ta::placeholder,
.note-section .note-textarea::placeholder { color: var(--bt-ink-muted); }
.note-section .note-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    flex-wrap: wrap;
    gap: 12px;
}
.note-section .note-hint {
    font-family: var(--bt-font-label);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bt-ink-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.note-section .note-hint svg {
    width: 13px;
    height: 13px;
    color: var(--bt-ink-muted);
}
.note-section .char-counter {
    font-family: var(--bt-font-label);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--bt-ink-muted);
}
.note-section .char-counter strong {
    color: var(--bt-blue);
    font-weight: 500;
}

/* === Reviews Summary section =========================================== */
.rs-section .rs-content {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.rs-section .rs-stats {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 20px 24px;
    background: var(--bt-bg-soft);
    border: 1px solid var(--bt-line);
    border-radius: 5px;
}
.rs-section .rs-rating-big {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rs-section .rs-rating-value {
    font-family: var(--bt-font-display);
    font-size: 44px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    color: var(--bt-ink);
}
.rs-section .rs-rating-value .rs-rating-out {
    font-size: 18px;
    color: var(--bt-ink-muted);
    font-weight: 500;
}
.rs-section .rs-rating-stars {
    display: flex;
    gap: 2px;
    color: var(--bt-yellow);
}
.rs-section .rs-rating-stars svg { width: 14px; height: 14px; }

.rs-section .rs-breakdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.rs-section .rs-breakdown-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--bt-font-label);
    font-size: 11px;
    color: var(--bt-ink-muted);
    letter-spacing: 0.06em;
}
.rs-section .rs-breakdown-row .rs-star-label {
    width: 24px;
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--bt-ink-soft);
    font-weight: 500;
}
.rs-section .rs-breakdown-row .rs-star-label svg {
    width: 10px;
    height: 10px;
    color: var(--bt-yellow);
}
.rs-section .rs-breakdown-bar {
    flex: 1;
    height: 4px;
    background: var(--bt-line);
    border-radius: 2px;
    overflow: hidden;
}
.rs-section .rs-breakdown-fill {
    height: 100%;
    background: var(--bt-yellow);
    border-radius: 2px;
    transform-origin: left;
    animation: rs-fill-grow 1s var(--bt-ease) backwards;
    animation-delay: 0.5s;
}
@keyframes rs-fill-grow {
    from { transform: scaleX(0); }
}
.rs-section .rs-breakdown-row .rs-pct {
    min-width: 32px;
    text-align: right;
    color: var(--bt-ink-soft);
    font-weight: 500;
}
.rs-section .rs-totals {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rs-section .rs-totals-number {
    font-family: var(--bt-font-display);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--bt-ink);
    line-height: 1;
}
.rs-section .rs-totals-label {
    font-family: var(--bt-font-label);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bt-ink-muted);
}

.rs-section .rs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.rs-section .rs-card {
    background: var(--bt-bg);
    border: 1px solid var(--bt-line);
    border-radius: 5px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 200ms ease, transform 250ms var(--bt-ease);
    position: relative;
}
.rs-section .rs-card:hover {
    border-color: var(--bt-blue-soft);
    transform: translateY(-2px);
}
.rs-section .rs-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.rs-section .rs-card-stars {
    display: flex;
    gap: 1px;
    color: var(--bt-yellow);
}
.rs-section .rs-card-stars svg { width: 13px; height: 13px; }
.rs-section .rs-verified {
    font-family: var(--bt-font-label);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bt-green);
    display: flex;
    align-items: center;
    gap: 4px;
}
.rs-section .rs-verified svg { width: 11px; height: 11px; }
.rs-section .rs-quote {
    font-family: var(--bt-font-body);
    font-size: 13px;
    line-height: 1.55;
    color: var(--bt-ink-soft);
    flex: 1;
    margin: 0;
}
.rs-section .rs-quote::before { content: '\201C'; color: var(--bt-blue); font-weight: 500; margin-right: 1px; }
.rs-section .rs-quote::after  { content: '\201D'; color: var(--bt-blue); font-weight: 500; margin-left: 1px; }
.rs-section .rs-reviewer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--bt-line);
}
.rs-section .rs-avatar {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--bt-blue), var(--bt-blue-deep));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bt-font-display);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0;
    flex-shrink: 0;
}
.rs-section .rs-avatar.alt-1 { background: linear-gradient(135deg, #d4a045, #b8870a); }
.rs-section .rs-avatar.alt-2 { background: linear-gradient(135deg, var(--bt-green), var(--bt-green-deep)); }
.rs-section .rs-reviewer-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.rs-section .rs-reviewer-name {
    font-family: var(--bt-font-display);
    font-weight: 500;
    font-size: 14px;
    color: var(--bt-ink);
    letter-spacing: 0;
}
.rs-section .rs-reviewer-meta {
    font-family: var(--bt-font-label);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bt-ink-muted);
}

.rs-section .rs-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
    gap: 12px;
    flex-wrap: wrap;
}
.rs-section .rs-platforms {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rs-section .rs-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--bt-bg-soft);
    border: 1px solid var(--bt-line);
    border-radius: 3px;
    font-family: var(--bt-font-label);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bt-ink-muted);
}
.rs-section .rs-platform-badge svg {
    width: 11px;
    height: 11px;
    color: var(--bt-green);
}
.rs-section .rs-link {
    font-family: var(--bt-font-label);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bt-blue-deep);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bt-blue-tint);
    border: 1px solid var(--bt-blue-soft);
    border-radius: 4px;
    transition: all 200ms var(--bt-ease);
}
.rs-section .rs-link:hover {
    background: var(--bt-blue);
    color: #fff;
    border-color: var(--bt-blue);
}
.rs-section .rs-link svg {
    width: 13px;
    height: 13px;
    transition: transform 200ms var(--bt-ease);
}
.rs-section .rs-link:hover svg { transform: translateX(3px); }

/* === Responsive ======================================================== */
@media (max-width: 1100px) {
    .rs-section .rs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
    .bt-section-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 22px 22px;
    }
    .bt-banner-right { align-items: flex-start; }
    .bt-banner-title { font-size: 24px; }
    .eo-section,
    .note-section,
    .rs-section {
        margin-top: 28px;
    }
    .eo-section .eo-tabs,
    .eo-section .eo-content,
    .eo-section .eo-right-block,
    .note-section .note-content,
    .rs-section .rs-content {
        padding-left: 20px;
        padding-right: 20px;
    }
    .rs-section .rs-stats { grid-template-columns: 1fr; }
    .rs-section .rs-grid  { grid-template-columns: 1fr; }
    .rs-section .rs-totals { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .eo-section, .note-section, .rs-section {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .eo-section *, .eo-section *::before, .eo-section *::after,
    .note-section *, .note-section *::before, .note-section *::after,
    .rs-section *, .rs-section *::before, .rs-section *::after {
        animation-duration: 0.01s !important;
        transition-duration: 0.01s !important;
    }
}

/* ===========================================================================
   SITE REVIEWS PLUGIN (.product-reviews-composite + .glsr-*)
   ============================================================================
   Pure-CSS retrofit of the Site Reviews (GeminiLabs) plugin output on
   /customer-reviews/ and any product page that emits
   [boosting_reviews_composite]. No template edits — the existing
   shortcode markup stays exactly as the plugin renders it; styling
   lifts the layout into the same brand-blue, AvenirNextCyr language
   as the Extra Options / Note / Reviews Summary cards.

   Structure (multiboosting shortcodes.php):
     .product-reviews-composite
       .reviewh2                     (heading → dark banner)
       .prc-container                (3-col grid → 1-col stack)
         .pilot_boost                (Trustpilot button — optional)
         #prc-summary-container      (.bt-reviews-summary)
         #prc-reviews-container      (.bt-reviews)
         #prc-form-container         (.bt-reviews-form)

   The plugin form (.glsr-form) is left functional — every <input>,
   <textarea>, <select> and the [type=submit] keep their original DOM,
   just restyled.
============================================================================ */

.product-reviews-composite {
    background: var(--bt-bg);
    color: var(--bt-ink);
    font-family: var(--bt-font-body);
    /* DevTools pass: borderless reviews card. --bt-shadow-soft is now
       commented out at the variable level so the box-shadow declaration
       falls back to "none" — the card sits flat on the page like the
       FAQ blocks above. */
    border: 0 solid var(--bt-line);
    border-radius: 10px;
    box-shadow: var(--bt-shadow-soft);
    overflow: hidden;
    margin-top: 40px !important;
    margin-bottom: 0;
    max-width: 100% !important;
    width: auto !important;
    padding: 0 !important;
    position: relative;
}

/* Footer link to /customer-reviews/ — rendered by
   boosting_reviews_composite() as a real <a class="prc-footer-link">.
   Darker neutral colour per review feedback (#4f5254) so the link
   reads as a clear text CTA rather than washed-out support text. */
.product-reviews-composite .prc-footer-link {
    display: block;
    padding: 18px 32px 22px;
    /* Full border (was border-top only) so the link reads as a discrete
       block at the bottom of the composite — pairs with the now-
       borderless outer card. */
    border: 1px solid var(--bt-line);
    background: var(--bt-bg-soft);
    font-family: var(--bt-font-label);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4f5254;
    text-align: center;
    text-decoration: none;
    transition: color 200ms ease, background 200ms ease;
}
.product-reviews-composite .prc-footer-link:hover {
    color: var(--bt-blue);
    background: var(--bt-blue-tint);
    text-decoration: none;
}

/* "Read the reviews" heading is the plugin caption — promote it into
   the dark banner used everywhere else in the section system. */
.product-reviews-composite .reviewh2,
.product-reviews-composite h2.reviewh2,
.product-reviews-composite h3.reviewh2,
.product-reviews-composite h2.packageh2 {
    margin: 0 !important;
    padding: 30px 32px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0.18), transparent 55%),
        linear-gradient(135deg, #0a72b8 0%, var(--bt-blue) 50%, var(--bt-blue-deep) 100%);
    color: #fff !important;
    font-family: var(--bt-font-display);
    font-weight: 500;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: 0;
    text-transform: uppercase;
    border: 0;
    border-radius: 0;
    text-align: left;
}
.product-reviews-composite .reviewh2::before { content: none; }
/* The boosting parent theme's main.css renders the caption h3 as
   .package_sub_title (a solid #0364a9 banner). That selector wasn't in
   our earlier banner targets, so the subtitle ::after never landed.
   Override display from flex to block so ::after stacks below the
   title instead of sitting beside it as a flex sibling, then inject
   the subtitle text to match Extra Options / Note / About banners. */
.product-reviews-composite .package_sub_title {
    display: block !important;
    align-items: unset !important;
    text-shadow: none !important;
    /* Match the .bt-banner-title 30px size AND the 30px 32px padding
       on Extra Options / Note / About banners — the legacy main.css
       set this to 22px / 25px 10px 25px 20px which read smaller and
       offset to the left. */
    font-size: 30px !important;
    line-height: 1.05 !important;
    padding: 30px 32px !important;
    margin: 0 !important;
}
.product-reviews-composite .reviewh2::after,
.product-reviews-composite .package_sub_title::after {
    content: 'What players using our service have to say';
    display: block;
    margin-top: 8px;
    font-family: var(--bt-font-body);
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.5;
    max-width: 720px;
    text-shadow: none;
}

/* Body padding sits inside the composite below the banner */
.product-reviews-composite .prc-container {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    grid-template-rows: auto auto;
    gap: 24px 32px;
    /* DevTools pass: top padding bumped to 40, horizontal trimmed to 0,
       bottom 20 — sidebar + reviews column hang flush with the card
       edges so the grid feels less boxed in. */
    padding: 40px 0 20px;
    margin: 0;
    max-width: 100%;
}
.product-reviews-composite #prc-summary-container {
    grid-column: 1;
    grid-row: 1;
}
.product-reviews-composite #prc-reviews-container {
    grid-column: 2;
    grid-row: 1 / span 2;
}
.product-reviews-composite #prc-form-container {
    grid-column: 1;
    grid-row: 2;
}
.product-reviews-composite .pilot_boost {
    grid-column: 1 / -1;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
    border: 0;
    text-align: left;
}
.product-reviews-composite .pilot_boost img {
    height: 36px;
    width: auto;
    max-width: 100%;
}

/* --- Summary card (rating + breakdown bars) ---
   No outer card chrome — the plugin's own .glsr-summary block
   draws its own card-style background. Wrapping it would create a
   double-border look. We just provide spacing here. */
.product-reviews-composite #prc-summary-container,
.product-reviews-composite .bt-reviews-summary {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}
.product-reviews-composite .glsr-summary {
    background: var(--bt-bg-soft) !important;
    border: 1px solid var(--bt-line) !important;
    border-radius: 8px !important;
    padding: 20px 22px !important;
    margin: 0 !important;
}
/* Summary card content — rating value (big "4.9"), 5-star row, and the
   per-star breakdown bars. The plugin's actual DOM (verified via live
   inspect) puts the breakdown inside .glsr-summary-percentages
   (plural — earlier rules targeted -percentage by mistake and never
   matched). Each row is .glsr-bar with .glsr-bar-label / -background /
   -background-percent / -percent children. */
.product-reviews-composite .glsr-summary {
    background: var(--bt-bg-soft) !important;
    border: 1px solid var(--bt-line) !important;
    border-radius: 8px !important;
    padding: 20px 22px !important;
    margin: 0 !important;
    font-family: var(--bt-font-body) !important;
    color: var(--bt-ink-soft) !important;
}
.product-reviews-composite .glsr-summary-rating {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 4px;
}
.product-reviews-composite .glsr-summary-rating,
.product-reviews-composite .glsr-summary-rating .glsr-tag-value {
    font-family: var(--bt-font-display) !important;
    font-weight: 500 !important;
    font-size: 36px !important;
    color: var(--bt-ink) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}
.product-reviews-composite .glsr-summary-stars {
    margin: 0 0 6px;
}
.product-reviews-composite .glsr-summary-stars .glsr-star-rating {
    color: var(--bt-yellow);
}
.product-reviews-composite .glsr-summary-text,
.product-reviews-composite .glsr-summary-text .glsr-tag-value {
    font-family: var(--bt-font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--bt-ink-muted) !important;
    /* Bottom margin trimmed 16 -> 8 so the summary text sits closer to
       the breakdown bars below it. */
    margin: 0 0 8px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.4 !important;
}
/* Breakdown rows — each .glsr-bar is a 3-col grid: label | track | %. */
.product-reviews-composite .glsr-summary-percentages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.product-reviews-composite .glsr-bar {
    display: grid !important;
    grid-template-columns: 76px 1fr 38px !important;
    gap: 12px !important;
    align-items: center !important;
    background: transparent !important;
    height: auto !important;
    border-radius: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.product-reviews-composite .glsr-bar-label {
    font-family: var(--bt-font-body) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--bt-ink-soft) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: left !important;
    line-height: 1.2 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    width: auto !important;
}
.product-reviews-composite .glsr-bar-background {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 6px !important;
    background: var(--bt-line) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.product-reviews-composite .glsr-bar-background-percent {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    background: var(--bt-yellow) !important;
    border-radius: 3px !important;
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
}
.product-reviews-composite .glsr-bar-percent {
    font-family: var(--bt-font-body) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--bt-ink-muted) !important;
    text-align: right !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    line-height: 1.2 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
}
.product-reviews-composite .glsr-minimal .glsr-bar-background-percent {
    background: var(--bt-yellow) !important;
}

/* --- Review list (right column) --- */
.product-reviews-composite #prc-reviews-container,
.product-reviews-composite .bt-reviews {
    background: transparent;
}
.product-reviews-composite .glsr-default .glsr-reviews,
.product-reviews-composite .glsr-default .glsr-reviews-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
}
.product-reviews-composite .glsr-default .glsr-review {
    background: var(--bt-bg);
    border: 1px solid var(--bt-line);
    border-radius: 8px;
    /* Heavy right padding (25%) reserves a clear gutter on the right
       edge of each review card — gives the verified badge + meta
       chips room to breathe instead of crowding the next column. */
    padding: 18px 25% 20px 20px;
    transition: border-color 200ms ease, transform 250ms var(--bt-ease);
    list-style: none;
    margin: 0;
}
.product-reviews-composite .glsr-default .glsr-review:hover {
    border-color: var(--bt-blue-soft);
    transform: translateY(-2px);
}
.product-reviews-composite .glsr-review-title,
.product-reviews-composite .glsr-review-title h3 {
    font-family: var(--bt-font-display);
    font-weight: 500;
    font-size: 16px;
    color: var(--bt-ink);
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0 0 8px;
    text-transform: none;
}
.product-reviews-composite .glsr-default .glsr-review-rating,
.product-reviews-composite .glsr-default .glsr-review-rating + .glsr-review-date {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.product-reviews-composite .glsr-review-date {
    font-family: var(--bt-font-label);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--bt-ink-muted);
    text-transform: none;
}
.product-reviews-composite .glsr-default .glsr-review p {
    font-family: var(--bt-font-body) !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: #171e27 !important;
    margin: 4px 0 10px !important;
}
.product-reviews-composite .glsr-default .glsr-review-author {
    font-family: var(--bt-font-display);
    font-weight: 500;
    font-size: 14px;
    color: var(--bt-ink);
}
.product-reviews-composite .glsr-default .glsr-review-author + .glsr-review-meta,
.product-reviews-composite .glsr-default .glsr-review-author span {
    margin-left: 0 !important;
    font-family: 'avenirnextcyr-bold', 'AvenirNextCyr-Bold', 'Montserrat', system-ui, sans-serif !important;
}
/* Custom-verified-purchase badge ([_reviews.scss] already injects this
   via ::after on the title — restyle to match the new design.) */
.product-reviews-composite .glsr-review-title h3:after {
    content: "✓ Verified" !important;
    font-family: var(--bt-font-label);
    font-weight: 500;
    font-size: 10px;
    color: var(--bt-green-deep);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--bt-green-tint);
    border: 1px solid var(--bt-green-soft);
    padding: 3px 7px;
    border-radius: 3px;
    display: inline-block;
    margin: 0 0 0 8px;
    vertical-align: middle;
    line-height: 1;
}

/* Pagination (1, 2, 3 … Next) */
.product-reviews-composite .nav-links,
.product-reviews-composite .glsr-pagination {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    font-family: var(--bt-font-label);
    /* Pagination text bumped 13 -> 14 to match the rest of the .06em
       sized links on the reviews composite. */
    font-size: 14px;
    font-weight: 500;
}
.product-reviews-composite .nav-links .page-numbers,
.product-reviews-composite .glsr-pagination .page-numbers {
    color: var(--bt-blue-deep);
    padding: 6px 10px;
    border-radius: 3px;
    /* DevTools pass: force Roboto on the page-number digits so the
       1 / 2 / 3 reads consistently across browsers — the parent
       --bt-font-label stack resolves to AvenirNextCyr which doesn't
       have great numeral kerning. */
    font-family: 'Roboto', system-ui, sans-serif;
    text-decoration: none;
    background: var(--bt-bg);
    border: 1px solid var(--bt-line);
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.product-reviews-composite .nav-links .page-numbers:hover {
    background: var(--bt-blue-tint);
    border-color: var(--bt-blue-soft);
}
.product-reviews-composite .nav-links .page-numbers.current {
    background: var(--bt-blue);
    color: #fff;
    border-color: var(--bt-blue);
}

/* --- Form (.glsr-form) ---
   DOM nests as: #prc-form-container > .glsr-form-wrap > form.glsr-form
   We need ONE bordered card, not three. The outer container carries
   the chrome; the inner wrappers stay transparent so content sits
   directly inside the card padding without a nested second box. */
.product-reviews-composite #prc-form-container {
    background: var(--bt-bg-soft);
    border: 1px solid var(--bt-line);
    border-radius: 8px;
    padding: 22px 24px 24px;
    margin: 0;
    font-family: var(--bt-font-body);
}
.product-reviews-composite #prc-form-container .glsr-form-wrap,
.product-reviews-composite .glsr-form-wrap,
.product-reviews-composite .bt-reviews-form,
.product-reviews-composite form.glsr-form,
.product-reviews-composite form.glsr-review-form {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
/* The "Tell us about your experience" intro is rendered by
   _reviews.scss via ::before on .glsr-form-wrap. Restyle to match
   the section's typography. */
.product-reviews-composite .glsr-form-wrap::before {
    content: "Tell us about your experience";
    display: block;
    /* DevTools pass: form heading switched from League (display) to
       AvenirNextCyr-Bold so the prompt reads as a sentence-case body
       headline, not an uppercase display title. */
    font-family: 'avenirnextcyr-bold', 'AvenirNextCyr-Bold',
                 'Montserrat', system-ui, sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: var(--bt-ink);
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0 0 14px;
    border: 0;
    padding: 0;
}
.product-reviews-composite .glsr-form,
.product-reviews-composite form.glsr-form {
    margin-top: 0;
    background: transparent;
    border: 0;
    padding: 0;
}
.product-reviews-composite .glsr-form .glsr-field {
    margin: 0 0 14px;
}
.product-reviews-composite .glsr-form .glsr-field > label,
.product-reviews-composite .glsr-form .glsr-field > .glsr-label {
    display: block;
    font-family: var(--bt-font-label);
    font-size: 11px;
    font-weight: 500;
    color: var(--bt-ink-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.product-reviews-composite .glsr-form input.glsr-input,
.product-reviews-composite .glsr-form textarea.glsr-textarea,
.product-reviews-composite .glsr-form select.glsr-select,
.product-reviews-composite .glsr-form .jcf-select {
    width: 100% !important;
    padding: 8px 5px !important;
    background: var(--bt-bg) !important;
    border: 1px solid var(--bt-line) !important;
    border-radius: 5px !important;
    font-family: var(--bt-font-body) !important;
    font-size: 16px !important;
    color: var(--bt-ink) !important;
    line-height: 1.4 !important;
    transition: border-color 200ms ease, box-shadow 200ms ease !important;
    box-shadow: none !important;
}
/* JCF replaces native <select> with a styled <span class="jcf-select">
   wrapper that contains an inner <span class="jcf-select-text"> holding
   the visible label. Tighten the label so it matches the input height
   and reads consistently with the other fields. */
.jcf-select .jcf-select-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: default;
    display: block;
    font-size: 16px;
    line-height: 16px;
    /* Capped at 500 — the rest of the .bt-section CSS holds weights at
       500 or below since the brand fonts (AvenirNextCyr-Bold) are bold
       by themselves. Synthesising weight 700 on top reads as fuzzy. */
    font-weight: 500;
    margin: 0 36px 0 8px;
}
/* Cap the heaviest plugin weights at 500. The legacy main.css block
   that pinned these to 700 was removed in this PR (themes/boosting/
   assets/css/main.css), so this rule now provides the cleaner weight. */
.glsr-default .glsr-review-verified,
.glsr-form-wrap::before {
    font-weight: 500 !important;
}
/* Review card author / date alignment. The default plugin styles
   shove the author and date with a left margin meant to clear an
   avatar that we don't render — flatten the offset and pin the
   font-size so the meta row reads cleanly. */
.glsr-default .glsr-review-avatar + .glsr-review-author span,
.glsr-default .glsr-review-rating + .glsr-review-date span {
    margin-left: 0 !important;
    font-size: 14px;
}
.product-reviews-composite .glsr-form input.glsr-input:focus,
.product-reviews-composite .glsr-form textarea.glsr-textarea:focus,
.product-reviews-composite .glsr-form select.glsr-select:focus {
    outline: none !important;
    border-color: var(--bt-blue) !important;
    box-shadow: 0 0 0 3px var(--bt-blue-tint) !important;
}
.product-reviews-composite .glsr-form textarea.glsr-textarea {
    min-height: 110px;
    resize: vertical !important;
}
.product-reviews-composite .glsr-form input.glsr-input::placeholder,
.product-reviews-composite .glsr-form textarea.glsr-textarea::placeholder {
    color: var(--bt-ink-muted) !important;
}
/* Toggle consent ("For a verified review please log in.") */
.product-reviews-composite .glsr-field-choice.glsr-required::before,
.product-reviews-composite .glsr-form .glsr-field.glsr-field-choice.glsr-required:before {
    content: "For a verified review please log in." !important;
    display: block;
    font-family: var(--bt-font-label);
    font-size: 11px;
    font-weight: 500;
    color: var(--bt-ink-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.product-reviews-composite .glsr-form .glsr-toggle label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--bt-font-body) !important;
    font-size: 13px !important;
    color: var(--bt-ink-soft) !important;
    cursor: pointer;
}
/* Submit button — match the RANK UP CTA from pack-cards */
.product-reviews-composite .glsr-default form.glsr-form [type=submit],
.product-reviews-composite form.glsr-form [type=submit] {
    width: 100% !important;
    height: 52px !important;
    padding: 0 20px !important;
    background: var(--bt-blue) !important;
    color: #fff !important;
    border: 0 !important;
    /* Submit button radius 7 -> 6 so it matches the rest of the form
       inputs which sit on a tighter 6px corner. */
    border-radius: 6px !important;
    font-family: var(--bt-font-display) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 14px !important;
    box-shadow:
        0 4px 14px rgba(37, 99, 235, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -2px 0 rgba(0, 0, 0, 0.10) !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.product-reviews-composite .glsr-default form.glsr-form [type=submit]:hover,
.product-reviews-composite form.glsr-form [type=submit]:hover {
    transform: translateY(-2px) !important;
    color: #fff !important;
    background: var(--bt-blue) !important;
    box-shadow:
        0 6px 20px rgba(37, 99, 235, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -2px 0 rgba(0, 0, 0, 0.10) !important;
}

/* Stars — keep the existing star-fill / star-outline image swap from
   _reviews.scss, just colour the rating tier yellow. */
.product-reviews-composite .glsr-star-rating,
.product-reviews-composite .glsr-stars,
.product-reviews-composite .gl-star-rating--stars {
    color: var(--bt-yellow);
}

/* Responsive: stack the 2-col grid on tablet down */
@media (max-width: 900px) {
    .product-reviews-composite .prc-container {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 22px 22px 24px;
    }
    .product-reviews-composite #prc-summary-container,
    .product-reviews-composite #prc-reviews-container,
    .product-reviews-composite #prc-form-container {
        grid-column: 1;
        grid-row: auto;
    }
    .product-reviews-composite .reviewh2 { font-size: 24px; padding: 22px 22px; }
}

/* ===========================================================================
   BOTTOM SUPPORT BLOCK — .product_help_bot
   ============================================================================
   This is the "Got any questions? / live chat / We're online 24/7" card that
   the About-section template appends to its body content. DOM structure
   (live inspect of /lol-boosting-packs/):

     <div class="bt-section-body service-info-text-container">
       …about copy…
       <div class="product_help_bot">
         <span class="product_help_bot_pic">
           <img src=".../supportcrown.webp">
         </span>
         <div class="h2helptext">
           <h3 class="h3help">
             Got any questions? Looking for the best price?
             <strong>Contact us via live chat in the corner</strong>
             We're online 24/7
           </h3>
         </div>
       </div>
     </div>

   Because the block sits inside .bt-section-body, it was inheriting the
   body's --bt-ink-soft text colour and the .bt-section-body strong rule's
   --bt-ink — which on the new blue card background read as dark grey on
   blue. This block now gets its own banner-style chrome and forces the
   inner text to white. Scoped tightly so the rule only fires on this
   exact class.
============================================================================ */

.bt-section .product_help_bot,
.product_help_bot {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0.18), transparent 55%),
        linear-gradient(135deg, #0a72b8 0%, var(--bt-blue, #0364a8) 50%, var(--bt-blue-deep, #024c80) 100%);
    color: #fff !important;
    border-radius: 10px;
    padding: 32px 28px;
    margin: 32px 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    border: 0;
    box-shadow: 0 4px 14px rgba(3, 100, 168, 0.18);
    overflow: hidden;
    position: relative;
}
.bt-section .product_help_bot .product_help_bot_pic,
.product_help_bot .product_help_bot_pic {
    display: inline-block;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    width: auto;
    height: auto;
    /* Legacy main.css sets `position: relative; left: 43%; width: 150px`
       which shoved the fox image off-center. Reset so the flex column
       above can centre it cleanly. */
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}
.bt-section .product_help_bot .product_help_bot_pic img,
.product_help_bot .product_help_bot_pic img {
    width: 130px;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.30));
}
.bt-section .product_help_bot .h2helptext,
.product_help_bot .h2helptext {
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
}
/* Heading: three lines (line 1 text, line 2 <strong>, line 3 text). The
   legacy main.css makes the strong display block — keep that, but force
   our colour + typography. !important required because the legacy rules
   set their own colour / font / display: block via main.css. */
.bt-section .product_help_bot .h3help,
.product_help_bot .h3help {
    font-family: var(--bt-font-display, 'League'), 'avenirnextcyr-bold', 'Montserrat', system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 22px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-align: center !important;
}
.bt-section .product_help_bot .h3help strong,
.product_help_bot .h3help strong {
    display: block !important;
    font-family: var(--bt-font-body, 'avenirnextcyr-medium'), system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-style: italic !important;
    margin: 8px 0 !important;
    line-height: 1.4 !important;
}

/* Responsive: tighter padding on mobile */
@media (max-width: 680px) {
    .bt-section .product_help_bot,
    .product_help_bot {
        padding: 26px 20px;
    }
    .bt-section .product_help_bot .product_help_bot_pic img,
    .product_help_bot .product_help_bot_pic img {
        width: 110px;
    }
    .bt-section .product_help_bot .h3help,
    .product_help_bot .h3help {
        font-size: 18px !important;
    }
    .bt-section .product_help_bot .h3help strong,
    .product_help_bot .h3help strong {
        font-size: 14px !important;
    }
}

/* Product-type tab row (Placement / Wins / Rank / Duo Rank / Duo Wins /
   Coaching / XL Deals) — give the ul a 30px bottom margin so it spaces
   away from the pack grid cleanly. Theme main.css doesn't set this. */
.booster_packege_tabs ul {
    margin: 0 auto 30px !important;
}

/* ===========================================================================
   CALC + DESCRIPTION TYPOGRAPHY — site-wide bumps
   ============================================================================
   These selectors live outside the section system (.choosen_text appears
   inside the Extra Options description content, .calc-widget-title /
   .tier-name / .rt-card-value drive the boosting calculator above the
   pack grid). Bumped here in extra-options.css since this file is
   already loaded on every product page.
============================================================================ */

.choosen_text {
    margin: 20px auto;
    font-size: 18px;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    color: #252525;
}

.calc-widget-title {
    font-size: 36px;
}

.tier-name {
    font: 30px league;
}

.ps-select-container.rt-rank-bottom .rt-card-value,
.rt-platform-row .rt-card-value {
    font-size: 22px !important;
}