/* TEMPLATE 4: CSS FLOAT BLINDADO Y STICKY RIGHT */
form.checkout { position: relative; min-height: 400px; }
form.checkout:not(.ms-loaded) > * { opacity: 0 !important; pointer-events: none !important; }
form.checkout:not(.ms-loaded)::before {
    content: ''; position: absolute; top: 100px; left: calc(50% - 20px); width: 40px; height: 40px; border: 3px solid #f3f3f3; border-top: 3px solid var(--ms-primary-color); border-radius: 50%; animation: ms-fulldata-spin 1s linear infinite; z-index: 99;
}
form.checkout > * { transition: opacity 0.4s ease; }
form.checkout.processing .blockUI.blockOverlay { background: rgba(255, 255, 255, 0.7) !important; opacity: 1 !important; cursor: default !important; }
form.checkout.processing::after {
    content: ''; position: fixed; top: 50%; left: calc(50% - 25px); width: 50px; height: 50px; margin-top: -25px; border: 4px solid rgba(0, 0, 0, 0.1); border-top: 4px solid var(--ms-primary-color); border-radius: 50%; animation: ms-fulldata-spin 0.8s linear infinite; z-index: 999999;
}
@keyframes ms-fulldata-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

form.checkout { display: block !important; width: 100% !important; overflow: visible !important; }
.ms-checkout-grid { display: block !important; width: 100% !important; overflow: visible !important; position: relative; }
.ms-checkout-grid::after { content: ""; display: table; clear: both; } 
.ms-col-left { float: left !important; width: 55% !important; max-width: 55% !important; }
.ms-col-right { float: right !important; width: 41% !important; max-width: 41% !important; position: -webkit-sticky !important; position: sticky !important; top: 100px !important; z-index: 10; }

.ms-col-left #customer_details.row, .ms-col-left .row { display: block !important; margin: 0 !important; width: 100% !important; }
.ms-col-left .col-lg-7, .ms-col-left .col-lg-5, .ms-col-left .col-1, .ms-col-left .col-2, .ms-col-left .col-12 { width: 100% !important; max-width: 100% !important; float: none !important; display: block !important; padding: 0 !important; margin-bottom: 20px !important; }
.ms-col-left .checkout-order-review { display: none !important; }

.ms-advanced-title { font-size: 1.25em; font-weight: 800; margin-bottom: 20px; color: #111; text-transform: uppercase; letter-spacing: -0.5px; margin-top: 0; }
.ms-summary-title { margin-bottom: 15px; margin-top: 0; }
#order_review_heading { display: none !important; }

.ms-col-right .woocommerce-checkout-review-order-table { background: #fdfdfd !important; border: 1px solid #eaeaea !important; border-radius: 12px !important; padding: 30px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important; display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; }
.woocommerce-checkout-review-order-table thead { display: none !important; }
.woocommerce-checkout-review-order-table tbody, .woocommerce-checkout-review-order-table tfoot { display: block; width: 100%; }

.ms-col-right .woocommerce-checkout-review-order-table tbody tr.cart_item { display: block !important; width: 100% !important; border-bottom: 1px solid #f0f0f0 !important; }
.ms-col-right .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-checkout-wrap { display: flex !important; flex-direction: row !important; align-items: flex-start !important; padding: 20px 0 !important; gap: 15px !important; border: none !important; width: 100% !important; box-sizing: border-box !important; }

.woocommerce-checkout-review-order-table .product-thumbnail { width: 90px !important; height: 90px !important; position: relative !important; flex-shrink: 0 !important; border: 1px solid #eee; border-radius: 8px; padding: 4px; background: #fff; display: flex; align-items: center; justify-content: center; }
.woocommerce-checkout-review-order-table .product-thumbnail img { max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; }

#shipping_method { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
#shipping_method li { width: 100% !important; margin: 0 !important; padding: 0 !important; }
#shipping_method li label { 
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 15px;
    padding: 20px 22px; background: #fafafa; border: 2px solid #eaeaea !important; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; width: 100%; box-sizing: border-box; 
}
#shipping_method li label:hover { background: #fdfdfd; border-color: #ccc !important; }
#shipping_method input[type="radio"]:checked + label { background: #fff !important; border: 2px solid var(--ms-primary-color) !important; box-shadow: 0 8px 25px rgba(0,0,0,0.06) !important; }

.ms-shipping-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: #f0f0f0; border-radius: 10px; color: #777; flex-shrink: 0; transition: all 0.3s ease; }
#shipping_method input[type="radio"]:checked + label .ms-shipping-icon { background: var(--ms-primary-color); color: #fff; }

.ms-shipping-text-wrap { display: flex; flex-direction: column; flex-grow: 1; text-align: left; line-height: 1.3; }
.ms-shipping-name { font-weight: 700; font-size: 1.05em; color: #444; margin-bottom: 4px; transition: color 0.3s; }
.ms-shipping-cost { font-size: 0.95em; color: #777; font-weight: 600; transition: color 0.3s; }
.ms-shipping-cost .amount { font-weight: 700; }

#shipping_method input[type="radio"]:checked + label .ms-shipping-name { color: #111; }
#shipping_method input[type="radio"]:checked + label .ms-shipping-cost { color: var(--ms-primary-color); }

ul.payment_methods li.wc_payment_method > label::before, 
ul.payment_methods li.wc_payment_method .radio-custom label::before, 
ul.payment_methods li.wc_payment_method .porto-radio label::before { display: none !important; }

ul.payment_methods { display: flex !important; flex-direction: column; gap: 12px; padding: 0 !important; margin: 0 !important; }
ul.payment_methods li.wc_payment_method { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; transition: all 0.3s ease; list-style: none !important; }
ul.payment_methods li.wc_payment_method > label, ul.payment_methods li.wc_payment_method .radio-custom label, ul.payment_methods li.wc_payment_method .porto-radio label { 
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 15px;
    padding: 20px 22px !important; background: #fafafa; border: 2px solid #eaeaea !important; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; width: 100%; box-sizing: border-box; 
}
ul.payment_methods li.wc_payment_method > label:hover, ul.payment_methods li.wc_payment_method .porto-radio label:hover { background: #fdfdfd; border-color: #ccc !important; }
ul.payment_methods li.wc_payment_method.ms-pago-activo > label, ul.payment_methods li.wc_payment_method.ms-pago-activo .porto-radio label { 
    background: #fff !important; border: 2px solid var(--ms-primary-color) !important; box-shadow: 0 8px 25px rgba(0,0,0,0.06) !important; color: #111 !important; 
}

.ms-payment-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: #f0f0f0; border-radius: 10px; color: #777; flex-shrink: 0; transition: all 0.3s ease; }
ul.payment_methods li.wc_payment_method.ms-pago-activo .ms-payment-icon { background: var(--ms-primary-color); color: #fff; }

.ms-payment-text-wrap { display: flex; flex-direction: column; flex-grow: 1; text-align: left; line-height: 1.3; }
.ms-payment-name { font-weight: 700; font-size: 1.05em; color: #444; transition: color 0.3s; margin: 0; }
ul.payment_methods li.wc_payment_method.ms-pago-activo .ms-payment-name { color: #111; }

ul.payment_methods li.wc_payment_method div.payment_box { background: transparent !important; margin: 10px 0 0 0 !important; padding: 0 10px 15px 10px !important; color: #666 !important; font-size: 0.9em; border-top: none; }
ul.payment_methods li.wc_payment_method div.payment_box::before, ul.payment_methods li.wc_payment_method > label img { display: none !important; }

#payment .place-order { padding: 0 !important; border: none !important; background: transparent !important; margin: 20px 0 0 0 !important; }
#payment .place-order .button { width: 100% !important; padding: 18px !important; font-size: 1.15em !important; border-radius: 8px !important; text-align: center; background-color: #222 !important; color: #fff !important; transition: background 0.3s; }
#payment .place-order .button:hover { background-color: #000 !important; }
.woocommerce-terms-and-conditions-wrapper { background: #fdfdfd; padding: 20px; border-radius: 8px; border: 1px solid #eee; margin-top: 20px; margin-bottom: 20px; font-size: 0.9em; color: #666; }

.ms-back-to-cart:hover { color: var(--ms-primary-color) !important; transform: translateX(-4px); }

.ms-marketing-tab { transition: all 0.3s ease !important; }
.ms-marketing-tab:hover:not(.active) { border-color: #ccc !important; background-color: #fff !important; box-shadow: 0 6px 15px rgba(0,0,0,0.05) !important; transform: translateY(-3px); }
.ms-marketing-tab:hover:not(.active) svg { color: #555 !important; }
.ms-marketing-tab:hover:not(.active) span { color: #222 !important; }

.ms-marketing-form-row { display: flex; gap: 10px; flex-wrap: nowrap; width: 100%; }
.ms-marketing-input { flex: 1; min-width: 0 !important; padding: 14px !important; border: 1px solid #ddd !important; border-radius: 8px !important; outline: none !important; box-shadow: none !important; background: #fff !important; width: 100%; }
.ms-marketing-btn { flex: 0 0 auto; padding: 14px 24px !important; border-radius: 8px !important; background: #111 !important; color: #fff !important; border: none !important; font-weight: 600 !important; cursor: pointer !important; white-space: nowrap; transition: background 0.3s ease; text-transform: uppercase; font-size: 0.9em !important; height: auto !important; }
.ms-marketing-btn:hover { background: #000 !important; }

@media (max-width: 991px) {
    .ms-col-left, .ms-col-right { float: none !important; width: 100% !important; max-width: 100% !important; }
    .ms-col-right { position: relative !important; top: auto !important; margin-top: 30px; }
}
@media (max-width: 480px) {
    .ms-marketing-form-row { flex-direction: column; }
    .ms-marketing-btn { width: 100% !important; text-align: center; }
}