/* Common Styles */
.rustic-text {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.hero-gradient {
    background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
}

.dark .header-title {
    color: #c72929; /* rojo más claro para modo oscuro */
}

.wood-texture {
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuC8HhNgjbF7W_vvUvyYhgPTwhQA6QtGbWSyqIROLqzLAymXNM9L08sHKYvZt5VqJfgNQAKHDGGGyNCW4g-bjT0aMl3pSBYpImyL1uNRWL63h4wzoERmpDxH1GlrFpOCxa3GsOeRnX6oPtuHze7b57WBu7pgE3mAmTNu5gFnz_vfwcTQuhFt9pravlwjgUj6HP30M4dcnDmnRvfXVfYgaQKLxuWPexVwGShFCDYiceHAq66G5L-rUVR503KDgx8RFfBEqrI2wd1HYGc);
}

.dark .wood-texture {
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuC07OIdIeV76MBhRzMYjg5xM-wvC4rrb6I7uLdE96kZuBqEUBfrSEkScoEi-S9mKWG573eZVQGXV8rwccM4Jpv6Y9tJbmwJjcn17BeXIuiLaQM3RTBGX4PG4wGcbdhhAEdhn4MEhbogjVq6kS3CkkmiHI8g2-NFQuJXa7qH0zAjtdH0rsKRi7T8ktnG927hBJu5ECMgQv4HU8UhwS0_mBpdBBaEtbYs4PASTCRLC-ERqKGe1-1E5p_HshHUGbwxZ-dd7MNsNgARn_I);
}

/* Especiales Don Salto: contraste fuerte sobre textura */
.especiales-don-salto-panel {
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(229, 168, 66, 0.45);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}

.especiales-don-salto-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        145deg,
        rgba(80, 20, 22, 0.92) 0%,
        rgba(120, 35, 38, 0.88) 35%,
        rgba(40, 28, 22, 0.93) 100%
    );
    pointer-events: none;
    z-index: 0;
}

.especiales-don-salto-panel > * {
    position: relative;
    z-index: 1;
}

/* Menú: los 3 <details> — misma cabecera plegada (regla interna, sin border del summary pegado al borde del box) */
.menu-pizza-details-bloc {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
.menu-pizza-details-bloc.menu-pizza-acc--clasicas {
    padding: 1.25rem 1.25rem 0.5rem;
}
@media (min-width: 640px) {
    .menu-pizza-details-bloc.menu-pizza-acc--clasicas {
        padding: 1.5rem 1.5rem 0.65rem;
    }
}
.especiales-don-salto-panel.menu-pizza-details-bloc {
    padding: 1.25rem 1.25rem 0.5rem;
}
@media (min-width: 640px) {
    .especiales-don-salto-panel.menu-pizza-details-bloc {
        padding: 1.75rem 1.5rem 0.65rem;
    }
}
@media (min-width: 768px) {
    .especiales-don-salto-panel.menu-pizza-details-bloc {
        padding: 2.25rem 3rem 0.75rem;
    }
}

.menu-pizza-acc > summary.menu-pizza-acc__summary {
    list-style: none;
    display: block;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.menu-pizza-acc > summary.menu-pizza-acc__summary::-webkit-details-marker {
    display: none;
}
.menu-pizza-acc > summary.menu-pizza-acc__summary > .menu-pizza-acc__summary-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-width: 0;
    width: 100%;
    min-height: 4.75rem;
}
/* Regla bajo el título: separa del contenido sin chocar con el borde redondeado del <details> */
.menu-pizza-acc__summary-rule {
    display: block;
    height: 1px;
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 0.65rem;
    border: 0;
    padding: 0;
}
.menu-pizza-acc--clasicas .menu-pizza-acc__summary-rule {
    background-color: rgb(148 163 184 / 0.55);
}
.dark .menu-pizza-acc--clasicas .menu-pizza-acc__summary-rule {
    background-color: rgb(71 85 105 / 0.65);
}
.especiales-don-salto-panel .menu-pizza-acc__summary-rule {
    background-color: rgba(255, 255, 255, 0.22);
}

/* Mobile: bloques a ancho de viewport (full bleed respecto al main) */
@media (max-width: 639px) {
    .menu-pizza-details-bleed {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
    }
    .menu-pizza-details-bloc.menu-pizza-acc--clasicas {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
    .especiales-don-salto-panel.menu-pizza-details-bloc {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}
@media (min-width: 640px) {
    .menu-pizza-details-bloc.menu-pizza-acc--clasicas {
        border-radius: 1rem;
    }
    .especiales-don-salto-panel.menu-pizza-details-bloc {
        border-radius: 1.5rem;
    }
}

/* Grilla secciones categorizadas (ej. media pizza): usa todo el ancho disponible */
.menu-pizza-categorized-grid {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 1.75rem;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
    .menu-pizza-categorized-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
        gap: 2rem;
    }
}

/* Media pizza / catálogo categorizado: línea bajo el título del acordeón un poco más visible (modo claro). */
.menu-pizza-acc--clasicas.menu-pizza-acc--categorized .menu-pizza-acc__summary-rule {
    background-color: rgb(100 116 139 / 0.55);
}
.dark .menu-pizza-acc--clasicas.menu-pizza-acc--categorized .menu-pizza-acc__summary-rule {
    background-color: rgb(71 85 105 / 0.65);
}

.menu-pizza-acc .menu-pizza-acc__chevron {
    transition: transform 0.25s ease;
}
.menu-pizza-acc[open] .menu-pizza-acc__chevron {
    transform: rotate(180deg);
}
.menu-pizza-acc__summary:focus {
    outline: none;
}
.menu-pizza-acc__summary:focus-visible {
    outline: 2px solid #c72929;
    outline-offset: 3px;
    border-radius: 0.75rem;
}
.dark .menu-pizza-acc__summary:focus-visible {
    outline-color: #e5a842;
}

/* Especiales: <details> es el mismo panel con textura (cabecera + listado) */
.especiales-don-salto-panel.menu-pizza-acc--especiales-panel > summary.menu-pizza-acc__summary:focus-visible {
    outline-color: #e5a842;
}

/* Contenido dentro del panel Especiales: evita desbordes y solapamientos con la textura */
.especiales-don-salto-panel.menu-pizza-acc--especiales-panel .menu-pizza-acc__body {
    min-width: 0;
    overflow-x: hidden;
}

/* Bloques <details> del menú más juntos en mobile */
.menu-pizza-details-stack {
    margin-bottom: 2.5rem;
}
@media (min-width: 640px) {
    .menu-pizza-details-stack {
        margin-bottom: 3rem;
    }
}
@media (min-width: 1024px) {
    .menu-pizza-details-stack {
        margin-bottom: 4rem;
    }
}

.menu-pizza-custom-stack {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
@media (min-width: 640px) {
    .menu-pizza-custom-stack {
        gap: 3rem;
    }
}
@media (min-width: 1024px) {
    .menu-pizza-custom-stack {
        gap: 4rem;
    }
}

/* Cart Styles */
.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #a12529;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.cart-item {
    transition: all 0.3s ease;
}

.cart-item:hover {
    background-color: rgba(0,0,0,0.02);
}

/* Modal Styles */
.modal-overlay {
    backdrop-filter: blur(4px);
}

.modal-content {
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Prevent horizontal overflow on mobile */
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Checkout modal mobile fixes */
#checkout-modal {
    overflow-x: hidden;
}

#checkout-modal .modal-content {
    width: 100%;
    max-width: min(42rem, calc(100vw - 2rem));
    color-scheme: light;
}

/* Contorno extra en claro: el panel se distingue mejor del fondo atenuado */
html:not(.dark) #checkout-modal .modal-content {
    box-shadow:
        0 25px 50px -12px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(100, 116, 139, 0.35);
}

html.dark #checkout-modal .modal-content {
    color-scheme: dark;
}

/* Retiro / transferencia: contraste claro u oscuro sin depender de utilidades faltantes en el CSS */
.checkout-info-callout {
    background-color: #fdf8f1;
    border: 2px solid rgba(229, 168, 66, 0.55);
    box-shadow:
        0 1px 2px rgba(26, 22, 20, 0.07),
        inset 0 0 0 1px rgba(161, 37, 41, 0.07);
}

html.dark .checkout-info-callout {
    background-color: #27272a;
    border-color: rgba(161, 161, 170, 0.7);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(229, 168, 66, 0.18);
}

/* Animations */
@keyframes fabPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(161, 37, 41, 0.55); }
    50%       { box-shadow: 0 0 0 12px rgba(161, 37, 41, 0); }
}

#menu-fab-checkout:not(.hidden) {
    animation: fabPulse 1.8s ease-in-out infinite;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Carousel Styles */
.carousel-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0.75rem 2.75rem;
    margin: 0 -0.25rem;
}

@media (min-width: 640px) {
    .carousel-wrapper {
        padding: 1rem 3rem;
        margin: 0 -0.5rem;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .carousel-wrapper {
        padding: 0.75rem 2.65rem;
        margin: 0 -0.25rem;
    }
}

@media (min-width: 1280px) {
    .carousel-wrapper {
        padding: 1rem 0;
        margin: 0;
    }
}

.carousel-track {
    display: flex;
    will-change: transform;
    padding: 0.5rem 0;
}

.carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
}

@media (min-width: 768px) and (max-width: 1279px) {
    .carousel-slide {
        flex: 0 0 50%;
    }
}

@media (min-width: 1280px) {
    .carousel-slide {
        flex: 0 0 33.333%;
    }
}

/* Ensure all carousel cards have the same height */
.carousel-slide > div {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.carousel-prev,
.carousel-next {
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-dot {
    transition: all 0.3s ease;
    cursor: pointer;
    width: 8px;
    height: 8px;
}

.carousel-dot:hover {
    transform: scale(1.2);
}

/* Badge horario abierto/cerrado (colores en CSS porque Tailwind no escanea clases solo en JS) */
.donsalto-open-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    border: 2px solid transparent;
    line-height: 1;
}

.donsalto-open-badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    font-size: 1.125rem !important;
    line-height: 1 !important;
    /* Material Icons a veces desalinean el glifo respecto al box */
    font-feature-settings: "liga";
    overflow: hidden;
}

.donsalto-open-badge--open {
    background-color: #10b981;
    border-color: #6ee7b7;
    color: #ffffff;
    animation: badgePulse 1.8s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    50%       { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
}

.donsalto-open-badge--open .donsalto-open-badge__icon {
    color: #ffffff;
}

.donsalto-open-badge--closed {
    background-color: #f59e0b;
    border-color: #fcd34d;
    color: #422006;
}

.donsalto-open-badge--closed .donsalto-open-badge__icon {
    color: #422006;
}

/* Footer logo white filter */
.footer-logo-white {
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
    display: block;
    opacity: 1;
}

/* Scrollbar personalizada — Chromium (Chrome, Edge, Opera) */
:root {
    --scrollbar-track: #fdf8f1;
    --scrollbar-thumb: #a12529;
    --scrollbar-thumb-hover: #c72929;
}
html.dark {
    --scrollbar-track: #1a1614;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Firefox */
* {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
}