/* ===========================================================================
   Carteira digital
   ---------------------------------------------------------------------------
   Uma marcação única serve a três situações: a carteira do associado, o modo
   paisagem em tela cheia e a prévia dentro das Configurações.

   Como: o cartão é um container de consulta e todo tamanho interno deriva de
   `--s`, a escala de um "pixel de projeto". O desenho foi feito para 940px de
   largura, então `--s = larguraAtual / 940`. Em qualquer largura o cartão é
   exatamente o mesmo desenho, proporcional — sem media query por breakpoint e
   sem prévia que mente sobre o resultado final.
   =========================================================================== */

.card-stage{
    container-type:inline-size;
    container-name:card;
    width:min(940px,100%);
}

.digital-card{
    --s:calc(100cqw / 940);          /* 1 unidade = 1px do desenho original */
    --pad:calc(45 * var(--s));
    position:relative;
    aspect-ratio:1.62 / 1;
    border-radius:calc(30 * var(--s));
    padding:var(--pad);
    color:#fff;
    overflow:hidden;
    isolation:isolate;
    display:flex;
    flex-direction:column;
    background:linear-gradient(145deg,var(--card-primary),color-mix(in srgb,var(--card-primary) 75%,black));
    box-shadow:0 35px 80px color-mix(in srgb,var(--card-primary) 35%,transparent);
}

/* --- Fundo: imagem + véu de cor ------------------------------------------
   O véu existe para o texto continuar legível sobre qualquer foto. A opacidade
   é configurável no painel; sem ela, uma imagem clara apagaria o conteúdo. */

.card-media{
    position:absolute;inset:0;z-index:-2;
    background-image:var(--card-image);
    background-size:cover;background-position:center;
    filter:blur(calc(var(--card-blur, 0) * 1px));
    transform:scale(1.06);            /* evita borda transparente ao desfocar */
}
.card-veil{
    position:absolute;inset:0;z-index:-1;
    background:linear-gradient(145deg,var(--card-primary),color-mix(in srgb,var(--card-primary) 70%,black));
    opacity:var(--card-overlay, .55);
}
.digital-card.has-image .card-glow{opacity:.1}

.card-glow{
    position:absolute;z-index:-1;
    width:calc(500 * var(--s));height:calc(500 * var(--s));
    right:calc(-250 * var(--s));top:calc(-250 * var(--s));
    border-radius:50%;background:var(--card-accent);
    filter:blur(calc(80 * var(--s)));opacity:.18;
}

/* --- Cabeçalho ----------------------------------------------------------- */

.digital-card header{display:flex;align-items:center;gap:calc(12 * var(--s));position:relative}
.digital-card header>img,.digital-card header>strong{
    width:calc(55 * var(--s));height:calc(55 * var(--s));
    object-fit:contain;border-radius:calc(14 * var(--s));
    background:#fff;color:var(--card-primary);
    display:grid;place-items:center;font-size:calc(25 * var(--s));
}
.digital-card header div{min-width:0}
.digital-card header div b,.digital-card header div small{display:block}
.digital-card header div b{font:800 calc(18 * var(--s))/1.2 Manrope,sans-serif}
.digital-card header div small{
    font-size:calc(9 * var(--s));letter-spacing:calc(1.6 * var(--s));
    color:var(--card-accent);margin-top:calc(3 * var(--s));
}
.card-status{
    margin-left:auto;flex:0 0 auto;
    border:1px solid #ffffff33;border-radius:calc(30 * var(--s));
    padding:calc(8 * var(--s)) calc(12 * var(--s));
    font-size:calc(9 * var(--s));color:var(--card-accent);white-space:nowrap;
}

/* --- Identificação -------------------------------------------------------- */

.card-person{
    display:flex;align-items:center;gap:calc(25 * var(--s));
    margin:calc(55 * var(--s)) 0 calc(35 * var(--s));position:relative;
}
.card-person>img,.card-person>span{
    flex:0 0 auto;
    width:calc(120 * var(--s));height:calc(120 * var(--s));
    object-fit:cover;border-radius:calc(24 * var(--s));
    border:calc(3 * var(--s)) solid var(--card-accent);
    display:grid;place-items:center;background:#ffffff20;
    font:800 calc(42 * var(--s))/1 Manrope,sans-serif;
}
.card-person>div{min-width:0}
.card-person small,.card-data small{
    color:var(--card-accent);font-size:calc(9 * var(--s));letter-spacing:calc(1.3 * var(--s));
}
.card-person h1{
    font-size:calc(30 * var(--s));margin:calc(5 * var(--s)) 0;line-height:1.15;
    overflow-wrap:anywhere;
}
.card-person div>b{font-size:calc(12 * var(--s));letter-spacing:calc(1.5 * var(--s))}

/* --- Dados ---------------------------------------------------------------- */

.card-data{
    display:flex;gap:calc(60 * var(--s));
    border-top:1px solid #ffffff24;padding-top:calc(22 * var(--s));
}
.card-data div{display:grid;gap:calc(5 * var(--s))}
.card-data b{font-size:calc(13 * var(--s))}

/* --- Rodapé --------------------------------------------------------------- */

.digital-card footer{
    position:absolute;bottom:var(--pad);right:var(--pad);left:var(--pad);
    display:flex;align-items:flex-end;justify-content:space-between;gap:calc(16 * var(--s));
}
.digital-card footer>span{font-size:calc(9 * var(--s));color:#a9c7bb}

.digital-card .visual-code{
    display:grid;grid-template-columns:repeat(7,1fr);gap:calc(2 * var(--s));
    width:calc(62 * var(--s));height:calc(62 * var(--s));
    padding:calc(5 * var(--s));border-radius:calc(9 * var(--s));background:#fff;
}
.digital-card .visual-code i{border-radius:calc(1 * var(--s));background:transparent}
.digital-card .visual-code i.on{background:var(--card-primary)}

/* --- Palco e ações -------------------------------------------------------- */

.card-fullscreen{
    min-height:calc(100dvh - 78px);
    padding:35px;
    display:grid;place-items:center;
    background:radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--card-accent) 25%,transparent),transparent 35%),#e8efec;
}
.card-actions{display:flex;justify-content:center;gap:10px;margin-top:25px;flex-wrap:wrap}
.card-actions button,.card-actions a{
    border:1px solid #cad7d1;background:#fff;border-radius:10px;
    padding:11px 15px;cursor:pointer;color:#4d6058;
}
.card-actions a{background:var(--card-primary);color:#fff;border-color:transparent}

/* Dica de girar o aparelho: só faz sentido em tela pequena e em pé. */
.card-rotate-hint{display:none;align-items:center;justify-content:center;gap:8px;margin-top:16px;color:#5d6f68;font-size:12px}
.card-rotate-hint svg{animation:rotate-hint 2.6s ease-in-out infinite}
@keyframes rotate-hint{0%,55%,100%{transform:rotate(0)}25%,45%{transform:rotate(-90deg)}}
@media(max-width:900px) and (orientation:portrait){.card-rotate-hint{display:flex}}

/* ---------------------------------------------------------------------------
   Retrato em tela estreita
   O cartão de crédito deitado fica ilegível num celular em pé, então ele vira
   um cartão vertical — mesmo conteúdo, proporção de credencial.
   --------------------------------------------------------------------------- */

@container card (max-width:520px){
    .digital-card{
        --s:calc(100cqw / 520);
        aspect-ratio:auto;
        min-height:calc(660 * var(--s));
    }
    .card-person{flex-direction:column;align-items:flex-start;gap:calc(18 * var(--s));margin:calc(34 * var(--s)) 0 calc(26 * var(--s))}
    .card-data{display:grid;grid-template-columns:1fr 1fr;gap:calc(18 * var(--s))}
    .digital-card footer{position:static;margin-top:auto;padding-top:calc(24 * var(--s))}
}

@media(max-width:900px){
    .card-fullscreen{min-height:calc(100dvh - 64px);padding:18px 12px 96px}
    .card-actions a,.card-actions button{flex:1 1 auto;min-height:44px}
}

/* ---------------------------------------------------------------------------
   Paisagem no celular — a "versão expandida"
   Ao deitar o aparelho, tudo que é navegação sai de cena e o cartão ocupa a
   tela inteira na proporção real, limitado pela altura disponível.
   --------------------------------------------------------------------------- */

@media(max-height:600px) and (orientation:landscape){
    body.member-authenticated:has(.card-fullscreen) .member-header,
    body.member-authenticated:has(.card-fullscreen) .member-bottom-nav,
    body.member-authenticated:has(.card-fullscreen) .site-footer,
    .card-fullscreen .card-actions,
    .card-fullscreen .card-rotate-hint{display:none}

    .card-fullscreen{min-height:100dvh;height:100dvh;padding:10px}
    .card-stage{
        /* Maior largura que ainda cabe na altura, mantendo 1.62:1. */
        width:min(100vw - 20px, calc((100dvh - 20px) * 1.62));
    }
    .digital-card{box-shadow:0 18px 44px #0b201a55}
}

/* ---------------------------------------------------------------------------
   Impressão
   --------------------------------------------------------------------------- */

@media print{
    .card-fullscreen{min-height:auto;padding:0;background:none}
    .card-actions,.card-rotate-hint,.member-header,.member-bottom-nav,.site-footer{display:none !important}
    .card-stage{width:100%}
    .digital-card{box-shadow:none;print-color-adjust:exact;-webkit-print-color-adjust:exact}
}

/* ---------------------------------------------------------------------------
   Prévia no painel de configurações
   É o mesmo cartão, sem simulação: o que aparece aqui é o que o associado vê.
   --------------------------------------------------------------------------- */

.card-preview{margin-top:6px}
.card-preview-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.card-preview-bar>b{font-size:11px;color:#52625b;margin-right:auto}
.card-preview-mode{
    border:1px solid var(--line,#dfe9e5);background:#fff;border-radius:8px;
    padding:7px 11px;font-size:11px;font-weight:700;color:#68766f;cursor:pointer;
    transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.card-preview-mode.active{background:#e9f6f1;color:var(--green);border-color:transparent}

.card-preview-frame{
    background:radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--card-accent) 22%,transparent),transparent 38%),#e8efec;
    border:1px solid var(--line,#dfe9e5);border-radius:14px;padding:20px;
    display:grid;place-items:center;
}
/* Retrato: estreita o palco para o cartão assumir a forma vertical. */
.card-preview[data-mode="portrait"] .card-stage{width:min(330px,100%)}
.card-preview[data-mode="landscape"] .card-stage{width:min(760px,100%)}