/**
 * Checkout Responsive CSS - Meloopets
 * Media queries y ajustes responsivos
 * @version 2.0.0
 */

/* ========================================
   TABLET Y MENORES (< 1024px)
   ======================================== */

@media (max-width: 1023px) {
    
    /* Layout a una columna */
    .meloopets-checkout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Order review no sticky en tablet */
    .meloopets-checkout .ct-order-review {
        position: static;
        order: 2;
    }

    /* Customer details primero */
    .meloopets-checkout .ct-customer-details {
        order: 1;
    }

    /* H3 más pequeño */
    .meloopets-checkout h3 {
        font-size: 1.35rem;
    }

    /* Tabla más compacta */
    .meloopets-checkout .shop_table {
        font-size: 0.95rem;
    }

    .meloopets-checkout .shop_table th,
    .meloopets-checkout .shop_table td {
        padding: 0.75rem;
    }

    /* Botón más ancho */
    .meloopets-checkout #place_order {
        width: 100%;
        padding: 1.125rem 2rem;
    }

}

/* ========================================
   MÓVIL (< 768px)
   ======================================== */

@media (max-width: 767px) {

    /* Padding reducido del wrapper */
    .meloopets-checkout {
        padding: 1.5rem 1rem;
        gap: 1.5rem;
    }

    /* Cards con menos padding */
    .meloopets-checkout .ct-customer-details,
    .meloopets-checkout .ct-order-review {
        padding: 1.25rem;
    }

    /* H3 títulos más pequeños */
    .meloopets-checkout h3 {
        font-size: 1.2rem;
        margin-bottom: 1.25rem;
    }

    .meloopets-checkout h3::before {
        height: 28px;
    }

    /* ========================================
       FORMULARIOS EN MÓVIL
       ======================================== */

    /* Una columna para todos los campos */
    .meloopets-checkout .woocommerce-billing-fields__field-wrapper,
    .meloopets-checkout .woocommerce-shipping-fields__field-wrapper,
    .meloopets-checkout .woocommerce-address-fields__field-wrapper {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .meloopets-checkout .form-row-first,
    .meloopets-checkout .form-row-last,
    .meloopets-checkout .form-row-wide {
        width: 100%;
        float: none;
        clear: both;
        grid-column: 1 / -1;
    }

    /* Labels más pequeños */
    .meloopets-checkout label {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }

    /* Inputs con más altura para touch */
    .meloopets-checkout input[type="text"],
    .meloopets-checkout input[type="email"],
    .meloopets-checkout input[type="tel"],
    .meloopets-checkout input[type="number"],
    .meloopets-checkout textarea,
    .meloopets-checkout select {
        padding: 1rem;
        font-size: 16px; /* Evita zoom en iOS */
        min-height: 48px; /* Touch target size */
    }

    .meloopets-checkout .select2-container--default .select2-selection--single {
        padding: 1rem;
        min-height: 48px;
    }

    /* Select2 arrow más grande */
    .meloopets-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-width: 8px 6px 0 6px;
    }

    /* Prefijo de teléfono ajustado */
    .meloopets-checkout .phone-prefix-co {
        font-size: 14px;
        left: 12px;
    }

    .meloopets-checkout #billing_phone,
    .meloopets-checkout #shipping_phone {
        padding-left: 55px !important;
    }

    /* ========================================
       TABLA DE ORDEN EN MÓVIL
       ======================================== */

    .meloopets-checkout .shop_table {
        font-size: 0.9rem;
    }

    .meloopets-checkout .shop_table thead {
        display: none; /* Ocultar encabezados en móvil */
    }

    .meloopets-checkout .shop_table tbody tr {
        display: flex;
        flex-direction: column;
        border-bottom: 2px solid var(--checkout-border);
        padding: 1rem 0;
    }

    .meloopets-checkout .shop_table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border: none;
    }

    .meloopets-checkout .shop_table tbody td::before {
        content: attr(data-title);
        font-weight: 600;
        color: var(--checkout-primary);
        margin-right: 1rem;
    }

    /* Product name con imagen pequeña */
    .meloopets-checkout .shop_table .product-name {
        flex-direction: column;
        align-items: flex-start;
    }

    .meloopets-checkout .shop_table .product-name img {
        max-width: 60px;
        margin-bottom: 0.5rem;
    }

    /* Quantity centrada */
    .meloopets-checkout .shop_table .product-quantity {
        justify-content: center;
    }

    /* Total más destacado */
    .meloopets-checkout .shop_table .product-total {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--checkout-accent);
    }

    /* Order total más grande */
    .meloopets-checkout .shop_table .order-total td {
        font-size: 1.25rem;
        padding: 1rem 0;
    }

    /* ========================================
       MÉTODOS DE PAGO EN MÓVIL
       ======================================== */

    .meloopets-checkout .wc_payment_methods {
        gap: 0.75rem;
    }

    .meloopets-checkout .wc_payment_method {
        padding: 1rem;
    }

    .meloopets-checkout .wc_payment_method label {
        font-size: 0.95rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .meloopets-checkout .wc_payment_method img {
        max-width: 100px;
    }

    /* Payment box más compacto */
    .meloopets-checkout .payment_box {
        padding: 1rem;
        font-size: 0.9rem;
        margin-top: 0.75rem;
    }

    /* ========================================
       BOTÓN DE PAGO EN MÓVIL
       ======================================== */

    .meloopets-checkout #place_order {
        width: 100%;
        padding: 1.25rem 1.5rem;
        font-size: 1.1rem;
        position: sticky;
        bottom: 0;
        z-index: 10;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
    }

    /* ========================================
       SHIP TO DIFFERENT ADDRESS EN MÓVIL
       ======================================== */

    .meloopets-checkout #ship-to-different-address {
        padding: 1rem;
        margin-bottom: 1.25rem;
    }

    .meloopets-checkout #ship-to-different-address label {
        font-size: 0.95rem;
    }

    .meloopets-checkout .shipping_address {
        padding-top: 1.25rem;
    }

    /* ========================================
       NOTAS ADICIONALES EN MÓVIL
       ======================================== */

    .meloopets-checkout .woocommerce-additional-fields {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
    }

    .meloopets-checkout #order_comments {
        min-height: 100px;
        font-size: 0.95rem;
    }

    /* ========================================
       ANIMACIONES DESACTIVADAS EN MÓVIL
       ======================================== */

    .meloopets-checkout .form-row {
        animation: none;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .meloopets-checkout {
        animation: fadeInUp 0.4s ease-out;
    }

}

/* ========================================
   MÓVIL PEQUEÑO (< 480px)
   ======================================== */

@media (max-width: 479px) {

    /* Wrapper aún más compacto */
    .meloopets-checkout {
        padding: 1rem 0.75rem;
    }

    .meloopets-checkout .ct-customer-details,
    .meloopets-checkout .ct-order-review {
        padding: 1rem;
        border-radius: 12px;
    }

    /* H3 más pequeño */
    .meloopets-checkout h3 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    /* Inputs aún más compactos */
    .meloopets-checkout input[type="text"],
    .meloopets-checkout input[type="email"],
    .meloopets-checkout input[type="tel"],
    .meloopets-checkout input[type="number"],
    .meloopets-checkout textarea,
    .meloopets-checkout select {
        padding: 0.875rem;
        font-size: 15px;
    }

    /* Tabla aún más pequeña */
    .meloopets-checkout .shop_table {
        font-size: 0.85rem;
    }

    .meloopets-checkout .shop_table .product-name {
        font-size: 0.9rem;
    }

    .meloopets-checkout .shop_table .product-total {
        font-size: 1rem;
    }

    /* Botón de pago ajustado */
    .meloopets-checkout #place_order {
        padding: 1.125rem 1.25rem;
        font-size: 1rem;
    }

    /* Payment methods stack completo */
    .meloopets-checkout .wc_payment_method label {
        font-size: 0.9rem;
    }

    .meloopets-checkout .wc_payment_method img {
        max-width: 80px;
    }

}

/* ========================================
   TABLET HORIZONTAL (768px - 1023px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    /* Grid de 2 columnas para algunos campos */
    .meloopets-checkout .woocommerce-billing-fields__field-wrapper,
    .meloopets-checkout .woocommerce-shipping-fields__field-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Campos específicos a ancho completo */
    .meloopets-checkout .form-row-wide,
    .meloopets-checkout #billing_email_field,
    .meloopets-checkout #shipping_email_field,
    .meloopets-checkout #billing_address_1_field,
    .meloopets-checkout #shipping_address_1_field,
    .meloopets-checkout #billing_address_2_field,
    .meloopets-checkout #shipping_address_2_field {
        grid-column: 1 / -1;
    }

    /* Order review con ancho óptimo */
    .meloopets-checkout .ct-order-review {
        max-width: 600px;
        margin: 0 auto;
    }

}

/* ========================================
   DESKTOP GRANDE (> 1440px)
   ======================================== */

@media (min-width: 1440px) {

    /* Wrapper más ancho */
    .meloopets-checkout .woocommerce-checkout {
        max-width: 1500px;
        margin: 0 auto;
        grid-template-columns: 1fr 520px;
        gap: 3rem;
    }

    /* Cards con más espacio */
    .meloopets-checkout .ct-customer-details,
    .meloopets-checkout .ct-order-review {
        padding: 2.5rem;
    }

    /* H3 más grande */
    .meloopets-checkout h3 {
        font-size: 1.65rem;
    }

    /* Tabla más espaciosa */
    .meloopets-checkout .shop_table th,
    .meloopets-checkout .shop_table td {
        padding: 1.25rem;
    }

    /* Botón más grande */
    .meloopets-checkout #place_order {
        padding: 1.25rem 3rem;
        font-size: 1.15rem;
    }

}

/* ========================================
   IMPRESIÓN
   ======================================== */

@media print {
    
    .meloopets-checkout {
        display: block;
        max-width: 100%;
    }

    .meloopets-checkout .ct-customer-details,
    .meloopets-checkout .ct-order-review {
        box-shadow: none;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }

    .meloopets-checkout #place_order,
    .meloopets-checkout .wc_payment_methods,
    .meloopets-checkout #ship-to-different-address {
        display: none;
    }

    .meloopets-checkout h3 {
        color: #000;
        border-bottom: 2px solid #000;
    }

}

/* ========================================
   LANDSCAPE EN MÓVIL
   ======================================== */

@media (max-width: 767px) and (orientation: landscape) {

    /* Sticky button menos intrusivo */
    .meloopets-checkout #place_order {
        position: relative;
        bottom: auto;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    /* Order review no sticky */
    .meloopets-checkout .ct-order-review {
        position: static;
    }

}

/* ========================================
   ACCESIBILIDAD - REDUCIR MOVIMIENTO
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .meloopets-checkout .form-row {
        animation: none;
    }

    .meloopets-checkout {
        animation: none;
    }

}

/* ========================================
   DARK MODE (PREPARADO PARA FUTURO)
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* 
    Si en el futuro se implementa dark mode,
    aquí irían los overrides de colores
    */
}