/* ---------------------------------------------------------------------------
   মোবাইল ভিউয়ের সংশোধন

   সার্ভারে node/npm নেই, তাই `npm run build` চালানো যায় না — নতুন Tailwind
   ক্লাস যোগ করলে সেটা compiled CSS-এ থাকত না। তাই এই ফাইলটা সাধারণ CSS
   হিসেবে আলাদা করে লোড হয় (app.blade.php-তে @vite-এর ঠিক পরে)।

   পরে লোকাল মেশিনে npm run build চালালে এগুলো Tailwind-এ সরিয়ে নেওয়া যাবে।
--------------------------------------------------------------------------- */

/* ১ — সরু পর্দায় অনুভূমিক স্ক্রল বন্ধ (bundles/show ও product পেজ)

   কারণ: এক-কলাম grid-এ Price Breakdown-এর টেবিলটা min-w-[420px], আর
   grid item-এর ডিফল্ট min-width:auto হওয়ায় ওই ৪২০px পুরো কলামটাকেই
   টেনে বড় করে দিত। ফলে একই কলামের "What's Included" কার্ডও ৪২০px হয়ে
   ৩৭৫px পর্দা থেকে ১১৭px উপচে পড়ত।

   min-width:0 দিলে কলামটা পর্দার মাপে ফিরে আসে, আর টেবিলটা তার নিজের
   overflow-x-auto বাক্সের ভিতরেই আলাদা করে স্ক্রল হয় — যেটাই কাঙ্ক্ষিত। */
@media (max-width: 639.98px) {
  main .grid > * { min-width: 0; }
}

/* ২ — হোম পেজের ব্যানার মোবাইলে একটু উঁচু

   ব্যানারের বাক্স aspect-[4/1]। ৩৩৩px চওড়া মোবাইল কন্টেইনারে সেটা মাত্র
   ~৮৩px উঁচু হয় — ফিতার মতো দেখায়। ৫/২ (২.৫:১) করলে ~১৩৩px হয়।

   ৫/২-এর বেশি উঁচু করা হয়নি ইচ্ছা করেই: ব্যানারের ছবিগুলো ১৬০০×৪০০ (৪:১)
   আর object-cover দিয়ে বসে, তাই বাক্স যত উঁচু হবে ছবির দুই পাশ তত বেশি
   কাটা যাবে — লেখা থাকলে সেটা হারিয়ে যেতে পারে। */
@media (max-width: 639.98px) {
  .av-banner { aspect-ratio: 5 / 2; }

  /* বাক্সটা ৪:১-এর চেয়ে উঁচু হওয়ায় object-cover দিলে ছবির দুই পাশ কেটে
     যেত — ব্যানারের লেখা ও বোতাম হারিয়ে যেত। তাই পিলার হিসেবে পিছনে
     একই ছবির ঝাপসা কপি (--bnr, banner-slider.blade.php-তে বসানো),
     আর উপরে পুরো ছবি object-contain — কিছুই কাটে না। */
  .av-banner > a { overflow: hidden; }

  .av-banner > a::before {
    content: '';
    position: absolute;
    inset: -12%;
    background-image: var(--bnr);
    background-size: cover;
    background-position: center;
    filter: blur(16px) saturate(1.15);
    z-index: 0;
  }

  .av-banner > a > img {
    position: relative;
    z-index: 1;
    object-fit: contain;
  }
}

/* ------------------------------------------------------------------
   §৩৮ — Powerful Research Combos: ফোনে দুই-ধাপি চাপ

   js/mobile.js প্রথম চাপে কার্ডে .av-active বসায়। তখন কার্ডটা সোজা
   হয়ে, একটু বড় হয়ে সবার সামনে উঠে আসে — এটাই সেই "popup"।
   দ্বিতীয় চাপে তবেই বান্ডেলের পাতায় যায়।

   মাঝের STANDARD ইচ্ছে করেই বাদ (:not) — সেটা এমনিতেই সামনে থাকে,
   ওর চেহারা এক চুলও বদলানো হয়নি।

   বাঁয়েরটা সামান্য ডানে, ডানেরটা সামান্য বাঁয়ে সরে আসে; নইলে বড়
   হওয়ার পর কিনারা সেকশনের overflow-hidden-এ কেটে যেত।

   কার্ডে আগে থেকেই `transition-all duration-200` আছে, তাই আলাদা
   transition লেখা লাগেনি — নড়াচড়াটা নিজে থেকেই মসৃণ।
   ------------------------------------------------------------------ */
@media (max-width: 639.98px) {
  .av-combo-card.av-active:not([data-tier='standard']) {
    z-index: 40;
  }

  .av-combo-card.av-active[data-tier='basic'] {
    transform: translate(7%, -10px) rotate(0deg) scale(1.12);
  }

  .av-combo-card.av-active[data-tier='premium'] {
    transform: translate(-7%, -10px) rotate(0deg) scale(1.12);
  }

  /* ভিতরের সাদা বক্সে একটু গাঢ় ছায়া — কার্ডটা উঠে এসেছে বোঝাতে */
  .av-combo-card.av-active:not([data-tier='standard']) > div {
    box-shadow: 0 18px 40px -12px rgba(27, 23, 74, .38);
  }
}

/* ------------------------------------------------------------------
   §৩৯ — হেডারের সার্চ বার Custom Package-এর পাশে

   xl-এর নিচে হেডারের নিচের সারিটা flex: বাঁয়ে Custom Package
   (shrink-0), ডানে সার্চ ফর্ম। ফর্মটা বাকি জায়গাটুকু নেবে।

   `flex-1` আর `min-w-0` — দুইটাই Tailwind-এ আছে, কিন্তু কম্পাইল করা
   app.css-এ নেই (কোথাও ব্যবহার হয়নি) আর সার্ভারে npm না থাকায় নতুন
   করে বিল্ড করা যায় না। তাই সাধারণ CSS-এ লেখা।

   min-width:0 জরুরি — <input>-এর ডিফল্ট প্রস্থ (~১৭৫px) ফ্লেক্স
   আইটেমের সর্বনিম্ন মাপ ঠিক করে দেয়, ফলে সরু ফোনে সারিটা উপচে যেত।

   ১২৮০px থেকে র‍্যাপার block হয়ে যায়, তখন ফর্ম তার নিজের mx-auto ও
   max-w-[640px] নিয়ে মাঝখানে বসে — তাই এই নিয়ম ওখানে দরকার নেই।
   ------------------------------------------------------------------ */
@media (max-width: 1279.98px) {
  .av-search {
    flex: 1 1 0%;
    min-width: 0;
  }
}

/* ------------------------------------------------------------------
   §৩৯ — হেডারের উপরের সারি: লোগো · কার্ট · Login · মেনু

   ১) লোগো।
      x-ui.logo কম্পোনেন্টের নিজের ডিফল্ট `h-9` আর হেডার থেকে পাঠানো
      `h-5` — দুইটাই img-এর class-এ বসে। CSS-এ specificity সমান, তাই
      কে জিতবে সেটা ঠিক করে স্টাইলশিটের ক্রম, class অ্যাট্রিবিউটের ক্রম
      নয়। Tailwind h-5 আগে আর h-9 পরে লেখে — ফলে ব্লেডে h-5 লিখেও ফোনে
      লোগো ৩৬px-ই থেকে যাচ্ছিল (চওড়ায় ২০৯px, কন্টেইনারের অর্ধেকের বেশি)।
      এখানে সরাসরি উচ্চতা বসিয়ে সেটা ভাঙা হল: ২৪px → চওড়ায় ~১৩৪px।

   ২) ফাঁক। লোগো ও কন্ট্রোলের মাঝে gap-6 (২৪px) ফোনে বিলাসিতা — ৮px।

   ৩) নিরাপত্তা-জাল। ৩২০px পর্দায় সব মিলিয়ে ~৩০৮px, কন্টেইনার ~৩০৪px।
      তাই লোগোকে shrink করার অনুমতি দেওয়া হল — উপচে পড়ার বদলে সে
      নিজেই একটু ছোট হবে। object-fit: contain না দিলে ছবিটা চেপে
      বিকৃত হয়ে যেত।

   ৪) Login পিলটা সামান্য আঁটসাঁট — আইকন ও লেখার মাঝের ফাঁক কমিয়ে।
   ------------------------------------------------------------------ */
@media (max-width: 639.98px) {
  .av-logo { height: 24px; }

  .av-topbar { gap: 0.5rem; }

  .av-topbar > a:first-child { min-width: 0; flex-shrink: 1; }

  .av-topbar > a:first-child > .av-logo {
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }

  .av-login-sm { gap: 0.25rem; }
}

/* ৩৯ক — সার্চ ইনপুটের ডান প্যাডিং ৫৬px, অথচ ভিতরের বোতাম ৩৬px।
   চওড়া ডেস্কটপ বারে ওটা নজরে পড়ে না, কিন্তু Custom Package-এর
   পাশে বসা সরু সারিতে ওই বাড়তিটুকুই লেখার জায়গা কেড়ে নিচ্ছিল।
   min-width:0 — <input>-এর ডিফল্ট প্রস্থ যেন ফর্মকে ঠেলে বড় না করে। */
@media (max-width: 639.98px) {
  .av-search input {
    min-width: 0;
    padding-right: 2.75rem;
  }
}