/**
 * gCampaner ShopIA CashBack — estilos públicos.
 *
 * Propositalmente enxuto e sem !important: o tema de cada loja deve conseguir
 * sobrescrever qualquer coisa daqui. Para reestilizar, o caminho mais curto é
 * redefinir os tokens abaixo no CSS do tema:
 *
 *   :root {
 *     --wpf-accent: #7c3aed;
 *     --wpf-radius: 16px;
 *   }
 */

:root {
    --wpf-accent: #059669;
    --wpf-accent-contrast: #ffffff;
    --wpf-accent-soft: #ecfdf5;
    --wpf-accent-strong: #047857;

    --wpf-surface: #ffffff;
    --wpf-border: #e5e7eb;
    --wpf-text: inherit;
    --wpf-text-muted: #6b7280;
    --wpf-danger: #b91c1c;

    --wpf-radius: 8px;
    --wpf-gap: 12px;
}

/* Necessário: o atributo hidden precisa vencer o display dos temas. */
[hidden] {
    display: none !important;
}

/* ─── Badge de cashback na página do produto ──────────────────────────────── */

.wpf-cashback-badge {
    display: flex;
    align-items: center;
    gap: var(--wpf-gap);
    background: var(--wpf-accent-soft);
    border: 1px solid var(--wpf-border);
    border-radius: var(--wpf-radius);
    padding: 12px 16px;
    margin: 15px 0 0;
    line-height: 1.4;
    color: var(--wpf-text);
}

/* Ícone em SVG: emoji dependia da fonte do sistema e virava outro glifo.
   Quando o lojista desliga o ícone, o span nem chega a ser impresso. */
.wpf-icon-wrap,
.wpf-cashback-badge__icon,
.wpf-cashback-chip__icon {
    display: inline-flex;
    flex-shrink: 0;
}

.wpf-cashback-badge__icon {
    color: var(--wpf-accent);
}

/* Ícone medido em em: assim ele acompanha o tamanho de fonte configurado,
   em vez de ficar preso aos pixels do atributo do SVG. */
.wpf-cashback-badge__icon svg {
    width: 1.25em;
    height: 1.25em;
}

.wpf-cashback-chip__icon svg {
    width: 1.1em;
    height: 1.1em;
}

.wpf-cashback-badge strong {
    color: var(--wpf-accent-strong);
    font-size: 1.1em;
}

.wpf-cashback-note {
    margin: 6px 0 15px;
    font-size: 0.85em;
    color: var(--wpf-text-muted);
    line-height: 1.4;
}

/* ─── Chip de cashback na listagem de produtos ────────────────────────────── */

.wpf-cashback-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--wpf-accent);
    color: var(--wpf-accent-contrast);
    border-radius: 999px;
    padding: 4px 10px;
    margin-top: 5px;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1.4;
}

/* ─── Saldo no cabeçalho / shortcodes ─────────────────────────────────────── */

.wpf-user-points-widget,
.wpf-product-points {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

/* ─── Carteira no carrinho e no checkout ──────────────────────────────────── */
/*
 * Classes para personalizar:
 *   .wpf-wallet              card inteiro
 *   .wpf-wallet__head        linha "Seu cashback" com o ícone
 *   .wpf-wallet__balance     linha do saldo
 *   .wpf-wallet__amount      o valor em destaque
 *   .wpf-wallet__expiry      aviso de vencimento
 *   .wpf-wallet__applied     confirmação do valor aplicado
 *   .wpf-wallet__row         input + botão
 *   .wpf-wallet__apply       botão principal
 *   .wpf-wallet__remove      ação secundária
 */

.wpf-wallet {
    border: 1px solid var(--wpf-border);
    border-radius: var(--wpf-radius);
    padding: 16px 18px;
    margin: 16px 0;
    line-height: 1.4;
    color: var(--wpf-text);
}

.wpf-wallet__head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--wpf-text-muted);
}

.wpf-wallet__icon {
    display: inline-flex;
    color: var(--wpf-accent);
}

.wpf-wallet__icon svg {
    width: 16px;
    height: 16px;
}

.wpf-wallet__balance {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 0;
}

.wpf-wallet__amount {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--wpf-accent-strong);
}

.wpf-wallet__label,
.wpf-wallet__expiry {
    font-size: 0.85em;
    color: var(--wpf-text-muted);
}

.wpf-wallet__expiry {
    margin: 2px 0 0;
}

.wpf-wallet__applied {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 0;
    padding: 7px 10px;
    background: var(--wpf-accent-soft);
    border-radius: calc(var(--wpf-radius) - 2px);
    font-size: 0.85em;
    color: var(--wpf-accent-strong);
}

.wpf-wallet__form-area {
    margin-top: 14px;
}

.wpf-wallet__input-label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.8em;
    color: var(--wpf-text-muted);
}

.wpf-wallet__row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

/* Seletor com dois níveis para vencer o estilo de input do tema sem
   recorrer a !important, que impediria o lojista de sobrescrever. */
.wpf-wallet .wpf-wallet__input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 140px;
    margin: 0;
    padding: 9px 11px;
    border: 1px solid var(--wpf-border);
    border-radius: calc(var(--wpf-radius) - 2px);
    background: var(--wpf-surface);
    box-shadow: none;
    font-size: 1em;
    line-height: 1.3;
    color: inherit;
}

.wpf-wallet .wpf-wallet__input:focus {
    border-color: var(--wpf-accent);
    outline: 2px solid transparent;
    outline-offset: 1px;
    box-shadow: 0 0 0 2px var(--wpf-accent-soft);
}

.wpf-wallet .wpf-wallet__apply {
    flex: 0 0 auto;
    margin: 0;
}

/* Ação secundária: um texto, não um segundo botão competindo com o primeiro. */
.wpf-wallet .wpf-wallet__remove {
    display: inline-block;
    margin: 9px 0 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 0.82em;
    color: var(--wpf-text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.wpf-wallet .wpf-wallet__remove:hover {
    color: var(--wpf-danger);
    background: none;
}

.wpf-wallet__error {
    margin: 10px 0 0;
    color: var(--wpf-danger);
    font-size: 0.85em;
}

.wpf-wallet__guest-text {
    margin: 6px 0 0;
    font-size: 0.9em;
    color: var(--wpf-text-muted);
}

/* ─── Carteira em Minha Conta ─────────────────────────────────────────────── */

.wpf-account__card {
    border: 1px solid var(--wpf-border);
    border-radius: var(--wpf-radius);
    padding: 24px;
    margin-bottom: 30px;
    text-align: center;
    color: var(--wpf-text);
}

.wpf-account__label {
    display: block;
    color: var(--wpf-text-muted);
    font-size: 0.9em;
}

.wpf-account__amount {
    display: block;
    margin: 8px 0;
    font-size: 2.5em;
    font-weight: 700;
    line-height: 1.1;
    color: var(--wpf-accent-strong);
}

.wpf-account__hint {
    margin: 0;
    color: var(--wpf-text-muted);
    font-size: 0.9em;
}

.wpf-account__statement-title {
    margin-bottom: var(--wpf-gap);
}

.wpf-amount--in {
    color: var(--wpf-accent-strong);
    font-weight: 600;
    white-space: nowrap;
}

.wpf-amount--out {
    color: var(--wpf-text-muted);
    white-space: nowrap;
}

/* ─── Loader ──────────────────────────────────────────────────────────────── */

.wpf-loader {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9999;
}

.wpf-loader.is-active {
    display: flex;
}

.wpf-loader__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--wpf-border);
    border-top-color: var(--wpf-accent);
    border-radius: 50%;
    animation: wpf-spin 0.8s linear infinite;
}

@keyframes wpf-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .wpf-loader__spinner {
        animation-duration: 3s;
    }
}

/* ─── Responsivo ──────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .wpf-account__amount {
        font-size: 2em;
    }

    .wpf-wallet .wpf-wallet__input {
        max-width: none;
    }
}

.wpf-account__expiry {
    margin: 0 0 4px;
    font-size: 0.9em;
    color: var(--wpf-text-muted);
}