/* Convites: área do organizador (views/invites.html), página do convidado (views/invite.html) e a prévia
   do convite animado (<invite-animation>: vídeo-base do template → fade → card HTML com o nome). */

/* ---- abas do editor do chá ---- */
.ed-tabs { display:flex; gap:4px; margin-top:22px; border-bottom:1px solid var(--line); }
.ed-tabs a { padding:10px 14px; margin-bottom:-1px; border-bottom:2px solid transparent; color:var(--muted); font-size:14px; font-weight:600; text-decoration:none; }
.ed-tabs a:hover { color:var(--ink); }
.ed-tabs a.active { color:var(--ink); border-bottom-color:var(--accent); cursor:default; }

/* ---- área do organizador ---- */
.inv-head { padding:34px 0 0; background:linear-gradient(180deg,var(--hero-from,#fbf6ef),var(--hero-to,#fff)); }
.inv-head-inner,.inv-wrap { width:min(1080px,calc(100% - 32px)); margin:0 auto; }
.inv-head h1 { margin:12px 0 6px; font-size:clamp(32px,4.4vw,48px); line-height:1.05; }
.inv-head-meta { margin:0; color:var(--muted); font-size:14px; }
.inv-head-meta span + span:before { content:'·'; margin:0 8px; opacity:.6; }
.inv-ss .inv-head { padding-bottom:18px; }
.inv-wrap { padding:28px 0 100px; }
.inv-state { color:var(--muted); }
.inv-eyebrow { display:inline-block; color:var(--accent-dark); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.inv-hint { display:block; margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }

.inv-generic { display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start; }
.inv-generic h2 { margin:6px 0 4px; font-size:26px; overflow-wrap:anywhere; }
.inv-generic-meta { margin:0; color:var(--muted); font-size:14px; }
.inv-link { margin-top:14px; }
.inv-link input { width:100%; font-size:13px; }
.inv-generic-edit { margin-top:14px; }
.inv-generic-edit textarea { width:100%; min-height:96px; }
.inv-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; }
.inv-actions .link-button { font-size:13px; }

.inv-guests { margin-top:34px; }
.inv-guests-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:14px; }
.inv-guests-head h2 { margin:0; font-size:28px; }
.inv-summary { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; }
.inv-pill { display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.inv-pill.is-pending { color:#7a5a12; background:#f8eccb; }
.inv-pill.is-accepted { color:#2f7a4c; background:#e2f1e7; }
.inv-pill.is-declined { color:#8f3a2f; background:#f6e1dd; }
.inv-empty { padding:26px; border:1px dashed var(--line); border-radius:20px; background:var(--paper); }
.inv-empty h3 { margin:0 0 6px; font-size:20px; }
.inv-empty p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }

.inv-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.inv-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 18px; padding:16px 18px; border:1px solid var(--line); border-radius:18px; background:var(--paper); }
.inv-row-main { min-width:0; flex:1 1 280px; }
.inv-row-who { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.inv-row-who strong { font-size:17px; overflow-wrap:anywhere; }
.inv-row-contact { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; color:var(--muted); font-size:13px; }
.inv-row-contact b { font-weight:600; color:var(--ink); opacity:.7; margin-right:3px; }
.inv-row-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.inv-row-confirm { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:14px; }
.inv-more[open] { flex-basis:100%; }
.inv-more > summary { list-style:none; cursor:pointer; }
.inv-more > summary::-webkit-details-marker { display:none; }
/* abre dentro da linha (nunca cortado no rodapé do celular) */
.inv-more-menu { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; padding:8px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.inv-more-menu button { padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:none; color:var(--ink); font-size:13px; cursor:pointer; }
.inv-more-menu button:hover { background:var(--accent-soft); }
.inv-more-menu .is-danger { color:#a33a2f; }

.inv-form { display:grid; gap:6px; text-align:left; }
.inv-form input,.inv-form textarea { width:100%; }
.inv-form label { margin-top:8px; }
.inv-form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.inv-form .link-button { justify-self:start; margin-top:8px; font-size:13px; }
.inv-form .btn-block { margin-top:14px; }
.inv-form-preview { display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:start; margin-top:14px; }
.inv-form-modal,.inv-preview-modal { max-height:calc(100vh - 40px); overflow:auto; }
.inv-message { margin:14px 0 0; padding:12px 14px; border-radius:14px; background:var(--ivory,#faf6f0); color:var(--ink); font:13px/1.55 var(--sans); white-space:pre-wrap; overflow-wrap:anywhere; text-align:left; }
.inv-form-preview .inv-message { margin:0; }
.inv-preview-modal invite-animation { display:block; width:min(300px,100%); margin:6px auto 0; }

@media (max-width:720px) {
  .inv-generic { grid-template-columns:1fr; }
  .inv-generic-art { max-width:240px; }
  .inv-form-row,.inv-form-preview { grid-template-columns:1fr; }
  .inv-form-preview invite-animation { max-width:200px; }
  .inv-row-actions { width:100%; }
}

/* ---- página do convidado ---- */
.rsvp { display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:32px; align-items:start; width:min(940px,calc(100% - 32px)); margin:0 auto; padding:40px 0 90px; }
.rsvp-panel { padding:26px; border:1px solid var(--line); border-radius:24px; background:var(--paper); }
.rsvp-title { margin:0 0 16px; font-size:clamp(28px,4vw,40px); line-height:1.08; overflow-wrap:anywhere; }
.rsvp-data { display:grid; gap:10px; margin:0 0 14px; }
.rsvp-data div { display:grid; grid-template-columns:110px 1fr; gap:10px; }
.rsvp-data dt { color:var(--muted); font-size:13px; }
.rsvp-data dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
.rsvp-desc { margin:0 0 16px; color:var(--muted); line-height:1.55; white-space:pre-line; }
.rsvp-answer { display:grid; gap:10px; padding-top:16px; border-top:1px solid var(--line); }
.rsvp-buttons { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rsvp-buttons .btn { min-height:50px; font-size:16px; }
.rsvp-status { margin:0; padding:12px 14px; border-radius:14px; color:#2f7a4c; background:#e2f1e7; }
.rsvp-status.is-declined { color:#7a4a2f; background:#f6ebe1; }
.rsvp-answer .link-button { justify-self:start; font-size:13px; }
.rsvp-next { margin-top:16px; }
@media (max-width:760px) {
  .rsvp { grid-template-columns:1fr; gap:20px; padding-top:24px; }
  .rsvp invite-animation { display:block; width:100%; max-width:320px; margin:0 auto; }
}

/* ---- <invite-animation>: vídeo-base → fade → card com o nome ----
   Template e tempos: www/js/services/invite-templates.js. O nome usa unidades do contêiner (cqi): a mesma
   proporção na miniatura do organizador (150–220px) e na página do convidado (até 320px). */
invite-animation { display:block; }
.iva { --iva-fade:.6s; --iva-cream:#fbf6ee; --iva-peach:#f3d3c2; --iva-peach-dark:#a8735d; --iva-green:#6f8f6a; --iva-ink:#4b382f; --iva-muted:#76615a;
  display:grid; gap:10px; justify-items:center; }
.iva-stage { position:relative; width:100%; aspect-ratio:9 / 16; overflow:hidden; container-type:inline-size; border-radius:22px; background:var(--iva-cream);
  box-shadow:0 22px 44px -28px rgba(75,56,47,.55); border:1px solid #eadfd3; isolation:isolate; }
.iva.is-compact .iva-stage { border-radius:16px; }
.iva-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:var(--iva-cream);
  transition:opacity var(--iva-fade) ease, filter var(--iva-fade) ease; }
.iva:not(.has-video) .iva-video,.iva.is-compact .iva-video { display:none; }
.iva.is-reveal .iva-video { opacity:0; filter:blur(6px); }
.iva-mask { position:absolute; left:0; right:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .2s ease; }
.iva-mask.is-on { opacity:1; }
.iva-mask-bottom { bottom:0; height:36%; background:linear-gradient(180deg,rgba(251,246,238,0) 0%,rgba(251,246,238,.94) 30%,var(--iva-cream) 44%); }
.iva.is-reveal .iva-mask { opacity:0; }

.iva-reveal { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.6cqi;
  padding:12cqi 9cqi; text-align:center; color:var(--iva-ink); opacity:0; pointer-events:none; transform:scale(1.02);
  background:radial-gradient(90% 55% at 50% 30%,#fff 0%,rgba(255,255,255,0) 70%),radial-gradient(70% 40% at 50% 100%,rgba(243,211,194,.45),rgba(243,211,194,0)),var(--iva-cream);
  transition:opacity var(--iva-fade) ease, transform var(--iva-fade) ease; }
.iva.is-reveal .iva-reveal { opacity:1; pointer-events:auto; transform:none; }
.iva.is-instant .iva-reveal,.iva.is-instant .iva-video { transition-duration:.2s; }
/* folhas nos cantos */
.iva-reveal:before,.iva-reveal:after { content:''; position:absolute; width:30cqi; height:45cqi; background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 120'%3E%3Cg fill='%238fa889' opacity='.85'%3E%3Cpath d='M10 118C20 80 30 50 60 8' stroke='%237d9677' stroke-width='2' fill='none'/%3E%3Cpath d='M22 86c-14-4-20-16-18-26 12 2 20 12 18 26z'/%3E%3Cpath d='M30 64c12-8 26-6 32 2-10 8-24 8-32-2z'/%3E%3Cpath d='M36 50c-12-6-16-18-12-28 10 4 16 16 12 28z'/%3E%3Cpath d='M46 32c10-8 22-8 28-2-8 8-20 8-28 2z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; pointer-events:none; }
.iva-reveal:before { left:-4cqi; bottom:-4cqi; }
.iva-reveal:after { right:-4cqi; top:-3cqi; transform:rotate(180deg); }
.iva-art { width:34cqi; aspect-ratio:120 / 96; background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96' fill='none' stroke='%239a7563' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 10c-5 6 5 9 0 16M62 6c-5 6 5 9 0 16'/%3E%3Cpath d='M20 38h68v8c0 20-14 34-34 34S20 66 20 46z'/%3E%3Cpath d='M88 46h6a10 10 0 0 1 0 20h-9'/%3E%3Cpath d='M12 84h84'/%3E%3Cpath d='M76 38l14 18' stroke-width='1.6'/%3E%3Cpath d='M84 54h16l3 6v14H81V60z' fill='%23f3d3c2'/%3E%3Ccircle cx='92' cy='60' r='1.6' fill='%239a7563'/%3E%3C/svg%3E") center / contain no-repeat; margin-bottom:2cqi; }
.iva-kicker { margin:0; font-family:var(--display); font-size:6.4cqi; font-style:italic; line-height:1.15; color:var(--iva-peach-dark); }
.iva-name { margin:0; max-width:100%; font-family:var(--display); font-weight:600; line-height:1.02; letter-spacing:-.01em; color:var(--iva-ink);
  overflow-wrap:anywhere; text-wrap:balance; }
.iva-name-xl { font-size:17cqi; }
.iva-name-l { font-size:13cqi; }
.iva-name-m { font-size:10.5cqi; }
.iva-name-s { font-size:8.6cqi; }
.iva-name:after { content:''; display:block; width:16cqi; height:2px; margin:3.4cqi auto 0; border-radius:2px; background:var(--iva-green); opacity:.55; }
.iva-lead { margin:0; max-width:92%; font-size:4.4cqi; line-height:1.4; color:var(--iva-muted); overflow-wrap:anywhere; }
.iva-date { margin:0; padding:.6cqi 3cqi; border-radius:999px; background:rgba(111,143,106,.12); color:#4f6d4b; font-size:3.8cqi; font-weight:700; }
.iva-cta { margin-top:3cqi; min-height:44px; padding:0 7cqi; border:0; border-radius:999px; background:var(--iva-peach-dark); color:#fff;
  font:700 max(13px,4.2cqi)/1 var(--sans); cursor:pointer; box-shadow:0 10px 20px -12px rgba(120,70,50,.8); }
.iva-cta:hover { background:#93624e; }
.iva-cta:focus-visible { outline:3px solid var(--iva-green); outline-offset:3px; }
.iva.is-compact .iva-cta { min-height:0; padding:2.4cqi 6cqi; pointer-events:none; }
.iva-sound { position:absolute; right:3cqi; top:3cqi; z-index:3; padding:6px 12px; border:0; border-radius:999px; background:rgba(255,255,255,.88);
  color:var(--iva-ink); font:600 12px/1.2 var(--sans); cursor:pointer; box-shadow:0 4px 12px -6px rgba(0,0,0,.4); }
.iva-replay { border:0; background:none; color:var(--accent-dark,#94534d); font:600 13px/1.3 var(--sans); text-decoration:underline; cursor:pointer; padding:6px 8px; }

/* entrada do card: delicada (nome sobe 12px, arte cresce de .96) */
.iva.is-reveal:not(.is-instant) .iva-name { animation:iva-rise .7s calc(var(--iva-fade) * .5) ease-out both; }
.iva.is-reveal:not(.is-instant) .iva-art { animation:iva-grow .8s ease-out both; }
.iva.is-reveal:not(.is-instant) .iva-lead,.iva.is-reveal:not(.is-instant) .iva-cta,.iva.is-reveal:not(.is-instant) .iva-date { animation:iva-fade .6s calc(var(--iva-fade) * .9) ease-out both; }
@keyframes iva-rise { from { opacity:0; transform:translateY(12px); } }
@keyframes iva-grow { from { opacity:.4; transform:scale(.96); } }
@keyframes iva-fade { from { opacity:0; } }

/* variações por template */
.iva-pot .iva-art { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96' fill='none' stroke='%239a7563' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 40h84v22c0 14-10 22-22 22H40c-12 0-22-8-22-22z' fill='%23f3d3c2'/%3E%3Cpath d='M10 40h100M18 46H6M102 46h12'/%3E%3Cpath d='M48 30h24M60 30v-8'/%3E%3Cpath d='M44 16c-4 4 4 6 0 10M76 16c-4 4 4 6 0 10'/%3E%3C/svg%3E"); }
.iva-toast .iva-art { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96' fill='none' stroke='%239a7563' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(-14 40 50)'%3E%3Cpath d='M28 14h24l-2 30a10 10 0 0 1-20 0z' fill='%23f3d3c2'/%3E%3Cpath d='M40 54v24M30 80h20'/%3E%3C/g%3E%3Cg transform='rotate(14 80 50)'%3E%3Cpath d='M68 14h24l-2 30a10 10 0 0 1-20 0z' fill='%23f3d3c2'/%3E%3Cpath d='M80 54v24M70 80h20'/%3E%3C/g%3E%3Cpath d='M60 4v8M50 8l4 6M70 8l-4 6'/%3E%3C/svg%3E"); }
.iva-ribbon .iva-art { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96' fill='none' stroke='%23b9727f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 44c-14-18-38-22-40-8s26 14 40 8zM60 44c14-18 38-22 40-8s-26 14-40 8z' fill='%23f6d9df'/%3E%3Cpath d='M60 44l-16 34M60 44l16 34'/%3E%3Ccircle cx='60' cy='44' r='5' fill='%23f6d9df'/%3E%3C/svg%3E"); }
.iva-ribbon { --iva-peach-dark:#a85a6c; --iva-green:#b9727f; }
/* revealType "card" (Amigo Secreto e convite de produto): o papel que abriu no vídeo revela o nome. O vídeo continua
   por trás, desfocado (sem tela nova); o papel HTML fica no lugar do cartão "Chá Fácil" do último quadro (centro, ~76% da
   largura, levemente inclinado), creme com moldura dupla. Sem vídeo (instantâneo/miniatura), o fundo em CSS segura. */
.iva-card .iva-stage { background:#efe4d3; }
.iva-card.is-reveal .iva-video { opacity:1; filter:blur(7px) saturate(.92) brightness(1.03); transform:scale(1.08); }
.iva-card .iva-video { transition:filter var(--iva-fade) ease, transform var(--iva-fade) ease; }
.iva-card .iva-reveal { --iva-peach-dark:#b23a3a; justify-content:center; gap:2.4cqi; padding:8cqi 7cqi 9cqi; transform:none;
  background:
    radial-gradient(2.2cqi 2.2cqi at 14% 12%,rgba(233,196,120,.55),transparent 70%),
    radial-gradient(1.6cqi 1.6cqi at 84% 9%,rgba(233,196,120,.5),transparent 70%),
    radial-gradient(2cqi 2cqi at 90% 22%,rgba(178,58,58,.28),transparent 70%),
    radial-gradient(1.4cqi 1.4cqi at 8% 30%,rgba(178,58,58,.25),transparent 70%),
    radial-gradient(60% 26% at 12% 4%,rgba(77,110,75,.16),transparent 70%),
    radial-gradient(55% 22% at 92% 2%,rgba(77,110,75,.14),transparent 70%),
    linear-gradient(180deg,rgba(248,241,230,.18) 0%,rgba(248,241,230,.32) 46%,rgba(248,241,230,.9) 66%,#f8f1e6 82%); }
.iva-card:not(.has-video) .iva-reveal,.iva-card.is-compact .iva-reveal,.iva-card.is-instant .iva-reveal {
  background-color:#efe4d3; background-image:
    radial-gradient(2.2cqi 2.2cqi at 14% 12%,rgba(233,196,120,.55),transparent 70%),
    radial-gradient(2cqi 2cqi at 90% 22%,rgba(178,58,58,.28),transparent 70%),
    radial-gradient(60% 26% at 12% 4%,rgba(77,110,75,.18),transparent 70%),
    radial-gradient(70% 45% at 50% 40%,#f7efe2,transparent 75%),
    linear-gradient(180deg,#eadcc8 0%,#f1e7d8 55%,#f8f1e6 80%); }
.iva-card .iva-reveal:before,.iva-card .iva-reveal:after,.iva-card .iva-art { display:none; }
.iva-sheet { display:contents; }
.iva-card .iva-sheet { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.2cqi;
  width:80cqi; min-height:50cqi; margin-bottom:3cqi; padding:9cqi 7cqi; border-radius:2px; transform:rotate(-3deg);
  background:#fbf7ee repeating-linear-gradient(115deg,rgba(150,120,80,.025) 0 2px,transparent 2px 5px);
  box-shadow:inset 0 0 0 3.2cqi #fbf7ee, inset 0 0 0 calc(3.2cqi + 1px) rgba(120,95,70,.45), inset 0 0 0 calc(4.2cqi + 1px) #fbf7ee,
    inset 0 0 0 calc(4.2cqi + 2px) rgba(120,95,70,.28), 0 18px 34px -18px rgba(60,40,25,.6), 0 2px 6px rgba(60,40,25,.12); }
.iva-card .iva-kicker { color:#7a5a4c; font-size:5.2cqi; }
.iva-card .iva-name { color:#3a2d26; }
.iva-card .iva-name-xl { font-size:14cqi; }
.iva-card .iva-name-l { font-size:11.5cqi; }
.iva-card .iva-name-m { font-size:9cqi; }
.iva-card .iva-name-s { font-size:7cqi; }
.iva-card .iva-name:after { width:12cqi; margin-top:2.6cqi; background:#b23a3a; opacity:.5; }
.iva-card .iva-lead { max-width:94%; color:#4b382f; font-size:4.6cqi; font-weight:600; text-wrap:balance; }
.iva-note { margin:0; max-width:90%; font-size:4cqi; line-height:1.4; color:var(--iva-muted); }
.iva-card .iva-cta { margin-top:2cqi; background:#b23a3a; }
.iva-card .iva-cta:hover { background:#8f2b2b; }
.iva-card .iva-date { background:rgba(178,58,58,.1); color:#8f2b2b; }
.iva-card.is-reveal:not(.is-instant) .iva-sheet { transform-origin:50% 40%; animation:iva-unfold .8s .05s cubic-bezier(.2,.8,.3,1.1) both; }
.iva-card.is-reveal:not(.is-instant) .iva-name { animation:iva-fade .6s calc(var(--iva-fade) * .6) ease-out both; }
.iva-card.is-reveal:not(.is-instant) .iva-note { animation:iva-fade .6s calc(var(--iva-fade) * .9) ease-out both; }
@keyframes iva-unfold { 0% { opacity:0; transform:rotate(-3deg) perspective(500px) rotateX(55deg) scale(.96); } 55% { opacity:1; } 100% { transform:rotate(-3deg); } }

@media (prefers-reduced-motion:reduce) {
  .iva-stage *,.iva-stage { animation:none !important; }
  .iva-reveal,.iva-video { transition-duration:.15s !important; transform:none !important; filter:none !important; }
}