/**
 * AHRA Theme - WooCommerce Checkout Styles
 * PAY-06: Personalización del checkout con diseño AHRA
 */

/* ============================================
   Variables y Reset
   ============================================ */
.woocommerce-checkout {
    --ahra-blue: #1A66FF;
    --ahra-blue-dark: #1550cc;
    --ahra-blue-light: #e8f0fe;
    --ahra-text: #1a1c1c;
    --ahra-text-muted: #64748b;
    --ahra-border: #e2e8f0;
    --ahra-bg: #f9f9f9;
    --ahra-white: #ffffff;
    --ahra-radius: 12px;
    --ahra-shadow: 0 12px 32px rgba(26, 28, 28, 0.06);
}

/* ============================================
   Layout General
   ============================================ */
.woocommerce-checkout body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--ahra-bg);
    color: var(--ahra-text);
    line-height: 1.6;
}

.woocommerce-checkout h1,
.woocommerce-checkout h2,
.woocommerce-checkout h3,
.woocommerce-checkout h4,
.woocommerce-checkout h5,
.woocommerce-checkout h6 {
    font-family: 'Manrope', sans-serif;
    color: var(--ahra-text);
}

/* Contenedor principal */
.woocommerce-checkout .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
}

/* ============================================
   Header / Título
   ============================================ */
.woocommerce-checkout h1.woocommerce-checkout-page-title {
    font-size: 28px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 32px;
    color: var(--ahra-text);
}

.woocommerce-checkout h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ahra-border);
}

/* ============================================
   Columnas / Grid
   ============================================ */
.woocommerce-checkout .col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    min-width: 0;
}

@media (max-width: 768px) {
    .woocommerce-checkout .col2-set {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ============================================
   Cards / Secciones
   ============================================ */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .checkout #customer_details,
.woocommerce-checkout .checkout #order_review {
    background: var(--ahra-white);
    border-radius: var(--ahra-radius);
    padding: 24px;
    box-shadow: var(--ahra-shadow);
    border: 1px solid var(--ahra-border);
}

/* ============================================
   Formularios
   ============================================ */
.woocommerce-checkout .form-row {
    margin-bottom: 16px;
}

.woocommerce-checkout .form-row label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ahra-text);
    margin-bottom: 6px;
}

.woocommerce-checkout .form-row label .required {
    color: #ef4444;
    margin-left: 2px;
}

.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--ahra-border);
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    color: var(--ahra-text);
    background: var(--ahra-white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    outline: none;
    border-color: var(--ahra-blue);
    box-shadow: 0 0 0 3px rgba(26, 102, 255, 0.15);
}

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    box-sizing: border-box;
    width: 48%;
}

.woocommerce-checkout .form-row-first {
    float: left;
}

.woocommerce-checkout .form-row-last {
    float: right;
}

/* Checkboxes y Radios */
.woocommerce-checkout .form-row__label--inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--ahra-blue);
    cursor: pointer;
}

/* ============================================
   Order Review / Resumen
   ============================================ */
.woocommerce-checkout #order_review {
    position: sticky;
    top: 24px;
}

.woocommerce-checkout #order_review_heading {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Tabla de productos */
.woocommerce-checkout .woocommerce-cart-overview {
    background: var(--ahra-bg);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.woocommerce-checkout table.woocommerce-table {
    border-collapse: collapse;
    width: 100%;
}

.woocommerce-checkout table.woocommerce-table th {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ahra-text-muted);
    padding: 8px 12px;
    border-bottom: 2px solid var(--ahra-border);
    text-align: left;
}

.woocommerce-checkout table.woocommerce-table td {
    padding: 12px;
    border-bottom: 1px solid var(--ahra-border);
    font-size: 14px;
    vertical-align: middle;
}

.woocommerce-checkout table.woocommerce-table tr:last-child td {
    border-bottom: none;
}

/* Totales */
.woocommerce-checkout .woocommerce-cart-overview .amount {
    font-weight: 700;
}

.woocommerce-checkout .cart-subtotal,
.woocommerce-checkout .order-total {
    font-weight: 600;
}

.woocommerce-checkout .order-total .amount {
    font-size: 24px;
    font-weight: 800;
    color: var(--ahra-blue);
}

/* ============================================
   Payment Methods
   ============================================ */
.woocommerce-checkout ul.wc_payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.woocommerce-checkout ul.wc_payment_methods li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 16px;
    margin-bottom: 12px;
    border: 2px solid var(--ahra-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: var(--ahra-white);
}

.woocommerce-checkout ul.wc_payment_methods li .payment_box {
    flex: 1 0 100%;
    width: 100%;
}

.woocommerce-checkout ul.wc_payment_methods li.selected {
    border-color: var(--ahra-blue);
    background: var(--ahra-blue-light);
}

.woocommerce-checkout ul.wc_payment_methods li:hover {
    border-color: var(--ahra-blue);
}

.woocommerce-checkout ul.wc_payment_methods li input[type="radio"] {
    margin-right: 12px;
}

.woocommerce-checkout ul.wc_payment_methods li label {
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    flex: 1;
}

.woocommerce-checkout .payment_method_title {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Payment box (descripción del método) */
.woocommerce-checkout .payment_box {
    padding: 16px;
    margin-bottom: 16px;
    background: var(--ahra-bg);
    border-radius: 8px;
    font-size: 14px;
    color: var(--ahra-text-muted);
}

/* ============================================
   Place Order Button
   ============================================ */
.woocommerce-checkout #place_order {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: var(--ahra-blue);
    color: var(--ahra-white);
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(26, 102, 255, 0.3);
    letter-spacing: 0.02em;
}

.woocommerce-checkout #place_order:hover {
    background: var(--ahra-blue-dark);
    box-shadow: 0 6px 16px rgba(26, 102, 255, 0.4);
    transform: translateY(-1px);
}

.woocommerce-checkout #place_order:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(26, 102, 255, 0.3);
}

/* ============================================
   Terms / Notices
   ============================================ */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message {
    background: var(--ahra-blue-light);
    border-left: 4px solid var(--ahra-blue);
    color: var(--ahra-text);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14px;
}

.woocommerce-checkout .woocommerce-error {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
    color: #991b1b;
}

.woocommerce-checkout .woocommerce-info .button,
.woocommerce-checkout .woocommerce-message .button {
    background: transparent;
    color: var(--ahra-blue);
    border: none;
    text-decoration: underline;
    padding: 0;
}

/* ============================================
   Links y Botones Secundarios
   ============================================ */
.woocommerce-checkout a {
    color: var(--ahra-blue);
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s;
}

.woocommerce-checkout a:hover {
    color: var(--ahra-blue-dark);
}

/* ============================================
   Account Creation / Coupon
   ============================================ */
.woocommerce-checkout .create-account {
    margin-bottom: 16px;
}

.woocommerce-checkout .checkout_coupon {
    margin-bottom: 24px;
}

.woocommerce-checkout .checkout_coupon .button {
    padding: 10px 20px;
    background: var(--ahra-text);
    color: var(--ahra-white);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.woocommerce-checkout .checkout_coupon .button:hover {
    background: #334155;
}

/* ============================================
   Logo en Checkout
   ============================================ */
.woocommerce-checkout .ahra-checkout-logo {
    text-align: center;
    margin-bottom: 24px;
}

.woocommerce-checkout .ahra-checkout-logo img {
    max-height: 48px;
    width: auto;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 640px) {
    .woocommerce-checkout .woocommerce {
        padding: 16px 12px;
    }

    .woocommerce-checkout h1.woocommerce-checkout-page-title {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .woocommerce-checkout .woocommerce-billing-fields,
    .woocommerce-checkout .checkout #customer_details,
    .woocommerce-checkout .checkout #order_review {
        padding: 16px;
    }

    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100%;
        float: none;
    }

    .woocommerce-checkout #place_order {
        font-size: 15px;
        padding: 14px 20px;
    }

    .woocommerce-checkout .order-total .amount {
        font-size: 20px;
    }
}

/* ============================================
   Mercado Pago — Selector de métodos de pago
   Acorde al resto del checkout (mismos radios, tarjetas,
   tipografía y colores que .wc_payment_methods).
   ============================================ */

/* Refuerzo del estilo de cada método (Mercado Pago, Tarjeta,
   Efectivo, Sin Tarjeta) — con !important porque el plugin de
   Mercado Pago carga su propio CSS y puede pisar el nuestro. */
.woocommerce-checkout ul.wc_payment_methods > li.wc_payment_method {
    border: 2px solid var(--ahra-border) !important;
    border-radius: var(--ahra-radius) !important;
    background: var(--ahra-white) !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    transition: border-color 0.2s, background 0.2s;
}

.woocommerce-checkout ul.wc_payment_methods > li.wc_payment_method:has(input:checked) {
    border-color: var(--ahra-blue) !important;
    background: var(--ahra-blue-light) !important;
}

.woocommerce-checkout ul.wc_payment_methods > li.wc_payment_method label {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--ahra-text) !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.woocommerce-checkout ul.wc_payment_methods > li.wc_payment_method label img {
    height: 20px;
    width: auto;
}

/* Contenedor interno de cada widget de Mercado Pago */
.woocommerce-checkout .payment_box.payment_method_woo-mercado-pago-basic,
.woocommerce-checkout .payment_box.payment_method_woo-mercado-pago-custom,
.woocommerce-checkout .payment_box.payment_method_woo-mercado-pago-ticket,
.woocommerce-checkout .payment_box.payment_method_woo-mercado-pago-credits {
    background: var(--ahra-bg) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-top: 12px !important;
    font-family: 'Inter', sans-serif !important;
}

.woocommerce-checkout .mp-checkout-pro-benefits-title,
.woocommerce-checkout .mp-checkout-custom-container h4,
.woocommerce-checkout .mp-checkout-container h4 {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    color: var(--ahra-text) !important;
    font-size: 16px !important;
}

.woocommerce-checkout .mp-checkout-pro-benefit-description,
.woocommerce-checkout .mp-checkout-pro-benefit-description b {
    color: var(--ahra-text-muted) !important;
    font-size: 13px !important;
}

/* Íconos de marcas de tarjeta (Visa, Master, etc.) */
.woocommerce-checkout .mp-checkout-pro-payment-method-icon,
.woocommerce-checkout .mp-checkout-custom-card-flags img {
    height: 22px !important;
    width: auto !important;
    margin-right: 6px;
    opacity: 0.85;
}

/* "Pagá en un toque con tus tarjetas guardadas" */
.woocommerce-checkout .mp-wallet-button-container-wrapper {
    background: var(--ahra-white) !important;
    border: 1px solid var(--ahra-border) !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin: 16px 0 !important;
}

.woocommerce-checkout .mp-wallet-button-title span {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    color: var(--ahra-text) !important;
    font-size: 14px !important;
}

/* Labels y campos propios del formulario de tarjeta de Mercado Pago */
.woocommerce-checkout .mp-input-label {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--ahra-text) !important;
    margin-bottom: 6px !important;
    display: block;
}

/* El plugin de Mercado Pago estiliza estos campos con selectores anclados
   a #mp-checkout-custom-root / #mp-checkout-pro-root, que tienen más
   especificidad que una clase simple. Repetimos el mismo ancla de ID para
   igualar (y ganar, por cargar después) esa especificidad. */
.woocommerce-checkout .mp-checkout-custom-card-input,
.woocommerce-checkout .mp-document,
.woocommerce-checkout .mp-document-select,
.woocommerce-checkout .mp-custom-checkout-select-input,
.woocommerce-checkout [id^="form-checkout__"]:not([type="hidden"]),
#mp-checkout-custom-root .mp-checkout-custom-card-input,
#mp-checkout-custom-root .mp-document,
#mp-checkout-custom-root .mp-document-select,
#mp-checkout-custom-root .mp-custom-checkout-select-input,
#mp-checkout-custom-root [id^="form-checkout__"]:not([type="hidden"]),
#mp-checkout-custom-root #mp-custom-checkout-form-container .mp-checkout-custom-card-form .mp-checkout-custom-card-input,
#mp-checkout-custom-root #mp-custom-checkout-form-container .mp-document,
#mp-checkout-custom-root #mp-custom-checkout-form-container .mp-document-select,
#mp-checkout-custom-root #mp-custom-checkout-form-container .mp-custom-checkout-select-input,
#mp-checkout-pro-root input,
#mp-checkout-pro-root select {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid var(--ahra-border) !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-family: 'Inter', sans-serif !important;
    color: var(--ahra-text) !important;
    background: var(--ahra-white) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.woocommerce-checkout .mp-checkout-custom-card-input:focus,
.woocommerce-checkout .mp-document:focus,
.woocommerce-checkout .mp-document-select:focus,
.woocommerce-checkout .mp-custom-checkout-select-input:focus,
#mp-checkout-custom-root .mp-checkout-custom-card-input:focus,
#mp-checkout-custom-root .mp-document:focus,
#mp-checkout-custom-root .mp-document-select:focus,
#mp-checkout-custom-root .mp-custom-checkout-select-input:focus {
    outline: none !important;
    border-color: var(--ahra-blue) !important;
    box-shadow: 0 0 0 3px rgba(26, 102, 255, 0.15) !important;
}

/* Contenedor genérico de los campos de tarjeta segura (número, vencimiento,
   código de seguridad) que Mercado Pago monta vía su propio SDK. No podemos
   restylear el interior por motivos de seguridad (PCI-DSS), pero sí el marco
   que lo rodea para que se vea acorde al resto del formulario. */
.woocommerce-checkout .mp-checkout-custom-container iframe {
    border: 2px solid var(--ahra-border) !important;
    border-radius: 8px !important;
}

/* ============================================
   Mercado Pago - Selector "Efectivo" (Pago Fácil / Rapipago)
   ============================================ */
.woocommerce-checkout .mp-checkout-ticket-text {
    font-family: 'Inter', sans-serif !important;
    color: var(--ahra-text-muted) !important;
    font-size: 14px !important;
    margin-bottom: 12px !important;
}

.woocommerce-checkout .mp-input-table-list {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.woocommerce-checkout .mp-input-table-item {
    flex: 1 1 200px !important;
    border: 2px solid var(--ahra-border) !important;
    border-radius: var(--ahra-radius) !important;
    background: var(--ahra-white) !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    transition: border-color 0.2s, background-color 0.2s;
}

.woocommerce-checkout .mp-input-table-item:has(.mp-input-radio-radio:checked) {
    border-color: var(--ahra-blue) !important;
    background: var(--ahra-blue-light) !important;
}

.woocommerce-checkout .mp-input-table-label,
.woocommerce-checkout .mp-input-table-option {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    cursor: pointer !important;
}

.woocommerce-checkout .mp-input-radio-container {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

.woocommerce-checkout .mp-input-radio-radio {
    width: 18px !important;
    height: 18px !important;
    margin: 0 10px 0 0 !important;
    accent-color: var(--ahra-blue) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.woocommerce-checkout .mp-input-radio-label {
    cursor: pointer !important;
}

.woocommerce-checkout .mp-input-table-row-text-image {
    display: flex !important;
    align-items: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ahra-text) !important;
}

.woocommerce-checkout .mp-payment-method-logo-image {
    height: 20px !important;
    width: auto !important;
    max-width: 60px !important;
    object-fit: contain !important;
}

/* ============================================
   Animaciones
   ============================================ */
@keyframes ahra-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.woocommerce-checkout .processing .button::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ahra-spin 0.6s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}