/* --- VARIABILI E RESET --- */
:root { 
    --vet-blue: #0073aa; 
    --vet-green: #28a745; 
    --vet-bg: #f4f7f9; 
    --vet-red: #d9534f; 
    --vet-dark: #2c3e50;
}

/* --- CONTAINER PRINCIPALE (Unificato) --- */
#vet-booking-wrapper { 
    max-width: 1000px; 
    margin: 30px auto; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    display: flex; 
    gap: 30px; 
    flex-wrap: wrap; 
    background: transparent; 
    padding: 10px; 
}

.vet-card { 
    background: #ffffff; 
    border-radius: 12px; 
    border: 1px solid #e1e4e8; 
    padding: 25px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    flex: 1;
}

.vet-col-left { flex: 1; min-width: 320px; }
.vet-col-right { flex: 1.2; min-width: 350px; }

/* --- TITOLI --- */
.vet-title { 
    margin: 0 0 20px 0; 
    color: var(--vet-dark); 
    font-size: 1.4em; 
    border-bottom: 2px solid #f0f0f0; 
    padding-bottom: 10px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-weight: bold;
}

/* --- GESTIONE CAMPI FORM --- */
.vet-form-group, .vet-input-group { 
    margin-bottom: 15px; 
}

.vet-form-group label, .vet-input-group label { 
    display: block; 
    margin-bottom: 6px; 
    font-weight: 600; 
    color: #34495e; 
    font-size: 0.9em; 
}

.vet-form-group input, 
.vet-form-group select, 
.vet-form-group textarea,
.vet-input-group input,
.vet-input-group select { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid #dcdde1; 
    border-radius: 8px; 
    font-size: 16px; 
    transition: border 0.3s; 
    box-sizing: border-box;
}

.vet-form-group input:focus { 
    border-color: var(--vet-blue); 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(0,115,170,0.1); 
}

/* --- GRIGLIA DISPONIBILITA (Orari) --- */
.day-container { margin-bottom: 20px; }
.day-header { 
    background: #f8f9fa; 
    color: #333; 
    padding: 8px 15px; 
    font-weight: bold; 
    border-radius: 6px; 
    margin-bottom: 10px; 
    border-left: 4px solid var(--vet-blue); 
    font-size: 0.95em; 
}

.slots-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); 
    gap: 8px; 
}

.slot-btn { 
    text-align: center; 
    padding: 10px 5px; 
    background: #fff; 
    border: 1px solid #e1e4e8; 
    color: var(--vet-blue); 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: bold; 
    font-size: 14px; 
    transition: all 0.2s; 
}

.slot-btn:hover { background: #f0f7ff; border-color: var(--vet-blue); }
.slot-btn.selected { 
    background: var(--vet-green) !important; 
    color: #fff !important; 
    border-color: var(--vet-green) !important; 
    transform: scale(1.05); 
}

/* --- PULSANTI E BADGE --- */
#vet-send-btn, .vet-btn { 
    width: 100%; 
    padding: 16px; 
    background: #ccc; 
    color: #fff; 
    border: none; 
    border-radius: 8px; 
    font-weight: bold; 
    cursor: not-allowed; 
    font-size: 17px; 
    margin-top: 10px; 
    transition: all 0.3s; 
}

#vet-send-btn.ready { 
    background: var(--vet-green); 
    cursor: pointer; 
    box-shadow: 0 4px 10px rgba(40,167,69,0.3); 
}

.selection-badge { 
    background: #e7f3ff; 
    color: #0056b3; 
    padding: 12px; 
    border-radius: 8px; 
    margin-bottom: 15px; 
    display: none; 
    font-size: 0.9em; 
    line-height: 1.4; 
}

.required-notice { 
    font-size: 0.8em; 
    color: #777; 
    margin-top: 10px; 
    font-style: italic; 
}

#vet-loader { text-align: center; padding: 40px; color: #666; }

/* --- RESPONSIVE --- */
@media (max-width: 600px) { 
    #vet-booking-wrapper { gap: 15px; padding: 5px; } 
    .vet-card { padding: 15px; } 
    .vet-col-left, .vet-col-right { min-width: 100%; }
}

/* --- PUNTO 1: RIMOZIONE FRECCE E STILE INPUT CAPTCHA --- */
/* Rimuove le frecce su Chrome, Safari, Edge, Opera */
input#vet_captcha_ans::-webkit-outer-spin-button,
input#vet_captcha_ans::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Rimuove le frecce su Firefox */
input#vet_captcha_ans[type=number] {
    -moz-appearance: textfield;
}

/* Stile specifico per il quadratino del risultato */
input#vet_captcha_ans {
    background: transparent;
    border: 1px solid #dcdde1;
    color: #333;
    font-weight: bold;
    outline: none;
}