/* ===== Теми ===== */
.theme-elegant { --bg:#faf6ef; --card:#fffdf9; --ink:#3d3428; --muted:#8a7d6b; --accent:#b8925a; --hero-ink:#fff; --overlay:rgba(40,30,15,.45); --script:'Great Vibes', cursive; --serif:'Cormorant Garamond', serif; }
.theme-floral  { --bg:#fdf3f4; --card:#fff; --ink:#4a2e35; --muted:#a07a83; --accent:#d4848f; --hero-ink:#fff; --overlay:rgba(90,30,45,.40); --script:'Great Vibes', cursive; --serif:'Cormorant Garamond', serif; }
.theme-modern  { --bg:#15161a; --card:#1f2026; --ink:#ecebe7; --muted:#9b9a94; --accent:#d9b56c; --hero-ink:#fff; --overlay:rgba(0,0,0,.55); --script:'Cormorant Garamond', serif; --serif:'Cormorant Garamond', serif; }
.theme-nature  { --bg:#f2f5ef; --card:#fbfcf9; --ink:#2f3b2c; --muted:#77866f; --accent:#6f8f5c; --hero-ink:#fff; --overlay:rgba(25,40,20,.45); --script:'Great Vibes', cursive; --serif:'Cormorant Garamond', serif; }
.theme-kids    { --bg:#fff8e8; --card:#fff; --ink:#35406b; --muted:#7a83a8; --accent:#ff7a59; --hero-ink:#fff; --overlay:rgba(40,60,140,.35); --script:'Comfortaa', sans-serif; --serif:'Comfortaa', sans-serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.invite { margin:0; background:var(--bg); color:var(--ink); font-family:'Montserrat', sans-serif; font-size:16px; line-height:1.7; }
h1,h2,h3 { font-family:var(--serif); font-weight:600; margin:0; }

.preview-bar { position:sticky; top:0; z-index:50; background:#222; color:#fff; font-size:13px; padding:8px 16px; display:flex; justify-content:space-between; gap:12px; }
.preview-bar a { color:#ffd27a; }

/* ===== Hero ===== */
.inv-hero { position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; padding:60px 20px;
  color:var(--hero-ink); background: linear-gradient(var(--overlay), var(--overlay)), var(--cover, linear-gradient(135deg, var(--accent), var(--ink))); background-size:cover; background-position:center; }
.inv-hero-inner { max-width:720px; }
.inv-for { text-transform:uppercase; letter-spacing:.3em; font-size:12px; margin:0; opacity:.85; }
.inv-guest { font-family:var(--serif); font-size:clamp(24px,5vw,34px); margin:0 0 28px; font-style:italic; }
.inv-type { text-transform:uppercase; letter-spacing:.35em; font-size:13px; margin:0 0 10px; }
.inv-hosts { font-family:var(--script); font-weight:400; font-size:clamp(48px,11vw,96px); line-height:1.1; text-shadow:0 2px 20px rgba(0,0,0,.25); }
.theme-modern .inv-hosts, .theme-kids .inv-hosts { font-weight:700; font-size:clamp(40px,9vw,80px); }
.inv-title { font-family:var(--serif); font-size:clamp(20px,4vw,28px); margin:10px 0 0; }
.inv-date { margin:26px auto 0; display:inline-block; border-top:1px solid currentColor; border-bottom:1px solid currentColor; padding:6px 22px; letter-spacing:.25em; font-size:15px; }
.scroll-hint { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:var(--hero-ink); text-decoration:none; font-size:34px; animation:bob 2s infinite; }
@keyframes bob { 50% { transform:translate(-50%,8px); } }

/* ===== Секции ===== */
main { padding:20px 16px 80px; }
.block { max-width:680px; margin:0 auto; padding:56px 0 8px; text-align:center; }
.block.wide { max-width:960px; }
.block h2 { font-size:clamp(30px,6vw,40px); color:var(--accent); margin-bottom:24px; }
.ornament { color:var(--accent); font-size:30px; margin-bottom:12px; }
.message p { font-family:var(--serif); font-size:clamp(19px,3.6vw,23px); margin:0 0 .6em; }
.muted { color:var(--muted); }

.countdown { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.countdown div { background:var(--card); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius:14px; width:84px; padding:14px 0; }
.countdown b { display:block; font-family:var(--serif); font-size:34px; line-height:1; color:var(--accent); }
.countdown span { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }

.details { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:22px; }
.details > div { background:var(--card); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:4px; box-shadow:0 6px 24px rgba(0,0,0,.05); }
.details .label { text-transform:uppercase; font-size:11px; letter-spacing:.25em; color:var(--accent); }
.details strong { font-family:var(--serif); font-size:22px; }

.btn-outline, .btn-primary { display:inline-block; border-radius:999px; padding:11px 26px; font:600 14px 'Montserrat',sans-serif; text-decoration:none; cursor:pointer; letter-spacing:.03em; }
.btn-outline { border:1.5px solid var(--accent); color:var(--accent); margin-top:14px; }
.btn-primary { border:0; background:var(--accent); color:#fff; }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }

.timeline { list-style:none; padding:0; margin:0 auto; text-align:left; max-width:460px; }
.timeline li { display:flex; gap:20px; padding:0 0 22px; position:relative; }
.timeline li::before { content:''; position:absolute; left:72px; top:12px; bottom:-8px; border-left:1px dashed var(--accent); }
.timeline li:last-child::before { display:none; }
.timeline .t { width:52px; flex-shrink:0; text-align:right; font-weight:600; color:var(--accent); }
.timeline div { padding-left:22px; position:relative; }
.timeline div::before { content:''; position:absolute; left:-5px; top:9px; width:11px; height:11px; border-radius:50%; background:var(--accent); }
.timeline strong { font-family:var(--serif); font-size:20px; }
.timeline p { margin:2px 0 0; color:var(--muted); font-size:14px; }

.map { border-radius:16px; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.08); }
.map iframe { width:100%; height:320px; border:0; display:block; }

.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.gallery-item { padding:0; border:0; background:none; cursor:zoom-in; aspect-ratio:1; overflow:hidden; border-radius:12px; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.gallery-item:hover img { transform:scale(1.05); }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.88); display:flex; align-items:center; justify-content:center; z-index:100; cursor:zoom-out; padding:20px; }
.lightbox[hidden] { display:none; }
.lightbox img { max-width:100%; max-height:100%; border-radius:8px; }

.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.info-grid > div { background:var(--card); border-radius:16px; padding:24px; }
.info-grid h3 { color:var(--accent); font-size:24px; margin-bottom:8px; }
.info-grid p { margin:0 0 4px; }

.rsvp-form { background:var(--card); border-radius:18px; padding:26px; text-align:left; display:flex; flex-direction:column; gap:16px; box-shadow:0 6px 24px rgba(0,0,0,.06); }
.rsvp-choice { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rsvp-choice label { cursor:pointer; }
.rsvp-choice input { position:absolute; opacity:0; }
.rsvp-choice span { display:block; text-align:center; padding:12px; border:1.5px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius:12px; font-weight:500; }
.rsvp-choice input:checked + span { background:var(--accent); border-color:var(--accent); color:#fff; }
.rsvp-choice input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.field { display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--muted); }
.field input, .field textarea { font:inherit; color:var(--ink); background:var(--bg); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:10px; padding:10px 12px; }
.rsvp-done { background:var(--card); border:1.5px solid var(--accent); border-radius:16px; padding:22px; font-family:var(--serif); font-size:22px; }

.closing-note { font-family:var(--script); font-size:clamp(28px,6vw,40px); color:var(--accent); margin:0 0 12px; line-height:1.3; }
.theme-modern .closing-note, .theme-kids .closing-note { font-family:var(--serif); font-size:26px; }

.music-toggle { position:fixed; right:18px; bottom:18px; width:50px; height:50px; border-radius:50%; border:0; background:var(--accent); color:#fff; font-size:22px; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.25); z-index:40; }
.music-toggle.playing { animation:spin 4s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } .scroll-hint, .music-toggle.playing { animation:none; } }