/* =============================================================
   হেডার মেনু স্টাইল — header-menu.css
   ============================================================= */

.cp-header {
  --h-green:   #1f5b2c;
  --h-green-2: #3f8a4c;
  --h-wa:      #1fa955;
  --h-wa-2:    #33dd75;
  --h-cta:     #e04b32;
  --h-cta-2:   #f06040;
  --h-neu-btn: 0 2px 0 rgba(20,60,30,.35), 0 5px 12px rgba(20,60,30,.16),
               -3px -3px 8px rgba(255,255,255,.9), inset 0 1px 0 rgba(255,255,255,.28);
}

/* হেডার মাউন্ট র‍্যাপারকে স্টিকি করতে হবে, নাহলে ভিতরের কন্টেন্ট প্যারেন্ট ছাড়িয়ে স্টিক করতে পারবে না */
[data-cp-mount="header-menu"] {
  position: sticky;
  top: 0;
  z-index: var(--cp-z-header, 90);
}
.cp-header { position: relative; width: 100%; }

.cp-header-bar {
  background: rgba(255,249,238,.96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(36,92,32,.1);
  transition: box-shadow .3s, transform .22s ease;
}
.cp-header-bar.is-scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.12); }

@media (max-width: 900px) {
  .cp-header.cp-header-is-hidden {
    transform: translate3d(0, -110%, 0);
    pointer-events: none;
    transition: transform .22s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cp-header, .cp-header-bar { transition-duration: .01ms !important; }
}

.cp-header-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 16px;
  min-height: 58px; display: flex; align-items: center; gap: 10px;
}

.cp-header-brand {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; flex-shrink: 0;
  padding: 5px 12px 5px 5px; border-radius: 14px;
  background: linear-gradient(145deg, #f6f8fc, #e7ecf2);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.9),
              4px 4px 10px rgba(160,171,188,.18), -4px -4px 10px rgba(255,255,255,.8);
}
.cp-header-brand img { width: 44px; height: 34px; object-fit: contain; }
.cp-header-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.cp-header-brand__text strong {
  color: var(--h-green); font-size: 18px;
  font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -.02em;
}
.cp-header-brand__text small {
  font-family: var(--cp-font-bn); color: var(--cp-muted); font-size: 13px;
}

.cp-header-marquee {
  flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap;
  color: var(--h-green); font-family: var(--cp-font-bn);
  font-size: 15px; font-weight: 800;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}
.cp-header-marquee span {
  display: inline-block; min-width: 100%; padding-left: 100%;
  animation: cpMarquee 16s linear infinite;
}
@keyframes cpMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@media (max-width: 1100px) { .cp-header-marquee { display: none; } }

.cp-header-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cp-header-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 6px 14px; border-radius: 10px;
  color: var(--h-green); font-family: var(--cp-font-bn);
  font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
  background: linear-gradient(145deg, #fbfcfe, #e8edf3);
  box-shadow: 0 2px 0 rgba(150,162,180,.28), 0 4px 10px rgba(120,132,152,.12),
              -3px -3px 8px rgba(255,255,255,.98), inset 0 1px 0 #fff;
  transition: .18s;
}
.cp-header-nav a:hover, .cp-header-nav a.is-active {
  color: #fff; background: linear-gradient(145deg, var(--h-green-2), var(--h-green));
  transform: translateY(-1px);
}
.cp-nav-tracking {
  background: linear-gradient(145deg, #fffae8, #f5edcc) !important;
  color: #8a6000 !important; border: 1px solid #e0c86a;
}
.cp-nav-tracking:hover {
  background: linear-gradient(145deg, #e8a800, #c88000) !important;
  color: #fff !important; border-color: transparent;
}
@media (max-width: 900px) { .cp-header-nav { display: none; } }

.cp-header-actions {
  display: flex; align-items: center; gap: 7px;
  flex-shrink: 0; margin-left: auto;
}
.cp-header-order {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 6px 16px; border-radius: 10px; color: #fff;
  background: linear-gradient(145deg, var(--h-green-2), var(--h-green));
  font-size: 15px; font-weight: 800; font-family: var(--cp-font-bn);
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--h-neu-btn); transition: .18s;
}
.cp-header-order:hover { transform: translateY(-1px); }
.cp-header-wa {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 6px 16px; border-radius: 10px; color: #fff;
  background: linear-gradient(145deg, var(--h-wa-2), var(--h-wa));
  font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap;
  box-shadow: var(--h-neu-btn); transition: .18s;
}
.cp-header-wa:hover { transform: translateY(-1px); }

.cp-header-wa-mob {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; color: #fff;
  background: linear-gradient(145deg, var(--h-wa-2), var(--h-wa));
  text-decoration: none; box-shadow: var(--h-neu-btn);
}

.cp-desk-only { display: inline-flex; }
.cp-mob-only  { display: none; }

.cp-menu-toggle {
  display: none; flex-direction: column; justify-content: center;
  gap: 4px; width: 36px; height: 36px; padding: 8px;
  border-radius: 9px; border: none; cursor: pointer;
  background: linear-gradient(145deg, #f6f8fc, #e7ecf2);
  box-shadow: 4px 4px 10px rgba(160,171,188,.2), -4px -4px 10px rgba(255,255,255,.8);
}
.cp-menu-toggle span {
  display: block; height: 2px; border-radius: 2px; background: var(--h-green);
  transition: transform .18s, opacity .18s;
}
.cp-menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cp-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.cp-menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .cp-desk-only { display: none !important; }
  .cp-mob-only  { display: inline-flex !important; }
  .cp-header-wa-mob { display: inline-flex; }
  .cp-menu-toggle   { display: flex; }
  .cp-header-inner  { min-height: 54px; }
}

@media (max-width: 600px) {
  .cp-header, .cp-header-bar { margin-block: 0; border-radius: 0; }
  .cp-header-inner { width: 100%; gap: 4px; min-height: 50px; margin: 0; padding: 0; }
  .cp-header-brand { gap: 4px; padding: 1px 2px; border-radius: 6px; }
  .cp-header-brand img { width: 32px; height: 30px; }
  .cp-header-brand__text strong { font-size: 14px; }
  .cp-header-brand__text small { font-size: 10px; }
  .cp-header-actions { gap: 5px; }
  .cp-header-order { min-height: 32px; padding: 5px 9px; border-radius: 8px; font-size: 13px; }
  .cp-header-wa-mob, .cp-menu-toggle { width: 32px; height: 32px; border-radius: 8px; }
  .cp-menu-toggle { padding: 7px; }
}

.cp-header-progress { height: 3px; background: rgba(36,92,32,.08); }
.cp-header-progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--h-green), #e8a800);
  transform: scaleX(0); transform-origin: left;
}

.cp-mobile-nav {
  position: absolute; top: calc(100% + 6px); right: 12px;
  width: min(280px, calc(100vw - 24px));
  background: #fff; border-radius: 16px;
  border: 1px solid rgba(36,92,32,.1);
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
  overflow: hidden; z-index: var(--cp-z-drawer);
  opacity: 0; transform: translateY(-8px) scale(.96);
  transition: opacity .22s, transform .22s;
  pointer-events: none;
}
.cp-mobile-nav.is-open {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.cp-mobile-nav__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-bottom: 1px solid rgba(36,92,32,.08);
  background: var(--cp-soft, #eef6e6);
}
.cp-mobile-nav__title {
  font-family: var(--cp-font-bn); font-size: 16px; font-weight: 700; color: var(--h-green);
}
.cp-mobile-nav__close {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(36,92,32,.1); border: none; cursor: pointer;
  font-size: 13px; color: var(--h-green);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.cp-mobile-nav__close:hover { background: rgba(36,92,32,.2); }
.cp-mobile-nav nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid #f0f5eb;
  font-family: var(--cp-font-bn); font-size: 15px; font-weight: 600;
  color: var(--cp-text, #1e2b1c); text-decoration: none;
  transition: background .15s, color .15s;
}
.cp-mobile-nav nav a:hover { background: #f4faf0; color: var(--h-green); }
.cp-mobile-nav nav a:last-child { border-bottom: 0; }
.cp-mobile-nav__account { color: var(--h-green) !important; font-weight: 700 !important; }