/* ── CSS Variables (defaults — sobrescritos via JS com barber_site_config) ── */
:root {
  --c-bg:      #0a0a0a;
  --c-surface: #141414;
  --c-border:  #2a2a2a;
  --c-text:    #f5f5f5;
  --c-muted:   #737373;
  --c-primary: #f97316;

  --font-heading: 'Oswald', sans-serif;
  --font-body:    'Inter', sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); }

/* ── Loader (splash) ── */
.loader {
  width: 28px;
  height: 28px;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.loader-sm {
  width: 16px;
  height: 16px;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Step section transitions ── */
.step-section {
  animation: fadeSlideIn 0.25s ease;
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Service card ── */
.service-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.service-card:active,
.service-card.selected {
  border-color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 8%, var(--c-surface));
}
.service-img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--c-border);
  flex-shrink: 0;
}
.service-img-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--c-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
}

/* ── Barber card ── */
.barber-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 12px;
  border-radius: 16px;
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}
.barber-card:active,
.barber-card.selected {
  border-color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 8%, var(--c-surface));
}
.barber-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-border);
}
.barber-photo-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
}

/* ── Date strip day button ── */
.day-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.day-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.day-btn.selected {
  border-color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 12%, var(--c-surface));
}
.day-btn .day-name {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-muted);
}
.day-btn .day-num {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
}
.day-btn.selected .day-num { color: var(--c-primary); }

/* ── Time slot button ── */
.slot-btn {
  padding: 10px 6px;
  border-radius: 10px;
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.slot-btn:hover,
.slot-btn.selected {
  border-color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 10%, var(--c-surface));
  color: var(--c-primary);
}

/* ── Form input ── */
.field-input {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s;
}
.field-input::placeholder { color: var(--c-muted); }
.field-input:focus { border-color: var(--c-primary); }

/* ── Buttons ── */
.btn-primary {
  width: 100%;
  padding: 14px 20px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--c-primary);
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:active { opacity: 0.85; }

.btn-whatsapp {
  padding: 14px 20px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #25D366;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn-whatsapp:active { opacity: 0.85; }

/* ── Summary line ── */
.summary-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.summary-line .label {
  font-size: 12px;
  color: var(--c-muted);
  min-width: 72px;
}
.summary-line .value {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }