/* ==========================================================
   PROMOÇÃO RELÂMPAGO — PAINEL DA EMPRESA
   (a parte pública, .flash-public-*, fica mais abaixo)
   ========================================================== */

.flash-page {
    min-width: 0;
}

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

.flash-heading {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 26px;
}

.flash-heading-text {
    min-width: 0;
    align-self: center;
}

.flash-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff0e3;
    color: #c24c00;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.flash-heading h2 {
    margin: 12px 0 6px;
    font-size: 1.55rem;
    letter-spacing: -0.02em;
}

.flash-heading p {
    margin: 0;
    max-width: 560px;
    color: var(--dashboard-muted, #737373);
    line-height: 1.55;
}

.flash-plan-card {
    flex: 0 0 auto;
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 250px;
    padding: 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, #191919, #303030);
    color: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
}

.flash-plan-label {
    color: #ffb27a;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.flash-plan-card strong {
    margin: 4px 0 2px;
    font-size: 1.15rem;
}

.flash-plan-card span {
    color: #cfcfcf;
    font-size: 0.86rem;
}

.flash-plan-status {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

/* ---------- Estrutura ---------- */

.flash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    gap: 22px;
    align-items: start;
}

.flash-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--dashboard-border, #e8e8e8);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
}

.flash-card h3 {
    margin: 0 0 18px;
    font-size: 1.12rem;
}

/* ---------- Passos do formulário ---------- */

.flash-block {
    min-width: 0;
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid #ececec;
    border-radius: 15px;
    background: #fcfcfd;
}

.flash-block:last-of-type {
    margin-bottom: 0;
}

.flash-block legend {
    padding: 0 8px;
    font-size: 0.88rem;
    font-weight: 900;
}

.flash-block legend b {
    display: inline-grid;
    place-items: center;
    width: 21px;
    height: 21px;
    margin-right: 8px;
    border-radius: 50%;
    background: #ff6500;
    color: #fff;
    font-size: 0.73rem;
    vertical-align: -3px;
}

.flash-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.flash-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.flash-field-full {
    grid-column: 1 / -1;
}

.flash-field label {
    font-size: 0.84rem;
    font-weight: 800;
}

.flash-field input,
.flash-field select,
.flash-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.flash-field input:focus,
.flash-field select:focus,
.flash-field textarea:focus {
    outline: 0;
    border-color: #ff6500;
    box-shadow: 0 0 0 3px rgba(255, 101, 0, .12);
}

.flash-field textarea {
    min-height: 110px;
    resize: vertical;
}

.flash-help {
    color: var(--dashboard-muted, #737373);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* Desconto calculado sozinho */
.flash-discount {
    grid-column: 1 / -1;
    padding: 12px 14px;
    border: 1px solid #c8ead5;
    border-radius: 12px;
    background: #f0fbf4;
    color: #176c39;
    font-size: 0.88rem;
    line-height: 1.5;
}

.flash-discount strong {
    font-weight: 900;
}

.flash-discount.is-warning {
    border-color: #f4cfcf;
    background: #fff5f5;
    color: #a22626;
}

/* ---------- Ações ---------- */

.flash-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #ececec;
}

.flash-actions-note {
    color: var(--dashboard-muted, #737373);
    font-size: 0.88rem;
}

.flash-actions-note strong {
    color: var(--dashboard-text, #232323);
    font-weight: 900;
}

/* ---------- Prévia ---------- */

.flash-preview-wrap {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 10px;
    min-width: 0;
}

.flash-preview-label {
    color: var(--dashboard-muted, #737373);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.flash-preview {
    border-radius: 22px;
    overflow: hidden;
    background: radial-gradient(circle at top right, #ffef84, transparent 34%),
                linear-gradient(145deg, #251300, #8f2100 55%, #ff5a00);
    color: #fff;
    box-shadow: 0 18px 40px rgba(151, 45, 0, .25);
}

/* contain, não cover: a empresa precisa ver a foto INTEIRA na prévia.
   Com cover a imagem preenchia o espaço cortando as bordas. */
.flash-preview-image {
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3c1d08 center/contain no-repeat;
    color: #ffd9bd;
    font-size: .9rem;
}

.flash-preview-body {
    padding: 20px;
}

.flash-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #ffe14e;
    color: #3a2400;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.flash-preview h3 {
    margin: 12px 0 8px;
    font-size: 1.45rem;
    overflow-wrap: anywhere;
}

.flash-preview p {
    margin: 0;
    color: rgba(255, 255, 255, .88);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.flash-price {
    margin: 12px 0;
    font-size: 1.9rem;
    font-weight: 900;
}

.flash-countdown {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 14px 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .25);
    font-weight: 800;
}

.flash-whatsapp {
    display: block;
    padding: 13px;
    border-radius: 12px;
    background: #25d366;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: 900;
}

/* ---------- Lista ---------- */

.flash-current {
    margin-top: 24px;
}

.flash-list {
    display: grid;
    gap: 14px;
}

.flash-list:empty {
    display: none;
}

.flash-item {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid #eee;
    border-radius: 16px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.flash-item:hover {
    border-color: #ddd;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}

.flash-item h4 {
    margin: 7px 0 4px;
    font-size: 1.02rem;
    overflow-wrap: anywhere;
}

.flash-item small {
    color: var(--dashboard-muted, #737373);
    font-size: .82rem;
}

.flash-item-image {
    height: 74px;
    border-radius: 12px;
    background: #f0f0f0 center/cover no-repeat;
}

/* Os três estados usam a mesma forma de selo — antes só o
   "Aguardando pagamento" tinha fundo, e sem padding, o que
   deixava o texto parecendo marcado a caneta. */
.flash-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 900;
}

.flash-status.active {
    background: #eaf8ef;
    color: #177443;
}

.flash-status.waiting {
    background: #fff6e5;
    color: #8a5a00;
}

.flash-status.closed {
    background: #f1f1f1;
    color: #6f6f6f;
}

.flash-stop {
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    background: #222;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: background .18s ease;
}

.flash-stop:hover:not(:disabled) {
    background: #000;
}

.flash-stop:disabled {
    opacity: .5;
    cursor: wait;
}

.flash-item-actions small {
    color: #9a9a9a;
    font-size: .78rem;
}

/* ---------- Estado vazio ---------- */

.flash-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 38px 24px;
    border: 1px dashed #dcdcdc;
    border-radius: 16px;
    background: #fafafa;
    text-align: center;
}

.flash-empty-icon {
    font-size: 1.9rem;
}

.flash-empty strong {
    font-size: 1rem;
}

.flash-empty p {
    max-width: 420px;
    margin: 0;
    color: var(--dashboard-muted, #737373);
    font-size: .89rem;
    line-height: 1.55;
}

.flash-locked {
    padding: 18px;
    border: 1px solid #ffd39a;
    border-radius: 16px;
    background: #fff4e5;
    color: #7d3d00;
    font-weight: 700;
    line-height: 1.5;
}.flash-public-section{padding:36px 0;background:linear-gradient(180deg,#fff7e8,#fff)}.flash-public-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.flash-public-card{background:linear-gradient(145deg,#351400,#a12b00 62%,#ff6800);color:#fff;border-radius:20px;overflow:hidden;box-shadow:0 16px 36px rgba(122,34,0,.22);position:relative}.flash-public-card .flash-public-image{height:190px;background:#3a1a08 center/contain no-repeat}.flash-public-card .flash-public-body{padding:18px}.flash-public-card h3{margin:10px 0 6px}.flash-public-card .flash-public-price{font-size:1.7rem;font-weight:900}.flash-public-card .flash-public-countdown{background:rgba(0,0,0,.28);border-radius:10px;padding:9px;margin:12px 0;font-weight:800}.flash-public-card .flash-public-whatsapp{display:block;background:#25d366;color:#fff;text-align:center;text-decoration:none;padding:11px;border-radius:10px;font-weight:900}.is-hidden{display:none!important}
/* A faixa pública mantém os pontos de quebra originais (900px e 620px),
   separada do painel da empresa, para o site do cliente não mudar. */
@media (max-width: 900px) {
    .flash-public-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .flash-public-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1000px) {
    .flash-grid {
        grid-template-columns: 1fr;
    }

    /* Em uma coluna a prévia fica acima da lista, então grudar no topo
       só atrapalharia a rolagem. */
    .flash-preview-wrap {
        position: static;
    }
}

@media (max-width: 700px) {
    .flash-heading {
        display: block;
    }

    .flash-plan-card {
        margin-top: 16px;
        min-width: 0;
    }

    .flash-card {
        padding: 17px;
    }

    .flash-block {
        padding: 14px;
    }

    .flash-fields {
        grid-template-columns: 1fr;
    }

    .flash-item {
        grid-template-columns: 72px 1fr;
    }

    .flash-item-actions {
        grid-column: 1 / -1;
    }

    .flash-item-actions .flash-stop {
        width: 100%;
    }

    .flash-preview-image {
        height: 180px;
    }

    .flash-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .flash-actions .dashboard-primary-action {
        width: 100%;
    }

    .flash-actions-note {
        text-align: center;
    }
}

.flash-public-section{border-top:4px solid #ff6a00;border-bottom:1px solid #ffd7bd;position:relative}.flash-public-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 0,rgba(255,150,40,.18),transparent 35%);pointer-events:none}.flash-public-section .container{position:relative}.flash-public-card{transform:translateZ(0);transition:transform .2s ease,box-shadow .2s ease}.flash-public-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(122,34,0,.3)}

/* ==========================================
   PAGAMENTO DA PROMOÇÃO RELÂMPAGO
   ========================================== */

.pg-modal {
    position: fixed; inset: 0; z-index: 90;
    display: grid; place-items: center; padding: 20px;
    background: rgba(20, 20, 20, .55);
}
.pg-modal.is-hidden { display: none; }

.pg-modal-card {
    width: 100%; max-width: 420px; padding: 26px;
    border-radius: 18px; background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.pg-modal-card h3 { margin: 0 0 6px; font-size: 1.18rem; }
.pg-texto { margin: 0 0 16px; color: #6f6f6f; font-size: .84rem; line-height: 1.55; }

.pg-resumo { margin: 0 0 16px; display: grid; gap: 1px; background: #ececec; border-radius: 12px; overflow: hidden; }
.pg-resumo > div {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 14px; background: #fafafa;
}
.pg-resumo dt { color: #777; font-size: .78rem; font-weight: 750; }
.pg-resumo dd { margin: 0; font-size: .9rem; font-weight: 850; text-align: right; }

.pg-aviso {
    margin: 0 0 18px; padding: 11px 13px;
    border-radius: 11px; background: #fff6ef; border: 1px solid #ffd9bd;
    color: #7a4a22; font-size: .76rem; line-height: 1.55;
}

.pg-chave {
    margin-bottom: 16px; padding: 15px;
    border: 1px dashed #ffb27a; border-radius: 13px; background: #fff9f4;
    display: grid; gap: 7px; justify-items: start;
}
.pg-chave > span { color: #a9662f; font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.pg-chave strong { font-size: .95rem; overflow-wrap: anywhere; }

.pg-btn-copiar {
    min-height: 36px; padding: 0 14px;
    border: 1px solid #ffb27a; border-radius: 9px;
    background: #fff; color: #c24c00; font: inherit; font-weight: 850; cursor: pointer;
}
.pg-btn-copiar:hover { background: #fff2e7; }

.pg-modal-actions { display: flex; gap: 11px; justify-content: flex-end; flex-wrap: wrap; }
.pg-btn-secundario, .pg-btn-primario {
    min-height: 45px; padding: 0 20px;
    border-radius: 12px; font: inherit; font-weight: 850; cursor: pointer;
}
.pg-btn-secundario { border: 1px solid #ddd; background: #fff; color: #444; }
.pg-btn-primario { border: 0; background: #f05a00; color: #fff; font-weight: 900; }
.pg-btn-primario:hover:not(:disabled) { background: #d95000; }
.pg-btn-primario:disabled { opacity: .6; cursor: wait; }

.flash-status.waiting { background: #fff6e5; color: #8a5a00; }

@media (max-width: 520px) {
    .pg-modal-card { padding: 20px; }
    .pg-modal-actions { flex-direction: column-reverse; }
    .pg-btn-secundario, .pg-btn-primario { width: 100%; }
}

/* QR Code do PIX automático */
.pg-qr { margin-bottom: 16px; display: grid; justify-items: center; gap: 9px; }
.pg-qr.is-hidden { display: none; }
.pg-qr img { width: 220px; height: 220px; border: 1px solid #eee; border-radius: 12px; background: #fff; }
.pg-qr small { color: #8a8a8a; font-size: .74rem; text-align: center; }