/* ======================================
   HOT DOG GOURMET - RESPONSIVE STYLES
   ====================================== */

/* Tablets e dispositivos médios */
@media (max-width: 1024px) {
    .container {
        padding: 0 15px;
    }
    
    .hero-container {
        gap: 2rem;
    }
    
    .hero-title {
        font-size: 2.8rem;
    }
    
    .hero-description {
        font-size: 1.1rem;
    }
    
    .menu-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    
    .promotions-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }
    
    .payment-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
    }
    
    .contact-grid {
        gap: 2rem;
    }
    
    .footer-content {
        gap: 2rem;
    }
}

/* Dispositivos móveis grandes */
@media (max-width: 768px) {
    /* Header responsivo */
    .nav-container {
        padding: 0 15px;
    }
    
    .nav-logo span {
        font-size: 1.3rem;
    }
    
    .hamburger {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 0;
        flex-direction: column;
        background: var(--accent-white);
        width: 100%;
        height: 100vh;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 80px 0 2rem;
        z-index: 999;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-item {
        margin: 1rem 0;
    }
    
    .nav-link {
        font-size: 1.1rem;
        padding: 1rem;
        display: block;
    }
    
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    
    /* Hero section responsivo */
    .hero {
        padding: 100px 0 60px;
        min-height: auto;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    
    .hero-title {
        font-size: 2.2rem;
        margin-bottom: 1rem;
    }
    
    .hero-description {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .hero-banner {
        transform: perspective(1000px) rotateY(0deg);
    }
    
    .banner-img {
        height: 300px;
    }
    
    /* Section titles responsivos */
    .section-title {
        font-size: 2rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    /* Menu section responsivo */
    .menu-section {
        padding: 60px 0;
    }
    
    .menu-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .menu-item {
        margin: 0 auto;
        max-width: 400px;
    }
    
    .menu-item-content {
        padding: 1.5rem;
    }
    
    .menu-item-title {
        font-size: 1.2rem;
    }
    
    .menu-item-price {
        font-size: 1.3rem;
    }
    
    /* Promotions section responsivo */
    .promotions-section {
        padding: 60px 0;
    }
    
    .promotions-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .promotion-card {
        padding: 1.5rem;
    }
    
    /* Payment section responsivo */
    .payment-section {
        padding: 60px 0;
    }
    
    .payment-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
    }
    
    .payment-method {
        padding: 1.5rem;
    }
    
    .payment-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    /* Contact section responsivo */
    .contact-section {
        padding: 60px 0;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .contact-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .contact-icon {
        margin: 0 auto;
    }
    
    .contact-map {
        padding: 1.5rem;
    }
    
    .map-placeholder {
        padding: 2rem;
    }
    
    /* Footer responsivo */
    .footer {
        padding: 2rem 0 1rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .footer-section {
        margin-bottom: 1.5rem;
    }
    
    .social-links {
        justify-content: center;
    }
    
    /* Chatbot responsivo */
    .chatbot-container {
        width: 90%;
        height: 450px;
        right: 5%;
        bottom: 80px;
    }
    
    .chatbot-header {
        padding: 0.8rem;
    }
    
    .chatbot-body {
        padding: 0.8rem;
    }
    
    .chat-messages {
        padding: 0.8rem;
    }
    
    .chat-input-container {
        padding: 0.8rem;
    }
    
    .chatbot-float {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        bottom: 15px;
        right: 15px;
    }
    
    /* Cart responsivo */
    .cart-sidebar {
        width: 90%;
        right: -90%;
    }
    
    .cart-header {
        padding: 1rem;
    }
    
    .cart-body {
        padding: 1rem;
    }
    
    .cart-footer {
        padding: 1rem;
    }
    
    .cart-float {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        bottom: 70px;
        right: 15px;
    }
    
    .cart-count {
        width: 18px;
        height: 18px;
        font-size: 0.7rem;
    }
    
    /* Utility classes responsivas */
    .btn-sm {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    .quick-replies {
        padding: 0 35px !important;
    }
    
    .quick-reply-btn {
        padding: 6px 10px;
        font-size: 0.7rem;
    }
}

/* Dispositivos móveis pequenos */
@media (max-width: 480px) {
    /* Header móvel */
    .nav-logo {
        font-size: 1.2rem;
    }
    
    .nav-logo i {
        font-size: 1.5rem;
    }
    
    /* Hero móvel */
    .hero {
        padding: 90px 0 50px;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-description {
        font-size: 0.9rem;
    }
    
    .banner-img {
        height: 250px;
    }
    
    /* Section titles móveis */
    .section-title {
        font-size: 1.8rem;
    }
    
    .section-subtitle {
        font-size: 0.9rem;
    }
    
    /* Menu móvel */
    .menu-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .menu-item-content {
        padding: 1rem;
    }
    
    .menu-item-title {
        font-size: 1.1rem;
    }
    
    .menu-item-description {
        font-size: 0.9rem;
    }
    
    .menu-item-price {
        font-size: 1.2rem;
    }
    
    /* Promotions móvel */
    .promotion-card {
        padding: 1.2rem;
    }
    
    .promotion-header i {
        font-size: 1.5rem;
    }
    
    .promotion-header h3 {
        font-size: 1.2rem;
    }
    
    .promotion-body p {
        font-size: 0.9rem;
    }
    
    .new-price {
        font-size: 1.3rem;
    }
    
    /* Payment móvel */
    .payment-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .payment-method {
        padding: 1.2rem;
    }
    
    .payment-icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
    
    .payment-method h3 {
        font-size: 1.1rem;
    }
    
    .payment-method p {
        font-size: 0.9rem;
    }
    
    /* Contact móvel */
    .contact-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .contact-text h3 {
        font-size: 1.1rem;
    }
    
    .contact-text p {
        font-size: 0.9rem;
    }
    
    /* Footer móvel */
    .footer-content {
        gap: 1.5rem;
    }
    
    .footer-logo {
        font-size: 1.3rem;
    }
    
    .footer-logo i {
        font-size: 1.5rem;
    }
    
    .footer p {
        font-size: 0.9rem;
    }
    
    .footer h3 {
        font-size: 1.1rem;
    }
    
    .footer-links a {
        font-size: 0.9rem;
    }
    
    /* Chatbot móvel */
    .chatbot-container {
        width: 95%;
        height: 400px;
        right: 2.5%;
        bottom: 70px;
    }
    
    .chatbot-header {
        padding: 0.7rem;
    }
    
    .chatbot-title {
        font-size: 0.9rem;
    }
    
    .chatbot-title i {
        font-size: 1rem;
    }
    
    .chat-messages {
        padding: 0.7rem;
    }
    
    .message-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
    
    .message-content p {
        font-size: 0.8rem;
        padding: 10px 14px;
        border-radius: 16px;
    }
    
    .chat-input-container {
        padding: 0.7rem;
    }
    
    .chat-input {
        padding: 10px 14px;
        font-size: 0.9rem;
    }
    
    .chat-send {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
    
    .chatbot-float {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
        bottom: 10px;
        right: 10px;
    }
    
    /* Cart móvel */
    .cart-sidebar {
        width: 95%;
        right: -95%;
    }
    
    .cart-header {
        padding: 0.8rem;
    }
    
    .cart-header h3 {
        font-size: 1.1rem;
    }
    
    .cart-body {
        padding: 0.8rem;
    }
    
    .cart-footer {
        padding: 0.8rem;
    }
    
    .cart-float {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
        bottom: 60px;
        right: 10px;
    }
    
    .cart-item {
        padding: 0.8rem;
        gap: 0.8rem;
    }
    
    .cart-item-name {
        font-size: 0.9rem;
    }
    
    .cart-item-price {
        font-size: 0.9rem;
    }
    
    .cart-total {
        font-size: 1.1rem;
    }
    
    /* Notification móvel */
    .notification {
        top: 80px;
        right: 10px;
        left: 10px;
        padding: 0.8rem;
        font-size: 0.9rem;
        text-align: center;
        transform: translateY(-100px);
    }
    
    .notification.show {
        transform: translateY(0);
    }
}

/* Dispositivos muito pequenos */
@media (max-width: 360px) {
    .hero-title {
        font-size: 1.6rem;
    }
    
    .section-title {
        font-size: 1.6rem;
    }
    
    .chatbot-container {
        height: 350px;
    }
    
    .quick-replies {
        gap: 4px !important;
    }
    
    .quick-reply-btn {
        padding: 4px 8px;
        font-size: 0.65rem;
    }
}

/* Tablets em modo paisagem */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .promotions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .payment-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Telas grandes */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
    
    .hero-container {
        max-width: 1400px;
    }
    
    .hero-title {
        font-size: 4rem;
    }
    
    .section-title {
        font-size: 3rem;
    }
}

/* Altura da tela para dispositivos móveis */
@media (max-height: 600px) {
    .chatbot-container {
        height: 300px;
    }
    
    .hero {
        min-height: auto;
        padding: 100px 0 50px;
    }
}

/* Impressão */
@media print {
    .header,
    .chatbot-container,
    .chatbot-float,
    .cart-sidebar,
    .cart-float,
    .btn {
        display: none !important;
    }
    
    .hero,
    section {
        page-break-inside: avoid;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}