:root {
    --bs-body-bg: #fff;
    --bs-body-color: #212529;
    --bs-light-subtle: #f8f9fa;
    --hero-bg-color: #212529;
    --form-bg-color: #2c2f33;
    --form-text-color: #fff;
    --card-shadow-color: rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] {
    --bs-body-bg: #1c1c1e;
    --bs-body-color: #e0e0e0;
    --bs-light-subtle: #2d2d2d;
    --hero-bg-color: #212529;
    --form-bg-color: #2c2f33;
    --form-text-color: #e0e0e0;
    --card-shadow-color: rgba(0, 0, 0, 0.5);
    
    --bs-card-bg: var(--bs-light-subtle);
    --bs-card-color: var(--bs-body-color);
    --bs-border-color: #444;
}

body {
    transition: background-color 0.3s, color 0.3s;
}

/* Seção Hero com gradiente de fundo */
.hero-bg {
    background-color: var(--hero-bg-color);
    background-image: linear-gradient(180deg, var(--hero-bg-color) 0%, #000000 100%);
}

/* Estilo do formulário na seção Hero */
.form-card {
    background-color: var(--form-bg-color);
}

.form-control{
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--form-text-color) !important;
}

.form-select {
    background-color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #000;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.form-control:disabled {
    background-color: var(--form-bg-color) !important;
}

/* Ocultar barra de rolagem mas manter a funcionalidade */
.scrollable-div::-webkit-scrollbar {
    display: none;
}

.scrollable-div {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* Estilo para os cards de destaque */
#highlights-section .card {
    box-shadow: 0 4px 6px var(--card-shadow-color);
}

/* Estilo para os itens de vídeo */
.video-item {
    width: 280px; /* Largura fixa para cada vídeo */
}

.video-item img {
    height: 160px;
    object-fit: cover;
}

/* Estilo para as setas de navegação */
#products-section .btn-secondary {
    background-color: var(--bs-body-bg);
    border: none;
    color: var(--bs-body-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
    opacity: 0.8;
}

#products-section .btn-secondary:hover {
    opacity: 1;
}