/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0.4
*/

/* ============================================
   CUSTOM CHECKOUT - VARIABLES
   ============================================ */
:root {
    --cc-primary: #0f8b5d;
    --cc-primary-dark: #0a6b47;
    --cc-yellow: #f5d547;
    --cc-yellow-dark: #e5c537;
    --cc-border: #e0e0e0;
    --cc-border-active: #0f8b5d;
    --cc-bg-light: #f8f8f8;
    --cc-text: #333333;
    --cc-text-muted: #666666;
    --cc-text-light: #999999;
    --cc-radius: 12px;
    --cc-radius-sm: 8px;
}

/* ============================================
   RESET ELEMENTOR - SOLO DENTRO DEL FORM
   ============================================ */

/* Hacer transparentes los contenedores de Elementor SOLO dentro del form */
form.custom-checkout .e-checkout__container,
form.custom-checkout .e-checkout__column,
form.custom-checkout .e-checkout__column-start,
form.custom-checkout .e-checkout__column-end,
form.custom-checkout [class*="e-checkout"] {
    display: contents !important;
}

form.custom-checkout #customer_details {
    display: none !important;
}

/* ============================================
   LAYOUT PRINCIPAL - FORZADO CON SELECTORES ESPECÍFICOS
   ============================================ */
form.custom-checkout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

form.custom-checkout .cc-wrap {
    display: grid !important;
    grid-template-columns: 1fr 380px !important;
    gap: 40px !important;
    align-items: start !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

form.custom-checkout .cc-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    min-width: 0 !important;
    width: 100% !important;
}

/* ============================================
   SIDEBAR DERECHO - FORZADO
   ============================================ */
form.custom-checkout .cc-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    position: sticky !important;
    top: 100px !important;
    min-width: 0 !important;
    width: 100% !important;
}

.custom-checkout .cc-pay-top {
    order: 1;
}

.custom-checkout .cc-order {
    order: 2;
    background: var(--cc-bg-light);
    border-radius: var(--cc-radius);
    padding: 24px;
}

.custom-checkout .cc-order-title {
    margin: 0 0 16px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--cc-text);
}

/* Botón Pagar personalizado */
.custom-checkout .cc-btn-pagar {
    width: 100%;
    background: var(--cc-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--cc-radius) !important;
    padding: 18px 32px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background 0.2s ease;
    text-transform: none !important;
}

.custom-checkout .cc-btn-pagar:hover {
    background: var(--cc-primary-dark) !important;
}

/* ============================================
   LÍNEA DE ENVÍO EN RESUMEN DEL PEDIDO
   ============================================ */

/* Estilos base para la fila de envío */
.custom-checkout .woocommerce-checkout-review-order-table tr.shipping td,
.custom-checkout .woocommerce-checkout-review-order-table tr.cart-shipping td {
    text-align: right !important;
}

/* Lista de métodos de envío - solo estilos, NO ocultar */
.custom-checkout .woocommerce-checkout-review-order-table .shipping td ul,
.custom-checkout .woocommerce-checkout-review-order-table .cart-shipping td ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ocultar radio buttons */
.custom-checkout .woocommerce-checkout-review-order-table .shipping td input[type="radio"],
.custom-checkout .woocommerce-checkout-review-order-table .cart-shipping td input[type="radio"] {
    display: none !important;
}

/* Estilos del label */
.custom-checkout .woocommerce-checkout-review-order-table .shipping td label,
.custom-checkout .woocommerce-checkout-review-order-table .cart-shipping td label {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: default !important;
}

/* Items de envío: mostrados por defecto, JavaScript controlará visibilidad */
.custom-checkout .woocommerce-checkout-review-order-table .shipping td li,
.custom-checkout .woocommerce-checkout-review-order-table .cart-shipping td li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Clase para items ocultos (agregada por JavaScript) */
.custom-checkout .woocommerce-checkout-review-order-table .shipping td li.cc-hidden,
.custom-checkout .woocommerce-checkout-review-order-table .cart-shipping td li.cc-hidden {
    display: none !important;
}

/* ============================================
   ESTADOS: PICKUP (ocultar fila) vs DELIVERY (mostrar)
   ============================================ */

/* Cuando es PICKUP: ocultar la fila de envío completamente */
form.custom-checkout.is-pickup .woocommerce-checkout-review-order-table tr.shipping,
form.custom-checkout.is-pickup .woocommerce-checkout-review-order-table tr.cart-shipping {
    display: none !important;
}

/* Cuando es DELIVERY: mostrar la fila */
form.custom-checkout.is-delivery .woocommerce-checkout-review-order-table tr.shipping,
form.custom-checkout.is-delivery .woocommerce-checkout-review-order-table tr.cart-shipping {
    display: table-row !important;
}

/* ============================================
   TIPO DE ENTREGA - TOGGLE
   ============================================ */
.custom-checkout .cc-delivery {
    margin-bottom: 8px;
}

.custom-checkout .cc-section-title {
    margin: 0 0 16px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--cc-text);
}

.custom-checkout .cc-toggle {
    display: flex;
    gap: 16px;
}

.custom-checkout .cc-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border: 2px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: #fff;
    cursor: pointer;
    min-width: 200px;
    transition: all 0.2s ease;
}

.custom-checkout .cc-option:hover {
    border-color: #bbb;
}

.custom-checkout .cc-option.active {
    border-color: var(--cc-border-active);
    background: #fff;
}

.custom-checkout .cc-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--cc-primary);
}

.custom-checkout .cc-option-icon svg {
    width: 24px;
    height: 24px;
}

.custom-checkout .cc-option-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--cc-text);
    flex: 1;
}

.custom-checkout .cc-option input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--cc-primary);
    cursor: pointer;
    margin: 0;
}

/* ============================================
   SECCIONES DEL FORMULARIO
   ============================================ */
.custom-checkout .cc-section {
    background: #fff;
}

.custom-checkout .cc-step-title {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--cc-text);
}

.custom-checkout .cc-step-num {
    color: var(--cc-text);
}

.custom-checkout .cc-step-desc {
    margin: 0 0 16px 0;
    font-size: 13px;
    color: var(--cc-text-muted);
}

/* ============================================
   CAMPOS DE FORMULARIO
   ============================================ */
.custom-checkout .cc-field-wrap {
    margin-bottom: 12px;
}

.custom-checkout .cc-input,
.custom-checkout .cc-select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    font-size: 14px;
    color: var(--cc-text);
    background: #fff;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.custom-checkout .cc-input:focus,
.custom-checkout .cc-select:focus {
    outline: none;
    border-color: var(--cc-primary);
}

.custom-checkout .cc-input::placeholder {
    color: var(--cc-text-light);
}

.custom-checkout .cc-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    cursor: pointer;
}

/* Labels */
.custom-checkout .cc-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cc-text);
}

.custom-checkout .cc-field label abbr.required {
    color: #e74c3c;
    text-decoration: none;
}

/* Filas de campos */
.custom-checkout .cc-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.custom-checkout .cc-fields-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.custom-checkout .cc-field-full {
    margin-bottom: 16px;
}

/* ============================================
   SECCIÓN FACTURA / BOLETA
   ============================================ */
.custom-checkout .cc-invoice-card {
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    padding: 20px;
    background: #fff;
}

.custom-checkout .cc-invoice-toggle {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cc-border);
}

.custom-checkout .cc-invoice-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--cc-text);
}

.custom-checkout .cc-invoice-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--cc-primary);
    cursor: pointer;
    margin: 0;
}

.custom-checkout .cc-invoice-fields .cc-field {
    margin-bottom: 16px;
}

.custom-checkout .cc-btn-confirm {
    width: 100%;
    max-width: 200px;
    padding: 12px 24px;
    background: var(--cc-primary);
    color: #fff;
    border: none;
    border-radius: var(--cc-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-top: 8px;
}

.custom-checkout .cc-btn-confirm:hover {
    background: var(--cc-primary-dark);
}

/* ============================================
   MÉTODOS DE PAGO - WOOCOMMERCE NATIVO
   ============================================ */
.custom-checkout .cc-payment-section {
    margin-top: 8px;
}

.custom-checkout .cc-woo-payment {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

.custom-checkout .cc-woo-payment .wc_payment_methods {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
    border: none;
    background: transparent;
}

.custom-checkout .cc-woo-payment .wc_payment_method {
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    border: 2px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
}

.custom-checkout .cc-woo-payment .wc_payment_method:hover {
    border-color: #ccc;
}

.custom-checkout .cc-woo-payment .wc_payment_method.active,
.custom-checkout .cc-woo-payment .wc_payment_method:has(input:checked) {
    border-color: var(--cc-yellow);
    background: rgba(245, 213, 71, 0.05);
}

.custom-checkout .cc-woo-payment .wc_payment_method label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--cc-text);
    margin: 0;
    padding: 0;
}

.custom-checkout .cc-woo-payment .wc_payment_method label img {
    height: 24px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    margin-left: auto;
}

.custom-checkout .cc-woo-payment .wc_payment_method input[type="radio"] {
    display: none;
}

/* Descripción del método de pago */
.custom-checkout .cc-woo-payment .wc_payment_method .payment_box {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cc-border);
    font-size: 13px;
    color: var(--cc-text-muted);
    line-height: 1.5;
}

.custom-checkout .cc-woo-payment .wc_payment_method .payment_box p {
    margin: 0;
}

/* Ocultar place-order dentro del payment */
.custom-checkout .cc-woo-payment .place-order {
    display: none;
}

/* ============================================
   TÉRMINOS Y CONDICIONES - WOOCOMMERCE
   ============================================ */
.custom-checkout .woocommerce-terms-and-conditions-wrapper {
    margin-top: 16px;
}

.custom-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--cc-text-muted);
    line-height: 1.5;
}

.custom-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--cc-primary);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

.custom-checkout .woocommerce-terms-and-conditions-wrapper a {
    color: var(--cc-primary);
    text-decoration: underline;
}

/* ============================================
   AVISO DE CUENTA (email section)
   ============================================ */
.custom-checkout .cc-account-notice {
    background: var(--cc-yellow);
    border-radius: var(--cc-radius-sm);
    padding: 14px 20px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--cc-text);
}

/* ============================================
   LISTA DE TIENDAS (RETIRO)
   ============================================ */
.custom-checkout .cc-stores-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.custom-checkout .cc-store-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border: 2px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.custom-checkout .cc-store-option:has(input:checked) {
    border-color: var(--cc-border-active);
}

.custom-checkout .cc-store-info {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.custom-checkout .cc-store-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--cc-primary);
    border-radius: 8px;
    color: #fff;
    flex-shrink: 0;
}

.custom-checkout .cc-store-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.custom-checkout .cc-store-details strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--cc-text);
}

.custom-checkout .cc-store-address {
    font-size: 13px;
    color: var(--cc-text-muted);
}

.custom-checkout .cc-store-hours {
    font-size: 12px;
    color: var(--cc-primary);
    font-weight: 500;
}

.custom-checkout .cc-store-option input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--cc-primary);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

/* ============================================
   RADIO OPTIONS (QUIEN RETIRA)
   ============================================ */
.custom-checkout .cc-radio-group {
    display: flex;
    gap: 24px;
    margin-bottom: 12px;
}

.custom-checkout .cc-radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--cc-text);
}

.custom-checkout .cc-radio-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--cc-primary);
    cursor: pointer;
    margin: 0;
}

.custom-checkout .cc-notice {
    margin: 0;
    font-size: 13px;
    color: var(--cc-text-muted);
}

/* ============================================
   ORDER REVIEW - PRODUCTOS
   ============================================ */
.custom-checkout .woocommerce-checkout-review-order-table {
    width: 100%;
    border: none;
    margin: 0;
    border-collapse: collapse;
}

.custom-checkout .woocommerce-checkout-review-order-table thead {
    display: none;
}

.custom-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--cc-border);
}

.custom-checkout .woocommerce-checkout-review-order-table tbody tr:last-child {
    border-bottom: none;
}

.custom-checkout .woocommerce-checkout-review-order-table td {
    padding: 0;
    border: none;
}

.custom-checkout .woocommerce-checkout-review-order-table .product-name {
    flex: 1;
    font-size: 14px;
    color: var(--cc-text);
}

.custom-checkout .woocommerce-checkout-review-order-table .product-total {
    font-size: 15px;
    font-weight: 600;
    color: var(--cc-text);
    text-align: right;
}

/* Totales */
.custom-checkout .woocommerce-checkout-review-order-table tfoot tr {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.custom-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total {
    border-top: 2px solid var(--cc-border);
    padding-top: 16px;
    margin-top: 8px;
}

.custom-checkout .woocommerce-checkout-review-order-table tfoot th,
.custom-checkout .woocommerce-checkout-review-order-table tfoot td {
    padding: 0;
    border: none;
    font-size: 14px;
    background: transparent;
}

.custom-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th,
.custom-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
    font-size: 18px;
    font-weight: 700;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 980px) {
    form.custom-checkout .cc-wrap {
        grid-template-columns: 1fr !important;
        padding: 20px 16px !important;
    }

    form.custom-checkout .cc-left {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
    }

    form.custom-checkout .cc-right {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        position: static !important;
    }

    .custom-checkout .cc-toggle {
        flex-direction: column;
    }

    .custom-checkout .cc-option {
        min-width: 100%;
    }

    .custom-checkout .cc-fields-row,
    .custom-checkout .cc-fields-row-3 {
        grid-template-columns: 1fr;
    }

    .custom-checkout .cc-radio-group {
        flex-direction: column;
        gap: 12px;
    }

    .custom-checkout .cc-invoice-toggle {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .custom-checkout .cc-section-title {
        font-size: 18px;
    }

    .custom-checkout .cc-option {
        padding: 12px 16px;
    }

    .custom-checkout .cc-store-info {
        flex-direction: column;
        gap: 8px;
    }

    .custom-checkout .cc-woo-payment .wc_payment_method label {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .custom-checkout .cc-woo-payment .wc_payment_method label img {
        margin-left: 0;
    }
}