/**
 * Estilos Profissionais para Layouts de Produtos (Créditos e Planos)
 * Design System:
 * - Primary: #37475a (Azul Marinho)
 * - Success: #2a8a2a (Verde)
 * - Accent: #4a90e2 (Azul Claro)
 * - Background: #ffffff
 * - Surface: #f8fafc
 */

:root {
    /* Cor principal (Primary) e Cor de Sucesso (Success) devem ser o Laranja/Amarelo forte da sua imagem */
    --color-primary: #FF8E1D; /* Cor de Destaque principal, para textos e traços */
    --color-success: #FF8E1D; /* Usada para valores em destaque e ícones de sucesso (o cheque nas listas) */
    
    /* Mantenha o azul claro original (ou ajuste se necessário), mas o laranja forte já será o principal. */
    --color-accent: #5d6f84; 
    
    /* Mantenha estas cores de texto e borda se quiser um contraste limpo */
    --color-text-primary: #2d3748;
    --color-text-secondary: #718096;
    --color-border: #e2e8f0;
    --color-surface: #f8fafc;
    --color-surface-elevated: #ffffff;

/* =======================================
   ANIMAÇÕES MODERNAS
======================================== */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}

@keyframes slideInFromLeft {
    from { 
        opacity: 0; 
        transform: translateX(-20px);
    }
    to { 
        opacity: 1; 
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from { 
        opacity: 0; 
        transform: translateX(20px);
    }
    to { 
        opacity: 1; 
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from { 
        opacity: 0; 
        transform: scale(0.95);
    }
    to { 
        opacity: 1; 
        transform: scale(1);
    }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* =======================================
   LAYOUT PRINCIPAL - GRID RESPONSIVO
======================================== */

.credits-purchase-container,
.planos-purchase-container,
.subscription-purchase-container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 48px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 60px 24px;
    animation: fadeIn 0.6s ease-out;
}

@media (max-width: 1024px) {
    .credits-purchase-container,
    .planos-purchase-container,
    .subscription-purchase-container {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 20px;
    }
}

/* =======================================
   CAIXA DE INFORMAÇÕES - LADO ESQUERDO
======================================== */

.credits-info,
.planos-info,
.plan-info {
    animation: slideInFromLeft 0.6s ease-out;
}

.credits-info h1, .planos-info h1, .plan-info h1, .plan-title {
    color: #232f3e;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.credits-info h1::after,
.planos-info h1::after,
.plan-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: 2px;
    margin-top: 16px;
    animation: slideInFromLeft 0.8s ease-out 0.2s backwards;
}

/* Descrição */
.credits-info > p,
.planos-info > p,
.plan-description > p {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 32px;
}

/* Subtítulos */
.credits-info h3,
.planos-info h3,
.plan-description h3 {
    color: #232f3e;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 40px 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.credits-info h3::before,
.planos-info h3::before,
.plan-description h3::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 24px;
    background: var(--color-primary);
    border-radius: 2px;
}

/* Listas de Benefícios */
.credits-info ul,
.planos-info ul,
.plan-description ul {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    display: grid;
    gap: 16px;
}

.credits-info ul li, .planos-info ul li, .plan-description ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: transparent;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: #000;
    font-size: 1rem;
    line-height: 1.6;
    transition: var(--transition-base);
    animation: fadeIn 0.5s ease-out backwards;
    animation-delay: calc(var(--item-index, 0) * 0.05s);
}

.credits-info ul li:hover, .planos-info ul li:hover, .plan-description ul li:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
    border: 2px solid #fdb913;
}

.credits-info ul li::before, .planos-info ul li::before, .plan-description ul li::before {
    content: "✓";
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    background: transparent;
    color: var(--color-success);
    font-weight: 700;
    font-size: 14px;
    border-radius: 50%;
    margin: 0;
    border: 2px solid var(--color-success);
}

/* Estilo alternativo para listas numeradas */
.credits-info ul li:nth-child(n)::before,
.planos-info ul li:nth-child(n)::before,
.plan-description ul li:nth-child(n)::before {
    counter-increment: list-item;
}

/* =======================================
   TRUST BADGES - DESIGN MODERNO
======================================== */

.trust-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 2px solid var(--color-border);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
    cursor: default;
}

.trust-badge:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.trust-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #e8f1fa, #d6e7f7);
    color: var(--color-primary);
    border-radius: 50%;
    font-size: 20px;
    flex-shrink: 0;
    border: 2px solid var(--color-border);
}

.trust-badge-icon .dashicons {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.trust-badge-text {
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* =======================================
   CAIXA DE COMPRA - STICKY SIDEBAR
======================================== */

.credits-buy-box,
.planos-buy-box,
.plan-buy-box {
    position: sticky;
    top: 24px;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-lg);
    animation: slideInFromRight 0.6s ease-out;
    transition: var(--transition-base);
}

.credits-buy-box:hover,
.planos-buy-box:hover,
.plan-buy-box:hover {
    box-shadow: var(--shadow-hover);
}

@media (max-width: 1024px) {
    .credits-buy-box,
    .planos-buy-box,
    .plan-buy-box {
        position: relative;
        top: 0;
    }
}

/* Título da Caixa */
.credits-buy-box h2,
.planos-buy-box h2,
.plan-buy-box h2 {
    color: var(--color-text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-border);
}

/* Tabela de Resumo - Design Limpo */
.credits-buy-box table,
.planos-buy-box table,
.plan-buy-box table,
.shop_table {
    width: 100%;
    margin: 0 0 24px;
    border-collapse: separate;
    border-spacing: 0;
}

.credits-buy-box tr,
.planos-buy-box tr,
.plan-buy-box tr {
    border-bottom: 1px solid var(--color-border);
}

.credits-buy-box tr:last-child,
.planos-buy-box tr:last-child,
.plan-buy-box tr:last-child {
    border-bottom: none;
}

.credits-buy-box th,
.planos-buy-box th,
.plan-buy-box th {
    text-align: left;
    padding: 16px 0;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.credits-buy-box td,
.planos-buy-box td,
.plan-buy-box td {
    text-align: right;
    padding: 16px 0;
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 1rem;
}

/* Linha de Total - Destaque */
.credits-buy-box .order-total,
.planos-buy-box .order-total,
.plan-buy-box .order-total {
    background: linear-gradient(135deg, var(--color-surface), transparent);
    margin: 16px -32px 0;
    padding: 0 32px;
    border-top: 2px solid var(--color-border);
}

.credits-buy-box .order-total th,
.planos-buy-box .order-total th,
.plan-buy-box .order-total th {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    padding-top: 20px;
}

.credits-buy-box .order-total td,
.planos-buy-box .order-total td,
.plan-buy-box .order-total td {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-success);
    padding-top: 20px;
}

/* =======================================
   BOTÃO DE COMPRA - DESIGN PREMIUM
======================================== */

.wc-proceed-to-checkout.checkout-button {
    display: block;
    width: 100%;
    padding: 18px 32px;
    background: linear-gradient(135deg, #5a6c7d, #4a5c6d);
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(90, 108, 125, 0.2);
    transition: var(--transition-base);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.wc-proceed-to-checkout.checkout-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.wc-proceed-to-checkout.checkout-button:hover::before {
    left: 100%;
}

.wc-proceed-to-checkout.checkout-button:hover {
    background: linear-gradient(135deg, #52a952, #459645);
    box-shadow: 0 8px 24px rgba(82, 169, 82, 0.25);
    transform: translateY(-2px);
}

.wc-proceed-to-checkout.checkout-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(82, 169, 82, 0.2);
}

/* =======================================
   BADGE DE SEGURANÇA
======================================== */

.credits-secure-payment,
.planos-secure-payment {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.credits-secure-payment .dashicons,
.planos-secure-payment .dashicons {
    color: var(--color-success);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* =======================================
   MELHORIAS DE ACESSIBILIDADE
======================================== */

/* Foco visível para navegação por teclado */
.wc-proceed-to-checkout.checkout-button:focus-visible,
.trust-badge:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =======================================
   MODO ESCURO (OPCIONAL)
======================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --color-text-primary: #f1f5f9;
        --color-text-secondary: #94a3b8;
        --color-border: #334155;
        --color-surface: #1e293b;
        --color-surface-elevated: #0f172a;
    }
    
    .credits-buy-box,
    .planos-buy-box,
    .plan-buy-box {
        background: var(--color-surface-elevated);
        border-color: var(--color-border);
    }
}

/* =======================================
   ESTADOS DE LOADING
======================================== */

.loading-shimmer {
    background: linear-gradient(
        90deg,
        var(--color-surface) 0%,
        var(--color-border) 50%,
        var(--color-surface) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* =======================================
   TOOLTIPS (SE NECESSÁRIO)
======================================== */

.tooltip {
    position: relative;
    cursor: help;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 8px 12px;
    background: var(--color-text-primary);
    color: white;
    font-size: 0.75rem;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.tooltip:hover::after {
    opacity: 1;
}