/* ============================================================================
 * Rio Times v6 — Mobile checkout hardening
 * Target: ProfilePress checkout form ([profilepress-checkout])
 * Scope:  ≤ 768px (tablet) and especially ≤ 480px (phone)
 * Added:  2026-05-10, part of v1.5.9.x
 *
 * Problem summary (mobile, before fix):
 *   - Order-summary side sits alongside the main form, crushing widths to ~80px.
 *   - ppress-co-half (2-col) and ppress-one-third (3-col) field rows squish
 *     inputs to 60-85px wide — unusable for typing.
 *   - "Monthly Subscription" word-breaks mid-word ("Subscripti / on") in summary.
 *   - Sticky mobile-bottom-nav covers final Subscribe button on shorter screens.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * Tablet & phone: stack order summary BELOW the main form
 * ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .ppress-checkout__form {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    /* In the DOM, summary comes BEFORE main — but on mobile we want main first */
    .ppress-checkout__form > #ppress_checkout_main_form,
    .ppress-checkout__form .ppress-checkout_main {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    .ppress-checkout__form > #ppress_checkout_summary,
    .ppress-checkout__form .ppress-checkout_side_section {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* ---------------------------------------------------------------------------
 * Phone (≤768): force all multi-column field rows to single column
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* The flex containers PP uses for grouped rows */
    .ppress-main-checkout-form__block {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    /* Each field item — let it take the full row */
    .ppress-main-checkout-form__block__item,
    .ppress-main-checkout-form__block__item.ppress-co-half,
    .ppress-main-checkout-form__block__item.ppress-one-third {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    /* Inputs themselves */
    .ppress-checkout-field__input,
    .ppress-main-checkout-form__block__item select,
    .ppress-main-checkout-form__block__item input,
    .ppress-main-checkout-form__block__item textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important; /* prevent iOS zoom on focus */
        padding: 12px 14px !important;
        box-sizing: border-box !important;
    }
    /* Labels — one line, normal weight */
    .ppress-main-checkout-form__block__item label,
    .ppress-checkout-field__label {
        display: block !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
        white-space: normal !important;
        word-break: normal !important;
    }
}

/* ---------------------------------------------------------------------------
 * Order summary text — never word-break mid-word
 * ------------------------------------------------------------------------- */
.ppress-checkout_order_summary,
.ppress-checkout_order_summary *,
.ppress-checkout_order_summary__plan_name,
.ppress-checkout_order_summary__plan_description,
.ppress-checkout_order_summary__bottom_details,
.ppress-checkout_charge_details {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
}

@media (max-width: 768px) {
    .ppress-checkout_order_summary__plan_name {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    .ppress-checkout_order_summary__plan_price {
        font-size: 20px !important;
        white-space: nowrap !important;
    }
    .checkout_order_summary__fee_structure__item {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        gap: 12px !important;
        padding: 8px 0 !important;
    }
    .checkout_order_summary__fee_structure__item dt {
        flex: 1 1 auto !important;
        font-size: 14px !important;
    }
    .checkout_order_summary__fee_structure__item dd {
        flex: 0 0 auto !important;
        font-size: 14px !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }
    .ppress-checkout_charge_details {
        font-size: 13px !important;
        line-height: 1.45 !important;
        padding: 12px !important;
    }
    .ppress-checkout_charge_details span {
        white-space: nowrap !important;
        font-weight: 600 !important;
    }
}

/* ---------------------------------------------------------------------------
 * Payment-method block, terms, submit button — mobile tap targets
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .ppress-checkout-form__payment_method {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
    .ppress-checkout-form__terms_condition_wrap label {
        font-size: 13px !important;
        line-height: 1.45 !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .ppress-checkout-form__terms_condition__checkbox_wrap input[type="checkbox"] {
        min-width: 20px !important;
        min-height: 20px !important;
        margin-top: 2px !important;
        flex: 0 0 auto !important;
    }
    .ppress-checkout-form__place_order_wrap button,
    .ppress-checkout-submit button,
    #ppress_checkout_submit_btn {
        width: 100% !important;
        min-height: 52px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    /* Stripe card iframe — full width and properly sized */
    .ppress-checkout-form__payment_method__content_wrap iframe,
    #ppress_stripe_card_element {
        min-height: 44px !important;
        width: 100% !important;
    }
}

/* ---------------------------------------------------------------------------
 * Bottom padding so the sticky mobile bottom-nav doesn't cover Subscribe btn
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    body.page-id-523610 .aw,
    body.page-template-default.page-id-523610 main {
        padding-bottom: 88px !important;
    }
    /* Generic catch-all for any checkout page */
    .ppress-checkout__form {
        padding-bottom: 88px !important;
    }
}

/* ---------------------------------------------------------------------------
 * "Name on card" duplicate-render guard — hide any empty card_name input
 * ------------------------------------------------------------------------- */
.ppress-checkout-form__payment_method__content_wrap input[type="text"]:placeholder-shown:not([id]):not([name]) {
    display: none !important;
}

/* ---------------------------------------------------------------------------
 * v1.5.9.2 — Terms & conditions consent line
 * Bug: the consent <label> is display:flex/row; the inline <a> "terms and
 * conditions" gets squeezed to ~15px, rendering text vertically (1 char/line).
 * Fix: change the label to a normal inline-flow line so checkbox + text + link
 * sit naturally next to each other and wrap as one paragraph.
 * ------------------------------------------------------------------------- */
.ppress-checkout-form__terms_condition_wrap,
.ppress-checkout-form__terms_condition__checkbox_wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

label.ppress-checkout-form__terms_condition__checkbox__label,
.ppress-checkout-form__terms_condition__checkbox__label {
    display: block !important;            /* not flex */
    width: 100% !important;
    max-width: 100% !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
    color: #333 !important;
    padding-left: 28px !important;        /* room for the floated checkbox */
    position: relative !important;
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

label.ppress-checkout-form__terms_condition__checkbox__label input[type="checkbox"],
.ppress-checkout-form__terms_condition__checkbox__label input[type="checkbox"] {
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex: 0 0 18px !important;
}

.ppress-checkout-form__terms_condition__checkbox__label a,
.ppress-terms-and-conditions-link {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    color: #1a1a2e !important;
    text-decoration: underline !important;
    word-break: normal !important;
}

/* ---------------------------------------------------------------------------
 * v1.5.9.2 — Bottom-nav clearance for Subscribe button
 * mob-bottom-nav is position:fixed at bottom. Add bottom padding so the
 * Subscribe button isn't covered when the user scrolls to it.
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    body.page-id-523610,
    .ppress-checkout__form {
        padding-bottom: 96px !important;  /* sticky nav height + buffer */
    }
    .ppress-checkout-form__place_order_wrap {
        position: relative !important;
        z-index: 10 !important;
        margin-bottom: 24px !important;
    }
}

/* ---------------------------------------------------------------------------
 * v1.5.9.2 — Stripe card-element container width parity
 * Stripe Elements iframe is wrapped in .ppress-stripe-element-wrap which has
 * extra horizontal padding causing card fields to be 282px vs 328px form
 * fields. Normalize widths.
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .ppress-stripe-element-wrap,
    .ppress-stripe-card-wrapper,
    #ppress-stripe-card-element,
    .ppress-stripe-card-element,
    .StripeElement {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
        padding: 10px 12px !important;
    }
    /* Stripe-mounted iframe */
    .ppress-stripe-element-wrap iframe,
    .StripeElement iframe {
        width: 100% !important;
    }
    /* Container that holds Payment Information block */
    .ppress-checkout-form__payment_method_wrap,
    .ppress-payment-method-section {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}