/* ==========================================================================
   booking-desktop.css — Desktop overrides (min-width breakpoints)
   Extracted from booking.css for mobile-first organization.
   ========================================================================== */

@media (min-width: 768px) {
  div#nav-tab { border-radius: var(--radius-lg) }
  .dont-collapse-md { display: block !important; visibility: visible; height: auto !important }
  .booking-step__content { padding: 1rem 2rem }
  .btn-group-md-lg > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0 }
  div#tabs-mobile { padding: 20px 0 20px 0px; margin-bottom: 20px; border-bottom: 1px solid var(--color-border-light) }
}

/* Ajuste para pantallas un poco más grandes (tablets) */
@media (min-width: 768px) {
.allergens-grid {
grid-template-columns: repeat(6, 1fr);
}
}

@media (min-width: 576px) {
    .ht-notallowed-inline {
        align-items: flex-start;
        justify-content: flex-start;
        min-height: auto;
        padding-top: 32px;
    }
    .ht-notallowed-inline__body {
        margin: 0 auto;
    }
}

@media (min-width: 992px) {
    .background-header {
        top: 100px !important;
        right: 0 !important; /* Lo anclamos al borde derecho de la pantalla */
        /* 2. EL TRUCO DE CENTRADO CON DESPLAZAMIENTO */
        left: 290px !important; /* Salvamos el espacio de tu sidebar izquierdo */
        /* 1. LÍMITES DE TAMAÑO */
        /* Le damos el 100% del espacio, pero lo frenamos en 1140px */
        max-width: 1140px !important;
        margin: 0 auto !important; /* Magia: Lo centra matemáticamente en el hueco restante */
    }
    .tab-content {
    position: relative;
    margin-top: 220px;
}
.header-page-title {
        top:210px;
        right: 0 !important; /* Se ancla a la derecha */
        /* 1. EL TRUCO MAESTRO DE POSICIONAMIENTO */
        left: 290px !important; /* Salva el sidebar izquierdo */
        /* 2. LÍMITES Y CENTRADO DE TEXTO */
        max-width: 1140px !important; /* El mismo ancho que tu imagen de fondo */
        margin: 0 auto !important /* Se centra en el espacio sobrante */
    }
    div#step1-desc-regime {
    max-width: 500px;
    margin: 0 auto !important;
    text-align: center !important;
}
div#step1_next {
    position: relative;
    left: auto !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 500px;
    margin-top: 40px;
    text-align: center !important;
    background: none;
}
#booking_day_strip_container {
        width: 100% !important;
        max-width: 950px !important;
        padding-top: 20px;
        margin: 0 auto !important;
        margin-top: 6px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05) !important;
    }
    .ht-modal-header-visual {
    position: relative;
    max-width: 480px;
    margin: 20px auto;
    text-align: center;
    background: none !important;
}
div#timetable_container {
    right: 0 !important;
    left: 290px !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}
.ht-booking-step {
    right: 0 !important;
    left: 290px !important;
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 auto !important;
}
#item_image_container_step5,
#item_image_container_step7,
#item_image_container_step4{
    display:none !important;
}
#step5 .tab-content,
#step7 .tab-content,
#step4 .tab-content {
        position: relative;
        margin-top: 50px;
    }
body.sidemenu-open .fixed-footer {
        position: relative !important;
        left:auto !important;
        max-width: 500px;
        margin: 0 auto !important;
        background: none;
    }
    .allergens-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 10px !important;
    padding: 20px !important;
    margin-bottom:20px;
}
    .content-section-header {
        margin: 0px 0 10px 0 !important;
    }
    #step6{
  left: 0px !important;
}
div#header_locate_resourcetable {
        top: 20px;
        display: block;
        width: 100%;
        max-width: 570px;
        margin: 0 auto !important;
        margin-top: 20px;
        margin-left: 290px;
        border-radius: 0 0 20px 20px;
    }
}