/* =====================================================
   1. GENERALE
   ===================================================== */

/* --- Utility --- */
.nowrap{
    text-wrap:nowrap;
}

/* --- Header: sottomenu --- */
.elementor-nav-menu--main .sub-menu a{
    border:0 !important;
    padding-left:20px !important;
    padding-right:20px !important;
}


/* =====================================================
   2. HOME
   ===================================================== */

/* --- Card categorie --- */
.category-card img{
    transition:all .3s ease-in-out;
}
.category-card .category-card-content h2{
    transition:color .3s;
}
.category-card:hover img{
    margin:-90px 0 0 0;
}
.category-card:hover .category-card-content h2{
    color:#C81E25 !important;
}
.category-card:hover .category-card-content .cnt-conta .elementor-heading-title{
    color:#5A5D63 !important;
}

/* --- Prezzo "a partire da" (shortcode mtbrent_prezzo_da) --- */
.mtb-prezzo-da strong{
    color:#fff;
    font-size:40px;
    font-family:"Barlow Condensed", sans-serif;
}
.single-loop-pr .mtb-prezzo-da{
    color:#F4F2EE;
}

.elementor img.hero-taglio,
.elementor .hero-taglio{
    clip-path:polygon(14% 0, 100% 0, 100% 100%, 0 100%) !important;
}

.aureli-counter .elementor-counter-number-suffix{
    padding-left:8px;
}

/* =====================================================
   3. CHI SIAMO
   ===================================================== */

/* --- Timeline --- */
.aureli-timeline{
    border-left:2px solid #0E0F11;
    padding-left:32px !important;
}
.aureli-timeline .tl-item{
    position:relative;
}
.aureli-timeline .tl-item::before{
    content:"";
    position:absolute;
    left:-41px;          /* 32 padding + 1 metà bordo + 8 metà quadrato */
    top:6px;
    width:16px;
    height:16px;
    background:#C81E25;
}


/* =====================================================
   4. VEICOLI (usato / scheda singola / loop)
   ===================================================== */

/* --- Dati veicolo nelle card --- */
.dati-veicolo span{
    color:#5A5D63;
    font-weight:400;
}
.day-month-pr{
    font-size:15px;
    color:#0E0F11;
    font-weight:400;
}
.wcloop-details img{
    margin-bottom:0 !important;
}

/* --- Galleria scheda singola --- */
.woocommerce div.product div.images .flex-active-slide img{
    height:400px;
    object-fit:cover;
    object-position:center;
}
.sgallery-veicle .swiper-slide-thumb-active{
    border:4px solid #C81E25;
}

/* --- Tabella dati (#listing-container) --- */
#listing-container .row{
    display:flex;
    flex-wrap:wrap;
    margin-right:-15px;
    margin-left:-15px;
    font-size:15px;
}
#listing-container .col-6{
    flex:0 0 auto;
    width:50%;
    padding:0 15px;
}
#listing-container .col-6 > div{
    padding:10px 0;
}
#listing-container .d-flex{
    display:flex !important;
}
#listing-container .justify-content-between{
    justify-content:space-between !important;
}
#listing-container .border-bottom{
    border-bottom:1px solid #CACACA !important;
}


/* =====================================================
   5. FORM (contatti + officina)
   ===================================================== */

/* --- Gruppi a scelta: titolo sopra, opzioni sotto --- */
.aureli-form .elementor-field-type-radio > .elementor-field-label,
.aureli-form .elementor-field-type-checkbox > .elementor-field-label{
    flex:0 0 100% !important;
    width:100% !important;
    margin:0 0 10px !important;
    font-size:12px !important;
    font-weight:700 !important;
    letter-spacing:1.5px !important;
    text-transform:uppercase !important;
    color:#5A5D63 !important;
}
.aureli-form .elementor-field-type-radio > .elementor-field-subgroup,
.aureli-form .elementor-field-type-checkbox > .elementor-field-subgroup{
    display:flex !important;
    flex:1 1 100% !important;
    flex-wrap:wrap;
    gap:15px;
    width:100% !important;
}

/* --- Radio e checkbox come pulsanti --- */
.aureli-form .elementor-field-type-radio .elementor-field-option,
.aureli-form .elementor-field-type-checkbox .elementor-field-option{
    position:relative;
    display:flex !important;
    margin:0 !important;
    padding:0 !important;
}
.aureli-form .elementor-field-type-radio .elementor-field-option input,
.aureli-form .elementor-field-type-checkbox .elementor-field-option input{
    position:absolute;
    width:1px;
    height:1px;
    margin:0;
    opacity:0;
}
.aureli-form .elementor-field-type-radio .elementor-field-option label,
.aureli-form .elementor-field-type-checkbox .elementor-field-option label{
    display:inline-flex !important;
    align-items:center;
    min-height:44px;
    padding:0 16px !important;
    margin:0 !important;
    border:2px solid #CFCBC2;
    background:#fff;
    color:#0E0F11 !important;
    font-weight:600;
    line-height:1.2;
    cursor:pointer;
}

/* Selezionato: radio nero, checkbox rosso */
.aureli-form .elementor-field-type-radio input:checked + label{
    background:#0E0F11;
    border-color:#0E0F11;
    color:#fff !important;
}
.aureli-form .elementor-field-type-checkbox input:checked + label{
    background:#C81E25;
    border-color:#C81E25;
    color:#fff !important;
}

/* Focus da tastiera */
.aureli-form .elementor-field-option input:focus-visible + label{
    outline:2px solid #C81E25;
    outline-offset:2px;
}

/* --- Sede: due blocchi al 50% con indirizzo --- */
.aureli-form .elementor-field-group-sede .elementor-field-option{
    flex:1 1 calc(50% - 7.5px) !important;  /* 7.5 = metà del gap */
    max-width:calc(50% - 7.5px) !important;
}
.aureli-form .elementor-field-group-sede .elementor-field-option label{
    width:100%;
    min-height:64px;
    padding:10px 16px !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center;
    gap:2px;
    font-size:16px;
    font-weight:700;
}
.aureli-form .elementor-field-group-sede label::after{
    font-size:13px;
    font-weight:400;
    opacity:.8;
}
.aureli-form label[for="form-field-sede-0"]::after{ content:"C.ne Gianicolense, 263"; }
.aureli-form label[for="form-field-sede-1"]::after{ content:"Via Trionfale, 7146/7154"; }

/* --- Caselle privacy e marketing --- */
.aureli-form .elementor-field-type-acceptance .elementor-field-option{
    display:flex;
    gap:10px;
    align-items:flex-start;
}
.aureli-form .elementor-field-type-acceptance input[type="checkbox"]{
    flex:0 0 auto;
    width:20px;
    height:20px;
    margin:2px 0 0;
    accent-color:#C81E25;
}
.aureli-form .elementor-field-type-acceptance label{
    padding:0;
    border:0;
    font-size:14px;
    line-height:1.5;
}

/* --- Solo form officina --- */
.form-officina .elementor-field-type-checkbox > .elementor-field-subgroup{
    gap:8px;
}
.form-officina .elementor-field-type-checkbox .elementor-field-option label{
    font-size:14px;
}
.form-officina .elementor-field-type-html{   /* campo HTML usato come "a capo" */
    height:0;
    margin:0 !important;
    padding:0 !important;
}


/* =====================================================
   6. RESPONSIVE
   ===================================================== */

/* --- Tablet (≤1024px) --- */
/* (nessuna regola per ora) */

/* --- Mobile (≤767px) --- */
@media (max-width:767px){

    /* Form: sedi una sotto l'altra */
    .aureli-form .elementor-field-group-sede .elementor-field-option{
        flex-basis:100% !important;
        max-width:100% !important;
    }

}