/* ============================================
   Customizações Arch Member
   Data: Dezembro 2025
   Paleta de cores principal: #0c453b (Verde)
   ============================================ */

/* ==================== Variáveis CSS ==================== */
:root {
    --arch-primary: #0c453b;
    --arch-primary-light: #0e5a4d;
    --arch-primary-dark: #082f27;
    --arch-secondary: #2d9687;
    --arch-accent: #4fb3a3;
    --arch-bg-light: #f8f9fa;
    --arch-text-dark: #1a1a1a;
    --arch-text-light: #6b7280;
    
    /* Sobrescrever a cor primária padrão do sistema */
    --primary-color: #0c453b !important;
}

/* ==================== Ocultar Elementos Decorativos ==================== */
.home-section .home-icon,
.home-section .home-icon .image-1,
.home-section .home-icon .image-2,
.home-section .home-icon .image-3,
.home-section .home-contain .home-animation,
.home-section .home-contain .home-animation .shape {
    display: none !important;
}

/* ==================== Home Section Background ==================== */
.home-section {
    background: linear-gradient(135deg, #0a2f28 0%, #0c453b 50%, #0e5a4d 100%);
    position: relative;
    overflow: hidden;
}

/* Efeitos radiais sutis */
.home-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(12, 69, 59, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(45, 150, 135, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Padrão geométrico sutil no fundo */
.home-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 35px,
            rgba(255, 255, 255, 0.02) 35px,
            rgba(255, 255, 255, 0.02) 70px
        );
    pointer-events: none;
}

/* Garantir que o conteúdo fique sobre o background */
.home-section .container-fluid-lg {
    position: relative;
    z-index: 2;
}

/* Ajustes de texto para melhor contraste */
.home-section .home-contain h1 {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.home-section .home-contain p {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

/* Estilo para o slider de serviços */
.home-section .home-slider {
    position: relative;
    z-index: 2;
}

/* ==================== Botões ==================== */
.btn-solid,
.btn-primary {
    background-color: var(--arch-primary) !important;
    border-color: var(--arch-primary) !important;
    color: #ffffff !important;
}

.btn-solid:hover,
.btn-primary:hover,
.btn-solid-success:hover {
    background-color: var(--arch-primary-light) !important;
    border-color: var(--arch-primary-light) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(12, 69, 59, 0.3);
}

/* Botão Entrar Agora: cor branca e borda destacada para fundo escuro */
.btn-outline {
    color: #fff !important;
    border-color: #fff !important;
    background: rgba(12, 69, 59, 0.15);
    text-shadow: 0 1px 8px rgba(0,0,0,0.25);
}

.btn-outline:hover {
    background-color: #fff !important;
    color: var(--arch-primary) !important;
    border-color: #fff !important;
}

a {
    color: var(--arch-primary);
}

a:hover {
    color: var(--arch-primary-light);
}

.text-primary {
    color: var(--arch-primary) !important;
}

/* ==================== Links e Textos ==================== */
/* Links ativos do menu do topo: cor branca com leve sombra para contraste em fundo escuro */
.nav-link.active,
.nav-tabs .nav-link.active {
    color: #fff !important;
    border-color: var(--arch-primary) !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.25);
}

.nav-link:hover {
    color: var(--arch-primary-light) !important;
}

/* ==================== Cards e Containers ==================== */
.category-card:hover,
.service-card:hover {
    border-color: var(--arch-primary) !important;
    box-shadow: 0 4px 20px rgba(12, 69, 59, 0.15);
}

/* ==================== Formulários ==================== */
.form-control:focus {
    border-color: var(--arch-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(12, 69, 59, 0.15) !important;
}

/* ==================== Navegação ==================== */
.nav-link.active,
.nav-tabs .nav-link.active {
    color: #fff !important;
    border-color: var(--arch-primary) !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.25);
}

.nav-link:hover {
    color: var(--arch-primary-light) !important;
}

/* ==================== Badges e Status ==================== */
.badge-primary {
    background-color: var(--arch-primary) !important;
}

/* ==================== Ícones e Setas ==================== */
.iconsax path,
.iconsax svg {
    stroke: currentColor;
}

/* ==================== Swiper/Slider ==================== */
.swiper-pagination-bullet-active {
    background-color: var(--arch-primary) !important;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--arch-primary) !important;
}

/* ==================== Animações Suaves ==================== */
.btn,
.card,
.nav-link,
a {
    transition: all 0.3s ease;
}

/* ==================== Seções com Background ==================== */
.section-bg {
    background-color: var(--arch-bg-light);
}

/* ==================== Overlay de Cor da Marca nas Imagens ==================== */

/* Breadcrumb background com gradiente verde */
.breadcrumb-section {
    position: relative;
    background: linear-gradient(135deg, #0a2f28 0%, #0c453b 50%, #0e5a4d 100%) !important;
    overflow: hidden;
}

.breadcrumb-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(45, 150, 135, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(14, 90, 77, 0.15) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.breadcrumb-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 35px,
            rgba(255, 255, 255, 0.02) 35px,
            rgba(255, 255, 255, 0.02) 70px
        );
    pointer-events: none;
    z-index: 0;
}

.breadcrumb-section .container-fluid-lg {
    position: relative;
    z-index: 2;
}

.breadcrumb-section h2,
.breadcrumb-section p {
    color: #ffffff !important;
    position: relative;
    z-index: 2;
}

/* Account background com tonalidade da marca */
.account-section,
.setting-section {
    position: relative;
}

.account-section::before,
.setting-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(12, 69, 59, 0.03) 0%, rgba(45, 150, 135, 0.03) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Profile background overlay */
.profile-modal .modal-body,
.account-modal .modal-body {
    position: relative;
}

.profile-modal .modal-body::before,
.account-modal .modal-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(12, 69, 59, 0.02) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* Newsletter section com overlay */
.newsletter-section {
    position: relative;
}

.newsletter-section svg,
.newsletter-section .bg-color {
    opacity: 0.1;
}

.newsletter-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(12, 69, 59, 0.05) 0%, rgba(45, 150, 135, 0.03) 100%);
    pointer-events: none;
    z-index: 1;
}

.newsletter-section .container-fluid-lg {
    position: relative;
    z-index: 2;
}

/* Booking background */
.booking-section {
    position: relative;
}

.booking-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(12, 69, 59, 0.02), transparent);
    pointer-events: none;
}

/* Provider section background */
.provider-section {
    position: relative;
}

.provider-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(12, 69, 59, 0.05) 0%, rgba(14, 90, 77, 0.03) 100%);
    pointer-events: none;
}

/* Imagens de avatar e perfil com borda da marca */
.avatar-img,
.profile-avatar,
.user-avatar {
    border: 2px solid rgba(12, 69, 59, 0.1);
    transition: border-color 0.3s ease;
}

.avatar-img:hover,
.profile-avatar:hover,
.user-avatar:hover {
    border-color: var(--arch-primary);
}

/* Cards com destaque visual */
.service-card,
.provider-card,
.category-card {
    position: relative;
    overflow: hidden;
}

.service-card::before,
.provider-card::before,
.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(to bottom, var(--arch-primary), var(--arch-primary-light));
    transition: height 0.3s ease;
}

.service-card:hover::before,
.provider-card:hover::before,
.category-card:hover::before {
    height: 100%;
}

/* ==================== SVG Colors Override ==================== */

/* Forçar cor da marca nos SVGs decorativos */
svg path[fill*="var(--primary-color)"],
svg path[fill="var(--primary-color)"] {
    fill: var(--arch-primary) !important;
}

/* SVGs de dots */
svg#dots path,
.home-icon svg path {
    fill: var(--arch-primary) !important;
}

/* Newsletter SVG */
svg#newsletter-bg path[fill*="var(--primary-color)"] {
    fill: var(--arch-primary) !important;
}

/* Account background SVG */
svg#accountBg path {
    fill: var(--arch-primary) !important;
    opacity: 0.05;
}

/* ==================== Imagens com Filtro de Cor ==================== */

/* Aplicar tonalidade verde nas imagens decorativas */
.decorative-img,
.pattern-img {
    filter: sepia(0.3) hue-rotate(120deg) saturate(1.2);
}

/* Dots e elementos decorativos */
img[src*="Dots.png"],
img[src*="dots.png"],
img[src*="ellipse.png"],
img[src*="circle.png"] {
    filter: sepia(0.5) hue-rotate(120deg) saturate(1.5);
    opacity: 0.8;
}

/* ==================== Header Active State ==================== */
header.active {
    background: linear-gradient(135deg, #082f27 0%, #0c453b 100%) !important;
}

/* ==================== Newsletter Content Override ==================== */
.newsletter-section .newsletter-content {
    background: linear-gradient(135deg, #0c453b 0%, #0e5a4d 50%, #2d9687 100%) !important;
}

/* ==================== Expert Section Override ==================== */
.expert-section {
    background: linear-gradient(135deg, #0a2f28 0%, #0c453b 50%, #0e5a4d 100%) !important;
}

/* ==================== Garantir que textos em backgrounds escuros sejam brancos ==================== */
.newsletter-section .newsletter-detail h2,
.newsletter-section .newsletter-detail p,
.expert-section h2,
.expert-section p,
.total-balance p,
.total-balance h3,
.account-details-box *,
.profile-bg * {
    color: #ffffff !important;
    position: relative;
    z-index: 2;
}

/* ==================== Smooth Transitions ==================== */
header,
.newsletter-content,
.expert-section,
.total-balance,
.account-details-box {
    transition: all 0.3s ease;
}

/* Pulser para botão de localização */
@keyframes pulser {
    0% {
        box-shadow: 0 0 0 0 rgba(45, 150, 135, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(45, 150, 135, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(45, 150, 135, 0);
    }
}
.location-btn.pulser {
    animation: pulser 2s cubic-bezier(0.66, 0, 0, 1) 0s 5;
    z-index: 1001 !important;
    position: relative;
    outline: 0 !important;
    border-radius: 8px;
}