/*
 Theme Name:   VIVA EVENTS Theme
 Description:  Tema Child per il mio negozio online
 Author:       Altrama Italia
 Template:     storefront
 Version:      1.0.0
*/


@import url('assets/css/header.css');
@import url('assets/css/events-cards.css');
@import url('assets/css/button.css');
@import url('assets/css/howtodo.css');
@import url('assets/css/datepicker.css');

@supports (color:color-mix(in lab,red,red)) {
    * {
        outline-color: 
color-mix(in oklab, var(--ring) 50%, transparent);
    }
}
h1,
.h1 {
    font-size:40px;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
li,
input,select,label {
    font-family: "Montserrat",sans-serif;
}
h1,.h1{
    font-size:32px;
    font-weight: 700;
    line-height: 1.5;
    color:#2c2c2c;
}
h3,.h3{
    color:#2c2c2c!important;
    font-weight: 700!important;
    font-size:1.125rem!important;
}
body{
    background-color:rgba(245, 245, 245);
}
nav {
    background-color: white ;
}
footer {
    background-color: white;
}
p,li,span {
    color: #666;
}

.woocommerce-Price-amount, 
.woocommerce-Price-amount bdi, 
.woocommerce-Price-currencySymbol {
    color: #ff0000 !important;
    font-weight:700;
}

.background-red {
    background-color: #f00;
}
.card-img-container img {
    width: -webkit-fill-available;
    object-fit: cover;
    border-top-left-radius: 1%;
    border-top-right-radius: 1%;
}
.card-title {
    -webkit-font-smoothing: antialiased;
    color: #1a1a1a;
    line-height: 1.1;
    height: 24px;
}

.image1 {
    margin-top: 32px;
    width: 600px!important;
    height:300px!important;
    max-height: 300px!important;
    object-fit: cover;
}
.image2 {
    margin-top: 32px;
    width: 100px!important;
    height:100px!important;
    max-height: 100px!important;
    object-fit: cover;
}
.color-price {
    color: #CD1719;
}
.height-number {
    font-size: 2rem;
}


    /**/ 
    
.main-display-container img {
    max-width: 600px; 
    max-height: 400px;
    object-fit: cover;
    margin-left: 0 auto;
}

.gallery-main-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    margin-bottom: 15px;
}

.gallery-thumbnails {
    display: flex;
    gap: 10px; 
    justify-content: flex-start;
}

.gallery-thumbnails .thumb-item img {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover; 
    border-radius: 4px;
    transition: opacity 0.3s;
}

.gallery-thumbnails .thumb-item img:hover {
    opacity: 0.7;
}

.gallery-thumbnails ul, .gallery-thumbnails li::before {
    display: none !important;
    list-style: none !important;
}
.custom-woo-gallery-wrapper { max-width: 100%; margin: auto; }

.main-display-container img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    cursor: zoom-in;
}

.thumb-carousel-container {
    display: flex;
    overflow-x: auto; /* Carousel base via CSS */
    gap: 10px;
    padding: 10px 0;
    scrollbar-width: thin;
}

.thumb-img {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: 0.3s;
}

.thumb-img:hover { border-color: #ff6600; }

.fancybox__caption, .fancybox__counter { display: none !important; }
.card-img-container img{
    width: 100%;
    height: 250px;
    object-fit: cover;

}
    ol.arrow li {
    position:relative;
}
@media (min-width:640px){
    ol.arrow li:not(:first-child)::before {
        content: "\2192"; /* Codice per → */
        color: rgb(205, 23, 25);
        position: absolute;
        left: -3rem;
        font-weight: bold; /* Opzionale, per renderla più visibile come in foto */
        top: 0;
    }
}
.text-back {
    color: #7E7E7E;
}   
a.goback {
    text-decoration: none !important;
} 
.w-100 > .cutom-button{
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
}
a.custom-button {
    text-decoration: none !important;
}
        
.one-row {
            text-wrap-mode: nowrap;
            margin-right: 20px;
            align-content: space-evenly;
        }
        .back-white {
            background-color:white;
        }   
        .border-radius {
            border-radius:20px;
            border:solid 1px #8a8a8a;
        }
        /* --- CSS: STILE E POSIZIONAMENTO --- */
        .datepicker-wrapper { position: relative; width: 320px; margin: 0 auto; }
        
        label { display: block; margin-bottom: 8px; font-weight: bold; color: #333; }

        #date-range-display {
            width: 100%;
            padding: 12px;
            cursor: pointer;
            border: 2px solid #ddd;
            border-radius: 6px;
            background: white;
            box-sizing: border-box;
            transition: border-color 0.3s;
        }

        #date-range-display:focus { border-color: #007bff; outline: none; }

        /* Contenitore Calendario */
        .calendar-container {
            position: absolute;
            top: 105%;
            left: 0;
            z-index: 1000;
            background: white;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            padding: 15px;
            border-radius: 8px;
            width: 300px;
            display: none; /* Nascosto di default */
            user-select: none;
        }

        .calendar-container.active { display: block; }

        /* Header Mese */
        .calendar-header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom: 15px; 
        }
        
        .calendar-header button {
            background: #eee; border: none; padding: 5px 10px;
            border-radius: 4px; cursor: pointer; font-weight: bold;
        }
        .calendar-header button:hover { background: #ddd; }

        /* Griglia Giorni */
        .weekdays { 
            display: grid; 
            grid-template-columns: repeat(7, 1fr); 
            text-align: center; 
            font-weight: bold; 
            font-size: 12px; 
            color: #888;
            margin-bottom: 5px;
        }

        .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

        .day {
            padding: 10px 0;
            text-align: center;
            cursor: pointer;
            font-size: 14px;
            border-radius: 4px;
            transition: 0.2s;
        }

        .day:hover:not(.empty) { background: #f0f0f0; }
        
        .day.empty { cursor: default; }

        /* Stati di selezione */
        .day.selected { background: #007bff !important; color: white; font-weight: bold; }
        .day.in-range { background: #e7f1ff; border-radius: 0; }
        .day.today { color: #007bff; text-decoration: underline; font-weight: bold; }

        /* Bottone Conferma */
        .btn-confirm {
            width: 100%;
            margin-top:0px;
            padding: 10px;
            background: #CD1719;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .day.disabled {
            color: #ccc;
            cursor: not-allowed;
            background: #f9f9f9;
        }
        .day.disabled:hover {
            background: #f9f9f9; /* Rimuove l'effetto hover */
        }

        .quantity-selector {
            display: flex;
            align-items: center;
            border: 1px solid #ddd;
            border-radius: 6px;
            width: fit-content;
            overflow: hidden; /* Mantiene i bordi arrotondati */
        }

        .qty-btn {
            background-color: #f8f9fa;
            border: none;
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
            cursor: pointer;
            transition: background 0.2s;
        }

        .qty-btn:hover {
            background-color: #e2e6ea;
        }

        .qty-btn:active {
            background-color: #dae0e5;
        }

        #qty-input {
            width: 50px;
            height: 40px;
            text-align: center;
            border: none;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            font-size: 1rem;
            font-weight: bold;
            outline: none;
            background: white;
        }
          .border-radius select{
            width: 100%;
            padding: 12px 20px;
            font-size: 16px;
            font-family: 'inherit', sans-serif; /* Prende il font del tuo sito */
            color: #777; /* Grigio chiaro come nello screen */
            
            /* Bordo e Arrotondamento */
            /*border: 1.5px solid #a10000;*/ /* Rosso scuro/granata */
            border:1.5px solid #090900;
            border-radius: 15px; 
            
            /* Reset dello stile di sistema */
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            
            /* Icona della freccia personalizzata */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 20px center;
            background-size: 14px;
            background-color: #fff;
            
            cursor: pointer;
            transition: border-color 0.3s ease;
        } 
        .range-badge {
        background: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 20px;
        padding: 5px 15px;
        cursor: pointer;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: 0.2s;
    }
    .range-badge:hover {
        background: #ffeaea;
        border-color: #CD1719;
        color: #CD1719;
    }
    .day.in-range-saved {
        background: #d4edda !important; /* Verde chiaro per date già salvate */
        color: #155724;
    }
    #selected-ranges-container {
        margin-bottom: 15px;
    }