/* ============================================================
   Farovu - Responsive Overrides
   Loaded AFTER css/main-C1kenaJz.css on every page.
   Theme base is desktop-first (170px section paddings, no
   mobile overrides); this file compacts everything.
   ============================================================ */

/* ------------------------------------------------------------
   GLOBAL 0 - small-screen safety net
   The theme was authored desktop-first and contains several fixed
   width controls.  Keep visual overflow inside decorative sections,
   but never allow it to create a horizontal page scroll.
   ------------------------------------------------------------ */
html {
  overflow-x: clip;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

@media (max-width: 767.98px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    --bs-gutter-x: 2rem;
  }

  /* Fixed side menu is 400px in the desktop design. */
  #sideMenuOffcanvas {
    width: min(400px, 100vw);
  }

  /* Long page names and generated trip names must stay readable. */
  .breadcrumb-section .breadcrumb-content ul {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .breadcrumb-section .breadcrumb-content ul li,
  .breadcrumb-section .breadcrumb-content ul li a {
    overflow-wrap: anywhere;
  }

  /* Preserve tables rather than compressing their cells into an
     unreadable layout. The user can swipe the local table area. */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs,
  .nav-pills,
  .product-details-tab-navs {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav-tabs::-webkit-scrollbar,
  .nav-pills::-webkit-scrollbar,
  .product-details-tab-navs::-webkit-scrollbar {
    display: none;
  }

  .nav-tabs .nav-link,
  .nav-pills .nav-link,
  .product-details-tab-navs .nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 575.98px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    --bs-gutter-x: 1.5rem;
  }

  /* Make dialogs, offcanvas panels and form actions usable down to
     320px without changing their desktop proportions. */
  .modal-dialog {
    margin: 0.75rem;
  }

  .modal-content {
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
  }

  .btn-group,
  .btn-toolbar {
    flex-wrap: wrap;
  }
}

/* ------------------------------------------------------------
   GLOBAL 1 - vertical rhythm
   Theme: section { padding: 170px 0 150px } (no mobile override)
   ------------------------------------------------------------ */
@media (max-width: 1199.98px) {
  section {
    padding-top: 120px;
    padding-bottom: 110px;
  }
}

@media (max-width: 991.98px) {
  section {
    padding-top: 96px;
    padding-bottom: 88px;
  }
}

@media (max-width: 767.98px) {
  section {
    padding-top: 80px;
    padding-bottom: 72px;
  }
}

@media (max-width: 575.98px) {
  section {
    padding-top: 64px;
    padding-bottom: 56px;
  }

  .pt-100 {
    padding-top: 64px;
  }
}

/* ------------------------------------------------------------
   GLOBAL 2 - divider spacers
   Theme base: .divider { height: 60px } (min-width only grows it)
   Pages carry 8-25 dividers; compact on small screens.
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .divider {
    height: 40px;
  }

  .divider-sm {
    height: 32px;
  }
}

/* ------------------------------------------------------------
   GLOBAL 3 - section-heading
   Theme: .section-heading { padding-top: 70px }
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .section-heading {
    padding-top: 40px;
  }
}

/* ------------------------------------------------------------
   GLOBAL 4 - breadcrumb banner
   Theme: content padding-top: 112px (fixed header clearance)
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .breadcrumb-section .breadcrumb-content {
    padding-top: 96px;
  }
}

@media (max-width: 575.98px) {
  .breadcrumb-section .breadcrumb-content {
    padding-top: 88px;
  }
}

/* ------------------------------------------------------------
   INDEX.HTML - hero-section-four (also .hero-four)
   Theme: .hero-four { padding: 220px 0 150px }
   ------------------------------------------------------------ */
@media (max-width: 1199.98px) {
  .hero-four {
    padding: 200px 0 110px;
  }
}

@media (max-width: 991.98px) {
  .hero-four {
    padding: 170px 0 90px;
  }
}

@media (max-width: 767.98px) {
  .hero-four {
    padding: 140px 0 72px;
  }

  /* Right thumbnail rail collides with content on small screens;
     prev/next buttons (.background-slider-nav) remain visible. */
  .hero-four .hero-navigation {
    display: none;
  }

  .hero-four .hero-img2 .play-video-btn .icon {
    width: 48px;
    height: 48px;
    border-width: 4px;
  }
}

@media (max-width: 575.98px) {
  .hero-four {
    padding: 120px 0 56px;
  }

  .hero-four .hero-content p {
    font-size: 16px;
  }

  .hero-four .hero-content .btn {
    width: 100%;
  }

  .hero-four .hero-content h1,
  .hero-content h1 {
    font-size: clamp(2rem, 10vw, 2.65rem);
    line-height: 1.12;
  }
}

/* ------------------------------------------------------------
   INDEX.HTML - premium about block (inline styles, page-scoped)
   Theme inline: .premium-heading 72px -> 56 (<=1199) -> 48 (<=991)
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .premium-heading {
    font-size: 38px !important;
    letter-spacing: -1px !important;
  }

  .premium-paragraph {
    font-size: 16px !important;
  }
}

@media (max-width: 575.98px) {
  .premium-heading {
    font-size: 32px !important;
  }

  .premium-btn {
    width: 100%;
    height: 52px;
  }

  .premium-image-wrapper .middle-sm-img {
    width: 72px !important;
    height: 72px !important;
  }
}

/* ------------------------------------------------------------
   INDEX.HTML - trending-section
   Theme inline: padding 100px 0 90px (inline block compacts <=575)
   ------------------------------------------------------------ */
@media (max-width: 991.98px) and (min-width: 576px) {
  #trending-section {
    padding: 84px 0 72px;
  }
}

@media (max-width: 575.98px) {
  #trending-section {
    padding: 64px 0 48px;
  }

  #trending-section .trending-card-media {
    height: 190px !important;
  }
}

/* ------------------------------------------------------------
   INDEX.HTML - features/destination section
   Inline block already compacts <=991; add the extra 220px
   bottom only on desktop (kept) - handled inline. Nothing here.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   INDEX.HTML - premium testimonial cards
   Theme inline: .premium-testimonial-card { padding: 40px }
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .premium-testimonial-card {
    padding: 28px 22px !important;
  }

  .premium-testimonial-card p.testimony {
    font-size: 16px !important;
  }

  .premium-cta-block h3 {
    font-size: 28px !important;
  }
}

/* ------------------------------------------------------------
   INDEX.HTML - gallery/news grids (Bootstrap col- classes stack;
   tighten gap spacing on small screens)
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .gallery-section-four .gallery-img,
  .news-section-four .news-card {
    margin-bottom: 8px;
  }
}

/* ------------------------------------------------------------
   DISCOVER.HTML - search bar + CTA banner (inline-styled)
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .discover-searchbar-wrap .d-flex,
  .discover-searchbar-wrap div[style*="flex"] {
    flex-wrap: wrap;
    gap: 8px;
  }

  .discover-filters {
    justify-content: flex-start !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .discover-filters .filter-btn {
    flex-shrink: 0;
  }

  .discover-cta-banner {
    padding: 40px 20px !important;
    margin-top: 40px !important;
  }

  .discover-cta-banner h2 {
    font-size: 24px !important;
  }

  .discover-cta-banner p {
    font-size: 14px !important;
  }

  .discover-search-box input,
  .discover-search-box .form-control {
    min-width: 0;
  }
}

/* ------------------------------------------------------------
   TRIP-DETAIL.HTML - gated funnel + owner card + activity list
   (Page already compacts trip-hero to 260px at <=575; extend
   the middle range and tighten smaller cards.)
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .trip-hero {
    /* trip-detail.html defines the desktop height in a later page
       stylesheet, so this needs priority at the tablet breakpoint. */
    height: 320px !important;
  }
}

@media (max-width: 575.98px) {
  .trip-hero {
    height: 260px !important;
  }

  .trip-hero .trip-hero-overlay {
    padding: 28px 18px 18px;
  }

  .trip-hero .trip-hero-overlay .meta {
    gap: 6px;
    font-size: 12px;
  }

  .trip-hero .hero-pill {
    padding: 5px 10px;
    font-size: 11px;
  }

  .trip-owner-card {
    padding: 16px;
  }

  .trip-owner-card img,
  .trip-owner-card .owner-placeholder {
    width: 44px;
    height: 44px;
  }

  .trip-actions {
    width: 100%;
    justify-content: space-between;
  }

  .trip-actions .btn {
    flex: 1;
    padding: 10px 14px;
    font-size: 13px;
  }

  .day-card {
    padding: 18px 14px;
  }

  .day-card-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .activity-item {
    gap: 10px;
    padding: 11px;
  }

  .activity-detail {
    min-width: 0;
  }

  .activity-detail strong,
  .activity-detail p {
    overflow-wrap: anywhere;
  }

  .section-title-sm {
    font-size: 19px;
  }

  .gated-funnel-actions .btn-signup,
  .gated-funnel-actions .btn-login {
    width: 100%;
    padding: 13px 20px;
  }
}

/* ------------------------------------------------------------
   ABOUT.HTML - video section
   Theme: .video-section { height: 700px } -> compact
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .video-section {
    height: 480px !important;
  }
}

@media (max-width: 767.98px) {
  .video-section {
    height: 380px !important;
  }
}

@media (max-width: 575.98px) {
  .video-section {
    height: 300px !important;
  }
}

/* ------------------------------------------------------------
   ABOUT.HTML - single-video-cta row (50% wide flex items)
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .single-video-cta {
    width: 100% !important;
    flex: 0 0 100% !important;
    padding: 20px !important;
  }
}

/* ------------------------------------------------------------
   COMMON - buttons with inline icons in hero/CTA blocks
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .hero-content .btn,
  .cta-content .btn,
  .breadcrumb-section .btn {
    white-space: normal;
  }
}

/* ------------------------------------------------------------
   FAQ ACCORDION (faqs, about, booking-detail, expense-split,
   itinerary, smart-collaboration, travel-wallet, trip-wrapped)
   Theme: .faq-accordion .accordion-item { margin-right: 85px }
   -> fixed desktop offset wastes width on mobile
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .faq-accordion .accordion-item {
    margin-right: 0;
  }
}

/* ------------------------------------------------------------
   TOURLY FILTER NAV (index features tabs)
   Theme: inline-flex, 5 links -> horizontal scroll on mobile
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .tourly-filter-nav {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tourly-filter-nav::-webkit-scrollbar {
    display: none;
  }

  .tourly-filter-nav .nav-link {
    white-space: nowrap;
    padding: 12px 14px;
  }
}

/* ------------------------------------------------------------
   TESTIMONIAL NAVIGATION (testimonials, expense-split,
   itinerary, smart-collaboration, travel-wallet, trip-wrapped)
   Theme: padding-top: 60px / bottom: 40px -> compact
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .testimonial-navigation-container {
    padding-top: 32px;
    padding-bottom: 20px;
  }
}

/* ------------------------------------------------------------
   BLOG WIDGET + TAG SHARE (blog-post, trip-detail)
   Theme: .blog-widget { padding: 40px 36px },
          .tag-share-wrapper { gap: 48px } -> compact
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .blog-widget {
    padding: 24px 18px;
  }

  .tag-share-wrapper {
    gap: 20px;
  }
}

/* ------------------------------------------------------------
   HOTEL OWNER (guider-info)
   Theme: .hotel-owner img { 200px } -> compact on mobile
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .hotel-owner img {
    width: 140px;
    height: 140px;
  }
}

/* ------------------------------------------------------------
   VIEW IN MAP (booking-detail)
   Theme: iframe { height: 458px } -> compact on mobile
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .view-in-map iframe {
    height: 300px;
  }
}

/* ------------------------------------------------------------
   HOTEL META INFO CARD (booking-detail)
   Theme: padding: 30px -> compact on mobile
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .hotel-meta-info-card {
    padding: 20px;
  }

  .hotel-details-header a .icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

/* ------------------------------------------------------------
   COMMENT IMAGE (blog-post)
   Theme: 70px square -> compact on small screens
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .single-comment .d-flex {
    gap: 12px !important;
  }

  .comment-img img {
    width: 48px;
    max-width: 48px;
    flex: 0 0 48px;
  }
}

/* ------------------------------------------------------------
   SHARED COMPONENTS - cards, forms, footer and content blocks
   These selectors are deliberately component-scoped so desktop and
   tablet layouts retain their original composition.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .footer-widget,
  .footer-content,
  .newsletter-content,
  .cta-content,
  .contact-content {
    min-width: 0;
  }

  .newsletter-form,
  .subscribe-form,
  .search-form,
  .contact-form {
    max-width: 100%;
  }

  .timeline-item {
    gap: 1rem;
  }

  .timeline-item:before {
    left: 22px;
  }

  .timeline-item .timeline-icon {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }

  .single-comment,
  .single-product-review {
    min-width: 0;
  }

  .single-comment .comment-content,
  .single-product-review > div:last-child {
    min-width: 0;
  }
}

@media (max-width: 575.98px) {
  .section-heading h2,
  .section-heading .h2 {
    font-size: clamp(1.8rem, 8vw, 2.35rem);
    line-height: 1.18;
  }

  .cta-content h2,
  .cta-content .h2 {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    line-height: 1.2;
  }

  .newsletter-form,
  .subscribe-form,
  .search-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .newsletter-form .btn,
  .subscribe-form .btn,
  .search-form .btn {
    width: 100%;
  }

  .faq-accordion .accordion-button,
  .faq-accordion.style-three .accordion-item .accordion-button {
    padding: 16px 48px 16px 16px;
    font-size: 16px;
    line-height: 1.35;
  }

  .faq-accordion .accordion-body,
  .faq-accordion.style-three .accordion-item .accordion-body {
    padding: 16px;
  }

  .timeline-item .timeline-content {
    padding-bottom: 24px;
  }

  .timeline-item:before {
    left: 22px;
  }

  .pricing-plan-card .price-value,
  .pricing-plan-card {
    width: 100%;
  }

  .cart-table {
    min-width: 620px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}