/* =========================================================
   Hora do Sim · Confirmar — páginas públicas do convidado
   Estética: mini site de casamento, claro, delicado e elegante.
   ========================================================= */
:root{
  /* ----- base personalizável (sobrescrita pela personalização do evento) ----- */
  --cor-fundo:#FBF7F1; --cor-cartao:#FFFFFF;
  --cor-destaque:#A97F4F;    /* principal */
  --cor-romantica:#C28477;   /* secundária */
  --cor-texto:#2E2723;
  --cor-texto-suave:#8A7B72; /* muted */
  --cor-botao:#2E2723; --cor-botao-texto:#FBF7F1;
  --cor-borda:#E7DED3;
  --cor-detalhe:#A97F4F;     /* detalhes/decorativos */
  --font-casal:"Cormorant Garamond",Georgia,serif;
  --font-heading:"Cormorant Garamond",Georgia,serif;
  --font-body:"Nunito Sans",-apple-system,system-ui,sans-serif;
  --font-button:"Nunito Sans",-apple-system,system-ui,sans-serif;
  /* ----- compat: nomes antigos apontam para os novos ----- */
  --font-display:var(--font-casal);
  --ivory:var(--cor-fundo);
  --ivory2:color-mix(in srgb, var(--cor-fundo) 90%, #000 10%);
  --paper:var(--cor-cartao);
  --sand:color-mix(in srgb, var(--cor-fundo) 84%, var(--cor-detalhe) 16%);
  --ink:var(--cor-texto);
  --ink-soft:var(--cor-texto-suave);
  --mocha:var(--cor-texto-suave);
  --gold:var(--cor-detalhe);
  --gold-soft:color-mix(in srgb, var(--cor-detalhe) 48%, #fff 52%);
  --blush-deep:var(--cor-romantica);
  --blush:color-mix(in srgb, var(--cor-romantica) 38%, #fff 62%);
  --blush-soft:color-mix(in srgb, var(--cor-romantica) 18%, #fff 82%);
  --sage:#8FA083;
  --line:var(--cor-borda);
  --line-soft:color-mix(in srgb, var(--cor-borda) 55%, transparent);
  --radius:18px; --radius-lg:26px;
  --shadow:0 22px 60px -32px rgba(46,39,35,.34);
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font-body);color:var(--ink);line-height:1.6;font-weight:400;
  background:
    radial-gradient(900px 600px at 50% -10%, var(--blush-soft) 0%, transparent 60%),
    linear-gradient(180deg,var(--ivory) 0%,var(--ivory2) 100%);
  min-height:100vh;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;align-items:center;
  padding:28px 18px 48px;
}
a{color:inherit}
.wrap{width:100%;max-width:560px;margin:0 auto}

.topbrand{text-align:center;margin:8px 0 22px}
.topbrand .rings{color:var(--gold);display:inline-flex}
.topbrand .name{font-family:var(--font-heading);font-size:1.15rem;letter-spacing:.04em;color:var(--ink-soft);margin-top:4px}
.topbrand .sub{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-top:2px}

.card{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:clamp(26px,5vw,44px);position:relative;overflow:hidden;
  animation:rise .7s var(--ease) both;
}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--blush) 0%,var(--gold-soft) 50%,var(--blush) 100%);}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.enfeite-arco{text-align:center;color:var(--gold-soft);margin:-6px 0 4px;line-height:0}
.foto-casal{display:block;margin:0 auto 18px;object-fit:cover;box-shadow:var(--shadow)}
.foto-casal.foto-arco{width:128px;height:158px;border-radius:64px 64px 18px 18px;border:1px solid var(--gold-soft)}
.foto-casal.foto-circulo{width:130px;height:130px;border-radius:50%;border:3px solid var(--cor-cartao);box-shadow:0 0 0 1px var(--gold-soft),var(--shadow)}
.kicker{font-family:var(--font-kicker,var(--font-heading));font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);text-align:center}
.kicker-md{font-size:.86rem;letter-spacing:.2em;font-weight:600}
.monogram{font-family:var(--font-casal);font-size:1.4rem;color:var(--blush-deep);text-align:center;letter-spacing:.12em;margin-top:14px}
.monogram span{color:var(--gold)}
.monogram-img{display:block;width:auto;height:auto;max-width:170px;max-height:96px;margin:14px auto 0;object-fit:contain}
.couple{font-family:var(--font-casal);font-weight:700;font-size:clamp(2.7rem,9.5vw,4rem);line-height:1.02;text-align:center;color:var(--ink);margin-top:10px}
.meta{text-align:center;color:var(--mocha);font-size:.95rem;margin-top:12px}
.meta b{color:var(--ink-soft);font-weight:600}
.divider{width:46px;height:1px;background:var(--gold-soft);margin:22px auto}
.message{text-align:justify;text-align-last:center;font-family:var(--font-body);font-style:italic;font-size:1.12rem;color:var(--ink-soft);line-height:1.55}
.message.msg-pequena{font-size:.96rem}
.message.msg-media{font-size:1.12rem}
.message.msg-grande{font-size:1.34rem}
.deadline{text-align:center;font-size:.82rem;color:var(--blush-deep);background:var(--blush-soft);display:inline-block;padding:6px 16px;border-radius:100px}
.deadline-wrap{text-align:center}

.field{margin-top:18px}
.label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mocha);margin-bottom:8px}
.input{width:100%;padding:14px 16px;font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--ivory);border:1px solid var(--line);border-radius:14px;transition:border-color .25s,box-shadow .25s,background .25s;}
.input::placeholder{color:#b9a89a}
.input:focus{outline:none;border-color:var(--blush-deep);background:#fff;box-shadow:0 0 0 4px rgba(194,132,119,.12)}
textarea.input{resize:vertical;min-height:84px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:15px 24px;font-family:var(--font-button);font-size:1rem;font-weight:700;letter-spacing:.02em;
  text-decoration:none;
  border:1px solid transparent;border-radius:100px;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s;}
.btn-primary{background:var(--cor-botao);color:var(--cor-botao-texto);box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink-soft);border-color:var(--line);margin-top:10px}
.btn-ghost:hover{border-color:var(--ink)}

.center{text-align:center}
.muted{color:var(--mocha);font-size:.92rem}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}

.group-name{font-family:var(--font-heading);font-size:1.7rem;color:var(--ink);text-align:center;font-weight:600}
.found{font-family:var(--font-heading);text-align:center;color:var(--sage);font-weight:700;font-size:.9rem;letter-spacing:.02em}
.guest{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;
  padding:16px;border:1px solid var(--line-soft);border-radius:16px;background:var(--ivory);margin-top:12px;}
.guest-name{font-size:1.05rem;color:var(--ink);font-weight:600}
.guest-name small{display:block;font-weight:400;color:var(--mocha);font-size:.78rem}
.choices{display:flex;gap:8px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.choice span{display:block;padding:9px 16px;border-radius:100px;font-size:.84rem;font-weight:700;border:1px solid var(--line);color:var(--mocha);transition:all .2s;white-space:nowrap}
.choice.yes  input:checked+span{background:var(--sage);border-color:var(--sage);color:#fff}
.choice.no   input:checked+span{background:var(--blush-deep);border-color:var(--blush-deep);color:#fff}
.choice.skip input:checked+span{background:var(--mocha);border-color:var(--mocha);color:#fff}
.guest-restr{flex:1 1 100%;margin-top:4px}
.guest-restr input{width:100%;padding:9px 12px;font-size:.85rem;border:1px solid var(--line);border-radius:10px;background:#fff;font-family:inherit}
.guest--locked{background:color-mix(in srgb,var(--ivory) 60%,#f5f5f5 40%);opacity:.85}
.choices--readonly{display:flex;gap:8px}
.choice-label{display:block;padding:9px 16px;border-radius:100px;font-size:.84rem;font-weight:700;white-space:nowrap}
.choice-label--yes{background:var(--sage);color:#fff}
.choice-label--no{background:var(--blush-deep);color:#fff}

.option{display:block;width:100%;text-align:left;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--ivory);margin-top:10px;cursor:pointer;transition:all .2s}
.option:hover{border-color:var(--blush-deep);background:#fff;transform:translateY(-1px)}
.option b{font-family:var(--font-heading);font-size:1.15rem;color:var(--ink)}
.option small{display:block;color:var(--mocha);font-size:.82rem;margin-top:2px}

.success-ico{width:74px;height:74px;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;margin:0 auto 18px;font-size:2rem;animation:pop .5s var(--ease) both}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

.errors{background:var(--blush-soft);color:#8a3a2c;border-radius:12px;padding:12px 16px;font-size:.88rem;margin-top:16px}
.errors ul{margin:0;padding-left:18px}

.foot{text-align:center;margin-top:26px;font-size:.78rem;color:var(--mocha)}
.foot b{font-family:var(--font-heading);color:var(--ink-soft);font-weight:600}

/* ===== Fase 3 — moldura sobre o cartão (URL via --mol) ===== */
body.mol .card::after{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;z-index:4}
body.mol-bordas .card::after{background:var(--mol) center/100% 100% no-repeat}
body.mol-faixa .card::after{background:var(--mol) top center/100% auto no-repeat, var(--mol) bottom center/100% auto no-repeat}
body.mol-cantos .card::after{background:
  var(--mol) top left/92px no-repeat,
  var(--mol) top right/92px no-repeat,
  var(--mol) bottom left/92px no-repeat,
  var(--mol) bottom right/92px no-repeat}

/* ===== Fase 3 — alinhamento à esquerda ===== */
body.align-left .card .kicker,
body.align-left .card .couple,
body.align-left .card .meta,
body.align-left .card .monogram,
body.align-left .card .message,
body.align-left .card .deadline-wrap{text-align:left}
body.align-left .card .divider{margin-left:0;margin-right:auto}
body.align-left .card .foto-casal{margin-left:0;margin-right:auto}
body.align-left .card .enfeite-arco{text-align:left}

/* ===== Fase 3 — layouts ===== */
body.lay-compacto .card{padding:clamp(20px,4vw,30px)}
body.lay-compacto .card .couple{font-size:clamp(2rem,7vw,2.7rem)}
body.lay-compacto .card .divider{margin-top:14px;margin-bottom:14px}
body.lay-compacto .card .foto-casal.foto-arco{width:104px;height:128px}
body.lay-compacto .card .foto-casal.foto-circulo{width:104px;height:104px}

body.lay-editorial .card .couple{font-size:clamp(2.6rem,9vw,3.7rem);letter-spacing:-.01em}
body.lay-editorial .card .kicker{font-size:.7rem;letter-spacing:.34em}
body.lay-editorial .card .monogram{display:none}
body.lay-editorial .card .divider{margin-top:26px;margin-bottom:26px}