/* ==========================================================================
   PAYWALL / PAYGATE
   ========================================================================== */

/* --- Paywall utility classes (replaces disabled paywall CSS) --- */
.paygate .HKbold  { font-family: var(--tulo-font-primary); font-weight: 700; }
.paygate .HKmed   { font-family: var(--tulo-font-primary); font-weight: 500; }
.paygate .HKreg   { font-family: var(--tulo-font-primary); font-weight: 400; }
.paygate .lh-12   { line-height: 1.2; }

/* Container — left-aligned card with shadow, centered content */
.paygate {
    background-color: var(--tulo-cream-dark);
    border: 1px solid rgba(21, 23, 32, 0.08);
    border-radius: 8px;
    padding: 0;
    margin: 2.5rem auto;
    max-width: 580px;
    box-shadow: 0 4px 20px rgba(21, 23, 32, 0.10), 0 1px 4px rgba(21, 23, 32, 0.06);
    overflow: hidden;
    text-align: center;
}

/* Kill excess wrappers */
.paygate .info-box-wrapper .info-box.article {
    display: none;
}
.paygate .info-box-wrapper,
.paygate .paywall__wrapper {
    max-width: none;
    margin: 0;
}

/* Bottom spacing for the card body */
.paygate .paywall__wrapper {
    padding-bottom: 1.5rem;
}

/* --- Dark header banner --- */
.paygate h2 {
    font-family: var(--tulo-font-primary);
    font-weight: 300;
    font-size: 30px;
    color: #FFFFFF;
    background-color: var(--tulo-dark);
    margin: 0;
    padding: 1.75rem 2rem 0.5rem;
    letter-spacing: -0.5px;
}

.paygate .paywall__header-container {
    background-color: var(--tulo-dark);
    padding: 0 2rem 1.5rem;
    margin-bottom: 0;
}

.paygate .paywall__header-container div {
    font-family: var(--tulo-font-primary);
    font-weight: 500;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

/* --- Price display — large and striking --- */
.paygate .paywall__price-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0;
    padding: 1.75rem 2rem 1rem;
    background-color: transparent;
    border: none;
    border-radius: 0;
}

/* Price first, discount to the right */
.paygate .paywall__price-container-left {
    flex-shrink: 0;
    order: 1;
    text-align: left;
}

/* Discount percentage */
.paygate .paywall__price-container-percentage {
    font-family: var(--tulo-font-primary);
    font-weight: 600;
    font-size: 14px;
    color: var(--tulo-orange);
}

/* Strikethrough original price */
.paygate .paywall__price-container-left del {
    font-family: var(--tulo-font-primary);
    font-size: 14px;
    color: var(--tulo-muted);
}

.paygate .paywall__price-container-right {
    flex-grow: 0;
    order: -1;
}

/* Main price number */
.paygate .paywall__price-container-right p,
.paygate p.fs-vh-52,
.paygate #paywall__price_characteristic {
    font-family: var(--tulo-font-primary);
    font-weight: 700;
    font-size: 56px;
    line-height: 1;
    color: var(--tulo-dark);
    margin: 0;
    letter-spacing: -1.5px;
}

/* Currency / mantissa */
.paygate .paywall__price-container-right span,
.paygate span.fs-vh-27,
.paygate #paywall__price_mantissa {
    font-family: var(--tulo-font-primary);
    font-weight: 600;
    font-size: 26px;
    color: var(--tulo-dark);
    letter-spacing: 0;
}

/* Price description — "per month…", "Cancel anytime" */
.paygate .paywall__price-description-container {
    margin-bottom: 0.75rem;
    padding: 0 2rem;
}

.paygate .paywall__price-description-container p,
.paygate p.fs-vh-15 {
    font-family: var(--tulo-font-primary);
    font-weight: 500;
    font-size: 14px;
    color: var(--tulo-muted);
    line-height: 1.4;
    margin: 0.15rem 0;
}

/* --- Benefits list --- */
.paygate .paywall__embedded-included-offers-container {
    padding: 0 2rem;
}

.paygate .paywall__embedded-included-offers-container ul {
    list-style: none;
    padding-left: 0;
    margin: 0.5rem 0 0.75rem;
    display: inline-block;
    text-align: left;
}

.paygate .paywall__embedded-included-offers-container li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-family: var(--tulo-font-primary);
    color: var(--tulo-text);
}

.paygate .paywall__embedded-included-offers-container p,
.paygate p.fs-vh-14 {
    font-family: var(--tulo-font-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--tulo-text);
    margin: 0;
}

/* Checkmark icons — CSS-generated */
.paygate .paywall__checkmark {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paygate .paywall__checkmark::before {
    content: '\2713';
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--tulo-orange);
    line-height: 1;
}

/* Checkmark variant B — some paywalls use <img> instead of .paywall__checkmark.
   The SVG from payway-cdn often fails to load. Hide the broken image and
   generate a CSS checkmark on the <li> instead. Uses :has() to avoid
   double-checkmarks on variant A (which uses .paywall__checkmark divs). */
.paygate .paywall__embedded-included-offers-container li:has(> img) img {
    display: none !important;
}

.paygate .paywall__embedded-included-offers-container li:has(> img)::before {
    content: '\2713';
    flex-shrink: 0;
    width: 20px;
    font-size: 14px;
    font-weight: 700;
    color: var(--tulo-orange);
    line-height: 1;
}

/* --- Payment form (after "Subscribe now!" click) --- */
.paygate #paywall__klarna-payments-container {
    padding: 0 2rem;
    margin: 0.5rem 0;
    text-align: center;
}

/* Klarna On-Site Messaging shadow host — center as flex child */
.paygate #osm_shadow_host {
    display: flex !important;
    justify-content: center !important;
}

.paygate .paywall__provider-logos {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

/* Preserve provider logo images (Klarna, etc.) */
.paygate .paywall__provider-logos img {
    display: inline-block !important;
    height: 20px;
    width: auto;
}

/* "Pay X kr" confirmation button */
.paygate #approve-purchase {
    font-family: var(--tulo-font-primary);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.3px;
    background-color: var(--tulo-dark);
    color: #FFFFFF;
    border: 2px solid var(--tulo-dark);
    border-radius: 6px;
    padding: 13px 2rem;
    width: calc(100% - 4rem);
    max-width: 380px;
    display: block;
    margin: 0.75rem auto 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.paygate #approve-purchase:hover,
.paygate #approve-purchase:focus {
    background-color: transparent;
    color: var(--tulo-dark);
    border-color: var(--tulo-dark);
}

/* Remove stray <br> elements injected by Tulo JS */
.paygate .paywall__purchase_button-container > br {
    display: none;
}

/* --- CTA buttons — dark/black, left-aligned --- */
/* Exclude express purchase buttons (Google Pay, Apple Pay) from CTA styling */
.paygate button:not([class*="express-purchase"]):not([class*="gpay"]) {
    font-family: var(--tulo-font-primary);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.3px;
    background-color: var(--tulo-dark);
    color: #FFFFFF;
    border: 2px solid var(--tulo-dark);
    border-radius: 6px;
    padding: 13px 2rem;
    width: calc(100% - 4rem);
    max-width: 380px;
    display: block;
    margin: 0.75rem auto 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.paygate button:not([class*="express-purchase"]):not([class*="gpay"]):hover,
.paygate button:not([class*="express-purchase"]):not([class*="gpay"]):focus {
    background-color: transparent;
    color: var(--tulo-dark);
    border-color: var(--tulo-dark);
}

/* Override tulo-public.css which uses .tulo_no_access .paygate button
   with background: rgb(0,123,195) and color: !important */
.tulo_no_access .paygate button:not([class*="express-purchase"]):not([class*="gpay"]) {
    background: var(--tulo-dark);
    color: #FFFFFF !important;
    border: 2px solid var(--tulo-dark);
    border-radius: 6px;
}

.tulo_no_access .paygate button:not([class*="express-purchase"]):not([class*="gpay"]):hover,
.tulo_no_access .paygate button:not([class*="express-purchase"]):not([class*="gpay"]):focus {
    background: transparent;
    color: var(--tulo-dark) !important;
    border-color: var(--tulo-dark);
}

/* Override tulo-public.css .info-box white background */
.tulo_no_access .paygate .info-box {
    background-color: transparent;
    padding: 0;
    margin-top: 0;
}

/* --- Express purchase buttons (Google Pay, Apple Pay) — let native styles work --- */
.paygate .paywall__express-purchase-base-container {
    padding: 0.25rem 2rem;
}

/* --- Express purchase buttons — shared layout --- */
/* Override theme global button rule and tulo-public.css for GPay/Apple Pay.
   We must beat the specificity of theme's "button" and tulo's
   ".tulo_no_access .paygate button" without nuking native rendering. */
.paygate button[class*="gpay"],
.paygate #gpay-button-online-api-id,
.paygate .paywall__express-purchase-button-applepay,
.paygate button[class*="express-purchase"],
.tulo_no_access .paygate button[class*="gpay"],
.tulo_no_access .paygate #gpay-button-online-api-id,
.tulo_no_access .paygate .paywall__express-purchase-button-applepay,
.tulo_no_access .paygate button[class*="express-purchase"] {
    border: 0 !important;
    border-radius: 4px !important;
    padding: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    margin: 0.75rem auto 1rem !important;
    width: calc(100% - 4rem) !important;
    max-width: 380px !important;
    display: block !important;
    cursor: pointer;
    font-size: 0 !important;
    line-height: 40px !important;
    position: relative !important;
    transition: none !important;
}

/* --- Google Pay button — suppress native appearance, use Google's injected styles --- */
.paygate button[class*="gpay"],
.paygate #gpay-button-online-api-id,
.tulo_no_access .paygate button[class*="gpay"],
.tulo_no_access .paygate #gpay-button-online-api-id {
    background-color: #000 !important;
    color: #fff !important;
    outline: 1px solid #757575;
    -webkit-appearance: none !important;
    /*appearance: none !important;*/
}

/* --- Apple Pay button — preserve native -apple-pay-button rendering --- */
.paygate .paywall__express-purchase-button-applepay,
.tulo_no_access .paygate .paywall__express-purchase-button-applepay {
    -webkit-appearance: -apple-pay-button !important;
    -apple-pay-button-style: black;
    -apple-pay-button-type: buy;
    background-color: #000 !important;
    color: #fff !important;
    outline: none;
}

/* --- Embedded overlay — always hidden --- */
.paygate .paywall__embedded-overlay,
.tulo_no_access .paygate .paywall__embedded-overlay,
#paywall__embedded-overlay,
.paywall__embedded-overlay {
    display: none !important;
}

/* --- Terms / fine print --- */
.paygate .paywall__terms {
    text-align: center;
    font-size: 12px;
    color: var(--tulo-muted);
    margin-top: 0;
    padding: 0 2rem 0.5rem;
}

.paygate .paywall__terms p {
    font-family: var(--tulo-font-primary);
    color: var(--tulo-muted);
    font-size: 12px;
    margin: 0.2rem 0;
}

/* --- Secondary section — "Interested in this article only?" --- */
.paygate h3 {
    font-family: var(--tulo-font-primary);
    font-weight: 400;
    font-size: 18px;
    color: var(--tulo-muted);
    margin: 0;
    padding: 1.25rem 2rem 0;
    border-top: 1px solid rgba(21, 23, 32, 0.12);
}

.paygate h3 + p,
.paygate h3 ~ p {
    font-family: var(--tulo-font-primary);
    color: var(--tulo-text);
    font-size: 14px;
    line-height: 1.5;
    padding: 0 2rem;
}

/* Login link */
.paygate a {
    color: var(--tulo-orange);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.paygate a:hover {
    color: var(--tulo-dark);
    text-decoration: underline;
}


/* ==========================================================================
   PAYWALL — RESPONSIVE
   ========================================================================== */
@media (max-width: 767px) {
    .paygate {
        margin: 1.5rem 0;
        max-width: none;
    }

    .paygate h2 {
        font-size: 24px;
        padding: 1.25rem 1.25rem 0.4rem;
    }

    .paygate .paywall__header-container {
        padding: 0 1.25rem 1.25rem;
    }

    .paygate .paywall__price-container {
        padding: 1.25rem 1.25rem 0.75rem;
    }

    .paygate p.fs-vh-52,
    .paygate #paywall__price_characteristic {
        font-size: 42px;
    }

    .paygate span.fs-vh-27,
    .paygate #paywall__price_mantissa {
        font-size: 22px;
    }

    .paygate .paywall__price-description-container,
    .paygate .paywall__embedded-included-offers-container,
    .paygate .paywall__terms {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .paygate button:not([class*="express-purchase"]):not([class*="gpay"]) {
        width: calc(100% - 2.5rem);
        margin-left: auto;
        margin-right: auto;
    }

    .paygate h3 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .paygate h3 + p,
    .paygate h3 ~ p {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

.paygate #gpay-button-online-api-id {
  background-repeat: no-repeat !important;
  background-size: auto 18px !important;   /* ← was: contain */
  background-position: center center !important;
}