/* Apartmani Smilje: white stone, Adriatic blue and lavender. Light only. */
:root {
  --bg: #f6f9fc;
  --surface: #ffffff;
  --ink: #10324a;
  --muted: #4a6275;
  --line: #d6e3ee;
  --accent: #1a6f8f;
  --on-accent: #ffffff;
  --band: #10324a;
  --on-band: #ffffff;
  --lavender: #6f5fa6;
  --error: #b3261e;
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --radius: 999px;
  --radius-lg: 18px;
  --radius-field: 12px;
}

/* The browser's default placeholder grey is only 4.6:1 on the white field; pinned so it cannot change. */
.field ::placeholder { color: var(--muted); opacity: 1; }

.facts b { font-family: var(--font-head); font-size: 1.15rem; }
.amenities { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 6px 4px; }
.amenities li { padding: 3px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); font-size: 0.82rem; font-weight: 600; }
.apt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }

.prices { background: var(--surface); border-block: 1px solid var(--line); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.rates { width: 100%; min-width: 480px; border-collapse: collapse; background: var(--surface); font-variant-numeric: tabular-nums; }
.rates th, .rates td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.rates thead th { background: var(--band); color: var(--on-band); font-size: 0.88rem; }
.rates tbody tr:last-child > * { border-bottom: 0; }
.notes { display: grid; gap: 6px; margin-top: 16px; color: var(--muted); }
.notes li::before { content: "·"; margin-right: 8px; color: var(--lavender); font-weight: 700; }

.surroundings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.surroundings img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.surroundings figcaption { margin-top: 8px; color: var(--muted); }
.distances { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; color: var(--muted); }

.estimate { display: block; padding: 14px 16px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); font-weight: 600; }
.estimate.is-ready { border-color: var(--lavender); box-shadow: inset 4px 0 0 var(--lavender); }

@media (max-width: 900px) {
  /* "Apartmani Smilje", the menu and "Provjerite dostupnost" share one row only from about 860 px up (900 leaves some room),
     and the logo and the button never fit side by side on a phone.
     The hero repeats the same button right below the header, and "Upit" stays in the menu. */
  .site-head .btn { display: none; }
}
@media (max-width: 760px) {
  .surroundings { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  /* A 480 px minimum would push the July and August prices out of sight on a phone. */
  .rates { min-width: 0; }
  .rates th, .rates td { padding: 12px 10px; }
}