<!-- =========================
   GOOGLE TRANSLATE SYSTEM
========================= -->

<div id="google_translate_element" style="display:none;"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'bn',
    includedLanguages: 'bn,en',
    autoDisplay: false
  }, 'google_translate_element');
}

function toggleLanguage() {
  let combo = document.querySelector(".goog-te-combo");
  if (!combo) {
    alert("Translation loading...");
    return;
  }
  if (combo.value === "bn" || combo.value === "") {
    combo.value = "en";
  } else {
    combo.value = "bn";
  }
  combo.dispatchEvent(new Event("change"));
}

function removeGoogleBar() {
  setInterval(function () {
    let banner = document.querySelector(".goog-te-banner-frame");
    if (banner) {
      banner.style.display = "none";
    }
    let frame = document.querySelector("iframe.goog-te-banner-frame");
    if (frame) {
      frame.style.display = "none";
    }
    document.body.style.top = "0px";
    document.documentElement.style.top = "0px";
  }, 500);
}
</script>

<script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
onload="removeGoogleBar()"></script>


<style media="screen">

/* =========================
   GOOGLE TRANSLATE CLEAN FIX
========================= */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
}
body {
    top: 0px !important;
    position: static !important;
}
html {
    margin-top: 0px !important;
    top: 0 !important;
}
.goog-logo-link,
.goog-te-gadget span,
.goog-te-gadget-simple img,
.goog-te-gadget-icon {
    display: none !important;
}
.goog-te-banner-frame.skiptranslate,
.skiptranslate {
    display: none !important;
}
.goog-te-gadget {
    font-size: 0 !important;
    color: transparent !important;
}
body > .skiptranslate {
    display: none !important;
}

/* =========================
   MOBILE HEADER DESIGN
========================= */

.mobile_header_three .mtopbar{
  background-color:#004bad;
}

.mobile_header_three .mlogo img{
  width:150px !important;
  height: auto !important;
}

.mobile_header_three .acbtn-tt a {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
}

.mobile_header_three .mheader {
    box-shadow: 1px 1px 2px 2px #ccc;
}

.mobile_header_three .mobile-navmenu {
    overflow-x: scroll;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.mobile_header_three .mobile-navmenu li {
    font-size: 16px;
    padding: 0 6px;
    font-weight: bold;
}

.mobile_header_three .mobile-navmenu::-webkit-scrollbar {
    display: none;
}

.mobile_header_three .mobile-navmenu {
    overflow-x: scroll;
    white-space: nowrap;
    list-style-type: none;
    margin: 0;
    display: flex;
    align-items: center;
    padding: 0;
}

.mobile_header_three .header_navmanu_icon{
    font-size: 19px;
}

/* প্রোফাইল পিকচারের জন্য স্টাইল */
.mobile_header_three .profile-img {
    width: 42px;
    height: 42px;
    border-radius: 8px !important;
    object-fit: cover;
    border: 1px solid transparent;
    background: linear-gradient(45deg, #8B0000, #FF4444, #8B0000);
    background-size: 200% 200%;
    animation: borderMagic 3s ease infinite;
    padding: 1px;
    transition: all 0.3s ease;
}

.mobile_header_three .profile-img:hover {
    transform: scale(1.05);
    border-radius: 12px !important;
}

@keyframes borderMagic {
    0% {
        background-position: 0% 50%;
        border-color: #8B0000;
    }
    50% {
        background-position: 100% 50%;
        border-color: #FF4444;
    }
    100% {
        background-position: 0% 50%;
        border-color: #8B0000;
    }
}

.mobile_header_three .writer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.3;
}

.mobile_header_three .acbtn-tt .writer-name {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF !important;
    margin: 0;
    line-height: 1.2;
}

.mobile_header_three .acbtn-tt .writer-designation {
    font-size: 9px;
    font-weight: 500;
    color: #FFFFFF !important;
    margin: 0;
    line-height: 1.2;
}

.mobile_header_three .acbtn-tt .header_profile_icon_name {
    color: #FFFFFF !important;
}
.mobile_header_three .acbtn-tt .header_profile_icon_name i {
    color: #FFFFFF !important;
}

.mobile_header_three .acbtn-tt .d-flex {
    gap: 8px;
    align-items: center;
}

@media (max-width: 480px) {
    .mobile_header_three .profile-img {
        width: 38px;
        height: 38px;
    }
    .mobile_header_three .acbtn-tt .writer-name {
        font-size: 12px;
    }
    .mobile_header_three .acbtn-tt .writer-designation {
        font-size: 8px;
    }
}

/* ========== লাইভ ক্যামেরা আইকন (ছোট + সাদা + ইয়েলো পালস) ========== */
.live-camera-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #FFFFFF !important;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    transition: all 0.3s ease;
    animation: cameraPulse 1.5s ease-in-out infinite;
}

.live-camera-icon:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.2);
}

.live-camera-icon .live-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #ff0000;
    color: white;
    font-size: 6px;
    font-weight: bold;
    padding: 1px 3px;
    border-radius: 3px;
    animation: blinkBadge 1s step-start infinite;
    font-family: monospace;
    line-height: 1.2;
    letter-spacing: 0.3px;
}

@keyframes cameraPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.6);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

@keyframes blinkBadge {
    50% {
        opacity: 0.5;
    }
}

@media (max-width: 480px) {
    .live-camera-icon {
        font-size: 12px;
        width: 24px;
        height: 24px;
        margin-right: 4px;
    }
    .live-camera-icon .live-badge {
        font-size: 5px;
        top: -3px;
        right: -4px;
        padding: 1px 2px;
        border-radius: 2px;
    }
    @keyframes cameraPulse {
        0% {
            box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.6);
        }
        70% {
            box-shadow: 0 0 0 8px rgba(255, 215, 0, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
        }
    }
}

/* ========== সার্চ আইকন সাদা ========== */
.mobile_header_three .acbtn-tt .d-flex .fa-search,
.mobile_header_three .acbtn-tt .d-flex .bi-search,
.mobile_header_three .acbtn-tt .d-flex .fas.fa-search,
.mobile_header_three .acbtn-tt .d-flex .search-icon,
.mobile_header_three .acbtn-tt .d-flex a .fa-search,
.mobile_header_three .acbtn-tt .d-flex a .bi-search,
.mobile_header_three .acbtn-tt .d-flex a .fas.fa-search,
.mobile_header_three .acbtn-tt .d-flex .header_navmanu_icon,
.mobile_header_three .acbtn-tt .d-flex i.fa-search,
.mobile_header_three .acbtn-tt .d-flex i.bi-search,
.mobile_header_three .acbtn-tt .d-flex i.fas.fa-search,
.mobile_header_three .acbtn-tt .d-flex .bi.bi-search {
    color: #FFFFFF !important;
}

.mobile_header_three .acbtn-tt .d-flex a i,
.mobile_header_three .acbtn-tt .d-flex span i {
    color: #FFFFFF !important;
}
.mobile_header_three .acbtn-tt .d-flex a,
.mobile_header_three .acbtn-tt .d-flex span {
    color: #FFFFFF !important;
}

/* মেনু আইকন ডার্ক */
.mobile_header_three .mheader .fa-solid.fa-bars {
    color: #000000;
}

/* =========================
   LOGO SHIMMER WAVE ANIMATION
========================= */
.mlogo-wrap {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 4px;
}

.mlogo-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 70%,
        transparent 100%
    );
    transform: skewX(-20deg);
    animation: logoShimmer 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes logoShimmer {
    0%   { left: -100%; }
    55%  { left: 160%; }
    100% { left: 160%; }
}

/* ========== BN/EN ট্রান্সলেট বাটন ========== */
.bn-en-btn {
    white-space: nowrap;
    cursor: pointer;
    padding: 4px 12px;
    background: #d4d4d4 !important;
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #333333 !important;
    transition: all 0.2s ease;
    line-height: 1.4;
    height: 32px;
    border: none;
    gap: 6px;
}

.bn-en-btn:hover {
    background: #c0c0c0 !important;
}

.bn-en-btn i {
    font-size: 14px;
    color: #333333 !important;
}

@media (max-width: 480px) {
    .bn-en-btn {
        padding: 4px 10px;
        font-size: 14px;
        height: 28px;
        border-radius: 3px;
    }
    .bn-en-btn i {
        font-size: 12px;
    }
}
</style>


<div class="mobile_header_three d-block d-lg-none mobile_header">

  <?php include 'includes/template-part/header/headerads.php'; ?>

  <div id="mobileNavbar" class="mtopbar pt-2 pb-1">
    <div class="container">
      <div class="row align-items-center">

        <div class="col-5">
          <div class="text-start py-1 mtopbar">
            <div class="mlogo">
              <a href="<?php echo $site_domain ?>">
                <div class="mlogo-wrap">
                  <img src="<?php echo $advancenews['Website_Logo'] ?>"
                       alt="<?php echo $advancenews['Website_title'] ?>">
                </div>
              </a>
            </div>
          </div>
        </div>

        <div class="col-7">
          <div class="text-end py-1 mtopbar">
            <div class="acbtn-tt d-flex align-items-center justify-content-end">

              <?php
                if ($advancenews['ttWriterAccountSystem'] == 'on') {
                  if (isset($writer_login) && $writer_login == true) {
                    ?>
                    <a href="<?php echo $site_domain;?>account/" class="ms-2 ps-2 border-start border-2 d-flex align-items-center text-decoration-none">
                      <img src="<?php echo userAvater($the_writer_id); ?>" class="profile-img" onerror="this.src='<?php echo $site_domain;?>assets/image/default-avatar.png'">
                      <div class="writer-info ms-1">
                        <span class="writer-name"><?php echo htmlentities($the_writer['UserName'], ENT_QUOTES, 'utf-8'); ?></span>
                        <?php if (!empty($the_writer['UserDesignation'])) { ?>
                          <span class="writer-designation"><?php echo htmlentities($the_writer['UserDesignation'], ENT_QUOTES, 'utf-8'); ?></span>
                        <?php } ?>
                      </div>
                    </a>
                    <?php
                  } else {
                    ?>
                    <div class="d-flex align-items-center">
                      <a href="https://sky-times.net/livetv" class="live-camera-icon" title="লাইভ টিভি">
                        <i class="fas fa-video"></i>
                        <span class="live-badge">LIVE</span>
                      </a>
                      <!-- সার্চ আইকন -->
                      <span class="header_navmanu_icon" style="color:#FFFFFF !important;">
                        <i class="fas fa-search" style="color:#FFFFFF !important;"></i>
                      </span>
                    </div>
                    <a href="<?php echo $site_domain;?>login/" class="ms-2 ps-2 border-start border-2 header_profile_icon_name d-flex align-items-center">
                      <i class="bi bi-person-fill me-1"></i> লগইন
                    </a>
                    <?php
                  }
                }
              ?>

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

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

  <div class="tt-white mheader">
    <div class="container">
      <nav class="codedokan_scroll_menu mobile-navmenu-wrap">

        <div class="align-items-center d-flex notob-regular justify-content-between">

          <?php include 'includes/template-part/header/prt-nav-menu-scroll.php'; ?>

          <div class="d-flex bg-white ps-3 align-items-center">

            <!-- BN/EN ট্রান্সলেট বাটন (সংবাদ পাঠান রিপ্লেস করে) -->
            <span class="bn-en-btn" onclick="toggleLanguage()">
              <i class="bi bi-translate"></i> BN / EN
            </span>

            <span class="border-start cursor-pointer p-2"
                  data-bs-toggle="offcanvas"
                  data-bs-target="#mobileMenuOffcanvas">
              <i class="fa-solid fa-bars"></i>
            </span>

          </div>

        </div>

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

</div>