/* ===== COMPREHENSIVE MOBILE OPTIMIZATION ===== */ /* Base Mobile Styles */ @media (max-width: 1024px) { .container { padding: 0 15px; } } @media (max-width: 768px) { * { box-sizing: border-box; } body { font-size: 14px; } .container { padding: 0 15px; max-width: 100%; } /* Header & Navigation */ .header { padding: 12px 0; } .header-content { padding: 0 15px; } .logo { font-size: 20px; } .back-btn { font-size: 14px; } /* Hero Sections */ .hero { height: 50vh; padding: 0 15px; } .trip-hero { height: 45vh; padding-bottom: 25px; } .hero-title { font-size: 28px; margin-bottom: 15px; } .hero-subtitle { font-size: 16px; margin-bottom: 20px; } .trip-title { font-size: 28px; margin-bottom: 12px; } .trip-meta { flex-direction: column; gap: 10px; font-size: 12px; } .hero-badge { font-size: 12px; padding: 4px 12px; } /* Layout */ .trip-layout { flex-direction: column; gap: 20px; padding: 30px 0; } .trip-main { flex: 1; } .trip-sidebar { flex: 1; } /* Cards & Containers */ .viator-card { position: relative; top: auto; margin-top: 20px; } .section-card { padding: 20px; margin-bottom: 15px; } .card { margin-bottom: 15px; } .card-img { height: 180px; } .card-body { padding: 15px; } .card-title { font-size: 18px; margin-bottom: 10px; } .card-text { font-size: 13px; margin-bottom: 12px; } /* Tabs */ .tabs-header { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tab-btn { font-size: 13px; padding: 12px 15px; min-width: 80px; } .tab-content { padding: 20px; } /* Modals */ .modal { padding: 10px; } .modal-content { width: 95%; max-width: 95vw; margin: 20% auto; } .modal-header { padding: 20px; } .modal-body { padding: 20px; } .close-modal { font-size: 24px; left: 15px; top: 15px; } /* Calendar */ .calendar-grid { grid-template-columns: repeat(7, 1fr); gap: 5px; } .day { padding: 8px; font-size: 11px; border-radius: 6px; } /* Forms & Inputs */ input, select, textarea { font-size: 16px !important; padding: 12px 10px !important; width: 100%; border-radius: 8px; } /* Buttons */ .btn-viator { padding: 12px; font-size: 14px; } .btn-next { padding: 14px; font-size: 15px; } .btn-luxury { padding: 12px 20px; font-size: 14px; } .btn-primary { padding: 12px 20px; font-size: 14px; } .btn-confirm { padding: 14px; font-size: 15px; } /* Text Sizing */ .info-title { font-size: 22px; margin-bottom: 15px; } .info-text { font-size: 14px; margin-bottom: 15px; } h1 { font-size: 24px; } h2 { font-size: 20px; } h3 { font-size: 18px; } h4 { font-size: 16px; } /* Grids */ .grid { grid-template-columns: 1fr; gap: 15px; } .about-grid { grid-template-columns: 1fr; gap: 20px; } .services-grid { grid-template-columns: 1fr; gap: 15px; } .footer-grid { grid-template-columns: 1fr; gap: 20px; } /* Sections */ .section { padding: 30px 0; } .section-title { font-size: 22px; margin-bottom: 30px; } /* Lists */ .highlights-list li { font-size: 14px; margin-bottom: 12px; } .itinerary-step { margin-bottom: 20px; padding-right: 15px; } .itinerary-step h3 { font-size: 16px; margin-bottom: 8px; } /* Checkout */ .checkout-header h1 { font-size: 20px; } .checkout-layout { grid-template-columns: 1fr; gap: 15px; } .summary-sidebar { position: relative; top: auto; } .form-grid { grid-template-columns: 1fr; } .form-group.full { grid-column: span 1; } .method-card { flex-direction: column; align-items: flex-start; } .method-info { width: 100%; } /* Success Page */ .success-header { padding: 30px 20px; } .success-header h1 { font-size: 22px; } .success-icon { width: 60px; height: 60px; font-size: 28px; } .success-body { padding: 25px 20px; } .info-grid { grid-template-columns: 1fr; gap: 15px; } .info-card { padding: 15px; } .info-card h4 { font-size: 15px; } .action-buttons { flex-direction: column; gap: 10px; } /* Floating Buttons */ .whatsapp-btn { width: 50px; height: 50px; bottom: 20px; right: 20px; font-size: 24px; } .floating-btn { width: 50px; height: 50px; font-size: 24px; } /* Traveller Controls */ .traveller-row { padding: 15px 0; } .quantity-control { gap: 12px; } .qty-btn { width: 30px; height: 30px; font-size: 16px; } .qty-val { font-size: 16px; } /* Summary */ .summary-box { padding: 20px; margin-top: 15px; } .summary-item { font-size: 13px; margin-bottom: 8px; } .summary-total { font-size: 18px; margin-top: 12px; padding-top: 12px; } } /* Extra Small Devices (480px and below) */ @media (max-width: 480px) { .container { padding: 0 12px; } body { font-size: 13px; } /* Header */ .header { padding: 10px 0; } .logo { font-size: 18px; } .back-btn { font-size: 12px; } /* Hero */ .hero { height: 40vh; } .trip-hero { height: 35vh; padding-bottom: 20px; } .hero-title { font-size: 22px; } .trip-title { font-size: 22px; } .trip-meta { font-size: 11px; gap: 8px; } /* Tabs */ .tab-btn { font-size: 11px; padding: 10px 12px; min-width: 70px; } .tab-content { padding: 15px; } /* Modals */ .modal-content { width: 98%; margin: 30% auto; } .modal-body { padding: 15px; } .day { padding: 5px; font-size: 9px; } /* Forms */ input, select, textarea { font-size: 16px !important; padding: 10px 8px !important; } /* Buttons */ .btn-viator { padding: 10px; font-size: 13px; } .btn-next { padding: 12px; font-size: 14px; } .btn-luxury { padding: 10px 15px; font-size: 13px; } .btn-confirm { padding: 12px; font-size: 13px; } /* Text */ .info-title { font-size: 18px; margin-bottom: 12px; } .info-text { font-size: 13px; margin-bottom: 12px; } h1 { font-size: 20px; } h2 { font-size: 18px; } h3 { font-size: 16px; } /* Sections */ .section { padding: 20px 0; } .section-title { font-size: 18px; margin-bottom: 20px; } /* Lists */ .highlights-list li { font-size: 13px; margin-bottom: 10px; } .itinerary-step { margin-bottom: 15px; padding-right: 12px; } .itinerary-step h3 { font-size: 15px; margin-bottom: 6px; } /* Checkout */ .checkout-header h1 { font-size: 18px; } .progress-bar { gap: 10px; } .step-num { width: 30px; height: 30px; font-size: 12px; } /* Success */ .success-header { padding: 20px 15px; } .success-header h1 { font-size: 18px; } .success-icon { width: 50px; height: 50px; font-size: 24px; } .success-body { padding: 20px 15px; } .info-card { padding: 12px; } .info-card h4 { font-size: 13px; } .action-buttons { gap: 8px; } /* Floating */ .whatsapp-btn { width: 45px; height: 45px; font-size: 20px; } /* Traveller */ .traveller-row { padding: 12px 0; } .qty-btn { width: 28px; height: 28px; font-size: 14px; } /* Summary */ .summary-box { padding: 15px; } .summary-item { font-size: 12px; margin-bottom: 6px; } .summary-total { font-size: 16px; } } /* Very Small Devices (below 360px) */ @media (max-width: 360px) { .container { padding: 0 10px; } .hero { height: 35vh; } .trip-hero { height: 30vh; } .hero-title { font-size: 20px; } .trip-title { font-size: 20px; } .tab-btn { font-size: 10px; padding: 8px 10px; } .day { padding: 4px; font-size: 8px; } input, select { font-size: 14px !important; } .btn-viator { padding: 8px; font-size: 12px; } .info-title { font-size: 16px; } .info-text { font-size: 12px; } .whatsapp-btn { width: 40px; height: 40px; font-size: 18px; } }