/* ==================================================
   TRIPFLORIC HOMEPAGE — Additional Responsive Fixes
   Fixes for small screens (375px and below)
   ================================================== */

/* ---- Fix horizontal overflow on all sections ---- */
.home-v2 .hv2-section,
.home-v2 .hv2-section--compact {
  overflow-x: hidden;
}

/* ---- Fix hero trust badges and spacing on mobile & tablet ---- */
/* On tablets the card only rides up -30px, which leaves the single tab row
   hanging past the bottom of the photo and onto the white page background.
   Give it enough lift to stay on the image (the hero already reserves 130px
   of padding below its content at this width). */
@media (max-width: 900px) {
  .hv2-search-wrap {
    margin-top: -60px !important;
  }
}

@media (max-width: 768px) {
  .hv2-hero {
    min-height: auto !important;
    padding-top: clamp(65px, 12vw, 85px) !important;
    /* The tab bar below wraps to two rows on phones. 50px was not enough room
       for it, so the second row (Events / Family Packages) dropped onto the
       white page background, where the translucent pills washed out to grey.
       Reserve enough dark hero for the whole bar. */
    padding-bottom: 120px !important;
    justify-content: flex-start !important;
  }
  .hv2-hero-trust {
    display: none !important;
  }
  .hv2-hero-content {
    padding-bottom: 0 !important;
  }
  .hv2-hero-sub {
    margin-bottom: 14px !important;
  }
  /* Lift the card by more than the two-row tab bar's height so the entire bar
     (not just its first row) rides on the hero photo. */
  .hv2-search-wrap {
    margin-top: -100px !important;
  }
}

/* ---- Fix search tabs on mobile & tablet (2-row responsive wrap) ---- */
.hv2-tabs-break {
  display: none;
}

@media (max-width: 768px) {
  .hv2-search-wrap .hv2-search-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 8px 6px !important;
    margin-bottom: 12px !important;
    width: 100%;
    padding: 0 !important;
  }
  .hv2-search-wrap .hv2-search-tabs::-webkit-scrollbar {
    display: none;
  }
  .hv2-tabs-break {
    display: block !important;
    flex-basis: 100% !important;
    width: 100% !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .hv2-search-wrap .hv2-search-tabs button {
    flex: 1 1 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
    white-space: nowrap;
    border-radius: 999px;
    box-sizing: border-box;
  }
  .hv2-search-wrap .hv2-search-tabs button i {
    font-size: 11.5px !important;
  }
}

@media (max-width: 400px) {
  .hv2-search-wrap .hv2-search-tabs {
    gap: 6px 4px !important;
    margin-bottom: 10px !important;
  }
  .hv2-search-wrap .hv2-search-tabs button {
    font-size: 11px !important;
    padding: 7px 6px !important;
    gap: 5px !important;
  }
  .hv2-search-wrap .hv2-search-tabs button i {
    font-size: 10.5px !important;
  }
}

/* ---- Fix search form on very small screens ---- */
@media (max-width: 640px) {
  .hv2-search {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 4px;
    border-radius: 12px;
  }
  .hv2-search-field {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
  }
  .hv2-search-field:last-of-type {
    border-bottom: none;
  }
  .hv2-search-field + .hv2-search-field::before {
    display: none;
  }
  .hv2-search-field .field-label {
    font-size: 11px;
    margin-bottom: 2px;
  }
  .hv2-search-field input[type="text"],
  .hv2-search-field input[type="date"] {
    font-size: 14px;
    font-weight: 600;
  }
  .hv2-search-btn {
    grid-column: 1;
    width: 100%;
    padding: 13px;
    font-size: 14px;
    border-radius: 10px;
    margin-top: 4px;
  }
}

/* ---- Fix hero on very small screens ---- */
@media (max-width: 400px) {
  .hv2-hero {
    min-height: auto !important;
    padding-top: 60px !important;
    padding-bottom: 110px !important;
    justify-content: flex-start !important;
  }
  .hv2-hero h1 {
    /* Size comes from the fluid clamp in home.css; only the rhythm is tuned
       for phones here. */
    line-height: 1.15;
    max-width: 100%;
  }
  .hv2-hero-sub {
    font-size: 13px !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }
  .hv2-hero-tag {
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  .hv2-hero-content {
    padding-bottom: 0 !important;
  }
  .hv2-search-wrap {
    margin-top: -90px !important;
  }
  .hv2-search {
    border-radius: 10px;
    padding: 3px;
  }
  .hv2-search-field {
    padding: 8px 12px;
  }
  .hv2-search-field .field-label {
    font-size: 10px;
  }
  .hv2-search-btn {
    font-size: 13px;
    padding: 12px;
  }
}

/* ---- Fix search box on very small screens ---- */
@media (max-width: 400px) {
  .hv2-search-wrap {
    margin-bottom: 8px;
  }
  .hv2-search {
    border-radius: 10px;
    padding: 3px;
    gap: 1px;
  }
  .hv2-search-field {
    padding: 6px 10px;
  }
  .hv2-search-field .field-label {
    font-size: 10px;
    gap: 5px;
  }
  .hv2-search-field .field-value {
    font-size: 10px;
  }
  .hv2-search-btn {
    padding: 10px;
    font-size: 12px;
    border-radius: 8px;
  }
}

/* ---- Fix trust bar on very small screens ---- */
@media (max-width: 400px) {
  .hv2-trust-bar {
    padding: 10px 0;
  }
  .hv2-trust-bar-inner {
    gap: 8px;
  }
  .hv2-trust-bar-item {
    flex: 0 0 100%;
    padding: 6px 0;
  }
  .hv2-trust-bar-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .hv2-trust-bar-text strong {
    font-size: 12px;
  }
  .hv2-trust-bar-text span {
    font-size: 10px;
  }
}

/* ---- Fix scroll containers on small screens ---- */
@media (max-width: 400px) {
  .hv2-scroll-wrap,
  .hv2-scroll-container-wrap {
    margin: 0 -4px;
    padding: 0 4px;
  }
  .hv2-scroll-container {
    gap: 12px;
    padding: 4px 0 12px;
  }
  .hv2-scroll-card {
    flex: 0 0 170px;
    height: 120px;
    border-radius: 10px;
  }
  .hv2-scroll-card-body {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
  .dest-h-name {
    font-size: 12px;
  }
  .dest-h-count {
    font-size: 9px;
  }
  .dest-h-rating {
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 5px;
  }
}

/* ---- Fix tour cards on very small screens ---- */
@media (max-width: 400px) {
  .hv2-tour-card {
    border-radius: 12px;
  }
  .hv2-tour-image {
    aspect-ratio: 16/9;
  }
  .hv2-tour-badge {
    font-size: 8px;
    padding: 3px 8px;
    top: 8px;
    left: 8px;
  }
  .hv2-tour-wishlist {
    width: 28px;
    height: 28px;
    font-size: 10px;
    top: 8px;
    right: 8px;
  }
  .hv2-tour-body {
    padding: 8px 10px 10px;
  }
  .hv2-tour-body h3 {
    font-size: 12px;
    margin-bottom: 2px;
  }
  .hv2-tour-loc {
    font-size: 10px;
    margin-bottom: 4px;
  }
  .hv2-tour-rating {
    font-size: 10px;
    margin-bottom: 6px;
  }
  .hv2-tour-dur {
    font-size: 9px;
  }
  .hv2-tour-price strong {
    font-size: 12px;
  }
  .hv2-tour-price small {
    font-size: 8px;
  }
  .hv2-tour-foot {
    padding-top: 6px;
  }
}

/* ---- Fix Why Choose Us grid ---- */
@media (max-width: 400px) {
  .hv2-why-grid {
    gap: 8px;
  }
  .hv2-why-card {
    padding: 12px 10px;
    border-radius: 12px;
  }
  .hv2-why-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
    margin-bottom: 8px;
    border-radius: 8px;
  }
  .hv2-why-card h3 {
    font-size: 12px;
    margin-bottom: 2px;
  }
  .hv2-why-card p {
    font-size: 10px;
  }
}

/* ---- Fix Travel Categories grid ---- */
@media (max-width: 400px) {
  .hv2-cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .hv2-cat-card {
    padding: 12px 6px;
    border-radius: 12px;
  }
  .hv2-cat-icon {
    width: 32px;
    height: 32px;
    font-size: 13px;
    margin-bottom: 6px;
  }
  .hv2-cat-name {
    font-size: 11px;
    margin-bottom: 2px;
  }
  .hv2-cat-count {
    font-size: 9px;
  }
}

/* Promo banner sizing lives in home.css (one set of rules, measured
   breakpoints). Nothing here should re-declare it — this file loads last, so
   stale values here silently win and undo the fix. */

/* ---- Fix Testimonials ---- */
@media (max-width: 400px) {
  .hv2-testimonials-row > .hv2-testimonial-slide {
    flex: 0 0 240px;
  }
  .hv2-testimonial-card {
    padding: 16px 14px;
    border-radius: 14px;
    gap: 12px;
    min-height: 220px;
  }
  .hv2-testimonial-quote-icon {
    font-size: 32px;
    top: 10px;
    right: 14px;
  }
  .hv2-testimonial-quote {
    font-size: 13px;
    line-height: 1.6;
  }
  .hv2-testimonial-author {
    padding-top: 14px;
    gap: 10px;
  }
  .hv2-testimonial-avatar {
    width: 36px;
    height: 36px;
    border-width: 2px;
  }
  .hv2-testimonial-meta h4 {
    font-size: 13px;
  }
  .hv2-testimonial-meta span {
    font-size: 11px;
  }
}

/* ---- Fix Gallery ---- */
@media (max-width: 400px) {
  .hv2-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .hv2-gallery-tile {
    border-radius: 10px;
    aspect-ratio: 1/1;
  }
  .hv2-gallery-overlay {
    padding: 10px;
  }
  .hv2-gallery-type {
    font-size: 10px;
  }
  .hv2-gallery-name {
    font-size: 12px;
  }
  .hv2-gallery-view {
    display: none;
  }
}

/* ---- Fix Luxury Experiences ---- */
@media (max-width: 400px) {
  .hv2-lux-intro h2 {
    font-size: 20px;
  }
  .hv2-lux-intro p {
    font-size: 12px;
    margin-bottom: 16px;
  }
  .hv2-lux-cards {
    gap: 10px;
  }
  .hv2-lux-card {
    aspect-ratio: 16/10;
    border-radius: 14px;
  }
  .hv2-lux-body {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .hv2-lux-body h3 {
    font-size: 14px;
  }
  .hv2-lux-body .lux-country {
    font-size: 11px;
    margin-bottom: 3px;
  }
  .hv2-lux-body .lux-price {
    font-size: 11px;
  }
  .hv2-lux-play {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }
}

/* ---- Fix Footer ---- */
@media (max-width: 400px) {
  .hv2-footer {
    padding: 36px 0 14px;
  }
  .hv2-footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 24px;
  }
  .hv2-footer .hv2-brand {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .hv2-footer-desc {
    font-size: 12px;
    margin-bottom: 14px;
    max-width: 100%;
  }
  .hv2-footer-social {
    gap: 8px;
  }
  .hv2-footer-social a {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  .hv2-footer-col h4 {
    font-size: 13px;
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  .hv2-footer-col h4::after {
    width: 30px;
    height: 2px;
  }
  .hv2-footer-col ul {
    gap: 8px;
  }
  .hv2-footer-col a {
    font-size: 12px;
  }
  .hv2-footer-contact li {
    font-size: 12px;
    gap: 8px;
  }
  .hv2-footer-contact i {
    font-size: 13px;
  }
  .hv2-footer-bottom {
    font-size: 11px;
    padding: 16px 0;
    gap: 10px;
  }
  .hv2-footer-bottom .payments {
    gap: 12px;
  }
  .hv2-footer-bottom .payments i {
    font-size: 20px;
  }
}

/* ---- Fix Newsletter Section ---- */
@media (max-width: 400px) {
  .nl-wrapper {
    padding: 24px 16px;
    border-radius: 16px;
  }
  .nl-badge {
    font-size: 10px;
    padding: 4px 10px;
  }
  .nl-title {
    font-size: 20px;
  }
  .nl-title-highlight {
    font-size: 22px;
  }
  .nl-subtitle {
    font-size: 12px;
  }
  .nl-form-fields {
    flex-direction: column;
  }
  .nl-submit-btn {
    width: 100%;
    justify-content: center;
  }
  .nl-perks {
    flex-wrap: wrap;
    gap: 8px;
  }
  .nl-perk {
    font-size: 11px;
  }
}

/* ---- Fix navbar on very small screens ---- */
@media (max-width: 400px) {
  .hv2-navbar {
    padding: 8px 0;
  }
  .hv2-navbar.scrolled {
    padding: 6px 0;
  }
  .hv2-brand {
    font-size: 15px;
    gap: 4px;
  }
  .hv2-brand img {
    height: 24px;
  }
  .hv2-nav-right {
    gap: 4px;
  }
  .hv2-btn-login {
    font-size: 10px;
    padding: 4px 0;
  }
  .hv2-btn-signup {
    padding: 5px 10px;
    font-size: 10px;
  }
  .hv2-nav-mobile-toggle {
    font-size: 18px;
    padding: 6px;
  }
}

/* ---- Fix mobile menu ---- */
@media (max-width: 400px) {
  .hv2-mobile-menu {
    width: 260px;
    max-width: 85vw;
  }
  .hv2-mobile-menu-header {
    padding: 12px 16px;
  }
  .hv2-mobile-nav-links li a {
    font-size: 13px;
    padding: 10px 16px;
    gap: 10px;
  }
  .hv2-mobile-nav-links li a i {
    font-size: 14px;
  }
  .hv2-mobile-menu-bottom {
    padding: 12px 16px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .hv2-mobile-login,
  .hv2-mobile-signup {
    font-size: 12px;
    padding: 8px;
  }
  .hv2-mobile-user-info {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
  }
  .hv2-mobile-menu-bottom form {
    width: 100%;
  }
  .hv2-mobile-menu-bottom form .hv2-mobile-login {
    width: 100%;
    flex: none;
  }
}

/* ---- Fix mobile menu bottom (logged-in state) ---- */
@media (max-width: 540px) {
  .hv2-mobile-menu-bottom {
    flex-wrap: wrap;
  }
  .hv2-mobile-user-info {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
  }
  .hv2-mobile-menu-bottom form {
    width: 100%;
  }
  .hv2-mobile-menu-bottom form .hv2-mobile-login {
    width: 100%;
    flex: none;
  }
}

/* ---- Fix section headers ---- */
@media (max-width: 400px) {
  .hv2-section-head {
    margin-bottom: 14px;
  }
  .hv2-section-head h2 {
    font-size: 18px;
    margin-bottom: 4px;
  }
  .hv2-section-head .head-sub {
    font-size: 12px;
  }
  .hv2-view-all {
    font-size: 13px;
  }
}