/* ==========================================================
   PORTAL COSTALEGRE - CSS DEL WIDGET DE PEDIDOS Y RESERVAS
   ========================================================== */

/* Contenedor General del Widget */
.booking-widget-container {
    position: relative;
    margin: 25px auto;
    max-width: 360px;
    /* Tamaño perfecto y cómodo para pantallas de celulares */
    width: 100%;
    font-family: inherit;
    box-sizing: border-box;
}

/* 🔄 Botón Principal con transición de color (De Azul a Naranja) */
.booking-toggle-btn {
    background: linear-gradient(to right, #0199ff, #0145ff) !important;
    /* Tu azul eléctrico base */
    color: white !important;
    border: none;
    padding: 16px 20px;
    width: 100%;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(1, 153, 255, 0.3);
    /* Transición suave para el cambio de color y sombras */
    transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.2s ease, filter 0.2s ease;
}

/* 🌟 Estado Activo: Cuando el panel está abierto cambia a tus naranjas de acción */
.booking-widget-container.open .booking-toggle-btn {
    background: linear-gradient(to right, #ff4800, #ff9e00) !important;
    box-shadow: 0 4px 12px rgba(255, 72, 0, 0.35);
    /* Sombra naranja a juego */
}

.booking-toggle-btn:hover {
    filter: brightness(1.08);
}

.booking-toggle-btn:active {
    transform: scale(0.98);
}

/* Control de iconos nativos del botón */
.booking-toggle-btn .icon-close {
    display: none;
}

/* Estado de los iconos cuando el panel está abierto */
.booking-widget-container.open .icon-calendar {
    display: none;
}

.booking-widget-container.open .icon-close {
    display: block;
}

/* El Panel del Formulario Flotante/Desplegable */
.booking-panel {
    display: block;
    /* Obligatorio para que la animación funcione */
    max-height: 0;
    /* Empieza totalmente encogido */
    opacity: 0;
    /* Totalmente invisible */
    transform: scale(0.95) translateY(-10px);
    /* Ligeramente más chico y hacia arriba */
    overflow: hidden;
    /* Oculta los campos internos mientras se abre */
    background: #ffffff;
    border-radius: 12px;
    padding: 0 20px;
    /* Quitamos el padding vertical inicial para que no abulte */
    margin-top: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid transparent;
    box-sizing: border-box;
    /* Transición premium: controla altura, opacidad y movimiento por separado */
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease,
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.5s ease,
        margin 0.5s ease;
}

/* Activación del despliegue mediante la clase contenedora */
.booking-widget-container.open .booking-panel {
    max-height: 800px;
    /* Altura máxima suficiente para albergar todo el formulario */
    opacity: 1;
    /* Se vuelve totalmente visible */
    transform: scale(1) translateY(0);
    /* Recupera su tamaño original y posición ideal */
    padding: 22px 20px;
    /* Aplica el padding real cuando se abre */
    margin-top: 12px;
    border: 1px solid #eeeeee;
}

/* Bloques de campos del formulario */
.booking-field {
    margin-bottom: 16px;
    text-align: left;
    box-sizing: border-box;
}

.booking-field:last-of-type {
    margin-bottom: 0;
}

/* Etiquetas e Iconos de los campos */
.booking-field label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333333;
    margin-bottom: 6px;
}

.booking-field label i {
    color: #0199ff;
    /* Iconos en color azul decorativo */
    margin-right: 6px;
    width: 16px;
    text-align: center;
}

/* Estilos de inputs de texto y áreas de mensaje */
.booking-field input,
.booking-field textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 0.95rem;
    color: #444444;
    font-family: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.booking-field input:focus,
.booking-field textarea:focus {
    border-color: #0199ff;
    box-shadow: 0 0 0 3px rgba(1, 153, 255, 0.1);
    outline: none;
}

/* Ajustes exclusivos para la caja de texto libre del pedido */
.booking-field textarea {
    resize: none;
    line-height: 1.4;
}

/* Ajustes para los campos elásticos (Dirección y Referencia) */
.booking-field textarea.auto-expand {
    min-height: 44px;
    /* Altura idéntica a un input estándar */
    height: 44px;
    overflow-y: hidden;
    /* Oculta barras de scroll internas reactivas */
}

/* ==========================================================
   BOTONES INTERNOS DEL FORMULARIO (DIMENSIONES SIMÉTRICAS)
   ========================================================== */

/* 1. Botón "Ver Menú Completo" (Tus Naranjas de Acción) */
.booking-field .btn-ver-menu-interno {
    background: linear-gradient(to right, #ff4800, #ff9e00) !important;
    color: white !important;
    padding: 14px;
    /* Mismo padding vertical que WhatsApp */
    width: 100%;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(255, 72, 0, 0.25);
    transition: background-color 0.3s ease, transform 0.2s ease, filter 0.2s ease;
    box-sizing: border-box;
    text-decoration: none;
    /* Remueve línea inferior de enlace */
}

.booking-field .btn-ver-menu-interno:hover {
    filter: brightness(1.08);
}

.booking-field .btn-ver-menu-interno:active {
    transform: scale(0.98);
    /* Efecto táctil idéntico al de WhatsApp */
}

/* 2. Botón "Enviar a WhatsApp" (Verde Oficial de Marca) */
.btn-enviar-reserva {
    background-color: #25D366 !important;
    color: white !important;
    border: none;
    padding: 14px;
    width: 100%;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-sizing: border-box;
}

.btn-enviar-reserva:hover {
    background-color: #1ebd59 !important;
}

.btn-enviar-reserva:active {
    transform: scale(0.98);
}