/* ========================================
   BOOKING MODAL — Componente reutilizable
   ======================================== */
.booking-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.booking-modal.active {
  display: flex;
}

.booking-modal-content {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  animation: modalSlideUp 0.3s ease;
  transition: max-width 0.3s ease;
}

.booking-modal-content.calendar-active {
  max-width: 950px;
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile: fullscreen */
@media (max-width: 768px) {
  .booking-modal {
    padding: 0;
    background: #fff;
  }
  .booking-modal-content {
    border-radius: 0;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.modal-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.modal-back {
  display: none;
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: #666;
  padding: 0.25rem;
  line-height: 1;
}

.modal-back.visible {
  display: flex;
}

.modal-back:hover {
  color: #000;
}

.modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #999;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.2s;
}

.modal-close:hover {
  color: #333;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 1.5rem;
}

/* Steps indicator */
.steps-indicator {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0e0e0;
  transition: all 0.3s ease;
}

.step-dot.active {
  background: #917799;
  width: 24px;
  border-radius: 4px;
}

.step-dot.completed {
  background: #917799;
}

/* ========================================
   TYPEFORM-STYLE FORM
   ======================================== */
.form-step {
  display: none;
  animation: bkFadeIn 0.3s ease;
}

.form-step.active {
  display: block;
}

@keyframes bkFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 1.125rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 0.75rem;
}

.form-label .optional {
  font-size: 0.875rem;
  color: #999;
  font-weight: 400;
}

.form-label .required {
  color: #e74c3c;
  font-weight: 600;
}

.form-input {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  background: #fafafa;
  transition: all 0.2s ease;
  font-family: inherit;
}

.form-input:focus {
  outline: none;
  border-color: #917799;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(145, 119, 153, 0.1);
}

.form-input::placeholder {
  color: #bbb;
}

.form-textarea {
  resize: none;
  min-height: 80px;
}

.textarea-wrapper {
  position: relative;
}

.textarea-wrapper .form-textarea {
  padding-bottom: 1.75rem;
}

.char-counter {
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-size: 0.7rem;
  color: #bbb;
  pointer-events: none;
}

.char-counter.warning {
  color: #e74c3c;
}

/* Timezone select */
.form-select {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  background: #fafafa;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.form-select:focus {
  outline: none;
  border-color: #917799;
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(145, 119, 153, 0.1);
}

/* Checkbox */
.form-checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: #f8f6fb;
  border-radius: 12px;
  cursor: pointer;
}

.form-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #917799;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: #917799;
}

.form-checkbox-label {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.5;
}

.form-checkbox-label a {
  color: #917799;
  text-decoration: underline;
  font-weight: 500;
}

.form-checkbox-label a:hover {
  color: #7a6082;
}

/* Form buttons */
.form-btn {
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.form-btn-primary {
  background: #917799;
  color: #fff;
}

.form-btn-primary:hover:not(:disabled) {
  background: #7a6082;
  transform: translateY(-1px);
}

.form-btn-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.form-btn-secondary {
  background: transparent;
  color: #666;
  border: 2px solid #e8e8e8;
  margin-top: 0.75rem;
}

.form-btn-secondary:hover {
  border-color: #917799;
  color: #917799;
}

/* ========================================
   POLICIES VIEW
   ======================================== */
.policies-content {
  animation: bkFadeIn 0.3s ease;
}

.policies-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1.5rem;
}

.policy-section {
  margin-bottom: 1.5rem;
}

.policy-section h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: #917799;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.policy-section p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.policy-section ul {
  list-style: none;
  padding: 0;
}

.policy-section li {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.7;
  padding-left: 1.25rem;
  position: relative;
  margin-bottom: 0.5rem;
}

.policy-section li::before {
  content: "•";
  color: #917799;
  position: absolute;
  left: 0;
  font-weight: bold;
}

.policy-urgent {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 1rem;
  border-radius: 0 8px 8px 0;
  margin-top: 1rem;
}

.policy-urgent p {
  margin: 0;
  color: #856404;
}

/* ========================================
   CALENDAR VIEW
   ======================================== */
.calendar-view {
  display: none;
}

.calendar-view.active {
  display: block;
}

.calendar-container {
  width: 100%;
}

/* Slot picker */
.slot-picker { padding: 0; }
.sp-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.6rem; }
.sp-nav-btn { background:none; border:1px solid #e0d8e4; border-radius:7px; width:30px; height:30px; cursor:pointer; font-size:0.9rem; color:#917799; display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
.sp-nav-btn:hover:not(:disabled) { background:#f0edf5; }
.sp-nav-btn:disabled { opacity:0.3; cursor:default; }
.sp-month-label { font-weight:600; font-size:0.9rem; color:#1a1a2e; text-transform:capitalize; }
.sp-loading { text-align:center; padding:1.5rem; color:#888; font-size:0.875rem; }
.sp-spinner { width:22px; height:22px; border:3px solid #e0d8e4; border-top-color:#917799; border-radius:50%; animation:bkSpin 0.8s linear infinite; margin:0 auto 0.5rem; }
@keyframes bkSpin { to { transform:rotate(360deg); } }
.sp-weekdays { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:0.68rem; font-weight:600; color:#aaa; margin-bottom:0.25rem; }
.sp-days { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.sp-day { height:34px; display:flex; align-items:center; justify-content:center; border-radius:6px; font-size:0.78rem; border:1px solid transparent; cursor:default; }
.sp-day.avail { background:#f0edf5; color:#1a1a2e; cursor:pointer; }
.sp-day.avail:hover, .sp-day.sel { background:#917799; color:#fff; font-weight:600; }
.sp-day.busy, .sp-day.past { color:#ccc; }
.sp-slots-section { margin-top:0.75rem; border-top:1px solid #f0edf5; padding-top:0.65rem; }
.sp-slots-day { font-size:0.78rem; font-weight:600; color:#917799; margin-bottom:0.45rem; text-transform:capitalize; }
.sp-slots-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.35rem; }
.sp-slot { padding:0.45rem 0.2rem; border:1px solid #e0d8e4; border-radius:7px; font-size:0.78rem; text-align:center; cursor:pointer; background:#fff; color:#333; transition:all 0.15s; }
.sp-slot:hover { border-color:#917799; color:#917799; }
.sp-slot.sel { background:#917799; border-color:#917799; color:#fff; font-weight:600; }
.sp-empty { text-align:center; padding:1rem 0; font-size:0.82rem; color:#999; }
.sp-error-msg { background:#fdecea; border:1px solid #f5c6cb; border-radius:7px; padding:0.5rem 0.9rem; font-size:0.78rem; color:#721c24; text-align:center; margin-top:0.5rem; }
@media (max-width:380px) { .sp-slots-grid { grid-template-columns:repeat(3,1fr); } }