/* ===================== WARESITE™ HOLO MODALS (light glass, fixed) ===================== */

:root{
  /* cor base (YEFF blue) */
  --brand-rgb: 70,230,255;     /* #46E6FF */

  /* opacidades (ajuste aqui) */
  --modal-alpha: .25;          /* MODAL: mais transparente */
  --item-alpha:  .25;          /* CARDS: mais opacos       */

  /* vidro */
  --glass-blur: 12px;          /* blur DENTRO do card/itens */

  /* dimensões */
  --card-w: min(360px, 92vw);
}

/* ===== Overlay: sem blur, sem máscara, totalmente transparente ===== */
.ws-holo-overlay{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: transparent;
  animation: wsFade .18s ease;
}
@keyframes wsFade { from{opacity:0} to{opacity:1} }

/* ===== Card: vidro CLARO, sem borda, SEM aro ===== */
.ws-holo-card{
  position: relative; isolation:isolate;
  width: var(--card-w);
  color: #0f2230; /* texto escuro para vidro claro */
  background-color: rgba(var(--brand-rgb), var(--modal-alpha));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%) contrast(1.02);
          backdrop-filter: blur(var(--glass-blur)) saturate(120%) contrast(1.02);
  border: none;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(0,0,0,.25); /* flutuação suave */
  overflow: hidden;
}

/* glare leve no topo (bem discreto) */
.ws-holo-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(520px 110px at 50% 0%,
    rgba(var(--brand-rgb), .28), transparent 60%);
  mix-blend-mode: screen; opacity:.2;
}
/* sem aro extra */
.ws-holo-card::after{ content:none; }

/* ===== Cabeçalho ===== */
.ws-holo-head{ display:flex; gap:12px; align-items:flex-start; padding:22px 22px 8px; }
.ws-holo-dot{ width:10px; height:10px; border-radius:50%; background: rgb(var(--brand-rgb)); box-shadow: 0 0 10px rgb(var(--brand-rgb)); margin-top:8px; flex: 0 0 auto; }
.ws-holo-title{
  font: 800 22px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial;
  letter-spacing:.2px; color:#0b1b24;
}

/* ===== Corpo ===== */
.ws-holo-body{ padding: 6px 22px; }
.ws-holo-desc{
  color:#203644; font: 500 15px/1.65 Inter, Roboto, system-ui;
  margin: 6px 0 10px; opacity:.95;
}

/* ===== Grid ===== */
.ws-holo-grid{ display:grid; gap:10px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width:600px){ .ws-holo-grid{ grid-template-columns:1fr; } }

/* ===== Itens (mesmo tom do modal, mais opacos) ===== */
/* ===== Itens EDGE-ONLY (sem fundo; só contorno neutro) ===== */
:root{
  --rim-neutral: rgba(255,255,255,.32); /* contorno (quase branco)  */
  --rim-glow:    rgba(0,0,0,.12);       /* sombra p/ flutuação      */
}

.ws-holo-item{
  position: relative;
  display:flex; align-items:center; gap:10px;
  padding:12px 12px 12px 14px;
  border-radius:14px;

  /* sem preenchimento nem vidro */
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border: 0 !important;

  /* só o contorno + profundidade */
  box-shadow:
    0 0 0 1px var(--rim-neutral) !important,
    0 6px 16px var(--rim-glow) !important;

  -webkit-background-clip: padding-box;
          background-clip: padding-box;
}

.ws-holo-item::before,
.ws-holo-item::after{ content:none !important; } /* garante sem aro antigo */

.ws-holo-item h4{ margin:0; color:#0b1b24; font:600 15px/1.2 Inter, system-ui; }
.ws-holo-item p{ margin:2px 0 0; color:#243a48; font:13.5px/1.45 Inter, system-ui; opacity:.9; }

/* hover opcional (bem sutil) */
.ws-holo-item:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.40),
    0 8px 18px rgba(0,0,0,.14);
}

/* ===== Switches (track claro, knob LED) ===== */
.ws-switch{
  --w: 46px; --h: 26px;
  position:relative; width: var(--w); height: var(--h); flex: 0 0 auto;
  border: none; border-radius: 999px;
  background: rgba(0,32,48,.10);
  box-shadow: inset 0 0 8px rgba(0,0,0,.08);
  cursor: pointer;
}
.ws-switch input{ display:none; }
.ws-switch .knob{
  position:absolute; top:2px; left:2px;
  width: calc(var(--h) - 4px); height: calc(var(--h) - 4px);
  background: linear-gradient(180deg,#ffffff,#e9ffff);
  border-radius:50%;
  box-shadow: 0 0 10px rgba(70,230,255,.75), 0 0 20px rgba(70,230,255,.30);
  transform: translateX(0);
  transition: transform .25s ease;
}
.ws-switch input:checked + .knob{ transform: translateX(calc(var(--w) - var(--h))); }

/* ===== Footer + botões claros (sem borda) ===== */
.ws-holo-footer{ display:flex; justify-content:space-between; gap:12px; padding: 12px 22px 18px; flex-wrap:wrap; }
.ws-holo-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.ws-btn{
  appearance:none; border:none;
  background: linear-gradient(180deg, rgba(255,255,255,.50), rgba(245,255,255,.36));
  color:#0f2230; padding:10px 14px; border-radius:12px;
  font:700 14px/1 Inter, system-ui; letter-spacing:.2px;
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
  cursor:pointer; transition: transform .05s ease, filter .2s;
}
.ws-btn:hover{ filter: brightness(1.06); }
.ws-btn:active{ transform: translateY(1px); }

.ws-btn-primary{
  background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(245,255,255,.42));
  color:#063042; text-shadow: 0 0 8px rgba(70,230,255,.22);
}

.ws-disclaimer{ color:#2a4250; font: 12px/1.45 Inter, system-ui; opacity:.85; margin-right:auto; }

/* === Contorno translúcido nos cards internos (sem fundo) ================= */
:root{
  --rim-neutral: rgba(255,255,255,.34); /* cor do contorno */
  --rim-outer:   rgba(255,255,255,.10); /* halo suave ao redor */
}

.ws-holo-item{
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border: 0 !important;
  box-shadow:
    0 0 0 1px var(--rim-neutral) !important,   /* contorno 1px */
    0 0 18px var(--rim-outer) !important,      /* halo translúcido */
    0 6px 16px rgba(0,0,0,.14) !important;     /* sombra de flutuação */
}
.ws-holo-item::before,
.ws-holo-item::after{ content:none !important; }

.ws-holo-item:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.42),
    0 0 22px rgba(255,255,255,.12),
    0 8px 18px rgba(0,0,0,.16);
}

/* === Botão “Aceitar tudo” em verde-limão (destaque) ====================== */
/* ajuste este tom se quiser igualzinho ao banner */
:root{
  --lime-rgb: 223,255,72;  /* #DFFF48 aprox. do banner */
}

.ws-btn{  /* neutros para os outros botões */
  background: linear-gradient(180deg, rgba(255,255,255,.50), rgba(245,255,255,.36));
  color:#0f2230;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* certifique-se que o botão “Aceitar tudo” tem a classe .ws-btn-primary */
.ws-btn-primary{
  background: linear-gradient(180deg,
      rgba(var(--lime-rgb), .98), rgba(var(--lime-rgb), .84)) !important;
  color:#0b1400 !important;
  text-shadow: none !important;
  border: 0 !important;
  box-shadow:
    0 0 22px rgba(var(--lime-rgb), .45),
    0 10px 26px rgba(0,0,0,.25) !important;
}
.ws-btn-primary:hover{
  filter: brightness(1.06);
  box-shadow:
    0 0 28px rgba(var(--lime-rgb), .55),
    0 12px 28px rgba(0,0,0,.28) !important;
}
.ws-btn-primary:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.65),
    0 0 0 4px rgba(var(--lime-rgb), .8),
    0 0 30px rgba(var(--lime-rgb), .55) !important;
}

/* ================= PATCH ================= */

/* 1) Botão “Aceitar tudo” sem borda/contorno escuro */
:root{
  /* ajuste se quiser exatamente o tom do banner */
  --lime-rgb: 223,255,72; /* #DFFF48 (troque aqui se precisar) */
}

/* remove qualquer sombra/borda herdada do estilo base */
.ws-btn-primary{
  border: 0 !important;
  /* só glow limão, nada de sombra preta */
  box-shadow:
    0 0 26px rgba(var(--lime-rgb), .50),
    0 0 0 0 rgba(0,0,0,0) !important;
  background: linear-gradient(180deg,
      rgba(var(--lime-rgb), .98),
      rgba(var(--lime-rgb), .86)) !important;
  color:#0b1400 !important;
}
.ws-btn-primary:hover{
  filter: brightness(1.06);
  box-shadow:
    0 0 32px rgba(var(--lime-rgb), .60) !important;
}
/* tira qualquer anel/outline escuro em foco */
.ws-btn-primary:focus,
.ws-btn-primary:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(var(--lime-rgb), .45),
    0 0 34px rgba(var(--lime-rgb), .60) !important;
}

/* 2) Cards internos: sem fundo + contorno claro com transparência */
:root{
  --cookie-rim:  rgba(255,255,255,.36); /* contorno 1px */
  --cookie-halo: rgba(255,255,255,.12); /* halo suave ao redor */
}

.ws-holo-item{
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border: 0 !important;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  /* contorno + halo + leve flutuação (sem escurecer) */
  box-shadow:
    0 0 0 1px var(--cookie-rim) !important,
    0 0 20px var(--cookie-halo) !important,
    0 6px 14px rgba(0,0,0,.10) !important;
}
/* garante que nenhum aro antigo reapareça */
.ws-holo-item::before,
.ws-holo-item::after{ content:none !important; }

/* hover sutil (opcional) */
.ws-holo-item:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.42),
    0 0 24px rgba(255,255,255,.14),
    0 8px 16px rgba(0,0,0,.12) !important;
}
/* ================= /PATCH ================= */

/* === Contorno visível em TODOS os cards (stroke interno + halo) ========= */
:root{
  --cookie-rim:  rgba(255,255,255,.36); /* branco translúcido do contorno */
  --cookie-halo: rgba(255,255,255,.12); /* leve brilho ao redor */
}

/* pega .ws-holo-item e, por garantia, QUALQUER filho direto da grid */
.ws-holo-item,
.ws-holo-grid > *{
  position: relative;
  border-radius: 14px;
  background: transparent !important;
  border: 0 !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;

  /* STROKE INTERNO (não é cortado pelo overflow do modal) */
  box-shadow:
    inset 0 0 0 1px var(--cookie-rim) !important,
    0 6px 14px rgba(0,0,0,.10) !important; /* flutuação */
}

/* HALO externo bem suave (em pseudo-elemento, mas com pointer-events none) */
.ws-holo-item::after,
.ws-holo-grid > *::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: 0 0 20px var(--cookie-halo);
}

/* desliga qualquer brilho antigo de topo */
.ws-holo-item::before,
.ws-holo-grid > *::before{ content:none !important; }

/* hover sutil */
.ws-holo-item:hover,
.ws-holo-grid > *:hover{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.44) !important,
    0 8px 16px rgba(0,0,0,.12) !important;
}

/* === CONTORNO SEMPRE VISÍVEL NOS CARDS ================================ */
:root{
  --cookie-rim:  rgba(255,255,255,.42); /* 1px quase branco (ajuste .28–.52) */
  --cookie-halo: rgba(255,255,255,.10); /* glow muito discreto */
}

.ws-holo-item,
.ws-holo-grid > *{
  position: relative;
  border-radius:14px;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;

  /* contorno PERSISTENTE (border dentro do card) */
  border: 1px solid var(--cookie-rim) !important;

  /* halo + leve flutuação */
  box-shadow:
    0 0 18px var(--cookie-halo) !important,
    0 6px 14px rgba(0,0,0,.10) !important;
}

/* neutraliza realces que só apareciam no hover/focus */
.ws-holo-item::before,
.ws-holo-item::after,
.ws-holo-grid > *::before,
.ws-holo-grid > *::after{ content:none !important; }

.ws-holo-item:hover,
.ws-holo-grid > *:hover{
  border-color: rgba(255,255,255,.50) !important;        /* só um tico mais forte */
  box-shadow:
    0 0 22px rgba(255,255,255,.12) !important,
    0 8px 16px rgba(0,0,0,.12) !important;
}

/* tira qualquer estilo de foco que troque a borda/box-shadow */
.ws-holo-item:focus,
.ws-holo-item:focus-within{
  outline: none !important;
  border-color: var(--cookie-rim) !important;
  box-shadow:
    0 0 18px var(--cookie-halo) !important,
    0 6px 14px rgba(0,0,0,.10) !important;
}

/* === TEXTOS 100% PRETOS (sem cinza) ==================================== */
.ws-holo-card{ color:#000 !important; }            /* cor padrão dentro do modal */

.ws-holo-title{ color:#000 !important; }           /* título do modal */

.ws-holo-desc{                                      /* parágrafo de descrição */
  color:#000 !important;
  opacity:1 !important;
}

.ws-holo-item h4{ color:#000 !important; }         /* título de cada card */
.ws-holo-item p{
  color:#000 !important;                            /* texto dos cards */
  opacity:1 !important;
}

/* mantém cores próprias dos botões (não herdar preto) */
.ws-btn{ color:#0f2230 !important; }
.ws-btn-primary{ color:#0b1400 !important; }

/* === Rodapé: texto 100% visível ======================================= */
/* 1) força cor/preto e remove opacidades */
.ws-holo-footer,
.ws-holo-footer *{
  color:#000 !important;
  opacity:1 !important;
  text-shadow:none !important;
}
.ws-disclaimer{
  font-weight:600;          /* opcional: um pouco mais forte */
}

/* 2) o glare do card não invade o rodapé (mata no terço inferior) */
.ws-holo-card::before{
  -webkit-mask: linear-gradient(#000 0 72%, transparent 100%);
          mask: linear-gradient(#000 0 72%, transparent 100%);
  /* acima: mantém o brilho no topo e some no rodapé */
}

/* 3) garante espaço confortável no rodapé */
.ws-holo-footer{ padding-bottom: 20px !important; }

/* === Botões secundários "edge-only" (igual aos cards) =================== */
:root{
  /* reaproveita os mesmos tons do contorno dos cards */
  --btn-rim:  var(--cookie-rim, rgba(255,255,255,.36));
  --btn-halo: var(--cookie-halo, rgba(255,255,255,.12));
}

.ws-holo-actions .ws-btn:not(.ws-btn-primary){
  background: transparent !important;
  border: 1px solid var(--btn-rim) !important;
  color: #000 !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  box-shadow:
    0 0 18px var(--btn-halo) !important,
    0 6px 14px rgba(0,0,0,.10) !important;
}

.ws-holo-actions .ws-btn:not(.ws-btn-primary):hover{
  border-color: rgba(255,255,255,.46) !important;
  box-shadow:
    0 0 22px rgba(255,255,255,.14) !important,
    0 8px 16px rgba(0,0,0,.12) !important;
  filter: none !important; /* neutraliza brilho de hover antigo */
}

.ws-holo-actions .ws-btn:not(.ws-btn-primary):active{
  transform: translateY(1px);
}

.ws-holo-actions .ws-btn:not(.ws-btn-primary):focus,
.ws-holo-actions .ws-btn:not(.ws-btn-primary):focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.35) !important,
    0 0 24px rgba(255,255,255,.16) !important;
}

/* ---------- Name modal: versão pequena e discreta ---------- */
.ws-holo-card--tiny{ width:min(420px,92vw); border-radius:16px; }
.ws-holo-card--tiny .ws-holo-head{ padding:14px 16px 6px; }
.ws-holo-card--tiny .ws-holo-body{ padding:8px 16px; }
.ws-holo-card--tiny .ws-holo-footer{ padding:10px 16px 14px; }

/* título discreto (sem cara de headline) */
.ws-holo-title--xs{
  font: 600 16px/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:#0f2230;
  text-shadow:none;
  letter-spacing:.1px;
}

/* input enxuto */
.ws-input--name{
  width:100%;
  height:40px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.60);
  color:#0f2230;
  padding:0 12px;
  outline:none;
  -webkit-backdrop-filter: blur(6px) saturate(108%);
  backdrop-filter: blur(6px) saturate(108%);
}
.ws-input--name::placeholder{ color:rgba(0,0,0,.45) }
.ws-input--name:focus{ border-color:rgba(0,0,0,.28) }

/* botões discretos (ghost) */
.ws-btn-ghost{
  background: rgba(255,255,255,.18);
  border:1px solid rgba(0,0,0,.18);
  color:#0f2230;
  padding:8px 12px;
  border-radius:10px;
  font:600 13px/1 Inter, system-ui;
  box-shadow:none;
}
.ws-btn-ghost:hover{ background: rgba(255,255,255,.26); border-color: rgba(0,0,0,.24); }
.ws-btn-ghost:active{ transform: translateY(1px); }
.ws-btn-ghost.ws-affirm{ border-color:rgba(0,0,0,.28); background:rgba(255,255,255,.30); }

/* ===== Modal de Nome — tamanho, tipografia e layout ===== */
.ws-holo-card--tiny{
  /* largura “do tamanho do título”: estreito e elegante */
  width: clamp(360px, 40ch, 520px);
  padding-bottom: 10px;
}

.ws-holo-card--tiny .ws-holo-title{
  /* tira cara de título grande */
  font: 700 16px/1.3 Inter, system-ui;
  letter-spacing: 0.2px;
  text-align: center;
}

/* centraliza os botões do rodapé só neste modal */
.ws-holo-card--tiny .ws-holo-footer{ 
  justify-content: center;
}

/* ===== Input translúcido ===== */
.ws-input--name{
  width: 100%;
  height: 42px;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;                        /* <- sem fundo branco */
  border: 1px solid rgba(255,255,255,.35);
  color: #eafcff;
  outline: none;
  -webkit-backdrop-filter: blur(4px) saturate(110%);
  backdrop-filter: blur(4px) saturate(110%);
}

.ws-input--name::placeholder{
  color: rgba(255,255,255,.65);
  opacity: 1;
}

/* botões mais discretos para esse modal */
.ws-btn-ghost{
  appearance: none;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
  color: #eafcff;
  border-radius: 10px;
  padding: 10px 14px;
  font: 600 13px/1 Inter, system-ui;
}
.ws-btn-ghost.ws-affirm{
  border-color: rgba(208,255,0,.55);
  background: rgba(208,255,0,.18);
  color: #0f1a10;
}

/* ===== Name modal: input transparente com aro branco suave ===== */
.ws-holo-card--tiny .ws-input--name{
  width: 100%;
  height: 42px;
  padding: 10px 12px;
  border-radius: 10px;

  /* zera QUALQUER pintura */
  background: transparent !important;
  background-color: rgba(255,255,255,0) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;

  /* aro claro, igual aos cards */
  border: 1px solid rgba(255,255,255,.45) !important;
  color: #eafcff;
  caret-color: #ffffff;

  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-clip: padding-box;
}

/* placeholder visível em todos os engines */
.ws-holo-card--tiny .ws-input--name::placeholder{ color: rgba(255,255,255,.78); opacity: 1; }
.ws-holo-card--tiny .ws-input--name::-webkit-input-placeholder{ color: rgba(255,255,255,.78); }
.ws-holo-card--tiny .ws-input--name::-moz-placeholder{ color: rgba(255,255,255,.78); }
.ws-holo-card--tiny .ws-input--name:-ms-input-placeholder{ color: rgba(255,255,255,.78); }

/* foco: aro um tiquinho mais forte */
.ws-holo-card--tiny .ws-input--name:focus{
  border-color: rgba(255,255,255,.85) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.20);
}

/* neutraliza o autofill do Chromium/Edge */
.ws-input--name:-webkit-autofill,
.ws-input--name:-webkit-autofill:hover,
.ws-input--name:-webkit-autofill:focus{
  -webkit-text-fill-color:#eafcff;
  box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Frase de apoio abaixo do input (modal de nome) */
.ws-holo-card--tiny .ws-name-hint{
  margin-top: 8px;
  text-align: center;
  font: 500 13px/1.35 Inter, system-ui;
  color: rgba(255,255,255,.82);
  letter-spacing: .2px;
  text-shadow: 0 0 8px rgba(0,0,0,.18);
}

/* título branco no modal de nome */
.ws-holo-card--tiny .ws-holo-title,
.ws-holo-card--tiny .ws-holo-title--xs{
  color:#fff !important;
  text-shadow: 0 0 10px rgba(0,0,0,.22); /* sutil pra legibilidade */
  font-weight: 700;                      /* deixa firme sem parecer título gigante */
  text-align: center;
}