/* ══════════ Plan Sjedenja — dorada pozivnica (21 tema) ══════════
   Učitava se POSLIJE glavnog <style> u e.html, pa ima prednost pri istoj specifičnosti.
   Sadrži: čitljive boje akcenta za tekst i dugmad, fontove za duže tekstove,
   naslovne kompozicije bez fotografije (pozivnica-art.js) i mobilni raspored. */

/* ───── 1. Boje: akcent za SITAN TEKST (--akc-t), za DUGMAD (--akc-btn / --na-akc) ─────
   Neke teme imaju svijetao ili pretaman akcent koji je lijep kao linija ili ploha,
   ali nečitak kao sitan tekst na pozadini. Ovdje je njegova čitljiva verzija (WCAG ≥ 4.5:1). */
[data-style="midnight-luxe"]  { --akc-btn:#E5C158; --na-akc:#0B0C10; --text-muted:#838A99; }
[data-style="noir"]           { --akc-t:#D94F65; --akc-btn:#9E2236; --na-akc:#FFFFFF; --akc-art:#C0394F; }
[data-style="chrome"]         { --akc-btn:#C4CBD2; --na-akc:#08090A; --text-muted:#7E868E; }
[data-style="acid"]           { --akc-btn:#CCFF00; --na-akc:#0A0A0B; --text-muted:#80878F; }
[data-style="horology"]       { --akc-btn:#D4B26F; --na-akc:#111215; --text-muted:#838A97; }
[data-style="art-deco"]       { --akc-btn:#E5C158; --na-akc:#051410; }
[data-style="nocturne"]       { --akc-btn:#D4AF37; --na-akc:#14100A; }
[data-style="swiss"]          { --akc-btn:#0047AB; --na-akc:#FFFFFF; }
[data-style="brutalist"]      { --akc-btn:#7C3AED; --na-akc:#FFFFFF; }
[data-style="zen"]            { --akc-t:#C22E2E; --akc-btn:#C22E2E; --na-akc:#FFFFFF; --text-muted:#6E6963; }
[data-style="archival"]       { --akc-btn:#4A5546; --na-akc:#FFFFFF; }
[data-style="risograph"]      { --akc-t:#CF0067; --akc-btn:#FF3399; --na-akc:#1A1C20; }
[data-style="concrete"]       { --akc-t:#A63700; --akc-btn:#FF5500; --na-akc:#121315; }
[data-style="vermilion"]      { --akc-t:#C22E2E; --akc-btn:#C22E2E; --na-akc:#FFFFFF; }
[data-style="editorial-warm"] { --akc-t:#736558; --akc-btn:#736558; --na-akc:#FFFFFF; }
[data-style="aurora"]         { --akc-t:#7F6420; --akc-btn:#7F6420; --na-akc:#FFFFFF; }
[data-style="wabi-sabi"]      { --akc-t:#9A4F3B; --akc-btn:#9A4F3B; --na-akc:#FFFFFF; }
[data-style="memphis"]        { --akc-t:#206DC7; --akc-btn:#4A90E2; --na-akc:#121212; }
[data-style="quiet-luxury"]   { --akc-t:#756752; --akc-btn:#756752; --na-akc:#FFFFFF; --text-muted:#6E6A66; }
[data-style="herbarium"]      { --akc-btn:#A64B3B; --na-akc:#FFFFFF; }
[data-style="warm-paper"]     { --akc-t:#7A6549; --akc-btn:#7A6549; --na-akc:#FFFFFF; --text-muted:#6D6B69; }

/* Sitan tekst u boji akcenta → čitljiva verzija */
html body .invite-eyebrow, html body #panel-invite .invite-hero .invite-eyebrow,
html body .invite-h, html body #panel-invite .invite-h,
html body .inv-tl-loc, html body .invite-odbroj, html body .inv-kum-uloga, html body .inv-uloga-naslov,
html body .kolona-grupa-naslov, html body .inv-meni-kat, html body .inv-ff-pitanje, html body .wishlist-cijena,
html body .result-table, html body .demo-badge, html body .rsvp-toggle-plus, html body .pjesma-hvala,
html body .invite-map-btn-sek, html body .kolona-share, html body .inv-faq-q::after,
html body.tema-sidebar-nav .tema-nav-item.active, html body.tema-split-hero .tema-nav-item.active,
html body.tema-editorial .tema-nav-item.active, html body .tema-mobile-nav button.active,
html body.tema-split-hero .tema-deco, html body.tema-editorial .tema-deco,
html body #panel-seat::before, html body #panel-rsvp::before, html body #panel-gallery::before {
  color: var(--akc-t, var(--accent));
}
html body .invite-odbroj, html body .invite-map-btn-sek { border-color: var(--akc-t, var(--accent)); }

/* Dugmad s punom bojom akcenta → uvijek čitak tekst */
html body.tema-sidebar-nav .btn-dark, html body.tema-split-hero .btn-dark, html body.tema-editorial .btn-dark,
html body.tema-sidebar-nav .rsvp-submit, html body.tema-split-hero .rsvp-submit, html body.tema-editorial .rsvp-submit {
  background: var(--akc-btn, var(--accent)) !important; color: var(--na-akc, var(--bg)) !important;
}
html body #inv-nav-link {
  background: var(--akc-btn, var(--accent)); color: var(--na-akc, #171310); border-color: var(--akc-btn, var(--accent));
}
html body .wishlist-btn, html body .pratnja-dupli-btn.da, html body .gost-stol.moj {
  background: var(--akc-btn, var(--accent)); color: var(--na-akc, #fff); border-color: var(--akc-btn, var(--accent));
}
html body .invite-map-btn:hover { background: var(--akc-btn, var(--accent)); color: var(--na-akc, #171310); }

/* ───── 2. Duži tekst (priča, lokacija, smještaj): nikad u fontu bez malih slova ───── */
/* Cinzel nema malih slova; Cormorant ima visoke „slovenske" kvačice (č, š, ž) koje u dužem
   bosanskom tekstu smetaju — za pasuse zato EB Garamond, istog karaktera, s mirnim kvačicama. */
[data-style="midnight-luxe"], [data-style="horology"], [data-style="art-deco"],
[data-style="wabi-sabi"], [data-style="quiet-luxury"], [data-style="warm-paper"], [data-style="vermilion"], [data-style="zen"] { --tekst-font: 'EB Garamond', Georgia, serif; }
[data-style="brutalist"] { --tekst-font: 'Public Sans', sans-serif; }
[data-style="concrete"] { --tekst-font: 'Inter', sans-serif; }
@media (min-width: 900px) { html body[data-style="concrete"] #panel-invite .invite-text { font-size: 15.5px; line-height: 1.75; } }
@media (min-width: 900px) {
  html body #panel-invite .invite-text { font-family: var(--tekst-font, var(--serif)); }
}
@media (min-width: 900px) {
html body[data-style="midnight-luxe"] #panel-invite .invite-text,
html body[data-style="horology"] #panel-invite .invite-text,
html body[data-style="art-deco"] #panel-invite .invite-text,
html body[data-style="wabi-sabi"] #panel-invite .invite-text, html body[data-style="quiet-luxury"] #panel-invite .invite-text,
html body[data-style="warm-paper"] #panel-invite .invite-text, html body[data-style="vermilion"] #panel-invite .invite-text,
html body[data-style="zen"] #panel-invite .invite-text { font-size: 18.5px; line-height: 1.75; }
}

/* ───── 3. Naslovna kompozicija kad nema fotografije ───── */
.ps-art { position: absolute; inset: 0; z-index: 0; color: var(--akc-art, var(--accent)); pointer-events: none; overflow: hidden; }
.ps-art-svg { display: block; width: 100%; height: 100%; }
.ps-art-svg text { font-kerning: normal; }
.tema-hero-placeholder.ima-art { background: var(--bg2) !important; }
html body.tema-sidebar-nav .event-head .tema-hero-placeholder.ima-art {
  background: radial-gradient(90% 60% at 50% 45%, var(--accent-soft), transparent 70%), var(--bg2) !important;
}
/* uredni prelaz s gornjim dijelom sidebara */
html body.tema-sidebar-nav .event-head .tema-hero-placeholder.ima-art::after {
  opacity: 1; background: linear-gradient(to bottom, var(--bg) 0%, transparent 16%, transparent 84%, color-mix(in srgb, var(--bg) 70%, transparent) 100%);
}
/* split-hero: kompozicija gore, tekst dolje na čistoj podlozi */
html body.tema-split-hero .tema-hero-col .tema-hero-media.cover.ima-art::after {
  opacity: 1; background: linear-gradient(to bottom, transparent 0%, transparent 50%, color-mix(in srgb, var(--bg2) 85%, transparent) 62%, var(--bg2) 72%);
}
/* editorial: baner kao otisnuta kartica */
html body.tema-editorial .event-head .tema-hero-placeholder.ima-art {
  background: var(--card-bg, #fff) !important; border: 1px solid var(--line); border-radius: 4px;
}
html body.tema-editorial .event-head .tema-hero-placeholder.ima-art::after { display: none; }
html body[data-style="aurora"].tema-editorial .event-head .tema-hero-placeholder.ima-art { background: #FBFAF8 !important; }

/* ───── 4. Mobitel ───── */
@media (max-width: 1000px) {
  /* split-hero: prava naslovnica preko skoro cijelog ekrana, imena odmah vidljiva */
  html body.tema-split-hero .tema-hero-col {
    height: auto; min-height: 78vh; min-height: 78svh; padding: 40px 24px 34px;
    border-bottom: 1px solid var(--line);
  }
  html body.tema-split-hero .tema-hero-names { font-size: 42px; }
  /* bez fotografije: kompozicija kao zaseban blok iznad imena (ne ispod teksta) */
  html body.tema-split-hero .tema-hero-col.bez-foto {
    display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
    min-height: 0; padding-top: 0;
  }
  html body.tema-split-hero .tema-hero-col.bez-foto .tema-hero-media.cover {
    position: relative; inset: auto; flex: none; height: min(94vw, 400px, 62vh); margin: 0 -24px 18px;
  }
  html body.tema-split-hero .tema-hero-col.bez-foto .tema-hero-media.cover.ima-art::after { display: none; }
  html body.tema-split-hero .tema-hero-cd .l { white-space: nowrap; }
  /* sidebar-nav: traka s kompozicijom/fotografijom ispod imena */
  html body.tema-sidebar-nav .event-head { padding-bottom: 0; }
  html body.tema-sidebar-nav .event-head .tema-hero-media {
    height: 280px; min-height: 0; flex: none; width: calc(100% + 40px); margin: 22px -20px 0;
  }
}
@media (max-width: 700px) {
  html body.tema-editorial .event-head { padding: 44px 20px 20px; }
  html body.tema-editorial .event-head .tema-hero-media { height: 210px; margin-top: 24px; }
  .psa-rub { display: none; }
}

/* ───── 5. Desna kolona (sidebar teme): jasan poziv na akciju umjesto praznine ───── */
.tema-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding-top: 26px; border-top: 1px solid var(--line); }
.tema-cta-btn {
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 15px 18px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--akc-btn, var(--accent)); color: var(--na-akc, var(--bg));
  transition: transform .2s ease, box-shadow .2s ease;
}
.tema-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px var(--akc-btn, var(--accent)); }
.tema-cta-link {
  font-family: var(--sans); font-size: 13px; font-weight: 500; text-align: left; padding: 6px 0;
  background: none; border: 0; cursor: pointer; color: var(--text-main);
}
.tema-cta-link span { color: var(--akc-t, var(--accent)); transition: margin .2s ease; }
.tema-cta-link:hover span { margin-left: 4px; }
@media (max-width: 1000px) { .tema-cta { display: none; } }

/* veći brojevi i ukrasna slova — i dalje moraju biti vidljivi (npr. Noir) */
html body[class*="tema-"] .event-names .amp, html body[class*="tema-"] .tema-hero-names .amp,
html body[class*="tema-"] .event-monogram, html body[class*="tema-"] .tema-hero-mono,
html body.tema-sidebar-nav .tema-countdown .cd-num, html body.tema-split-hero .tema-hero-cd .n,
html body[class*="tema-"] .inv-tl-time, html body[class*="tema-"] #panel-invite .inv-tl-time { color: var(--akc-t, var(--accent)); }
html body[class*="tema-"] .event-monogram, html body[class*="tema-"] .tema-hero-mono { border-color: var(--akc-t, var(--accent)); }

/* ───── 6. Ostali paneli: kompaktno zaglavlje umjesto velike naslovnice ───── */
html body.tema-editorial.tema-sek .event-head .tema-hero-media { display: none; }
html body.tema-editorial.tema-sek .event-head { padding-top: 34px; padding-bottom: 8px; }
@media (max-width: 1000px) {
  html body.tema-sidebar-nav.tema-sek .event-head .tema-hero-media { display: none; }
  html body.tema-sidebar-nav.tema-sek .event-head { padding-bottom: 22px; gap: 10px; }
  html body.tema-sidebar-nav.tema-sek .event-monogram { width: 56px; height: 56px; font-size: 18px; }
  html body.tema-split-hero.tema-sek .tema-hero-col { min-height: 0; padding: 26px 24px 22px; display: block; }
  html body.tema-split-hero.tema-sek .tema-hero-col .tema-hero-media,
  html body.tema-split-hero.tema-sek .tema-hero-col .tema-deco,
  html body.tema-split-hero.tema-sek .tema-hero-col .tema-hero-mono,
  html body.tema-split-hero.tema-sek .tema-hero-col .tema-hero-cd { display: none; }
  html body.tema-split-hero.tema-sek .tema-hero-names { font-size: 30px; margin-bottom: 8px; }
  html body.tema-split-hero.tema-sek .tema-hero-meta { margin-bottom: 0; }
}

/* ───── 7. Niski ekrani računara (laptop 1366×657, 1280×720…) ───── */
@media (min-width: 1001px) and (max-height: 820px) {
  /* split-hero bez fotografije: kompozicija samo u gornjem dijelu, tekst dolje — bez preklapanja */
  html body.tema-split-hero .tema-hero-col.bez-foto .tema-hero-media.cover { bottom: auto; height: calc(100% - 390px); min-height: 170px; }
  html body.tema-split-hero .tema-hero-col.bez-foto .tema-hero-media.cover.ima-art::after { display: none; }
  html body.tema-split-hero .tema-hero-col { padding-top: 36px; padding-bottom: 36px; }
}
@media (min-width: 1001px) and (max-height: 780px) {
  html body.tema-sidebar-nav .tema-right { padding: 34px 32px; gap: 20px; overflow-y: auto; }
  html body.tema-sidebar-nav .tema-countdown { padding: 14px 16px; }
  html body.tema-sidebar-nav .tema-countdown .cd-num { font-size: 40px; }
  html body.tema-sidebar-nav .tema-nav { gap: 10px; margin-top: 6px; }
  .tema-cta { padding-top: 18px; }
}

/* Osnovni paket: bez galerije gostiju (Pro funkcija) */
body.bez-galerije [data-target="gallery"], body.bez-galerije .tab[data-panel="gallery"],
body.bez-galerije #panel-gallery { display: none !important; }

/* ───── 8. Stari stilovi (klasik, romansa…) — čitljiv akcent za sitan tekst i dugmad ───── */
[data-style="klasik"], [data-style="custom"] { --akc-t:#886A3A; --akc-btn:#C2A370; --na-akc:#1A1A1A; }
[data-style="rustik"]      { --akc-t:#626D48; --akc-btn:#626D48; --na-akc:#FFFFFF; }
[data-style="romanticno"]  { --akc-t:#A05555; --akc-btn:#A05555; --na-akc:#FFFFFF; }
[data-style="obala"]       { --akc-t:#43708F; --akc-btn:#43708F; --na-akc:#FFFFFF; }
[data-style="bajka"]       { --akc-t:#805D8E; --akc-btn:#805D8E; --na-akc:#FFFFFF; }
[data-style="lavanda"]     { --akc-t:#6F61A3; --akc-btn:#6F61A3; --na-akc:#FFFFFF; }
[data-style="koraljna"]    { --akc-t:#B03A5E; --akc-btn:#B03A5E; --na-akc:#FFFFFF; }
[data-style="romansa"]     { --akc-t:#A05D10; --akc-btn:#EC9C41; --na-akc:#1A1A1A; }
[data-style="elegantno"], [data-style="zlatna-noc"], [data-style="suma"] { --na-akc:#1A1A1A; }

/* Odabrana opcija dolaska — čitljivo u svim temama */
html body .rsvp-opt.selected, html body[class*="tema-"] .rsvp-opt.selected { color: var(--akc-t, var(--accent)); border-color: var(--akc-t, var(--accent)); }
html body .rsvp-opt:focus-visible { outline: 2px solid var(--akc-t, var(--accent)); outline-offset: 2px; }

/* ───── 9. Dugi nazivi i imena ───── */
html body .event-names, html body .tema-hero-names, html body .invite-couple, html body .hero-names { overflow-wrap: anywhere; hyphens: auto; }
html body.duga-imena.tema-split-hero .tema-hero-names { font-size: clamp(28px, 3.4vw, 40px); }
html body.duga-imena.tema-editorial .event-names { font-size: clamp(30px, 4vw, 44px); }
html body.duga-imena.tema-sidebar-nav .event-names { font-size: 19px; }
@media (max-width: 1000px) { html body.duga-imena.tema-split-hero .tema-hero-names { font-size: 30px; } }

/* ───── 10. Dodir i forme na mobitelu ───── */
html body .result-reset { min-height: 44px; padding: 10px 6px; display: inline-flex; align-items: center; }
html body .wishlist-btn { min-height: 40px; background: var(--akc-btn, var(--accent)); color: var(--na-akc, #fff); }
html body .wishlist-btn.wishlist-btn-otkazi { background: transparent; color: var(--akc-t, var(--accent)); border-color: var(--akc-t, var(--accent)); }
/* Jezik (BS/EN) na mobitelu u temama: manji, s podlogom — ne pokriva naslove */
@media (max-width: 1000px) {
  html body[class*="tema-"] #ps-kontrole { top: 10px; right: 10px; }
  html body[class*="tema-"] #ps-kontrole .footer-lang { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 999px; }
}
html body .rsvp-brojac { color: var(--akc-t, var(--accent)); background: color-mix(in srgb, var(--akc-t, var(--accent)) 11%, transparent); }
html body .pjesma-brojac strong { color: var(--akc-t, var(--accent)); }
html body .gallery-upload:hover .gallery-upload-ic { background: var(--akc-btn, var(--accent)); color: var(--na-akc, #fff); }

/* ───── 11. Satnica: linija vremena (vrijeme lijevo, čvor na liniji, opis desno) ───── */
html body[class*="tema-"] #panel-invite .invite-timeline { max-width: 560px; margin: 0 auto; }
html body[class*="tema-"] #panel-invite .inv-tl-item {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.25fr); row-gap: 4px; column-gap: 0;
  align-items: baseline; text-align: left; padding: 15px 0; border: 0; position: relative;
}
html body[class*="tema-"] #panel-invite .inv-tl-head { display: contents; }
html body[class*="tema-"] #panel-invite .inv-tl-time { grid-column: 1; grid-row: 1 / span 3; justify-self: end; align-self: start; text-align: right; font-size: 21px; line-height: 1.2; min-width: 0; font-variant-numeric: lining-nums; }
html body[class*="tema-"] #panel-invite .inv-tl-label { grid-column: 3; grid-row: 1; text-align: left; font-size: 16px; line-height: 1.4; letter-spacing: .01em; }
html body[class*="tema-"] #panel-invite .inv-tl-loc { grid-column: 3; grid-row: 2; text-align: left; }
html body[class*="tema-"] #panel-invite .inv-tl-desc { grid-column: 3; grid-row: 3; text-align: left; }
html body[class*="tema-"] #panel-invite .inv-tl-item::before {
  content: ''; position: absolute; left: 50%; left: calc((100% - 40px) * 1 / 2.25 + 20px); top: 24px; width: 9px; height: 9px; margin: 0 0 0 -4.5px;
  border-radius: 50%; background: var(--akc-t, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akc-t, var(--accent)) 16%, transparent); z-index: 1;
}
html body[class*="tema-"] #panel-invite .inv-tl-item::after {
  content: ''; position: absolute; left: calc((100% - 40px) * 1 / 2.25 + 20px); top: 0; bottom: 0; width: 1px; margin-left: -.5px;
  background: color-mix(in srgb, var(--akc-t, var(--accent)) 38%, transparent); transform-origin: top;
}
html body[class*="tema-"] #panel-invite .inv-tl-item:first-child::after { top: 28px; }
html body[class*="tema-"] #panel-invite .inv-tl-item:last-child::after { bottom: calc(100% - 28px); }
html body[class*="tema-"] #panel-invite .inv-tl-item:only-child::after { display: none; }
html.ps-anim body[class*="tema-"] #panel-invite .inv-tl-item.pa-r::after { transition: transform 1.1s var(--pa-ease, ease) calc(var(--pa-k, 0s) + .2s); }
html.ps-anim body[class*="tema-"] #panel-invite .inv-tl-item.pa-r:not(.pa-in)::after { transform: scaleY(0); }
html.ps-anim body[class*="tema-"] #panel-invite .inv-tl-item.pa-r::before { transition: scale .6s cubic-bezier(.34, 1.56, .64, 1) calc(var(--pa-k, 0s) + .15s); }
html.ps-anim body[class*="tema-"] #panel-invite .inv-tl-item.pa-r:not(.pa-in)::before { scale: 0; }
@media (max-width: 640px) {
  html body[class*="tema-"] #panel-invite .inv-tl-item { grid-template-columns: 74px 30px minmax(0, 1fr); padding: 13px 0; }
  html body[class*="tema-"] #panel-invite .inv-tl-item::before, html body[class*="tema-"] #panel-invite .inv-tl-item::after { left: 89px; }
  html body[class*="tema-"] #panel-invite .inv-tl-time { font-size: 18px; }
  html body[class*="tema-"] #panel-invite .inv-tl-label { font-size: 15px; }
}

/* ───── 12. Sidebar teme na desktopu: velika imena u središtu, lijevo amblem i kompozicija ───── */
@media (min-width: 1001px) {
  html body.tema-sidebar-nav #panel-invite .invite-hero .invite-couple {
    display: block !important; font-size: clamp(44px, 4.3vw, 70px) !important; line-height: 1.04; margin: 4px 0 16px; color: var(--text-main);
  }
  html body.tema-sidebar-nav #panel-invite .invite-hero .invite-couple .amp { color: var(--akc-t, var(--accent)); }
  html body.tema-sidebar-nav #panel-invite .invite-hero .invite-date { display: block !important; margin-bottom: 4px; }
  html body.tema-sidebar-nav .event-head .event-names,
  html body.tema-sidebar-nav .event-head .event-meta { display: none; }
  html body.tema-sidebar-nav .event-head { gap: 22px; }
}

/* ───── 13. Materijal: zrno papira (papirne teme) i dubina (tamne teme) ───── */
html body:is([data-style="warm-paper"], [data-style="herbarium"], [data-style="archival"], [data-style="wabi-sabi"], [data-style="editorial-warm"], [data-style="quiet-luxury"], [data-style="risograph"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .22 0 0 0 0 .16 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
html body.tema-sidebar-nav.tema-tamna .panel.active,
html body.tema-split-hero.tema-tamna .panel.active {
  background-image: radial-gradient(ellipse 70% 42% at 50% 0%, color-mix(in srgb, var(--akc-btn, var(--accent)) 9%, transparent), transparent 70%);
}