/*
 * Guest paywall (?action=plans) — auto-loaded via usePageResources('plans').
 * Scoped by the body.guest-paywall class from GuestRoutes so neither the
 * logged-in Upgrade page nor the guest checkout page are affected.
 *
 * Layout: the page itself does not scroll; the left column (plans) scrolls
 * on its own, the right column (reviews) stays pinned.
 */

body.guest-paywall {
    height: 100vh;
    overflow: hidden;
}

body.guest-paywall .admin-content {
    height: 100vh;
}

body.guest-paywall .reviews-separating-wrapper {
    height: 100vh;
    min-height: 100vh;
}

body.guest-paywall .reviews-separating-wrapper > .upgrade-account {
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.guest-paywall .reviews-separating-wrapper > .reviews-bg {
    height: 100vh;
    overflow: hidden;
}

/* centered logo above the title */
body.guest-paywall .guest-paywall__logo {
    display: flex;
    justify-content: center;
    padding-top: 32px;
}

body.guest-paywall .guest-paywall__logo img {
    height: 40px;
    width: auto;
}

/* one-line price: Only $1.55/day — 'Only' and '/day' small, the figure big.
   0.55em of the 1.85em pricing row ≈ 1.02em of the card — 'Billed monthly'
   below uses the same size/color/weight so the small text reads as one style */
body.guest-paywall .upgrade-account__plan-price-prefix {
    font-size: 0.55em;
    font-weight: 500;
    color: #888;
    margin-right: 0.5em;
}

body.guest-paywall .upgrade-account__plan-price-suffix {
    font-size: 0.55em;
    font-weight: 500;
    color: #888;
    margin-left: 0.15em;
}

body.guest-paywall .upgrade-account__plan-desc {
    font-size: 1.02em;
    font-weight: 500;
    color: #888;
}

/* replaces the US/UK toggle: market is geo-resolved; same both-markets
   identity as the checkout header — two round flags + caption in the same
   small-text style as the cards, but black */
body.guest-paywall .guest-paywall__markets-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1.02em;
    font-weight: 500;
    color: #212529;
    margin: 4px 0 10px;
}

body.guest-paywall .guest-paywall__markets-flag {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    object-fit: cover;
}

body.guest-paywall .guest-paywall__markets-flag + .guest-paywall__markets-flag {
    margin-left: -12px;
}

/* tighter spacing so more of the plan fits above the fold */
body.guest-paywall .upgrade-account {
    padding: 0 28px 20px;
}

body.guest-paywall .upgrade-account__titling {
    padding-top: 24px;
    margin-bottom: 24px;
}

body.guest-paywall .upgrade-account__titling-text {
    margin-top: 0.75em;
}

body.guest-paywall .upgrade-account #payment-tabs-wrapper {
    margin-top: 14px;
}

/* denser plan card: feature rows were 55px tall with wide side padding */
body.guest-paywall .upgrade-account__column-feature {
    height: 38px;
    padding: 0 16px;
    font-size: 0.95em;
}

/* close the air gap between the price block and the CTA button:
   plan-desc is an empty <br> for monthly, and the button added 30px more */
body.guest-paywall .upgrade-account__plan-button {
    margin-top: 12px;
}

body.guest-paywall .upgrade-account__plan-desc {
    margin-top: 6px;
}

body.guest-paywall .upgrade-account__tab-content {
    margin-bottom: 24px;
}

/* stacked layout on small screens falls back to normal page scrolling */
@media (max-width: 1000px) {
    body.guest-paywall {
        height: auto;
        overflow: auto;
    }
    body.guest-paywall .admin-content,
    body.guest-paywall .reviews-separating-wrapper,
    body.guest-paywall .reviews-separating-wrapper > .upgrade-account,
    body.guest-paywall .reviews-separating-wrapper > .reviews-bg {
        height: auto;
        overflow: visible;
    }
}