/* General para Escritorio */
@media screen and (min-width: 1200px) {
    /* Ajustes de columnas para asegurar que los campos se adapten correctamente */
    .col-1,
    .col-2 {
        width: 100% !important; /* Usamos 100% de ancho para un diseño más limpio */
        padding: 15px; /* Añadir algo de relleno para que no se vean tan apretados */
    }

    .col2-set,
    .woocommerce-checkout-review-order {
        width: 48% !important;
    }

    .woocommerce-checkout {
        display: flex !important;
        justify-content: space-between !important;
        gap: 30px; /* Añadir espacio entre las columnas para no verlas tan pegadas */
    }

    #order_review_heading {
        display: none !important;
    }

    /* Estilización de los campos de entrada */
    .woocommerce input[type="text"],
    .woocommerce input[type="email"],
    .woocommerce input[type="tel"],
    .woocommerce select,
    .woocommerce textarea {
        background-color: #f7f7f7; /* Fondo gris suave para un estilo minimalista */
        border: 1px solid #ddd; /* Borde sutil */
        border-radius: 8px; /* Bordes redondeados para suavizar la apariencia */
        padding: 12px 20px; /* Un poco de espacio interno para mayor confort */
        width: 100%; /* Asegurar que los campos ocupen el 100% del ancho */
        font-size: 16px; /* Tamaño de fuente más grande para una mejor legibilidad */
        font-family: 'Arial', sans-serif; /* Tipografía simple y elegante */
        color: #333; /* Color de texto oscuro para contraste */
        transition: border 0.3s ease, box-shadow 0.3s ease; /* Efecto suave de transición */
    }

    /* Estilo para el campo cuando está en foco */
    .woocommerce input[type="text"]:focus,
    .woocommerce input[type="email"]:focus,
    .woocommerce input[type="tel"]:focus,
    .woocommerce select:focus,
    .woocommerce textarea:focus {
        border-color: #FE615F; /* Color más vibrante para destacar el campo en foco */
        box-shadow: 0 0 5px rgba(254, 97, 95, 0.5); /* Añadir un sutil resplandor */
    }

    /* Estilos para los botones del formulario */
    .woocommerce button[type="submit"] {
        background-color: #FE615F; /* Color llamativo para el botón */
        color: #fff; /* Texto blanco */
        border: none; /* Sin bordes */
        padding: 15px 30px; /* Botón más grande para fácil acceso */
        border-radius: 25px; /* Bordes redondeados */
        font-size: 18px; /* Tamaño de fuente más grande */
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .woocommerce button[type="submit"]:hover {
        background-color: #DD9933; /* Color más oscuro cuando el botón está en hover */
    }

    /* Ajustes para los labels de los campos */
    .woocommerce .form-row label {
        font-size: 14px;
        color: #333;
        font-weight: normal;
        margin-bottom: 5px;
        display: inline-block;
    }

    /* Estilos para los mensajes de error */
    .woocommerce-error {
        background-color: #FCE8E8;
        border: 1px solid #F7B1B1;
        color: #D8000C;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    /* Estilización del campo desplegable (select) */
    .woocommerce select {
        background-color: #f7f7f7; /* Fondo gris claro para que combine con los otros campos */
        border: 1px solid #ddd; /* Borde sutil */
        border-radius: 8px; /* Bordes redondeados para suavizar la apariencia */
        padding: 12px 20px; /* Espacio interno para comodidad */
        width: 100%; /* Asegurarse de que ocupe el 100% del ancho disponible */
        font-size: 16px; /* Tamaño de fuente consistente */
        font-family: 'Arial', sans-serif; /* Tipografía simple y elegante */
        color: #333; /* Color de texto oscuro */
        transition: border 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
    }

    /* Estilo cuando el select está en foco */
    .woocommerce select:focus {
        border-color: #FE615F; /* Cambio de color de borde cuando está en foco */
        box-shadow: 0 0 5px rgba(254, 97, 95, 0.5); /* Resplandor sutil */
    }

    /* Estilo para las opciones dentro del select */
    .woocommerce select option {
        background-color: #fff; /* Fondo blanco para las opciones */
        color: #333; /* Color de texto oscuro */
    }

    /* Opcional: Estilo para el icono desplegable (flecha) */
    .woocommerce select {
        -webkit-appearance: none; /* Eliminar el estilo predeterminado de la flecha en Safari */
        -moz-appearance: none; /* Eliminar la flecha en Firefox */
        appearance: none; /* Eliminar la flecha en otros navegadores */
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 5"%3E%3Cpolygon points="0,0 10,0 5,5" fill="%23333" /%3E%3C/svg%3E'); /* Flecha personalizada */
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 10px;
    }

}

/* General para móviles */
@media screen and (max-width: 1199px) {
    .woocommerce-checkout {
        flex-direction: column !important; /* Cambiar la dirección de las columnas a fila en móviles */
    }

    .col-1,
    .col-2 {
        width: 100% !important;
        padding: 10px;
    }

    /* Asegurarse de que los botones no sean demasiado grandes en pantallas más pequeñas */
    .woocommerce button[type="submit"] {
        padding: 14px;
        font-size: 16px;
    }
}