/* ========================================================================
   Swedish Paleo – Checkout CSS
   Samlad styling för hela kassan.
   
   Innehåll:
   1. Variabler (Custom Properties)
   2. Layout & Rubriker
   3. Fältstyling (Labels & Inputs)
   4. Toppen: Bonus-box & Inloggningsruta
   5. Ordersammanfattning & Trial-badge
   6. Betalmetoder (Stripe & Klarna)
   7. Villkor & Opt-in (Kryssrutor)
   8. Köp-knapp ("Slutför köp")
   9. E-postvalidering (Felruta)
   ======================================================================== */


/* ========================================================================
   1. VARIABLER (Delade värden)
   ======================================================================== */
:root {
    --sp-font-body: "proxima_nova_regular", "Proxima Nova", sans-serif;
    --sp-font-btn: "Poppins", "Proxima Nova", sans-serif;
    --sp-green: #538a55;
    --sp-green-dark: #467548;
    --sp-green-darker: #3d6b41;
    --sp-text: #333;
    --sp-text-light: #666;
    --sp-text-muted: #888;
    --sp-link-muted: #8B857A;
    --sp-border: #e5e5e5;
    --sp-border-input: #a6a6a6;
    --sp-btn-gradient: linear-gradient(to bottom, #5d9360, #467548);
    --sp-btn-gradient-hover: linear-gradient(to bottom, #4e8250, #3d6b41);
    --sp-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 10px rgba(60, 100, 65, 0.35);
}


/* ========================================================================
   2. LAYOUT & RUBRIKER
   ======================================================================== */

/* --- Layout Reset --- */
.woocommerce-checkout .col2-set {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
}

.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-top: 0 !important;
}

/* --- Dölj "Övriga uppgifter" (Ordernoteringar) --- */
.woocommerce-checkout .woocommerce-additional-fields {
    display: none !important;
}

/* --- Betalbox: Ta bort ramar --- */
#payment,
.woocommerce-checkout-payment {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

ul.wc_payment_methods {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    list-style: none !important;
}

li.payment_method_stripe_cc,
li[class*="klarna"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* --- Rubrik: "Välj betalmetod" (via ::before) --- */
#payment::before {
    content: "Välj betalmetod";
    display: block;
    font-family: var(--sp-font-body) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin-bottom: 15px !important;
    margin-top: 10px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

#payment:not(:has(.wc_payment_method))::before {
    display: none !important;
}

/* --- Rubrik: "Dina uppgifter" --- */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3 {
    display: none !important;
}

.woocommerce-checkout .col2-set .woocommerce-billing-fields::before {
    content: "Dina uppgifter";
    display: block;
    font-family: var(--sp-font-body) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    line-height: 1.2;
    text-transform: none !important;
}

.woocommerce-billing-fields h3 {
    font-family: var(--sp-font-body) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
}

#customer_details h3 {
    margin-top: 0px !important;
    padding-top: 5px !important;
}

/* --- Städning --- */
.woocommerce-checkout #payment .place-order {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: none !important;
}

.woocommerce-checkout-payment .place-order::before,
.woocommerce-terms-and-conditions-wrapper::before {
    display: none !important;
    border: none !important;
}

.woocommerce-form__label-for-checkbox {
    padding-left: 0 !important;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
}


/* ========================================================================
   3. FÄLTSTYLING (Labels & Inputs)
   ======================================================================== */

/* --- Labels --- */
.woocommerce-checkout form.checkout label {
    font-family: var(--sp-font-body) !important;
}

.woocommerce-checkout #customer_details label,
.woocommerce-checkout .woocommerce-additional-fields label {
    font-size: 16px !important;
    color: var(--sp-text) !important;
    margin-bottom: 6px !important;
    line-height: 1.4 !important;
}

/* --- Input-fält --- */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    border-radius: 5px !important;
    border: 1px solid var(--sp-border-input) !important;
    padding: 10px !important;
    font-family: var(--sp-font-body) !important;
    font-size: 16px !important;
    color: var(--sp-text) !important;
    transition: all 0.2s ease-in-out !important;
}

.woocommerce-checkout form.checkout .form-row input.input-text,
.select2-container--default .select2-selection--single {
    border-radius: 5px !important;
    border: 1px solid var(--sp-border-input) !important;
    font-family: var(--sp-font-body) !important;
    font-size: 16px !important;
}

/* --- Select2 Dropdowns --- */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-family: var(--sp-font-body) !important;
    font-size: 16px !important;
    color: var(--sp-text) !important;
    line-height: 28px !important;
}

.select2-results__option {
    font-family: var(--sp-font-body) !important;
    font-size: 16px !important;
}

/* --- Focus --- */
.woocommerce-checkout input:focus {
    border-color: var(--sp-green-dark) !important;
    box-shadow: 0 0 0 1px var(--sp-green-dark) !important;
}

/* --- Typografi & Länkar --- */
.woocommerce-checkout form.checkout p,
.woocommerce-checkout #order_review p {
    font-family: var(--sp-font-body) !important;
    color: var(--sp-text) !important;
}

.woocommerce-checkout a.woocommerce-terms-and-conditions-link {
    color: var(--sp-link-muted) !important;
    text-decoration: underline !important;
}

.woocommerce-checkout a.woocommerce-terms-and-conditions-link:hover {
    color: #000 !important;
}


/* ========================================================================
   4. TOPPEN: BONUS-BOX & INLOGGNINGSRUTA
   ======================================================================== */

/* --- Premium Bonus Box --- */
.premium-bonus-box {
    background-color: #f4f9f4 !important;
    border: 1px solid #dcebdc !important;
    border-left: 5px solid #7a9c59 !important;
    border-radius: 4px !important;
    padding: 18px 20px 18px 50px !important;
    margin-bottom: 10px !important;
    position: relative !important;
    box-shadow: none !important;
    color: #2c3e50 !important;
    font-family: var(--sp-font-body) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.premium-bonus-box::before {
    content: "🎁";
    font-size: 22px !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.premium-bonus-box strong,
.premium-bonus-box b {
    color: var(--sp-green-dark) !important;
    font-weight: 700 !important;
}

.premium-bonus-box strong span,
.premium-bonus-box b span {
    color: var(--sp-green-dark) !important;
}

@media (max-width: 600px) {
    .premium-bonus-box {
        padding: 15px 15px 15px 45px !important;
        font-size: 13px !important;
    }
    .premium-bonus-box::before {
        left: 12px !important;
        font-size: 20px !important;
    }
}

/* --- Inloggnings-länk --- */
.woocommerce-form-login-toggle {
    margin-top: 20px !important;
    margin-bottom: 30px !important;
}

.woocommerce-checkout .woocommerce-info {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--sp-text-muted) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    display: block !important;
}

.woocommerce-checkout .woocommerce-info::before {
    display: none !important;
}

.woocommerce-checkout .woocommerce-info a.showlogin {
    color: #444 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    margin-left: 3px !important;
    font-family: var(--sp-font-body) !important;
}

.woocommerce-checkout .woocommerce-info a.showlogin:hover {
    color: var(--sp-green-dark) !important;
    text-decoration: none !important;
}

/* --- Inloggningsrutan (Drop-down) --- */
.woocommerce-checkout .woocommerce-form-login {
    background-color: #ffffff !important;
    border: 1px solid var(--sp-border) !important;
    padding: 35px !important;
    margin-bottom: 35px !important;
    border-radius: 5px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

.woocommerce-checkout .woocommerce-form-login p {
    color: var(--sp-text-light) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
    font-family: var(--sp-font-body) !important;
}

.woocommerce-checkout .woocommerce-form-login label {
    font-weight: 600 !important;
    color: var(--sp-text) !important;
    margin-bottom: 8px !important;
    display: block !important;
    font-family: var(--sp-font-body) !important;
}

.woocommerce-checkout .woocommerce-form-login input.input-text {
    border-radius: 5px !important;
    border: 1px solid var(--sp-border-input) !important;
    padding: 8px 10px !important;
    font-size: 16px !important;
    color: var(--sp-text) !important;
    background-color: #fff !important;
    height: auto !important;
    box-shadow: none !important;
    font-family: var(--sp-font-body) !important;
    transition: all 0.2s ease-in-out !important;
}

.woocommerce-checkout .woocommerce-form-login input.input-text:focus {
    border-color: var(--sp-green-dark) !important;
    box-shadow: 0 0 0 1px var(--sp-green-dark) !important;
}

/* --- "Kom ihåg mig" --- */
.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__rememberme {
    margin-top: 0px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    font-weight: 400 !important;
    color: #444 !important;
    font-family: var(--sp-font-body) !important;
    cursor: pointer !important;
}

.woocommerce-checkout .woocommerce-form-login input[name="rememberme"] {
    accent-color: var(--sp-green-dark) !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 10px !important;
    cursor: pointer !important;
    margin-bottom: 0 !important;
}

/* --- Logga in-knappen --- */
.woocommerce-checkout .woocommerce-form-login button.button {
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    font-size: 16px !important;
    font-family: var(--sp-font-btn) !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    text-shadow: none !important;
    border-radius: 4px !important;
    border: none !important;
    background-image: none !important;
    background: var(--sp-btn-gradient) !important;
    color: #ffffff !important;
    box-shadow: var(--sp-btn-shadow) !important;
    transition: background-image 0.2s ease-in-out !important;
    position: relative !important;
}

.woocommerce-checkout .woocommerce-form-login button.button:hover {
    background-image: var(--sp-btn-gradient-hover) !important;
    transform: none !important;
    box-shadow: var(--sp-btn-shadow) !important;
}

/* --- "Glömt lösenordet?" --- */
.woocommerce-checkout .woocommerce-form-login .lost_password {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
}

.woocommerce-checkout .woocommerce-form-login .lost_password a {
    color: var(--sp-link-muted) !important;
    text-decoration: underline !important;
    font-size: 15px !important;
    font-family: var(--sp-font-body) !important;
    text-underline-offset: 4px;
}

.woocommerce-checkout .woocommerce-form-login .lost_password a:hover {
    color: var(--sp-green-dark) !important;
    text-decoration: none !important;
}

/* --- Dölj OTP-spinner --- */
img.simbaotp_spinner {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}


/* ========================================================================
   5. ORDERSAMMANFATTNING & TRIAL-BADGE
   ======================================================================== */

/* --- Städning: Dölj onödiga element --- */
#order_review_heading,
.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout-review-order-table .cart-subtotal,
.woocommerce-checkout-review-order-table .recurring-totals,
.woocommerce-checkout-review-order-table .cart-subtotal.recurring-total,
.product-quantity,
.subscription-details {
    display: none !important;
}

/* --- Huvudboxen --- */
.woocommerce-checkout-review-order-table {
    border: 1px solid var(--sp-border) !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    margin-bottom: 25px !important;
    display: block !important;
    padding: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* --- Rad-layout --- */
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot,
.woocommerce-checkout-review-order-table tr {
    display: block !important;
    width: 100% !important;
}

.woocommerce-checkout-review-order-table tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: none !important;
    padding: 15px 0 !important;
}

.woocommerce-checkout-review-order-table tbody tr:first-child {
    padding-top: 0 !important;
    padding-bottom: 15px !important;
}

/* --- Vänster sida (Produkt) --- */
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td.product-name {
    text-align: left !important;
    color: #111 !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    line-height: 1.2 !important;
}

/* --- Höger sida (Pris) --- */
.woocommerce-checkout-review-order-table td {
    text-align: right !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    flex: 0 0 40% !important;
    max-width: 40% !important;
}

.woocommerce-checkout-review-order-table .cart_item .product-total {
    display: none !important;
}

/* --- Summa idag (Grön) --- */
.woocommerce-checkout-review-order-table .order-total:not(.recurring-total) {
    border-top: 1px dashed #dcdcdc !important;
    border-bottom: none !important;
    padding-top: 20px !important;
    margin-top: 5px !important;
    align-items: center !important;
}

.woocommerce-checkout-review-order-table .order-total:not(.recurring-total) th {
    font-size: 16px !important;
    margin-top: 0 !important;
    flex: 0 0 60% !important;
    max-width: 60% !important;
}

.woocommerce-checkout-review-order-table .order-total:not(.recurring-total) td {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #2e7d32 !important;
    flex: 0 0 40% !important;
    max-width: 40% !important;
}

/* --- Återkommande summa (Grå box) --- */
.woocommerce-checkout-review-order-table .order-total.recurring-total {
    background-color: #f9f9f9 !important;
    border-top: 1px solid #eee !important;
    border-radius: 0 0 5px 5px !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    margin-bottom: -24px !important;
    padding: 18px 24px !important;
    width: calc(100% + 48px) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.woocommerce-checkout-review-order-table .order-total.recurring-total th {
    font-size: 13px !important;
    color: #555 !important;
    font-weight: normal !important;
    margin: 0 !important;
    text-align: left !important;
    flex: 0 0 35% !important;
}

.woocommerce-checkout-review-order-table .order-total.recurring-total td {
    text-align: right !important;
    flex: 0 0 65% !important;
    display: block !important;
}

.woocommerce-checkout-review-order-table .order-total.recurring-total td,
.woocommerce-checkout-review-order-table .order-total.recurring-total td span,
.woocommerce-checkout-review-order-table .order-total.recurring-total td strong {
    font-size: 13px !important;
    color: var(--sp-text) !important;
    font-weight: 700 !important;
}

.woocommerce-checkout-review-order-table .order-total.recurring-total .amount {
    font-weight: 800 !important;
    color: #000 !important;
}

.woocommerce-checkout-review-order-table .order-total.recurring-total small.includes_tax {
    font-weight: normal !important;
    color: #555 !important;
}

.woocommerce-checkout-review-order-table .order-total.recurring-total .first-payment-date {
    display: block !important;
    font-size: 11px !important;
    color: #999 !important;
    margin-top: 2px !important;
    font-style: normal !important;
    font-weight: normal !important;
}

/* --- Trial Badge ("14 dagar gratis") --- */
.woocommerce-checkout-review-order-table td.product-name.show-trial-badge::after {
    content: "\2713  14 DAGAR GRATIS PROVPERIOD INGÅR";
    display: inline-block !important;
    width: auto !important;
    background-color: #e6f4ea;
    color: #1e7e34;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 10px;
    border-radius: 20px;
    margin-left: 12px;
    margin-top: 0px !important;
    border: 1px solid #c6e7c6;
    line-height: 1;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* --- Bok-kassa: Avdelare & Frakt --- */
.woocommerce-checkout-review-order-table tr.cart_item {
    border-bottom: none !important;
}

.woocommerce-checkout-review-order-table tr.shipping {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 15px 0 !important;
    border-top: 1px dashed #dcdcdc !important;
    border-bottom: none !important;
}

.woocommerce-checkout-review-order-table tr.shipping th {
    text-align: left !important;
    flex: 0 0 60% !important;
    font-weight: normal !important;
    color: #111 !important;
    font-size: 16px !important;
}

.woocommerce-checkout-review-order-table tr.shipping td {
    text-align: right !important;
    flex: 0 0 40% !important;
    font-weight: 600 !important;
}

.woocommerce-checkout-review-order-table tr.shipping ul#shipping_method {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* --- Mobilanpassning: Ordersammanfattning --- */
@media only screen and (max-width: 600px) {

    .woocommerce-checkout-review-order-table td.product-name.show-trial-badge::after {
        display: table !important;
        margin-left: 0 !important;
        margin-top: 8px !important;
        position: static !important;
    }

    .woocommerce-checkout-review-order-table th,
    .woocommerce-checkout-review-order-table td.product-name {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    .woocommerce-checkout-review-order-table {
        padding: 15px 20px !important;
    }

    .woocommerce-checkout-review-order-table .order-total.recurring-total {
        margin-left: -20px !important;
        margin-right: -20px !important;
        margin-bottom: -15px !important;
        width: calc(100% + 40px) !important;
        border-radius: 0 0 5px 5px !important;
        align-items: flex-start !important;
    }

    .woocommerce-checkout-review-order-table .order-total.recurring-total th {
        flex: 0 0 30% !important;
        max-width: 30% !important;
        font-size: 12px !important;
        margin-top: 2px !important;
    }

    .woocommerce-checkout-review-order-table .order-total.recurring-total td {
        flex: 0 0 70% !important;
        max-width: 70% !important;
        text-align: right !important;
        white-space: normal !important;
    }

    .woocommerce-checkout-review-order-table .order-total.recurring-total td,
    .woocommerce-checkout-review-order-table .order-total.recurring-total td span,
    .woocommerce-checkout-review-order-table .order-total.recurring-total td strong,
    .woocommerce-checkout-review-order-table .order-total.recurring-total td small,
    .woocommerce-checkout-review-order-table .order-total.recurring-total td bdi {
        display: inline !important;
        font-size: 11px !important;
    }

    .woocommerce-checkout-review-order-table .order-total.recurring-total td br {
        display: none !important;
    }

    .woocommerce-checkout-review-order-table .order-total.recurring-total .first-payment-date {
        display: block !important;
        margin-top: 4px !important;
        font-size: 10px !important;
        color: #999 !important;
        font-weight: normal !important;
    }
}


/* ========================================================================
   6. BETALMETODER (Stripe & Klarna)
   ======================================================================== */

/* --- Stripe: Ram & Grund --- */
li.payment_method_stripe_cc {
    background-color: #f2f2f2 !important;
    border: 1px solid #bfbfbf !important;
    border-radius: 5px !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    position: relative !important;
    overflow: hidden !important;
}

/* --- Stripe: Radioknapp --- */
li.payment_method_stripe_cc > input[type="radio"] {
    margin-left: 15px !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
}

/* --- Stripe: Rubrik --- */
li.payment_method_stripe_cc > label {
    background-color: transparent !important;
    color: #000 !important;
    padding: 15px 20px 15px 15px !important;
    margin: 0 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
}

/* --- Stripe: Ikoner (Visa/Mastercard) --- */
li.payment_method_stripe_cc .wc-stripe-card-icons-container {
    margin-left: auto !important;
    display: flex !important;
    gap: 5px !important;
}

li.payment_method_stripe_cc .wc-stripe-card-icon {
    height: 22px !important;
    width: auto !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* --- Stripe: Betalbox (underdelen) --- */
li.payment_method_stripe_cc .payment_box {
    background-color: #f8f8f8 !important;
    border-top: 1px solid var(--sp-border) !important;
    padding: 25px 20px !important;
    margin: 0 !important;
    width: 100% !important;
}

/* --- Stripe: Inmatningsfält --- */
#wc-stripe-card-element,
.wc-stripe-elements-field,
.StripeElement {
    background-color: #ffffff !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 12px !important;
    transform: scale(0.85);
    transform-origin: left center;
    width: 117.65% !important;
    display: block !important;
    margin-bottom: 0 !important;
}

#wc-stripe-card-element iframe {
    min-height: 18px !important;
    margin: 0 !important;
    display: block !important;
    position: relative !important;
    top: 1px !important;
}

/* --- Stripe: Trygghetstext --- */
li.payment_method_stripe_cc .payment_box::after {
    content: "\f023    Dina betalningar skyddas med SSL-kryptering och säkerhet på banknivå.";
    font-family: "Font Awesome 5 Free", "Proxima Nova", sans-serif;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    font-size: 11px;
    color: var(--sp-text-light);
    font-style: italic !important;
    opacity: 0.9;
    line-height: 1.3;
}

li.payment_method_stripe_cc .payment_box::before {
    display: none !important;
}

/* --- Klarna: Ram & Grund --- */
li.payment_method_klarna_payments_pay_now,
li.payment_method_klarna_payments_pay_later,
li.payment_method_klarna_payments_pay_over_time,
li.payment_method_klarna_payments {
    background-color: #f2f2f2 !important;
    border: 1px solid #bfbfbf !important;
    border-radius: 5px !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    position: relative !important;
    overflow: hidden !important;
}

/* --- Klarna: Radioknapp --- */
li[class*="klarna"] > input[type="radio"] {
    margin-left: 15px !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
}

/* --- Klarna: Rubrik --- */
li[class*="klarna"] > label {
    background-color: transparent !important;
    color: #000 !important;
    padding: 15px 20px 15px 15px !important;
    margin: 0 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
}

/* --- Klarna: Betalbox --- */
li[class*="klarna"] .payment_box {
    background-color: #f8f8f8 !important;
    border-top: 1px solid var(--sp-border) !important;
    padding: 25px 20px !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--sp-text) !important;
    width: 100% !important;
}

li[class*="klarna"] .payment_box::before {
    display: none !important;
}

li[class*="klarna"] > label img {
    height: 18px !important;
    width: auto !important;
    margin-left: 10px !important;
    margin-top: -2px !important;
    float: none !important;
}

li[class*="klarna"] .payment_box img {
    max-height: 24px !important;
    margin-top: 10px !important;
    margin-right: 5px !important;
}

/* --- Dölj specifika Klarna-alternativ --- */
.wc_payment_method.payment_method_klarna_payments_pay_later,
ul.wc_payment_methods li.wc_payment_method.payment_method_klarna_payments_pay_over_time {
    display: none !important;
}

.wc-stripe-elements-field {
    border-color: #ccc !important;
}

/* --- Mobilfix (Klarna) --- */
@media only screen and (max-width: 767px) {
    body, html {
        overflow-x: hidden !important;
        position: relative !important;
    }
    .woocommerce-checkout, .woocommerce {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    #klarna_kco_main, #klarna-checkout-container {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* --- Ta bort fokus-ram --- */
li.payment_method_stripe_cc > input[type="radio"]:focus,
li[class*="klarna"] > input[type="radio"]:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* ========================================================================
   7. VILLKOR & OPT-IN (Kryssrutor)
   ======================================================================== */

.woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
}

.woocommerce-checkout .place-order .form-row {
    display: block;
    width: 100%;
    margin-bottom: 0px !important;
    padding: 0 !important;
    float: none !important;
}

.woocommerce-checkout .place-order label.checkbox {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: default !important;
}

.woocommerce-checkout .place-order input[type="checkbox"] {
    position: relative !important;
    top: 4px !important;
    margin-right: 10px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    accent-color: var(--sp-green) !important;
    cursor: pointer !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
}

.woocommerce-checkout .place-order label.checkbox span {
    font-family: var(--sp-font-body) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #333333 !important;
    font-weight: 400 !important;
    display: block !important;
    width: auto !important;
    margin-top: 1px !important;
}

.woocommerce-checkout .place-order label.checkbox a {
    color: var(--sp-link-muted) !important;
    text-decoration: underline !important;
    font-weight: 400 !important;
    cursor: pointer !important;
}

.woocommerce-checkout .place-order label.checkbox a:hover {
    color: var(--sp-green) !important;
}

/* --- Asterisk-fix --- */
.woocommerce-checkout .place-order .required {
    display: none !important;
}

.woocommerce-terms-and-conditions-checkbox-text::after {
    content: " *" !important;
    color: #c62828 !important;
    font-weight: 700 !important;
    display: inline-block !important;
    text-decoration: none !important;
    margin-left: 2px !important;
}


/* ========================================================================
   8. KÖP-KNAPP ("Slutför köp")
   ======================================================================== */

body.woocommerce-checkout #payment button#place_order {
    width: 100% !important;
    min-height: 54px !important;
    margin-top: 25px !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-family: var(--sp-font-btn) !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    text-shadow: none !important;
    border-radius: 4px !important;
    border: none !important;
    background-image: none !important;
    background: var(--sp-btn-gradient) !important;
    color: #ffffff !important;
    box-shadow: var(--sp-btn-shadow) !important;
    transition: background-image 0.2s ease-in-out !important;
    position: relative !important;
}

body.woocommerce-checkout #payment button#place_order:hover {
    background-image: none !important;
    background: var(--sp-btn-gradient-hover) !important;
    transform: none !important;
    box-shadow: var(--sp-btn-shadow) !important;
}

body.woocommerce-checkout #payment button#place_order::before,
body.woocommerce-checkout #payment button#place_order::after {
    display: none !important;
    content: none !important;
}

@media (max-width: 768px) {
    body.woocommerce-checkout #payment button#place_order {
        font-size: 16px !important;
        min-height: 52px !important;
    }
}


/* ========================================================================
   9. E-POSTVALIDERING (Felruta)
   ======================================================================== */

#paleo-email-error {
    background-color: #fff4f4;
    border-left: 4px solid #d63638;
    padding: 20px;
    margin: 15px 0 20px 0;
    font-family: var(--sp-font-body) !important;
    font-size: 16px !important;
    color: var(--sp-text) !important;
    line-height: 1.4 !important;
}

#paleo-email-error a.showlogin {
    color: var(--sp-text) !important;
    text-decoration: underline !important;
    font-weight: 700;
    cursor: pointer;
}

#paleo-email-error a.showlogin:hover {
    color: #000 !important;
    text-decoration: none !important;
}

#paleo-email-error strong {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}


/* ========================================================================
   10. BOK-KASSA (Sidspecifik)
   Döljer distraktioner på bok-försäljningssidan.
   ======================================================================== */

.page-id-237070 .woocommerce-form-login-toggle,
.page-id-237070 .woocommerce-form-coupon-toggle,
.page-id-237070 .woocommerce-account-fields,
.page-id-237070 .create-account {
    display: none !important;
}