/* extra.css — dopuna postojećem style.css / base.css. Ne mijenja ništa u njima. */

/* ---------- Adresa ispod naslova lokacije (ako se koristi) ---------- */
.addr {
  font-style: normal;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  display: block;
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 70ch;
  margin-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
}
.faq-item {
  border-bottom: 1px solid var(--color-divider);
}
.faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) var(--space-8) var(--space-4) 0;
  font-weight: 600;
  position: relative;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em; line-height: 1;
  color: var(--color-gold);
  transition: transform .2s ease;
}
.faq-item[open] > summary::after { content: "\2212"; }
.faq-item > summary:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}
.faq-answer {
  padding: 0 var(--space-8) var(--space-5) 0;
  color: var(--color-text-muted);
}

/* ---------- Karta iza pristanka ---------- */
.map-consent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  min-height: 300px;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
}
.map-consent p { margin: 0; color: var(--color-text-muted); max-width: 46ch; }
.map-consent iframe { border-radius: var(--radius-lg); }
.map-alt { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Bedz zahvale: zastave kao slike (izbjegava problem s emoji zastavama na Windowsu) ---------- */
.flag-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  margin-left: 2px;
}
.flag-icons img {
  display: block;
  height: 12px;
  width: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.12);
}

/* ---------- Recenzije: vodoravna scroll traka dodatnih citata ---------- */
.quote-scroll-hint {
  margin: var(--space-8) 0 0;
  text-align: right;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.quote-grid {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-3);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.quote-grid::-webkit-scrollbar { height: 8px; }
.quote-grid::-webkit-scrollbar-track { background: transparent; }
.quote-grid::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }
.quote-card {
  flex: 0 0 auto;
  width: min(85vw, 340px);
  scroll-snap-align: start;
  margin: 0;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.quote-card p {
  font-family: var(--font-display);
  margin-bottom: var(--space-3);
}
.quote-card cite { font-style: normal; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- Cijena na upit ---------- */
.price-note--standalone {
  color: oklch(1 0 0 / 0.82);
  margin-top: var(--space-4);
  max-width: 52ch;
  margin-inline: auto;
  font-size: var(--text-sm);
}

/* ---------- Izravna rezervacija - istaknuta ---------- */
.direct-book--primary {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gold);
}

/* ---------- Booking.com kao sekundarna opcija ---------- */
.ota-fallback {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid oklch(1 0 0 / 0.18);
  font-size: var(--text-sm);
  opacity: .85;
}
.ota-fallback p { margin-bottom: var(--space-3); }
.ota-fallback .btn--ghost {
  color: #fff;
  border-color: oklch(1 0 0 / 0.4);
}
.ota-fallback .btn--ghost:hover {
  background: oklch(1 0 0 / 0.1);
  border-color: oklch(1 0 0 / 0.7);
  color: #fff;
}

/* ---------- More: glavna fotografija lijevo, tekst + druga fotografija desno ---------- */
.sea-photo-main img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  display: block;
}
.sea-photo-secondary {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  display: block;
  margin-top: var(--space-6);
}
@media (min-width: 861px) {
  .sea-split {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: stretch;
  }
  .sea-photo-main {
    height: 100%;
  }
  .sea-photo-main img {
    height: 100%;
    object-fit: cover;
  }
}

/* ---------- Dolazak ---------- */
.arrival-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-8);
  margin-top: var(--space-8);
}
.arrival-grid h3 {
  font-family: var(--font-display);
  margin-bottom: var(--space-3);
}
.arrival-grid p { color: var(--color-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .faq-item > summary::after { transition: none; }
}

/* Social: hero */
.hero-social{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-5);color:#fff;font-weight:600;font-size:var(--text-sm)}
.hsoc{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;color:#fff;box-shadow:0 4px 14px rgb(0 0 0/.3);transition:transform .2s}
.hsoc:hover,.hsoc:focus-visible{transform:translateY(-2px) scale(1.06)}
.hsoc--ig,.sbtn--ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.hsoc--tt,.sbtn--tt{background:#000;box-shadow:-2px -2px 0 #25F4EE inset,2px 2px 0 #FE2C55 inset,0 4px 14px rgb(0 0 0/.3)}
.hsoc:focus-visible,.sbtn:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* Social: band */
.social-band{padding-block:var(--space-12)}
.social-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap;padding:var(--space-8);border-radius:24px;background:var(--color-surface-offset);border:1px solid var(--color-divider)}
.social-card>div:first-child{flex:1 1 320px}
.social-btns{display:flex;flex-direction:column;gap:var(--space-3);flex:0 1 300px;width:100%}
.sbtn{display:flex;align-items:center;gap:var(--space-3);padding:14px 20px;border-radius:14px;color:#fff;text-decoration:none;min-height:60px;transition:transform .2s,box-shadow .2s;box-shadow:0 6px 18px rgb(0 0 0/.18)}
.sbtn svg{width:28px;height:28px;flex:none}
.sbtn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgb(0 0 0/.25)}
.sbtn-txt{display:flex;flex-direction:column;line-height:1.2}
.sbtn-txt strong{font-size:1.05rem}
.sbtn-txt small{opacity:.9;font-size:.85rem}
@media (max-width:600px){.social-card{padding:var(--space-6)}.social-btns{flex-basis:100%}}
.sbtn--ig{background:linear-gradient(90deg,#833AB4 0%,#C13584 45%,#E1306C 75%,#F56040 100%)}
.sbtn-txt strong,.sbtn-txt small{text-shadow:0 1px 2px rgb(0 0 0/.25)}

/* ---------- Kalendar dostupnosti ---------- */
.avail-lead { max-width: 60ch; margin-top: var(--space-3); color: var(--color-text-muted); }
.avail {
  --av-free: #e3f1e4;
  --av-free-text: #1f4d2a;
  --av-busy: var(--color-accent);
  --av-sel: var(--color-primary);
  margin-top: var(--space-8);
  padding: clamp(var(--space-4), 3vw, var(--space-8));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .avail { --av-free: #23392a; --av-free-text: #cfe8d3; }
.avail-months {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 1100px) { .avail-months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .avail-months {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    margin-inline: calc(-1 * var(--space-2));
    padding-inline: var(--space-2);
  }
  .avail-month { flex: 0 0 86%; scroll-snap-align: center; }
}
.avail-month h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
  text-align: center;
}
.avail-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.avail-dow {
  font-size: 11px; font-weight: 600; text-align: center;
  color: var(--color-text-muted); padding-bottom: 4px;
}
.avail-dow.is-we { color: var(--color-gold); }
.avail-day {
  aspect-ratio: 1 / 1;
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--av-free);
  color: var(--av-free-text);
  transition: transform .12s ease, box-shadow .12s ease;
}
.avail-day:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--av-sel); }
.avail-day:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 1px; }
.avail-day.is-busy {
  background: var(--av-busy); color: #fff; cursor: not-allowed;
  text-decoration: line-through; text-decoration-color: rgba(255,255,255,.6);
}
/* pola-pola: dan kad netko odlazi (jutro zauzeto) ili dolazi (popodne zauzeto) */
.avail-day.is-busy-am { background: linear-gradient(135deg, var(--av-busy) 50%, var(--av-free) 50%); }
.avail-day.is-busy-pm { background: linear-gradient(135deg, var(--av-free) 50%, var(--av-busy) 50%); }
.avail-day.is-past { opacity: .35; cursor: default; }
.avail-day.is-in { background: color-mix(in oklab, var(--av-sel) 22%, var(--av-free)); color: var(--av-free-text); }
.avail-day.is-start, .avail-day.is-end { background: var(--av-sel); color: #fff; }
.avail-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  justify-content: center;
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.avail-legend span { display: inline-flex; align-items: center; gap: 8px; }
.lg { width: 16px; height: 16px; border-radius: 4px; display: inline-block; }
.lg--free { background: var(--av-free); border: 1px solid color-mix(in oklab, var(--av-free-text) 25%, transparent); }
.lg--busy { background: var(--av-busy); }
.lg--sel { background: var(--av-sel); }
.avail-bar {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  text-align: center;
}
.avail-min {
  display: inline-block;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gold);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.avail-status { margin-top: var(--space-3); font-size: var(--text-base); font-weight: 600; min-height: 1.5em; }
.avail-status.is-warn { color: var(--color-accent); }
.avail-go { margin-top: var(--space-4); }
.avail-go:not(.is-ready) { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); box-shadow: none; }
[data-theme="dark"] .avail-day.is-start, [data-theme="dark"] .avail-day.is-end, [data-theme="dark"] .avail-day.is-busy { color: #10181a; }
.avail-bar p { margin-inline: auto; max-width: none; }
.avail-go { white-space: normal; max-width: 100%; }
@media (max-width: 640px) { .avail-go { display: block; width: 100%; padding-inline: var(--space-4); } }
.avail-swipe { display: none; }
@media (max-width: 640px) {
  .avail-month { flex: 0 0 100%; }
  .avail-swipe { display: block; text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
}

/* ---------- Park prirode + kućni red ---------- */
.hero-badge--park { border-color: #7fbf8a !important; }
.park-note {
  margin-top: var(--space-4);
  max-width: 62ch;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-success);
  background: color-mix(in oklab, var(--color-success) 9%, transparent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-text);
}
.house-rule {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--color-gold) 10%, var(--color-surface));
}
.house-rule-icon { font-size: 1.6rem; line-height: 1; margin-top: 2px; }
.house-rule-title { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); }
.house-rule p { margin-top: var(--space-1); color: var(--color-text-muted); max-width: 70ch; }
.house-rule p strong { color: var(--color-text); }
.direct-rule {
  margin-top: var(--space-3) !important;
  font-weight: 600;
  color: var(--color-gold) !important;
}
.avail-day.is-loading { opacity: .55; cursor: progress; }

/* ---------- Uski mobiteli: dugi gumbi se lome u dva reda umjesto da izlaze iz ekrana ---------- */
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}