@import url('brand.css');

/* Rezervacija — full-page booking studio */
.rez-page {
  min-height: 100vh; background: var(--mist); padding: 5rem 1rem 3rem;
}
.rez-layout {
  display: grid; gap: 2rem; max-width: 56rem; margin: 0 auto;
}
@media (min-width: 900px) {
  .rez-layout { grid-template-columns: 11rem 1fr; align-items: start; }
}

.rez-stepper { display: none; }
@media (min-width: 900px) {
  .rez-stepper {
    display: flex; flex-direction: column; gap: 0; position: sticky; top: 6rem;
  }
}
.rez-stepper__item {
  display: flex; align-items: flex-start; gap: 0.75rem; padding-bottom: 2rem; position: relative;
}
.rez-stepper__item:not(:last-child)::after {
  content: ''; position: absolute; left: 0.9rem; top: 2rem; bottom: 0; width: 2px;
  background: rgba(10,10,10,0.1);
}
.rez-stepper__item.is-done:not(:last-child)::after { background: var(--bronze); }
.rez-stepper__dot {
  width: 1.75rem; height: 1.75rem; flex-shrink: 0; border-radius: 50%;
  border: 2px solid rgba(10,10,10,0.15); display: flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 700; background: var(--paper); z-index: 1;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.rez-stepper__item.is-active .rez-stepper__dot,
.rez-stepper__item.is-done .rez-stepper__dot { border-color: var(--bronze); background: var(--bronze); color: var(--ink); }
.rez-stepper__label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 0.35rem; }
.rez-stepper__item.is-active .rez-stepper__label { color: var(--ink); }

.rez-progress-mobile {
  display: flex; gap: 0.25rem; margin-bottom: 1.5rem;
}
@media (min-width: 900px) { .rez-progress-mobile { display: none; } }
.rez-progress-mobile__seg { flex: 1; height: 3px; background: rgba(10,10,10,0.1); border-radius: 2px; transition: background var(--transition); }
.rez-progress-mobile__seg.is-active, .rez-progress-mobile__seg.is-done { background: var(--bronze); }

.rez-panel {
  background: var(--paper); border-radius: 0.5rem; padding: 2rem 1.5rem;
  box-shadow: var(--shadow-card); min-height: 24rem;
}
@media (min-width: 768px) { .rez-panel { padding: 2.5rem; } }
.rez-panel__title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
.rez-panel__sub { font-size: 0.875rem; color: var(--muted); margin-bottom: 1.5rem; }

.rez-step { display: none; animation: rezSlide 0.35s ease; }
.rez-step.is-active { display: block; }
@keyframes rezSlide { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }

.rez-select {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem; margin-bottom: 0.5rem;
  border: 1px solid rgba(10,10,10,0.1); border-radius: 0.375rem; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.rez-select:hover { border-color: var(--bronze); }
.rez-select.is-selected { border-color: var(--bronze); background: rgba(176,141,87,0.08); }
.rez-select__av { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--mist); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; }
.rez-select.is-selected .rez-select__av { background: var(--bronze); }

.rez-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
.rez-cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; border: none; border-radius: 0.25rem; background: transparent; cursor: pointer;
}
.rez-cal-day:hover:not(:disabled) { background: var(--mist); }
.rez-cal-day.is-selected { background: var(--bronze); font-weight: 600; }
.rez-cal-day:disabled { opacity: 0.35; cursor: not-allowed; }

.rez-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 1rem; }
.rez-time {
  padding: 0.5rem; font-size: 0.8125rem; text-align: center; border: 1px solid rgba(10,10,10,0.12);
  border-radius: 0.25rem; background: var(--paper); cursor: pointer;
}
.rez-time.is-selected { background: var(--bronze); border-color: var(--bronze); }
.rez-time:disabled { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }

.rez-auth-tabs { display: flex; border-bottom: 1px solid var(--mist); margin-bottom: 1.25rem; }
.rez-auth-tab {
  flex: 1; padding: 0.75rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); cursor: pointer;
}
.rez-auth-tab.is-active { color: var(--bronze); border-bottom-color: var(--bronze); }

.rez-field { margin-bottom: 1.25rem; }
.rez-field label { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.375rem; }
.rez-field input {
  width: 100%; padding: 0.75rem 0; border: none; border-bottom: 2px solid rgba(10,10,10,0.12);
  font-size: 1rem; background: transparent; font-family: var(--font-sans);
}
.rez-field input:focus { outline: none; border-bottom-color: var(--bronze); }
.rez-field input.is-error { border-bottom-color: var(--error); }
.rez-field__err { font-size: 0.75rem; color: var(--error); margin-top: 0.25rem; }

.rez-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.rez-actions .btn-bronze, .rez-actions .btn-outline-bronze { flex: 1; }

.rez-loading, .rez-done { display: none; text-align: center; padding: 3rem 1rem; }
.rez-loading.is-visible, .rez-done.is-visible { display: block; }
.rez-spinner {
  width: 2.5rem; height: 2.5rem; margin: 0 auto 1rem; border: 3px solid var(--mist);
  border-top-color: var(--bronze); border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.rez-done__check {
  width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 50%;
  background: rgba(176,141,87,0.15); color: var(--bronze); font-size: 2rem;
  display: flex; align-items: center; justify-content: center;
}
.rez-chip { display: inline-block; padding: 0.35rem 0.75rem; background: rgba(176,141,87,0.15); border: 1px solid var(--bronze); border-radius: 9999px; font-size: 0.8125rem; margin-bottom: 1rem; }
.rez-subchips span {
  display: inline-block; padding: 0.2rem 0.6rem; margin: 0.15rem; font-size: 0.625rem;
  background: var(--mist); border-radius: 9999px; cursor: pointer;
}
.rez-subchips span.is-selected { background: rgba(176,141,87,0.25); }