/**
 * Mozzeno Frontend Styles
 *
 * @package Mozzeno_WooCommerce
 */

:root {
    --mozzeno-primary: #222b54;
    --mozzeno-accent: #6bd9a8;
    --mozzeno-primary-soft: #eef1f9;
    --mozzeno-border: #d8ddef;
}

/* Mozzeno Widget Containers */
.mozzeno-product-widget,
.mozzeno-pay-widget,
.mozzeno-payment-widget,
.mozzeno-redirect-widget {
    margin: 15px 0;
}

/* Payment Method Additional Info */
.mozzeno-payment-additional-info {
    margin-top: 15px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 4px;
    min-height: 100px;
}

/* Payment Info Section — transparent so it matches other gateways’ payment_box on any theme */
.mozzeno-payment-info {
    padding: 12px 0 0 0;
    margin: 10px 0 0 0;
    width: 100%;
    box-sizing: border-box;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
}

.mozzeno-payment-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 15px 0;
}

.mozzeno-verify-text {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 15px 0 0 0;
    font-size: 14px;
    color: #495057;
    line-height: 1.5;
}

.mozzeno-verify-icon {
    color: var(--mozzeno-primary);
    font-size: 20px;
    font-style: normal;
    flex-shrink: 0;
    line-height: 1;
}

.mozzeno-warning-text {
    font-size: 13px;
    color: #666;
}

.mozzeno-widget-simulation {
    background: transparent;
    border-radius: 6px;
    margin: 10px 0;
}

.mozzeno-widget-simulation .lw-wrapper {
    background: transparent !important;
}

.payment_method_mozzeno .mozzeno-payment-widget {
    margin: 10px 0;
}

.payment_method_mozzeno .payment_box {
    /* Let the theme / WooCommerce style the payment_box like other gateways */
    border-radius: inherit;
}

.payment_method_mozzeno .lw-wrapper {
    min-height: 80px;
}

/* Fix logo size in payment method */
.payment_method_mozzeno img {
    max-width: 120px;
    height: auto;
    vertical-align: middle;
}

.payment_method_mozzeno .wc_payment_method label img {
    max-width: 80px;
    max-height: 30px;
    width: auto;
    height: auto;
    margin-left: 10px;
}

/* Mozzeno logo in payment list */
li.payment_method_mozzeno label img {
    max-width: 100px !important;
    max-height: 35px !important;
    width: auto !important;
    height: auto !important;
    display: inline-block;
    vertical-align: middle;
}

/* ---------------------------------------------------------------
   Checkout: mozzeno payment row — radio + label + logo on one line
   WooCommerce structure: <li> > <input.input-radio> + <label> + <div.payment_box>
   The radio and label are SIBLINGS inside the li, not parent/child.

   Why not CSS grid here: WooCommerce adds a clearfix ::after on each payment li.
   With display:grid that pseudo-element becomes a grid item and can shift columns.
   Also margin:0 on the radio removed WC’s default li input { margin: 0 1em 0 0 },
   so the label started further left than other gateways. Flex + WC margin + no ::after
   keeps alignment with Klarna / BACS / chèque on typical themes.
   --------------------------------------------------------------- */

.woocommerce-checkout #payment ul.payment_methods li.payment_method_mozzeno,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_mozzeno {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

/* WooCommerce clearfix on li — hide for this row so it is not a flex/grid item */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_mozzeno::after,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_mozzeno::after {
    content: none !important;
    display: none !important;
}

.woocommerce-checkout #payment ul.payment_methods li.payment_method_mozzeno > input.input-radio,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_mozzeno > input.input-radio {
    flex: 0 0 auto;
    float: none !important;
    position: static !important;
    top: auto !important;
    /* Same as WooCommerce ul.payment_methods li input */
    margin: 0 1em 0 0 !important;
    align-self: center;
}

.woocommerce-checkout #payment ul.payment_methods li.payment_method_mozzeno > label,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_mozzeno > label {
    flex: 1 1 auto;
    min-width: 0;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    cursor: pointer;
    margin: 0 !important;
}

/* Logo pushed to the far right inside the label */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_mozzeno > label img,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_mozzeno > label img {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    max-width: 100px !important;
    max-height: 32px !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    float: none !important;
    vertical-align: middle;
}

/* Payment detail box: full width below radio+label */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_mozzeno > .payment_box,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_mozzeno > .payment_box {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: 100%;
    margin-top: 8px !important;
}

/* Inner widget: full width */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_mozzeno .payment_box .mozzeno-payment-info,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_mozzeno .payment_box .mozzeno-payment-info {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Widget Wrapper */
.lw-wrapper {
    margin: 10px 0;
}

.lw-modal {
    z-index: 999999;
}

/* Payment Redirect Page */
.mozzeno-redirect-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    background: #f7f7f7;
    padding: 40px 20px;
}

.redirect-container {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
}

.redirect-container h2 {
    color: #333;
    margin-bottom: 20px;
}

.redirect-description {
    color: #666;
    margin-bottom: 30px;
    font-size: 16px;
}

.order-details {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 4px;
    margin: 20px 0;
    text-align: left;
}

.order-detail-item {
    margin: 10px 0;
    font-size: 14px;
}

.detail-icon {
    margin-right: 8px;
}

.mozzeno-widget-container {
    margin: 30px 0;
}

.mozzeno-help-text {
    color: #666;
    font-size: 14px;
    margin: 20px 0;
}

.help-icon {
    margin-right: 5px;
}

.mozzeno-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.mozzeno-buttons .btn {
    padding: 12px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.mozzeno-buttons .btn-primary {
    background: var(--mozzeno-primary);
    color: #fff;
}

.mozzeno-buttons .btn-primary:hover {
    background: #1a2141;
}

.mozzeno-buttons .btn-secondary {
    background: #f0f0f1;
    color: #333;
}

.mozzeno-buttons .btn-secondary:hover {
    background: #dcdcde;
}

.mozzeno-payment-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--mozzeno-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.mozzeno-payment-btn:hover {
    background: #1a2141;
}

.mozzeno-widget-logo {
    vertical-align: middle;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .mozzeno-payment-info {
        padding: 12px 15px;
    }
    
    .mozzeno-verify-text {
        font-size: 13px;
    }
    
    .mozzeno-payment-title {
        font-size: 15px;
    }
}

@media screen and (max-width: 600px) {
    .redirect-container {
        padding: 30px 20px;
    }
    
    .mozzeno-buttons {
        flex-direction: column;
    }
    
    .mozzeno-buttons .btn {
        width: 100%;
    }
}