*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,body{
width:100%;
overflow-x:hidden;
}

body{
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
background:#f5f1e8;
min-height:100vh;
padding:1rem .8rem;
-webkit-font-smoothing:antialiased;
}

.container{
max-width:600px;
margin:0 auto;
width:100%;
}

h1{
font-size:1.8rem;
color:#1a1a1a;
margin-bottom:1.5rem;
text-align:center;
}

@media (max-width:480px){
h1{
font-size:1.5rem;
margin-bottom:1rem;
}
}

.form-group{
background:#fff;
padding:1.2rem;
border-radius:14px;
margin-bottom:1rem;
box-shadow:0 2px 8px rgba(0,0,0,.08);
}

@media (max-width:480px){
.form-group{
padding:1rem;
margin-bottom:.8rem;
border-radius:12px;
}
}

label{
display:block;
font-size:.9rem;
color:#333;
margin-bottom:.5rem;
font-weight:600;
}

@media (max-width:480px){
label{
font-size:.85rem;
}
}

input{
width:100%;
padding:.9rem;
border:1.5px solid #e0d7ce;
border-radius:10px;
font-size:1rem;
background:#fafaf8;
font-family:inherit;
transition:.3s;
}

@media (max-width:480px){
input{
padding:.8rem;
font-size:16px;
}
}

input:focus{
outline:none;
border-color:#b8956a;
background:#fff;
}

.calendar-container{
background:#fff;
padding:1.5rem;
border-radius:16px;
box-shadow:0 2px 12px rgba(0,0,0,.08);
margin-bottom:1rem;
}

@media (max-width:480px){
.calendar-container{
padding:1rem;
border-radius:14px;
margin-bottom:.8rem;
}
}

.form-group-title{
font-size:.75rem;
color:#999;
text-transform:uppercase;
letter-spacing:.8px;
margin-bottom:1rem;
font-weight:700;
}

.calendar-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:1.5rem;
gap:.8rem;
}

@media (max-width:480px){
.calendar-header{
margin-bottom:1rem;
gap:.5rem;
}
}

.month-btn{
background:linear-gradient(135deg,#fbbf24,#f59e0b);
border:none;
border-radius:10px;
width:40px;
height:40px;
font-size:1.2rem;
cursor:pointer;
color:#fff;
font-weight:bold;
transition:.3s;
flex-shrink:0;
}

@media (max-width:480px){
.month-btn{
width:36px;
height:36px;
font-size:1rem;
border-radius:8px;
}
}

.month-btn:active{
transform:scale(.95);
}

.calendar-month{
font-size:1.2rem;
font-weight:700;
color:#1a1a1a;
text-transform:capitalize;
text-align:center;
flex:1;
}

@media (max-width:480px){
.calendar-month{
font-size:1rem;
}
}

.day-names{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:.6rem;
margin-bottom:.8rem;
}

@media (max-width:480px){
.day-names{
gap:.4rem;
margin-bottom:.6rem;
}
}

.day-name{
text-align:center;
font-size:.75rem;
color:#999;
font-weight:700;
text-transform:uppercase;
padding:.4rem 0;
}

.calendar-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:.6rem;
margin-bottom:1.2rem;
}

@media (max-width:480px){
.calendar-grid{
gap:.4rem;
margin-bottom:1rem;
}
}

.day-cell{
aspect-ratio:1.15;
}

@media (max-width:480px){
.day-cell{
aspect-ratio:1;
}
}

.day-btn{
width:100%;
height:100%;
border:2px solid #e0d7ce;
border-radius:10px;
cursor:pointer;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background:#f5f1e8;
font-weight:700;
font-size:.95rem;
transition:.3s;
position:relative;
}

@media (max-width:480px){
.day-btn{
font-size:.85rem;
border-radius:8px;
border:1.5px solid #e0d7ce;
}
}

.day-btn:hover:not(:disabled){
border-color:#b8956a;
background:#fff;
}

.day-btn:active:not(:disabled){
transform:scale(.97);
}

.day-btn:disabled{
opacity:.15;
cursor:not-allowed;
}

.day-btn.selected{
background:linear-gradient(135deg,#b8956a,#a1845d);
color:#fff;
border-color:#a1845d;
transform:scale(1.03);
}

@media (max-width:480px){
.day-btn.selected{
transform:scale(1.02);
}
}

.day-indicator{
width:80%;
height:3px;
border-radius:2px;
margin-top:.3rem;
}

@media (max-width:480px){
.day-indicator{
width:75%;
height:2px;
margin-top:.2rem;
}
}

.day-btn.available .day-indicator{background:#4CAF50;}
.day-btn.limited .day-indicator{background:#FFA500;}
.day-btn.full .day-indicator{background:#F44336;}

.times-container{
display:none;
background:#fff;
padding:1.5rem;
border-radius:16px;
box-shadow:0 2px 12px rgba(0,0,0,.08);
margin-bottom:1rem;
}

@media (max-width:480px){
.times-container{
padding:1rem;
border-radius:14px;
margin-bottom:.8rem;
}
}

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

.times-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:.8rem;
}

@media (max-width:480px){
.times-grid{
grid-template-columns:repeat(3,1fr);
gap:.6rem;
}
}

.time-btn{
padding:.8rem;
border:1.5px solid #e0d7ce;
border-radius:10px;
background:#fafaf8;
color:#333;
font-weight:700;
font-size:.9rem;
cursor:pointer;
transition:.3s;
}

@media (max-width:480px){
.time-btn{
padding:.7rem;
font-size:.85rem;
border-radius:8px;
}
}

.time-btn:active:not(:disabled){
transform:scale(.97);
}

.time-btn:disabled{
opacity:.3;
cursor:not-allowed;
}

.time-btn.selected{
background:linear-gradient(135deg,#b8956a,#a1845d);
color:#fff;
border-color:#a1845d;
}

button[type="submit"]{
width:100%;
padding:1.1rem;
background:linear-gradient(135deg,#b8956a,#a1845d);
color:#fff;
border:none;
border-radius:12px;
font-weight:700;
font-size:1rem;
cursor:pointer;
transition:.3s;
margin-bottom:.8rem;
}

@media (max-width:480px){
button[type="submit"]{
padding:1rem;
font-size:.95rem;
border-radius:10px;
margin-bottom:.6rem;
}
}

button[type="submit"]:active:not(:disabled){
transform:scale(.98);
}

.message{
display:none;
padding:1rem;
border-radius:12px;
text-align:center;
font-weight:600;
margin-bottom:1rem;
font-size:.95rem;
white-space: pre-line;
}

.message.success{
background:#e8f5e9;
color:#2e7d32;
border:2px solid #4CAF50;
}

.message.error{
background:#ffebee;
color:#c62828;
border:2px solid #F44336;
}

.message.show{
display:block;
}

.legend{
display:flex;
justify-content:center;
gap:1rem;
font-size:.75rem;
color:#666;
padding:1rem 0;
border-top:1px solid #e0d7ce;
flex-wrap:wrap;
}

.legend-item{
display:flex;
align-items:center;
gap:.4rem;
}

.legend-color{
width:12px;
height:3px;
border-radius:1px;
}

.calendar-btn{
display:inline-block;
margin-top:8px;
padding:8px 14px;
background:#b8956a;
color:white;
border-radius:8px;
text-decoration:none;
font-weight:600;
font-size:0.9rem;
}

.calendar-btn:hover{
background:#a1845d;
}