/* =========================================================
   MOBILE HERO + SEARCH (RESPONSIVE FIXES)
   Scope: Hero overlay text + search bar section only
   ========================================================= */

/* Prevent any accidental horizontal scrolling on small screens */
html,
body {
  overflow-x: hidden;
}

/* Keep the slider background covering even when content height changes */
.hero-section {
  position: relative;
  overflow: hidden;
}

/* Wrapper that holds the search card */
.hero-search-wrap {
  width: 100%;
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Tablet & below ---------- */
@media (max-width: 991.98px) {
  .hero-section {
    padding-top: 90px !important; /* room for header */
    padding-bottom: 40px !important;
    min-height: auto !important;
    height: auto !important;
  }

  #hero-content-wrapper {
    padding-left: 10px !important;
    padding-right: 10px !important;
    max-width: 100% !important; /* avoid Bootstrap container looking too narrow */
  }

  /* Title (fix clipping like your screenshot) */
  #animated-heading {
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Search card spacing */
  .premium-search-card {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  /* Make the whole search block use full available width */
  .hero-search-wrap {
    max-width: 100% !important;
  }

  /* Tabs should scroll horizontally */
  .premium-tab-wrapper {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .premium-tab-wrapper::-webkit-scrollbar {
    display: none;
  }
  #searchTabs {
    width: max-content !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  .premium-tab {
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }

  /* Pill layout: stack vertically */
  .premium-search-pill {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 16px !important;
  }
  .premium-pill-divider {
    display: none !important;
  }
  .premium-pill-section {
    width: 100% !important;
  }

  /* City selector full width */
  .premium-city-dropdown {
    width: 100%;
  }
  .premium-city-dropdown button {
    width: 100% !important;
    min-width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    justify-content: space-between;
  }
  .premium-city-dropdown .dropdown-menu {
    width: 100%;
    min-width: 100% !important;
  }

  /* Input: bordered box + keep mic inside */
  .premium-input-wrapper {
    width: 100% !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    background: #f8fafc !important;
  }
  .premium-input-wrapper input {
    font-size: 14px !important;
    padding-right: 52px !important; /* room for mic */
  }
  .premium-mic-btn {
    width: 36px !important;
    height: 36px !important;
    right: 10px !important;
  }

  /* Search button full width */
  .premium-pill-action {
    width: 100% !important;
  }
  .premium-search-btn {
    width: 100% !important;
    height: 48px !important;
    border-radius: 14px !important;
    padding: 0 16px !important;
  }

  /* Trending: scroll horizontally to avoid wrap/overflow */
  .premium-trending {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .trending-tags {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .trending-tags::-webkit-scrollbar {
    display: none;
  }
  .trending-tag {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ---------- Small phones ---------- */
@media (max-width: 575.98px) {
  #animated-heading {
    font-size: clamp(1.6rem, 7.5vw, 2.05rem) !important;
  }

  .premium-review-badge {
    font-size: 10px;
    padding: 4px 10px;
  }
}

/* ---------- Extra small ---------- */
@media (max-width: 389.98px) {
  #animated-heading {
    font-size: 1.55rem !important;
  }
  .premium-tab {
    font-size: 11px !important;
    padding: 9px 12px !important;
  }
}

/* =========================================================
   ENHANCED RESPONSIVE IMPROVEMENTS
   ========================================================= */

/* MOBILE SEARCH FORM OPTIMIZATION */
@media (max-width: 768px) {
  #homeSearchForm .row {
    row-gap: 10px !important;
    column-gap: 8px !important;
  }

  #cityDropdownBtn {
    padding: 8px 12px !important;
    height: auto !important;
    min-height: 40px !important;
    font-size: 0.8rem !important;
    border-radius: 0 !important;
  }

  #cityInput {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
    border-radius: 0 !important;
  }

  .btn-warning {
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
    height: auto !important;
    min-height: 40px !important;
    border-radius: 0 !important;
  }

  /* Tab buttons responsive */
  .btn.rounded-0 {
    padding: 8px 14px !important;
    font-size: clamp(0.75rem, 1.5vw, 0.9rem) !important;
    border-radius: 0 !important;
  }
}

/* EXTRA SMALL DEVICES OPTIMIZATION */
@media (max-width: 575px) {
  #homeSearchForm {
    padding: 12px !important;
  }

  #homeSearchForm .row {
    row-gap: 8px !important;
    column-gap: 6px !important;
  }

  /* City dropdown full width on mobile */
  #cityDropdownBtn {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 0.8rem !important;
    min-height: 38px !important;
    border-radius: 0 !important;
  }

  #selectedCityLabel {
    max-width: 80px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  #selectedCityLabel i {
    display: none;
  }

  /* Search input optimization */
  #cityInput {
    font-size: 0.8rem !important;
    padding: 10px 10px !important;
    border-radius: 0 !important;
  }

  #cityInput::placeholder {
    font-size: 0.75rem;
  }

  /* Search button */
  .btn-warning {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 0.8rem !important;
    min-height: 38px !important;
    height: auto !important;
    border-radius: 0 !important;
  }

  /* Trend buttons */
  .btn-light.btn-sm {
    padding: 6px 10px !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
  }

  .btn-light.btn-sm i {
    font-size: 0.65rem !important;
    margin-right: 4px !important;
  }

  /* Tab buttons */
  .btn.rounded-0 {
    padding: 7px 10px !important;
    font-size: 0.75rem !important;
    border-radius: 0 !important;
  }

  .btn i {
    font-size: 0.75rem !important;
  }

  /* Trending section */
  .d-flex.flex-wrap.gap-1 {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Remove voice button on very small screens or make it icon only */
  .btn-outline-secondary i {
    margin: 0 !important;
  }
}

/* ULTRA SMALL DEVICES */
@media (max-width: 380px) {
  #homeSearchForm .row {
    row-gap: 6px !important;
  }

  .bg-white.bg-opacity-8 {
    padding: 10px !important;
    border-radius: 0 !important;
  }

  #cityDropdownBtn {
    font-size: 0.75rem !important;
    padding: 8px 10px !important;
    min-height: 36px !important;
    border-radius: 0 !important;
  }

  #cityInput {
    font-size: 0.75rem !important;
    padding: 8px 8px !important;
    border-radius: 0 !important;
  }

  .btn-warning {
    font-size: 0.75rem !important;
    padding: 8px 10px !important;
    min-height: 36px !important;
    border-radius: 0 !important;
  }

  .btn-light.btn-sm {
    padding: 5px 8px !important;
    font-size: 0.65rem !important;
    border-radius: 0 !important;
  }

  .btn.rounded-0 {
    padding: 6px 10px !important;
    font-size: 0.7rem !important;
    border-radius: 0 !important;
  }

  .text-white.fw-bold.small {
    font-size: 0.7rem !important;
  }

  #selectedCityLabel i {
    display: none !important;
  }
}

/* LANDSCAPE MODE ADJUSTMENTS */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-section {
    padding-top: 60px !important;
    padding-bottom: 15px !important;
    min-height: auto !important;
  }

  #animated-heading {
    margin-bottom: 0.5rem !important;
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
  }

  #hero-content-wrapper {
    gap: 8px !important;
  }

  .fade-in-el.w-100 {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }
}

/* IMPROVE TOUCH TARGETS */
@media (pointer: coarse) {
  .btn {
    min-height: 44px;
    min-width: 44px;
  }

  #cityDropdownBtn,
  #cityInput,
  .btn-warning,
  .btn-light {
    min-height: 44px;
    border-radius: 0 !important;
  }
}

/* MOBILE LAYOUT OPTIMIZATION - STATS SECTION */
@media (max-width: 768px) {
  /* Yellow stats section styling */
  .fade-in-el.d-flex.align-items-center.justify-content-center {
    padding: 10px 14px !important;
    background: rgba(255, 193, 7, 0.12) !important;
    border-left: 3px solid #ffc107 !important;
    gap: 8px !important;
    margin: 8px auto 10px !important;
    border-radius: 4px;
  }

  /* Button navigation row - more compact */
  .d-flex.overflow-x-auto.pb-2.mb-0 {
    gap: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Tab buttons distribute evenly */
  .btn.rounded-0 {
    flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

@media (max-width: 576px) {
  /* Yellow stats section - mobile */
  .fade-in-el.d-flex.align-items-center.justify-content-center {
    padding: 8px 10px !important;
    background: rgba(255, 193, 7, 0.15) !important;
    border-left: 2px solid #ffc107 !important;
    gap: 6px !important;
    margin: 6px auto 8px !important;
  }

  .fade-in-el.d-flex.align-items-center.justify-content-center span {
    font-size: 0.8rem !important;
  }

  /* Tab buttons more compact */
  .btn.rounded-0 {
    padding: 6px 8px !important;
    font-size: 0.68rem !important;
    flex: 1;
  }

  .btn.rounded-0 i {
    font-size: 0.65rem !important;
    margin-right: 1px !important;
  }

  /* Hide text on very small buttons, show icons only if needed */
  @media (max-width: 380px) {
    .btn.rounded-0 i {
      display: inline-block !important;
    }

    .btn.rounded-0 span {
      display: none !important;
    }
  }
}

/* IMPROVE FONT RENDERING ON LOW-DPI DEVICES */
@media (max-width: 768px) {
  body,
  button,
  input,
  select {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}