@import url("https://fonts.googleapis.com/css?family=Lato:300,400,500,600,800&display=swap");
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,800&display=swap");

body {
    background-color: #f8f9fa;
    font-family: Montserrat;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
}

/* Desktop layout: fixed height with footer padding */
@media (min-width: 992px) {
    body {
        overflow: hidden !important;
        height: 100vh !important;
        padding-bottom: 120px; /* Extra space for footer + navigation buttons */
    }
}

html {
    scroll-behavior: smooth;
    /* font-size: 16px; */
}

/* Desktop: Fixed layout for map-based pages */
@media (min-width: 992px) {
    html {
        height: 100%;
        position: fixed;
        width: 100%;
    }
}

/* width */
::-webkit-scrollbar {
    width: 0;
    height: 0.2rem;
}

/* Track */
::-webkit-scrollbar-track {
    background: #fff;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #fff;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

a {
    text-decoration: none;
}

section {
    flex: 1;
}

@media (min-width: 992px) {
    section {
        height: 100%;
        overflow: hidden;
    }
}

/* Free-area wrapper for main content (Desktop only - takes available height) */
.free-area {
    display: flex;
    flex-direction: column;
}

/* Mobile/Tablet Grid: center single element */
@media (max-width: 991px) {
    .free-area .row {
        justify-content: center !important;
    }

    /* When there's only one element, make it take appropriate width */
    .free-area .row .col-12:only-child,
    .free-area .row .col-sm-6:only-child {
        max-width: 500px !important; /* Limit width for single element */
    }
}

@media (min-width: 992px) {
    .free-area {
        /* Fill all remaining vertical space */
        flex: 1 1 auto !important;
        overflow: hidden !important;
        min-height: 0 !important; /* Important for flexbox overflow to work */
        height: 100% !important; /* Ensure it takes full available height */
    }

    .free-area .container-xxl {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: stretch !important; /* Allow children to grow */
        height: 100% !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Desktop swiper wrapper - fill height */
    .free-area .d-lg-block {
        height: 100% !important;       /* Take full container height */
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Swiper fills available space */
    .free-area .swiper {
        max-height: 100% !important;
        height: 100% !important;
        width: 100% !important;
        flex: 1 !important;            /* Grow to fill available space */
        overflow: hidden !important;   /* Prevent overflow */
    }

    .free-area .swiper-wrapper {
        align-items: center !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    /* Center only when there's a single slide */
    .free-area .swiper-wrapper:has(.swiper-slide:only-child) {
        justify-content: center !important;
    }

    .free-area .swiper-slide {
        height: 100% !important;       /* Take full swiper height */
        max-height: 100% !important;   /* Don't exceed swiper height */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;  /* Allow badges to overflow */
    }

    .free-area .swiper-slide .p-3 {
        height: 100% !important;       /* Fixed height equal to slide */
        max-height: 100% !important;   /* Cap to slide height */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: fit-content !important; /* Fit content width explicitly */
        max-width: 100% !important;    /* Don't exceed slide */
        padding: 1rem !important;
        box-sizing: border-box !important;
        overflow: visible !important;  /* Allow badges to overflow */
    }

    .free-area .swiper-slide .title {
        flex-shrink: 0 !important;     /* Title doesn't shrink */
        flex-grow: 0 !important;       /* Title doesn't grow */
        margin-bottom: 1rem !important;
        max-height: 20% !important;    /* Title max 20% of slide */
        overflow: hidden !important;
    }

    .free-area .swiper-slide .card {
        flex: 0 1 auto !important;     /* Fit content, don't grow */
        min-height: 0 !important;      /* Allow flexbox shrinking */
        height: 80% !important;        /* Explicit height - 80% of .p-3 */
        max-height: 80% !important;    /* Fallback cap */
        width: fit-content !important; /* Fit content width explicitly */
        max-width: 100% !important;    /* Don't exceed parent */
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;  /* Allow badges to overflow */
    }

    .free-area .swiper .swiper-slide .card > .card-img {
        flex: 1 1 auto !important;     /* Fill available card height */
        height: 100% !important;       /* Explicit height fills card */
        width: fit-content !important; /* Fit content width explicitly */
        max-width: 100% !important;    /* Don't exceed card */
        display: flex !important;      /* Flex to constrain children */
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;  /* Allow badges to overflow */
        position: relative !important;
    }

    .free-area .swiper .swiper-slide .card > .card-img > .flyer-img-wrapper > img.swiper-img-flyer {
        max-height: 100% !important;   /* Constrained by wrapper chain */
        height: auto !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        flex-shrink: 1 !important;
    }

    /* Override moved to end of file for specific class */

    /* Single slide: center and limit width */
    .free-area .swiper-slide:only-child {
        max-width: 400px !important; /* Reasonable width for single element */
    }
}

/* Extra large screens: specific overrides */
@media (min-width: 1400px) {
    .free-area .container-xxl {
        max-width: 100% !important;          /* Remove Bootstrap width limitation */
        padding-left: 1rem !important;       /* Keep some horizontal padding */
        padding-right: 1rem !important;
    }

    /* Single slide in XL: larger max-width */
    .free-area .swiper-slide:only-child {
        max-width: 600px !important; /* Larger width for XL screens */
    }
}

.no-promos {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #6c757d;
    border: 2px dashed #dee2e6;
    border-radius: 1rem;
    padding: 2.5rem;
    background: #f8f9fa;
}

.no-promos i {
    font-size: 3rem;
    color: #dc3545;
}

header {
    /* position: fixed; */
    z-index: 99;
    top: 0;
    width: 100%;
    background: #fff;
    -webkit-box-shadow: 0 0 12px 0 rgb(0 0 0 / 30%);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 30%);

    display: flex;
    align-items: center;
}

header,
header .cerca-pv {
    transition: all 1s;
}

footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 100; /* High z-index to cover badges and other content */
    background-color: #fff;
    padding: 1rem;
    text-align: center;
}

footer img {
    max-height: 2rem;
}

#punti_vendita {
    overflow-y: auto;
    height: 100%;
}

#loading {
    position: absolute;
    background-color: #fff;
    width: 100%;
    height: 100vh;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

header img {
    max-height: 5rem;
    width: auto;
    transform: translate3d(0, 0, 0);
}

.cerca-pv {
    box-shadow: 0 1px 3px 0px rgb(0 0 0 / 6%);
}

#map {
    /* border: 1px solid; */
    height: 100%;
    width: 100%;
    margin: 0;
    z-index: 990;
    outline: none;
}

.accordion-header > div > img {
    max-height: 4rem;
    width: auto;
}

.accordion-item > div {
    cursor: pointer;
}

.volantino {
    max-width: 8rem;
    height: auto;
}

.fs-7 {
    font-size: 0.8rem;
}

.infoWindow {
    max-width: 20rem;
}

.infoWindow img {
    max-width: 7vw;
    height: auto;
}

.form-control:focus,
.btn:focus-visible {
    box-shadow: none;
}

#punti_vendita,
.top_cerca {
    padding: 0.25rem 3rem;
}

:focus-visible {
    outline: none;
}

.slider {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    overflow: hidden;
    background-color: #000;
    color: #fff;
}

.slider.close {
    top: 100%;
    height: 0;
}

#CybotCookiebotDialogPoweredbyLink {
    width: 70% !important;
}

#CybotCookiebotDialogPoweredbyCybot {
    display: none !important;
}

.pac-item {
    padding: 0.4rem 0.8rem !important;
}

/* Ensure card-img is relative positioned to anchor badge */
.card-img {
    position: relative !important;
}

.title {
    font-weight: 600;
    text-align: center;
    min-height: 6rem;
}

.indirizzo {
    text-align: right;
}

.accordion .elenco {
    position: absolute;
    bottom: -1rem;
    left: 50%;
}

.size {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    background-color: red;
    color: #fff;
    font-weight: bold;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
}

/* Flyer image wrapper - always adapts to image size */
.card-img > .flyer-img-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
    height: auto;
    overflow: visible; /* Allow badges to overflow */
}

/* Desktop: wrapper maintains image-fit while respecting height constraints */
@media (min-width: 992px) {
    .free-area .swiper .swiper-slide .card > .card-img > .flyer-img-wrapper {
        display: inline-flex !important;  /* Wraps to image size */
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;         /* Explicit height from parent */
        max-height: 100% !important;     /* Don't exceed parent */
        max-width: 100% !important;      /* Don't exceed parent */
    }
}

/* Sfoglia badge positioning - JavaScript handles all positioning and sizing */
.card-img > .flyer-img-wrapper > img.sfoglia-badge {
    position: absolute;
    width: auto; /* Width will be set by JavaScript based on image size */
    height: auto;
    z-index: 10;
    pointer-events: none;
    /* top, left, and width will be set by JavaScript */
}

/* Modern swiper navigation at bottom center */
.swiper-navigation-bottom {
    position: fixed;
    bottom: 5rem; /* Position above the footer (footer is ~4rem high) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 1rem;
}

/* Only show on desktop */
@media (max-width: 991px) {
    .swiper-navigation-bottom {
        display: none;
    }
}

.swiper-button-prev-custom,
.swiper-button-next-custom {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.swiper-button-prev-custom:hover,
.swiper-button-next-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.swiper-button-prev-custom.swiper-button-disabled,
.swiper-button-next-custom.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.swiper-button-prev-custom i,
.swiper-button-next-custom i {
    font-size: 1rem;
}

@media (orientation: landscape) {
    .pac-container {
        border-radius: 1rem;
    }

    .pv-content {
        padding: 3rem 0;
    }

    header .logo {
        padding: 1rem 0;
    }

    .carousel-inner .carousel-item > div {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }

    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(33%);
    }

    .carousel-inner .carousel-item-start.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-33%);
    }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
    transform: translateX(0);
}

.carousel-control-prev {
    left: -15%;
}

.carousel-control-next {
    right: -15%;
}