/*  Paleta corporativa
    -----------------------------------------------------------*/
:root{
    --green:#008037;
    --green-dark:#00672c;
    --red:#bf0033;
    --red-dark:#960029;
    --grey:#f7f7f7;
    --text:#333;
    --radius:4px;
}

/*  Contenedor general
    -----------------------------------------------------------*/
.tennis-res-wrapper{
    max-width:640px;
    margin:0 auto 60px;
    font-family:inherit;
}

/*  Títulos + animación de pasos
    -----------------------------------------------------------*/
.tennis-res-wrapper h2{
    font-size:2rem;
    text-align:center;
    color:var(--green);
    margin:0 0 24px;
}
.step{animation:fade .3s ease;}
@keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/*  Datepicker
    -----------------------------------------------------------*/
#reservation-calendar{margin:0 auto 20px;}
.ui-datepicker{
    background:#fff;
    border:1px solid var(--green);
    border-radius:var(--radius);
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    width:100%;
}
.ui-datepicker-header{
    background:var(--green);
    color:#fff;
    padding:8px 0;
    border-radius:var(--radius) var(--radius) 0 0;
    font-weight:600;
}
.ui-datepicker a{
    display:block;
    padding:6px;
    text-align:center;
    color:var(--text);
}
.ui-state-disabled span{color:#ccc !important;}
.ui-state-active,
.ui-state-hover{
    background:var(--green) !important;
    color:#fff !important;
    border-radius:var(--radius);
}

/*  NUEVO: Grid de franjas horarias
    -----------------------------------------------------------*/
.time-slots-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:12px;
    margin-bottom:24px;
}
.slot-label{
    position:relative;
    cursor:pointer;
}
.slot-label input{display:none;}
.slot-label span{
    display:block;
    padding:10px 6px;
    text-align:center;
    font-size:.9rem;
    border:1px solid var(--green);
    border-radius:var(--radius);
    background:#fff;
    transition:all .15s;
}
.slot-label input:checked + span{
    background:var(--green);
    color:#fff;
    font-weight:600;
}
.slot-label.unavailable span{
    background:#eee;
    color:#999;
    border-color:#ddd;
    cursor:not-allowed;
}

/*  Formulario de contacto
    -----------------------------------------------------------*/
.form-group{margin-bottom:18px;}
.form-group label{
    display:block;
    margin-bottom:6px;
    font-weight:500;
}
.form-group input,
.form-group textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid #ccc;
    border-radius:var(--radius);
    font-size:1rem;
}
.form-group input:focus,
.form-group textarea:focus{
    border-color:var(--green);
    outline:none;
    box-shadow:0 0 0 2px rgba(0,128,55,.15);
}

/*  Botones
    -----------------------------------------------------------*/
.button,
.confirm-reservation-button{
    display:inline-block;
    padding:12px 24px;
    font-size:1rem;
    border-radius:var(--radius);
    cursor:pointer;
    transition:background .15s,color .15s;
    border:none;
}
.button-primary{background:var(--green);color:#fff;}
.button-primary:hover{background:var(--green-dark);}
.button-secondary{
    background:#fff;
    color:var(--green);
    border:2px solid var(--green);
}
.button-secondary:hover{background:var(--grey);}
.confirm-reservation-button{
    background:var(--red);
    color:#fff;
}
.confirm-reservation-button:hover{background:var(--red-dark);}

.loading{text-align:center;padding:30px 0;color:#666;}