<?php if (get_theme_mod('howcan_topbar_enable', true)) : ?>
<div class="topbar border-bottom" style="background:<?php echo esc_html(get_theme_mod('howcan_topbar_bg_color'),'howcan'); ?>;">
  <div class="container">
    <div class="row px-4 d-flex flex-nowrap align-items-center">

      <!-- Left: Top Menu -->
      <div class="top-menu d-flex align-items-center col-auto">
        <?php
        wp_nav_menu(array(
          'theme_location' => 'top-menu',
          'menu_class'     => 'tp-nav d-flex gap-3',
          'container'      => false,
          'fallback_cb'    => false,
          'depth'          => 1,
        ));
        ?>
      </div>

      <!-- Right: Social Menu + Cart -->
      <div class="social-menu d-flex align-items-center ms-auto col-auto">
        <?php
        wp_nav_menu(array(
          'theme_location' => 'social-menu',
          'menu_class'     => 'nav d-flex gap-2',
          'container'      => false,
          'fallback_cb'    => false,
          'depth'          => 1,
        ));
        ?>

        <?php if ( class_exists('WooCommerce') ) : ?>
          <a href="<?php echo wc_get_cart_url(); ?>" class="topbar-cart-icon ms-3" style="position:relative; font-size:20px; color:#000; text-decoration:none;">
            🛒
            <span class="cart-count position-relative top-0 start-100 translate-middle" style="font-size:10px;">
              <?php echo WC()->cart->get_cart_contents_count(); ?>
            </span>
          </a>
        <?php endif; ?>
      </div>

    </div>
  </div>
</div>

<style>
/* মোবাইলে টপবারের সব কনটেন্ট এক লাইনে */
@media (max-width: 900px) {
  .topbar .row {
    flex-wrap: nowrap !important; /* রো ভাঙতে দেবে না */
    overflow-x: auto; /* কনটেন্ট বেশি হলে হরিজন্টাল স্ক্রল */
  }

  .topbar .top-menu,
  .topbar .social-menu {
    flex: 0 0 auto; /* এলিমেন্টগুলো inline থাকবে */
  }

  .topbar a,
  .topbar .tp-nav li,
  .topbar .nav li {
    white-space: nowrap; /* টেক্সট এক লাইনে থাকবে */
  }

  .topbar-cart-icon {
    margin-left: 10px; /* কার্ট আইকনের জন্য স্পেস */
  }

  /* optional: hide scroll bar in mobile nicely */
  .topbar .row::-webkit-scrollbar {
    display: none;
  }
}
</style>
<?php endif; ?>