/* Mobile UI/UX Optimization - 2026-06-13 */

/* ===================================
   MOBILE HEADER IMPROVEMENTS
   =================================== */
@media (max-width: 820px) {
  .header {
    height: 64px;
  }
  
  .nav-wrap {
    height: 64px;
    gap: 12px;
    padding: 0 12px;
  }
  
  .logo img {
    width: 140px;
    max-height: 48px;
  }
  
  .menu-toggle {
    order: -1;
    margin-left: 0;
    margin-right: auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f6fb;
    border-radius: 12px;
    padding: 0;
  }
  
  .menu-toggle svg {
    width: 22px;
    height: 22px;
  }
  
  .logo {
    order: 0;
    margin: 0 auto;
  }
  
  .nav-actions {
    order: 1;
    margin-left: 0;
    gap: 8px;
  }
  
  .login-icon-mobile {
    display: flex;
    flex: 0 0 44px;
  }
  
  /* Hide desktop elements */
  .nav-actions .currency,
  .nav-actions .agent-btn {
    display: none !important;
  }

  /* Show account avatar + dropdown on mobile instead of jumping to dashboard */
  .nav-actions .account-menu {
    display: block !important;
    position: relative;
  }
  .nav-actions .account-menu .account-trigger {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    padding: 5px !important;
    border-radius: 50% !important;
    justify-content: center !important;
  }
  .nav-actions .account-menu .account-trigger-copy,
  .nav-actions .account-menu .account-chevron {
    display: none !important;
  }
  .nav-actions .account-menu .account-avatar {
    width: 36px !important;
    height: 36px !important;
  }
  /* Dropdown drops DOWN from the avatar, anchored to the right edge */
  .nav-actions .account-menu .account-dropdown {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(320px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
  
  /* Mobile menu dropdown */
  .main-menu {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 70px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15,23,42,.12);
    padding: 16px;
    flex-direction: column;
    gap: 4px;
    z-index: 100;
  }
  
  .main-menu a {
    padding: 14px 16px;
    border-radius: 10px;
    transition: background 0.2s ease;
  }
  
  .main-menu a:hover {
    background: #f4f6fb;
  }
}

/* ===================================
   HERO BANNER MOBILE
   =================================== */
@media (max-width: 820px) {
  .hero-banner {
    height: 340px !important;
    min-height: 340px !important;
  }
  
  .hero-content {
    width: calc(100% - 32px) !important;
    padding: 28px 0 90px !important;
  }
  
  .hero-badge {
    font-size: 16px !important;
    padding: 6px 18px !important;
    letter-spacing: 1px !important;
  }
  
  .hero-subtitle {
    font-size: 32px !important;
    margin-top: 12px !important;
  }
  
  .hero-discount {
    font-size: 68px !important;
  }
  
  .hero-title {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  
  .hero-banner:after {
    font-size: 72px !important;
    top: 100px !important;
    right: 8% !important;
  }
}

@media (max-width: 520px) {
  .hero-banner {
    height: 310px !important;
    min-height: 310px !important;
  }
  
  .hero-content {
    width: calc(100% - 24px) !important;
    padding: 22px 0 75px !important;
  }
  
  .hero-badge {
    font-size: 14px !important;
    padding: 5px 14px !important;
  }
  
  .hero-subtitle {
    font-size: 26px !important;
  }
  
  .hero-discount {
    font-size: 56px !important;
  }
  
  .hero-title {
    font-size: 18px !important;
  }
  
  .hero-banner:after {
    font-size: 58px !important;
    top: 90px !important;
  }
}

/* ===================================
   FLIGHT SEARCH BOX MOBILE
   =================================== */
@media (max-width: 820px) {
  .flight-box {
    width: calc(100% - 24px);
    margin-top: -32px;
    padding: 14px;
    border-radius: 16px;
  }
  
  .tabs-row {
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .tabs-row::-webkit-scrollbar {
    display: none;
  }
  
  .tab, .class-select {
    padding: 10px 14px;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .flight-form {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .field {
    height: 52px;
  }
  
  .field input,
  .field select {
    font-size: 15px;
  }
  
  .switch-btn {
    display: none;
  }
  
  .direct-only {
    grid-column: auto;
    font-size: 14px;
  }
  
  .search-btn {
    grid-column: auto;
    height: 48px;
    font-size: 16px;
  }
}

/* ===================================
   SECTION SPACING MOBILE
   =================================== */
@media (max-width: 820px) {
  .deals-section,
  .cheap-section,
  .smile-why,
  .route-links,
  .smile-partners,
  .tour-activity-section,
  .cert-section,
  .guide-preview,
  .faq-preview {
    padding: 32px 0;
  }
  
  .deals-section h2,
  .cheap-section h2,
  .smile-why h2,
  .route-links h2,
  .smile-partners h2,
  .section-title-row h2,
  .cert-section h2,
  .faq-preview h2 {
    font-size: 26px;
    margin-bottom: 18px;
  }
}

/* ===================================
   GRID LAYOUTS MOBILE
   =================================== */
@media (max-width: 820px) {
  .deal-strip,
  .flight-card-grid,
  .route-grid,
  .why-grid,
  .why-grid.four,
  .tour-grid,
  .guide-grid,
  .cert-grid2 {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  
  .partner-row.logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  
  .partner-card {
    width: 100%;
    height: 60px;
  }
}

@media (max-width: 520px) {
  .partner-row.logos {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ===================================
   GUIDES SECTION MOBILE
   =================================== */
@media (max-width: 820px) {
  .guides-section {
    padding: 32px 0;
  }
  
  .guides-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .guide-card {
    display: flex;
    flex-direction: column;
  }
  
  .guide-image {
    width: 100% !important;
    height: 200px !important;
    border-radius: 12px 12px 0 0;
  }
  
  .guide-content {
    padding: 16px;
  }
  
  .guide-category {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    color: #2f6fe8;
    background: #eef4ff;
    padding: 5px 10px;
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 10px;
  }
  
  .guide-title {
    font-size: 17px;
    line-height: 1.4;
    margin: 0 0 10px;
    font-weight: 900;
    color: #111827;
  }
  
  .guide-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #667085;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .guides-footer {
    text-align: center;
    margin-top: 24px;
  }
  
  .guides-more {
    display: inline-block;
    padding: 12px 24px;
    background: #3377e8;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    border-radius: 10px;
    font-size: 15px;
  }
}

/* ===================================
   FOOTER MOBILE
   =================================== */
@media (max-width: 820px) {
  .smiletrip-footer-replica .footer-main {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px 0;
  }
  
  .footer-brand img {
    width: 150px !important;
  }
  
  .smiletrip-footer-replica h6 {
    font-size: 15px !important;
    margin-bottom: 12px !important;
  }
  
  .smiletrip-footer-replica li {
    font-size: 13px;
  }
  
  .payment-grid-replica {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  
  .payment-grid-replica div {
    height: 46px;
    font-size: 9px;
  }
  
  .social-icons-replica {
    gap: 18px;
    margin: 12px 0 20px;
  }
}

@media (max-width: 520px) {
  .payment-grid-replica {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===================================
   TOUCH TARGET IMPROVEMENTS
   =================================== */
@media (max-width: 820px) {
  button,
  a.button,
  .tab,
  .search-btn,
  .hero-cta,
  .guides-more {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better tap feedback */
  button:active,
  a:active {
    opacity: 0.7;
  }
}

/* ===================================
   TEXT READABILITY MOBILE
   =================================== */
@media (max-width: 820px) {
  body {
    font-size: 15px;
    line-height: 1.6;
  }
  
  p {
    line-height: 1.65;
  }
  
  /* Prevent text from being too small */
  * {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* ===================================
   HORIZONTAL SCROLL PREVENTION
   =================================== */
body {
  overflow-x: hidden;
}

* {
  max-width: 100%;
}

img {
  height: auto;
}

/* ===================================
   LOADING & PERFORMANCE
   =================================== */
@media (max-width: 820px) {
  /* Reduce animations on mobile for better performance */
  .marquee-track {
    animation-duration: 35s !important;
  }
  
  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }
}