/* Rezervacija – samo stil; forma i JS ostaju netaknuti */
/* Ako već imaš .container u styles.css, slobodno izbriši prvu liniju: */
.container { max-width: 1100px; margin-inline: auto; padding-inline: 16px }

/* HERO */
.hero--rez {
  position: relative; min-height: 34vh; display: grid; place-items: center; overflow: hidden; background: #000;
}
.hero--rez .hero__bg { position: absolute; inset: 0; background: center/cover no-repeat; filter: brightness(.55) }
.hero--rez .hero__content { position: relative; z-index: 1; color: #fff; text-align: center }
.hero--rez h1 { font-family: Sora, Inter; font-size: clamp(30px, 3.6vw, 48px); margin: 0 0 8px }
.hero--rez p { margin: 0; opacity: .95 }

/* CARD */
.rez-card{
  margin: 26px auto 40px; width: min(100%, 720px);
  background: #fff; border-radius: 18px; box-shadow: var(--shadow, 0 10px 24px rgba(10,22,50,.08));
  padding: 18px;
}
.rez-title{
  margin: 0 0 8px; font-family: Sora, Inter; font-size: 22px; color: var(--blue-900, #0b2a5b); text-align: center;
}

/* FORM */
#reservationForm{
  display: grid; gap: 12px;
}
#reservationForm label{
  font-size: 13px; color: var(--muted, #55657a); font-weight: 600; letter-spacing: .02em;
}
#reservationForm input,
#reservationForm select{
  width: 100%; padding: 12px 14px; border: 1px solid rgba(10,22,50,.12);
  border-radius: 12px; font-size: 15px; background: #fafbfd;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#reservationForm input:focus,
#reservationForm select:focus{
  outline: none; border-color: var(--burgundy, #8c1c32);
  box-shadow: 0 0 0 4px rgba(140,28,50,.1); background: #fff;
}

/* Checkbox redovi */
#reservationForm .check{
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted, #55657a);
}
#reservationForm .check a{ color: var(--burgundy, #8c1c32); font-weight: 700; text-decoration: none }
#reservationForm .check a:hover{ text-decoration: underline }
#reservationForm input[type="checkbox"]{ width: auto }

/* Dugme submit – koristi tvoj .btn iz styles.css */
.btn--wide{ width: 100%; justify-content: center; margin-top: 6px }

/* Link nazad */
.rez-back{ display: grid; justify-items: center; margin-top: 6px }
.btn--ghost-dark{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px; font-weight:700; text-decoration:none;
  border: 2px solid rgba(10,22,50,.3); color: var(--blue-900, #0b2a5b);
}
.btn--ghost-dark:hover{ background: rgba(10,22,50,.06) }

/* Responsive */
@media (max-width: 720px){
  .rez-card{ margin: 18px auto 26px; padding: 16px }
}