/* Alfa Printi Suite v4.0.10 — account.css escopado. */
/* Alfa Printi Suite — Minha Conta (account.css)
   Fallback estático das variáveis de marca. Este bloco de seletores e nomes
   de variável precisa continuar IDÊNTICO ao escopo usado em
   AGC_Design::get_dynamic_css(), pois o wp-admin sobrescreve exatamente
   estas variáveis via wp_add_inline_style quando o usuário personaliza as
   cores/tipografia no painel "Alfa Gráfica". Não renomear/remover seletores
   deste primeiro bloco. */
body.apcsu-surface-account .apcsu-ui-dashboard-hero,
body.apcsu-surface-account .apcsu-ui-section,
body.apcsu-surface-account .apcsu-ui-summary-card,
body.apcsu-surface-account .apcsu-ui-info-card,
body.apcsu-surface-account .apcsu-ui-order-card,
body.apcsu-surface-account .apcsu-ui-benefits-box,
body.apcsu-surface-account .apcsu-ui-benefit-card,
body.apcsu-surface-account .apcsu-ui-benefit-option,
body.apcsu-surface-account .apcsu-ui-checkout-summary,
body.apcsu-surface-account .apcsu-ui-save-later-inline,
body.apcsu-surface-account .apcsu-ui-saved-card,
body.apcsu-surface-account .apcsu-ui-balance-card,
body.apcsu-surface-account .apcsu-ui-notification-card,
body.apcsu-surface-account .apcsu-ui-statement-modal,
body.apcsu-surface-account .apcsu-ui-cart-empty-panel {--apcsu-ui-primary: #1769e0;
    --apcsu-ui-primary-dark: #0f4fb4;
    --apcsu-ui-accent: #18b26b;
    --apcsu-ui-bg: #f5f7fb;
    --apcsu-ui-card: #fff;
    --apcsu-ui-border: #e4e8f0;
    --apcsu-ui-text: #182033;
    --apcsu-ui-muted: #6f7a8d;
    --apcsu-ui-radius: 20px;
    --apcsu-ui-shadow: 0 16px 42px rgba(22, 35, 58, .08);}

/* ==========================================================================
   Base e utilitários
   ========================================================================== */

body.apcsu-surface-account.woocommerce-account .apcsu-ui-section *,
body.apcsu-surface-account.woocommerce-account .apcsu-ui-dashboard-hero * {box-sizing: border-box;}

body.apcsu-surface-account .apcsu-ui-muted,
body.apcsu-surface-account .apcsu-ui-section p {color: var(--apcsu-ui-muted);
    line-height: var(--apcsu-ui-line-height-base, 1.55);}

body.apcsu-surface-account .apcsu-ui-eyebrow {display: inline-block;
    font-size: var(--apcsu-ui-eyebrow-font-size, 12px);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--apcsu-ui-primary);
    margin-bottom: 6px;}

/* ==========================================================================
   Cartões genéricos (hero, seção, cards de resumo, benefícios, etc.)
   ========================================================================== */

body.apcsu-surface-account .apcsu-ui-dashboard-hero,
body.apcsu-surface-account .apcsu-ui-section {background: var(--apcsu-ui-card);
    border: 1px solid var(--apcsu-ui-border);
    border-radius: var(--apcsu-ui-card-radius, var(--apcsu-ui-radius));
    box-shadow: var(--apcsu-ui-shadow);
    padding: 26px 28px;
    margin: 0 0 22px;}

body.apcsu-surface-account .apcsu-ui-dashboard-hero {display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;}

body.apcsu-surface-account .apcsu-ui-dashboard-hero h2,
body.apcsu-surface-account .apcsu-ui-section h2 {color: var(--apcsu-ui-text);
    font-size: var(--apcsu-ui-title-font-size, 22px);
    font-weight: var(--apcsu-ui-title-font-weight, 800);
    letter-spacing: -0.02em;
    margin: 0 0 6px;}

body.apcsu-surface-account .apcsu-ui-dashboard-hero p {margin: 0;
    max-width: 56ch;}

body.apcsu-surface-account .apcsu-ui-narrow {max-width: 640px;}

/* Cabeçalho de seção: rótulo + título de um lado, ação do outro.
   Antes esta classe não tinha NENHUM CSS — o que fazia o título "colar"
   no bloco seguinte (ex.: o cartão de saldo em Créditos Alfa). */
body.apcsu-surface-account .apcsu-ui-section-heading {display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;}

body.apcsu-surface-account .apcsu-ui-section-heading h2 {margin: 0 0 4px;}

body.apcsu-surface-account .apcsu-ui-section-heading > div:first-child {min-width: 0;}

/* ==========================================================================
   Grade de resumo rápido (dashboard)
   ========================================================================== */

body.apcsu-surface-account .apcsu-ui-summary-grid {display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin: 0 0 22px;}

body.apcsu-surface-account .apcsu-ui-summary-card,
body.apcsu-surface-account .apcsu-ui-info-card,
body.apcsu-surface-account .apcsu-ui-order-card,
body.apcsu-surface-account .apcsu-ui-benefit-card,
body.apcsu-surface-account .apcsu-ui-balance-card,
body.apcsu-surface-account .apcsu-ui-notification-card {background: var(--apcsu-ui-card);
    border: 1px solid var(--apcsu-ui-border);
    border-radius: var(--apcsu-ui-card-radius, var(--apcsu-ui-radius));
    padding: 20px;
    box-shadow: var(--apcsu-ui-shadow);}

body.apcsu-surface-account .apcsu-ui-summary-card {display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;}

body.apcsu-surface-account .apcsu-ui-summary-card:hover,
body.apcsu-surface-account .apcsu-ui-summary-card:focus-visible {transform: translateY(-2px);
    border-color: var(--apcsu-ui-primary);
    box-shadow: 0 20px 46px rgba(22, 35, 58, .12);}

body.apcsu-surface-account .apcsu-ui-summary-card span {font-size: var(--apcsu-ui-card-label-font-size, 13px);
    color: var(--apcsu-ui-muted);
    font-weight: 700;}

body.apcsu-surface-account .apcsu-ui-summary-card strong {font-size: var(--apcsu-ui-card-value-font-size, 26px);
    font-weight: 900;
    color: var(--apcsu-ui-text);
    letter-spacing: -0.01em;}

body.apcsu-surface-account .apcsu-ui-summary-card small {color: var(--apcsu-ui-muted);
    font-size: 12.5px;}

/* ==========================================================================
   Cartão de saldo (Créditos Alfa / Vale-compras) — corrige o aperto do print
   ========================================================================== */

body.apcsu-surface-account .apcsu-ui-balance-card {display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 4px solid var(--apcsu-ui-primary);}

body.apcsu-surface-account .apcsu-ui-balance-card > span {font-size: var(--apcsu-ui-card-label-font-size, 13px);
    font-weight: 700;
    color: var(--apcsu-ui-muted);}

body.apcsu-surface-account .apcsu-ui-balance-card > strong {font-size: 34px;
    font-weight: 900;
    color: var(--apcsu-ui-price-text, var(--apcsu-ui-primary));
    letter-spacing: -0.02em;
    line-height: 1.1;}

body.apcsu-surface-account .apcsu-ui-balance-card > p {margin: 4px 0 0;
    max-width: 60ch;
    color: var(--apcsu-ui-muted);
    line-height: 1.6;}

/* ==========================================================================
   Botões
   ========================================================================== */

body.apcsu-surface-account .apcsu-ui-button,
body.apcsu-surface-account .apcsu-ui-button-primary,
body.apcsu-surface-account .apcsu-ui-button-secondary {display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--apcsu-ui-button-radius, 14px);
    padding: 12px 20px;
    border: 1px solid var(--apcsu-ui-button-border, var(--apcsu-ui-border));
    background: var(--apcsu-ui-button-bg, #fff);
    color: var(--apcsu-ui-button-text, var(--apcsu-ui-text));
    font-weight: var(--apcsu-ui-button-weight, 800);
    font-size: var(--apcsu-ui-button-font-size, 14px);
    text-transform: var(--apcsu-ui-button-text-transform, none);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;}

body.apcsu-surface-account .apcsu-ui-button:hover,
body.apcsu-surface-account .apcsu-ui-button-secondary:hover {background: var(--apcsu-ui-button-hover-bg, #eef5ff);
    border-color: var(--apcsu-ui-button-hover-border, var(--apcsu-ui-primary));
    color: var(--apcsu-ui-button-hover-text, var(--apcsu-ui-primary-dark));}

body.apcsu-surface-account .apcsu-ui-button-primary {background: var(--apcsu-ui-button-primary-bg, var(--apcsu-ui-primary));
    border-color: var(--apcsu-ui-button-primary-bg, var(--apcsu-ui-primary));
    color: var(--apcsu-ui-button-primary-text, #fff);
    box-shadow: var(--apcsu-ui-button-shadow, 0 10px 22px rgba(23, 105, 224, .18));}

body.apcsu-surface-account .apcsu-ui-button-primary:hover {background: var(--apcsu-ui-button-primary-hover-bg, var(--apcsu-ui-primary-dark));
    border-color: var(--apcsu-ui-button-primary-hover-bg, var(--apcsu-ui-primary-dark));
    color: var(--apcsu-ui-button-primary-hover-text, #fff);}

body.apcsu-surface-account .apcsu-ui-button:active,
body.apcsu-surface-account .apcsu-ui-button-primary:active,
body.apcsu-surface-account .apcsu-ui-button-secondary:active {transform: translateY(1px);}

body.apcsu-surface-account .apcsu-ui-button:focus-visible,
body.apcsu-surface-account .apcsu-ui-button-primary:focus-visible,
body.apcsu-surface-account .apcsu-ui-button-secondary:focus-visible {outline: 2px solid var(--apcsu-ui-primary);
    outline-offset: 2px;}

body.apcsu-surface-account .apcsu-ui-button-secondary {background: var(--apcsu-ui-button-bg, #fff);
    color: var(--apcsu-ui-button-text, var(--apcsu-ui-primary));}

/* ==========================================================================
   Pedidos (cartões) — usado pelo endpoint "alfa-pedidos"
   ========================================================================== */

body.apcsu-surface-account .apcsu-ui-orders-list {display: flex;
    flex-direction: column;
    gap: 16px;}

body.apcsu-surface-account .apcsu-ui-order-card {display: flex;
    flex-direction: column;
    gap: 16px;
    transition: box-shadow .18s ease, border-color .18s ease;}

body.apcsu-surface-account .apcsu-ui-order-card:hover {border-color: var(--apcsu-ui-primary);
    box-shadow: 0 20px 46px rgba(22, 35, 58, .12);}

body.apcsu-surface-account .apcsu-ui-order-main {display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;}

body.apcsu-surface-account .apcsu-ui-order-main h3 {margin: 2px 0 0;
    font-size: 18px;
    font-weight: 900;
    color: var(--apcsu-ui-text);}

body.apcsu-surface-account .apcsu-ui-status {display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: var(--apcsu-ui-status-font-size, 12.5px);
    font-weight: 800;
    white-space: nowrap;
    background: var(--apcsu-ui-status-bg, #eaf2ff);
    color: var(--apcsu-ui-status-text, var(--apcsu-ui-primary-dark));}

body.apcsu-surface-account .apcsu-ui-status-completed,
body.apcsu-surface-account .apcsu-ui-status-processing {background: var(--apcsu-ui-status-success-bg, #e8f8ef);
    color: var(--apcsu-ui-status-success-text, #0b7e49);}

body.apcsu-surface-account .apcsu-ui-status-on-hold,
body.apcsu-surface-account .apcsu-ui-status-pending {background: var(--apcsu-ui-status-warning-bg, #fff7e6);
    color: var(--apcsu-ui-status-warning-text, #a15c00);}

body.apcsu-surface-account .apcsu-ui-status-cancelled,
body.apcsu-surface-account .apcsu-ui-status-failed,
body.apcsu-surface-account .apcsu-ui-status-refunded {background: var(--apcsu-ui-status-danger-bg, #fdecec);
    color: var(--apcsu-ui-status-danger-text, #b42318);}

body.apcsu-surface-account .apcsu-ui-order-meta {display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid var(--apcsu-ui-border);
    border-bottom: 1px solid var(--apcsu-ui-border);}

body.apcsu-surface-account .apcsu-ui-order-meta div {display: flex;
    flex-direction: column;
    gap: 3px;}

body.apcsu-surface-account .apcsu-ui-order-meta dt {font-size: 12px;
    font-weight: 700;
    color: var(--apcsu-ui-muted);
    text-transform: uppercase;
    letter-spacing: .04em;}

body.apcsu-surface-account .apcsu-ui-order-meta dd {margin: 0;
    font-weight: 800;
    color: var(--apcsu-ui-text);}

body.apcsu-surface-account .apcsu-ui-actions {display: flex;
    flex-wrap: wrap;
    gap: 10px;}

body.apcsu-surface-account .apcsu-ui-pagination {display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;}

body.apcsu-surface-account .apcsu-ui-pagination a {display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid var(--apcsu-ui-border);
    background: var(--apcsu-ui-card);
    color: var(--apcsu-ui-text);
    font-weight: 800;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;}

body.apcsu-surface-account .apcsu-ui-pagination a:hover {border-color: var(--apcsu-ui-primary);
    color: var(--apcsu-ui-primary);}

body.apcsu-surface-account .apcsu-ui-pagination a.is-active {background: var(--apcsu-ui-primary);
    border-color: var(--apcsu-ui-primary);
    color: #fff;}

/* ==========================================================================
   Estado vazio
   ========================================================================== */

body.apcsu-surface-account .apcsu-ui-empty {text-align: center;
    padding: 48px 24px;
    border: 1px dashed var(--apcsu-ui-border);
    border-radius: var(--apcsu-ui-radius);
    background: var(--apcsu-ui-bg);}

body.apcsu-surface-account .apcsu-ui-empty h3 {margin: 0 0 8px;
    color: var(--apcsu-ui-text);
    font-size: 18px;}

body.apcsu-surface-account .apcsu-ui-empty p {margin: 0 0 18px;}

/* ==========================================================================
   Grades de cartão genéricas (dados cadastrais, vouchers)
   ========================================================================== */

body.apcsu-surface-account .apcsu-ui-card-grid {display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;}

body.apcsu-surface-account .apcsu-ui-info-card,
body.apcsu-surface-account .apcsu-ui-benefit-card {display: flex;
    flex-direction: column;
    gap: 10px;}

body.apcsu-surface-account .apcsu-ui-info-card h3,
body.apcsu-surface-account .apcsu-ui-benefit-card h3 {margin: 0 0 4px;
    font-size: 16px;
    font-weight: 900;
    color: var(--apcsu-ui-text);}

body.apcsu-surface-account .apcsu-ui-info-card p {margin: 0;
    line-height: 1.6;}

body.apcsu-surface-account .apcsu-ui-info-card .apcsu-ui-button,
body.apcsu-surface-account .apcsu-ui-info-card .apcsu-ui-button-primary {align-self: flex-start;
    margin-top: 6px;}

body.apcsu-surface-account .apcsu-ui-benefit-card.is-disabled {opacity: .55;}

body.apcsu-surface-account .apcsu-ui-price-large {font-size: 28px;
    font-weight: 900;
    color: var(--apcsu-ui-price-text, var(--apcsu-ui-primary));
    letter-spacing: -0.02em;}

/* ==========================================================================
   Extrato
   ========================================================================== */

body.apcsu-surface-account .apcsu-ui-statement-list {display: flex;
    flex-direction: column;
    gap: 12px;}

body.apcsu-surface-account .apcsu-ui-statement-row {display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--apcsu-ui-border);
    border-radius: var(--apcsu-ui-radius-sm, 14px);
    background: var(--apcsu-ui-card);}

body.apcsu-surface-account .apcsu-ui-statement-row strong {display: block;
    color: var(--apcsu-ui-text);
    font-size: 15px;}

body.apcsu-surface-account .apcsu-ui-statement-row > div:first-child span {display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--apcsu-ui-muted);}

body.apcsu-surface-account .apcsu-ui-statement-row p {margin: 6px 0 0;
    font-size: 13.5px;}

body.apcsu-surface-account .apcsu-ui-statement-value {text-align: right;
    font-weight: 900;
    font-size: 16px;
    color: var(--apcsu-ui-price-text, var(--apcsu-ui-primary));}

body.apcsu-surface-account .apcsu-ui-statement-value small {display: block;
    margin-top: 2px;
    font-weight: 700;
    font-size: 12px;
    color: var(--apcsu-ui-muted);}

/* ==========================================================================
   Notificações
   ========================================================================== */

body.apcsu-surface-account .apcsu-ui-notification-list {display: flex;
    flex-direction: column;
    gap: 14px;}

body.apcsu-surface-account .apcsu-ui-notification-card {display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 4px solid var(--apcsu-ui-notification-info-bg, #f3f8ff);}

body.apcsu-surface-account .apcsu-ui-notification-card.is-unread {border-left-color: var(--apcsu-ui-primary);}

body.apcsu-surface-account .apcsu-ui-notification-type-success {border-left-color: var(--apcsu-ui-notification-success-text, #0b7e49);}

body.apcsu-surface-account .apcsu-ui-notification-type-warning {border-left-color: var(--apcsu-ui-notification-warning-text, #a15c00);}

body.apcsu-surface-account .apcsu-ui-notification-type-error {border-left-color: var(--apcsu-ui-notification-error-text, #b42318);}

body.apcsu-surface-account .apcsu-ui-notification-card h3 {margin: 2px 0 0;
    font-size: 16px;
    font-weight: 900;
    color: var(--apcsu-ui-text);}

body.apcsu-surface-account .apcsu-ui-notification-card p {margin: 0;}

/* ==========================================================================
   Formulários (senha, etc.)
   ========================================================================== */

body.apcsu-surface-account .apcsu-ui-form {display: flex;
    flex-direction: column;
    gap: 16px;}

body.apcsu-surface-account .apcsu-ui-form p {margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;}

body.apcsu-surface-account .apcsu-ui-form label {font-weight: 800;
    font-size: 13.5px;
    color: var(--apcsu-ui-text);}

body.apcsu-surface-account .apcsu-ui-form input,
body.apcsu-surface-account .apcsu-ui-form select,
body.apcsu-surface-account .apcsu-ui-form textarea {width: 100%;
    border: 1px solid var(--apcsu-ui-input-border, var(--apcsu-ui-border));
    background: var(--apcsu-ui-input-bg, #fff);
    color: var(--apcsu-ui-input-text, var(--apcsu-ui-text));
    border-radius: 14px;
    padding: 12px 14px;
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;}

body.apcsu-surface-account .apcsu-ui-form input:focus,
body.apcsu-surface-account .apcsu-ui-form select:focus,
body.apcsu-surface-account .apcsu-ui-form textarea:focus {outline: none;
    border-color: var(--apcsu-ui-input-focus-border, var(--apcsu-ui-primary));
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .12);}

body.apcsu-surface-account .apcsu-ui-form .apcsu-ui-button-primary {align-self: flex-start;
    margin-top: 4px;}

/* ==========================================================================
   Tabelas dentro de blocos do plugin (não afeta a tabela nativa de pedidos)
   ========================================================================== */

body.apcsu-surface-account.woocommerce-account .apcsu-ui-section table {width: 100%;
    border-collapse: separate;
    border-spacing: 0;}

body.apcsu-surface-account.woocommerce-account .apcsu-ui-section th,
body.apcsu-surface-account.woocommerce-account .apcsu-ui-section td {padding: 12px;
    border-bottom: 1px solid var(--apcsu-ui-border);
    text-align: left;}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 780px){
    body.apcsu-surface-account .apcsu-ui-dashboard-hero,
body.apcsu-surface-account .apcsu-ui-section {padding: 20px;}

    body.apcsu-surface-account .apcsu-ui-dashboard-hero {align-items: flex-start;}

    body.apcsu-surface-account .apcsu-ui-summary-card,
body.apcsu-surface-account .apcsu-ui-info-card,
body.apcsu-surface-account .apcsu-ui-order-card {padding: 16px;}

    body.apcsu-surface-account .apcsu-ui-balance-card > strong {font-size: 28px;}

    body.apcsu-surface-account .apcsu-ui-order-main {flex-wrap: wrap;}

    body.apcsu-surface-account .apcsu-ui-statement-row {flex-direction: column;
        align-items: flex-start;}

    body.apcsu-surface-account .apcsu-ui-statement-value {text-align: left;}
}