:root{
    --vdn-nav-offset: 5rem;
    --date-grid-per-page: 5;
    --slot-grid-per-page: 4;
    --date-grid-gap: 16px;
}

#vdn-loader{
    position:fixed;
    inset:0;

    display:none;

    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.75);

    z-index:99999;
}

#vdn-loader.active{
    display:flex;
}

.vdn-spinner{
    width:64px;
    height:64px;

    border:6px solid #dfe3ea;
    border-top-color: var(--vdn-primary-color);

    border-radius:50%;

    animation: vdn-spin .8s linear infinite;
}

@keyframes vdn-spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.vdn_medical_form_wrapper{
    width:100%;
    padding-top:4rem;
}

.vdn_medical_form_wrapper h2{
    font-weight: 600;
    font-size:1.5rem;
    text-align: center;
    border-bottom: solid 1px var(--primario);
    width:100%;
    padding-bottom: .5rem;
    margin-bottom: 1.5rem;
}

.vdn-ambulatori-list {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.vdn-ambulatorio-card {
    cursor: pointer;
    transition: all .2s;
    text-align: center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:stretch;
}

.vdn-ambulatorio-card input[type="radio"]{
    transform: scale(2);
    display: block;
    pointer-events: none;
}

.vdn-ambulatorio-card h3{
    font-size:1.1rem;
    line-height:1.1;
    margin-top: 1.5rem;
    margin-bottom: .5rem;
}

.vdn-ambulatorio-card p{
    line-height:1.1;
}

.vdn-ambulatorio-card:hover {
    
}

.vdn-ambulatorio-card.vdn-selected {

}

.vdn-form-step{
    text-align: center;
}

.vdn_step_button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.vdn_step_button{
    margin-top:2rem;
    padding: 12px 20px;
    background: var(--primario);
    color: #fff;
    border: none;
    cursor: pointer;
}

.vdn_step_button.vdn-back-button{
    background: #333333;
}

.vdn-field-group{
    display:flex;
    align-items:flex-start;
    justify-content: center;
    gap:4rem;
    text-align: left;
}

.vdn-field{
    display:block;
    color: var(--primario);
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom:1rem;
    width:100%;
}

.vdn-field > label{
    font-weight:600;
    margin-bottom:.5rem;
    flex: 1 1 100%;
    color:var(--primario);
}

.vdn-field-group > .vdn-field > label{
    text-align: left;
}

.vdn-privacy-field{
    display:flex;
    align-items:baseline;
    justify-content: flex-start;
    gap:1.5rem;
}

.vdn-privacy-field input[type="checkbox"]{
    transform: scale(2);
    transform-origin: left center;
}

.vdn-privacy-field label a{
    text-decoration: underline;
}

.vdn-radio-group{
    /* display:flex;
    justify-content:center; */
    display: grid;
    grid-template-columns: 1fr;
}

.vdn-radio-group input[type="radio"]{
    transform: scale(2);
    margin-right: .5rem;
}

.vdn-radio-group label{
    color: var(--primario);
    font-weight:400;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap:.5rem;
    font-weight: 700;
    text-align: left;
    line-height: 1;
    padding-top: 1rem;
}

.vdn-field > input[type="text"], .vdn-field > input[type="email"], .vdn-field > input[type="tel"], .vdn-field > input[type="number"], .vdn-field > input[type="date"], .vdn-field > select, .vdn-field > textarea{
    text-align: left;
}

.vdn-radio-group label span{
    font-weight: 400;
    display: block;
    text-align: left;
}

.vdn-msg-box{
    font-size: 1.5rem;
}

.vdn-field > .choices{
    margin-bottom:0;
}



.choices.is-hidden, label:has(+ .choices.is-hidden), .choices.is-hidden + small {
    visibility: hidden;
    pointer-events: none;
}
.choices.is-disabled, label:has(+ .choices.is-disabled), .choices.is-disabled + small {
    opacity: .3;
    pointer-events: none;
    cursor: not-allowed;
}

.choices__item--choice.choices__item--disabled::after {
    content: " ✖";
    color: #D00;
    font-weight: 700;
}

small.warning{
    color:#D00;
    font-weight: 700;
    display:block;
    line-height:1.1;
}


.vdn-choices-inner{
    text-align: left;
    color: var(--primario);
    position: relative;
}

/* Freccina custom */
.vdn-choices-inner::after {
    content: "▼";
    position: absolute;
    right: 12px;
    bottom: 0;
    transform: translateY(-50%);
    font-size: 12px;
    color: #666;
    pointer-events: none;
}



.vdn-choices-input{
    width:100%!important;
    color: var(--primario);
    /* text-align: left; */
}

.vdn-choices-list{
    text-align: left;
    display:block;
    padding-bottom:.5rem;
    max-height: 220px; /* circa 6–7 righe */
    overflow-y: auto;
}

.vdn-choices-item{
    color: var(--primario);
    padding-left:1rem;
    padding-right:1rem;
}

 .choices__list--dropdown .choices__item--selectable:after { display: none !important; }
 
 @supports (-webkit-touch-callout: none) {
    input[type="date"]::-webkit-calendar-picker-indicator {
        opacity: 0;
        pointer-events: none;
    }
}


.choices .vdn-choices-list .vdn-invalid-sport, .choices .vdn-choices-list .vdn-invalid-sport.is-highlighted{
    background-color: #D00;
}

.vdn-date-selection, .vdn-slot-selection{
    position: relative;
    width:calc(100% - (var(--vdn-nav-offset) * 2));
    margin-left: auto;
    margin-right: auto;
}

#vdn-first-available-slot{
    text-transform: capitalize;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}
#vdn-available-days{
    display:flex;
    gap:var(--date-grid-gap);
    overflow-x:auto;
    padding:.5rem 0;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width: none;
}

#vdn-available-days::-webkit-scrollbar{
    display:none;
}

.vdn-days-nav-btn{
    position:absolute;
    top:65%;
    width:calc( var(--vdn-nav-offset) - 1rem);
    height:calc( var(--vdn-nav-offset) - 1rem);
    border:none;
    border-radius:50%;
    background:#ffffff;
    color:var(--vdn-primary-color);
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translateY(-50%);
    transition:all .2s ease;
}

.vdn-days-nav-btn-prev{
    position:absolute;
    left:calc(var(--vdn-nav-offset) * -1);
    transform:translateY(-50%);
}

.vdn-days-nav-btn-next{
    position:absolute;
    right:calc(var(--vdn-nav-offset) * -1);
    transform:translateY(-50%);
}

.vdn-day-card{
    flex:0 0 calc((( 100% - ( var(--date-grid-per-page) - 1 ) * 1rem)) / var(--date-grid-per-page));
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.25rem;
    padding:1rem;
    border:2px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    transition:all .2s ease;
    color:var(--primario);
    scroll-snap-align:start;
}

.vdn-day-card:hover{
    border-color:var(--primario);
}

.vdn-day-card__weekday{
    font-size:.9rem;
    text-transform:capitalize;
}

.vdn-day-card__date{
    font-size:1.5rem;
    font-weight:700;
    line-height:1;
}

.vdn-day-card__year{
    font-size:.85rem;
    opacity:.7;
}

.vdn-day-card.selected{
    border-color:var(--primario);
    background:#f0f4fa;
}

.vdn-slot-selection{
    margin-top:2rem;
}

#vdn-available-slots{
    display:grid;
    grid-template-columns:repeat(var(--slot-grid-per-page),1fr);
    gap:var(--date-grid-gap);
}

.vdn-slot-button{
    padding:.75rem;
    border:2px solid #e5e7eb;
    border-radius:8px;
    background:#fff;
    cursor:pointer;
}

.vdn-slot-button:hover:not(:disabled){
    border-color:var(--primario);
}

.vdn-slot-button--disabled{
    opacity:.6;
    cursor:not-allowed;
}

.vdn-slot-button.selected{
    border-color:var(--primario);
    background:#f0f4fa;
}

.vdn_form_result{
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
}


@media screen and (max-width:767px) {

    :root{
        --vdn-nav-offset: 2rem;
        --date-grid-per-page: 2;
        --slot-grid-per-page: 3;
        --date-grid-gap: 16px;
    }

    .vdn-field-group{
        display:block;
        align-items:flex-start;
        justify-content: center;
        gap:4rem;
        text-align: left;
    }

    .choices.is-hidden, label:has(+ .choices.is-hidden), .choices.is-hidden + small {
        visibility: hidden;
        pointer-events: none;
        display:none;
    }
}