@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Pacifico&family=Playfair+Display:ital,wght@0,700;1,700&display=swap");

.grade-modelos-convite {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    border: 0;
    padding: 0;
    margin: 0 0 24px;
    min-width: 0;
}
.grade-modelos-convite legend {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 12px;
}
.opcao-modelo,
a.opcao-modelo,
a.convite-atalho {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    cursor: pointer;
    background: #101010;
    color: inherit;
    text-decoration: none;
}
a.convite-atalho {
    padding: 0;
    border: 0;
    background: transparent;
}
.opcao-modelo input[type="radio"] {
    justify-self: start;
}
.opcao-modelo.is-ativo,
.opcao-modelo:has(input:checked) {
    border-color: var(--red);
    box-shadow: 0 0 0 1px var(--red);
}
.opcao-modelo .convite-cartao { min-height: 240px; transform: scale(.98); }

.convite-cartao {
    --c-fundo: #120c04;
    --c-fonte: #fff6d8;
    --c-destaque: #e8c547;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-width: 220px;
    max-width: 420px;
    min-height: 320px;
    margin: 0 auto 8px;
    padding: 28px 22px 24px;
    border-radius: 22px;
    color: var(--c-fonte);
    background: var(--c-fundo);
    text-align: center;
    box-shadow: 0 22px 40px rgba(0, 0, 0, .35);
}
.convite-cartao h3 {
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    margin: 0 0 .35em;
    text-transform: none;
    letter-spacing: .02em;
    color: var(--c-destaque);
}
.convite-kicker,
.convite-selo {
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .68rem;
    font-weight: 700;
    opacity: .85;
}
.convite-nome,
.convite-data,
.convite-texto {
    position: relative;
    z-index: 1;
    margin: 0 0 .55em;
}
.convite-nome {
    font-size: 1.15rem;
    font-weight: 700;
}
.convite-texto { opacity: .92; line-height: 1.45; }
.convite-foto {
    position: relative;
    z-index: 1;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    margin: 8px auto 14px;
    border: 3px solid var(--c-destaque);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
.convite-ornamento {
    position: absolute;
    inset: 10px;
    pointer-events: none;
    z-index: 0;
    border-radius: 16px;
}
.convite-ornamento-a { border: 1px solid color-mix(in srgb, var(--c-destaque) 55%, transparent); }
.convite-ornamento-b { inset: 18px; border: 1px dashed color-mix(in srgb, var(--c-destaque) 35%, transparent); }

.modelo-festa-ouro {
    font-family: "Cinzel", var(--display), serif;
    background:
        radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--c-destaque) 45%, transparent), transparent 50%),
        repeating-linear-gradient(135deg, rgba(232, 197, 71, .08) 0 12px, transparent 12px 24px),
        var(--c-fundo);
    box-shadow: 0 0 0 2px var(--c-destaque), 0 24px 50px rgba(232, 197, 71, .25);
}
.modelo-festa-ouro h3 { text-transform: uppercase; letter-spacing: .12em; }
.modelo-festa-ouro::after {
    content: "✦";
    position: absolute;
    right: 18px;
    top: 14px;
    color: var(--c-destaque);
    font-size: 1.4rem;
    z-index: 1;
}

.modelo-neon-noite {
    font-family: "Oswald", var(--display), sans-serif;
    background:
        radial-gradient(circle at 20% 20%, #ff2bd655, transparent 32%),
        radial-gradient(circle at 80% 80%, #00f0ff44, transparent 36%),
        linear-gradient(160deg, #120018, var(--c-fundo));
    box-shadow: 0 0 24px #ff2bd655, 0 0 40px #00e5ff33;
}
.modelo-neon-noite h3 {
    text-transform: uppercase;
    text-shadow: 0 0 12px var(--c-destaque), 0 0 28px #00e5ff;
}
.modelo-neon-noite .convite-ornamento-a {
    border: 2px solid #00e5ff;
    box-shadow: inset 0 0 24px #ff2bd633;
}

.modelo-baloes-festa {
    font-family: "Pacifico", cursive;
    background:
        radial-gradient(circle at 12% 18%, #ff7eb680 0 28px, transparent 29px),
        radial-gradient(circle at 86% 16%, #7ad7f080 0 24px, transparent 25px),
        radial-gradient(circle at 18% 86%, #ffe06680 0 26px, transparent 27px),
        radial-gradient(circle at 82% 82%, #c77dff80 0 30px, transparent 31px),
        linear-gradient(180deg, #fff, var(--c-fundo));
    color: var(--c-fonte);
}
.modelo-baloes-festa h3 { text-transform: none; letter-spacing: 0; font-weight: 400; }
.modelo-baloes-festa .convite-kicker,
.modelo-baloes-festa .convite-selo { font-family: var(--font); }

.modelo-rose-gold {
    font-family: "Playfair Display", serif;
    background:
        radial-gradient(80% 50% at 50% 0%, #ffd6c855, transparent 60%),
        linear-gradient(180deg, #3a1c22, var(--c-fundo));
    box-shadow: 0 20px 40px rgba(232, 165, 152, .28);
}
.modelo-rose-gold h3 { font-style: italic; text-transform: none; }
.modelo-rose-gold .convite-foto { border-radius: 16px; }

.modelo-jungle-festa {
    font-family: "Oswald", sans-serif;
    background:
        radial-gradient(60% 40% at 10% 0%, #1f6f3455, transparent 50%),
        radial-gradient(50% 50% at 100% 100%, #0b3b1c88, transparent 45%),
        repeating-linear-gradient(-20deg, transparent 0 10px, rgba(182, 242, 124, .07) 10px 12px),
        var(--c-fundo);
}
.modelo-jungle-festa h3 { text-transform: uppercase; letter-spacing: .14em; }
.modelo-jungle-festa .convite-ornamento-a {
    border-width: 6px;
    border-style: double;
}

.modelo-disco-70 {
    font-family: "Pacifico", cursive;
    background:
        conic-gradient(from 220deg at 80% 20%, #ff2bd644, #7b2cbf44, #00e5ff33, #ff2bd644),
        radial-gradient(circle at 80% 18%, #fff8 0 8px, transparent 9px),
        radial-gradient(circle at 76% 24%, #fff6 0 5px, transparent 6px),
        var(--c-fundo);
}
.modelo-disco-70 h3 { text-transform: none; letter-spacing: 0; }
.modelo-disco-70 .convite-ornamento-a {
    border-radius: 50%;
    inset: 8%;
    border: 3px solid var(--c-destaque);
    opacity: .45;
}

.modelo-infantil-doce {
    font-family: "Pacifico", cursive;
    background:
        radial-gradient(circle at 20% 20%, #ffd6ea 0 18px, transparent 19px),
        radial-gradient(circle at 80% 30%, #c8f4ff 0 16px, transparent 17px),
        radial-gradient(circle at 30% 80%, #fff3b0 0 20px, transparent 21px),
        linear-gradient(180deg, #fff, var(--c-fundo));
    box-shadow: 0 16px 30px rgba(255, 120, 180, .2);
}
.modelo-infantil-doce h3 { text-transform: none; }
.modelo-infantil-doce .convite-foto { border-radius: 24px; }

.modelo-classico-vermelho {
    font-family: "Oswald", sans-serif;
    background:
        linear-gradient(180deg, #2a0000, var(--c-fundo) 42%, #070000),
        var(--c-fundo);
    box-shadow: 0 0 0 3px var(--c-destaque), 0 24px 44px rgba(225, 6, 0, .35);
}
.modelo-classico-vermelho h3 { text-transform: uppercase; letter-spacing: .16em; }
.modelo-classico-vermelho .convite-ornamento-a {
    border: 3px solid var(--c-destaque);
    clip-path: polygon(8% 0, 92% 0, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0 92%, 0 8%);
}

.modelo-estrela-prata {
    font-family: "Cinzel", serif;
    background:
        radial-gradient(circle at 20% 12%, #fff8 0 2px, transparent 3px),
        radial-gradient(circle at 70% 18%, #fff6 0 1px, transparent 2px),
        radial-gradient(circle at 40% 40%, #fff5 0 1.5px, transparent 2px),
        radial-gradient(circle at 82% 72%, #fff7 0 2px, transparent 3px),
        linear-gradient(160deg, #1c2740, var(--c-fundo));
}
.modelo-estrela-prata h3 { letter-spacing: .18em; text-transform: uppercase; }
.modelo-estrela-prata::before {
    content: "★";
    position: absolute;
    left: 16px;
    top: 12px;
    color: var(--c-destaque);
    z-index: 1;
}

.modelo-tramonto {
    font-family: "Playfair Display", serif;
    background:
        radial-gradient(90% 70% at 50% 110%, #ff7a1888, transparent 55%),
        linear-gradient(180deg, #3a1028, var(--c-fundo) 40%, #ff7a1833);
}
.modelo-tramonto h3 { font-style: italic; text-transform: none; }
.modelo-tramonto .convite-ornamento-b { border-style: solid; opacity: .4; }

.tabela-wrap .convite-cartao { max-width: 280px; min-height: 260px; padding: 20px 16px; }
.tabela-wrap .convite-cartao h3 { font-size: 1.15rem; }
.tabela-wrap .convite-foto { width: 72px; height: 72px; }

.envio-convite { display: grid; gap: 22px; max-width: 760px; margin: 0 auto; }
.envio-previa { display: grid; justify-items: center; gap: 12px; }
.envio-canais { display: flex; gap: 18px; flex-wrap: wrap; }
.envio-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.lista-envio { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.item-envio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: #101010;
}
.item-envio.is-bloqueado { opacity: .55; }
.item-envio:not(.is-bloqueado) .item-envio-check { cursor: pointer; }
.item-envio-check { align-items: center !important; margin: 0; flex: 1; min-width: 0; }
.item-envio-check span { display: grid; min-width: 0; }
.item-envio-check small { color: var(--mute); font-weight: 500; }
.envio-whatsapp-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.envio-redes { display: grid; gap: 12px; }
.envio-redes-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.envio-redes-acoes .btn { margin: 0; }
.envio-redes input[readonly] {
    width: 100%;
    cursor: text;
}
.convite-publico { display: grid; gap: 22px; max-width: 760px; margin: 0 auto; }
.convite-publico > h1 { margin-bottom: 0; }
.convite-bloqueado {
    border: 1px dashed var(--line);
    border-radius: 16px;
    padding: 18px 16px;
    background: rgba(225, 6, 0, .06);
}
.app-main:has(.convite-publico) .app-topo { display: none; }

@media (max-width: 720px) {
    .convite-cartao { max-width: 100%; }
    .item-envio { flex-direction: column; align-items: stretch; }
}