/* =========================================================
   La Cueva — Reservation Drawer (public site)
   ========================================================= */

.lc-res-overlay{
  position:fixed; inset:0;
  background:rgba(14,13,11,.55);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  z-index:10000;
}
.lc-res-overlay.is-open{ opacity:1; visibility:visible; }

.lc-res-drawer{
  position:fixed;
  top:0; right:0;
  height:100%;
  width:460px;
  max-width:92vw;
  background:#fbf7f1;
  box-shadow:-10px 0 40px rgba(14,13,11,.25);
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  z-index:10001;
  display:flex;
  flex-direction:column;
  font-family:'Montserrat', sans-serif;
  color:#241f19;
}
.lc-res-drawer.is-open{ transform:translateX(0); }

.lc-res-scroll{
  overflow-y:auto;
  padding:34px 32px 24px;
  flex:1 1 auto;
}

.lc-res-close{
  position:absolute;
  top:22px; right:26px;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:transparent;
  border:none;
  cursor:pointer;
  color:#241f19;
  font-size:18px;
  transition:.15s ease;
}
.lc-res-close:hover{ background:rgba(14,13,11,.06); }

.lc-res-title{
  font-size:1.7rem;
  font-weight:700;
  letter-spacing:.03em;
  margin-bottom:4px;
  text-transform:uppercase;
}
.lc-res-subtitle{
  color:#8a8073;
  font-size:.92rem;
  margin-bottom:30px;
}

/* ---------- Stepper ---------- */
.lc-res-steps{
  display:flex;
  align-items:flex-start;
  margin-bottom:34px;
}
.lc-res-step{
  flex:1 1 0;
  text-align:center;
  position:relative;
}
.lc-res-step-circle{
  width:34px; height:34px;
  border-radius:50%;
  margin:0 auto 8px;
  display:flex; align-items:center; justify-content:center;
  font-weight:600;
  font-size:.9rem;
  background:#fff;
  border:2px solid #e4ddcf;
  color:#b2a893;
  position:relative;
  z-index:2;
}
.lc-res-step-label{
  font-size:.65rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#b2a893;
}
.lc-res-step::after{
  content:"";
  position:absolute;
  top:17px; left:50%;
  width:100%;
  height:2px;
  background:#e4ddcf;
  z-index:1;
}
.lc-res-step:last-child::after{ display:none; }

.lc-res-step.is-active .lc-res-step-circle{
  background:var(--main-color, #e4c590);
  border-color:var(--main-color, #e4c590);
  color:#241f19;
}
.lc-res-step.is-active .lc-res-step-label{ color:#241f19; font-weight:600; }
.lc-res-step.is-done .lc-res-step-circle{
  background:var(--main-color, #e4c590);
  border-color:var(--main-color, #e4c590);
  color:#241f19;
}
.lc-res-step.is-done::after{ background:var(--main-color, #e4c590); }

/* ---------- Form ---------- */
.lc-res-panel{ display:none; }
.lc-res-panel.is-active{ display:block; }

.lc-res-label{
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8a8073;
  font-weight:600;
  margin-bottom:8px;
  display:block;
}
.lc-res-row{ display:flex; gap:14px; margin-bottom:20px; }
.lc-res-row .lc-res-field{ flex:1 1 0; min-width:0; }
.lc-res-field{ margin-bottom:20px; }

.lc-res-input-wrap{ position:relative; }
.lc-res-input-wrap i.lc-ic{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:#b2a893; font-size:.9rem; pointer-events:none;
}
.lc-res-input,
.lc-res-select,
.lc-res-textarea{
  width:100%;
  border:1px solid #e4ddcf;
  background:#fff;
  border-radius:12px;
  padding:13px 14px 13px 40px;
  font-family:inherit;
  font-size:.92rem;
  color:#241f19;
  transition:.15s ease;
}
.lc-res-select{ appearance:none; padding-right:34px; cursor:pointer; }
.lc-res-select-wrap{ position:relative; }
.lc-res-select-wrap::after{
  content:"\f078";
  font-family:"Font Awesome 6 Pro"; font-weight:400;
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:#b2a893; font-size:.75rem; pointer-events:none;
}
.lc-res-input:focus, .lc-res-select:focus, .lc-res-textarea:focus{
  outline:none;
  border-color:var(--main-color, #e4c590);
  box-shadow:0 0 0 3px rgba(228,197,144,.25);
}
.lc-res-textarea{ padding-left:14px; resize:none; min-height:96px; }
.lc-res-charcount{
  text-align:right;
  font-size:.72rem;
  color:#b2a893;
  margin-top:4px;
}

/* available tables */
.lc-res-tables-placeholder{
  display:flex; align-items:center; gap:10px;
  background:#fff;
  border:1px dashed #e4ddcf;
  border-radius:12px;
  padding:16px;
  color:#9a9388;
  font-size:.85rem;
  margin-bottom:22px;
}
.lc-res-tables-placeholder i{ font-size:1.1rem; color:#cdb98a; }

.lc-res-tables-loading{
  text-align:center;
  color:#9a9388;
  font-size:.85rem;
  padding:16px;
  margin-bottom:22px;
}

.lc-res-tables{ margin-bottom:10px; }
.lc-res-tables-empty{
  background:#fff;
  border:1px dashed #e4ddcf;
  border-radius:12px;
  padding:16px;
  color:#9a9388;
  font-size:.85rem;
  text-align:center;
}

.lc-res-zone-group{ margin-bottom:16px; }
.lc-res-zone-title{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#9a9388;
  font-weight:600;
  margin-bottom:8px;
}
.lc-res-zone-cards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}

.lc-res-table-card{
  border:1.5px solid #e4ddcf;
  border-radius:12px;
  background:#fff;
  padding:14px 10px 12px;
  text-align:center;
  cursor:pointer;
  position:relative;
  transition:.15s ease;
}
.lc-res-table-card i{ font-size:1.1rem; color:#8a8073; display:block; margin-bottom:6px; }
.lc-res-table-card .lc-table-name{ display:block; font-size:.82rem; font-weight:600; color:#241f19; }
.lc-res-table-card .lc-table-cap{
  display:block; font-size:.72rem; color:#8a8073; margin-top:3px;
}
.lc-res-table-card .lc-table-cap i{ display:inline; font-size:.68rem; margin:0 3px 0 0; color:#b2a893; }
.lc-res-table-card .lc-table-status{
  display:inline-block;
  margin-top:7px;
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:2px 9px;
  border-radius:999px;
  background:#dff3e6;
  color:#1f7a44;
}
.lc-res-table-card:hover{ border-color:var(--main-color, #e4c590); }
.lc-res-table-card.is-selected{
  border-color:var(--main-color, #e4c590);
  background:rgba(228,197,144,.1);
}
.lc-res-table-card.is-selected .lc-table-name,
.lc-res-table-card.is-selected i{ color:#241f19; }

.lc-res-table-card .lc-check{
  position:absolute; top:-8px; right:-8px;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--main-color, #e4c590);
  color:#241f19;
  font-size:.65rem;
  display:none;
  align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.lc-res-table-card.is-selected .lc-check{ display:flex; }

.lc-res-table-card.is-occupied{
  cursor:not-allowed;
  background:#f7f5f1;
  opacity:.65;
}
.lc-res-table-card.is-occupied .lc-table-status{
  background:#fbe3e1;
  color:#b23527;
}
.lc-res-table-card.is-occupied:hover{ border-color:#e4ddcf; }

/* summary (step 2) */
.lc-res-summary{
  background:#fff;
  border:1px solid #e4ddcf;
  border-radius:12px;
  padding:16px 18px;
  margin-bottom:22px;
}
.lc-res-summary-row{
  display:flex; justify-content:space-between;
  font-size:.85rem;
  padding:6px 0;
  border-bottom:1px dashed #ece5d7;
}
.lc-res-summary-row:last-child{ border-bottom:none; }
.lc-res-summary-row span:first-child{ color:#8a8073; }
.lc-res-summary-row span:last-child{ font-weight:600; color:#241f19; text-align:right; }

/* error text */
.lc-res-error{
  color:#c0392b;
  font-size:.78rem;
  margin-top:6px;
  display:none;
}
.lc-res-field.has-error .lc-res-input,
.lc-res-field.has-error .lc-res-textarea{ border-color:#c0392b; }
.lc-res-field.has-error .lc-res-error{ display:block; }

.lc-res-alert{
  background:#fdecec;
  color:#c0392b;
  border-radius:10px;
  padding:10px 14px;
  font-size:.82rem;
  margin-bottom:18px;
  display:none;
}
.lc-res-alert.is-visible{ display:block; }

/* ---------- Buttons / footer ---------- */
.lc-res-actions{ margin-top:8px; }
.lc-res-btn{
  width:100%;
  border:none;
  border-radius:999px;
  background:var(--main-color, #e4c590);
  color:#241f19;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.82rem;
  padding:16px 20px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:.15s ease;
}
.lc-res-btn:hover{ background:#d8b878; }
.lc-res-btn:disabled{ opacity:.55; cursor:not-allowed; }
.lc-res-btn-outline{
  background:transparent;
  border:1.5px solid #e4ddcf;
  color:#58504a;
  width:100%;
  border-radius:999px;
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:14px 20px;
  cursor:pointer;
  margin-top:10px;
  transition:.15s ease;
}
.lc-res-btn-outline:hover{ border-color:var(--main-color, #e4c590); color:#241f19; }

.lc-res-help{
  display:flex; align-items:center; gap:10px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid #e9e2d4;
  font-size:.82rem;
  color:#58504a;
}
.lc-res-help i{
  width:32px; height:32px;
  border-radius:50%;
  background:rgba(228,197,144,.25);
  color:#8a6d3b;
  display:flex; align-items:center; justify-content:center;
}
.lc-res-help a{ color:#241f19; font-weight:600; text-decoration:none; }

/* step 3 success */
.lc-res-success{ text-align:center; padding:30px 0 10px; }
.lc-res-success .lc-success-icon{
  width:72px; height:72px;
  border-radius:50%;
  background:rgba(228,197,144,.25);
  color:#8a6d3b;
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem;
  margin:0 auto 20px;
}
.lc-res-success h3{
  font-size:1.2rem; font-weight:700; margin-bottom:8px;
}
.lc-res-success p{ color:#8a8073; font-size:.9rem; margin-bottom:22px; }

/* spinner on submit button */
.lc-res-btn .lc-spinner{
  width:16px; height:16px;
  border-radius:50%;
  border:2px solid rgba(36,31,25,.3);
  border-top-color:#241f19;
  animation: lc-spin .7s linear infinite;
  display:none;
}
.lc-res-btn.is-loading .lc-spinner{ display:inline-block; }
.lc-res-btn.is-loading .lc-btn-text{ opacity:.7; }
@keyframes lc-spin{ to{ transform:rotate(360deg); } }

body.lc-res-open{ overflow:hidden; }

@media (max-width: 575px){
  .lc-res-drawer{ width:100%; }
  .lc-res-zone-cards{ grid-template-columns:1fr; }
  .lc-res-row{ flex-direction:column; gap:0; }
}