:root{
  --accent:#b3a9a7; 
  --accent-dark:#442920;
  --muted:#6d6d6d; 
  --bg:#f7efe9; 
  --card:#fff7f2;
  --slot-bg:#fff; 
  --slot-border:#e7dfd6; 
  --locked:#eee;
}

/* Contenedor principal */
.booking-container{
  max-width:760px;
  width:100%;
  background:var(--card);
  padding:32px;
  border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.08);
  margin:40px auto;
  font-family:'Bilbo', sans-serif;
  opacity:0;
  transform:translateY(20px);
  animation:fadeSlideIn 0.6s forwards;
}

/* Animación fade-in */
@keyframes fadeSlideIn{
  to{opacity:1; transform:translateY(0);}
}

/* Título */
.booking-title{
  text-align:center;
  color:var(--accent);
  font-size:32px;
  margin-bottom:24px;
  font-weight:800;
  opacity:0;
  animation:fadeSlideIn 0.6s 0.2s forwards;
}

/* Etiquetas y formularios */
label{
  font-weight:600;
  color:var(--muted);
  margin-top:16px;
  display:block;
  font-size:20px;
  opacity:0;
  animation:fadeSlideIn 0.6s 0.4s forwards;
}

input, select, textarea{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--slot-border);
  margin-top:6px;
  font-size:20px;
  transition: border-color .3s, box-shadow .3s;
}

input:focus, select:focus, textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 8px rgba(201,123,99,.2);
  outline:none;
}

textarea{min-height:100px}

/* Botón principal */
button{
  margin-top:20px;
  width:100%;
  padding:14px;
  border-radius:12px;
  border:none;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  font-size:16px;
  cursor:pointer;
  transition: background .3s, transform .2s;
}

button:hover{
  background:var(--accent-dark);
  transform:translateY(-2px);
}

/* Grid de slots */
.slots-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:10px;
  margin-top:10px;
}

.slot{
  padding:10px;
  border-radius:10px;
  border:1px solid var(--slot-border);
  background:var(--slot-bg);
  font-weight:600;
  text-align:center;
  cursor:pointer;
  transition: background .3s, border-color .3s, transform .2s;
}

.slot:hover{
  background:#fff1e8;
  transform:translateY(-2px);
}

.slot.locked{
  background:var(--locked); 
  color:#999; 
  cursor:not-allowed;
}

.slot.selected{
  outline:3px solid rgba(201,123,99,.25);
  background:#ffece1;
  animation:fadeSlideIn 0.3s forwards;
}

/* Modal */
#modal{
  position:fixed; 
  inset:0; 
  display:none; 
  align-items:center; 
  justify-content:center; 
  background:rgba(0,0,0,.45);
  z-index:1000;
}

#modalCard{
  background:#fff; 
  padding:24px; 
  border-radius:12px; 
  max-width:420px; 
  width:90%;
  text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,.15);
  font-family:'Work Sans', sans-serif;
}

#modalCard p{
  margin-bottom:20px;
  font-size:16px;
  color:#333;
}

#modalCard button{
  width:50%;
  margin:0 auto;
}