/* =========================================================
   WB Appointment Scheduler – Frontend Styles
   Design: Clean-modern, dark accents, smooth transitions
   ========================================================= */

:root {
  --wb-bg:          rgba(255, 255, 255, 0.&);
  --wb-bg-soft:     rgba(255, 255, 255, 0.2);
  --wb-border:      rgba(255, 255, 255, 0.1);
  --wb-ink:         #0099ff;
  --wb-ink-soft:    #eeeeee;
  --wb-accent:      #225FD4;
  --wb-accent-hover:#575d70;
  --wb-success:     #059669;
  --wb-error:       #dc2626;
  --wb-radius:      12px;
  --wb-radius-sm:   8px;
  --wb-shadow:      0 8px 32px rgba(0, 0, 0, 0.4);
  --wb-trans:       .22s cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper ─────────────────────────────────────────────── */
.wb-apt-wrap {
  max-width: 680px;
  margin: 0 auto;
  color: var(--wb-ink);
  position: relative;
}

/* ── Step indicator ──────────────────────────────────────── */
.wb-apt-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 40px;
  padding: 0 4px;
}
.wb-apt-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  opacity: .35;
  transition: opacity var(--wb-trans);
}
.wb-apt-step.active,
.wb-apt-step.done { opacity: 1; }
.wb-apt-step__num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--wb-border);
  color: var(--wb-ink-soft);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--wb-trans), color var(--wb-trans);
}
.wb-apt-step.active .wb-apt-step__num {
  background: var(--wb-accent);
  color: #fff;
}
.wb-apt-step.done .wb-apt-step__num {
  background: var(--wb-success);
  color: #fff;
}
.wb-apt-step__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wb-ink-soft);
  white-space: nowrap;
}
.wb-apt-step.active .wb-apt-step__label { color: var(--wb-ink); }
.wb-apt-step-line {
  flex: 1;
  height: 2px;
  background: var(--wb-border);
  margin: 0 8px;
  margin-bottom: 18px;
  transition: background var(--wb-trans);
}

/* ── Panels ──────────────────────────────────────────────── */
.wb-apt-panel {
  display: none;
  animation: wb-fadein .3s ease;
}
.wb-apt-panel.active { display: block; }

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

.wb-apt-panel__title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.5px;
  margin: 0 0 6px;
  color: var(--wb-ink);
}
.wb-apt-panel__sub {
  color: var(--wb-ink-soft);
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.5;
}

/* ── Service cards ───────────────────────────────────────── */
.wb-apt-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.wb-apt-service-card {
  background: var(--wb-bg-soft);
  border: 2px solid var(--wb-border);
  border-radius: var(--wb-radius);
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: border-color var(--wb-trans), box-shadow var(--wb-trans), transform var(--wb-trans);
}
.wb-apt-service-card:hover {
  border-color: var(--wb-accent);
  box-shadow: var(--wb-shadow);
  transform: translateY(-2px);
}
.wb-apt-service-card.selected {
  border-color: var(--wb-accent);
  background: var(--wb-accent);
  color: #fff;
}
.wb-apt-service-card__icon { font-size: 28px; line-height: 1; }
.wb-apt-service-card__title { font-size: 16px; font-weight: 700; color: #fff;}
.wb-apt-service-card__meta  { font-size: 12px; opacity: .7; }

/* ── Note field ──────────────────────────────────────────── */
.wb-apt-note-field {
  margin-bottom: 24px;
  animation: wb-fadein .25s ease;
}
.wb-apt-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--wb-ink);
}
.wb-apt-required { color: var(--wb-error); }
.wb-apt-textarea,
.wb-apt-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--wb-border);
  border-radius: var(--wb-radius-sm);
  font-size: 15px;
  color: var(--wb-ink);
  background: #fff;
  box-sizing: border-box;
  transition: border-color var(--wb-trans), box-shadow var(--wb-trans);
  font-family: inherit;
}
.wb-apt-textarea:focus,
.wb-apt-input:focus {
  outline: none;
  border-color: var(--wb-accent);
  box-shadow: 0 0 0 3px rgba(17,24,39,.1);
}
.wb-apt-textarea { resize: vertical; }
.wb-apt-char-count { font-size: 12px; color: var(--wb-ink-soft); display: block; text-align: right; margin-top: 4px; }

/* ── Calendar ────────────────────────────────────────────── */
.wb-apt-calendar-wrap {
  background: var(--wb-bg-soft);
  border: 1.5px solid var(--wb-border);
  border-radius: var(--wb-radius);
  padding: 20px;
  margin-bottom: 24px;
}
.wb-apt-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.wb-apt-cal-month {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.3px;
}
.wb-apt-cal-nav {
  background: none;
  border: 1.5px solid var(--wb-border);
  border-radius: 6px;
  width: 34px; height: 34px;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--wb-trans), border-color var(--wb-trans);
}
.wb-apt-cal-nav:hover:not(:disabled) {
  background: var(--wb-accent);
  color: #fff;
  border-color: var(--wb-accent);
}
.wb-apt-cal-nav:disabled { opacity: .35; cursor: not-allowed; }

.wb-apt-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.wb-apt-cal-days span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wb-ink-soft);
  padding: 4px 0;
}
.wb-apt-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.wb-apt-cal-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--wb-trans), border-color var(--wb-trans), color var(--wb-trans);
  background: #061B40;
  user-select: none;
}
.wb-apt-cal-day:hover:not(.disabled):not(.empty) {
  border-color: var(--wb-accent);
  background: var(--wb-accent);
  color: #fff;
}
.wb-apt-cal-day.selected {
  background: var(--wb-accent);
  color: #fff;
  border-color: var(--wb-accent);
  font-weight: 700;
}
.wb-apt-cal-day.today { border-color: var(--wb-accent); }
.wb-apt-cal-day.disabled {
  color: var(--wb-border);
  cursor: not-allowed;
  background: transparent;
}
.wb-apt-cal-day.empty { background: transparent; cursor: default; }

/* ── Time slots ──────────────────────────────────────────── */
.wb-apt-slots-wrap {
  margin-bottom: 24px;
  animation: wb-fadein .25s ease;
}
.wb-apt-slots-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--wb-ink);
}
.wb-apt-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
.wb-apt-slot {
  padding: 10px 6px;
  border-radius: var(--wb-radius-sm);
  border: 1.5px solid var(--wb-border);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #061B40;
  transition: all var(--wb-trans);
}
.wb-apt-slot:hover:not(.unavailable) {
  border-color: var(--wb-accent);
  background: var(--wb-accent);
  color: #fff;
  transform: translateY(-1px);
}
.wb-apt-slot.selected {
  background: var(--wb-accent);
  color: #fff;
  border-color: var(--wb-accent);
}
.wb-apt-slot.unavailable {
  color: var(--wb-border);
  cursor: not-allowed;
  text-decoration: line-through;
}
.wb-apt-slots-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
  color: var(--wb-ink-soft);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}

/* ── Spinner ─────────────────────────────────────────────── */
.wb-apt-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--wb-border);
  border-top-color: var(--wb-accent);
  border-radius: 50%;
  animation: wb-spin .7s linear infinite;
  display: inline-block;
}
.wb-apt-spinner--btn {
  border-top-color: #fff;
  border-color: rgba(255,255,255,.3);
}
@keyframes wb-spin { to { transform: rotate(360deg); } }

/* ── Form grid ───────────────────────────────────────────── */
.wb-apt-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.wb-apt-field { display: flex; flex-direction: column; }
.wb-apt-field--full { grid-column: 1 / -1; }

/* ── Summary box ─────────────────────────────────────────── */
.wb-apt-summary {
  background: var(--wb-bg-soft);
  border: 1.5px solid var(--wb-border);
  border-radius: var(--wb-radius);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.wb-apt-summary__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wb-ink-soft);
  margin: 0 0 14px;
}
.wb-apt-summary__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wb-apt-summary__list li {
  display: flex;
  gap: 10px;
  font-size: 14px;
}
.wb-apt-summary__list li span:first-child {
  color: var(--wb-ink-soft);
  min-width: 120px;
  flex-shrink: 0;
}
.wb-apt-summary__list li span:last-child {
  font-weight: 600;
}

/* ── GDPR checkbox ───────────────────────────────────────── */
.wb-apt-gdpr { margin-bottom: 24px; }
.wb-apt-checkbox-wrap {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}
.wb-apt-checkbox-wrap input[type="checkbox"] { display: none; }
.wb-apt-checkbox-box {
  width: 20px; height: 20px;
  min-width: 20px;
  border: 2px solid var(--wb-border);
  border-radius: 5px;
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--wb-trans);
  background: #fff;
}
.wb-apt-checkbox-wrap input:checked + .wb-apt-checkbox-box {
  background: var(--wb-accent);
  border-color: var(--wb-accent);
}
.wb-apt-checkbox-wrap input:checked + .wb-apt-checkbox-box::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
.wb-apt-checkbox-label { font-size: 14px; line-height: 1.6; color: var(--wb-ink-soft); }
.wb-apt-checkbox-label a { color: var(--wb-accent); }

/* ── Buttons ─────────────────────────────────────────────── */
.wb-apt-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}
.wb-apt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--wb-radius-sm);
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all var(--wb-trans);
  font-family: inherit;
}
.wb-apt-btn--next,
.wb-apt-btn--submit {
  background: var(--wb-accent);
  color: #fff;
}
.wb-apt-btn--next:hover:not(:disabled),
.wb-apt-btn--submit:hover {
  background: var(--wb-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.wb-apt-btn--next:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.wb-apt-btn--back {
  background: transparent;
  color: var(--wb-ink-soft);
  border: 1.5px solid var(--wb-border);
}
.wb-apt-btn--back:hover {
  background: var(--wb-bg-soft);
  border-color: var(--wb-ink-soft);
}
.wb-apt-btn__arrow { transition: transform var(--wb-trans); }
.wb-apt-btn--next:not(:disabled):hover .wb-apt-btn__arrow { transform: translateX(3px); }

/* ── Success panel ───────────────────────────────────────── */
.wb-apt-panel--success { text-align: center; padding: 40px 20px; }
.wb-apt-success-icon {
  width: 72px; height: 72px;
  background: var(--wb-success);
  color: #fff;
  border-radius: 50%;
  font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  animation: wb-pop .4s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes wb-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.wb-apt-success-msg {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}
.wb-apt-success-sub { color: var(--wb-ink-soft); font-size: 14px; margin-bottom: 32px; }

/* ── Error bar ───────────────────────────────────────────── */
.wb-apt-error-bar {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  border-radius: var(--wb-radius-sm);
  color: var(--wb-error);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 16px;
  animation: wb-fadein .2s ease;
}

/* ── Legal note ──────────────────────────────────────────── */
.wb-apt-legal-note {
  color: var(--wb-ink-soft);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 16px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 520px) {
  .wb-apt-form-grid { grid-template-columns: 1fr; }
  .wb-apt-field--full { grid-column: 1; }
  .wb-apt-step__label { display: none; }
  .wb-apt-panel__title { font-size: 20px; }
  .wb-apt-actions { flex-direction: column-reverse; }
  .wb-apt-btn { width: 100%; justify-content: center; }
}