/* 
   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;
    }
}

/* Dispositivos pequenos (menos de 768px) */
@media (max-width: 767.98px) {
    /* Banner Principal */
    .hero-banner {
        padding: 5rem 0;
    }
    
    .hero-content {
        text-align: center;
        margin: 0 auto;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    /* 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;
    }
}

/* Dispositivos muito pequenos (menos de 576px) */
@media (max-width: 575.98px) {
    /* Banner Principal */
    .hero-content h1 {
        font-size: 1.75rem;
    }
    
    .hero-content p {
        font-size: 1rem;
    }
    
    /* 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;
    }
}

/* 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: 2rem;
    }
}

/* 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);
        padding: 2rem 0;
    }
}

/* Ajustes para acessibilidade - texto maior */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}