/* ============================================================
   EVENTIPO — Convite & RSVP styles
   ============================================================ */
.iv-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; align-items: start; }
.iv-editor { background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.iv-actions { display: flex; gap: 10px; margin-top: 16px; }
.iv-zapier { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 10.5px; color: var(--ink-4); background: var(--bg-inset); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 10px 12px; }
.iv-zapier svg { color: #FF4F00; flex-shrink: 0; }
.iv-slug { display: flex; align-items: center; background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.iv-slug-pre { font-size: 11.5px; color: var(--ink-4); padding-left: 11px; white-space: nowrap; }
.iv-slug .bud-inp { flex: 1; }

.iv-preview-wrap { position: relative; }
.iv-preview-tag { position: absolute; top: -2px; left: 2px; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); }

/* invite card */
.iv-card { background: radial-gradient(140% 100% at 50% 0%, #14171e, #08090c); border: 1px solid var(--gold-line); border-radius: var(--r-xl); padding: 40px 36px; text-align: center; margin-top: 16px; box-shadow: var(--shadow-lg); }
.iv-card-logo { display: flex; justify-content: center; margin-bottom: 22px; }
.iv-eyebrow { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.iv-card-title { font-size: 32px; color: var(--ink); font-weight: 500; margin: 16px 0 10px; letter-spacing: -0.01em; line-height: 1.1; text-wrap: balance; }
.iv-card-date { font-size: 15px; color: var(--gold); }
.iv-card-venue { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.iv-card-body { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin: 26px auto; max-width: 380px; text-wrap: pretty; font-weight: 300; }
.iv-card-dress { font-size: 11px; color: var(--ink-4); letter-spacing: 0.04em; }
.iv-card-rsvp { margin-top: 24px; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #1a1505; border: 0; padding: 13px 32px; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--sans); }
.iv-card-host { font-size: 10.5px; color: var(--ink-5, var(--ink-4)); margin-top: 28px; letter-spacing: 0.04em; }

/* phone RSVP landing */
.iv-phone { margin: 16px auto 0; width: 340px; max-width: 100%; background: #050608; border: 9px solid #1a1d24; border-radius: 38px; box-shadow: var(--shadow-lg); padding: 0; overflow: hidden; }
.iv-phone-screen { background: radial-gradient(120% 80% at 50% 0%, #14171e, #08090c); border-radius: 28px; min-height: 580px; overflow-y: auto; }
.iv-landing { padding: 38px 26px 30px; text-align: center; }
.iv-landing-logo { display: flex; justify-content: center; margin-bottom: 18px; transform: scale(0.85); }
.iv-landing-title { font-size: 25px; color: var(--ink); font-weight: 500; margin: 14px 0 8px; line-height: 1.12; text-wrap: balance; }
.iv-landing-body { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); margin: 18px 0 22px; text-wrap: pretty; }
.iv-landing-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.iv-inp { background: rgba(255,255,255,0.04); border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; color: var(--ink); font-family: var(--sans); font-size: 13px; outline: 0; }
.iv-inp:focus { border-color: var(--gold-line); }
.iv-inp::placeholder { color: var(--ink-4); }
.iv-attend { margin: 4px 0; }
.iv-attend-lab { font-size: 11px; color: var(--ink-4); font-family: var(--mono); letter-spacing: 0.06em; }
.iv-attend-btns { display: flex; gap: 8px; margin-top: 8px; }
.iv-att { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px; color: var(--ink-2); font-size: 12.5px; cursor: pointer; transition: all .14s; }
.iv-att[data-on="true"] { background: var(--gold-glow); border-color: var(--gold); color: var(--gold); }
.iv-att.no[data-on="true"] { background: oklch(0.58 0.18 28 / 0.12); border-color: var(--neg); color: var(--neg); }
.iv-submit { margin-top: 8px; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #1a1505; border: 0; padding: 14px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--sans); }
.iv-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.iv-thanks { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 580px; gap: 10px; text-align: center; padding: 40px; position: relative; }
.iv-thanks h2 { font-size: 20px; color: var(--ink); }
.iv-thanks p { font-size: 12px; color: var(--ink-3); }
.iv-reset { position: absolute; bottom: 16px; right: 16px; background: none; border: 0; color: var(--ink-4); font-size: 18px; cursor: pointer; }

@media (max-width: 980px) {
  .iv-split { grid-template-columns: 1fr; }
}

/* email sequence */
.em-stages { display: flex; gap: 8px; flex-wrap: wrap; }
.em-stage { background: var(--bg-surface); border: 1px solid var(--line); color: var(--ink-3); border-radius: 99px; padding: 8px 16px; font-size: 12px; cursor: pointer; transition: all .14s; }
.em-stage:hover { border-color: var(--line-strong); color: var(--ink); }
.em-stage[data-active="true"] { background: var(--gold-glow); border-color: var(--gold-line); color: var(--gold); }
.em-note { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); background: var(--bg-inset); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 10px 12px; }
.em-note svg { color: var(--gold); flex-shrink: 0; }
.em-html { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; resize: vertical; }
.em-vars { font-size: 10px; color: var(--ink-4); margin-top: 8px; }
.em-preview { margin-top: 16px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: #f4f4f4; }
.em-frame { width: 100%; height: 520px; border: 0; display: block; background: #f4f4f4; }