/* ==========================================================================
   1. VARIÁVEIS DE CORES E CONFIGURAÇÕES GERAIS
   ========================================================================== */
:root {
    --purple: #6a32d4;
    --purple-light: #7b2cbf;
    --orange: #ff7a00;
    --orange-dark: #cc5200;
    --amber: #ffb703;
    --pink: #ff1493;

    --bg-blue-light: #e6f0fa;
    --bg-teal-light: #e6f7f5;
    --bg-yellow-light: #fff5cc;
    --bg-orange-light: #ffebe0;
    --bg-purple-light: #6f42c1;

    --transition-speed: 0.3s;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    background-color: #ffffff;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

.fw-black {
    font-weight: 900;
}

.text-purple {
    color: var(--purple);
}

.text-orange {
    color: var(--orange);
}

.text-blue {
    color: #1e88e5;
}

.text-teal-dark {
    color: #00796b;
}

.text-orange-dark {
    color: #d84315;
}

.text-amber {
    color: #ffb300;
}

.bg-pink {
    background-color: #ff3366;
    color: white;
}

.btn-purple {
    background-color: var(--purple);
    color: white;
    border: none;
    transition: background-color 0.2s;
}

.btn-purple:hover {
    background-color: #521fb0;
    color: white;
}

.btn-orange {
    background-color: var(--orange) !important;
    color: white !important;
    border: none;
    transition: background-color 0.2s;
}

.btn-orange:hover {
    background-color: var(--orange-dark) !important;
    color: white !important;
}

/* ==========================================================================
   2. COMPONENTES DO LAYOUT (TEMA CLARO / ESTRUTURA)
   ========================================================================== */

.search-box {
    width: 250px;
}

.search-box input {
    border-radius: 20px 0 0 20px !important;
}

.search-box button {
    border-radius: 0 20px 20px 0 !important;
}

.navmenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.navmenu a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.navmenu a:hover,
.navmenu a.active {
    color: var(--purple) !important;
}

.hero-section {
    background-color: #f0f7ff;
    min-height: 550px;
    padding: 60px 0;
    transition: background-color var(--transition-speed);
}

.hero-bg-circle {
    position: absolute;
    width: 500px;
    height: 500px;
    background-color: #d0e7ff;
    border-radius: 50%;
    bottom: -100px;
    right: 5%;
    z-index: 0;
    transition: background-color var(--transition-speed);
}

.rounded-circle-custom {
    border-radius: 40% 60% 60% 40% / 50% 30% 70% 50%;
    z-index: 1;
    position: relative;
    max-height: 420px;
    object-fit: cover;
}

.organic-badge {
    position: absolute;
    top: 20px;
    right: 15%;
    background: white;
    padding: 15px;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    border: 2px dashed var(--orange);
    transition: background-color var(--transition-speed);
}

.banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    z-index: 3;
    transition: 0.2s;
}

.banner-arrow:hover {
    background: var(--purple);
    color: white;
}

.left-arrow {
    left: 20px;
}

.right-arrow {
    right: 20px;
}

.min-h-250 {
    min-height: 250px;
}

.bg-blue-light {
    background-color: var(--bg-blue-light);
}

.bg-teal-light {
    background-color: var(--bg-teal-light);
}

.bg-yellow-light {
    background-color: var(--bg-yellow-light);
}

.bg-orange-light {
    background-color: var(--bg-orange-light);
}

.bg-purple-light {
    background-color: var(--bg-purple-light);
}

.promo-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color var(--transition-speed);
}

.promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.bg-dark-opacity {
    background-color: rgba(0, 0, 0, 0.15);
}

.product-card {
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s, box-shadow 0.3s, background-color var(--transition-speed), border-color var(--transition-speed);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
}

.shadow-xs {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

/* ==========================================================================
   2.1 COMPONENTES DA TABELA DE PRODUTOS (NOVO)
   ========================================================================== */
.pc-table-wrapper {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(106, 50, 212, 0.06);
    border: 1px solid #e1e1e1;
    margin-top: 20px;
    transition: background-color var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.pc-table-main {
    margin-bottom: 0;
    background-color: #ffffff;
    transition: background-color var(--transition-speed);
}

.pc-table-main thead th {
    background-color: var(--purple);
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    padding: 16px;
    border: none;
    vertical-align: middle;
}

.pc-table-main tbody tr {
    transition: background-color 0.2s ease;
}

.pc-table-main tbody tr:hover {
    background-color: #f8f6ff !important;
}

.pc-table-main tbody td {
    padding: 16px;
    vertical-align: middle;
    color: #4a4a4a;
    border-bottom: 1px solid #f1f1f1;
    font-size: 0.95rem;
    transition: color var(--transition-speed), border-color var(--transition-speed);
}

.pc-table-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.2s;
}

.pc-table-img:hover {
    transform: scale(1.05);
}

.pc-table-center {
    text-align: center;
    vertical-align: middle;
}

.pc-table-btn-action {
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 8px;
    font-weight: 500;
    box-shadow: none;
    margin: 2px;
}

/* ==========================================================================
   3. ANIMAÇÕES
   ========================================================================== */
@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-bounce {
    animation: bounce 3s infinite ease-in-out;
}

/* ==========================================================================
   4. REGRAS EXCLUSIVAS DO MODO ESCURO (DARK MODE)
   ========================================================================== */
body.dark-mode {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .navbar,
body.dark-mode .bg-white,
body.dark-mode .product-card,
body.dark-mode .organic-badge,
body.dark-mode .bg-white.p-3 {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #2d2d2d !important;
}

body.dark-mode .navmenu a,
body.dark-mode .navbar-brand,
body.dark-mode .text-dark,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .lead {
    color: #ffffff !important;
}

body.dark-mode p.text-muted,
body.dark-mode .text-muted {
    color: #aaaaaa !important;
}

body.dark-mode .navmenu a:not(.active) {
    color: #b0b0b0 !important;
}

body.dark-mode .navmenu a:hover {
    color: var(--purple-light) !important;
}

body.dark-mode .hero-section {
    background-color: #161d26 !important;
}

body.dark-mode .hero-bg-circle {
    background-color: #242f3d !important;
}

body.dark-mode .bg-blue-light {
    background-color: #1a233a !important;
}

body.dark-mode .bg-teal-light {
    background-color: #142d29 !important;
}

body.dark-mode .bg-yellow-light {
    background-color: #2d2a14 !important;
}

body.dark-mode .bg-orange-light {
    background-color: #331f14 !important;
}

body.dark-mode .promo-card .text-muted,
body.dark-mode .promo-card p {
    color: #b0b0b0 !important;
}

body.dark-mode .promo-card .text-blue {
    color: #64b5f6 !important;
}

body.dark-mode .promo-card .text-teal-dark {
    color: #4db6ac !important;
}

body.dark-mode .promo-card .text-orange-dark {
    color: #ff8a65 !important;
}

body.dark-mode .promo-card .text-amber {
    color: #ffd54f !important;
}

body.dark-mode .search-box input,
body.dark-mode header input[type="search"] {
    background-color: #2d2d2d !important;
    border-color: #3d3d3d !important;
    color: #ffffff !important;
}

body.dark-mode header.bg-light {
    background-color: #1e1e1e !important;
    border-color: #2d2d2d !important;
}

/* --- Tabela do Pet Club no Dark Mode --- */
body.dark-mode .pc-table-wrapper {
    background-color: #1e1e1e !important;
    border-color: #2d2d2d !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.dark-mode .pc-table-main {
    background-color: #1e1e1e !important;
}

body.dark-mode .pc-table-main tbody td {
    color: #e0e0e0 !important;
    border-bottom-color: #2d2d2d !important;
}

body.dark-mode .pc-table-main tbody tr:hover {
    background-color: #241f3a !important;
}

body.dark-mode .pc-table-main code.text-dark {
    background-color: #2d2d2d !important;
    color: #ff8a65 !important;
}

/* ==========================================================================
   5. COMPONENTE DO RODAPÉ (TEMA CLARO)
   ========================================================================== */
.main-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #ededed;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.footer-title {
    color: #222;
    font-size: 0.85rem;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #666;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s, padding-left 0.2s;
}

.footer-links a:hover {
    color: var(--purple);
    padding-left: 4px;
}

.social-btn {
    width: 38px;
    height: 38px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    color: #555;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s;
}

.social-btn:hover {
    background-color: var(--purple);
    color: #ffffff;
    border-color: var(--purple);
    transform: translateY(-3px);
}

.footer-newsletter input {
    border-radius: 25px 0 0 25px !important;
    font-size: 0.9rem;
}

.footer-newsletter button {
    border-radius: 0 25px 25px 0 !important;
}

.footer-divider {
    border-color: #ddd;
    opacity: 0.6;
}

/* ==========================================================================
   6. ATUALIZAÇÃO DO RODAPÉ PARA MODO ESCURO (DARK MODE)
   ========================================================================== */
body.dark-mode .main-footer {
    background-color: #161616 !important;
    border-top-color: #262626 !important;
}

body.dark-mode .main-footer,
body.dark-mode .main-footer p,
body.dark-mode .main-footer .text-muted,
body.dark-mode .main-footer strong,
body.dark-mode .main-footer span {
    color: #e0e0e0 !important;
}

body.dark-mode .main-footer .footer-title,
body.dark-mode .main-footer h4,
body.dark-mode .main-footer h6 {
    color: #ffffff !important;
}

body.dark-mode .footer-links a {
    color: #aaaaaa !important;
}

body.dark-mode .footer-links a:hover {
    color: var(--purple-light) !important;
}

body.dark-mode .social-btn {
    background-color: #242424;
    border-color: #333333;
    color: #cccccc;
}

body.dark-mode .social-btn:hover {
    background-color: var(--purple-light);
    color: #ffffff;
}

body.dark-mode .footer-divider {
    border-color: #333333;
}

body.dark-mode .footer-newsletter input {
    background-color: #242424 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   7. SEÇÃO E COMPONENTES DO MAPA INTERATIVO (UNIDADES)
   ========================================================================== */
.map-section-container {
    display: flex;
    height: 600px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #ededed;
    transition: border-color var(--transition-speed);
}

#map {
    flex: 3;
    background: #ffffff;
    outline: none;
    z-index: 1;
}

path.leaflet-interactive {
    outline: none;
}

#info-panel {
    flex: 1;
    padding: 30px;
    background: #ffffff;
    border-left: 1px solid #ddd;
    overflow-y: auto;
    z-index: 10;
    transition: background-color var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed);
}

.estado-tooltip {
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: bold;
    pointer-events: none;
}

.estado-destaque {
    filter: drop-shadow(0 0 12px rgba(106, 50, 212, 0.6));
}

/* --------------------------------------------------------------------------
   7.1 ADAPTAÇÃO DO MAPA PARA O MODO ESCURO (DARK MODE)
   -------------------------------------------------------------------------- */
body.dark-mode .map-section-container {
    border-color: #2d2d2d;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

body.dark-mode #info-panel {
    background-color: #1e1e1e !important;
    border-left-color: #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode #info-panel h1,
body.dark-mode #info-panel h2,
body.dark-mode #info-panel h3,
body.dark-mode #info-panel h4,
body.dark-mode #info-panel strong {
    color: #ffffff !important;
}

body.dark-mode #info-panel .bg-light {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

body.dark-mode #info-panel .text-muted {
    color: #aaaaaa !important;
}

body.dark-mode #info-panel hr {
    border-color: #3d3d3d;
    opacity: 0.4;
}

/* ==========================================================================
   8. COMPONENTES DE ALERTAS E RETORNOS (TELA DE EXCLUSÃO/AVISOS)
   ========================================================================== */
.pc-alert-body {
    background-color: #f7f6ff;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    transition: background-color var(--transition-speed);
}

.pc-alert-container {
    max-width: 550px;
    padding: 20px;
    width: 100%;
}

.pc-alert-card {
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(106, 50, 212, 0.08);
    border: 1px solid #e1e1e1 !important;
    padding: 32px 24px !important;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-color: #ffffff !important;
    color: #4a4a4a !important;
    animation: pcAlertFadeIn 0.4s ease-out;
    transition: background-color var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed), box-shadow var(--transition-speed);
}

.pc-alert-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Variação: Sucesso / Informativo (Borda Roxa) */
.pc-alert-info {
    border-left: 6px solid var(--purple) !important;
}

.pc-alert-info h3 {
    color: var(--purple);
}

/* Variação: Erro (Borda Laranja/Coral) */
.pc-alert-danger {
    border-left: 6px solid var(--orange) !important;
}

.pc-alert-danger h3 {
    color: var(--orange);
}

/* Botões Customizados internos do Alerta */
.pc-alert-card .btn {
    padding: 10px 32px;
    font-size: 0.95rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: none;
    border: none;
}

.pc-alert-card .btn-purple-action {
    background-color: var(--purple);
    color: #ffffff;
}

.pc-alert-card .btn-purple-action:hover {
    background-color: #521fb0;
    color: #ffffff;
}

.pc-alert-card .btn-orange-action {
    background-color: var(--orange);
    color: #ffffff;
}

.pc-alert-card .btn-orange-action:hover {
    background-color: var(--orange-dark);
    color: #ffffff;
}

.pc-alert-card .btn-close {
    top: 15px;
    right: 15px;
    padding: 1.25rem;
    opacity: 0.5;
}

@keyframes pcAlertFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   8.1 ADAPTAÇÃO DOS ALERTAS PARA O MODO ESCURO (DARK MODE)
   -------------------------------------------------------------------------- */
body.dark-mode.pc-alert-body {
    background-color: #121212 !important;
}

body.dark-mode .pc-alert-card {
    background-color: #1e1e1e !important;
    border-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .pc-alert-info {
    border-left-color: var(--purple-light) !important;
}

body.dark-mode .pc-alert-info h3 {
    color: #a29bfe !important;
}

body.dark-mode .pc-alert-danger {
    border-left-color: var(--orange) !important;
}

body.dark-mode .pc-alert-danger h3 {
    color: #ff9f43 !important;
}

body.dark-mode .pc-alert-card .btn-close {
    filter: invert(1) !important;
}

/* ==========================================================================
   9. COMPONENTES DE FORMULÁRIO (TELA DE INCLUSÃO/EDIÇÃO)
   ========================================================================== */
.pc-form-container {
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(108, 92, 231, 0.08);
    border: 1px solid #e1e1e1;
    background-color: #ffffff;
    padding: 30px;
    transition: background-color var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.pc-form-preview-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px dashed var(--purple);
    transition: border-color var(--transition-speed);
}

/* --------------------------------------------------------------------------
   9.1 ADAPTAÇÃO DOS FORMULÁRIOS PARA O MODO ESCURO (DARK MODE)
   -------------------------------------------------------------------------- */
body.dark-mode .pc-form-container {
    background-color: #1e1e1e !important;
    border-color: #2d2d2d !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.dark-mode .pc-form-container .border-bottom,
body.dark-mode .pc-form-container .border-top {
    border-color: #2d2d2d !important;
}

body.dark-mode .pc-form-container h3 {
    color: #ffffff !important;
}

body.dark-mode .pc-form-container .form-label,
body.dark-mode .pc-form-container span.small {
    color: #aaaaaa !important;
}

body.dark-mode .pc-form-container .form-control {
    background-color: #2d2d2d !important;
    border-color: #3d3d3d !important;
    color: #ffffff !important;
}

body.dark-mode .pc-form-container .form-control:focus {
    border-color: var(--purple-light) !important;
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.25);
}

body.dark-mode .pc-form-preview-img {
    border-color: var(--purple-light);
    background-color: #2d2d2d;
}

body.dark-mode .pc-form-container .btn-light {
    background-color: #2d2d2d !important;
    border-color: #3d3d3d !important;
    color: #ffffff !important;
}

body.dark-mode .pc-form-container .btn-light:hover {
    background-color: #3d3d3d !important;
}

/* --------------------------------------------------------------------------
   9.2 AJUSTES ADICIONAIS PARA COMPONENTES DE INCLUSÃO
   -------------------------------------------------------------------------- */
body.dark-mode .pc-form-container .form-control::placeholder {
    color: #666666 !important;
}

body.dark-mode .pc-form-container .input-group-text {
    background-color: #2d2d2d !important;
    border-color: #3d3d3d !important;
    color: #ffffff !important;
}

/* ==========================================================================
   11. MODAL DE CONFIRMAÇÃO PERSONALIZADO
   ========================================================================== */
.pc-modal-content {
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(108, 92, 231, 0.15);
    border: 1px solid #e1e1e1;
    overflow: hidden;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.pc-modal-header {
    background-color: var(--purple);
    color: #ffffff;
    border-bottom: none;
    padding: 20px 24px;
}

.pc-modal-title {
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
}

.pc-modal-content .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.pc-modal-content .btn-close:hover {
    opacity: 1;
}

.pc-modal-body {
    background-color: #f7f6ff;
    color: #4a4a4a;
    font-size: 1rem;
    padding: 28px 24px;
    text-align: center;
}

.pc-modal-footer {
    background-color: #ffffff;
    border-top: 1px solid #f1f1f1;
    padding: 16px 24px;
    justify-content: center;
    gap: 12px;
}

.pc-modal-footer .btn {
    padding: 10px 24px;
    font-size: 0.95rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 100px;
}

/* --------------------------------------------------------------------------
   11.1 ADAPTAÇÃO DO MODAL PARA O MODO ESCURO (DARK MODE)
   -------------------------------------------------------------------------- */
body.dark-mode .pc-modal-content {
    border-color: #2d2d2d !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
    background-color: #1e1e1e !important;
}

body.dark-mode .pc-modal-body {
    background-color: #252433 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .pc-modal-footer {
    background-color: #1e1e1e !important;
    border-top-color: #2d2d2d !important;
}

/* ==========================================================================
    12 ESTILOS EXCLUSIVOS DA PÁGINA DE DETALHES (TEMA CLARO)
    ========================================================================== */
.pcd-ecommerce-container {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(108, 92, 231, 0.05);
    border: 1px solid #f1f1f1;
    overflow: hidden;
    transition: background-color var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.pcd-product-image-wrapper {
    background-color: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 100%;
    transition: background-color var(--transition-speed);
}

.pcd-imagem-produto {
    max-width: 100%;
    max-height: 450px;
    object-fit: contain;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.pcd-imagem-produto:hover {
    transform: scale(1.02);
}

.pcd-text-purple {
    color: var(--purple) !important;
}

.pcd-btn-purple {
    background-color: var(--purple);
    color: white;
    transition: all 0.2s ease;
}

.pcd-btn-purple:hover {
    background-color: #521fb0;
    color: white;
    transform: translateY(-1px);
}

.pcd-quantity-control {
    max-width: 130px;
    background-color: #ffffff;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.pcd-features-badge {
    background-color: #f3f0ff;
    color: var(--purple);
    font-weight: 500;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

/* ==========================================================================
    12.1 ADAPTAÇÃO PARA O MODO ESCURO (DARK MODE)
    ========================================================================== */
body.dark-mode .pcd-ecommerce-container {
    background-color: #1e1e1e !important;
    border-color: #2d2d2d !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .pcd-product-image-wrapper {
    background-color: #161616 !important;
}

body.dark-mode .pcd-features-badge {
    background-color: #241f3a !important;
    color: var(--purple-light) !important;
}

body.dark-mode .pcd-text-purple {
    color: var(--purple-light) !important;
}

body.dark-mode .pcd-quantity-control {
    background-color: #2d2d2d !important;
    border-color: #3d3d3d !important;
}

body.dark-mode .pcd-quantity-control input {
    background-color: transparent !important;
    color: #ffffff !important;
}

body.dark-mode .pcd-quantity-control .btn-link {
    color: #ffffff !important;
}

body.dark-mode .pcd-btn-purple {
    background-color: var(--purple-light);
}

body.dark-mode .pcd-btn-purple:hover {
    background-color: #9b5de5;
}

/* ==========================================================================
   13 DESIGN PREMIUM: CONTATO & SUPORTE (MODO CLARO E ESCURO)
   ========================================================================== */

/* --- VARIÁVEIS DE TRANSIÇÃO --- */
:root {
    --premium-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- ESTILOS COMPARTILHADOS & ANIMAÇÕES --- */
.promo-card,
.accordion-item {
    transition: var(--premium-transition);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.theme-title {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    background: linear-gradient(135deg, #1a202c 0%, #4a5568 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: var(--premium-transition);
}

/* ==========================================================================
   13.1 TEMA CLARO (PADRÃO)
   ========================================================================== */

/* --- CARDS DE CONTATO --- */
.promo-card {
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.promo-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Cores de Fundo Soft (Modo Claro) */
.promo-card.bg-green-light {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
}

.promo-card.bg-red-light {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
}

.promo-card.bg-yellow-light {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%) !important;
}

/* Tipografia Fina (Modo Claro) */
.promo-card .card-brand-title {
    font-weight: 900;
    letter-spacing: -0.03em;
}

.promo-card.bg-green-light .card-brand-title {
    color: #15803d;
}

.promo-card.bg-red-light .card-brand-title {
    color: #b91c1c;
}

.promo-card.bg-yellow-light .card-brand-title {
    color: #a16207;
}

.promo-card .card-main-text {
    color: #0f172a;
    font-size: 1.35rem;
}

.promo-card .card-desc-text {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --- ACORDEÃO DE SUPORTE --- */
.custom-accordion .accordion-item {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    margin-bottom: 0.85rem;
    border-radius: 16px !important;
    overflow: hidden;
}

.custom-accordion .accordion-trigger {
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-weight: 600;
    padding: 1.25rem 1.5rem;
    color: #334155;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--premium-transition);
}

/* Item aberto no Modo Claro */
.custom-accordion .accordion-trigger:not(.collapsed) {
    background: linear-gradient(90deg, #f3e8ff 0%, #faf5ff 100%);
    color: #5b21b6;
    font-weight: 700;
}

.custom-accordion .accordion-body {
    background-color: #ffffff;
    color: #475569;
    border-top: 1px solid #f1f5f9;
    padding: 1.5rem;
    font-size: 0.975rem;
}

/* Imagem Lateral */
.theme-image {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    transition: var(--premium-transition);
    border: 4px solid #ffffff;
}


/* ==========================================================================
   13. TEMA ESCURO (body.dark-mode)
   ========================================================================== */

body.dark-mode .theme-title {
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- CARDS DE CONTATO (GLASSMORPHISM) --- */
body.dark-mode .promo-card {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

/* Fundos escuros translúcidos e elegantes */
body.dark-mode .promo-card.bg-green-light {
    background: rgba(6, 78, 59, 0.25) !important;
    border: 1px solid rgba(52, 211, 153, 0.2) !important;
}

body.dark-mode .promo-card.bg-red-light {
    background: rgba(127, 29, 29, 0.25) !important;
    border: 1px solid rgba(248, 113, 113, 0.2) !important;
}

body.dark-mode .promo-card.bg-yellow-light {
    background: rgba(120, 53, 15, 0.25) !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
}

/* Efeito Neon discreto no Hover do Card */
body.dark-mode .promo-card.bg-green-light:hover {
    box-shadow: 0 15px 30px rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.4) !important;
}

body.dark-mode .promo-card.bg-red-light:hover {
    box-shadow: 0 15px 30px rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.4) !important;
}

body.dark-mode .promo-card.bg-yellow-light:hover {
    box-shadow: 0 15px 30px rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.4) !important;
}

/* Cores de texto no Escuro */
body.dark-mode .promo-card.bg-green-light .card-brand-title {
    color: #34d399;
    text-shadow: 0 0 12px rgba(52, 211, 153, 0.2);
}

body.dark-mode .promo-card.bg-red-light .card-brand-title {
    color: #f87171;
    text-shadow: 0 0 12px rgba(248, 113, 113, 0.2);
}

body.dark-mode .promo-card.bg-yellow-light .card-brand-title {
    color: #fbbf24;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.2);
}

body.dark-mode .promo-card .card-main-text {
    color: #f8fafc;
}

body.dark-mode .promo-card .card-desc-text {
    color: #94a3b8;
}

/* --- ACORDEÃO DE SUPORTE --- */
body.dark-mode .custom-accordion .accordion-item {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-mode .custom-accordion .accordion-item:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .custom-accordion .accordion-trigger {
    background-color: transparent;
    color: #cbd5e1;
}

/* Item aberto no Modo Escuro */
body.dark-mode .custom-accordion .accordion-trigger:not(.collapsed) {
    background: linear-gradient(90deg, rgba(88, 28, 135, 0.4) 0%, rgba(124, 58, 237, 0.1) 100%);
    color: #ddd6fe;
    border-bottom: 1px solid rgba(124, 58, 237, 0.2);
}

body.dark-mode .custom-accordion .accordion-body {
    background: rgba(15, 23, 42, 0.6);
    color: #94a3b8;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-mode .custom-accordion .accordion-body strong {
    color: #f1f5f9;
}

/* Ajuste da Imagem Lateral no Escuro */
body.dark-mode .theme-image {
    filter: brightness(0.8) contrast(1.1);
    border-color: #1e293b;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}


/* ==========================================================================
   14 LOGIN
   ========================================================================== */
.login-body {
    background-color: #f7f6ff;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    transition: background-color var(--transition-speed);
}

.login-card {
    max-width: 420px;
    width: 100%;
    padding: 35px;
    border-radius: 16px;
    background-color: #ffffff;
    border: 1px solid #e1e1e1;
    box-shadow: 0 10px 30px rgba(106, 50, 212, 0.08);
    transition: all var(--transition-speed);
}

.login-logo {
    font-size: 2.2rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 25px;
}

/* CONFIGURAÇÕES DO MODO ESCURO */
body.dark-mode.login-body {
    background-color: #121212 !important;
}

body.dark-mode .login-card {
    background-color: #1e1e1e !important;
    border-color: #2d2d2d !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .login-card .form-control {
    background-color: #2d2d2d !important;
    border-color: #3d3d3d !important;
    color: #ffffff !important;
}

/* CORREÇÃO DOS ÍCONES NO MODO ESCURO */
body.dark-mode .login-card .input-group-text {
    background-color: #2d2d2d !important;
    border-color: #3d3d3d !important;
    color: #a0a0a0 !important;
}

body.dark-mode .login-card .form-control:focus {
    border-color: var(--purple-light) !important;
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.25);
}

body.dark-mode .login-card h2 {
    color: #ffffff !important;
}


/* ==========================================================================
   15 modo escuro alert (verproduto) (admin)
   ========================================================================== */

/* Ajustes específicos para garantir compatibilidade com o modo escuro */
body.dark-mode {
    background-color: #121212 !important;
    color: #ffffff !important;
}

body.dark-mode .pcd-ecommerce-container {
    background-color: #1e1e1e !important;
    border-color: #2d2d2d !important;
}

body.dark-mode h1,
body.dark-mode h5,
body.dark-mode .text-dark {
    color: #ffffff !important;
}

body.dark-mode .text-muted {
    color: #a0a0a0 !important;
}

body.dark-mode .border-end,
body.dark-mode .border-top,
body.dark-mode .pcd-quantity-control {
    border-color: #2d2d2d !important;
}

body.dark-mode .pcd-quantity-control input,
body.dark-mode .pcd-quantity-control button {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

/* customização do botão de bloqueio e modal no Modo Escuro */
body.dark-mode .btn-warning-admin {
    background-color: #d39e00 !important;
    border-color: #c69500 !important;
    color: #121212 !important;
}

body.dark-mode .modal-content {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #3d3d3d !important;
}

body.dark-mode .modal-header {
    background-color: #d39e00 !important;
    color: #121212 !important;
    border-bottom: none;
}

body.dark-mode .modal-footer {
    background-color: #2d2d2d !important;
    border-top: none;
}