/* 
   VR Hair - Estilos Responsivos
   Garantindo boa experiência em dispositivos móveis
*/



/* Tablets e dispositivos médios (menos de 992px) */
@media (max-width: 991.98px) {
    /* Cabeçalho */
    .navbar-brand .logo {
        height: 40px;
    }
    
    .navbar-icons {
        margin-left: 0;
        margin-top: 1rem;
    }
    
    .btn-salao {
        margin-left: 0;
        margin-top: 0.5rem;
    }
    
    /* Banner Principal */
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .hero-content p {
        font-size: 1.1rem;
    }
    
    /* Seções */
    .section-title {
        font-size: 2rem;
    }
    
    /* Produtos */
    .product-card {
        margin-bottom: 2rem;
    }
    
    /* Cursos */
    .course-card {
        margin-bottom: 2rem;
    }
    
    /* Filtros na página de produtos */
    .filters-container {
        margin-bottom: 2rem;
    }
    
    /* Timeline na página Sobre */
    .timeline:before {
        left: 20px;
    }
    
    .timeline-content {
        width: calc(100% - 60px);
        float: right;
    }
    
    .timeline-content:before {
        left: -20px;
    }
    
    .timeline-date {
        left: -100px;
    }
    
    .timeline-item:nth-child(even) .timeline-content {
        float: right;
    }
    
    .timeline-item:nth-child(even) .timeline-content:before {
        left: -20px;
        right: auto;
    }
    
    .timeline-item:nth-child(even) .timeline-date {
        left: -100px;
        right: auto;
    }
    
    /* Área do Salão */
    .referral-card {
        margin-bottom: 2rem;
    }
    
    /* Botão flutuante do WhatsApp - ajuste para tablets */
    .whatsapp-float-classic {
        bottom: 90px !important;
    }
    
    .whatsapp-float-classic i {
        text-decoration: none !important;
    }
}

/* Dispositivos pequenos (menos de 768px) */
@media (max-width: 767.98px) {
    /* Ocultar top-bar em telas pequenas */
    .top-bar {
        display: none !important;
    }
    
    /* Banner Principal */
    .hero-banner {
        padding: 0rem 0;
    }
    
    .hero-content {
        text-align: center;
        margin: 0 auto;
    }
    
    .hero-content h1 {
        font-size: 2rem !important;
        margin-top: 3rem;
    }
    
    /* Seções */
    section {
        padding: 3rem 0;
    }
    
    .section-title {
        font-size: 1.75rem;
        margin-bottom: 2rem;
    }
    
    /* Produtos */
    .product-image {
        height: 200px;
    }
    
    /* Timeline na página Sobre */
    .timeline-date {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        margin-bottom: 1rem;
        display: inline-block;
    }
    
    /* Rodapé */
    footer {
        text-align: center;
        padding: 3rem 0 1.5rem;
    }
    
    footer h4:after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .contact-info li {
        justify-content: center;
    }
    
    .social-icons {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .footer-links {
        margin-bottom: 2rem;
    }
    
    /* Carrinho */
    .cart-modal-content {
        width: 95%;
        max-width: none;
    }
    
    .cart-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .item-details {
        margin: 1rem 0;
    }
    
    /* Formulários */
    .form-container {
        padding: 1.5rem;
    }
    
    /* Botão flutuante do WhatsApp - ajuste para tablets */
    .whatsapp-float-classic {
        bottom: 60px !important;
    }
    
    .whatsapp-float-classic i {
        text-decoration: none !important;
    }
}

/* Dispositivos muito pequenos (menos de 576px) */
@media (max-width: 575.98px) {
    /* Banner Principal */
    .hero-content h1 {
        font-size: 1.75rem;
        text-align: left;
    }
    
    .hero-content p {
        font-size: 1rem;
        text-align: left;
    }
    
    /* Seções */
    .section-title {
        font-size: 1.5rem;
    }
    
    /* Produtos */
    .product-info h3 {
        font-size: 1.1rem;
    }
    
    .product-price {
        font-size: 1.25rem;
    }
    
    /* Botões */
    .btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
    
    /* Paginação */
    .pagination .page-link {
        padding: 0.4rem 0.75rem;
    }
    
    /* Formulários */
    .form-container h3 {
        font-size: 1.25rem;
    }
    
    /* Botão flutuante do WhatsApp - ajuste para mobile */
    .whatsapp-float-classic {
        bottom: 80px !important;
    }
    
    .whatsapp-float-classic i {
        text-decoration: none !important;
    }
}

/* Ajustes para telas grandes (mais de 1200px) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .hero-content h1 {
        font-size: 4rem;
    }
    
    .section-title {
        font-size: 3rem;
    }
}

/* Ajustes para orientação paisagem em dispositivos móveis */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-banner {
        padding: 3rem 0;
    }
    
    .hero-content h1 {
        font-size: 1.75rem;
    }
    
    .navbar {
        padding: 0.5rem 0;
    }
}

/* Ajustes para telas de alta densidade (retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Ajustes para modo escuro do sistema */
@media (prefers-color-scheme: dark) {
    /* Estes estilos serão aplicados apenas se o usuário tiver o modo escuro ativado no sistema */
    /* Não estamos implementando modo escuro completo, apenas alguns ajustes para melhor legibilidade */
    .page-banner {
        background-color: rgba(0, 0, 0, 0.8);
    }
}

/* Ajustes para acessibilidade - texto maior */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Estilos responsivos para seção CTA de cotação */
@media (max-width: 900px) {
    .cta-cotacao-content { 
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .cta-cotacao-text { 
        text-align: center;
        margin-bottom: 0;
    }
    .cta-cotacao-btn { 
        margin-left: 0; 
        margin-top: 0;
    }
}

@media (max-width: 600px) {
    .cta-cotacao-content { 
        padding: 18px 0; 
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .cta-cotacao-text { 
        text-align: center;
        margin-bottom: 0;
    }
    .cta-cotacao-text span { 
        font-size: 1.05rem; 
        display: block;
    }
    .cta-cotacao-btn { 
        font-size: 1rem; 
        padding: 12px 18px; 
        margin: 0 auto;
        display: inline-block;
    }
    .process-steps {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        margin: 0;
    }
    .process-step {
        max-width: 100vw;
        min-width: 0;
        width: 100%;
        margin: 0 0 20px 0;
        border-radius: 18px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.07);
        padding: 24px 8px 18px 8px;
    }
    .step-icon-bg {
        width: 100px !important;
        height: 100px !important;
        font-size: 3.5rem !important;
        margin-bottom: 10px;
    }
    .step-number {
        font-size: 1.5rem !important;
        min-width: 38px;
        min-height: 38px;
        line-height: 38px;
        margin-top: -18px;
    }
    .process-step h3 {
        font-size: 1.1rem;
    }
    .process-step p {
        font-size: 1rem;
    }
    .motivo-icon-bg, .motivo-icon {
        width: 64px !important;
        height: 64px !important;
        font-size: 2.5rem !important;
        background: var(--secondary-color, #bfa14a) !important;
        color: #fff !important;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 10px auto;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .motivo-icon-bg i, .motivo-icon i {
        color: #fff !important;
        font-size: 2.5rem !important;
    }
    .especialista-flex {
        flex-direction: column-reverse !important;
    }
    .especialista-info {
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }
    .especialista-btn {
        margin-left: auto;
        margin-right: auto;
        display: inline-flex;
    }
}