/*
 * Enigma Software Group CONFIDENTIAL — [2003]-[2026] Enigma Software Group.
 *
 * Layout-3 overrides + additions for the v3 purchase page. Kept in a
 * separate file from the legacy `purchase-layout-3.css` so the diff
 * between "stock legacy" and "v3 tweaks" stays obvious. Loaded after the
 * legacy stylesheet in `components/layouts/app.blade.php` so the rules
 * here win on equal specificity.
 */

/* ── 1 Device Only → red. The grey `.product-line-item .one-device-only`
   rule in purchase-layout-3.css:582 set `color: #7D7F89`; we override
   only on the Basic card (the single-device product) so the multi-device
   variants that share the class don't accidentally pick up the red. */
.product-line-item.basic .one-device-only {
    color: #D64545;
}

/* ── Always show the device count/pictogram on every card. The legacy
   layout-3 stylesheet (line 803) hides `.devices` on non-selected cards,
   which collapses both "1 Device Only" (Basic) and the 10_devices
   pictogram (Pro / Mac) until the customer clicks the card. v3 wants
   them visible all the time so the device count is part of the
   at-a-glance comparison. */
.layout-3 .product-line-item:not(.selected) .devices {
    display: block;
}

/* ── Bundled-device pictogram (10_devices.svg). Replaces the text label
   on SH Pro / SH Mac cards. Sized to match the inline text height the
   legacy template left in place. */
.product-line-item .devices-icon {
    display: block;
    margin: 0 auto;
    max-height: 36px;
    max-width: 100%;
}

/* ── SH Pro renders the device pictogram larger because it sits in the
   dedicated left column of the two-column card layout, beside the
   features list. */
.product-line-item.pro .devices-icon {
    width: 240px;
    height: 85px;
    max-height: none;
    margin-top: 16px;
}

/* ── SH Mac (row layout) mirrors the legacy generic row
   (product_line_item_row_layout_4): the product title, the monthly price
   with the "(Billed as … semiannually for the first year)" line beneath
   it, and the 10-device pictogram all sit on a single line. `align-items:
   center` puts the 72px-tall pictogram on the same baseline as the title
   and price; the wider device column gives the 272×72 banner room. No
   "Save %" — it's removed from the row partial, matching the legacy row. */
.product-line-item.row.shm > div:nth-child(1) {
    align-items: center;
}

/* Four columns on one line: title · price(+billed) · 10-device banner ·
   intro-price subtotal. Rebalanced from the legacy 30/25/21/13 to give the
   272px banner room while keeping the right-aligned subtotal. */
.product-line-item.row.shm .product-info-width {
    width: 31%;
}

.product-line-item.row.shm .price-details-width {
    width: 24%;
}

.product-line-item.row.shm .devices-width {
    width: 23%;
}

.product-line-item.row.shm .subtotal-width {
    width: 11%;
}

.product-line-item.row.shm .devices-icon {
    width: 272px;
    height: 72px;
    max-width: 100%;
    max-height: none;
}

/* The intro-offer price (current-subtotal) on the right of the Mac box. The
   legacy stylesheet right-aligns it but hides it on non-selected rows and
   adds a 25px top offset; the Mac tab has a single always-selected product
   and the row is vertically centred, so force it visible with no offset. */
.product-line-item.row.shm .subtotal {
    padding-top: 0;
}

.product-line-item.row.shm .subtotal .current-subtotal {
    display: block;
}

/* Struck-through pre-promo price above the discounted subtotal — the
   legacy row stylesheet hides `.base-subtotal` by default (it only shows
   on volume-discount rows), so force it like the current-subtotal above. */
.product-line-item.row.shm .subtotal .base-subtotal {
    display: block;
}

/* ── "Save :percent%" — separate row beneath the main monthly price. The
   legacy template ran "Save 43%" inline inside the billed-upfront
   parenthetical; v3 lifts it to its own emphasised line for scannability.
   Value is computed from the next_phase chain (retail − year_one) ÷ retail
   in `PurchasePage::buildPriceFields()`, so the % updates automatically
   whenever the Stripe price catalogue moves. */
.product-line-item .save-percent {
    color: #C8102E;
    text-align: center;
    text-transform: uppercase;
    margin: 2px 0 4px;
    font: normal normal 900 19px / 19px "Avenir Black";
}

/* ── Grey divider beneath the "(Billed as € 52.48 € 29.70 semiannually
   for the first year.)" line, matching the separator used elsewhere in
   layout-3 (1px #DEE3E5). Keeps the upcoming-billing block visually
   distinct from the product-features list below it. */
.product-line-item .billed-upfront-container.column-price-details {
    border-bottom: 1px solid #DEE3E5;
    padding-bottom: 9px;
}

/* ── Order summary bottom row: the whole cluster — intro-offer / savings
   chip plus the Total + tax-note block (`.total-with-tax-note`, styled
   further down) — hugs the RIGHT edge, chip directly left of the Total.

   `baseline` rather than `flex-start`: the chip and the Total are different
   type sizes, and the chip adds its own border and padding, so aligning their
   BOXES leaves the two lines of text visibly off from each other. Aligning
   text baselines instead makes "YOU SAVE …" sit on the same line as
   "Total (EUR):". The tax note beneath the total does not disturb this — a
   flex item's baseline is that of its FIRST line, so the block still anchors
   on the Total row whether or not the note renders. */
.order-pricing .flex-container.total-row {
    justify-content: flex-end;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

/* Inside the row the block must NOT carry the auto left margin the
   standalone wrapper rule gives it — the cluster stays packed together
   at the right instead of the chip being pushed to the far left. */
.layout-3 .order-pricing .total-row div.total-with-tax-note {
    margin-left: 0;
}

.order-pricing .flex-container.total {
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Affiliate promo-code field: white fill instead of the grey it
   inherits from the order-area background. */
.layout-3 .order-summary .promo-container .form input {
    background: #FFFFFF;
}

/* ── Applied promo code: the field locks and "Apply" is replaced by the button
   that clears it. A grey fill separates the locked field from the editable one
   the rule above paints white; the pseudo-class outranks it on specificity, so
   source order between the two does not matter. */
.layout-3 .order-summary .promo-container .form input:disabled {
    background: #F2F5F7;
    color: #6B7780;
    cursor: default;
}

/* Confirmation under the field. Same metrics as `.pay-summary__promo-error`
   so the success and error states occupy identical space and nothing below
   shifts when one replaces the other; green matches the applied-coupon colour
   already used elsewhere in the summary. */
.layout-3 .pay-summary__promo-success {
    margin: 6px 0 0;
    font-size: 12px;
    color: #1F8A4C;
}

/* Legacy palette (lifted from purchase_v2 by the user):
   pale-mint chip with green border, dark default text. `nowrap` keeps
   "ONE-TIME 1 MO. INTRODUCTORY OFFER" on a single line so the long phrase
   does not wrap "OFFER" onto a second row. */
.order-pricing .intro-offer-label {
    background: #DCFFEF;
    border: 1px solid #00BE5B;
    font-size: 16px;
    text-align: center;
    padding: 6px 8px;
    margin-right: auto;
    white-space: nowrap;
    text-transform: uppercase;
    border-radius: 3px;
}

.order-pricing .intro-offer-label strong {
    font-weight: bold;
}

/**********************************************************************************************************************/
/* "Special" (uninstall) offer page                                                                                   */
/* Reuses the generic row layout but trims it for a single, pre-selected offer:                                       */
/*   - drop the redundant "10 Devices Included" red label (the device pictogram already states it),                   */
/*   - surface the "(Billed as … semiannually for the first year.)" upcoming-billing line, which the row layout       */
/*     hides by default.                                                                                              */
/* Scoped to `.uninstall-offer` so the main purchase page's Mac row is untouched.                                     */
/**********************************************************************************************************************/
.uninstall-offer .product-line-item .red-label-box {
    display: none;
}

.uninstall-offer .product-line-item.row .price-details .subscription-price {
    display: block;
    font-size: 12px;
    color: #1A1A1A;
    text-align: center;
}

/* Product headline (wrapped in <b> by the row partial) shouldn't be bold here. */
.uninstall-offer .product-line-item .product-title .text b {
    font-weight: normal;
}

/* ── Align the row like the Mac / legacy generic row, not the Windows Pro
   COLUMN the `.pro` class otherwise styles it as. The single offered product
   has id `pro`, so it inherits `.pro .unit-monthly-price` (20px/26px spacing +
   blue underline) meant for the column card — reset it to the generic row's
   tight margin so the four blocks (title · monthly price · device banner ·
   subtotal) line up on one centred row, matching purchase_spyhunter_uninst. */
.uninstall-offer .product-line-item.row > div:nth-child(1) {
    align-items: center;
}

.uninstall-offer .product-line-item.pro .unit-monthly-price {
    margin: 0 0 8px 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* Mac-row column balance + 272×72 device banner + always-visible subtotal. */
.uninstall-offer .product-line-item.row .product-info-width {
    width: 28%;
}

.uninstall-offer .product-line-item.row .price-details-width {
    width: 28%;
}

.uninstall-offer .product-line-item.row .devices-width {
    width: 24%;
}

.uninstall-offer .product-line-item.row .subtotal-width {
    width: 9%;
}

.uninstall-offer .product-line-item.row .devices-icon {
    width: 272px;
    height: 72px;
    max-width: 100%;
    max-height: none;
}

.uninstall-offer .product-line-item.row .subtotal {
    padding-top: 0;
}

.uninstall-offer .product-line-item.row .subtotal .current-subtotal {
    display: block;
}

/* ── The trial offer has a single product, so its line item must stretch to
   fill the full inner-body width. `.product-items-container` is a flex row
   (purchase-layout-3.css:431, justify-content: space-between), so without a
   flex-basis the lone item only takes its content width and sits left. */
.layout-3 .free-trial .product-items-container .free-trial-line-item {
    flex: 1 1 100%;
}

/* ── Trial-offer line item: render the bundled-device count as the
   10_devices.svg pictogram (same 272×72 banner as the uninstall offer /
   legacy free-trial row) instead of a text label. `.free-trial-line-item`
   is a flex row (purchase-layout-3.css:3124) whose `.description` grows to
   fill the width and push the pictogram + amount to the right; `flex-grow:0`
   keeps the banner at its natural size. */
.layout-3 .free-trial .free-trial-line-item .devices-icon {
    flex-grow: 0;
    flex-shrink: 0;
    height: 56px;
    width: auto;
    max-width: 100%;
    margin-right: 4%;
}

/* ── Larger product logo than the legacy 34px (purchase-layout-3.css:3144). */
.layout-3 .free-trial .free-trial-line-item .logo img {
    height: 40px;
}

/* ── The product headline + "More Info/Details" link sit under the product
   name inside `.description`. The headline stays bold (like the name); only
   the link reverts to normal weight via `.free-trial-line-item .description a`. */
.layout-3 .free-trial .free-trial-line-item .description .text {
    font-weight: bold;
    margin-top: 4px;
}

/* Free-trial order summary: keep the "Immediate Activation" chip vertically
   centered with the inline Total label/value (legacy .free-trial-order-summary
   rendered them on one right-aligned row). */
.layout-3 .free-trial .free-trial-order-summary {
    align-items: center;
}

/* Billing-required note ("Required Upfront. No Charge.* Why is this needed…")
   sits inside the payment-section heading column, under the Choose / Enter
   heading and above the header's rule. The heading column is 25px bold, so
   the note resets its own size/weight; the Secure Checkout block aligns to
   the heading row instead of centring on the taller column. */
.layout-3 .free-trial .choose-payment-method {
    align-items: flex-start;
}
.layout-3 .free-trial .free-trial-required-note {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.4;
    color: #444;
}
.layout-3 .free-trial .free-trial-required-note a {
    color: #167EE5;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

/* ── Trial line item, mobile. Layout-3's mobile rules stack the item via
   flex-basis:100% rows (logo, description) but the container itself never
   wraps — without flex-wrap everything stays on one overflowing row. */
@media only screen and (max-width: 850px)
{
    .layout-3 .free-trial .free-trial-line-item {
        flex-wrap: wrap;
    }

    /* Logo keeps its aspect ratio: the 50px desktop height above would
       otherwise fight the legacy 66%-width mobile rule. */
    .layout-3 .free-trial .free-trial-line-item .logo img {
        height: auto;
    }

    /* 10-devices banner on its own centred row; the Amount label/value pair
       wraps onto the next row and keeps the container's right alignment. */
    .layout-3 .free-trial .free-trial-line-item .devices-icon {
        flex-basis: 100%;
        height: 48px;
        object-fit: contain;
        margin: 0 0 25px;
    }

    /* Billing-required note ("Required Upfront. No Charge.* …") stays
       under the centred heading, scaled with it. */
    .layout-3 .free-trial .free-trial-required-note {
        margin: 10px 0 0;
        font-size: 3.3vw;
    }
}

/* "More Info" link on the product cards (Pro column + Mac row): bottom-aligned,
   bold, no underline, 12px. Scoped to .product-line-item so the trial-offer
   link (.free-trial-line-item) keeps its own styling. */
.layout-3 .product-line-item .product-info-link {
    display: inline-block;
    margin-top: 7px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}

/* Equal-height product columns (Basic vs selected Pro), matching legacy: both
   cards stretch to the taller one. The cards are flex-wrap containers, so
   align-content:flex-start keeps their content packed at the top with the extra
   height as empty space at the bottom (instead of spreading the wrapped rows).
   Scoped via :has() so the Mac row and call-center layouts keep top alignment. */
.layout-3 .product-items-container:has(> .product-line-item.column) {
    align-items: stretch;
}
.layout-3 .product-line-item.column {
    align-content: flex-start;
}

/* The Basic card is a COLUMN-direction flex container (purchase-layout-3.css:921),
   unlike the row-direction Pro card the rules above were written for. Once the
   `align-items: stretch` above gives it a definite height matching the taller Pro
   card, the `flex-basis: 100%` on its features list (purchase-layout-3.css:961)
   resolves against that taller height — so the features list and the device row no
   longer fit the column and `flex-wrap` (inherited from the base card) pushes them
   into a SECOND column to the right, where they render behind the Pro box. Forcing
   nowrap keeps the single vertical stack; the extra stretch height becomes empty
   space at the bottom of the card. */
.layout-3 .product-line-item.basic.column {
    flex-wrap: nowrap;
}

/* Selecting a card swaps its 1px grey border for a 3px blue one
   (purchase-layout-3.css .product-line-item.selected). With content-box sizing
   that grows the box 2px per side, and because the cards flex-shrink inside the
   space-between container, both cards' sizes and positions wiggle a few pixels
   as the selection moves between Basic and Pro — vertically (the order summary
   below jumps) and horizontally. Keep the 1px border in both states and paint
   the remaining 2px of the blue highlight as an outer box-shadow ring: shadows
   are pure paint, so the geometry never changes with selection. (The Mac/renew
   `.row` items keep a constant 3px border and only change its colour, so they
   never had this problem.) */
.layout-3 .product-line-item.column.selected {
    border-width: 1px;
    box-shadow: 0 0 0 2px #3279F6;
}

/**********************************************************************************************************************/
/* RegHunter renewal (/rh-renew) — theme overrides                                                                    */
/* The selected product box + the "Select Your Products" heading accent use the default SpyHunter blue (#3279F6).      */
/* RegHunter's green brand colour (#019649, from its logo) is reserved for the volume-discount pricing accents (the    */
/* "YOU SAVE …" chip, struck-through totals, etc.) further down. Scoped to `.reghunter-renew`. The yellow             */
/* Complete-Purchase CTA is brand-neutral and left as-is.                                                             */
/**********************************************************************************************************************/
/* The selected product box keeps the default SpyHunter blue border + tint
   (not RegHunter green) per design — only the pricing accents below stay green. */
.reghunter-renew .product-line-item.selected {
    border-color: #3279F6;
    background: #F3F8FE 0 0 no-repeat padding-box;
}

.reghunter-renew .product-line-item.selected div {
    border-color: #3279F6 !important;
}

/* The /month figure (and its "per device" caption) is the SpyHunter blue accent. */
.reghunter-renew .product-line-item.selected .unit-monthly-price {
    color: #3279F6;
}

/* The "Select" heading accent uses the default blue. */
.reghunter-renew .blue {
    color: #3279F6;
}

/* The product headline ("System Optimization") is bolded here — the shared
   `.uninstall-offer` rule normalises it, so re-assert bold on the renew page. */
.reghunter-renew .product-line-item .product-title .text b {
    font-weight: bold;
}

/* "More Info" link drops onto its own line beneath the "System Optimization"
   headline (blue + bold, matching the legacy RegHunter product card). Done in
   CSS rather than a <br> in the shared row partial so other pages are untouched. */
.reghunter-renew .product-line-item .product-title .text .product-info-link {
    display: block;
    margin-top: 6px;
    color: #3279F6;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
}

/**********************************************************************************************************************/
/* RegHunter renewal — volume-discount pricing display                                                                */
/**********************************************************************************************************************/
/* Semiannual billed-upfront line under the /month price. When a volume discount
   applies the undiscounted total is struck through in muted grey ahead of the
   discounted upfront figure. */
.reghunter-renew .billed-upfront-volume {
    font-size: 12px;
    color: #333333;
    margin-top: 6px;
}

.reghunter-renew .billed-upfront-volume s {
    color: #7D7F89;
    margin-right: 5px;
}

/* Struck undiscounted amount on its own line above the volume price in the
   row's Amount column. The legacy stylesheet already colours `.base-subtotal`
   grey with line-through but hides it — surface it on this page. */
.reghunter-renew .product-line-item.row .subtotal .base-subtotal {
    display: block;
    font-weight: normal;
}

/* "Save on additional licenses*" hint beneath the device dropdown. */
.reghunter-renew .volume-discount-note {
    color: #7D7F89;
    font-size: 14px;
    font-weight: bold;
    margin-top: 8px;
}

/* Device selector: a custom Choices.js-style dropdown (see product-row.blade.php)
   so the OPEN option list matches the legacy page — bold rows, grey highlight,
   scroll — which a native <select> can't do. The closed trigger is a 215×30
   white box with a blue border + blue down-arrow. */
.reghunter-renew .item.devices .choices-dropdown {
    position: relative;
    width: 215px;
    max-width: 100%;
}

.reghunter-renew .item.devices .choices-dropdown__trigger {
    display: block;
    width: 100%;
    height: 30px;
    padding: 0 34px 0 12px;
    border: 1px solid #3279F6;
    border-radius: 3px;
    background-color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    text-align: left;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233474D3' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* Arrow flips up while the list is open (mirrors Choices.js). */
.reghunter-renew .item.devices .choices-dropdown__trigger.is-open {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233474D3' d='M6 0l6 8H0z'/%3E%3C/svg%3E");
}

.reghunter-renew .item.devices .choices-dropdown__list {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #FFFFFF;
    border: 1px solid #3279F6;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.reghunter-renew .item.devices .choices-dropdown__item {
    padding: 10px 12px;
    font-size: 15px;
    font-weight: bold;
    color: #000000;
    cursor: pointer;
}

.reghunter-renew .item.devices .choices-dropdown__item:hover,
.reghunter-renew .item.devices .choices-dropdown__item.is-selected {
    background-color: #F2F2F2;
}

/* Order summary: subtotal + discount + total rows, right-aligned as a block. */
.reghunter-renew .order-summary {
    justify-content: flex-end;
}

.reghunter-renew .order-pricing {
    min-width: 320px;
}

.reghunter-renew .order-pricing .flex-container.subtotal,
.reghunter-renew .order-pricing .flex-container.discount,
.reghunter-renew .order-pricing .flex-container.total {
    justify-content: flex-end;
    gap: 24px;
}

/* Fixed-width right-aligned value column so the amounts (and therefore the
   labels to their left) line up across the Subtotal, Discount and Total rows. */
.reghunter-renew .order-pricing .flex-container.subtotal .value,
.reghunter-renew .order-pricing .flex-container.discount .value,
.reghunter-renew .order-pricing .flex-container.total .value {
    flex: 0 0 auto;
    width: 110px;
    text-align: right;
    margin-bottom: 6px;
}

.reghunter-renew .order-pricing .flex-container.discount {
    color: #3279F6;
    font-size: 15px;
    margin-top: 4px;
}

/* The green "YOU SAVE …" chip rides the Total row, pushed to its left edge so
   the Total label/value stay right-aligned with the rows above. */
/* Shared by the RegHunter volume discount AND the main page's promo-code
   saving — both render the green chip next to the Total. */
.layout-3 .order-savings-badge {
    margin-right: auto;
    background: #DCFFEF;
    border: 1px solid #00BE5B;
    border-radius: 3px;
    color: #333333;
    font-size: 16px;
    padding: 4px 7px;
    white-space: nowrap;
}

.layout-3 .order-savings-badge b {
    font-weight: bold;
}

/**********************************************************************************************************************/
/* Main purchase page — SH Pro card (legacy parity)                                                                    */
/* Legacy order in the card's left column: price → SAVE % → blue divider → billed-upfront line → 10-devices banner →   */
/* per-device rate. The blue rule therefore moves from the bottom of the price block down to the SAVE line, and the    */
/* divider the shared rule above draws under the billed line goes away.                                                */
/**********************************************************************************************************************/
.product-line-item.pro .unit-monthly-price {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 10px;
    justify-content: center;
}

.product-line-item.pro .save-percent {
    font: normal normal 900 27px/27px "Avenir Black";
    text-transform: uppercase;
    border-bottom: 1px solid #3279F6;
    padding-bottom: 13px;
    margin: 19px 0 5px;
}

.product-line-item.pro .billed-upfront-container.column-price-details {
    border-bottom: none;
    /* "(Billed at … quarterly)" centered under the /month price — the flex
       container otherwise left-aligns the shrink-wrapped line. */
    justify-content: center;
    text-align: center;
}

/* Affiliate pricing has no SAVE % line (the element that carries the blue
   rule under the intro-offer price), so the billed line follows the price
   directly: give it the same blue separator the intro offer shows. */
.product-line-item.pro .unit-monthly-price + .billed-upfront-container.column-price-details {
    border-top: 1px solid #3279F6;
    margin-top: 19px;
    padding-top: 13px;
}

/* ── Renewal (retail) billed-upfront line: "(Billed upfront @ €84,98 / 6 Mo)".
   Rendered by the shared card template only when the product carries a
   `term_months` (the renewal pages). Pro: blue rule under the /month price
   (legacy .pro.multi-phase .subscription-price); Basic: grey rule under
   "1 Device Only" (legacy .basic.multi-phase .subscription-price). */
.product-line-item .renewal-billed-upfront {
    font-size: 12px;
    color: #1A1A1A;
    text-align: center;
}

.product-line-item.pro .renewal-billed-upfront {
    border-top: 1px solid #3279F6;
    margin: 10px 0;
    padding: 12px 0;
}

.product-line-item.basic .renewal-billed-upfront {
    width: 60%;
    border-top: 1px solid #C8C8C8;
    margin-top: 2px;
    padding-top: 8px;
}

/* Effective per-device monthly rate ("€0,65/Mo./Device") under the banner.
   Mirrors legacy .price-per-month-device-short: 14px red, centered, tucked
   right up against the banner so it fits inside the card. */
.product-line-item.pro .per-device-monthly {
    display: flex;
    justify-content: center;
    color: #CB141B;
    font-weight: bold;
    font-size: 14px;
    margin-top: 5px;
}

@media only screen and (max-width: 850px)
{
    /* The price container is a flex COLUMN on mobile (layout-3), price at
       order 10 and billed line at 20. Legacy mobile order: SAVE % (blue
       divider under it) → billed line → per-device rate → price, so pull
       SAVE, the billed line and the per-device rate above the price. */
    .product-line-item.pro .save-percent {
        order: 5;
        padding-bottom: 15px;
        margin-top: 15px;
    }

    .product-line-item.pro .billed-upfront-container.column-price-details {
        order: 8;
    }

    .product-line-item.pro .per-device-monthly {
        order: 9;
        font-size: 14px;
        margin-top: 0;
    }

    .product-line-item.pro .unit-monthly-price {
        margin-bottom: 0;
    }

    /* Smaller 10-devices banner, like the legacy 50%-wide mobile treatment. */
    .product-line-item.pro .devices-icon {
        width: 50%;
        height: auto;
    }

    /* "More Info" inside the mobile feature list scales with the list items. */
    .product-line-item.pro .mobile.product-features .product-info-link {
        font-size: 3.4vw;
    }
}

/**********************************************************************************************************************/
/* Main purchase page — SH Mac row                                                                                     */
/* Same mechanism as the offer rows below: the desktop `.row.shm` column widths above override layout-3's mobile       */
/* 100% stack (crushed title / wrapped price / stacked subtotal). Also surfaces the "(Billed as …)" line the base      */
/* sheet hides (purchase-layout-3.css:1106) — the legacy Mac row shows it on both breakpoints.                         */
/**********************************************************************************************************************/
/* No "10 DEVICES INCLUDED" red corner label on the Mac row — the in-row
   pictogram already states the device count. Scoped to `.shm` so it drops
   off both pages that render this row (/ and /spyhunter-renew) while other
   row-based pages keep their labels. */
.product-line-item.row.shm .red-label-box {
    display: none;
}

.product-line-item.row.shm .price-details .subscription-price {
    display: block;
    font-size: 12px;
    color: #1A1A1A;
    text-align: center;
}

@media only screen and (max-width: 850px)
{
    /* Full-width stacked blocks, like layout-3's mobile rules intend. */
    .product-line-item.row.shm .product-info-width,
    .product-line-item.row.shm .price-details-width,
    .product-line-item.row.shm .devices-width,
    .product-line-item.row.shm .subtotal-width {
        width: 100%;
    }

    /* Legacy mobile order: the billed line sits ABOVE the /month price
       (order 10 from layout-3's mobile rules). */
    .product-line-item.row.shm .price-details .billed-upfront-container {
        order: 5;
    }

    /* "Subtotal: €5,95" inline, right-aligned (the desktop rule above
       renders the amount as a stacked block). */
    .product-line-item.row.shm .subtotal .current-subtotal {
        display: inline;
    }

    .product-line-item.row.shm .subtotal .subtotal-text::after {
        content: ':';
    }
}

/**********************************************************************************************************************/
/* Special-offer / RegHunter-renew rows — mobile                                                                       */
/* purchase-layout-3.css already restacks the generic row for ≤850px, but this file loads AFTER it, so the desktop     */
/* column-width and display overrides above win on equal specificity and broke the stack (narrow price column,         */
/* billed-upfront line above the price, centred 16%-wide subtotal). Re-assert the mobile layout here.                  */
/**********************************************************************************************************************/
@media only screen and (max-width: 850px)
{
    /* Full-width stacked blocks, like layout-3's mobile rules intend. */
    .uninstall-offer .product-line-item.row .product-info-width,
    .uninstall-offer .product-line-item.row .price-details-width,
    .uninstall-offer .product-line-item.row .devices-width,
    .uninstall-offer .product-line-item.row .subtotal-width
    {
        width: 100%;
    }

    /* The semiannual billed-upfront line sits UNDER the /month price: the
       price gets `order: 10` from layout-3's mobile rules, so without an
       order of its own this line jumped above the price. */
    .reghunter-renew .billed-upfront-volume
    {
        order: 20;
        text-align: center;
        font-size: 3.2vw;
    }

    /* The title "More Info" link gives way to the product-info-mobile block
       (rendered after the price details), matching the legacy mobile row. */
    .reghunter-renew .product-line-item .product-title .text .product-info-link
    {
        display: none;
    }

    /* Device dropdown spans the card like the legacy mobile page. */
    .reghunter-renew .item.devices .choices-dropdown
    {
        width: 100%;
    }

    .reghunter-renew .volume-discount-note
    {
        font-size: 3.4vw;
    }

    .reghunter-renew .product-info-mobile .product-info-link
    {
        font-size: 3.4vw;
    }

    /* Amount block: struck €72,00 on its own line (base-subtotal, 4vw from
       layout-3's mobile rules), then "Subtotal: €43,20" inline beneath it.
       The desktop rule above renders current-subtotal as a stacked block —
       re-assert layout-3's inline mobile treatment. */
    .uninstall-offer .product-line-item.row .subtotal .current-subtotal
    {
        display: inline;
    }

    .reghunter-renew .subtotal .subtotal-text::after
    {
        content: ':';
    }

    /* Legacy mobile shows plain Subtotal / Discount / Total rows — no chip. */
    .reghunter-renew .order-savings-badge
    {
        display: none;
    }

    .reghunter-renew .order-pricing
    {
        min-width: 0;
        width: 100%;
    }

    /* Match the 3.8vw the sibling rows get from layout-3's mobile rules
       (its selector targets `.discount-row`; this page uses `.discount`). */
    .reghunter-renew .order-pricing .flex-container.discount
    {
        font-size: 3.8vw;
    }
}

/**********************************************************************************************************************/
/* /pay — first-party billing form (option-1 checkout)                                                                 */
/* Email / name / address are our own Livewire inputs; only card entry stays in the Stripe iframe. The select mirrors  */
/* the `.pay-field input` styling from purchase-layout-3.css; `.pay-field-row` pairs fields on one line (name,        */
/* city + postal), collapsing back to a stack on narrow screens.                                                       */
/**********************************************************************************************************************/
.layout-3 .pay-container .pay-billing-form {
    margin-bottom: 16px;
}

.layout-3 .pay-container .pay-field select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 14px;
    background: #FFFFFF;
    box-sizing: border-box;
}

.layout-3 .pay-container .pay-field select:focus {
    outline: none;
    border-color: #3279F6;
    box-shadow: 0 0 0 3px rgba(50, 121, 246, 0.15);
}

.layout-3 .pay-container .pay-field-row {
    display: flex;
    gap: 10px;
}

.layout-3 .pay-container .pay-field-row .pay-field {
    flex: 1;
    min-width: 0;
}

@media only screen and (max-width: 500px) {
    .layout-3 .pay-container .pay-field-row {
        display: block;
    }
}

/* /business — net-price note under the order summary total. */
.business-purchase .order-pricing .business-vat-note {
    margin-top: 10px;
    font-size: 12px;
    color: #4A4A4A;
    text-align: right;
}

/* /business — centre the price column's content: the €11,66/month figure and
   the "(Billed upfront @ … / 6 Mo)" line beneath it share one centre axis,
   sitting midway between the product name and the 10-devices banner (both
   are flex rows that otherwise pack to the column's left edge). */
.business-purchase .product-line-item.row .unit-monthly-price {
    justify-content: center;
}

.business-purchase .product-line-item.row .price-details .billed-upfront-container {
    justify-content: center;
}

/**********************************************************************************************************************/
/* /pay — billing form, legacy purchase_v2 look                                                      */
/* Square corners on every field, and a searchable Choices.js-style country dropdown: white trigger with a caret,     */
/* white option panel with a type-to-filter box on top (the legacy payment form used Choices with searchEnabled).     */
/**********************************************************************************************************************/
.layout-3 .pay-container .pay-field input,
.layout-3 .pay-container .pay-field select {
    border-radius: 0;
}

.layout-3 .pay-container .country-dropdown {
    position: relative;
}

.layout-3 .pay-container .country-dropdown__trigger {
    position: relative;
    width: 100%;
    padding: 9px 30px 9px 11px;
    border: 1px solid #D1D5DB;
    border-radius: 0;
    background: #FFFFFF;
    font-size: 14px;
    font-family: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

.layout-3 .pay-container .country-dropdown__trigger.is-placeholder {
    color: #7D7F89;
}

.layout-3 .pay-container .country-dropdown__trigger:focus {
    outline: none;
    border-color: #3279F6;
    box-shadow: 0 0 0 3px rgba(50, 121, 246, 0.15);
}

/* Choices-style caret: down triangle, flipping while open. */
.layout-3 .pay-container .country-dropdown__trigger::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -2px;
    border: 5px solid transparent;
    border-top-color: #4A4A4A;
}

.layout-3 .pay-container .country-dropdown__trigger.is-open::after {
    margin-top: -7px;
    border-top-color: transparent;
    border-bottom-color: #4A4A4A;
}

.layout-3 .pay-container .country-dropdown__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-top: none;
}

.layout-3 .pay-container .country-dropdown__search {
    width: 100%;
    padding: 8px 11px;
    border: none;
    border-bottom: 1px solid #D1D5DB;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
}

.layout-3 .pay-container .country-dropdown__list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background: #FFFFFF;
}

.layout-3 .pay-container .country-dropdown__item {
    padding: 8px 11px;
    font-size: 14px;
    cursor: pointer;
}

.layout-3 .pay-container .country-dropdown__item:hover {
    background: #F2F2F2;
}

.layout-3 .pay-container .country-dropdown__item.is-selected {
    font-weight: bold;
}

/**********************************************************************************************************************/
/* Embedded legacy-style checkout (/ + /spyhunter-renew)                                                               */
/* The chooser/form skeleton styles are the ported legacy purchase-layout-3.css rules; below are only the additions:   */
/* the grey tax note under the total, the Pay-with-Phone button label, the terms/QR dialogs and field-error styling.   */
/**********************************************************************************************************************/
/* Shrink-to-fit wrapper around the Total row + tax note: the pair hugs
   the right edge and is exactly as wide as its widest member (usually
   the note), so the Total label starts where the note's text starts —
   whatever length the translation renders at. The `div` in the selector
   matches the specificity of the legacy
   `.order-summary .order-pricing div { margin-left: 0 }` reset
   (purchase-layout-3.css:2325) so the auto margin survives it. */
.layout-3 .order-pricing div.total-with-tax-note {
    width: fit-content;
    margin-left: auto;
}

/* Inside the wrapper the Total row spans the full (note-driven) width:
   label pinned to the wrapper's left edge, price to the right. Rows with
   a chip (intro-offer / savings badge) are unaffected — the chip's own
   `margin-right: auto` absorbs the free space instead. */
.layout-3 .order-pricing .total-with-tax-note .flex-container.total {
    justify-content: space-between;
}

/* `fit-content` + auto left margin keeps the note (and thus its top
   border) only as wide as the text itself instead of the full pricing
   row, still hugging the right edge under the total (within the wrapper,
   for when the Total row is the wider member). The `div` in the
   selector matches the specificity of the legacy
   `.order-summary .order-pricing div { margin-left: 0 }` reset
   (purchase-layout-3.css:2325) so the auto margin survives it. */
.layout-3 .order-pricing div.checkout-tax-note {
    width: fit-content;
    margin-top: 6px;
    margin-left: 0px;
    padding-top: 6px;
    border-top: 1px solid #D9D9D9;
    font-size: 15px;
    color: #7D7F89;
    text-align: right;
}

/* Mobile: layout-3's generic order-summary rules hand a flex-container's
   last two children 65%/30% flex bases plus nowrap (purchase-layout-3.css:
   4596-4609). On the total row that squeezes the total-with-tax-note
   wrapper to a 30% basis, and inside it the same rules re-apply to the
   Total label/value — 65% + 30% + the row gap overflows the narrow
   wrapper, wrapping the amount onto its own line under the label.
   Restore natural sizing so the pair stays inline with the note beneath. */
@media only screen and (max-width: 850px)
{
    .layout-3 .order-pricing .total-row div.total-with-tax-note {
        flex-basis: auto;
        white-space: normal;
        padding-left: 0;
    }

    .layout-3 .order-pricing .total-with-tax-note .flex-container.total .label,
    .layout-3 .order-pricing .total-with-tax-note .flex-container.total .value {
        flex-basis: auto;
        padding-left: 0;
    }
}

.layout-3 .payment-form .pay-field-error {
    display: block;
    margin-top: 4px;
    color: #C0392B;
    font-size: 12px;
}

.layout-3 .payment-form .embedded-payment-element-item {
    width: 100%;
}

.layout-3 .payment-form .embedded-accept-terms {
    margin-top: 10px;
}

/* Submit/Stripe errors ("Your card number is incomplete.") — same invalid
   look as the accept-terms block: pale red fill + strong red left border.
   Scoped to the whole checkout container (not just .payment-form) so the
   chooser screen's block — hosted-PayPal session failures — gets it too. */
.layout-3 .pay-error-block {
    margin: 12px 0 16px;
    padding: 14px 20px;
    background: rgba(255, 0, 0, 0.05);
    border-left: 4px solid #D32F2F;
}

.layout-3 .pay-error-block .checkout-error {
    margin: 0;
    color: #C0392B;
    font-size: 14px;
}

.layout-3 .pay-error-block .pay-support-line {
    margin: 6px 0 0;
    font-size: 13px;
}

/* Title-less variant (Offer Details / accept-terms dialog): the header is
   just a slim sticky bar with the × kept on the right. The close button
   leaves its absolute position so the flex row sizes the bar around it —
   shorter than the 22px-title header the shared modal CSS assumes. The
   Pay-with-Phone dialog keeps its titled header. */
.layout-3 .checkout-terms-dialog--no-title h1 {
    justify-content: flex-end;
    padding: 5px 8px;
}

.layout-3 .checkout-terms-dialog--no-title .close {
    position: static;
}

.layout-3 .checkout-terms-dialog .checkout-terms-dialog__body {
    padding: 18px 22px;
    max-height: 50vh;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.5;
}

.layout-3 .checkout-terms-dialog .checkout-terms-dialog__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 0 22px 22px;
}

/* Legacy accept-terms pattern: bare checkbox + CONTINUE button. The button
   stays visible but faded while the checkbox is unticked. */
.layout-3 .checkout-terms-dialog .checkout-terms-dialog__agree {
    width: 22px;
    height: 22px;
    align-self: center;
    margin: 0;
    cursor: pointer;
}

.layout-3 .checkout-terms-dialog .checkout-terms-dialog__accept {
    background: #FFC33A;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 0.5px;
    padding: 12px 40px;
    text-transform: uppercase;
    cursor: pointer;
}

.layout-3 .checkout-terms-dialog .checkout-terms-dialog__accept:disabled {
    opacity: 0.55;
    cursor: default;
}

/* Pay-with-Phone QR popup — a white card fixed dead-centre above the
   screen cover holding the scan instruction and the QR image. The 4001
   z-index puts it above the shared .product-info-overlay (4000). */
.layout-3 .checkout-qr-popup {
    position: fixed;
    z-index: 4001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    padding: 20px 20px 12px;
    max-width: 450px;
    text-align: center;
    box-sizing: border-box;
}

.layout-3 .checkout-qr-popup__hint {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: #3C4043;
}

/* The QR data-URI already carries its own white quiet-zone margin, so the
   image needs no extra padding — just keep it block-centred in the card. */
.layout-3 .checkout-qr-code {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

/* The embedded form's country widget + state select match the square legacy
   inputs (the .pay-container-scoped rules don't reach this page). */
.layout-3 .personal-info-form .country-dropdown {
    position: relative;
}

.layout-3 .personal-info-form .country-dropdown__trigger {
    position: relative;
    width: 100%;
    min-height: 51px;
    padding: 9px 30px 9px 12px;
    border: 1px solid #DEE3E5;
    border-radius: 0;
    background: #FFFFFF;
    font-size: 16px;
    font-family: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

.layout-3 .personal-info-form .country-dropdown__trigger.is-placeholder {
    color: #7D7F89;
}

.layout-3 .personal-info-form .country-dropdown__trigger::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -2px;
    border: 5px solid transparent;
    border-top-color: #4A4A4A;
}

.layout-3 .personal-info-form .country-dropdown__trigger.is-open::after {
    margin-top: -7px;
    border-top-color: transparent;
    border-bottom-color: #4A4A4A;
}

.layout-3 .personal-info-form .country-dropdown__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    background: #FFFFFF;
    border: 1px solid #DEE3E5;
    border-top: none;
}

.layout-3 .personal-info-form .country-dropdown__search {
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid #DEE3E5;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
}

.layout-3 .personal-info-form .country-dropdown__list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background: #FFFFFF;
}

.layout-3 .personal-info-form .country-dropdown__item {
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
}

.layout-3 .personal-info-form .country-dropdown__item:hover {
    background: #F2F2F2;
}

.layout-3 .personal-info-form .country-dropdown__item.is-selected {
    font-weight: bold;
}

.layout-3 .personal-info-form .state .state-menu {
    width: 100%;
    min-height: 51px;
    border: 1px solid #DEE3E5;
    background: #FFFFFF;
    font-size: 16px;
    padding: 9px 12px;
    box-sizing: border-box;
}

.layout-3 .personal-info-form .state .state-menu:disabled {
    background: #EFEFEF;
    color: #7D7F89;
}

/* ── Accept-terms checkbox: the legacy custom checkbox (core/content.css
   port — 24×24, 4px radius, #3474D3 + mirrored-"L" white check when ticked),
   top-aligned to the disclaimer text. No box chrome around the block and no
   background flash on a failed submit — only the box itself turns red. */
.layout-3 .embedded-accept-terms {
    margin: 18px 0 6px;
}

.layout-3 .embedded-accept-terms__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Only the checkbox toggles consent — the disclaimer text (with its policy
   links) is plain text, so the pointer cursor lives on the label alone. */
.layout-3 .embedded-accept-terms__checkbox {
    display: inline-flex;
    flex: none;
    cursor: pointer;
}

.layout-3 .embedded-accept-terms__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.layout-3 .embedded-accept-terms .checkbox-box {
    position: relative;
    display: inline-block;
    flex: none;
    background-color: #FFFFFF;
    border: 1px solid #787B85;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    margin-top: 2px;
    box-sizing: border-box;
}

.layout-3 .embedded-accept-terms__input:focus-visible + .checkbox-box {
    box-shadow: 0 0 5px 1px #2090FA;
}

.layout-3 .embedded-accept-terms__input:checked + .checkbox-box {
    background-color: #3474D3;
    border-color: #3474D3;
}

.layout-3 .embedded-accept-terms__input:checked + .checkbox-box::after {
    position: absolute;
    content: "L";
    left: 0;
    right: 3px;
    bottom: 0;
    top: 1px;
    text-align: center;
    color: #FFFFFF;
    line-height: 1;
    font-family: arial;
    transform: scaleX(-1) rotate(-35deg);
    font-size: 15px;
}

.layout-3 .embedded-accept-terms__text {
    font-size: 12px;
    line-height: 1.5;
    text-decoration: underline;
}

/* ── Invalid billing fields: red border + light red fill until corrected. */
.layout-3 .personal-info-form .item.is-invalid input,
.layout-3 .personal-info-form .item.is-invalid select,
.layout-3 .personal-info-form .item.is-invalid .country-dropdown__trigger {
    border-color: red;
    background-color: rgba(255, 0, 0, 0.05);
}

/* ── Pix CPF/CNPJ: the layout-3 mobile block orders every personal-info
   item explicitly, so without an order this field would default to 0 and
   jump above First Name — slot it right after the phone (order 50).
   Desktop keeps the base .item 49% width. */
@media only screen and (max-width: 850px) {
    .layout-3 .personal-info-form .pix-tax-id {
        order: 55;
    }
}

/* ── Accept-terms not ticked on submit: the whole block flags like the
   legacy invalid state (screenshot) — pale red fill + strong red left
   border. Clears the moment the checkbox is ticked (updatedAgreed). */
.layout-3 .embedded-accept-terms.is-invalid {
    background: rgba(255, 0, 0, 0.05);
    border-left: 4px solid #D32F2F;
    padding: 16px 20px;
}

/* Complete Purchase label + the legacy black checkmark on one line. */
.layout-3 .complete-purchase button span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

/* ── Pay with Phone button ("variant A"). The legacy button was a bare
   `qr_code.svg` background (purchase-layout-3.css:2643); the redesign spells
   the option out in three centred rows — QR glyph + wordmark, the Apple Pay /
   Google Pay marks, and the scan instruction. The footprint stays in the
   alt-payment column (350px, #3279F6 border, 8px radius from the base rule);
   only the height grows to fit the badge row. */
.layout-3 .payment-buttons .alt-payment-method-btn.qr-code-btn,
.layout-3 .acc .alt-payment-method-btn.qr-code-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    height: auto;
    min-height: 110px;
    padding: 12px 18px;
    background: #FFFFFF;
    color: #2B2B2B;
    text-align: center;
    text-decoration: none;
}

.layout-3 .qr-code-btn:focus-visible {
    outline: 3px solid #3279F6;
    outline-offset: 2px;
}

/* Row 1 — QR glyph + wordmark (bold italic, like the PayPal / card marks). */
.layout-3 .qr-code-btn .pwp-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.layout-3 .qr-code-btn .pwp-top svg {
    flex: none;
    color: #2B2B2B;
}

.layout-3 .qr-code-btn .pwp-label {
    font: italic bold 21px/1.15 Verdana, Geneva, Tahoma, sans-serif;
    letter-spacing: -0.01em;
    color: #2B2B2B;
}

/* Row 2 — wallet marks. Inline-SVG recreations sized for this button; swap
   for the official Apple / Google assets if brand compliance ever demands
   it, the layout doesn't change. */
.layout-3 .qr-code-btn .pwp-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.layout-3 .qr-code-btn .pwp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: none;
    height: 30px;
    padding: 0 12px;
    border-radius: 6px;
}

.layout-3 .qr-code-btn .pwp-badge.pwp-apple {
    background: #000000;
}

.layout-3 .qr-code-btn .pwp-badge.pwp-apple .pwp-pay-word {
    color: #FFFFFF;
    font: 500 15px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.layout-3 .qr-code-btn .pwp-badge.pwp-google {
    background: #FFFFFF;
    border: 1px solid #DADCE0;
}

.layout-3 .qr-code-btn .pwp-badge.pwp-google .pwp-pay-word {
    color: #5F6368;
    font: 500 15px/1 'Product Sans', Roboto, Arial, sans-serif;
}

/* Row 3 — scan instruction. */
.layout-3 .qr-code-btn .pwp-subtext {
    font: normal 11.5px/1.3 Verdana, Geneva, Tahoma, sans-serif;
    color: #666666;
}

/* Phones: the wordmark would otherwise wrap to two lines in the longer
   locales ("Payer avec le téléphone", "Pagar com o telemóvel"). */
@media only screen and (max-width: 420px) {
    .layout-3 .qr-code-btn {
        padding: 12px 10px;
    }

    .layout-3 .qr-code-btn .pwp-label {
        font-size: 18px;
    }
}

/* ── SpyHunter free-upgrade offer (/upgrade-offer) ─────────────────────────
   The page reuses the legacy `.sh-free-upgrade` rules verbatim; these are the
   few deltas the Livewire port needs. */

/* Legacy hid the recap line and toggled it from JS; here it is always shown. */
.layout-3 .sh-free-upgrade .upgrade-info-container .change-sh-subscription.is-visible {
    display: block;
}

/* Checkbox and consent text sit in one flex row — keep 10px between them. */
.layout-3 .sh-free-upgrade .upgrade-info-container .checkout-agreement-container {
    gap: 10px;
}

/* Legacy wrapped the consent text in <u>; the underline now lives in CSS. */
.layout-3 .sh-free-upgrade .upgrade-info-container .checkout-agreement-text {
    text-decoration: underline;
}

/* Pull the consent block up when the "please agree" error follows it so the
   message sits right under the checkbox, not 75px below. */
.layout-3 .sh-free-upgrade .upgrade-info-container .checkout-agreement-container:has(+ .offer-details__error) {
    margin-bottom: 12px;
}

.layout-3 .sh-free-upgrade .upgrade-info-container .offer-details__error {
    margin: 0 0 40px;
}

.layout-3 .sh-free-upgrade .submit-button {
    margin-bottom: 40px;
    cursor: pointer;
}

/* Loading state: Livewire swaps the lock + label for the Complete Purchase
   spinner (same ring as `.complete-purchase button .spinner`) while the
   upgrade request is in flight; the button keeps its size and colour. */
.layout-3 .sh-free-upgrade .submit-button.is-loading {
    opacity: 1;
    cursor: wait;
}

.layout-3 .sh-free-upgrade .submit-button .spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(26, 26, 26, 0.25);
    border-top-color: #1A1A1A;
    border-radius: 50%;
    animation: complete-purchase-spin 0.8s linear infinite;
}

.layout-3 .sh-free-upgrade .submit-button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Result states ("upgrade complete" / "already upgraded"): the card's own
   margin collapsed through the padding-less grey band, leaving the band
   glued to the card. Give the band the breathing room instead. */
.layout-3 .sh-free-upgrade .order-area:has(> .checkout-result) {
    padding: 60px 0;
}

.layout-3 .sh-free-upgrade .order-area > .checkout-result {
    margin: 0 auto;
}

@media only screen and (max-width: 850px) {
    .layout-3 .sh-free-upgrade .order-area:has(> .checkout-result) {
        padding: 30px 16px;
    }
}

/* Reactivation dialog sits on the shared .product-info-overlay (z 4000), so
   it must stack above the legacy .pop-up-dialog default of 3000. */
.layout-3 .pop-up-dialog.subscription-reactivation {
    z-index: 4100;
    max-width: calc(100vw - 32px);
}

.layout-3 .pop-up-dialog.subscription-reactivation a.dlg-submit-button.confirm.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* "Offer unavailable" message replaces the consent block + button. */
.layout-3 .sh-free-upgrade .upgrade-info-container .upgrade-offer__unavailable {
    margin: 10px 0 60px;
    font-size: 14px;
    line-height: 1.5;
}