चेकआउट | CalliopeWP

@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap’);

body {
font-family: ‘Inter’, sans-serif !important;
background-color: #FAFAFA !important;
color: #0f172a !important;
}
::selection {
background-color: #e2e8f0 !important;
color: #0f172a !important;
}

/* ==============================================================
1. CSS PERSONALIZADO MAIA (Sobrescrituras exactas y Ancho 100%)
============================================================== */

/* Block components notice banner (Aviso de cupón oscuro) */
.woocommerce-checkout-page .woocommerce-form-coupon-toggle .wc-block-components-notice-banner,
body .woocommerce .woocommerce-info {
background-color: #020917 !important;
color: #ffffff !important;
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
border-bottom-left-radius: 10px !important;
border-bottom-right-radius: 10px !important;
border: 1px solid #1e293b !important;
padding: 1.25rem 1.5rem !important;
margin-bottom: 2.5rem !important;
list-style: none !important;
box-shadow: none !important;
font-size: 1rem !important;
font-weight: 500 !important;
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}

body .woocommerce .woocommerce-info a.showcoupon,
body .woocommerce .woocommerce-info a {
color: #ffffff !important;
font-weight: 600 !important;
text-decoration: underline !important;
transition: color 0.2s ease !important;
}

body .woocommerce .woocommerce-info a.showcoupon:hover {
color: #cbd5e1 !important;
}

/* SOLUCIÓN AL ANCHO: Siempre 100% del contenedor, NUNCA pixeles fijos */
.wp-site-blocks .flex-grow .mx-auto .wp-block-group .woocommerce .woocommerce-checkout-page,
.wp-block-group .woocommerce-checkout-page,
body .woocommerce form.checkout.woocommerce-checkout {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}

/* Heading a 42px exactos */
h1, .wp-block-post-title, .page-title, h1.entry-title,
.woocommerce-checkout-page .calliope-checkout-header h1 {
font-size: 42px !important;
font-weight: 900 !important;
color: #0f172a !important;
letter-spacing: -0.05em !important;
line-height: 1.1 !important;
margin-bottom: 0.5rem !important;
margin-top: 1rem !important;
}

/* Flex grow (Espaciados exactos requeridos) */
.flex-grow,
.wp-site-blocks .flex-grow {
padding-top: 56px !important;
margin-top: 0px !important;
transform: translatex(0px) translatey(0px) !important;
}

/* Calliope help block – Oculto permanentemente */
.calliope-help-block,
.wp-block-group .woocommerce-checkout-page .calliope-help-block {
display: none !important;
}

/* ==============================================================
2. TITULARES Y BREADCRUMBS INYECTADOS POR WP
============================================================== */

body .woocommerce h3#order_review_heading,
body .woocommerce-checkout h3#order_review_heading,
header.wp-block-template-part,
body .woocommerce .woocommerce-additional-fields h3 {
display: none !important;
}

h1 + p, .wp-block-post-title + p, .page-description, body .woocommerce-checkout p.subtitle {
font-size: 1.25rem !important;
color: #64748b !important;
margin-bottom: 3rem !important;
font-weight: 400 !important;
}

.woocommerce-breadcrumb, .breadcrumbs, .yoast-breadcrumb {
font-size: 0.75rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
color: #94a3b8 !important;
margin-bottom: 1rem !important;
display: flex !important;
gap: 0.5rem !important;
align-items: center !important;
}

.woocommerce-breadcrumb a, .breadcrumbs a {
color: #94a3b8 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}

.woocommerce-breadcrumb a:hover, .breadcrumbs a:hover {
color: #0f172a !important;
}

/* ==============================================================
3. AVISOS DE ERROR (Rojo)
============================================================== */

body .woocommerce .woocommerce-error {
border-radius: 0.5rem !important;
padding: 1.25rem 1.5rem !important;
margin-bottom: 2.5rem !important;
list-style: none !important;
font-size: 1rem !important;
font-weight: 500 !important;
display: block !important;
width: 100% !important;
background-color: #fef2f2 !important;
border: 1px solid #fca5a5 !important;
border-left: 4px solid #ef4444 !important;
color: #991b1b !important;
box-sizing: border-box !important;
}

/* ==============================================================
4. LAYOUT DEL CHECKOUT CLÁSICO (Dos Columnas SaaS y Mobile)
============================================================== */

body .woocommerce form.checkout.woocommerce-checkout,
body.woocommerce-checkout form.checkout {
display: flex !important;
flex-direction: column !important;
gap: 3rem !important;
width: 100% !important;
margin-top: 1rem !important;
background: transparent !important;
}

@media (min-width: 1024px) {
body .woocommerce form.checkout.woocommerce-checkout,
body.woocommerce-checkout form.checkout {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
gap: 5rem !important;
}

body .woocommerce form.checkout #customer_details {
flex: 1 1 55% !important;
max-width: 55% !important;
width: 100% !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
}

body .woocommerce form.checkout #order_review,
body .woocommerce form.checkout .woocommerce-checkout-review-order {
flex: 1 1 45% !important;
max-width: 45% !important;
width: 100% !important;
float: none !important;
position: sticky !important;
top: 6rem !important;
background-color: #020617 !important;
border-radius: 2.5rem !important;
padding: 2.5rem !important;
color: #ffffff !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
margin: 0 !important;
}
}

/* En móvil, forzamos que el resumen oscuro también tenga padding y fondo */
@media (max-width: 1023px) {
body .woocommerce form.checkout #order_review,
body .woocommerce form.checkout .woocommerce-checkout-review-order {
background-color: #020617 !important;
border-radius: 2rem !important;
padding: 2rem !important;
color: #ffffff !important;
width: 100% !important;
box-sizing: border-box !important;
margin-bottom: 2rem !important;
}
}

body .woocommerce .col2-set .col-1,
body .woocommerce .col2-set .col-2 {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin-bottom: 2rem !important;
padding: 0 !important;
}

body .woocommerce .woocommerce-billing-fields h3,
body .woocommerce .woocommerce-shipping-fields h3 {
font-size: 1.5rem !important;
font-weight: 800 !important;
color: #0f172a !important;
margin-bottom: 2rem !important;
padding-bottom: 0.75rem !important;
border-bottom: 2px solid #f1f5f9 !important;
display: block !important;
text-transform: none !important;
}

/* ==============================================================
5. ESTILOS DE LOS CAMPOS (Inputs Modernos)
============================================================== */

body .woocommerce .woocommerce-billing-fields__field-wrapper,
body .woocommerce .woocommerce-shipping-fields__field-wrapper,
body .woocommerce .woocommerce-additional-fields__field-wrapper {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 0 1.5rem !important;
}

body .woocommerce #billing_email_field,
body .woocommerce #billing_phone_field,
body .woocommerce #billing_address_1_field,
body .woocommerce #billing_address_2_field,
body .woocommerce #billing_country_field,
body .woocommerce #order_comments_field,
body .woocommerce #shipping_country_field,
body .woocommerce #shipping_address_1_field,
body .woocommerce #shipping_address_2_field {
grid-column: span 2 !important;
}

/* En móvil, los campos de media columna pasan a ocupar todo el ancho */
@media (max-width: 640px) {
body .woocommerce .woocommerce-billing-fields__field-wrapper,
body .woocommerce .woocommerce-shipping-fields__field-wrapper,
body .woocommerce .woocommerce-additional-fields__field-wrapper {
grid-template-columns: 1fr !important;
}
body .woocommerce form .form-row {
grid-column: span 1 !important;
}
}

body .woocommerce form .form-row {
margin-bottom: 1.5rem !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
width: 100% !important;
float: none !important;
}

body .woocommerce form .form-row label {
font-size: 0.75rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
color: #64748b !important;
margin-bottom: 0.5rem !important;
display: block !important;
line-height: 1.5 !important;
}

body .woocommerce form .form-row label abbr.required {
text-decoration: none !important;
color: #ef4444 !important;
border: none !important;
}

body .woocommerce form .form-row input.input-text,
body .woocommerce form .form-row textarea,
body .woocommerce .select2-container–default .select2-selection–single {
border-radius: 0.75rem !important;
border: 1px solid #cbd5e1 !important;
padding: 1rem 1.25rem !important;
font-family: ‘Inter’, sans-serif !important;
font-size: 1rem !important;
color: #0f172a !important;
background-color: #ffffff !important;
width: 100% !important;
height: auto !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
transition: all 0.2s ease !important;
margin: 0 !important;
box-sizing: border-box !important;
}

body .woocommerce form .form-row input.input-text:focus,
body .woocommerce form .form-row textarea:focus {
border-color: #0f172a !important;
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.05) !important;
outline: none !important;
}

body .woocommerce .select2-container–default .select2-selection–single {
padding: 0.75rem 1.25rem !important;
height: 3.2rem !important;
}
body .woocommerce .select2-container–default .select2-selection–single .select2-selection__arrow {
top: 50% !important;
transform: translateY(-50%) !important;
right: 1rem !important;
}

/* ==============================================================
6. RESUMEN DEL PEDIDO (Sidebar Oscuro)
============================================================== */

body .woocommerce table.shop_table.woocommerce-checkout-review-order-table {
border: none !important;
background: transparent !important;
width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
}

body .woocommerce table.shop_table.woocommerce-checkout-review-order-table thead {
display: none !important;
}

body .woocommerce table.shop_table.woocommerce-checkout-review-order-table tr {
display: flex !important;
justify-content: space-between !important;
padding: 1.25rem 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
align-items: center !important;
}

body .woocommerce table.shop_table.woocommerce-checkout-review-order-table td,
body .woocommerce table.shop_table.woocommerce-checkout-review-order-table th {
border: none !important;
background: transparent !important;
padding: 0 !important;
color: #ffffff !important;
}

body .woocommerce table.shop_table.woocommerce-checkout-review-order-table .product-name {
font-weight: 700 !important;
color: #ffffff !important;
font-size: 0.9375rem !important;
text-align: left !important;
flex: 1 !important;
}

body .woocommerce table.shop_table.woocommerce-checkout-review-order-table .product-quantity {
color: #94a3b8 !important;
font-weight: 800 !important;
}

body .woocommerce table.shop_table.woocommerce-checkout-review-order-table .product-total,
body .woocommerce table.shop_table.woocommerce-checkout-review-order-table .cart-subtotal td,
body .woocommerce table.shop_table.woocommerce-checkout-review-order-table .order-total td {
font-weight: 700 !important;
color: #f8fafc !important;
text-align: right !important;
padding-left: 1rem !important;
}

body .woocommerce table.shop_table.woocommerce-checkout-review-order-table tr.cart-subtotal th,
body .woocommerce table.shop_table.woocommerce-checkout-review-order-table tr.fee th {
color: #94a3b8 !important;
font-weight: 600 !important;
text-align: left !important;
}

body .woocommerce table.shop_table.woocommerce-checkout-review-order-table tr.order-total {
border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
border-bottom: none !important;
margin-top: 1rem !important;
padding-top: 2rem !important;
}

body .woocommerce table.shop_table.woocommerce-checkout-review-order-table tr.order-total th {
font-size: 1.25rem !important;
font-weight: 800 !important;
color: #ffffff !important;
text-align: left !important;
}

body .woocommerce table.shop_table.woocommerce-checkout-review-order-table tr.order-total .amount {
font-size: 2.25rem !important;
font-weight: 900 !important;
color: #ffffff !important;
letter-spacing: -0.05em !important;
}

/* ==============================================================
7. MÉTODOS DE PAGO Y BOTÓN FINAL (SOLUCIÓN MÓVIL)
============================================================== */

body .woocommerce #payment {
background: transparent !important;
border-radius: 0 !important;
padding: 0 !important;
margin-top: 2rem !important;
width: 100% !important;
}

body .woocommerce #payment ul.payment_methods {
padding: 0 !important;
margin: 0 0 2rem 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
padding-bottom: 1.5rem !important;
border-top: none !important;
background: transparent !important;
width: 100% !important;
}

/* Reset estricto para los items de pago (Evita que se rompan en móvil) */
body .woocommerce #payment ul.payment_methods li {
color: #94a3b8 !important;
font-size: 0.875rem !important;
margin-bottom: 1.25rem !important;
background: transparent !important;
list-style: none !important;
display: block !important;
text-align: left !important;
clear: both !important;
width: 100% !important;
}

body .woocommerce #payment ul.payment_methods li input[type=”radio”] {
display: inline-block !important;
vertical-align: middle !important;
margin: 0 0.5rem 0 0 !important;
position: static !important; /* Elimina posicionamiento absoluto de Woo */
width: auto !important;
height: auto !important;
}

body .woocommerce #payment ul.payment_methods label {
color: #ffffff !important;
font-weight: 700 !important;
font-size: 1rem !important;
display: inline-block !important;
vertical-align: middle !important;
margin: 0 !important;
width: auto !important;
}

body .woocommerce #payment div.payment_box {
background-color: rgba(255,255,255,0.05) !important;
color: #cbd5e1 !important;
border-radius: 0.75rem !important;
padding: 1.25rem !important;
margin-top: 1rem !important;
margin-bottom: 0 !important;
box-shadow: none !important;
width: 100% !important;
box-sizing: border-box !important;
display: block !important; /* El JS de Woo lo oculta/muestra, pero esto fija su caja */
font-size: 0.875rem !important;
line-height: 1.5 !important;
}

body .woocommerce #payment div.payment_box::before {
display: none !important;
}

body .woocommerce #payment .place-order {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
width: 100% !important;
}

/* EL BOTÓN PLACE ORDER */
body .woocommerce #payment #place_order {
background-color: #ffffff !important;
color: #020617 !important;
border-radius: 1.25rem !important;
font-size: 1.125rem !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 0.025em !important;
padding: 1.5rem !important;
width: 100% !important;
border: none !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
float: none !important;
margin-top: 1rem !important;
text-align: center !important;
display: block !important;
box-sizing: border-box !important;
}

body .woocommerce #payment #place_order:hover {
background-color: #f1f5f9 !important;
transform: translateY(-2px) !important;
box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.4) !important;
}

body .woocommerce .woocommerce-terms-and-conditions-wrapper {
margin-bottom: 1.5rem !important;
color: #94a3b8 !important;
font-size: 0.875rem !important;
width: 100% !important;
}

body .woocommerce .woocommerce-terms-and-conditions-wrapper a {
color: #ffffff !important;
text-decoration: underline !important;
font-weight: 600 !important;
}

body .woocommerce .woocommerce-terms-and-conditions-wrapper input[type=”checkbox”] {
margin-right: 0.5rem !important;
vertical-align: middle !important;
position: static !important;
}

क्या आपको अपने ऑर्डर के संबंध में सहायता चाहिए या बिक्री-पूर्व प्रश्न हैं?

हमारी सहायता टीम से बात करें