/* booking.css — scoped under #booking-app to avoid WP theme conflicts */

@font-face {
  font-family: 'Product Sans';
  src: url('https://1hold.de/wp-content/uploads/2024/03/productsans.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'Google Sans';
  src: url('https://1hold.de/wp-content/uploads/2024/03/googlesans.woff2') format('woff2');
  font-weight: 400 700;
}

/* ── Reset + Variables ── */
#booking-app {
  --blue:    #1a73e8;
  --blue-dk: #1557b0;
  --dark:    #0f172a;
  --bg:      #f0f4f8;
  --ink:     #0f172a;
  --body:    #334155;
  --muted:   #94a3b8;
  --border:  #e2e8f0;
  --card:    #ffffff;
  --radius:  14px;
  --shadow:  0 4px 32px rgba(15,23,42,.1), 0 1px 6px rgba(15,23,42,.06);

  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  line-height: 1.5;
  max-width: 600px !important;
  margin: 0 auto !important;
  padding: 28px 16px 56px;
  -webkit-font-smoothing: antialiased;
}
#booking-app *, #booking-app *::before, #booking-app *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
#booking-app .container {
  width: 100%;
  max-width: 600px;
  padding: 28px 16px 56px;
}

/* ── TRUST STRIP ── */
#booking-app .trust-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px 20px;
}
#booking-app .trust-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
#booking-app .trust-name {
  font-size: 13px; font-weight: 600; color: var(--body);
  line-height: 1.3;
}
#booking-app .trust-sub {
  font-size: 11px; color: var(--muted); margin-top: 1px;
}
#booking-app .trust-badge {
  margin-left: auto;
  display: flex; align-items: center; gap: 5px;
  flex-shrink: 0;
}
#booking-app .trust-badge img { height: 50px; width: auto; }
#booking-app .trust-badge span { display: none !important; }

/* ── PROGRESS ── */
#booking-app .progress-wrap { margin-bottom: 20px; }
#booking-app .progress-bar {
  height: 3px; background: #e2e8f0;
  border-radius: 3px; margin-bottom: 10px; overflow: hidden;
}
#booking-app .progress-fill {
  height: 100%; background: var(--blue);
  border-radius: 3px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
  width: 33%;
}
#booking-app .step-labels {
  display: flex; justify-content: space-between;
}
#booking-app .step-label {
  font-size: 11px; color: var(--muted);
  font-weight: 500; transition: color .2s;
}
#booking-app .step-label.active { color: var(--blue); font-weight: 600; }
#booking-app .step-label.done { color: var(--body); }

/* ── CARD ── */
#booking-app .card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
#booking-app .card-title {
  font-family: 'Google Sans', sans-serif;
  font-size: 19px; font-weight: 600;
  color: var(--ink); margin-bottom: 4px;
}
#booking-app .card-sub {
  font-size: 13px; color: var(--muted);
  margin-bottom: 24px;
}

/* ── SERVICE LIST ── */
#booking-app .service-list { margin: 0 -28px; }
#booking-app .service-item {
  display: flex; align-items: center;
  gap: 14px; padding: 15px 28px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  box-shadow: inset 3px 0 0 transparent;
  transition: background .15s, box-shadow .15s;
}
#booking-app .service-item:last-child { border-bottom: none; }
#booking-app .service-item:hover {
  background: #f8faff;
  box-shadow: inset 3px 0 0 var(--blue);
}
#booking-app .service-item.selected {
  background: #eff6ff;
  box-shadow: inset 3px 0 0 var(--blue);
}
#booking-app .si-icon { color: #cbd5e1; flex-shrink: 0; transition: color .15s; }
#booking-app .service-item:hover .si-icon,
#booking-app .service-item.selected .si-icon { color: var(--blue); }
#booking-app .si-body { flex: 1; min-width: 0; }
#booking-app .si-name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
#booking-app .si-desc { font-size: 12px; color: var(--muted); }
#booking-app .si-meta { text-align: right; flex-shrink: 0; }
#booking-app .si-dur { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
#booking-app .si-price { font-size: 11px; font-weight: 600; }
#booking-app .si-price.free { color: #059669; }
#booking-app .si-price.paid { color: #dc2626; }

/* ── DATE STRIP ── */
#booking-app .date-strip {
  display: flex; gap: 6px;
  overflow-x: auto; padding: 4px 2px 14px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
}
#booking-app .date-strip::-webkit-scrollbar { display: none; }
#booking-app .date-chip {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 46px; padding: 9px 4px 7px;
  border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--card); cursor: pointer;
  transition: border-color .12s, background .12s, opacity .15s;
  position: relative;
}
#booking-app .date-chip .dc-dow { font-size: 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
#booking-app .date-chip .dc-num { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.1; }
#booking-app .date-chip .dc-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; transition: background .2s; margin-top: 1px; }
#booking-app .date-chip.has-slots .dc-dot { background: #22c55e; }
#booking-app .date-chip.no-slots .dc-dot { background: #e2e8f0; }
#booking-app .date-chip.today .dc-dow { color: var(--blue); }
#booking-app .date-chip.today .dc-num { color: var(--blue); }
#booking-app .date-chip.selected { background: var(--blue); border-color: var(--blue); }
#booking-app .date-chip.selected .dc-dow,
#booking-app .date-chip.selected .dc-num { color: #fff; }
#booking-app .date-chip.selected .dc-dot { background: rgba(255,255,255, #booking-app .5); }
#booking-app .date-chip.disabled { opacity: .32; cursor: default; pointer-events: none; }
#booking-app .date-chip.loading { opacity: .55; }
#booking-app .date-chip:hover:not(.disabled):not(.selected) { border-color: var(--blue); }

/* ── TIME SLOTS ── */
#booking-app .time-section { margin-top: 24px; }
#booking-app .time-section h3 {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 12px;
}
#booking-app .time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#booking-app .time-btn {
  padding: 9px 4px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--card);
  font-size: 13px; font-weight: 500; color: var(--body);
  cursor: pointer; text-align: center; transition: .12s;
}
#booking-app .time-btn:hover { border-color: var(--blue); color: var(--blue); background: #f8faff; }
#booking-app .time-btn.selected { background: var(--blue); border-color: var(--blue); color: #fff; }
#booking-app .time-empty { font-size: 13px; color: var(--muted); padding: 16px 0; text-align: center; }

/* ── FORM FIELDS ── */
#booking-app .field-group { margin-bottom: 16px; }
#booking-app .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#booking-app label {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--muted); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .06em;
}
#booking-app label .req { color: #dc2626; margin-left: 2px; }
#booking-app input, textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 15px; font-family: inherit; color: var(--ink);
  background: var(--card); outline: none; transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
#booking-app input:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,115,232,.08);
}
#booking-app textarea { resize: vertical; min-height: 88px; }

/* ── SUMMARY (panel3 + success) ── */
#booking-app .summary-card {
  background: #f8faff;
  border-left: 3px solid var(--blue);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin-bottom: 24px;
}
#booking-app .summary-row {
  display: flex; align-items: flex-start;
  gap: 10px; margin-bottom: 8px;
}
#booking-app .summary-row:last-child { margin-bottom: 0; }
#booking-app .summary-icon { flex-shrink: 0; color: var(--muted); margin-top: 2px; }
#booking-app .summary-text strong { font-size: 14px; font-weight: 600; color: var(--ink); display: block; }
#booking-app .summary-text span { font-size: 12px; color: var(--muted); }

/* ── PANEL2 BADGE ── */
#booking-app .p2-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 100px;
  background: #eff6ff; color: var(--blue); font-weight: 600;
}

/* ── TRUST BOTTOM (panel 3, above button) ── */
#booking-app .trust-bottom {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 0 14px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
#booking-app .trust-bottom-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
#booking-app .trust-bottom-text {
  font-size: 12px; color: var(--muted); line-height: 1.5; flex: 1;
}
#booking-app .trust-bottom-text strong { color: var(--body); font-weight: 600; display: block; }
#booking-app .trust-bottom-badge { flex-shrink: 0; }
#booking-app .trust-bottom-badge img { height: 45px; }

/* ── BUTTONS ── */
#booking-app .btn-primary {
  width: 100%; padding: 14px;
  background: var(--blue); color: #fff;
  border: none; border-radius: 10px;
  font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background .15s, box-shadow .15s;
  font-family: inherit; letter-spacing: .01em;
}
#booking-app .btn-primary:hover:not(:disabled) {
  background: var(--blue-dk);
  box-shadow: 0 4px 16px rgba(26,115,232,.3);
}
#booking-app .btn-primary:disabled { background: #e2e8f0; color: var(--muted); cursor: default; }
#booking-app .btn-back {
  background: none; border: none;
  padding: 10px 16px;
  font-size: 13px; color: var(--muted); cursor: pointer;
  font-family: inherit; transition: color .15s;
}
#booking-app .btn-back:hover { color: var(--blue); }

/* ── PRIVACY ── */
#booking-app .privacy-note {
  text-align: center; font-size: 11px; color: var(--muted);
  margin-top: 10px; line-height: 1.5;
}

/* ── SUCCESS ── */
#booking-app .success-screen { text-align: center; padding: 48px 28px; }
#booking-app .success-icon {
  width: 64px; height: 64px; background: #ecfdf5; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
}
#booking-app .success-screen h2 {
  font-family: 'Google Sans', sans-serif;
  font-size: 22px; font-weight: 600; color: var(--ink); margin-bottom: 8px;
}
#booking-app .success-screen p { font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 300px; margin: 0 auto; }

/* ── PANELS ── */
#booking-app .panel { display: none; }
#booking-app .panel.active { display: block; }

/* ── LOADING ── */
#booking-app .loading { display: flex; gap: 6px; justify-content: center; padding: 20px 0; }
#booking-app .loading span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); animation: bounce .8s infinite alternate;
}
#booking-app .loading span:nth-child(2) { animation-delay: .15s; }
#booking-app .loading span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { to { transform: translateY(-6px); opacity: .4; } }

@media (max-width: 400px) {
  #booking-app .time-grid { grid-template-columns: repeat(3, 1fr); }
  #booking-app .field-row { grid-template-columns: 1fr; }
  #booking-app .card { padding: 20px; }
  #booking-app .service-list { margin: 0 -20px; }
  #booking-app .service-item { padding: 14px 20px; }
}