/**
 * Estilos do frontend - DW Parcelas e Pix Customizadas
 * 
 * Este arquivo contém todos os estilos CSS para o frontend do plugin,
 * incluindo preços PIX, parcelas de cartão, tabelas, accordion e popup.
 * 
 * @package DW_Parcelas_Pix_WooCommerce
 * @since 0.2.0
 */

/* ==========================================================================
   Preço PIX - Container Principal
   ========================================================================== */

.dw-pix-price-info {
    background: #e8f5e9;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    border-left: 4px solid #4caf50;
    /* box-shadow removido */
}

.dw-pix-price-text {
    margin: 0;
    font-size: 16px;
    color: #2e7d32;
    line-height: 1.4;
}

.dw-pix-price-amount {
    font-weight: bold;
    color: #1b5e20;
    margin-left: 5px;
    /* font-size será aplicado via inline style baseado nas configurações do painel */
}

.dw-pix-discount-percent {
    color: #666;
    font-size: 14px;
    margin-left: 8px;
    font-weight: 500;
}

/* ==========================================================================
   Desconto PIX - Carrinho e Checkout
   ========================================================================== */

.dw-pix-cart-discount {
    color: #4caf50 !important;
    font-weight: 600;
    display: block;
    margin-top: 5px;
}

/* Responsividade */
@media (max-width: 768px) {
    .dw-pix-price-info {
        padding: 12px;
        margin: 10px 0;
    }
    
    .dw-pix-price-text {
        font-size: 14px;
    }
    
    /* font-size do preço será aplicado via inline style baseado nas configurações do painel */
    
    .dw-pix-discount-percent {
        font-size: 12px;
    }
}

/* Tema escuro */
@media (prefers-color-scheme: dark) {
    .dw-pix-price-info {
        background: #1b5e20;
        border-left-color: #66bb6a;
    }
    
    .dw-pix-price-text {
        color: #c8e6c9;
    }
    
    .dw-pix-price-amount {
        color: #a5d6a7;
    }
    
    .dw-pix-discount-percent {
        color: #bdbdbd;
    }
}

/* Animação suave ao atualizar */
.dw-pix-price-info {
    transition: all 0.3s ease;
}

/* ==========================================================================
   Preço PIX - Galeria de Produtos
   ========================================================================== */

.dw-pix-gallery-price {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.4;
    display: block;
}

.dw-pix-gallery-price strong {
    font-weight: 600;
}

/* ==========================================================================
   Ícones - PIX e Cartão
   ========================================================================== */

.dw-pix-icon-image {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
}

/* Ícone de cartão de crédito */
.dw-parcelas-credit-card-icon-image {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
}

.pix-icon {
    display: inline-block;
    vertical-align: middle;
}

.pix-icon img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* Responsividade para galeria */
@media (max-width: 768px) {
    .dw-pix-gallery-price {
        font-size: 11px;
    }
    
    .dw-pix-icon-image {
        width: 16px;
        height: 16px;
    }
}

/* Galeria de parcelas */
.dw-parcelas-gallery-wrapper .dw-parcelas-summary {
    padding: 8px;
    margin-bottom: 5px;
}

/* ============================================
   ESTILOS PARA PARCELAS DE CARTÃO DE CRÉDITO
   ============================================ */
   
/* ORDEM DE EXIBIÇÃO: Resumo → PIX → Tabela de Preços */

/* Container principal das parcelas */
.dw-parcelas-container {
    margin: 15px 0;
}

/* Resumo da melhor condição */
.dw-parcelas-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 16px;
    color: #333;
}

.dw-parcelas-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    /* Cor removida - usa cor original do SVG/ícone enviado */
}

.dw-parcelas-icon svg {
    width: 20px;
    height: 20px;
    /* Cor não forçada - mantém cor original do SVG */
}

.dw-parcelas-text {
    line-height: 1.5;
}

/* Wrapper da tabela */
.dw-parcelas-table-wrapper {
    margin-top: 10px;
}

/* Botão para expandir tabela - Cores claras e suaves */
.dw-parcelas-toggle-btn {
    background: #f0f4f8;
    border: 1px solid #d1dce5;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    color: #5a6c7d;
    transition: all 0.3s ease;
    margin-bottom: 10px;
    width: auto;
    display: inline-block;
}

.dw-parcelas-toggle-btn:hover {
    background: #e1e8ed;
    border-color: #b8c5d1;
    color: #2c3e50;
}

.dw-parcelas-toggle-btn:focus {
    outline: 2px solid #4caf50;
    outline-offset: 2px;
}

.dw-parcelas-toggle-btn.dw-parcelas-active {
    background: #3498db;
    border-color: #3498db;
    color: #fff;
}

.dw-parcelas-toggle-btn.dw-parcelas-active:hover {
    background: #2980b9;
    border-color: #2980b9;
}

/* Tabela de parcelas - Estrutura base (cores definidas via PHP dinâmico) */
.dw-parcelas-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dw-parcelas-table-hidden {
    display: none !important;
}

.dw-parcelas-table-visible {
    display: table !important;
}

.dw-parcelas-table-container {
    margin-top: 10px;
}

.dw-parcelas-display-open .dw-parcelas-table-container {
    display: block !important;
}

.dw-parcelas-display-open .dw-parcelas-table {
    display: table !important;
}

/* Cabeçalho - cores definidas via PHP dinâmico */
.dw-parcelas-table thead {
    /* background via PHP */
}

.dw-parcelas-table th {
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    /* cores via PHP */
}

/* Células - cores definidas via PHP dinâmico */
.dw-parcelas-table td {
    padding: 10px 15px;
    font-size: 14px;
    /* cores via PHP */
}

.dw-parcelas-table tbody tr:last-child td {
    border-bottom: none;
}

/* Zebrado (striped) - cores via PHP */
.dw-parcelas-table tbody tr:nth-child(even) {
    /* background via PHP */
}

.dw-parcelas-table tbody tr:hover {
    /* background via PHP */
    transition: background 0.2s ease;
}

/* Parcelas sem juros - cores via PHP dinâmico */
.dw-parcelas-table tbody tr.dw-parcelas-no-interest {
    font-weight: 600;
    /* background e color via PHP */
}

.dw-parcelas-table tbody tr.dw-parcelas-no-interest:hover {
    /* background via PHP */
}

.dw-parcelas-table tbody tr.dw-parcelas-no-interest:nth-child(even) {
    /* background via PHP */
}

/* Linha do PIX - cores via PHP dinâmico */
.dw-parcelas-table tbody tr.dw-parcelas-pix-row {
    font-weight: 600;
    /* background e color via PHP */
}

.dw-parcelas-table tbody tr.dw-parcelas-pix-row:hover {
    /* background via PHP */
}

.dw-parcelas-table tbody tr.dw-parcelas-pix-row td {
    background: transparent;
}

.dw-parcelas-pix-row .dw-pix-price-highlight {
    font-size: 16px;
    font-weight: 700;
    /* color via PHP */
}

/* Label "sem juros" e desconto PIX - cores via PHP */
.dw-parcelas-label {
    font-size: 12px;
    font-weight: 500;
    margin-left: 5px;
    /* color via PHP (herda da linha) */
}

.dw-parcelas-pix-discount {
    font-weight: 600;
    /* color via PHP */
}

/* Container para variações */
.dw-parcelas-variation-container {
    margin-top: 10px;
}

/* Animação de transição para accordion */
.dw-parcelas-table {
    transition: all 0.3s ease;
}

/* Responsividade para parcelas */
@media (max-width: 768px) {
    .dw-parcelas-summary {
        font-size: 14px;
        flex-wrap: wrap;
    }
    
    .dw-parcelas-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .dw-parcelas-table {
        font-size: 13px;
    }
    
    .dw-parcelas-table th,
    .dw-parcelas-table td {
        padding: 8px 10px;
    }
    
    .dw-parcelas-toggle-btn {
        width: 100%;
        padding: 10px;
        font-size: 13px;
    }
    
    .dw-parcelas-label {
        font-size: 11px;
    }
}

/* ==========================================================================
   Popup Modal - Tabela de Preços
   ========================================================================== */

.dw-parcelas-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9998;
    cursor: pointer;
}

.dw-parcelas-popup-content,
.dw-parcelas-popup-content-active {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fafafa;
    border-radius: 12px;
    padding: 30px;
    max-width: 90%;
    width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.dw-parcelas-popup-content-active {
    display: block !important;
}

.dw-parcelas-popup-content .dw-parcelas-table,
.dw-parcelas-popup-content-active .dw-parcelas-table {
    margin-top: 0;
    display: table !important;
}

.dw-parcelas-popup-content table,
.dw-parcelas-popup-content-active table {
    display: table !important;
    width: 100%;
}

.dw-parcelas-popup-close {
    margin-top: 15px;
    padding: 12px 20px;
    background: #3498db;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    transition: all 0.3s ease;
}

.dw-parcelas-popup-close:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

/* Previne scroll do body quando popup está aberto */
body.dw-parcelas-popup-open {
    overflow: hidden;
}

/* Melhorias de legibilidade - Espaçamento entre linhas */
.dw-parcelas-table tbody tr td {
    line-height: 1.6;
}

/* Destaque para valores monetários */
.dw-parcelas-table strong {
    font-weight: 700;
    color: #2c3e50;
}

/* Melhor contraste para hover */
.dw-parcelas-table tbody tr:focus-within {
    outline: 2px solid #3498db;
    outline-offset: -2px;
}

/* Responsividade para popup */
@media (max-width: 768px) {
    .dw-parcelas-popup-content {
        width: 95%;
        padding: 20px;
        max-height: 85vh;
    }
}

/* Tema escuro para parcelas */
@media (prefers-color-scheme: dark) {
    .dw-parcelas-summary {
        color: #e0e0e0;
    }
    
    /* Cor do ícone removida - usa cor original do SVG/ícone enviado */
    
    .dw-parcelas-table {
        background: #2c2c2c;
        color: #e0e0e0;
    }
    
    .dw-parcelas-table thead {
        background: #333;
    }
    
    .dw-parcelas-table th {
        color: #fff;
        border-bottom-color: #555;
    }
    
    .dw-parcelas-table td {
        border-bottom-color: #555;
    }
    
    .dw-parcelas-table tbody tr:nth-child(even) {
        background: #333;
    }
    
    .dw-parcelas-table tbody tr:hover {
        background: #444;
    }
    
    .dw-parcelas-table tbody tr.dw-parcelas-no-interest {
        background: #1b5e20;
    }
    
    .dw-parcelas-toggle-btn {
        background: #333;
        border-color: #555;
        color: #e0e0e0;
    }
    
    .dw-parcelas-toggle-btn:hover {
        background: #444;
        border-color: #666;
    }
    
    .dw-parcelas-popup-content {
        background: #2c2c2c;
        color: #e0e0e0;
    }
    
    .dw-parcelas-popup-close {
        background: #444;
    }
    
    .dw-parcelas-popup-close:hover {
        background: #555;
    }
}