/* =============================================================================
   CloneVipMe - estilos
   Visual do layout novo da Vipme: barra branca no topo, laterais cinza
   texturizadas, coluna branca central com cards. Os cards de grupo de
   WhatsApp ficam no fim do arquivo.
   ========================================================================== */

:root{
  --blue:        #4A89DC;   /* badges, icones e botao de enviar            */
  --blue-dark:   #3B73BF;   /* quadrado do icone no botao / hover          */
  --text:        #1D1F22;
  --muted:       #8A9099;
  --line:        #E4E7EB;
  --side-bg:     #3F454D;   /* laterais                                    */
  --danger:      #D9534F;
  --col-max:     768px;     /* largura da coluna branca central            */
}

/* ===== Base ===== */
*,*:before,*:after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font:400 14px/1.4 Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  /* Trama fina nas laterais, como na referencia */
  background-color:var(--side-bg);
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.08)       0 1px, transparent 1px 3px);
}
a{color:var(--blue)}
img{max-width:100%;vertical-align:middle;border:0}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== Barra do topo ===== */
.topbar{
  position:sticky;top:0;z-index:5;
  height:36px;display:flex;align-items:center;justify-content:center;
  background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.12);
  font-weight:500;font-size:14px;color:var(--text);
}

/* ===== Coluna central ===== */
.page{
  max-width:var(--col-max);
  margin:0 auto;
  min-height:calc(100vh - 36px);
  background:#fff;
  padding:26px 22px 40px;
}

/* ===== Cards ===== */
.card{
  background:#fff;
  border-radius:10px;
  box-shadow:0 1px 10px rgba(0,0,0,.08);
  padding:14px 12px 16px;
  margin-bottom:22px;
}
.badge{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--blue);color:#fff;
  font-size:8.5px;font-weight:700;letter-spacing:.2px;text-transform:uppercase;
  padding:3px 6px;border-radius:3px;line-height:1.2;
}
.badge i{font-size:10px}
.badge-crown{width:10px;height:10px}
.card-title{margin:8px 0 12px;font-size:16px;font-weight:700;line-height:1.25;color:var(--text)}
.card-note{margin:-6px 0 12px;font-size:13px;color:var(--muted);white-space:pre-wrap}

/* ===== Campos ===== */
.guest + .guest{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.guest-label{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.field{
  position:relative;display:flex;align-items:center;
  height:39px;margin-bottom:12px;
  border:1px solid var(--line);border-radius:6px;background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.field:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(74,137,220,.15)}
.field > i{width:26px;padding-left:10px;font-size:12px;color:#555;text-align:center;flex:none}
.field input{
  flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;
  padding:0 8px 0 2px;font:inherit;font-size:14px;color:var(--text);
}
.field input::placeholder{color:#6B7079;opacity:1}
.field-hint{flex:none;padding-right:10px;font-size:8px;color:#9AA0A6;white-space:nowrap}
.field.has-error{border-color:var(--danger)}
.field.has-error .field-hint{color:var(--danger);font-weight:700;font-size:10px}

/* ===== Adicionar / remover convidado ===== */
.multi-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 14px}
.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:var(--blue);border:1px solid var(--line);border-radius:6px;
  padding:7px 12px;font:inherit;font-size:12px;font-weight:500;cursor:pointer;
}
.btn-ghost:hover{border-color:var(--blue)}
#btnAdd{margin-left:auto}

/* ===== Botao de enviar ===== */
.btn-send{
  display:flex;align-items:stretch;width:100%;height:33px;margin-top:6px;
  padding:0;border:0;border-radius:3px;overflow:hidden;cursor:pointer;
  background:var(--blue);color:#fff;font:inherit;
}
.btn-send-ico{display:flex;align-items:center;justify-content:center;width:30px;background:var(--blue-dark);font-size:13px}
.btn-send-label{display:flex;align-items:center;padding-left:8px;font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.2px}
.btn-send:hover{background:var(--blue-dark)}
.btn-send[disabled]{opacity:.65;cursor:not-allowed}

/* ===== Card do evento ===== */
.event-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:-2px}
.event-meta-item{display:flex;align-items:center;gap:10px}
.event-meta-item > i{font-size:20px;color:var(--blue);width:22px;text-align:center}
.event-meta-item small{display:block;font-size:8px;color:var(--muted);line-height:1.2}
.event-meta-item strong{display:block;font-size:10px;font-weight:700;color:var(--text)}

.groups-block .card-title{margin-bottom:10px}

@media (max-width:480px){
  .page{padding:18px 16px 32px}
  .multi-row{flex-wrap:wrap}
}

/* ===== Cards de grupo de WhatsApp =======================================
   Estilo inspirado na referencia enviada: raio generoso, titulo pesado com
   tracking negativo, texto de apoio rebaixado e CTA em pilula full-width.

   Para trocar o visual, mexa so nestas variaveis.                        */
.groups-block{
  --card-bg:      #F1F4F2;   /* gelo: branco com um fio de verde-cinza    */
  --card-fg:      #14171A;   /* texto principal - escuro sobre o gelo     */
  --card-muted:   #5A6169;   /* texto de apoio                            */
  --card-well:    rgba(0,0,0,.06);   /* fundo do placeholder de foto      */
  --card-icon:    rgba(0,0,0,.26);   /* icone do placeholder              */

  /* Verde oficial do WhatsApp. Com o card claro ele finalmente cabe aqui.
     Texto ESCURO em cima, e nao branco: medido, branco sobre #25D366 da
     1,98:1 e reprova feio no WCAG AA (min 4,5:1). O escuro da 7,32:1.     */
  --cta-bg:       #25D366;
  --cta-bg-hover: #1FBF5B;
  --cta-fg:       #06301B;
  --card-border:  #000000;   /* a linha preta em volta de cada card       */
  --card-stroke:  2px;       /* espessura dela                            */
  --card-radius:  20px;
  --cards-max:    720px;     /* largura maxima do par. Menor = cards menores */
  /* o espacamento vem de .card */
}
.groups-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:4px;
  max-width:var(--cards-max);   /* impede os cards de esticarem em tela larga */
}
@media (max-width:600px){ .groups-grid{grid-template-columns:1fr;gap:14px} }

.group-card{
  display:flex;flex-direction:column;
  background:var(--card-bg);
  color:var(--card-fg);
  border:var(--card-stroke) solid var(--card-border);
  border-radius:var(--card-radius);
  padding:14px;
  /* Card claro + contorno preto: sombra quase nula, so para descolar do fundo. */
  box-shadow:0 6px 16px -12px rgba(0,0,0,.35);
  animation:groupCardIn .5s cubic-bezier(.2,.7,.3,1) both;
}
.group-card:nth-child(2){animation-delay:.09s}
@keyframes groupCardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.group-card{animation:none}}

.group-photo{
  position:relative;
  aspect-ratio:16/9;          /* era 4/3 - foto mais baixa encurta o card */
  border-radius:12px;
  overflow:hidden;
  background:var(--card-well);
  margin-bottom:12px;
}
.group-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Logo no lugar de foto: mostra inteiro em vez de cortar. */
.group-photo.is-contain img{object-fit:contain}
.group-photo-empty{
  display:flex;align-items:center;justify-content:center;height:100%;
  font-size:32px;color:var(--card-icon);
}

.group-card h3{
  margin:0 0 5px;
  font-family:inherit;font-weight:800;
  font-size:19px;line-height:1.15;letter-spacing:-.4px;
  color:var(--card-fg);
}
.group-card p{
  margin:0 0 14px;
  font-size:13px;line-height:1.45;
  color:var(--card-muted);
}

.group-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:auto;width:100%;
  padding:12px 16px;
  /* O verde claro sobre o card gelo da so 1,79:1 - o contorno da pilula
     sumiria. A linha preta resolve e casa com a borda do card.           */
  border:1.5px solid var(--card-border);
  border-radius:999px;
  background:var(--cta-bg);color:var(--cta-fg);
  font-family:inherit;font-weight:700;font-size:14px;line-height:1;
  letter-spacing:.2px;text-decoration:none;cursor:pointer;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.group-cta:hover,.group-cta:focus{
  background:var(--cta-bg-hover);color:var(--cta-fg);text-decoration:none;
  transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(0,0,0,.6);
}
.group-cta:active{transform:translateY(0)}
.group-cta:focus-visible{outline:3px solid var(--card-border);outline-offset:3px}
.group-cta i{font-size:18px}

/* Sem link configurado: mesmo verde do botao real, para o visual ja ser o
   definitivo - mas com borda tracejada e rotulo proprio, para ninguem
   publicar por engano um CTA que nao leva a lugar nenhum. As duas marcas
   somem sozinhas quando voce preenche "link" em GRUPOS.                  */
.group-cta.is-disabled{
  border-style:dashed;
  cursor:not-allowed;pointer-events:none;
}

.swal-name-item{text-align:left;padding:2px 0}
.swal-name-item i{margin-right:6px}