/* ==========================================================================
   TrocaDireta — Cupons / vouchers (assinatura visual do projeto)
   coupon-card, barcode, coupon-detail, coupon-code, qr-display,
   redemption-confirm, quota-meter, plan-card

   Estrutura do coupon-card:
   <article class="coupon-card" data-tone="red">
     <div class="coupon-card__ticket">
       <div class="coupon-card__body">
         <div class="coupon-card__store"><span class="store-logo store-logo--sm">S</span> Sorveteria X</div>
         <h3 class="coupon-card__title"><a class="coupon-card__link" href="#">Cupom atacado</a></h3>
         <p class="coupon-card__desc">Nas compras a partir de R$ 1.000,00</p>
         <div class="coupon-card__meta">Válido até 30/11</div>
       </div>
       <div class="coupon-card__stub">
         <span class="coupon-card__kind">Desconto</span>
         <span class="coupon-card__value">30<small>%</small></span>
         <span class="coupon-card__off">OFF</span>
         <span class="barcode" aria-hidden="true"></span>
       </div>
     </div>
   </article>
   ========================================================================== */

/* ---- Tons do canhoto (o padrão vem antes para o data-tone prevalecer) ---- */
.coupon-card,
.coupon-detail,
[data-tone] { --tone: var(--tone-sky); --tone-fg: #fff; }
[data-tone="sky"] { --tone: var(--tone-sky); }
[data-tone="navy"] { --tone: var(--tone-navy); }
[data-tone="orange"] { --tone: var(--tone-orange); }
[data-tone="red"] { --tone: var(--tone-red); }
[data-tone="ink"] { --tone: var(--tone-ink); }
[data-tone="pool"] { --tone: var(--tone-pool); }
[data-tone="sea"] { --tone: var(--tone-sea); }
[data-tone="pink"] { --tone: var(--tone-pink); }
[data-tone="green"] { --tone: var(--tone-green); }
[data-tone="sun"] { --tone: var(--tone-sun); --tone-fg: var(--color-ink-strong); }

/* ==========================================================================
   Coupon card
   ========================================================================== */
.coupon-card {
    --cut: calc(100% - var(--stub-w));
    position: relative;
    /* a sombra fica no wrapper porque a máscara do ticket recortaria a sombra */
    filter: drop-shadow(0 6px 10px rgba(1, 40, 98, 0.10)) drop-shadow(0 1px 1px rgba(1, 40, 98, 0.08));
    transition: filter var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.coupon-card:hover {
    filter: drop-shadow(0 14px 18px rgba(1, 40, 98, 0.16)) drop-shadow(0 2px 2px rgba(1, 40, 98, 0.08));
    transform: translateY(-2px);
}

.coupon-card__ticket {
    position: relative;
    display: grid;
    grid-template-columns: 1fr var(--stub-w);
    min-height: 150px;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    -webkit-mask:
        radial-gradient(circle var(--notch) at var(--cut) 0, #0000 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--notch) at var(--cut) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    mask:
        radial-gradient(circle var(--notch) at var(--cut) 0, #0000 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--notch) at var(--cut) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}

.coupon-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-5) var(--space-5) var(--space-4);
    border: 1.5px dashed var(--color-border-strong);
    border-right: 0;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.coupon-card__store {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--color-ink-soft);
    min-width: 0;
}

.coupon-card__store-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coupon-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-black);
    font-variation-settings: "wdth" var(--wdth-wide);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-ink-strong);
}

.coupon-card__link {
    color: inherit;
    text-decoration: none;
}

/* área clicável do cartão inteiro */
.coupon-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.coupon-card__link:focus-visible { box-shadow: none; }
.coupon-card:has(.coupon-card__link:focus-visible) .coupon-card__ticket { outline: 3px solid var(--color-ink); outline-offset: -3px; }

.coupon-card__desc {
    font-size: var(--fs-sm);
    color: var(--color-ink-soft);
    line-height: 1.4;
}

.coupon-card__desc strong { color: var(--color-ink-strong); }

.coupon-card__code {
    align-self: flex-start;
    padding: 2px 8px;
    border: 1.5px dashed var(--tone);
    border-radius: var(--radius-xs);
    color: var(--color-ink-strong);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
}

.coupon-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--color-ink-muted);
}

.coupon-card__meta > * { display: inline-flex; align-items: center; gap: 4px; }
.coupon-card__meta svg { width: 14px; height: 14px; }

.coupon-card__fine {
    font-size: var(--fs-2xs);
    color: var(--tone);
    font-weight: var(--fw-semibold);
}

.coupon-card__actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* ---- Canhoto ---- */
.coupon-card__stub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--space-4) var(--space-3);
    background:
        repeating-linear-gradient(to bottom, var(--perf-color) 0 var(--perf-dash), transparent var(--perf-dash) calc(var(--perf-dash) * 2)) 0 0 / 2px 100% no-repeat,
        var(--tone);
    color: var(--tone-fg);
    text-align: center;
}

[data-tone="sun"] .coupon-card__stub,
.coupon-card[data-tone="sun"] { --perf-color: rgba(1, 40, 98, 0.35); }

.coupon-card__kind {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.92;
}

.coupon-card__value {
    font-family: var(--font-display);
    font-size: var(--fs-value);
    font-weight: var(--fw-black);
    font-variation-settings: "wdth" var(--wdth-expanded);
    font-variant-numeric: tabular-nums;
    line-height: 0.92;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.coupon-card__value small {
    font-size: 0.62em;
    letter-spacing: -0.02em;
}

/* valores em R$ ficam menores para caber no canhoto */
.coupon-card__value--money { font-size: calc(var(--fs-value) * 0.62); letter-spacing: -0.03em; }
.coupon-card__value--money small { font-size: 0.55em; vertical-align: 0.5em; margin-right: 2px; }

.coupon-card__value--text {
    font-size: var(--fs-lg);
    letter-spacing: -0.01em;
    line-height: 1.05;
    white-space: normal;
}

.coupon-card__off {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    font-variation-settings: "wdth" var(--wdth-expanded);
    line-height: 1;
    letter-spacing: -0.02em;
}

.coupon-card__stub .barcode { margin-top: var(--space-2); }

/* Selo de destaque (canto superior esquerdo) */
.coupon-card__ribbon {
    position: absolute;
    top: 12px;
    left: -4px;
    z-index: 2;
    padding: 3px 10px 3px 12px;
    background: var(--color-highlight);
    color: var(--color-ink-strong);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-black);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    box-shadow: 0 2px 0 rgba(1, 40, 98, 0.18);
}

.coupon-card__ribbon + .coupon-card__ticket .coupon-card__body { padding-top: var(--space-10); }

/* Contador de estoque */
.coupon-card__stock {
    display: grid;
    gap: 4px;
    width: 100%;
    font-size: var(--fs-2xs);
    color: var(--color-ink-muted);
}

.coupon-card__stock-bar {
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-line);
    overflow: hidden;
}

.coupon-card__stock-bar span {
    display: block;
    height: 100%;
    width: calc(var(--value, 0) * 1%);
    background: var(--tone);
    border-radius: inherit;
}

/* ---- Variante: canhoto à esquerda (ex.: código de barras + oferta) ---- */
.coupon-card--stub-left { --cut: var(--stub-w); }
.coupon-card--stub-left .coupon-card__ticket { grid-template-columns: var(--stub-w) 1fr; }
.coupon-card--stub-left .coupon-card__stub {
    order: -1;
    background:
        repeating-linear-gradient(to bottom, var(--perf-color) 0 var(--perf-dash), transparent var(--perf-dash) calc(var(--perf-dash) * 2)) 100% 0 / 2px 100% no-repeat,
        var(--tone);
}
.coupon-card--stub-left .coupon-card__body {
    border: 1.5px dashed var(--color-border-strong);
    border-left: 0;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* ---- Variante: ticket totalmente colorido com borda serrilhada ---- */
.coupon-card--filled .coupon-card__ticket { background: var(--tone); }
.coupon-card--filled .coupon-card__body { border: 0; color: var(--tone-fg); }
.coupon-card--filled :is(.coupon-card__title, .coupon-card__desc, .coupon-card__store, .coupon-card__meta, .coupon-card__desc strong) { color: var(--tone-fg); }
.coupon-card--filled .coupon-card__stub { background: repeating-linear-gradient(to bottom, var(--perf-color) 0 var(--perf-dash), transparent var(--perf-dash) calc(var(--perf-dash) * 2)) 0 0 / 2px 100% no-repeat, rgba(0, 0, 0, 0.12); }
.coupon-card--filled .coupon-card__code { border-color: currentColor; color: var(--tone-fg); }

.coupon-card--scalloped .coupon-card__ticket {
    -webkit-mask:
        radial-gradient(circle var(--scallop) at 100% 50%, #0000 96%, #000) right / 100% calc(var(--scallop) * 3) repeat-y,
        radial-gradient(circle var(--notch) at var(--cut) 0, #0000 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--notch) at var(--cut) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    -webkit-mask-composite: source-in, source-over;
    mask:
        radial-gradient(circle var(--scallop) at 100% 50%, #0000 96%, #000) right / 100% calc(var(--scallop) * 3) repeat-y,
        radial-gradient(circle var(--notch) at var(--cut) 0, #0000 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--notch) at var(--cut) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    mask-composite: intersect, add;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ---- Variante: vertical (cartaz / destaque) ---- */
.coupon-card--vertical {
    --stub-h: 168px;
}

.coupon-card--vertical .coupon-card__ticket {
    grid-template-columns: 1fr;
    grid-template-rows: var(--stub-h) 1fr;
    -webkit-mask:
        radial-gradient(circle var(--notch) at 0 var(--stub-h), #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--notch) at 100% var(--stub-h), #0000 98%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle var(--notch) at 0 var(--stub-h), #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--notch) at 100% var(--stub-h), #0000 98%, #000) right / 51% 100% no-repeat;
}

.coupon-card--vertical .coupon-card__stub {
    order: -1;
    padding: var(--space-6) var(--space-5);
    background:
        repeating-linear-gradient(to right, var(--perf-color) 0 var(--perf-dash), transparent var(--perf-dash) calc(var(--perf-dash) * 2)) 0 100% / 100% 2px no-repeat,
        var(--tone);
}

.coupon-card--vertical .coupon-card__value { font-size: calc(var(--fs-value) * 1.35); }

.coupon-card--vertical .coupon-card__body {
    border: 1.5px dashed var(--color-border-strong);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    text-align: center;
    align-items: center;
}

.coupon-card--vertical .coupon-card__meta { justify-content: center; }

/* ---- Variante compacta (listas da carteira) ---- */
.coupon-card--compact { --stub-w: 104px; --notch: 10px; }
.coupon-card--compact .coupon-card__ticket { min-height: 112px; }
.coupon-card--compact .coupon-card__body { padding: var(--space-3) var(--space-4); gap: 4px; }
.coupon-card--compact .coupon-card__title { font-size: var(--fs-md); }
.coupon-card--compact .coupon-card__value { font-size: var(--fs-2xl); }
.coupon-card--compact .coupon-card__off { font-size: var(--fs-md); }
.coupon-card--compact .barcode { display: none; }

/* ---- Estados ---- */
.coupon-card.is-used,
.coupon-card.is-expired,
.coupon-card.is-blocked {
    filter: none;
}

.coupon-card.is-used .coupon-card__ticket,
.coupon-card.is-expired .coupon-card__ticket,
.coupon-card.is-blocked .coupon-card__ticket {
    background: #f6f2ee;
}

.coupon-card.is-used .coupon-card__stub,
.coupon-card.is-expired .coupon-card__stub,
.coupon-card.is-blocked .coupon-card__stub {
    --tone: #a9b3bd;
}

.coupon-card.is-used:hover,
.coupon-card.is-expired:hover { transform: none; }

.coupon-card__stamp {
    position: absolute;
    top: 50%;
    left: calc((100% - var(--stub-w)) / 2);
    z-index: 2;
    padding: 4px 14px;
    border: 3px solid var(--stamp, var(--color-ink-muted));
    border-radius: var(--radius-sm);
    color: var(--stamp, var(--color-ink-muted));
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-black);
    font-variation-settings: "wdth" var(--wdth-expanded);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: translate(-50%, -50%) rotate(-12deg);
    opacity: 0.85;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.coupon-card.is-used .coupon-card__stamp { --stamp: var(--color-success); }
.coupon-card.is-blocked .coupon-card__stamp { --stamp: var(--color-danger); }

/* ==========================================================================
   Código de barras decorativo (aria-hidden)
   ========================================================================== */
.barcode {
    display: block;
    width: min(100%, 92px);
    height: 30px;
    color: inherit;
    background:
        repeating-linear-gradient(90deg,
            currentColor 0 2px, transparent 2px 4px,
            currentColor 4px 5px, transparent 5px 7px,
            currentColor 7px 10px, transparent 10px 11px,
            currentColor 11px 12px, transparent 12px 15px,
            currentColor 15px 17px, transparent 17px 18px,
            currentColor 18px 19px, transparent 19px 22px);
    opacity: 0.95;
}

.barcode--tall { height: 56px; width: 100%; }
.barcode--ink { color: var(--color-ink-strong); }

/* ==========================================================================
   Coupon detail (cupom.php público e cliente/cupom.php)
   ========================================================================== */
.coupon-detail {
    --stub-h: 220px;
    position: relative;
    filter: drop-shadow(0 18px 24px rgba(1, 40, 98, 0.14));
}

.coupon-detail__ticket {
    display: grid;
    grid-template-rows: auto auto;
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    overflow: hidden;
}

.coupon-detail__hero {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-6) var(--space-10);
    background: var(--tone);
    color: var(--tone-fg);
    text-align: center;
}

.coupon-detail__hero::after {
    content: "";
    position: absolute;
    left: var(--space-6);
    right: var(--space-6);
    bottom: 0;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--perf-color) 0 var(--perf-dash), transparent var(--perf-dash) calc(var(--perf-dash) * 2));
}

.coupon-detail__store {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: var(--fw-bold);
}

.coupon-detail__store .store-logo { --logo-size: 40px; border: 0; }

.coupon-detail__value {
    font-family: var(--font-display);
    font-size: clamp(4rem, 2.4rem + 8vw, 7.5rem);
    font-weight: var(--fw-black);
    font-variation-settings: "wdth" var(--wdth-expanded);
    font-variant-numeric: tabular-nums;
    line-height: 0.88;
    letter-spacing: -0.05em;
}

.coupon-detail__value small { font-size: 0.55em; }

.coupon-detail__value--money { font-size: clamp(3rem, 2rem + 5vw, 5rem); }

.coupon-detail__headline {
    max-width: 26ch;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    color: inherit;
}

.coupon-detail__notches {
    position: relative;
    height: 0;
}

/* recortes laterais na linha do picote */
.coupon-detail__notches::before,
.coupon-detail__notches::after {
    content: "";
    position: absolute;
    top: 0;
    width: calc(var(--notch) * 2.2);
    height: calc(var(--notch) * 2.2);
    border-radius: 50%;
    background: var(--notch-bg, var(--color-bg));
    transform: translateY(-50%);
    z-index: 1;
}

.coupon-detail__notches::before { left: calc(var(--notch) * -1.1); }
.coupon-detail__notches::after { right: calc(var(--notch) * -1.1); }

.coupon-detail__body {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6);
}

.coupon-detail__conditions {
    display: grid;
    gap: var(--space-2);
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
    color: var(--color-ink-soft);
}

.coupon-detail__conditions li {
    display: flex;
    gap: var(--space-2);
}

.coupon-detail__conditions li::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin-top: 0.55em;
    border-radius: 50%;
    background: var(--tone);
}

.coupon-detail__facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.coupon-detail__fact {
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
}

.coupon-detail__fact-label { display: block; font-size: var(--fs-xs); color: var(--color-ink-muted); }
.coupon-detail__fact-value { display: block; font-weight: var(--fw-bold); color: var(--color-ink-strong); }

.coupon-detail__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-top: 1.5px dashed var(--color-border);
    background: var(--color-surface-alt);
}

/* ==========================================================================
   Código e chave do cupom
   ========================================================================== */
.coupon-code {
    display: grid;
    gap: var(--space-2);
}

.coupon-code__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--color-ink-muted);
}

.coupon-code__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
    border: 2px dashed var(--color-ink);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.coupon-code__value {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    font-variation-settings: "wdth" var(--wdth-wide);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1em;
    color: var(--color-ink-strong);
    overflow-wrap: anywhere;
}

.coupon-code__value--secret {
    letter-spacing: 0.24em;
    color: var(--color-ink-soft);
}

.coupon-code--sun .coupon-code__box { border-color: var(--color-ink); background: var(--color-highlight); }
.coupon-code--secret .coupon-code__box { border-color: var(--color-primary); background: #eef7ff; }

.coupon-code__copy.is-copied { --btn-bg: var(--color-success); }

/* ==========================================================================
   QR display (cliente/gerar-qr.php)
   ========================================================================== */
.qr-display {
    --ttl: 120s;
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    text-align: center;
}

.qr-display__frame {
    position: relative;
    width: min(280px, 78vw);
    aspect-ratio: 1;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(var(--color-ink), var(--color-ink)) 0 0 / 32px 4px no-repeat,
        linear-gradient(var(--color-ink), var(--color-ink)) 0 0 / 4px 32px no-repeat,
        linear-gradient(var(--color-ink), var(--color-ink)) 100% 0 / 32px 4px no-repeat,
        linear-gradient(var(--color-ink), var(--color-ink)) 100% 0 / 4px 32px no-repeat,
        linear-gradient(var(--color-ink), var(--color-ink)) 0 100% / 32px 4px no-repeat,
        linear-gradient(var(--color-ink), var(--color-ink)) 0 100% / 4px 32px no-repeat,
        linear-gradient(var(--color-ink), var(--color-ink)) 100% 100% / 32px 4px no-repeat,
        linear-gradient(var(--color-ink), var(--color-ink)) 100% 100% / 4px 32px no-repeat,
        var(--color-surface);
    box-shadow: var(--shadow-md);
}

.qr-display__frame img,
.qr-display__frame canvas,
.qr-display__frame svg {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.qr-display__frame.is-expired img,
.qr-display__frame.is-expired canvas,
.qr-display__frame.is-expired svg { filter: blur(6px) grayscale(1); opacity: 0.35; }

.qr-display__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: var(--space-3);
    padding: var(--space-6);
}

.qr-display__timer {
    width: min(280px, 78vw);
    display: grid;
    gap: var(--space-2);
}

.qr-display__timer-bar {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-line);
    overflow: hidden;
}

.qr-display__timer-bar span {
    display: block;
    height: 100%;
    background: var(--color-success);
    border-radius: inherit;
    transform-origin: left;
    animation: qr-countdown var(--ttl) linear forwards;
}

.qr-display__timer-text {
    font-size: var(--fs-sm);
    color: var(--color-ink-soft);
    font-variant-numeric: tabular-nums;
}

.qr-display__timer-text strong { color: var(--color-ink-strong); }

@keyframes qr-countdown {
    0% { transform: scaleX(1); background: var(--color-success); }
    70% { background: var(--color-success); }
    85% { background: var(--color-highlight); }
    100% { transform: scaleX(0); background: var(--color-danger); }
}

.qr-display__id {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-variation-settings: "wdth" var(--wdth-wide);
    letter-spacing: 0.1em;
    color: var(--color-ink-strong);
}

/* Modo "mostrar ao caixa": fundo claro máximo */
.qr-stage {
    display: grid;
    justify-items: center;
    gap: var(--space-5);
    padding: var(--space-8) var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
}

/* ==========================================================================
   Redemption confirm (lojista/validar, confirmar-resgate, resgate-sucesso)
   Verde confirmado, vermelho inválido, amarelo atenção — sempre com texto
   ========================================================================== */
.redemption-confirm {
    --state: var(--color-ink);
    --state-soft: var(--color-surface-alt);
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-5);
    border: 2px solid var(--state);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: hidden;
}

.redemption-confirm--success { --state: var(--color-success); --state-soft: var(--color-success-soft); }
.redemption-confirm--danger { --state: var(--color-danger); --state-soft: var(--color-danger-soft); }
.redemption-confirm--warning { --state: #e5a800; --state-soft: var(--color-warning-soft); }

.redemption-confirm__banner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: calc(var(--space-6) * -1) calc(var(--space-5) * -1) 0;
    padding: var(--space-5);
    background: var(--state-soft);
    border-bottom: 2px dashed var(--state);
}

.redemption-confirm__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--state);
    color: #fff;
}

.redemption-confirm--warning .redemption-confirm__icon { color: var(--color-ink-strong); }

.redemption-confirm__icon svg { width: 28px; height: 28px; }

.redemption-confirm__status {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    font-variation-settings: "wdth" var(--wdth-wide);
    line-height: 1.1;
    color: var(--color-ink-strong);
}

.redemption-confirm__reason {
    margin-top: 2px;
    font-size: var(--fs-sm);
    color: var(--color-ink-soft);
}

.redemption-confirm__benefit {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.redemption-confirm__value {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: var(--fw-black);
    font-variation-settings: "wdth" var(--wdth-expanded);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--color-ink-strong);
}

.redemption-confirm__actions {
    display: grid;
    gap: var(--space-3);
}

/* Animação única de confirmação: o carimbo cai */
.redemption-confirm--success.is-fresh .redemption-confirm__icon {
    animation: stamp-in 520ms var(--ease-spring) both;
}

@keyframes stamp-in {
    0% { transform: scale(1.8) rotate(-18deg); opacity: 0; }
    60% { transform: scale(0.94) rotate(3deg); opacity: 1; }
    100% { transform: none; }
}

/* Comprovante de resgate */
.receipt {
    position: relative;
    padding: var(--space-6) var(--space-5);
    background: var(--color-surface);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    filter: drop-shadow(0 8px 14px rgba(1, 40, 98, 0.12));
}

/* borda inferior serrilhada (papel de comprovante) */
.receipt::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 10px;
    background:
        linear-gradient(135deg, var(--color-surface) 50%, transparent 50%) 0 0 / 14px 10px repeat-x,
        linear-gradient(225deg, var(--color-surface) 50%, transparent 50%) 0 0 / 14px 10px repeat-x;
}

.receipt__number {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-variation-settings: "wdth" var(--wdth-wide);
    letter-spacing: 0.08em;
    font-size: var(--fs-lg);
}

/* ==========================================================================
   Quota meter (franquia mensal: 35 de 50)
   ========================================================================== */
.quota-meter {
    --value: 0;
    --q-color: var(--color-ink);
    display: grid;
    gap: var(--space-3);
}

.quota-meter.is-warning { --q-color: #e5a800; }
.quota-meter.is-full { --q-color: var(--color-danger); }

.quota-meter__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.quota-meter__count {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    font-variation-settings: "wdth" var(--wdth-wide);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--color-ink-strong);
}

.quota-meter__count small {
    font-size: 0.55em;
    font-weight: var(--fw-semibold);
    color: var(--color-ink-muted);
    letter-spacing: 0;
}

.quota-meter__plan { font-size: var(--fs-sm); color: var(--color-ink-soft); }

/* trilho em forma de tira de tickets: marcações a cada 10% */
.quota-meter__track {
    position: relative;
    height: 18px;
    border-radius: 6px;
    background: var(--color-line);
    overflow: hidden;
}

.quota-meter__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--value) * 1%);
    max-width: 100%;
    background: var(--q-color);
    border-radius: 6px 0 0 6px;
    transition: width var(--dur-slow) var(--ease-out);
}

.quota-meter__track::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--color-surface) calc(10% - 2px) 10%);
    pointer-events: none;
}

.quota-meter__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-ink-soft);
}

.quota-meter__legend strong { color: var(--color-ink-strong); font-variant-numeric: tabular-nums; }

.quota-meter--sm .quota-meter__count { font-size: var(--fs-lg); }
.quota-meter--sm .quota-meter__track { height: 10px; }

/* ==========================================================================
   Plan card (planos.php público e lojista)
   ========================================================================== */
.plan-card {
    --tone: var(--color-ink);
    --tone-fg: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1.5px solid var(--color-line);
    overflow: hidden;
}

.plan-card__head {
    position: relative;
    padding: var(--space-6) var(--space-6) var(--space-8);
    background: var(--tone);
    color: var(--tone-fg);
}

.plan-card__head::after {
    content: "";
    position: absolute;
    left: var(--space-5);
    right: var(--space-5);
    bottom: 0;
    height: 2px;
    background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.6) 0 var(--perf-dash), transparent var(--perf-dash) calc(var(--perf-dash) * 2));
}

.plan-card__name {
    font-size: var(--fs-lg);
    color: inherit;
}

.plan-card__quota {
    margin-top: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: var(--fw-black);
    font-variation-settings: "wdth" var(--wdth-expanded);
    font-variant-numeric: tabular-nums;
    line-height: 0.95;
    letter-spacing: -0.04em;
}

.plan-card__quota-label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); opacity: 0.85; }

.plan-card__notches { position: relative; height: 0; }
.plan-card__notches::before,
.plan-card__notches::after {
    content: "";
    position: absolute;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--notch-bg, var(--color-bg));
    border: 1.5px solid var(--color-line);
    transform: translateY(-50%);
}
.plan-card__notches::before { left: -13px; }
.plan-card__notches::after { right: -13px; }

.plan-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
}

.plan-card__price {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    font-variation-settings: "wdth" var(--wdth-wide);
    color: var(--color-ink-strong);
    font-variant-numeric: tabular-nums;
}

.plan-card__price small {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-ink-muted);
    letter-spacing: 0;
}

.plan-card__features {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
}

.plan-card__features li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.plan-card__features li::before {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    background:
        linear-gradient(45deg, transparent 45%, #fff 45% 58%, transparent 58%) 7px 3px / 5px 10px no-repeat,
        var(--color-success);
}

.plan-card__features li.is-off { color: var(--color-ink-muted); text-decoration: line-through; }
.plan-card__features li.is-off::before { background: var(--color-line); }

.plan-card__cta { margin-top: auto; }

.plan-card--free { --tone: var(--color-surface-alt); --tone-fg: var(--color-ink-strong); }
.plan-card--free .plan-card__head::after { background: repeating-linear-gradient(to right, var(--color-border-strong) 0 var(--perf-dash), transparent var(--perf-dash) calc(var(--perf-dash) * 2)); }

.plan-card--featured {
    --tone: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1.5px var(--color-primary), var(--shadow-md);
}

.plan-card__badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-highlight);
    color: var(--color-ink-strong);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-black);
}

.plan-card.is-current { border-color: var(--color-success); box-shadow: 0 0 0 1.5px var(--color-success); }

/* Dados do cliente na confirmação do resgate */
.holder-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-line);
}
.holder-card__label { display: block; font-size: var(--fs-xs); color: var(--color-ink-muted); }
.holder-card__name { display: block; font-size: var(--fs-lg); color: var(--color-ink-strong); line-height: 1.2; }
.holder-card__meta { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--color-ink-soft); }

/* Código de barras real (Code 128) do cupom */
.barcode-block {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid var(--color-line);
}
.barcode-svg { display: block; width: 100%; max-width: 360px; height: 72px; }
.barcode-block__code { font-weight: var(--fw-bold); letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: var(--color-ink-strong); }

/* ==========================================================================
   Tema de cupom: só nas páginas /trocacupons/ (body.theme-cupons, ver layouts/public.php).
   Mantém o visual original do módulo; o resto do site usa o tema TrocaDireta.
   ========================================================================== */
.theme-cupons {
    --color-primary: #0077d9;
    --color-primary-strong: #005fb0;
    --color-primary-soft: #e1f2ff;
    --color-sky: #01a4fd;
    --color-ink: #012862;
    --color-ink-strong: #001c47;
    --color-text: #012862;
    --color-ink-soft: #3d5577;
    --color-highlight: #ffc94a;
    --color-highlight-soft: #fff3cf;
    --color-bg: #f4f8fd;
    --color-bg-deep: #e7f0fb;
    --color-border: #d3e1f1;
    --color-line: #e4edf7;
    --font-sans: "Archivo", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Archivo", "Arial Black", "Segoe UI", sans-serif;
    --btn-shadow: var(--shadow-press);
}
.theme-cupons .button--sun:hover { --btn-bg: #ffbb1f; }