/* css/landing-page.css */
* { box-sizing: border-box; }
        /* ✅ নতুন: বাটন থেকে #element-id তে ক্লিক করলে স্মুথলি স্ক্রল হবে */
        html { scroll-behavior: smooth; }
        body { margin: 0; font-family: 'Segoe UI', 'Noto Sans Bengali', system-ui, sans-serif; color: #1f2937; }
        /* ✅ ফিক্স: প্রতিটা সেকশনে ২০px প্যাডিং (উপরে+নিচে ৪০px) হার্ডকোডেড
           ছিল, একাধিক সেকশন থাকলে এটা জমে অনেক বেশি ফাঁকা জায়গা তৈরি করত।
           এখন উপরে-নিচে কমিয়ে ১২px করা হলো (পাশের ২০px অক্ষুণ্ণ), প্রয়োজনে
           প্রতিটা সেকশনে আলাদাভাবে Style ট্যাব থেকে কাস্টম প্যাডিং/স্পেসিং
           সেট করে বাড়ানো-কমানো যাবে (নিচের নতুন "স্পেসিং" কন্ট্রোল দেখুন) */
        .lp-section { padding: 12px 20px; }
        .lp-section__row { display: flex; flex-wrap: wrap; }
        /* ✅ নতুন: সেকশনের Style ট্যাব থেকে "Container" বাছলে এই ক্লাস
           যোগ হয় — কন্টেন্ট মাঝখানে সীমাবদ্ধ থাকবে, বড় স্ক্রিনে দুই পাশে
           ফাঁকা জায়গা থাকবে (যেমন সাধারণ ওয়েবসাইট লেআউট)। ডিফল্ট (fluid)
           এই ক্লাস ছাড়াই — আগের মতো ফুল-উইডথ থাকবে, কোনো ব্রেকিং চেঞ্জ না। */
        .lp-section__row--container { max-width: 1200px; margin: 0 auto; width: 100%; }
        .lp-column { min-width: 0; padding: 0 8px; }
        /* ✅ ফিক্স: বিভিন্ন উইজেটের ডিফল্ট margin-bottom কমানো হলো
           (১২px → ৮px, ডিভাইডার ২০px → ১৪px) — অনেকগুলো উইজেট একসাথে
           থাকলে এই ছোট মার্জিনগুলোই জমে বড় ফাঁকা জায়গা তৈরি করত */
        .lp-heading { margin: 0 0 8px; }
        /* ✅ ফিক্স: আগে এখানে `line-height: 1.7` হার্ডকোড করা ছিল, যেটা
           Style ট্যাব থেকে সেট করা লাইন-হাইট (wrapper এ inline style
           হিসেবে বসে) কে override করে দিত — তাই এডিটরে কাজ করলেও লাইভ
           ভিউ পেজে কোনো পরিবর্তন দেখা যেত না। এখন `inherit` করায়
           wrapper এ সেট করা মান নিচে পৌঁছায়; কিছু সেট না থাকলে
           নিচের `.lp-section` এর ডিফল্ট 1.7 ই প্রযোজ্য হয়। */
        .lp-text { margin-bottom: 8px; line-height: inherit; }
        /* ডিফল্ট লাইন-হাইট — Style ট্যাব থেকে কিছু সেট না করলে এটাই কাজ করে */
        .lp-section { line-height: 1.7; }
        .lp-image { display: block; margin-bottom: 8px; border-radius: 8px; }
        .lp-button { font-weight: 600; }
        .lp-divider { border: none; border-top: 1px solid #e5e7eb; margin: 14px 0; }
        .lp-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
        .lp-product-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; text-align: center; }
        .lp-product-card img { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
        .lp-product-card h4 { margin: 8px 0 4px; font-size: 15px; }
        /* ✅ ধাপ ৫: Tabs/Accordion ইন্টারঅ্যাকটিভ স্টেট */
        .lp-tab-panel { display: none; }
        .lp-tab-panel.lp-tab-active { display: block; }
        .lp-tab-btn { padding: 8px 16px; border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; }
        .lp-tab-btn.lp-tab-active { border-color: #2563eb; color: #2563eb; font-weight: 600; }
        .lp-accordion-item { border-bottom: 1px solid #e5e7eb; padding: 10px 0; }
        .lp-accordion-head { background: none; border: none; cursor: pointer; font-weight: 600; text-align: left; width: 100%; padding: 8px 0; }
        .lp-accordion-body { display: none; padding: 8px 0; }

        /* ✅ ধাপ ৬ (অ্যানিমেশন এক্সটেনশন): এন্ট্রেন্স অ্যানিমেশন — ডিফল্টে
           opacity:0, IntersectionObserver স্ক্রল করে এলে .is-visible যোগ করবে */
        [data-animate] { opacity: 0; }
        [data-animate].is-visible { opacity: 1; }
        [data-animate="fade-in"].is-visible { animation: lpFadeIn var(--anim-duration,600ms) var(--anim-delay,0ms) both; }
        [data-animate="slide-up"].is-visible { animation: lpSlideUp var(--anim-duration,600ms) var(--anim-delay,0ms) both; }
        [data-animate="slide-down"].is-visible { animation: lpSlideDown var(--anim-duration,600ms) var(--anim-delay,0ms) both; }
        [data-animate="slide-left"].is-visible { animation: lpSlideLeft var(--anim-duration,600ms) var(--anim-delay,0ms) both; }
        [data-animate="slide-right"].is-visible { animation: lpSlideRight var(--anim-duration,600ms) var(--anim-delay,0ms) both; }
        [data-animate="zoom-in"].is-visible { animation: lpZoomIn var(--anim-duration,600ms) var(--anim-delay,0ms) both; }
        @keyframes lpFadeIn { from { opacity: 0; } to { opacity: 1; } }
        /* ✅ বাগফিক্স: এন্ট্রেন্স অ্যানিমেশনের keyframe নিজেই transform সেট
           করত (যেমন translateX), যেটা widget-এ কাস্টম Transform (rotate/
           scale/skew) থাকলে সেটাকে সম্পূর্ণ override করে ফেলত — animation
           শেষ হওয়ার পরও (fill-mode:both থাকায়)। এখন `--lp-base-transform`
           CSS ভ্যারিয়েবল দিয়ে দুটো একসাথে কম্বাইন করা হচ্ছে — widget-এর
           নিজস্ব Transform থাকলে সেটা ভ্যারিয়েবলে বসে (নিচে wrapper-এ),
           না থাকলে ডিফল্ট `none`। */
        @keyframes lpSlideUp { from { opacity: 0; transform: var(--lp-base-transform, none) translateY(40px); } to { opacity: 1; transform: var(--lp-base-transform, none) translateY(0); } }
        @keyframes lpSlideDown { from { opacity: 0; transform: var(--lp-base-transform, none) translateY(-40px); } to { opacity: 1; transform: var(--lp-base-transform, none) translateY(0); } }
        @keyframes lpSlideLeft { from { opacity: 0; transform: var(--lp-base-transform, none) translateX(40px); } to { opacity: 1; transform: var(--lp-base-transform, none) translateX(0); } }
        @keyframes lpSlideRight { from { opacity: 0; transform: var(--lp-base-transform, none) translateX(-40px); } to { opacity: 1; transform: var(--lp-base-transform, none) translateX(0); } }
        @keyframes lpZoomIn { from { opacity: 0; transform: var(--lp-base-transform, none) scale(0.8); } to { opacity: 1; transform: var(--lp-base-transform, none) scale(1); } }

        /* ✅ ধাপ ৬: Hover অ্যানিমেশন (builder.css এর সাথে হুবহু সামঞ্জস্যপূর্ণ) */
        .lp-hover-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
        .lp-hover-lift:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); }
        .lp-hover-scale { transition: transform 0.25s ease; }
        .lp-hover-scale:hover { transform: scale(1.05); }
        .lp-hover-glow { transition: box-shadow 0.25s ease; }
        .lp-hover-glow:hover { box-shadow: 0 0 20px rgba(37,99,235,0.5); }

        /* ✅ গ্রুপ A, পর্ব ৪: ডিভাইস-ভিত্তিক Visibility — CSS দিয়ে হাইড
           (প্রতিটা ব্রেকপয়েন্ট রেঞ্জে শুধু নিজের ক্লাসটাই কার্যকর হয়, যাতে
           একাধিক hide-ক্লাস একসাথে থাকলেও conflict না হয়) */
        @media (min-width: 992px) { .lp-hide-desktop { display: none !important; } }
        @media (max-width: 991px) and (min-width: 768px) { .lp-hide-tablet { display: none !important; } }
        @media (max-width: 767px) { .lp-hide-mobile { display: none !important; } }

        /* ✅ গ্রুপ B, পার্ব ৯ (Popup Builder ৩/৩): পপআপ ওভারলে + বক্স */
        .lp-popup-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 99999;
            align-items: center;
            justify-content: center;
        }
        .lp-popup-overlay.is-visible { display: flex; }
        .lp-popup-box {
            position: relative;
            background: #fff;
            border-radius: 12px;
            max-width: 90vw;
            max-height: 90vh;
            overflow-y: auto;
            padding: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: lpPopupZoomIn 0.3s ease;
        }
        @keyframes lpPopupZoomIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
        .lp-popup-close {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: none;
            background: #f1f5f9;
            cursor: pointer;
            font-size: 14px;
            z-index: 1;
        }
        @media (max-width: 767px) {
            /* ✅ বাগফিক্স: কলামের ডেস্কটপ width ইনলাইন style="flex:0 0 50%;..."
               দিয়ে বসানো হয় (ডেটা থেকে সরাসরি) — ইনলাইন স্টাইল সবসময়
               স্টাইলশিটের ক্লাস-রুলকে হারিয়ে দেয় (!important ছাড়া), তাই
               এখানে !important ছাড়া মোবাইলে কলাম আসলে width:50% আটকেই
               থেকে যাচ্ছিল, শুধু flex-direction:column (যেটা ইনলাইনে নেই)
               প্রয়োগ হচ্ছিল — ফলে "স্ট্যাক হয়েছে কিন্তু অর্ধেক প্রস্থে আটকে"
               যে বাগ ইউজার রিপোর্ট করেছেন তা তৈরি হচ্ছিল। */
            .lp-section__row { flex-direction: column !important; }
            .lp-column { flex-basis: 100% !important; max-width: 100% !important; }
        }