/* Appointment modal aesthetic overrides — keep site's colors */
:root{
  /* map project palette to local tokens */
  --ap-accent: var(--color-accent, var(--brand, #a5121a));
  --ap-bg:     var(--color-bg, #141414);
  --ap-text:   var(--color-text, #cccccc);
  --ap-border: var(--color-border, rgba(255,255,255,.08));
  --ap-border-light: var(--color-border-light, rgba(255,255,255,.12));
  --ap-soft:   rgba(255,255,255,.04);
  --ap-soft-2: rgba(255,255,255,.06);
  --ap-shadow: 0 24px 60px rgba(0,0,0,.45);
  --ap-radius: 18px;
  --ap-radius-lg: 22px;
  --ap-ring: color-mix(in oklab, var(--ap-accent) 35%, transparent);
}
/* Modal shell */
.book-modal__content{
  background: linear-gradient(180deg, color-mix(in oklab, var(--ap-bg) 96%, black), var(--ap-bg));
  color: var(--ap-text);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-lg);
  box-shadow: var(--ap-shadow);
  backdrop-filter: blur(6px) saturate(110%);
}
.book-modal__brand-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 22px 10px;
  border-bottom: 1px solid var(--ap-border);
}
.book-modal__brand-title{ font-size: 20px; font-weight: 700; letter-spacing:.2px; color: var(--ap-text); }
.book-modal__brand-sub{ font-size: 13px; opacity:.75; margin-top: 2px; }

/* Cards */
.book-modal__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 860px){ .book-modal__grid{ grid-template-columns: 1fr; } }

.book-modal__card{
  background: linear-gradient(180deg, var(--ap-soft-2), var(--ap-soft));
  border: 1px solid var(--ap-border-light);
  border-radius: var(--ap-radius);
  padding: 14px 14px 12px;
}
.book-modal__card-title{
  font-size: 14px; font-weight: 700; letter-spacing:.3px; text-transform: uppercase;
  color: color-mix(in oklab, var(--ap-text) 90%, white);
  margin: 2px 0 10px;
}
.book-modal__kv{ line-height: 1.5; color: var(--ap-text); }
.book-modal__hint{ color: color-mix(in oklab, var(--ap-text) 70%, black); font-size:12px; }

/* Price highlight */
.book-modal__price{
  font-size: 28px; font-weight: 800; letter-spacing:.3px;
  color: color-mix(in oklab, var(--ap-text) 96%, white);
  padding: 8px 12px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--ap-border-light);
  display:inline-block; margin-bottom:8px;
}

/* Buttons */
.btn{ 
  --btn-h: 40px;
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--btn-h); padding: 0 14px; border-radius: 12px;
  font-weight: 600; letter-spacing:.2px; cursor:pointer;
  border: 1px solid transparent; transition: all .18s ease;
}
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn--solid{ background: var(--ap-accent); color: white; }
.btn--solid:hover{ filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in oklab, var(--ap-accent) 30%, transparent); }
.btn--ghost{
  background: transparent; color: var(--ap-text);
  border-color: var(--ap-border-light);
}
.btn--ghost:hover{ background: color-mix(in oklab, var(--ap-accent) 18%, transparent); border-color: var(--ap-accent); color:white; }
.btn--danger{ background: transparent; color: #ff6666; border-color: rgba(255,102,102,.35); }
.btn--danger:hover{ background: rgba(255,102,102,.12); border-color: rgba(255,102,102,.65); }

.book-modal__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.book-modal__toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }

/* Inputs */
.book-modal__field input[type="text"],
.book-modal__field input[type="email"],
.book-modal__field input[type="tel"]{
  width:100%; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ap-border-light);
  color: var(--ap-text); padding: 10px 12px;
  outline: none;
}
.book-modal__field input:focus{
  border-color: var(--ap-accent); 
  box-shadow: 0 0 0 3px var(--ap-ring);
}

/* Calendar + slots */
.book-modal__calendar{
  display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; margin: 8px 0 4px;
}
@media (max-width: 560px){ .book-modal__calendar{ grid-template-columns: repeat(4, 1fr); } }
.btn--day{
  height: 36px; border-radius: 10px; font-weight:600; font-size:13px;
  background: rgba(255,255,255,.04); border:1px solid var(--ap-border-light); color: var(--ap-text);
}
.btn--day:hover{ border-color: var(--ap-accent); background: color-mix(in oklab, var(--ap-accent) 14%, transparent); }
.btn--day.is-selected{ background: var(--ap-accent); border-color: var(--ap-accent); color:white; box-shadow: 0 6px 18px color-mix(in oklab, var(--ap-accent) 30%, transparent); }

.book-modal__slots{ display:flex; gap:8px; flex-wrap:wrap; margin: 10px 0 6px; }
.btn--slot{
  height: 36px; border-radius: 10px; font-weight:600; font-size:13px;
  background: rgba(255,255,255,.04); border:1px solid var(--ap-border-light); color: var(--ap-text);
}
.btn--slot:hover{ border-color: var(--ap-accent); background: color-mix(in oklab, var(--ap-accent) 14%, transparent); }
.btn--slot.is-selected{ background: var(--ap-accent); border-color: var(--ap-accent); color:white; box-shadow: 0 6px 18px color-mix(in oklab, var(--ap-accent) 30%, transparent); }

/* Errors */
.book-modal__error{
  background: rgba(255, 87, 87, .1);
  border: 1px solid rgba(255, 87, 87, .35);
  color: #ffb3b3;
  padding: 10px 12px; border-radius: 12px; margin-top: 10px;
}
/* Close button minimal tweak */
.book-modal__close{
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--ap-border-light); background: rgba(255,255,255,.04);
  color: var(--ap-text);
}
.book-modal__close:hover{ border-color: var(--ap-accent); color:white; background: color-mix(in oklab, var(--ap-accent) 20%, transparent); }


/* Icons */
.book-modal__card-title .ap-ico{ display:inline-flex; width:18px; height:18px; margin-right:8px; opacity:.9; transform: translateY(2px); }
.book-modal__card-title .ap-ico svg{ width:18px; height:18px; }

/* Animations */
@keyframes ap-fadeUp { from{ opacity:0; transform: translateY(8px)} to{ opacity:1; transform:none } }
@keyframes ap-scaleIn { from{ opacity:0; transform: scale(.98)} to{ opacity:1; transform: scale(1)} }

.ap-animate.ap-enter{ animation: ap-fadeUp .22s ease-out both; }
.book-modal__calendar.ap-enter, .book-modal__slots.ap-enter{ animation: ap-scaleIn .18s ease-out both; }

/* Mobile sizing */
@media (max-width: 560px){
  .btn{ --btn-h: 44px; }
  .btn--day, .btn--slot{ height: 40px; font-size:14px; }
  .book-modal__brand-title{ font-size:18px; }
  .book-modal__grid{ gap:12px; }
}