.pc-configurator-wrapper {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}

.pc-steps-column {
    width: 35%; /* Mais largo para caber a informação do produto */
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.pc-step-item {
    padding: 12px 15px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-left: 4px solid #ccc; /* Barra lateral para indicar estado */
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pc-step-item:hover {
    border-left-color: #888;
}

/* Estado Ativo (Categoria que estamos a ver) */
.pc-step-item.active {
    border-left-color: #2cb72c;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    background: #f4fdf4;
}

/* Estado Completo (Quando já tem produto escolhido) */
.pc-step-item.has-product {
    border-color: #2cb72c;
}

.pc-step-title {
    font-weight: bold;
    font-size: 1.05em;
    margin-bottom: 5px;
}

.pc-step-selected-info {
    font-size: 0.9em;
    color: #555;
    line-height: 1.4;
}

.pc-products-column {
    width: 65%;
}

.pc-product-card {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
}
/* =========================================
   SUPORTE PARA TEMA ESCURO (DARK MODE)
   ========================================= */
:root {
    --pc-panel-bg: #ffffff;
    --pc-border-color: #e5e5e5;
    --pc-step-active-bg: #f8f9fa;
    --pc-text-muted: #6c757d;
    --pc-text-main: #333333;
}

[data-bs-theme="dark"] {
    --pc-panel-bg: #1a1a1c; /* Fundo alinhado com o teu body escuro */
    --pc-border-color: #2d2d30;
    --pc-step-active-bg: #2a2a2d;
    --pc-text-muted: #9ca3af;
    --pc-text-main: #f3f4f6;
}

/* Aplicar as variáveis aos elementos do configurador */
.pc-steps-column,
.pc-filters-sidebar,
.pc-summary-card,
.pc-config-product-card .card {
    background-color: var(--pc-panel-bg) !important;
    border-color: var(--pc-border-color) !important;
    color: var(--pc-text-main) !important;
}

/* Escurecer também a linha separadora (hr) no modo escuro */
[data-bs-theme="dark"] .pc-steps-column hr {
    border-top-color: var(--pc-border-color) !important;
    opacity: 1;
}

.pc-step-item {
    background-color: transparent;
    border: 1px solid var(--pc-border-color);
    border-left: 4px solid var(--pc-border-color);
    color: var(--pc-text-main);
    transition: all 0.2s ease;
}

/* O estado ativo agora usa a tua cor de marca (Laranja Premium) */
.pc-step-item.active {
    background-color: var(--pc-step-active-bg) !important;
    border-left: 4px solid var(--bs-primary) !important; 
    border-top: 1px solid var(--pc-border-color);
    border-right: 1px solid var(--pc-border-color);
    border-bottom: 1px solid var(--pc-border-color);
}

/* Ajustes finos para modo escuro */
[data-bs-theme="dark"] .pc-step-title,
[data-bs-theme="dark"] h1, 
[data-bs-theme="dark"] h3, 
[data-bs-theme="dark"] h4, 
[data-bs-theme="dark"] h5 {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .text-muted {
    color: var(--pc-text-muted) !important;
}

[data-bs-theme="dark"] .pc-product-image-wrapper {
    background-color: transparent !important;
}

/* =========================================
   AMAZZING FILTER - MODO ESCURO
   ========================================= */
[data-bs-theme="dark"] #dynamic-filters-container .title_block,
[data-bs-theme="dark"] #dynamic-filters-container .af_subtitle {
    color: #ffffff !important;
}

[data-bs-theme="dark"] #dynamic-filters-container .af_filter {
    border-bottom-color: var(--pc-border-color) !important;
}

/* Textos das opções de filtro (checkboxes e contadores) */
[data-bs-theme="dark"] #dynamic-filters-container .af-checkbox-label .name {
    color: var(--pc-text-main) !important;
}
[data-bs-theme="dark"] #dynamic-filters-container .af-checkbox-label .count {
    color: var(--pc-text-muted) !important;
}

/* Campos de formulário (Select do Fabricante e Inputs de Preço) */
[data-bs-theme="dark"] #dynamic-filters-container select.af-select,
[data-bs-theme="dark"] #dynamic-filters-container input[type="text"].input-text {
    background-color: var(--pc-step-active-bg) !important; /* Fundo cinza escuro */
    color: #ffffff !important;
    border: 1px solid var(--pc-border-color) !important;
}

/* Links secundários ("more...", "Clear") */
[data-bs-theme="dark"] #dynamic-filters-container a.toggle-cut-off,
[data-bs-theme="dark"] #dynamic-filters-container .clearAll a {
    color: var(--bs-primary) !important;
}

/* =========================================
   SLIDER DE PREÇO - AMAZZING FILTER (MODO ESCURO)
   ========================================= */

/* 1. Fundo da calha principal do slider (a parte não selecionada) */
[data-bs-theme="dark"] #dynamic-filters-container .ui-slider.ui-widget-content {
    background: var(--pc-step-active-bg) !important; 
    border: 1px solid var(--pc-border-color) !important;
}

/* 2. Barra preenchida (Range) - O teu Laranja Premium */
[data-bs-theme="dark"] #dynamic-filters-container .ui-slider .ui-slider-range {
    background: var(--bs-primary) !important;
}

/* 3. Puxadores (Handles/Bolinhas) */
[data-bs-theme="dark"] #dynamic-filters-container .ui-slider .ui-slider-handle {
    background-color: var(--pc-panel-bg) !important; /* Fundo igual ao painel */
    border: 2px solid var(--bs-primary) !important;  /* Borda laranja */
    border-radius: 50% !important; /* Garantir que ficam redondos */
    outline: none !important; /* Remove o contorno azul ao clicar */
}

/* Efeito ao passar o rato ou arrastar o puxador */
[data-bs-theme="dark"] #dynamic-filters-container .ui-slider .ui-slider-handle:hover,
[data-bs-theme="dark"] #dynamic-filters-container .ui-slider .ui-slider-handle:active {
    background-color: var(--bs-primary) !important;
    cursor: grab;
}

/* =========================================
   OCULTAR BOTÕES EXTRA DO AMAZZING FILTER
   ========================================= */
/* Oculta o botão "View products" e o seu contentor */
#dynamic-filters-container .btn-holder,
#dynamic-filters-container .viewFilteredProducts {
    display: none !important;
}

/* Oculta o botão flutuante/sticky "Filter" */
#dynamic-filters-container .compact-toggle.sticky {
    display: none !important;
}


/* Oculta o título original do Amazzing Filter e o botão Hide */
#dynamic-filters-container .title_block {
    display: none !important;
}

/* --- Ocultar botões extra e blocos do Amazzing Filter --- */
        #dynamic-filters-container .btn-holder,
        #dynamic-filters-container .viewFilteredProducts,
        #dynamic-filters-container .compact-toggle.sticky,
        #dynamic-filters-container .title_block,
        #dynamic-filters-container .clearAll {
            display: none !important;
        }