/* ============================================================
   Tasreea — small layout refinements on top of the original CSS
   ============================================================ */

/* Reviews carousel: let the Swiper fill the available row width at every
   screen size. The original `.swiper` is `flex: 0 1 auto`, so on wide
   screens it only takes its content width and leaves an empty gap on the
   right. `flex: 1 1 0` makes the 3 review cards evenly sized with
   consistent spacing across the full width. */
.fix-card-swiper .swiper {
  flex: 1 1 auto;
  min-width: 0;
}

/* Header navigation: the main menu (`.navbar`) now lives INSIDE the
   `.navbar-topbar` drawer so that on mobile it slides in/out with the
   hamburger toggle instead of always showing below the header.
   On desktop, keep the original two-row layout (top contact bar above
   the menu row) by stacking the drawer's children vertically. */
#ts-custom-header .navbar-topbar {
  flex-direction: column;
  align-items: stretch;
}

/* Mobile accordion for the in-drawer menu.
   Collapse every dropdown sub-menu by default and reveal only the item
   the user tapped (`.ts-open`, toggled in SiteInteractions). The chevron
   rotates to signal the expanded state. */
@media (max-width: 1160px) {
  #ts-custom-header .nav-links li .custom-mega-dropdown,
  #ts-custom-header .nav-links li .community-dropdown {
    display: none !important;
  }
  #ts-custom-header .nav-links li.ts-open .custom-mega-dropdown,
  #ts-custom-header .nav-links li.ts-open .community-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  #ts-custom-header .nav-links li > a img {
    transition: transform 0.25s ease;
  }
  #ts-custom-header .nav-links li.ts-open > a img {
    transform: rotate(180deg);
  }
  /* The pricing cards ship with inline opacity:0 / translateY (animated in
     on desktop hover). There's no hover on mobile, so force them visible
     when the section is expanded. */
  #ts-custom-header .nav-links li.ts-open .pricing-dd-grid,
  #ts-custom-header .nav-links li.ts-open .pricing-dd-card {
    opacity: 1 !important;
    transform: none !important;
  }
}