/* =====================================================================
   Pretraga
   ===================================================================== */

.search-top { padding: 22px 0; background: var(--paper-warm); border-bottom: 1px solid var(--ink-100); }
.search-form.is-compact { box-shadow: var(--shadow-sm); }

/* Pretraga se namerno ne uklapa u `.wrap` od 1240px nego ide do ivica.
   Sadržaj je ovde alat, a ne tekst za čitanje: tri kolone — filteri,
   rezultati, mapa — u kutiji se guše, a mapa u sredini strane izgleda
   kao slika umesto kao mapa. Bočni razmak raste sa širinom ekrana da
   sadržaj ne bi bio zalepljen za ivicu na velikom monitoru. */
.search-bleed {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: clamp(16px, 2.2vw, 40px);
  padding-right: clamp(16px, 2.2vw, 40px);
}

.search-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding-top: 28px;
  padding-bottom: 60px;
}

.filters { position: relative; }
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.filters-head h2 { font-size: 1.05rem; margin: 0; }
.filter-toggle { padding: 8px 16px; border: 1.5px solid var(--ink-100); border-radius: 999px; background: none; font-weight: 700; font-size: .85rem; cursor: pointer; }

.filter-panel { display: grid; gap: 20px; }
.filter-block { padding-bottom: 18px; border-bottom: 1px solid var(--paper-sunk); }
.filter-block:last-of-type { border-bottom: 0; }
.filter-title { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-300); margin: 0 0 10px; }

.check, .radio { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; font-size: .91rem; cursor: pointer; color: var(--ink-700); }
.check input, .radio input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--green-700); flex-shrink: 0; }
.check:hover, .radio:hover { color: var(--ink-900); }

.filter-range { display: flex; align-items: center; gap: 7px; }
.filter-range input { width: 100%; min-width: 0; padding: 9px 10px; border: 1.5px solid var(--ink-100); border-radius: var(--radius-sm); }
.filter-block select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--ink-100); border-radius: var(--radius-sm); font-weight: 600; }
.filter-reset { display: inline-block; margin-top: 6px; font-size: .87rem; font-weight: 700; }

.results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.results-title { font-size: clamp(1.35rem, 3vw, 1.9rem); margin-bottom: 4px; }
.results-count { margin: 0; color: var(--ink-500); font-size: .93rem; }
.sort-form { display: flex; align-items: center; gap: 8px; font-size: .87rem; }
.sort-form label { color: var(--ink-500); font-weight: 700; }
.sort-form select { padding: 9px 12px; border: 1.5px solid var(--ink-100); border-radius: var(--radius-sm); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: var(--green-050); border: 1px solid var(--green-100); font-size: .84rem; font-weight: 700; color: var(--green-800); }
.chip:hover { background: var(--green-100); }
.chip.is-current { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.chip-clear { background: none; border-color: var(--ink-100); color: var(--ink-500); }

.grid-results { grid-template-columns: 1fr; }

.empty { text-align: center; padding: 60px 20px; background: var(--paper-warm); border-radius: var(--radius-lg); }
.empty h2 { font-size: 1.3rem; }
.empty p { color: var(--ink-500); margin-bottom: 20px; }
.empty-sm { padding: 30px 20px; }

.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 40px; }
.page { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1.5px solid var(--ink-100); border-radius: var(--radius-sm); font-weight: 700; color: var(--ink-700); }
.page:hover { border-color: var(--green-500); }
.page.is-current { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.page-dots { display: grid; place-items: center; min-width: 30px; color: var(--ink-300); }

/* =====================================================================
   Stranica objekta
   ===================================================================== */

.breadcrumbs { padding: 16px 20px 0; font-size: .83rem; color: var(--ink-300); }
.breadcrumbs a { color: var(--ink-500); font-weight: 600; }
.breadcrumbs span { color: var(--ink-700); font-weight: 700; }

.gallery { display: grid; grid-template-columns: 1fr; gap: 8px; padding-top: 16px; }
.gal-main { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/10; background: var(--paper-sunk); }
.gal-main img { width: 100%; height: 100%; object-fit: cover; }
.gal-side { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gal-cell { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/2; background: var(--paper-sunk); }
.gal-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gal-cell:hover img { transform: scale(1.06); }
.gal-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 52, 43, .62); color: #fff; font-weight: 800; font-size: .9rem; }

.fav-btn {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94);
  font-size: 1.2rem; color: var(--ink-300); cursor: pointer;
  transition: transform .16s ease, color .16s ease;
}
.fav-btn:hover { transform: scale(1.08); }
.fav-btn.is-active { color: #c0392b; }

/* minmax(0, 1fr) umesto 1fr: podrazumevani `min-width: auto` na grid koloni
   dozvoljava da je širi sadržaj (tabela cena, dugacka reč) rasiri preko
   ekrana — na telefonu se to vidi kao skrol u stranu. */
.listing-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; padding-top: 30px; padding-bottom: 60px; }
.listing-main { min-width: 0; }

.listing-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tag { padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 800; }
.tag-type { background: var(--green-100); color: var(--green-800); }
.tag-instant { background: var(--green-800); color: #fff; }
.tag-rating { background: var(--sand-100); color: var(--sand-700); }

.listing-head h1 { margin-bottom: 8px; color: var(--green-900); }
.listing-sub { font-size: 1.03rem; color: var(--ink-700); margin-bottom: 8px; }
.listing-loc { font-size: .92rem; color: var(--ink-500); margin-bottom: 20px; }

.specs { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 0; border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
.specs li { display: grid; gap: 1px; min-width: 88px; padding-right: 14px; border-right: 1px solid var(--paper-sunk); }
.specs li:last-child { border-right: 0; }
.specs strong { font-size: 1.25rem; font-weight: 800; color: var(--green-800); line-height: 1.1; }
.specs span { font-size: .79rem; color: var(--ink-500); font-weight: 600; }

.block { padding: 34px 0; border-bottom: 1px solid var(--paper-sunk); }
.block:last-child { border-bottom: 0; }
.block h2 { font-size: 1.35rem; color: var(--green-900); margin-bottom: 14px; }
.block-note { font-size: .88rem; color: var(--ink-500); margin-bottom: 16px; }

.prose p { color: var(--ink-700); line-height: 1.75; }
.prose h2 { font-size: 1.3rem; margin: 28px 0 10px; color: var(--green-900); }
.prose-list li { position: relative; padding-left: 22px; margin-bottom: 8px; color: var(--ink-700); }
.prose-list li::before { content: "—"; position: absolute; left: 0; color: var(--green-500); font-weight: 800; }

.price-group { font-size: .95rem; color: var(--ink-500); margin: 22px 0 8px; font-weight: 700; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table tr { border-bottom: 1px solid var(--paper-sunk); }
.price-table th { text-align: left; padding: 13px 12px 13px 0; font-weight: 700; font-size: .94rem; color: var(--ink-900); }
.price-table th small { display: block; font-weight: 600; font-size: .8rem; color: var(--ink-300); margin-top: 2px; }
.price-table td { text-align: right; padding: 13px 0; font-weight: 800; font-size: 1.02rem; color: var(--green-800); white-space: nowrap; }
.price-table td small { font-weight: 600; font-size: .78rem; color: var(--ink-500); }
.price-badge { display: inline-block; margin-right: 8px; padding: 3px 9px; border-radius: 999px; background: var(--sand-500); color: #26200f; font-size: .7rem; font-weight: 800; }

.amenity-group { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-300); margin: 20px 0 10px; }
.amenity-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; }
.amenity-list li { display: flex; align-items: center; gap: 9px; font-size: .93rem; color: var(--ink-700); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); flex-shrink: 0; }

.nearby-list li { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--paper-sunk); font-size: .93rem; }
.nearby-list b { color: var(--green-800); }

.note-list li { position: relative; padding-left: 24px; margin-bottom: 10px; color: var(--ink-700); font-size: .93rem; line-height: 1.6; }
.note-list li::before {
  content: "!"; position: absolute; left: 0; top: 1px;
  display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background: var(--sand-100); color: var(--sand-700); font-size: .7rem; font-weight: 800;
}

.rules-times { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.rules-times div { padding: 13px 15px; background: var(--paper-warm); border-radius: var(--radius); }
.rules-times span { display: block; font-size: .77rem; color: var(--ink-300); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.rules-times strong { font-size: .98rem; color: var(--green-800); }

.rules-list { display: grid; gap: 9px; }
.rule { display: flex; align-items: center; gap: 10px; font-size: .93rem; color: var(--ink-700); }
.rule-mark { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; font-size: .72rem; font-weight: 800; flex-shrink: 0; }
.rule-yes .rule-mark { background: var(--success-bg); color: var(--success); }
.rule-no .rule-mark { background: var(--danger-bg); color: var(--danger); }
.rule-on_request .rule-mark { background: var(--sand-100); color: var(--sand-700); }
.rule small { color: var(--ink-300); font-style: italic; }

.map-box { border-radius: var(--radius); overflow: hidden; }
.map-note { margin-top: 10px; font-size: .84rem; color: var(--ink-500); }

.host-card { display: flex; gap: 16px; align-items: flex-start; }
.host-avatar { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--green-100); color: var(--green-800); font-size: 1.4rem; font-weight: 800; flex-shrink: 0; }
.host-name { margin: 0 0 3px; font-size: 1.05rem; font-weight: 800; }
.verified { display: inline-block; margin-left: 7px; padding: 2px 9px; border-radius: 999px; background: var(--green-100); color: var(--green-800); font-size: .72rem; font-weight: 800; }
.host-meta { margin: 0 0 8px; font-size: .86rem; color: var(--ink-500); }
.host-bio { margin: 0; font-size: .92rem; color: var(--ink-700); line-height: 1.65; }

.review-summary { display: grid; gap: 20px; padding: 20px; background: var(--paper-warm); border-radius: var(--radius-lg); margin-bottom: 24px; }
.review-score { text-align: center; }
.review-score strong { display: block; font-size: 2.4rem; font-weight: 800; color: var(--green-800); line-height: 1; }
.review-score span { color: var(--sand-500); font-size: .95rem; letter-spacing: 2px; }
.review-score small { display: block; color: var(--ink-500); font-size: .84rem; margin-top: 3px; }
.review-bars { display: grid; gap: 8px; }
.review-bar { display: grid; grid-template-columns: 96px 1fr 34px; align-items: center; gap: 10px; font-size: .85rem; }
.bar { height: 6px; background: var(--ink-100); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--green-600); border-radius: 3px; }
.review-bar b { text-align: right; color: var(--ink-700); }

.review-list { display: grid; gap: 20px; }
.review { padding-bottom: 20px; border-bottom: 1px solid var(--paper-sunk); }
.review:last-child { border-bottom: 0; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.review-author { font-weight: 800; }
.review-rating { color: var(--sand-700); font-weight: 800; font-size: .88rem; }
.review-date { color: var(--ink-300); font-size: .84rem; }
.review-verified { padding: 2px 9px; border-radius: 999px; background: var(--success-bg); color: var(--success); font-size: .72rem; font-weight: 800; }
.review p { margin: 0; color: var(--ink-700); line-height: 1.7; font-size: .94rem; }
.review-reply { margin-top: 10px; padding: 12px 15px; background: var(--paper-warm); border-radius: var(--radius); font-size: .9rem; color: var(--ink-700); }

/* --- Booking widget -------------------------------------------------- */

.booking-card { padding: 22px; border: 1px solid var(--ink-100); border-radius: var(--radius-lg); box-shadow: var(--shadow); background: var(--paper); }
.booking-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--paper-sunk); margin-bottom: 16px; }
.booking-price strong { font-size: 1.7rem; font-weight: 800; color: var(--green-900); }
.booking-price span { font-size: .86rem; color: var(--ink-500); }
.booking-price .price-alt { flex-basis: 100%; margin-top: 0; }

.rental-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; background: var(--paper-sunk); border-radius: 999px; margin-bottom: 16px; }
.rental-tab { padding: 9px; border: 0; border-radius: 999px; background: none; font-size: .87rem; font-weight: 700; color: var(--ink-500); cursor: pointer; }
.rental-tab.is-active { background: var(--paper); color: var(--green-800); box-shadow: var(--shadow-sm); }

/* minmax(0, 1fr): polje za datum ima svoju unutrašnju širinu i sa `1fr`
   ume da probije kolonu — na telefonu se to vidi kao skrol u stranu. */
.booking-dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.bk-field { min-width: 0; }
.bk-field input, .bk-field textarea, .bk-field select { max-width: 100%; }
#bookingForm.is-day .bk-to { display: none; }
#bookingForm.is-day .booking-dates { grid-template-columns: minmax(0, 1fr); }

.bk-field { display: grid; gap: 5px; margin-bottom: 12px; }
.bk-field > span { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-300); }
.bk-field input, .bk-field textarea, .bk-field select { width: 100%; padding: 11px 13px; border: 1.5px solid var(--ink-100); border-radius: var(--radius-sm); font-size: .95rem; font-weight: 600; }
.bk-field textarea { font-weight: 500; resize: vertical; }
.bk-field input:focus, .bk-field textarea:focus { border-color: var(--green-500); outline: none; }

.price-summary { margin: 16px 0; padding: 16px; background: var(--paper-warm); border-radius: var(--radius); min-height: 64px; }
.quote-hint { margin: 0; font-size: .87rem; color: var(--ink-500); text-align: center; }
.quote-lines { display: grid; gap: 9px; }
.quote-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: .89rem; color: var(--ink-700); }
.quote-lines small { display: block; color: var(--ink-300); font-size: .78rem; }
.quote-lines b { white-space: nowrap; font-weight: 700; }
.quote-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--ink-100); font-weight: 800; }
.quote-total b { font-size: 1.25rem; color: var(--green-800); }
.quote-note { margin: 9px 0 0; font-size: .8rem; color: var(--ink-500); }

.booking-details { margin-bottom: 14px; }
.booking-details summary { cursor: pointer; padding: 11px 0; font-weight: 700; font-size: .9rem; color: var(--green-700); }
.booking-note { margin: 12px 0 0; font-size: .8rem; color: var(--ink-500); text-align: center; line-height: 1.5; }
.booking-contact { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--paper-sunk); text-align: center; }
.booking-contact p { font-size: .84rem; color: var(--ink-500); margin-bottom: 9px; }

/* --- Lightbox -------------------------------------------------------- */

.lightbox { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: rgba(12, 22, 18, .93); padding: 40px 20px; }
.lightbox img { max-width: 100%; max-height: 86vh; border-radius: var(--radius); }
.lb-close, .lb-nav { position: absolute; border: 0; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; border-radius: 50%; }
.lb-close { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 1.5rem; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2rem; line-height: 1; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-count { position: absolute; bottom: 20px; color: rgba(255, 255, 255, .7); font-size: .87rem; font-weight: 700; }

/* =====================================================================
   Stranice, blog, nalog, kontakt
   ===================================================================== */

.page-hero { padding: 46px 0 34px; background: linear-gradient(180deg, var(--green-050), var(--paper)); }
.page-hero h1 { color: var(--green-900); margin-bottom: 10px; }
.page-sub { max-width: 640px; font-size: 1.02rem; color: var(--ink-700); margin: 0; }
.page-count { margin-top: 12px; font-size: .9rem; color: var(--ink-500); }
.page-hero-dest { background: linear-gradient(180deg, var(--sand-100), var(--paper)); }

.page-body { display: grid; gap: 34px; padding-top: 34px; padding-bottom: 60px; max-width: 860px; }
.prose-page h2:first-child { margin-top: 0; }
.coll-intro { max-width: 720px; color: var(--ink-700); margin-bottom: 26px; }

.faq-section h2 { margin-bottom: 16px; }
.faq { border-bottom: 1px solid var(--paper-sunk); }
.faq summary { padding: 15px 0; font-weight: 700; cursor: pointer; color: var(--ink-900); }
.faq p { padding: 0 0 15px; margin: 0; color: var(--ink-700); font-size: .94rem; }

.page-cta { padding: 30px; background: var(--green-050); border-radius: var(--radius-lg); text-align: center; }
.page-cta h2 { margin-bottom: 6px; }
.page-cta p { color: var(--ink-500); margin-bottom: 18px; }
.page-cta .cta-actions { justify-content: center; }

.center-cta { text-align: center; margin-top: 34px; }
.blog-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }

.post-single { max-width: 760px; padding-bottom: 50px; }
.post-header { padding: 20px 0 26px; border-bottom: 1px solid var(--paper-sunk); margin-bottom: 26px; }
.post-header h1 { margin-bottom: 12px; }
.post-lead { font-size: 1.1rem; color: var(--ink-700); }
.prose-article p { font-size: 1.02rem; line-height: 1.8; }
.post-cta { margin-top: 40px; padding: 30px; background: var(--green-050); border-radius: var(--radius-lg); text-align: center; }

.auth-wrap { display: grid; grid-template-columns: 1fr; gap: 30px; padding: 40px 20px 60px; max-width: 980px; }
.auth-card { padding: 30px; border: 1px solid var(--ink-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.auth-card h1 { font-size: 1.7rem; margin-bottom: 6px; }
.auth-alt { margin: 18px 0 0; text-align: center; font-size: .9rem; color: var(--ink-500); }
.auth-side { padding: 30px; background: var(--green-050); border-radius: var(--radius-lg); }
.auth-side h2 { font-size: 1.15rem; }
.tick-list { display: grid; gap: 9px; margin-bottom: 16px; }
.tick-list li { position: relative; padding-left: 26px; font-size: .93rem; color: var(--ink-700); }
.tick-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green-600); font-weight: 800; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.role-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; background: var(--paper-sunk); border-radius: 999px; margin-bottom: 18px; }
.role-tab { position: relative; text-align: center; padding: 9px; border-radius: 999px; font-weight: 700; font-size: .88rem; color: var(--ink-500); cursor: pointer; }
.role-tab input { position: absolute; opacity: 0; }
.role-tab:has(input:checked) { background: var(--paper); color: var(--green-800); box-shadow: var(--shadow-sm); }

.contact-layout { display: grid; grid-template-columns: 1fr; gap: 30px; padding: 34px 20px 60px; }
.contact-form-box { padding: 28px; border: 1px solid var(--ink-100); border-radius: var(--radius-lg); }
.contact-side { padding: 28px; background: var(--green-050); border-radius: var(--radius-lg); height: fit-content; }
.contact-item { padding: 13px 0; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.contact-item:last-child { border-bottom: 0; }
.contact-item span { display: block; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-300); }
.contact-item a, .contact-item strong { font-size: 1rem; font-weight: 700; color: var(--green-800); }

.confirm-wrap { padding: 40px 20px 70px; max-width: 720px; }
.confirm-card { padding: 36px 30px; border: 1px solid var(--ink-100); border-radius: var(--radius-lg); box-shadow: var(--shadow); text-align: center; }
.confirm-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%; background: var(--success-bg); color: var(--success); font-size: 1.9rem; font-weight: 800; }
.confirm-lead { color: var(--ink-700); max-width: 460px; margin: 0 auto 24px; }
.confirm-code { display: inline-flex; flex-direction: column; padding: 13px 26px; background: var(--green-050); border-radius: var(--radius); margin-bottom: 26px; }
.confirm-code span { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-300); }
.confirm-code strong { font-size: 1.2rem; color: var(--green-800); }
.confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; margin-bottom: 24px; }
.confirm-grid span { display: block; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-300); }
.confirm-grid strong { font-size: .96rem; }
.confirm-table { width: 100%; border-collapse: collapse; text-align: left; margin-bottom: 26px; }
.confirm-table th { padding: 11px 0; font-weight: 600; font-size: .9rem; color: var(--ink-700); }
.confirm-table th small { display: block; color: var(--ink-300); font-size: .78rem; }
.confirm-table td { padding: 11px 0; text-align: right; font-weight: 700; }
.confirm-table .is-total { border-top: 1.5px solid var(--ink-100); }
.confirm-table .is-total th, .confirm-table .is-total td { font-weight: 800; font-size: 1.05rem; color: var(--green-800); padding-top: 14px; }
.confirm-card .cta-actions { justify-content: center; }

.account-layout { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 34px 20px 60px; }
.account-nav { padding: 22px; background: var(--paper-warm); border-radius: var(--radius-lg); height: fit-content; }
.account-name { font-weight: 800; margin-bottom: 2px; }
.account-nav nav { display: grid; gap: 2px; margin: 18px 0; }
.account-nav nav a { padding: 10px 13px; border-radius: var(--radius-sm); font-weight: 600; font-size: .92rem; color: var(--ink-700); }
.account-nav nav a:hover { background: var(--paper); }
.account-nav nav a.is-current { background: var(--green-700); color: #fff; }
.account-block { margin-bottom: 40px; }

.data-table { width: 100%; border-collapse: collapse; font-size: .91rem; }
.data-table th { text-align: left; padding: 11px 12px 11px 0; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-300); border-bottom: 1.5px solid var(--ink-100); }
.data-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--paper-sunk); vertical-align: top; }
.status { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: .76rem; font-weight: 800; }
.status-pending { background: var(--sand-100); color: var(--sand-700); }
/* „Prihvaćeno" nije isto što i „potvrđeno": gost tek treba da uplati
   kaparu. Zelena značka bi mu rekla da je sve gotovo. */
.status-confirmed { background: var(--success-bg); color: var(--success); }
.status-approved { background: var(--sand-100); color: #8a6300; }
.status-cancelled, .status-rejected, .status-expired { background: var(--danger-bg); color: var(--danger); }
.status-completed { background: var(--green-100); color: var(--green-800); }

.error-page { text-align: center; padding: 80px 20px 100px; }
.error-code { font-size: 4.5rem; font-weight: 800; color: var(--green-100); line-height: 1; margin: 0; }
.error-msg { color: var(--ink-500); margin-bottom: 26px; }
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (min-width: 600px) {
  .grid-results { grid-template-columns: repeat(2, 1fr); }
  .review-summary { grid-template-columns: 180px 1fr; align-items: center; }
  .gallery { grid-template-columns: 1.6fr 1fr; }
  .gal-side { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .search-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .filter-toggle { display: none; }
  .filter-panel { display: grid !important; }
  .grid-results { grid-template-columns: repeat(2, 1fr); }

  .listing-layout { grid-template-columns: minmax(0, 1fr) 372px; gap: 44px; }
  .booking-col { position: sticky; top: calc(var(--header-h) + 16px); height: fit-content; }
  .rules-times { grid-template-columns: repeat(4, 1fr); }
  .amenity-list { grid-template-columns: repeat(3, 1fr); }

  .auth-wrap { grid-template-columns: 1.2fr 1fr; align-items: start; }
  .contact-layout { grid-template-columns: 1.5fr 1fr; }
  .account-layout { grid-template-columns: 250px 1fr; }
  .account-nav { position: sticky; top: calc(var(--header-h) + 16px); }
  .page-body { padding-top: 44px; }
}

@media (min-width: 1200px) {
  .grid-results { grid-template-columns: repeat(3, 1fr); }
}

.booking-guests { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bk-field small { font-size: .72rem; color: var(--ink-300); font-weight: 600; }
#bookingForm.is-day .booking-guests { grid-template-columns: 1fr; }

/* --- Mapa na pretrazi -------------------------------------------------- */

.results-actions { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.map-toggle { position: sticky; top: calc(var(--header-h) + 10px); z-index: 30; }

.map-panel { display: none; }

.map-shell {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); background: var(--paper-sunk);
}
.map-canvas { width: 100%; height: 100%; min-height: 420px; }

.map-bar {
  position: absolute; left: 12px; right: 12px; top: 12px; z-index: 500;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm); font-size: .84rem;
}
.map-sync { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--ink-700); cursor: pointer; }
.map-sync input { width: 15px; height: 15px; accent-color: var(--green-700); }
.map-count { color: var(--ink-500); white-space: nowrap; }
.map-count b { color: var(--green-800); }

.map-search {
  position: absolute; left: 50%; bottom: 18px; z-index: 500;
  transform: translateX(-50%); box-shadow: var(--shadow-lg);
}

.map-loading {
  position: absolute; left: 50%; top: 50%; z-index: 500;
  transform: translate(-50%, -50%);
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .95); font-size: .84rem; font-weight: 650; color: var(--ink-600);
  box-shadow: var(--shadow-sm);
}

/* Marker je cena, ne pribadača */
.map-pin {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: var(--paper); border: 1.5px solid var(--ink-100);
  font-size: .8rem; font-weight: 800; color: var(--green-900); white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transform: translate(-50%, -50%);
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.map-pin.is-active,
.leaflet-marker-icon:hover .map-pin {
  background: var(--green-800); border-color: var(--green-800); color: #fff;
  transform: translate(-50%, -50%) scale(1.08);
}

.leaflet-marker-icon { background: none !important; border: 0 !important; }

.map-pop-wrap .leaflet-popup-content-wrapper { padding: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.map-pop-wrap .leaflet-popup-content { margin: 0; width: 240px !important; }
.map-pop-wrap .leaflet-popup-tip { box-shadow: var(--shadow-sm); }

.map-pop { display: block; color: inherit; }
.map-pop img { width: 100%; height: 130px; object-fit: cover; }
.map-pop-body { display: block; padding: 12px 14px 14px; }
.map-pop-body b { display: block; font-size: .95rem; font-weight: 780; color: var(--ink-900); margin-bottom: 3px; }
.map-pop-body small { display: block; font-size: .78rem; color: var(--sand-700); font-weight: 700; margin-bottom: 6px; }
.map-pop-meta { display: block; font-size: .76rem; color: var(--ink-500); margin-bottom: 8px; }
.map-pop-body strong { font-size: 1.05rem; font-weight: 800; color: var(--green-800); }

/* Kartica koja odgovara markeru pod mišem */
.card.is-map-hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); outline: 2px solid var(--green-500); outline-offset: 2px; }

/* Dve kolone, ne tri.
   Levo idu filteri, a odmah **ispod njih** rezultati; desno mapa preko
   cele visine. Ranije su filteri bili uska treća kolona uz ivicu, pa je
   sredina bila stisnuta između dva bočna stupca i kartice su ispadale
   sitne. Ovako filteri stoje u jednom redu iznad rezultata, a kartice
   dobijaju punu širinu leve kolone. */
@media (min-width: 1000px) {
  /* Do same ivice: bočni razmak se skida sa spoljašnjeg okvira i
     prebacuje unutar leve kolone, tako da mapa desno ide skroz do ivice
     ekrana, a tekst i kartice ipak ne dodiruju staklo. */
  .search-bleed.search-layout { padding-left: 0; padding-right: 0; }
  .filters, .results { padding-left: clamp(16px, 1.6vw, 28px); }

  .search-layout {
    grid-template-columns: minmax(0, 1fr) 42vw;
    align-items: start;
    gap: 20px 24px;
  }

  /* `align-self: stretch` je ovde nužno: red je postavljen na `start`,
     pa bi mapa bila visoka koliko i njen sadržaj i „lepljivo" ponašanje
     ne bi imalo po čemu da klizi. */
  .map-panel { align-self: stretch; }

  .results-actions { display: none; }

  /* Traka sa filterima dobija svoju podlogu, da se vidi kao alatka
     iznad rezultata, a ne kao red dugmadi koji lebdi nad stranom. */
  .filters form {
    padding: 12px 14px;
    background: var(--paper-warm);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius);
  }
  /* Naslov „Filteri" na širokom ekranu samo troši red — dugmici sami
     govore šta rade. */
  .filters-head { display: none; }

  .map-panel { display: block; }
  .map-shell {
    position: sticky; top: calc(var(--header-h) + 16px);
    height: calc(100vh - var(--header-h) - 40px);
  }

  .grid-results { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1400px) {
  .search-layout { grid-template-columns: minmax(0, 1fr) 40vw; }
}

/* Treća kolona kartica tek kad za nju stvarno ima mesta. Na 1440px bi
   tri kartice bile široke 253px — slika u njima postane poštanska marka,
   pa je bolje dve krupne nego tri sitne. */
@media (min-width: 1600px) {
  .grid-results { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 2000px) {
  .grid-results { grid-template-columns: repeat(4, 1fr); }
}

/* Mobilni: mapa preko celog ekrana kad se uključi */
@media (max-width: 999px) {
  body.map-open .map-panel {
    display: block; position: fixed; inset: var(--header-h) 0 0; z-index: 90;
  }
  body.map-open .map-shell { height: 100%; border-radius: 0; }
  body.map-open .results > *:not(.results-actions) { display: none; }
  body.map-open { overflow: hidden; }
}

/* Izbor uloge pri registraciji — dve jasne kartice, ne sitni tabovi */
.role-intro { font-size: .87rem; color: var(--ink-500); margin-bottom: 12px; }
.role-tabs { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; background: none; border-radius: 0; }
.role-tab {
  padding: 14px 16px; border: 1.5px solid var(--ink-100); border-radius: var(--radius);
  background: var(--paper); text-align: left; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.role-tab span { display: block; }
.role-tab strong { display: block; font-size: .95rem; font-weight: 750; color: var(--ink-900); }
.role-tab small { display: block; font-size: .78rem; color: var(--ink-400); margin-top: 2px; }
.role-tab:has(input:checked) { border-color: var(--green-600); background: var(--green-050); box-shadow: none; }
.role-tab:has(input:checked) strong { color: var(--green-800); }

/* =====================================================================
   Stranica za domaćine
   ===================================================================== */

.hero-host { min-height: min(84vh, 760px); }
.host-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.host-hero-note { font-size: .87rem; color: rgba(255, 255, 255, .72); margin: 0; }

.value-card {
  padding: 28px; border: 1px solid var(--ink-100); border-radius: var(--radius-lg);
  background: var(--paper);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.value-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 16px; border-radius: 15px; background: var(--green-100); font-size: 1.35rem; }
.value-card h3 { margin-bottom: 8px; }
.value-card p { margin: 0; font-size: .93rem; color: var(--ink-500); line-height: 1.65; }

/* --- Kalkulator zarade ------------------------------------------------- */

.calc-band { padding: 72px 0; background: linear-gradient(135deg, var(--green-800), var(--green-900)); color: #fff; }
.calc-inner { display: grid; gap: 34px; align-items: center; }
.calc-intro h2 { color: #fff; margin-bottom: 10px; }
.calc-intro p { color: rgba(255, 255, 255, .8); font-size: 1rem; line-height: 1.65; }
.calc-intro .section-eyebrow { color: var(--sand-300); }
.calc-note { font-size: .9rem; color: rgba(255, 255, 255, .72); }
.calc-note strong { color: var(--sand-300); }

.calc-box { padding: 28px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(12px); }

.calc-field { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin-bottom: 22px; }
.calc-field > span { font-size: .8rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: rgba(255, 255, 255, .6); }
.calc-field output { font-size: 1.05rem; font-weight: 800; color: var(--sand-300); text-align: right; }
.calc-field input[type="range"] { grid-column: span 2; width: 100%; accent-color: var(--sand-400); height: 6px; cursor: pointer; }

.calc-result { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); }
.calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: .95rem; }
.calc-row-muted { color: rgba(255, 255, 255, .6); font-size: .88rem; }
.calc-row-total { margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .16); }
.calc-row-total span { font-weight: 700; }
.calc-row-total b { font-size: 1.7rem; font-weight: 800; color: var(--sand-300); letter-spacing: -.03em; }
.calc-year { margin: 12px 0 0; font-size: .87rem; color: rgba(255, 255, 255, .66); }
.calc-year b { color: #fff; }

/* --- Koraci ------------------------------------------------------------ */

.steps { display: grid; gap: 20px; counter-reset: step; }
.step { position: relative; padding: 24px 24px 24px 76px; border-radius: var(--radius-lg); background: var(--paper-warm); }
.step-num {
  position: absolute; left: 24px; top: 24px;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--green-700); color: #fff; font-weight: 800; font-size: .95rem;
}
.step h3 { margin-bottom: 5px; font-size: 1.08rem; }
.step p { margin: 0; font-size: .93rem; color: var(--ink-500); line-height: 1.6; }

/* --- Forma prijave ----------------------------------------------------- */

.host-form-wrap { display: grid; gap: 30px; }
.host-form-intro h2 { margin-bottom: 10px; }
.host-form-intro > p { color: var(--ink-500); font-size: 1rem; line-height: 1.65; }
.host-form-assure { display: grid; gap: 10px; margin-top: 20px; }
.host-form-assure p { margin: 0; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--green-050); font-size: .89rem; color: var(--ink-700); }
.host-form-assure strong { color: var(--green-800); }

.host-form { padding: 30px; border: 1px solid var(--ink-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: var(--paper); }
.host-form-note { margin: 12px 0 0; font-size: .83rem; color: var(--ink-400); text-align: center; }

.faq-grid { display: grid; gap: 4px; }

@media (min-width: 700px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .calc-inner { grid-template-columns: 1fr 420px; gap: 60px; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .host-form-wrap { grid-template-columns: 1fr 520px; gap: 50px; align-items: start; }
  .faq-grid { grid-template-columns: repeat(2, 1fr); gap: 4px 40px; }
}

/* =====================================================================
   Centriran hero na početnoj
   ===================================================================== */

.hero-center .hero-inner { text-align: center; }
.hero-center .hero-title { max-width: 18ch; margin-left: auto; margin-right: auto; }
.hero-center .hero-lead { margin-left: auto; margin-right: auto; }
.hero-center .hero-search { margin-left: auto; margin-right: auto; }
.hero-center .hero-quick { justify-content: center; }
.hero-center .hero-veil {
  background:
    linear-gradient(180deg, rgba(9, 26, 21, .55) 0%, rgba(9, 26, 21, .34) 38%, rgba(9, 26, 21, .5) 72%, rgba(9, 26, 21, .88) 100%),
    radial-gradient(120% 90% at 50% 45%, rgba(9, 26, 21, .5) 0%, rgba(9, 26, 21, .18) 55%, rgba(9, 26, 21, .05) 100%);
}
.hero-center .hero-trust-inner { text-align: center; }

/* =====================================================================
   Doterivanje stranice objekta i pretrage
   ===================================================================== */

/* Galerija: zaobljeni uglovi i mekši prelaz */
.gal-main { box-shadow: var(--shadow-sm); }
.gal-cell { box-shadow: var(--shadow-xs); }

/* Oznake iznad naslova */
.tag { letter-spacing: .01em; }
.tag-instant { background: linear-gradient(135deg, var(--green-600), var(--green-800)); }
.tag-rating { background: linear-gradient(135deg, var(--sand-100), var(--sand-300)); color: var(--sand-800); }

/* Ključni podaci: kartice umesto gole liste */
.specs {
  gap: 8px; padding: 0; border: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.specs li {
  display: grid; gap: 2px; min-width: 0; padding: 14px 12px;
  border: 1px solid var(--ink-100); border-radius: var(--radius); background: var(--paper);
  text-align: center;
}
.specs strong { font-size: 1.35rem; }
.specs span { font-size: .76rem; }

/* Cenovnik: naizmenične vrste i istaknut iznos */
.price-table tr:nth-child(even) { background: var(--paper-warm); }
.price-table th, .price-table td { padding-inline: 12px; }
.price-table tr:first-child th { border-top-left-radius: var(--radius-sm); }
.price-table tr:first-child td { border-top-right-radius: var(--radius-sm); }

/* Sadržaji kao pilule */
.amenity-list { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.amenity-list li {
  padding: 9px 13px; border-radius: 999px; background: var(--paper-sunk);
  font-size: .87rem; font-weight: 600;
}
.dot { background: var(--green-600); }

/* Kartica domaćina */
.host-card { padding: 20px; border-radius: var(--radius-lg); background: var(--paper-warm); }
.host-avatar { background: linear-gradient(135deg, var(--green-100), var(--sand-100)); }

/* Ocene: deblji barovi */
.bar { height: 7px; border-radius: 4px; }
.bar i { background: linear-gradient(90deg, var(--green-500), var(--green-700)); }
.review-summary { background: linear-gradient(135deg, var(--paper-warm), var(--green-050)); }

/* Booking widget: naglašen okvir */
.booking-card { border-color: transparent; box-shadow: var(--shadow-lg); }
.booking-price strong { background: linear-gradient(120deg, var(--green-800), var(--green-600)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quote-total b { font-size: 1.35rem; }

/* Filteri: čistiji blokovi */
.filters-head h2 { font-size: 1.1rem; }
.filter-title { color: var(--ink-400); }

/* Rezultati: naslov i broj */
.results-count strong { color: var(--green-800); }

@media (min-width: 700px) {
  .specs { grid-template-columns: repeat(6, 1fr); }
  .amenity-list { grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================================
   Recenzija gosta
   ===================================================================== */

.review-page { padding: 40px 20px 70px; max-width: 780px; }

.review-card {
  border-radius: var(--radius-xl); overflow: hidden;
  background: var(--paper); box-shadow: var(--shadow-lg);
}
.review-card-narrow { max-width: 560px; margin: 0 auto; text-align: center; }
.review-cover { width: 100%; height: 190px; object-fit: cover; }
.review-body { padding: 34px 30px 36px; }
.review-body h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: 10px; }
.review-lead { color: var(--ink-500); font-size: 1rem; line-height: 1.65; margin-bottom: 26px; }

.review-icon {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--success-bg); color: var(--success);
  font-size: 1.9rem; font-weight: 800;
}

.rate-grid { display: grid; gap: 4px; margin-bottom: 24px; }
.rate-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--paper-sunk);
}
.rate-row:last-child { border-bottom: 0; }
.rate-row legend { padding: 0; font-size: .93rem; font-weight: 650; color: var(--ink-700); }

/* Zvezdice: obrnut redosled u DOM-u da CSS može da oboji sve levo od izabrane */
.stars { display: inline-flex; flex-direction: row-reverse; gap: 3px; }
.stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.stars label {
  font-size: 1.5rem; line-height: 1; color: var(--ink-200); cursor: pointer;
  transition: color .15s var(--ease), transform .15s var(--ease);
}
.stars label:hover { transform: scale(1.15); }
.stars input:checked ~ label,
.stars label:hover, .stars label:hover ~ label { color: var(--sand-500); }
.stars input:focus-visible + label { outline: 2px solid var(--green-500); outline-offset: 2px; border-radius: 4px; }

.review-form .bk-field { margin-bottom: 18px; }
.review-note { margin: 14px 0 0; font-size: .82rem; color: var(--ink-400); text-align: center; line-height: 1.55; }

@media (min-width: 700px) {
  .rate-grid { grid-template-columns: 1fr 1fr; gap: 4px 34px; }
  .review-body { padding: 40px 40px 44px; }
}

/* Ukupno u drugoj valuti ispod obračuna */
.quote-alt {
  margin: 2px 0 0; text-align: right;
  font-size: .82rem; font-weight: 600; color: var(--ink-400); cursor: help;
}

/* --- Prijava: red sa "zapamti me" i linkom na reset ------------------ */
.auth-wrap-narrow { grid-template-columns: minmax(0, 460px); justify-content: center; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth-link { font-size: .85rem; font-weight: 600; color: var(--green-700); }
.auth-link:hover { color: var(--green-900); text-decoration: underline; }
.form-hint { margin: -4px 0 12px; font-size: .8rem; color: var(--ink-400); }

/* Podsetnik da email nije potvrđen */
.verify-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 15px 18px;
  background: var(--sand-100); border-left: 3px solid var(--sand-500); border-radius: var(--radius-sm);
}
.verify-banner strong { display: block; font-size: .95rem; color: var(--green-900); }
.verify-banner p { margin: 4px 0 0; font-size: .84rem; line-height: 1.6; color: var(--ink-500); max-width: 60ch; }

/* Kupon u rezervacionom boksu */
.coupon-box { margin: 0 0 14px; font-size: .86rem; }
.coupon-box summary {
  cursor: pointer; padding: 4px 0;
  font-weight: 700; color: var(--green-700); list-style: none;
}
.coupon-box summary::-webkit-details-marker { display: none; }
.coupon-box summary::before { content: '+ '; font-weight: 800; }
.coupon-box[open] summary::before { content: '− '; }
.coupon-row { margin-top: 8px; }
.coupon-row input {
  width: 100%; padding: 10px 12px;
  font: inherit; font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--paper-warm); border: 1px dashed var(--ink-300); border-radius: var(--radius-sm);
}
.coupon-row input:focus { outline: none; border-style: solid; border-color: var(--green-600); background: #fff; }
.coupon-note { margin: 6px 0 0; font-size: .78rem; color: var(--ink-400); }

/* --- Akcije i promocije ---------------------------------------------- */
.deals-head { max-width: 62ch; margin-bottom: 34px; }
.deals-head h1 { margin: 0 0 10px; }
.deals-head p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--ink-500); }

.coupon-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.coupon-card {
  display: flex; flex-direction: column; gap: 12px; padding: 22px;
  background: var(--paper); border: 1px dashed var(--sand-500); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.coupon-value {
  font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--green-800);
  font-variant-numeric: tabular-nums;
}
.coupon-value small { font-size: .5em; font-weight: 700; }
.coupon-code-box {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 14px; background: var(--green-050); border-radius: var(--radius-sm);
}
.coupon-code-box span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400); }
.coupon-code-box strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem; font-weight: 800; letter-spacing: .08em; color: var(--green-900);
}
.coupon-terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; flex: 1; }
.coupon-terms li { font-size: .82rem; color: var(--ink-500); padding-left: 15px; position: relative; }
.coupon-terms li::before { content: '·'; position: absolute; left: 4px; font-weight: 800; color: var(--sand-500); }

.deal-list { display: grid; gap: 10px; }
.deal-row {
  display: grid; grid-template-columns: 74px 1fr auto; gap: 16px; align-items: center;
  padding: 12px 16px; background: var(--paper); border-radius: var(--radius);
  box-shadow: var(--shadow-xs); transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.deal-row:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.deal-img { width: 74px; height: 56px; border-radius: var(--radius-sm); background: var(--paper-sunk) center/cover no-repeat; }
.deal-main { display: grid; gap: 2px; min-width: 0; }
.deal-main strong { font-size: .96rem; color: var(--green-900); }
.deal-label { font-size: .84rem; color: var(--ink-600, var(--ink-500)); }
.deal-cond { font-size: .78rem; color: var(--ink-400); }
.deal-value { text-align: right; font-size: 1.1rem; font-weight: 800; color: var(--green-800); white-space: nowrap; }
.deal-value small { display: block; font-size: .72rem; font-weight: 500; color: var(--ink-400); }
@media (max-width: 620px) {
  .deal-row { grid-template-columns: 56px 1fr; }
  .deal-img { width: 56px; height: 46px; }
  .deal-value { grid-column: 2; text-align: left; font-size: 1rem; }
}

.deals-note { margin: 34px 0 0; padding: 16px 20px; font-size: .88rem; line-height: 1.7; color: var(--ink-500); background: var(--paper-warm); border-radius: var(--radius); }

/* --- Preporuke gostiju ------------------------------------------------ */
/* Jedan red koji se pomera u stranu.
   Sest preporuka u mrezi zauzme tri reda i razbije ritam strane; ovako
   stoje u jednom potezu, a citaju se prevlacenjem — isto na mobilnom
   i na desktopu, bez ijedne linije JavaScripta. */
.tst-grid {
  display: flex; gap: 18px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: 2px;
  /* Prostor da senka kartice ne bude odsecena pri skrolu.
     Bez negativne margine — ona bi na telefonu prosirila celu stranu. */
  padding: 4px 2px 18px;
  scrollbar-width: thin; scrollbar-color: var(--ink-200) transparent;
}
.tst-grid::-webkit-scrollbar { height: 6px; }
.tst-grid::-webkit-scrollbar-track { background: var(--paper-sunk); border-radius: 999px; }
.tst-grid::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 999px; }
.tst-grid::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

.tst-grid > * {
  flex: 0 0 clamp(268px, 30%, 360px);
  scroll-snap-align: start;
}

/* Poslednja kartica dobija prazan prostor iza sebe, da se vidi da je kraj */
.tst-grid::after { content: ''; flex: 0 0 2px; }
.tst-card {
  display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 24px 26px;
  background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.tst-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.tst-stars { display: flex; gap: 2px; font-size: .92rem; color: var(--ink-200); }
.tst-stars .is-on { color: var(--sand-500); }
.tst-card blockquote {
  margin: 0; flex: 1;
  font-size: .96rem; line-height: 1.72; color: var(--ink-700);
}
.tst-card blockquote::before { content: '„'; color: var(--sand-400); font-size: 1.4em; line-height: 0; }
.tst-card figcaption { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--paper-sunk); }
.tst-card figcaption strong { font-size: .9rem; color: var(--green-900); }
.tst-card figcaption span { font-size: .8rem; color: var(--ink-400); }

/* --- Slajder: strelice, tackice i preliv na ivici --------------------- */
.tst-wrap { position: relative; }

/* Preliv nagovestava da ima jos desno; nestaje kad se dodje do kraja,
   jer je tada strelica onemogucena i preliv bi lagao. */
.tst-wrap::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 34px; width: 56px;
  background: linear-gradient(90deg, transparent, var(--paper-warm));
  pointer-events: none; opacity: 1; transition: opacity .2s var(--ease);
}
.tst-wrap:has(.sl-next[disabled])::after,
.tst-wrap:has(.sl-next[hidden])::after { opacity: 0; }
@media (max-width: 760px) { .tst-wrap::after { width: 32px; } }

.sl-nav {
  position: absolute; top: calc(50% - 26px); z-index: 3;
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; cursor: pointer;
  background: var(--paper); color: var(--green-800);
  border: 1px solid var(--ink-100); box-shadow: var(--shadow-lg);
  transition: background .18s var(--ease), color .18s var(--ease),
              opacity .18s var(--ease), transform .18s var(--ease);
}
.sl-nav:hover:not([disabled]) { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.sl-nav:active:not([disabled]) { transform: scale(.94); }
.sl-nav[disabled] { opacity: 0; pointer-events: none; }
.sl-nav[hidden] { display: none; }
.sl-prev { left: -18px; }
.sl-next { right: -18px; }
@media (max-width: 1180px) { .sl-prev { left: 4px; } .sl-next { right: 4px; } }
@media (max-width: 700px) { .sl-nav { display: none; } }

.sl-dots { display: flex; justify-content: center; gap: 7px; margin-top: 6px; }
.sl-dots[hidden] { display: none; }
.sl-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: var(--ink-200); cursor: pointer;
  transition: background .2s var(--ease), width .2s var(--ease);
}
.sl-dot:hover { background: var(--ink-300); }
.sl-dot.is-on { width: 22px; background: var(--green-600); }

.tst-grid:focus-visible { outline: 2px solid var(--green-500); outline-offset: 6px; border-radius: var(--radius); }

/* Sidro iznad rezervacionog boksa: bez pomeraja bi lepljivo zaglavlje
   prekrilo vrh boksa kad se skoči na njega. */
.anchor-offset { display: block; position: relative; top: calc(-1 * (var(--header-h) + 16px)); visibility: hidden; }
.booking-errors { margin-bottom: 12px; font-size: .86rem; }
.booking-errors p { margin: 0 0 4px; }
.booking-errors p:last-child { margin: 0; }

/* --- Podaci za uplatu kapare na potvrdi rezervacije ------------------- */
.pay-panel {
  margin: 24px 0; padding: 22px 24px; text-align: left;
  background: var(--paper-warm); border-left: 3px solid var(--sand-500);
  border-radius: var(--radius);
}
.pay-panel-eyebrow { margin: 0; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--sand-700, #8a6300); }
.pay-panel-amount { margin: 6px 0 10px; font-size: 2rem; font-weight: 800; line-height: 1; color: var(--green-900); }
.pay-panel-lead { margin: 0 0 16px; font-size: .92rem; line-height: 1.65; color: var(--ink-600, var(--ink-500)); }
.pay-panel-details { margin: 0; padding: 0; border-top: 1px solid var(--ink-100); }
.pay-panel-details > div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ink-100); }
.pay-panel-details dt { margin: 0; font-size: .82rem; color: var(--ink-400); }
.pay-panel-details dd { margin: 0; font-size: .92rem; color: var(--ink-800); }
.pay-panel-details strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
@media (max-width: 560px) { .pay-panel-details > div { grid-template-columns: 1fr; gap: 2px; } }
.pay-panel-missing { margin: 0; padding: 12px 14px; font-size: .88rem; line-height: 1.6; color: #7d5c1a; background: #fff6e5; border-radius: var(--radius-sm); }
.pay-panel-note { margin: 14px 0 0; font-size: .82rem; line-height: 1.6; color: var(--ink-400); }

/* Sazetak objekta u punim recenicama — i za citaoca koji skenira stranu,
   i za jezicki model koji trazi recenicu koju moze da citira. */
.block-summary .summary-text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.75;
}
.block-summary .summary-text strong { font-weight: 700; }

/* =====================================================================
   Traka sa filterima
   Svaki filter je dugme koje otvara svoj panel. Zatvorena traka staje
   u jedan red, pa rezultati pocinju odmah ispod nje umesto 700 piksela
   nize, kako je bilo dok je stajao pun spisak kvacica.
   ===================================================================== */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fbox { position: relative; }

.fbox > summary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  border: 1.5px solid var(--ink-100);
  border-radius: 999px;
  background: var(--paper);
  font-size: .88rem; font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.fbox > summary::-webkit-details-marker { display: none; }
.fbox > summary:hover { border-color: var(--green-400, var(--green-500)); }
.fbox[open] > summary { border-color: var(--green-600); background: var(--green-050); }
.fbox.has-value > summary { border-color: var(--green-600); background: var(--green-050); color: var(--green-900); }

.fbox-count {
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px;
  background: var(--green-700); color: #fff;
  font-size: .72rem; font-weight: 800;
}

/* Strelica se okrece kad je panel otvoren — jedini znak da dugme nije
   obicna kvacica nego da ispod njega ima jos. */
.fbox-caret {
  width: 8px; height: 8px; margin-left: 1px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s var(--ease);
}
.fbox[open] .fbox-caret { transform: rotate(-135deg) translate(-3px, -3px); }

.fbox-panel {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0;
  min-width: 240px; max-width: min(420px, calc(100vw - 32px));
  max-height: min(420px, calc(100vh - 220px));
  overflow-y: auto;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.fbox-panel.is-wide { min-width: 420px; max-width: min(660px, calc(100vw - 32px)); }
.fbox-panel .filter-title { margin: 0 0 8px; }
.fbox-panel .filter-title + .filter-title { margin-top: 14px; }
.fbox-panel select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--ink-100); border-radius: var(--radius-sm); font-weight: 600; }

/* Sadrzaji su jedina grupa sa vise podgrupa; u dve kolone stane bez skrola. */
.fbox-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 22px; }

/* Kvacice koje se najcesce koriste stoje same u traci, bez padajuceg
   panela — jedan klik umesto dva. */
.fchip {
  display: inline-flex; align-items: center;
  padding: 9px 14px;
  border: 1.5px solid var(--ink-100);
  border-radius: 999px;
  font-size: .88rem; font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.fchip input { position: absolute; opacity: 0; width: 0; height: 0; }
.fchip:hover { border-color: var(--green-400, var(--green-500)); }
.fchip.is-on { border-color: var(--green-600); background: var(--green-050); color: var(--green-900); }

.filter-bar .filter-reset {
  margin-left: auto;
  font-size: .85rem; font-weight: 700;
  color: var(--ink-500);
  text-decoration: underline;
  white-space: nowrap;
}
.filter-bar .filter-reset:hover { color: var(--green-700); }

/* Na telefonu traka nema gde da se rasiri, pa dugmici idu jedan ispod
   drugog i panel se otvara u toku, a ne kao lebdeci prozorcic koji bi
   izasao van ekrana. */
@media (max-width: 899px) {
  .filter-bar { flex-direction: column; align-items: stretch; }
  .fbox > summary { justify-content: space-between; border-radius: var(--radius-sm); }
  .fbox-panel {
    position: static;
    max-width: none; min-width: 0;
    margin-top: 6px;
    box-shadow: none;
  }
  .fbox-panel.is-wide { min-width: 0; max-width: none; }
  .filter-bar .filter-reset { margin-left: 0; text-align: center; padding: 8px 0; }
}


/* Gornja traka drži i polje pretrage i filtere — jedna alatka, ne dve.
   Filteri više nisu u koloni pored rezultata, pa im ovde treba samo
   razmak od polja pretrage iznad. */
.search-bar { display: grid; gap: 12px; }
.search-bar .filters form { padding: 0; background: none; border: 0; }

/* Strana sa jednom porukom (odjava sa newslettera i slicno). */
.simple-page { max-width: 620px; }
.simple-page h1 { margin: 0 0 12px; }
.simple-page p { margin: 0 0 18px; line-height: 1.7; color: var(--ink-600, var(--ink-500)); }


/* ---- Usluge za proslave (oglasivaci) -------------------------------- */
.vendor-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.vendor-filter .chip.is-active { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.vendor-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.vendor-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.vendor-media { position: relative; aspect-ratio: 3 / 2; background: var(--green-050); }
.vendor-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vendor-initial {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 3rem; font-weight: 800; color: var(--green-400);
}
.vendor-cat {
  position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.94); font-size: .76rem; font-weight: 700; color: var(--green-800);
}
.vendor-ad {
  position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: 6px;
  background: rgba(17,32,26,.62); color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.vendor-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.vendor-body h3 { margin: 0; font-size: 1.08rem; }
.vendor-tagline { margin: 0; color: var(--ink-700); font-size: .92rem; line-height: 1.5; }
.vendor-desc { margin: 4px 0 0; color: var(--ink-500); font-size: .88rem; line-height: 1.6; }
.vendor-city { margin: 0; color: var(--ink-500); font-size: .84rem; }
.vendor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.vendor-card.is-compact .vendor-body { padding: 14px 16px 16px; }
.vendor-empty {
  max-width: 560px; padding: 36px 28px; text-align: center; margin: 10px auto 0;
  background: var(--paper-warm); border: 1px dashed var(--ink-200); border-radius: var(--radius-lg);
}
.vendor-empty h2 { margin: 0 0 8px; }
.vendor-empty p { margin: 0 0 18px; color: var(--ink-500); line-height: 1.6; }
.vendor-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 34px; padding: 18px 22px; border-radius: var(--radius-lg); background: var(--sand-100);
}
.vendor-cta div { display: flex; flex-direction: column; gap: 3px; }
.vendor-cta span { color: var(--ink-500); font-size: .9rem; }
.vendor-strip { border-top: 1px solid var(--ink-100); }
@media (max-width: 640px) {
  .vendor-grid { grid-template-columns: 1fr; gap: 16px; }
  .vendor-strip .vendor-grid { grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .vendor-strip .vendor-card { scroll-snap-align: start; }
}