/* ==========================================================================
   Overrides do casamento de Ana Clara & Isaque (carrega depois do styles.min.css)
   Paleta emprestada do religioso-hogwarts: couro #191303, dourado #dac769,
   pergaminho #e8d5b5, selo #740001.
   ========================================================================== */

/* ==========================================================================
   HIERARQUIA (2026-08-06) — o site tinha todas as seções com o mesmo peso:
   mesmo título 18px, mesmo cinza-azulado no texto, mesmo fundo branco, mesmo
   botão. Nada liderava. Aqui a ordem de leitura vira: confirmar presença →
   presentes/chá → local → resto. Mesma paleta e mesmas fontes do template.
   ========================================================================== */

/* Títulos de seção: presença real + fio dourado como assinatura */
section h3 {
    font-size: 26px;
    letter-spacing: 4px;
    color: #3c341f;
}

section h3::after {
    content: "";
    display: block;
    width: 54px;
    height: 2px;
    margin: 16px auto 0;
    background: #dac769;
}

/* Corpo: o template usa um cinza-azulado translúcido (rgba(28,54,83,.6)) que
   destoa do pergaminho e mal passa em contraste. Tom quente, escuro o bastante. */
section p {
    color: #4a4436;
}

/* Ritmo: o template usa 40px em tudo — sem contraste entre apertado e generoso */
.section-padding {
    padding: 76px 0;
}

/* Botão primário (Confirmar presença, chá): sólido, texto escuro sobre dourado.
   O template pintava o texto de branco sobre #e8ca6f — ~1.9:1, ilegível. */
.btn-fill {
    background-color: #d9bf62;
    border-color: #d9bf62;
    color: #2e2718;
    font-weight: 600;
}

.btn-fill:hover,
.btn-fill:focus {
    background-color: #c9ae52;
    border-color: #c9ae52;
    color: #2e2718;
}

/* "Adicionar ao calendário" é apoio, não ação principal: o ouical.js o gera com
   as classes do botão sólido, o que o deixava competindo com o CTA do chá. */
#add-to-calendar-label.btn-fill {
    background-color: transparent;
    border-color: #d9bf62;
    color: #8a7526;
}

#add-to-calendar-label.btn-fill:hover,
#add-to-calendar-label.btn-fill:focus {
    background-color: #f8f0d9;
    border-color: #c9ae52;
    color: #6f5d1c;
}

/* Bloco que precisa ser visto antes dos vizinhos (hoje: lista de presentes) */
.bloco-destaque {
    background: #fdf9ef;
    border: 1px solid #e6d9b4;
    border-radius: 4px;
    padding: 48px 36px 40px;
    box-shadow: 0 18px 40px -24px rgba(60, 45, 10, 0.5);
}

.bloco-destaque h3 {
    margin-top: 0;
}

/* RSVP é o objetivo do site: sai do branco corrido e ganha faixa própria */
.rsvp {
    background: #fdf9ef;
    border-top: 1px solid #ece0c4;
}

@media (max-width: 767px) {
    section h3 {
        font-size: 21px;
        letter-spacing: 3px;
    }

    .section-padding {
        padding: 52px 0;
    }

    .bloco-destaque {
        padding: 36px 20px 32px;
    }
}

/* Hero: wallpaper do castelo com overlay escuro para legibilidade do texto */
.hero {
    background: linear-gradient(180deg, rgba(19, 13, 1, 0.35) 0%, rgba(19, 13, 1, 0.55) 55%, rgba(19, 13, 1, 0.8) 100%),
                url("../img/hero-bg.jpg") center center / cover no-repeat #191303;
}

/* Brasão (SVG de linha preta com fundo transparente) invertido para branco no escuro */
.hero-content img.hero-brasao {
    width: min(250px, 26vh);
    max-width: 50%;
    filter: brightness(0) invert(1) drop-shadow(0 4px 16px rgba(0, 0, 0, 0.75));
    margin-bottom: clamp(14px, 3vh, 34px);
}

.hero-content {
    padding-top: 12%;
}

.hero h1,
.hero-content .full-names,
.hero p.intro {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}

/* O hero do template empurrava o conteúdo com padding-top percentual (40% → 110%
   no celular) sobre um min-height fixo de 750px: o botão "Confirmar presença"
   caía SEMPRE abaixo da dobra — 1106px numa tela de 900px, 897px numa de 844px.
   Uma tela cheia com o conteúdo centrado resolve em todos os tamanhos. */
.hero {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(90px, 14vh, 150px) 0 clamp(80px, 12vh, 120px);
}

/* Os espaços do hero passam a responder à ALTURA da tela — é ela que decide se
   o CTA cabe. Fixos em px, o brasão de 250px e o `margin-bottom: 80px` do
   template empurravam o botão para fora em telas baixas. */
.hero h1 {
    margin-bottom: clamp(10px, 1.6vh, 18px);
}

.hero-content .full-names {
    margin-bottom: clamp(14px, 2.4vh, 26px);
}

.hero p.intro {
    margin-bottom: clamp(16px, 2.6vh, 30px);
}

.hero > .container {
    width: 100%;
}

/* O template deixa `section.navigation` em position:fixed SEM `top`, contando com
   a posição estática — que, com o hero centrado por flex, passaria a ser o meio
   da tela. Ancorar no topo é obrigatório aqui. */
section.navigation {
    top: 0;
    left: 0;
}

.hero .hero-content {
    padding-top: 0;
}

/* Respiro entre o botão de RSVP e a seta flutuante (absolute, bottom:30px) */
.hero a.rsvp-btn {
    margin-top: clamp(16px, 2.4vh, 28px);
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
    .hero {
        padding: 110px 0 100px;
    }

    .hero-content {
        padding-top: 0;
    }
}

/* Telas baixas (Android de 640px, notebooks antigos): comprime o hero até o
   CTA caber na primeira tela — medido, não estimado. */
@media screen and (max-height: 700px) {
    .hero {
        padding: 64px 0 72px;
    }

    .hero-content img.hero-brasao {
        width: min(180px, 20vh);
    }

    .hero h1 {
        font-size: 38px;
    }

    .hero-content .full-names {
        font-size: 14px;
        line-height: 1.5;
    }

    .hero p.intro {
        font-size: 16px;
    }
}

.hero h1 {
    letter-spacing: 2px;
    margin-bottom: 18px;
}

/* Nomes completos sob o título, como no site do civil */
.hero-content .full-names {
    color: rgba(255, 255, 255, 0.92);
    font-style: italic;
    font-weight: 300;
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 1.6;
    margin-bottom: 26px;
}

.hero-content .full-names .amp {
    color: #dac769;
    font-style: normal;
    font-size: 26px;
    line-height: 1;
}

@media (max-width: 767px) {
    .hero-content .full-names {
        font-size: 16px;
    }
}

/* Brasão no header (invertido para branco) — margem negativa pra não esticar a barra.
   Seletor "header .logo img" para vencer a regra height:19px do styles.min.css. */
header .logo img {
    height: 72px;
    margin: -20px 0;
    filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}

/* Mapa embutido (iframe do Google Maps sem API key) */
#map-canvas iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* O template puxa o card sobre o mapa com margin-top:-502px e devolve 150px.
   Se o card ficar mais baixo que 352px (mobile, ou oculto pelo "Ver mapa"),
   a seção seguinte invadia o mapa — o min-height garante a folga sempre. */
#map-content-wrapper {
    min-height: 400px;
}

/* Placeholders de foto */
#fotos .img-wrap img {
    width: 100%;
}

#fotos .img-wrap {
    margin-bottom: 20px;
}

/* ---------- RSVP por família ---------- */

/* O styles.min.css só posiciona fa-user/fa-users/fa-envelope/fa-key dentro do
   .form-input-group — replica para os ícones novos da busca e do recadinho. */
.rsvp .rsvp-form .form-input-group i.fa-search,
.rsvp .rsvp-form .form-input-group i.fa-pencil {
    font-size: 14px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 20px;
}

/* Nasce escondido e só aparece se o RSVP estiver em modo de teste (js/rsvp.js).
   Antes era o contrário, e em produção o aviso piscava antes do JS escondê-lo. */
.rsvp-aviso-teste {
    display: none;
    background: #fdf6e3;
    border: 1px solid #dac769;
    border-radius: 3px;
    padding: 6px 14px;
    font-size: 13px;
    margin-bottom: 10px;
}

.rsvp-resultados {
    margin-top: 4px;
}

.rsvp-resultado {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #e0d7c2;
    border-radius: 3px;
    padding: 12px 16px;
    margin-bottom: 6px;
    font-size: 15px;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}

.rsvp-resultado:hover {
    background: #fdf6e3;
    border-color: #dac769;
}

.rsvp-nada {
    font-size: 14px;
    color: #5f665c; /* contraste AA sobre branco */
    padding: 10px 0;
}

/* Estado de carregamento enquanto a família/envio está em voo */
.rsvp-resultados.carregando,
#rsvp-step-familia.enviando {
    opacity: 0.55;
    pointer-events: none;
}

/* O template mata o outline global (*:focus{outline:none!important}) —
   devolve um indicador de foco visível pra navegação por teclado. */
.rsvp a:focus-visible,
.rsvp button:focus-visible,
.rsvp input:focus-visible {
    outline: 2px solid #bdab51 !important;
    outline-offset: 2px;
}

/* Os passos recebem foco programático na troca — sem anel visual neles */
#rsvp-step-familia:focus,
#rsvp-step-sucesso:focus {
    outline: none !important;
}

.rsvp-membros {
    margin-bottom: 18px;
}

/* O membro virou bloco: a linha (nome + Vai/Não vai) e, embaixo, o campo de nome
   completo que aparece só depois de marcar "Vai". */
.rsvp-membro {
    background: #fff;
    border: 1px solid #e0d7c2;
    border-radius: 3px;
    padding: 10px 14px;
    margin-bottom: 6px;
}

.rsvp-membro-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rsvp-membro-extra {
    border-style: dashed;
}

.rsvp-membro-nomecompleto {
    margin-top: 8px;
}

.rsvp-membro-nomecompleto input {
    width: 100%;
    border: 1px solid #e0d7c2;
    border-radius: 3px;
    padding: 8px 12px;
    font-size: 14px;
    background: #fdfcf8;
}

.rsvp-membro-nomecompleto input:focus {
    outline: none;
    border-color: #dac769;
}

.rsvp-remove-extra {
    background: none;
    border: 0;
    color: #a03a3a;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.rsvp-extras {
    margin-bottom: 18px;
    padding-top: 14px;
    border-top: 1px dashed #e0d7c2;
}

.rsvp-extras-titulo {
    font-size: 13px;
    color: #5f665c;
    margin-bottom: 8px;
}

.rsvp-membro-nome {
    text-align: left;
    font-size: 15px;
}

.rsvp-membro-nome em {
    color: #5f665c; /* contraste AA sobre branco */
    font-size: 12px;
    font-style: normal;
}

.rsvp-toggle {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.rsvp-opt {
    border: 1px solid #b3a37f;
    background: #fff;
    color: #4a4f47; /* contraste AA sobre branco */
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all 150ms ease;
}

.rsvp-opt.ativo-sim {
    background: #dac769;
    border-color: #bdab51;
    color: #3c341f;
    font-weight: 600;
}

.rsvp-opt.ativo-nao {
    background: #6f6a5e;
    border-color: #5a5548;
    color: #fff;
}

.rsvp-link-voltar {
    margin-top: 14px;
    font-size: 13px;
}

#rsvp-step-sucesso h4 {
    margin-top: 10px;
}

/* ---------- RSVP: nome fora da lista ---------- */

.rsvp-sem-nome {
    background: #fdf6e3;
    border: 1px solid #dac769;
    border-radius: 3px;
    padding: 18px 20px;
    margin-top: 6px;
    text-align: center;
}

.rsvp-sem-nome p {
    font-size: 14px;
    color: #4a4f47; /* contraste AA sobre o pergaminho */
    margin-bottom: 10px;
}

.rsvp-whats-grupo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}

.rsvp-sem-nome .rsvp-whats {
    margin: 0;
}

/* ---------- Instagram no rodapé ---------- */

footer .footer-insta {
    margin-bottom: 4px;
}

footer .footer-insta a {
    font-size: 16px;
    letter-spacing: 1px;
}

footer .footer-insta i.fa-instagram {
    font-size: 18px;
    vertical-align: -1px;
}

footer .footer-insta-nota {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 16px;
}

/* ---------- Lista de presentes (aviso "em breve") ---------- */

/* Mesmo selo de pergaminho + dourado usado no aviso do RSVP */
.presentes-selo {
    display: inline-block;
    background: #fdf6e3;
    border: 1px solid #dac769;
    border-radius: 3px;
    padding: 6px 18px;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.presentes-selo i.fa-gift {
    color: #bdab51;
}

/* Dentro do bloco destacado o pergaminho do selo sumiria contra o fundo */
.bloco-destaque .presentes-selo {
    background: #fff;
}

#presentes .presentes-cha {
    margin-top: 26px;
    margin-bottom: 14px;
}

/* ==========================================================================
   #fotos — variação 5: PAPELARIA (moldura de convite + brasão em marca d'água)
   Tom de convite impresso: faixa pergaminho full-bleed, moldura dupla e o
   brasão do casal ao fundo, bem apagado. Resolve o vazio com material do
   próprio casamento, sem precisar de foto nenhuma. Mobile-first: a moldura
   encolhe e o brasão cai de escala para não brigar com o texto.
   ========================================================================== */

.fotos-papelaria {
    background: #fdf9ef;
    border-top: 1px solid #ece0c4;
    border-bottom: 1px solid #ece0c4;
}

.fotos-moldura {
    position: relative;
    border: 1px solid #dac769;
    padding: 54px 34px 46px;
    background: rgba(255, 255, 255, 0.55);
    overflow: hidden;
}

/* Segunda linha da moldura — o detalhe que faz ler como papelaria, não como card */
.fotos-moldura::before {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    bottom: 7px;
    left: 7px;
    border: 1px solid rgba(218, 199, 105, 0.45);
    pointer-events: none;
}

/* Brasão ao fundo: precisa ser fantasma, não ilustração */
.fotos-moldura::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 230px;
    height: 230px;
    transform: translate(-50%, -50%);
    background: url("../img/brasao.svg") center / contain no-repeat;
    opacity: 0.06;
    pointer-events: none;
}

.fotos-moldura > * {
    position: relative;
    z-index: 1;
}

.fotos-suprarrubrica {
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8a7526;
    margin-bottom: 10px;
}

#fotos .fotos-moldura h3 {
    margin-top: 0;
}

#fotos .fotos-corpo {
    max-width: 460px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.7;
}

#fotos .fotos-cta {
    margin-top: 28px;
    margin-bottom: 16px;
}

#fotos .fotos-rodape {
    font-size: 13px;
    color: #6b6455;
    margin-bottom: 0;
}

#fotos .fotos-rodape i.fa-camera {
    color: #bdab51;
}

@media (max-width: 767px) {
    .fotos-moldura {
        padding: 38px 18px 34px;
    }

    .fotos-moldura::after {
        width: 160px;
        height: 160px;
    }

    #fotos .fotos-corpo {
        font-size: 15px;
    }

    #fotos .fotos-cta .btn {
        display: block;
        width: 100%;
    }

    /* Numa linha só, a nota ia de borda a borda da moldura */
    #fotos .fotos-rodape {
        font-size: 12px;
        line-height: 1.6;
        max-width: 260px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ─────────────── Lista de presentes (vitrine + modal do PIX) ───────────────
   Paleta e formas seguem o resto do site: pergaminho #fdf9ef, borda #e6d9b4,
   dourado #d9bf62. Nada de cor nova — a vitrine tem que parecer parte do convite,
   não um checkout colado por cima. */

.presente-linha {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Cabeçalho de cada seção da lista (Casa, Lua de mel). Filete dourado dos dois
   lados, no mesmo espírito das divisórias do convite. */
.presente-secao {
    text-align: center;
    font-size: 22px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8a7526;
    margin: 46px 0 6px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.presente-secao::before,
.presente-secao::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: #e6d9b4;
}

.presente-secao:first-child {
    margin-top: 10px;
}

/* Cards de altura igual mesmo com descrições de tamanhos diferentes */
.presente-linha > [class*="col-"] {
    display: flex;
    margin-bottom: 26px;
}

.presente-card {
    background: #fdf9ef;
    border: 1px solid #e6d9b4;
    border-radius: 4px;
    padding: 22px 20px 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    box-shadow: 0 14px 32px -26px rgba(60, 45, 10, 0.55);
}

.presente-img {
    height: 150px;
    border-radius: 3px;
    background: #f3ead2 center center / cover no-repeat;
    margin-bottom: 16px;
}

.presente-img-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    line-height: 1;
}

.presente-nome {
    font-weight: 600;
    margin: 0 0 8px;
}

.presente-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #6b6047;
    /* empurra valor + botão para a base, alinhando-os entre cards vizinhos */
    flex: 1 1 auto;
}

.presente-valor {
    font-size: 13px;
    color: #8a7526;
    margin-bottom: 14px;
}

.presente-destaque {
    background: #fdf9ef;
    border: 1px solid #e6d9b4;
    border-radius: 4px;
    padding: 34px 28px;
    text-align: center;
    margin-bottom: 34px;
    box-shadow: 0 18px 40px -24px rgba(60, 45, 10, 0.5);
}

.presente-destaque-emoji {
    font-size: 44px;
    display: block;
    margin-bottom: 10px;
}

/* ── Formulário de cobrança ──
   Era um modal na vitrine até 19/08; virou o miolo da página do presente
   (`/presentes/item/`), que é o pedido do Isaque. Sem overlay: a caixa é a
   própria seção da página. */

.presente-form-caixa {
    background: #fdf9ef;
    border: 1px solid #e6d9b4;
    border-radius: 4px;
    max-width: 420px;
    margin: 30px auto 0;
    padding: 30px 28px 28px;
    text-align: center;
    box-shadow: 0 18px 40px -26px rgba(60, 45, 10, 0.55);
}

.presente-form-caixa label {
    display: block;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    margin: 14px 0 4px;
}

.presente-form-caixa label small {
    font-weight: 400;
    color: #9a8c6a;
}

.presente-form-caixa input[type="text"],
.presente-form-caixa textarea {
    width: 100%;
    border: 1px solid #e0d7c2;
    border-radius: 3px;
    padding: 9px 11px;
    background: #fff;
}

.presente-form-caixa .btn-fill {
    margin-top: 18px;
    width: 100%;
}

.presente-erro {
    color: #8c2f2f;
    background: #f9ecec;
    border: 1px solid #e6cfcf;
    border-radius: 3px;
    padding: 8px 10px;
    font-size: 13px;
    margin-top: 14px;
}

.presente-qr {
    width: 220px;
    max-width: 100%;
    margin: 6px auto 4px;
    display: block;
    background: #fff;
    padding: 8px;
    border-radius: 3px;
}

.presente-instrucao {
    font-size: 14px;
    line-height: 1.6;
}

.presente-total {
    margin: 10px 0 12px;
}

/* O copia-e-cola é longo: fonte menor e monoespaçada evita quebra estranha */
#presente-brcode {
    font-family: "Courier New", monospace;
    font-size: 11px;
    text-align: center;
}

.presente-aguardando {
    margin-top: 16px;
    font-size: 13px;
    color: #8a7526;
}

.presente-sucesso-icone {
    font-size: 46px;
    margin-bottom: 6px;
}

@media (max-width: 767px) {
    .presente-form-caixa {
        padding: 26px 18px 22px;
    }
}

/* Aviso da prévia (?presentes=previa) — precisa ser óbvio para ninguém confundir
   uma lista em revisão com a lista no ar */
.presente-previa-aviso {
    background: #f8f0d9;
    border: 1px dashed #c9ae52;
    border-radius: 3px;
    padding: 8px 12px;
    font-size: 13px;
    color: #6f5d1c;
    margin-bottom: 22px;
}

/* Cartão é alternativa, não o caminho principal: botão de contorno, sem peso
   visual do dourado sólido que o PIX usa */
.presente-btn-cartao {
    margin-top: 10px;
    width: 100%;
    background: transparent;
    border: 1px solid #d9bf62;
    color: #8a7526;
}

.presente-btn-cartao:hover,
.presente-btn-cartao:focus {
    background: #f8f0d9;
    color: #6f5d1c;
}

.presente-nota-cartao {
    font-size: 12px;
    color: #9a8c6a;
    margin: 8px 0 0;
    min-height: 18px; /* reserva a linha para o texto não empurrar o botão */
}

/* ─────────── Páginas internas (hoje: /presentes/) ───────────
   A navbar do template é branca sobre o hero escuro e position:fixed. Numa
   página sem hero isso daria texto branco sobre fundo claro (invisível), então
   aqui ela vira barra sólida no fluxo normal. */
section.navigation.navegacao-interna {
    position: static;
    background-color: #372428;
}

.navegacao-interna header {
    padding: 26px 0;
    border-bottom: none;
}

/* Em telas menores que 1170px o header do template estoura, porque tem largura
   fixa. Na home o hero disfarça; aqui não há o que disfarce. */
@media (max-width: 1199px) {
    .navegacao-interna header {
        width: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
}

.pagina-interna #presentes {
    padding-top: 56px;
}

.presentes-voltar {
    margin-top: 40px;
}

.presentes-voltar a {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #8a7526;
}

/* Presente de valor fechado: o campo vira leitura, então precisa PARECER leitura
   — senão o convidado tenta digitar e acha que travou */
.presente-input-fixo {
    background: #f3ead2 !important;
    font-weight: 600;
    cursor: default;
}

/* Presente exclusivo que já foi dado: continua na vitrine (faz parte da lista),
   mas sem ação e visualmente recuado */
.presente-card-dado {
    opacity: .55;
}

.presente-card-dado .presente-img {
    filter: grayscale(1);
}

.presente-dado {
    margin: 0;
    padding: 9px 0;
    font-size: 13px;
    font-weight: 600;
    color: #6f7a63;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.presente-valor-fixo {
    font-size: 17px;
    font-weight: 700;
    color: #6f5d1c;
}

/* ─────── Card da vitrine como link para a página do presente (19/08) ───────
   O card inteiro virou <a>, como no chá: o Isaque pediu página por presente.
   Sem `color: inherit` o card viraria um bloco dourado — o template pinta todo
   <a> com a cor de destaque. */
.presente-card-link,
.presente-card-link:hover,
.presente-card-link:focus {
    color: inherit;
    text-decoration: none;
}

.presente-card-link {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.presente-card-link:hover,
.presente-card-link:focus {
    border-color: #d9bf62;
    transform: translateY(-3px);
    box-shadow: 0 20px 38px -20px rgba(60, 45, 10, 0.6);
}

/* Quem navega por teclado precisa ver onde está — o card é o alvo do foco */
.presente-card-link:focus {
    outline: 2px solid #d9bf62;
    outline-offset: 3px;
}

/* A "Contribuição livre" também é link, e <a> nasce inline */
a.presente-destaque {
    display: block;
}

/* ─────────── Página de um presente só (/presentes/item/?id=N) ───────────
   Mesma paleta da vitrine; a diferença é a escala — aqui o presente é o assunto
   da página, não um card numa grade de 95. */

.presente-item-voltar {
    margin-bottom: 26px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.presente-item-voltar a {
    color: #8a7526;
}

.presente-item-arte {
    max-width: 300px;
    margin: 0 auto 24px;
}

.presente-item-arte .presente-img {
    height: 240px;
    margin-bottom: 0;
}

.presente-item-arte .presente-img-emoji {
    font-size: 104px;
}

.presente-item-cat {
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #8a7526;
    padding-bottom: 6px;
}

.presente-item-nome {
    font-size: 30px;
    text-align: center;
    margin: 0 0 14px;
    line-height: 1.3;
}

.presente-item-desc {
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
    color: #6b6047;
    padding-bottom: 12px;
}

.presente-item-valor {
    text-align: center;
}

.presente-item-valor .presente-valor {
    margin-bottom: 0;
    padding-bottom: 0;
}

.presente-item-valor .presente-valor-fixo {
    font-size: 26px;
}

/* Compartilhar é ação secundária: contorno discreto, longe do peso do "Gerar PIX" */
.presente-item-compartilhar {
    text-align: center;
    margin-top: 14px;
    padding-bottom: 0;
}

.presente-btn-compartilhar {
    background: transparent;
    border: 1px solid #e0d7c2;
    color: #8a7526;
    font-size: 12px;
    padding: 7px 20px;
}

.presente-btn-compartilhar:hover,
.presente-btn-compartilhar:focus {
    background: #f8f0d9;
    border-color: #d9bf62;
    color: #6f5d1c;
}

.presente-item-recado-copia {
    max-width: 420px;
    margin: 12px auto 0;
    padding: 8px 12px;
    background: #f8f0d9;
    border: 1px dashed #c9ae52;
    border-radius: 3px;
    font-size: 13px;
    color: #6f5d1c;
    text-align: center;
}

/* Aparece só quando a cópia automática falha (WebView antiga, permissão negada) */
#presente-item-link {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 10px auto 0;
    padding: 8px 10px;
    border: 1px solid #e0d7c2;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
}

/* Presente exclusivo já dado: fim de linha, mas com saída para a lista */
.presente-item-dado {
    max-width: 420px;
    margin: 30px auto 0;
    padding: 28px 24px 20px;
    background: #fdf9ef;
    border: 1px solid #e6d9b4;
    border-radius: 4px;
    text-align: center;
}

.presente-item-dado-icone {
    font-size: 40px;
    padding-bottom: 4px;
}

@media (max-width: 767px) {
    .presente-item-nome {
        font-size: 24px;
    }

    .presente-item-arte .presente-img {
        height: 190px;
    }

    .presente-item-arte .presente-img-emoji {
        font-size: 84px;
    }
}

/* ─────────────── Carrinho (19/08) ───────────────
   Mesma paleta de sempre. O carrinho é etapa de conferência, não vitrine: nada aqui
   deve competir com o botão de pagar. */

/* Barra de contagem, no topo da vitrine e da página do presente. `sticky` porque a
   vitrine tem 95 itens: quem escolhe o quinto presente não pode ter de voltar ao topo
   para achar o carrinho. Navegador sem `sticky` só deixa a barra parada no fluxo —
   continua visível e clicável. */
.carrinho-barra {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #f8f0d9;
    border: 1px solid #d9bf62;
    border-radius: 4px;
    padding: 10px 8px 10px 16px;
    margin-bottom: 26px;
    box-shadow: 0 12px 26px -20px rgba(60, 45, 10, 0.75);
}

.carrinho-barra-info {
    font-size: 13px;
    color: #6f5d1c;
    padding: 4px 10px 4px 0;
}

.carrinho-barra-icone {
    font-size: 17px;
    padding-right: 6px;
}

.carrinho-barra .carrinho-barra-btn {
    padding: 7px 18px;
    font-size: 12px;
    margin: 0;
}

.carrinho-titulo {
    font-size: 30px;
    text-align: center;
    margin: 0 0 22px;
}

.carrinho-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.carrinho-item {
    display: flex;
    align-items: center;
    background: #fdf9ef;
    border: 1px solid #e6d9b4;
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

/* Os 95 itens estão sem foto no banco (as fotos vêm depois, pelo admin), então aqui
   é o emoji que identifica o presente na lista. */
.carrinho-item-arte {
    flex: 0 0 42px;
    font-size: 28px;
    line-height: 1;
    text-align: center;
}

.carrinho-item-texto {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 12px;
}

.carrinho-item-nome {
    display: block;
    font-weight: 600;
    color: #6f5d1c;
}

.carrinho-item-nome:hover,
.carrinho-item-nome:focus {
    color: #8a7526;
    text-decoration: underline;
}

.carrinho-item-nota {
    display: block;
    font-size: 12px;
    color: #9a8c6a;
}

.carrinho-item-preco {
    flex: 0 0 auto;
    font-weight: 700;
    color: #6f5d1c;
    white-space: nowrap;
    padding-right: 12px;
}

.carrinho-remover {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid #e0d7c2;
    border-radius: 50%;
    color: #8c2f2f;
    font-size: 17px;
    line-height: 1;
}

.carrinho-remover:hover,
.carrinho-remover:focus {
    background: #f9ecec;
    border-color: #e6cfcf;
}

.carrinho-resumo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-top: 1px solid #e6d9b4;
    margin-top: 16px;
    padding-top: 14px;
}

.carrinho-resumo-contagem {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #9a8c6a;
}

.carrinho-resumo-subtotal {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #8a7526;
}

.carrinho-resumo-subtotal strong {
    font-size: 22px;
    letter-spacing: 0;
    color: #6f5d1c;
    padding-left: 8px;
}

.carrinho-acoes {
    text-align: right;
    margin: 8px 0 0;
}

/* Ação destrutiva: texto, nunca botão — para não disputar o clique com "Gerar PIX" */
.carrinho-limpar {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #9a8c6a;
    text-decoration: underline;
}

.carrinho-limpar:hover,
.carrinho-limpar:focus {
    color: #8c2f2f;
}

/* "Este presente saiu do seu carrinho": tem que ser lido ANTES do total, então é
   tarja, não texto miúdo */
.carrinho-aviso {
    background: #f8f0d9;
    border: 1px dashed #c9ae52;
    border-radius: 3px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #6f5d1c;
    margin-bottom: 10px;
}

/* Total do carrinho dentro do formulário: substitui o campo de valor, porque quem
   soma é o servidor e não há nada para digitar aqui */
.presente-total-carrinho {
    margin: 0 0 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #8a7526;
}

.presente-total-carrinho strong {
    display: block;
    font-size: 30px;
    letter-spacing: 0;
    color: #6f5d1c;
    padding-top: 4px;
}

/* "Adicionar ao carrinho" na página do presente: acima da divisória, com peso entre
   o dourado sólido do PIX e o contorno do cartão */
.presente-btn-carrinho {
    width: 100%;
    margin-top: 14px;
    background: #f8f0d9;
    border: 1px solid #d9bf62;
    color: #6f5d1c;
}

.presente-btn-carrinho:hover,
.presente-btn-carrinho:focus {
    background: #f3e7c4;
    color: #5c4c14;
}

/* Já está no carrinho: o botão passa a TIRAR, e precisa parecer outra ação */
.presente-btn-carrinho-dentro {
    background: transparent;
    border-color: #e0d7c2;
    color: #9a8c6a;
}

.presente-carrinho-status {
    font-size: 13px;
    color: #6f5d1c;
    margin: 8px 0 0;
    text-align: left;
}

.presente-carrinho-status-erro {
    color: #8c2f2f;
}

.presente-form-divisoria {
    display: flex;
    align-items: center;
    margin: 22px 0 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #9a8c6a;
}

.presente-form-divisoria::before,
.presente-form-divisoria::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: #e6d9b4;
}

.presente-form-divisoria span {
    padding: 0 12px;
}

@media (max-width: 767px) {
    .carrinho-titulo {
        font-size: 24px;
    }

    /* Numa linha só, nome + preço + × ficam apertados demais no celular: o preço e o
       × descem para a segunda linha, alinhados à direita. */
    .carrinho-item {
        flex-wrap: wrap;
    }

    .carrinho-item-texto {
        flex: 1 1 60%;
    }

    .carrinho-item-preco {
        margin-left: 54px;
        padding-top: 6px;
    }

    .carrinho-barra {
        padding-left: 12px;
    }

    .carrinho-barra-info {
        flex: 1 1 100%;
        padding-bottom: 8px;
    }

    .carrinho-barra .carrinho-barra-btn {
        flex: 1 1 100%;
        text-align: center;
    }
}