/* ==========================================================================
   dark-mode.css
   --------------------------------------------------------------------------
   পুরো সাইটের ডার্ক মোড — এক্সিস্টিং :root ভ্যারিয়েবল স্ট্রাকচার অক্ষুণ্ণ রেখে
   [data-theme="dark"] অ্যাট্রিবিউট (html ট্যাগে বসে) দিয়ে ভ্যারিয়েবলগুলো
   ওভাররাইড করা হয়েছে। কোনো এক্সিস্টিং সিলেক্টর/ক্লাস মোছা বা পরিবর্তন করা
   হয়নি — শুধু কালার টোকেনের মান বদলানো হয়েছে, তাই সাইটের বাকি স্ট্রাকচার/
   লেআউট/JS পুরোপুরি অপরিবর্তিত থাকবে।

   নোট: এই ফাইলটি FrontPage.php, ProductSinglePage.php ও footer.php —
   তিন জায়গাতেই লোড হবে, তাই ভ্যারিয়েবল নামগুলো তিন ফাইলের জন্যই কমন রাখা
   হয়েছে (যেসব ভ্যারিয়েবল কোনো একটা ফাইলে নেই সেটা override করলেও কোনো
   effect পড়বে না, ক্ষতিও নেই)।
   ========================================================================== */

[data-theme="dark"] {
  /* ---- মূল নিউট্রাল টোকেন ---- */
  --ink: #eef1ee;
  --ink-soft: #a7afa9;
  --line: #2a322c;
  --bg: #121613;
  --paper: #1a201b;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  --card-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.55);

  /* ---- বডি ---- */
  --fp-body-bg: #12161b;
  --fp-body-text: #eef1ee;

  /* ---- টপবার / হেডার ---- */
  --fp-topbar-bg: #0c1310;
  --fp-topbar-text: #cfe8d6;
  --fp-header-bg: #171d18;
  --fp-account-btn-bg: transparent;
  --fp-cart-btn-bg: #202821;

  /* ---- মেগা মেনু / সাবমেনু ---- */
  --menu-bg: #0c1310;
  --menu-text: #d9ecdf;
  --menu-hover-bg: rgba(255, 255, 255, 0.08);
  --menu-hover-text: #ffffff;
  --submenu-bg: #171d18;
  --submenu-text: #d9ecdf;
  --submenu-hover-bg: rgba(255, 255, 255, 0.08);
  --submenu-hover-text: #ffffff;

  /* ---- সাইডবার (বাম ক্যাটাগরি মেনু / মোবাইল ড্রয়ার) ---- */
  --sidebar-bg: #171d18;
  --sidebar-text: #d9ecdf;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --sidebar-hover-text: #ffffff;
  --sidebar-submenu-bg: #12161a;
  --sidebar-submenu-text: #d9ecdf;
  --sidebar-submenu-hover-bg: rgba(255, 255, 255, 0.08);
  --sidebar-submenu-hover-text: #ffffff;

  /* ---- হিরো ব্যানার ---- */
  --fp-hero-btn-bg: #202821;
  --fp-hero-btn-text: #eef1ee;

  /* ---- ক্যাটাগরি গ্রিড / চিপ ---- */
  --fp-catgrid-bg: #171d18;
  --fp-catgrid-label-text: #eef1ee;
  --fp-chip-bg: #202821;
  --fp-chip-text: #eef1ee;

  /* ---- প্রোডাক্ট কার্ড ---- */
  --fp-card-bg: #171d18;
  --fp-card-name-text: #eef1ee;
  --fp-card-brand-text: #a7afa9;
  --fp-price-text: #7fe0a0;

  /* ---- ফ্ল্যাশ সেল ---- */
  --fp-flashsale-bg: #171d18;
  --fp-flashsale-price-text: #7fe0a0;

  /* ---- প্রোডাক্ট সিঙ্গেল পেইজ: অ্যাড-টু-কার্ট / স্টক / পুরোনো দাম ---- */
  --fp-addcart-btn-text: #ffffff;
  --fp-price-old-text: #808880;
}

/* ---------------------------------------------------------------------
   ফুটার — footer.php নিজস্ব <style> ব্লকে PHP থেকে সরাসরি (var() ছাড়া)
   কালার echo করে, তাই এখানে সরাসরি ক্লাস-লেভেল ওভাররাইড দরকার।
   dark-mode.css সবসময় এই ইনলাইন <style> ব্লকের পরে লোড হয়, তাই সাধারণ
   সিলেক্টর দিয়েই override হবে — তারপরও নিশ্চিত করতে !important ব্যবহার
   করা হলো।
--------------------------------------------------------------------- */
[data-theme="dark"] .fp-footer {
  background: #0b100c !important;
  color: #cfe8d6 !important;
}
[data-theme="dark"] .fp-footer .fp-footer-name {
  color: #ffffff !important;
}
[data-theme="dark"] .fp-footer-note {
  color: #cfe8d6 !important;
}
[data-theme="dark"] .fp-footer-links a {
  color: #cfe8d6 !important;
}
[data-theme="dark"] .fp-footer-social a {
  background: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .fp-footer-social a:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

/* ---------------------------------------------------------------------
   ছবি/লোগোতে যেন কোনো নেগেটিভ/ইনভার্ট ইফেক্ট না পড়ে — নিশ্চিত করতে
   স্পষ্টভাবে filter রিসেট রাখা হলো (শুধু ব্যাকগ্রাউন্ড/টেক্সট/বর্ডার
   কালার বদলাবে, ছবি অপরিবর্তিত থাকবে)।
--------------------------------------------------------------------- */
[data-theme="dark"] img,
[data-theme="dark"] svg {
  filter: none;
}

/* ---- ইনপুট/সার্চ বক্স ইত্যাদি জেনেরিক ফর্ম এলিমেন্ট (যদি বর্ডার/paper টোকেন ব্যবহার করে) ---- */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  color-scheme: dark;
}

/* ---- স্মুথ ট্রানজিশন — থিম টগল করার সময় হুট করে বদলে না গিয়ে soft transition ---- */
html {
  transition: background-color 0.25s ease, color 0.25s ease;
}
body,
.fp-topbar,
.fp-header,
.fp-card,
.fp-footer,
.fp-catgrid,
.fp-chip {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ---------------------------------------------------------------------
   টগল বাটন স্টাইল (সান/মুন আইকন) — হেডারে fp-header-actions এর ভেতরে বসবে
--------------------------------------------------------------------- */
.fp-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  user-select: none;
}
.fp-theme-toggle:hover {
  transform: translateY(-1px);
}
.fp-theme-toggle:active {
  transform: translateY(0);
}
.fp-theme-toggle .fp-theme-icon-dark {
  display: none;
}
[data-theme="dark"] .fp-theme-toggle .fp-theme-icon-light {
  display: none;
}
[data-theme="dark"] .fp-theme-toggle .fp-theme-icon-dark {
  display: inline;
}

@media (max-width: 992px) {
  .fp-theme-toggle {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
}