/* Custom CSS */

/* Fix PayPal button and messages overflow on mobile */
@media (max-width: 767px) {
    /* Resettiamo il layout di tutta l'area "Acquista" per metterli in colonna */
    .product-actions,
    .product-add-to-cart,
    .product-add-to-cart .product-quantity,
    .action-button,
    .product-actions > div,
    [data-module-name="paypal"],
    [data-module-name="ps_checkout"] {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
        box-sizing: border-box !important;
        align-items: stretch !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Distanziamo gli elementi tra loro */
    .product-actions > *,
    .product-add-to-cart > *,
    .action-button > * {
        margin-bottom: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Sistemiamo l'Aggiungi al Carrello */
    .product-add-to-cart .add {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    .product-add-to-cart .add .btn {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 10px !important;
    }

    /* Allarghiamo al 100% tutti i bottoni PayPal e i messaggi Rate */
    [data-paypal-button-container], 
    .paypal-buttons, 
    #paypal-button-container, 
    .paypal-button-container, 
    .paypal-messages,
    .ps_checkout-button,
    .ps_checkout-paypal-button,
    #payment-confirmation .paypal-buttons,
    #container_express_checkout,
    [data-container-express-checkout],
    .paypal-buttons-context,
    .paypal_payment_form {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
        margin: 5px 0 !important;
    }

    /* Forza a capo qualsiasi iframe o div generato internamente da PayPal */
    [data-paypal-button-container] > *,
    #paypal-button-container > *,
    .paypal-buttons > *,
    .ps_checkout-button > *,
    .paypal-buttons-context > *,
    iframe[src*="paypal"],
    iframe[name*="paypal"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin-bottom: 8px !important;
        box-sizing: border-box !important;
        float: none !important;
    }
    
    /* Evitiamo testi lunghi che spaccano il layout nel checkout */
    .payment-options .payment-option {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    /* Ripristiniamo i pulsanti social in orizzontale */
    .product-actions .social-share {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .product-actions .social-share > * {
        width: auto !important;
        max-width: none !important;
        margin-right: 15px !important;
        margin-bottom: 10px !important;
        display: inline-flex !important;
    }
}

/* Fix Product Image Lightbox on mobile */
@media (max-width: 767px) {
    .lb-dataContainer, 
    .lb-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    .lb-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    .lb-outerContainer {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    .lightbox {
        box-sizing: border-box;
    }
}