/* =========================================================
   💻 DESKTOP SIDEBAR - PREMIUM UI/UX
   ========================================================= */

.main-layout {
  display: flex;
  align-items: flex-start;
  background-color: #f8fafc; /* পুরো পেজের একটা সফট ব্যাকগ্রাউন্ড */
}

/* 🛑 সাইডবার কন্টেইনার */
.brnd-container {
  position: relative;
  top: 0;
  align-self: flex-start;
  width: 280px; /* একটু চওড়া করা হলো যাতে টেক্সট ভালো ধরে */
  max-height: 100vh; 
  overflow-y: auto; 
  background-color: #ffffff; /* সাইডবার পিওর হোয়াইট */
  border-right: 1px solid #e2e8f0; /* ডানদিকে খুব সুন্দর একটা বর্ডার */
  padding: 15px 10px;
  box-sizing: border-box;
  scrollbar-width: none; 
}

.brnd-container::-webkit-scrollbar {
  width: 0px;
  background: transparent; 
}

/* 🛑 অরেঞ্জ স্ক্রল থাম্ব */
.scroll-thumb {
  position: absolute;
  right: 5px;                
  width: 5px;
  height: 40px;               
  background: #ff4500;       
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(255, 69, 0, 0.3); /* অরেঞ্জ গ্লো শ্যাডো */
  opacity: 0;                
  transition: top 0.35s cubic-bezier(.2,.8,.2,1), opacity 0.25s ease;
  pointer-events: none;       
  z-index: 50;
}

.brnd-container.has-active .scroll-thumb {
  opacity: 1;
}

/* 🛑 ডানদিকের ভিডিও এরিয়া */
.side-video {
  width: calc(100% - 280px); /* সাইডবার বাদে বাকি জায়গা নেবে */
  padding: 25px;
}

/* 🛑 মেইন ব্র্যান্ড বক্স */
.man-brand {
  background-color: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  border-radius: 8px; /* মডার্ন রাউন্ডেড কর্নার */
  margin-bottom: 5px;
  transition: all 0.2s ease;
}

.man-brand:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.03); /* হোভার করলে সফট শ্যাডো */
}

/* 🛑 ব্র্যান্ডের লোগো এরিয়া */
.brand-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  width: 100%; 
  padding: 5px;
}

.brand-box img {
  max-width: 80%; 
  max-height: 45px;
  border-radius: 6px;
  object-fit: contain;
}

/* 🛑 ব্র্যান্ডের নাম ও অ্যাকর্ডিয়ন বাটন */
.brand-itm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;  
  color: #334155; 
  cursor: pointer;
  border-radius: 8px;
  padding: 12px 15px; 
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s ease;
}

.brand-itm:hover {
  color: #ff4500;
  background-color: #f8fafc;
}

/* 🛑 অ্যাকটিভ ব্র্যান্ড (যেটা ক্লিক করা হয়েছে) */
.brand-itm.active {
  box-shadow: inset 4px 0 0 0 #ff4500; /* বাঁদিকের অরেঞ্জ বর্ডার */
  background: #fff5f2; /* 💡 ম্যাজিক: খুব হালকা মিষ্টি অরেঞ্জ ব্যাকগ্রাউন্ড */
  color: #ff4500;
}

/* 🛑 + এবং - আইকন ফিক্স */
.brand-itm::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: #94a3b8; 
  margin-left: auto;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* 💡 ম্যাজিক: active এর বদলে expanded করা হলো */
.brand-itm.expanded::after {
  content: "-";
  transform: rotate(180deg);
  color: #ff4500; 
}
/* 🛑 মডেল লিস্ট (অ্যাকর্ডিয়ন বডি) */
.model-list {
  max-height: 0;
  overflow: hidden;
  background: transparent;
  transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); /* অনেক স্মুথ অ্যানিমেশন */
}

.model-list.open {
  max-height: 800px; /* বেশি মডেল থাকলেও যাতে না কাটে */
}

.model-list ul {
  margin: 0;
  padding: 5px 0 10px 0;
  width: 100%;
}

.model-list li {
  width: 100%;
  list-style: none;
}

/* 🛑 মডেলের লেবেল ও চেকবক্স */
.model-list label {
  display: flex;
  align-items: center;
  width: auto;
  margin: 2px 15px;
  padding: 10px 15px 10px 30px; /* একটু ডানদিক ঘেঁষে থাকবে */
  cursor: pointer;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.model-list label:hover {
  color: #1e293b; 
  background: #f1f5f9;
}

/* 🛑 কাস্টম চেকবক্স ডিজাইন */
.model-checkbox {
  accent-color: #ff4500; /* 💡 চেকবক্সের কালার অরেঞ্জ হবে */
  width: 16px;
  height: 16px;
  margin-right: 12px;
  cursor: pointer;
}

/* =========================================================
   📱 MEDIA QUERY
   ========================================================= */
@media(max-width: 768px){
  .brnd-container {
    display: none; 
  }
  .side-video{
    width: 100%;
    padding: 15px;
  }
}



.mobile-action-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom); /* আইফোনের হোম বারের জন্য সেফটি */
}
.mobile-action-bar .action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 0;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.5px;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
}
.mobile-action-bar .action-divider {
    width: 1px;
    background: #e2e8f0;
    margin: 10px 0;
}

/* =========================================================
   📱 Overlays (Background Black) - FIXED FOR REAL MOBILE
   ========================================================= */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0; /* চারদিকে একদম ফিক্সড */
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    overflow: hidden; /* ব্যাকগ্রাউন্ড স্ক্রল বন্ধ করার জন্য */
}

/* =========================================================
   📱 Sort Bottom Sheet (Fixed Bottom)
   ========================================================= */
.sort-bottom-sheet {
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 16px 16px 0 0;
    animation: slideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
    z-index: 2001; /* ফিল্টারেরও ওপরে রাখার জন্য */
}
.sheet-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; border-bottom: 1px solid #e2e8f0;
}
.sheet-title { font-size: 16px; font-weight: 700; color: #1e293b; font-family: "Poppins", sans-serif; }
.close-sheet-btn { background: none; border: none; font-size: 20px; color: #64748b; cursor: pointer; }
.sheet-body { 
    padding: 10px 0; 
    max-height: 50vh; /* স্ক্রিনের অর্ধেক জায়গা নেবে, তার বেশি হলে স্ক্রল হবে */
    overflow-y: auto; 
}
.sort-radio-label {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; border-bottom: 1px solid #f1f5f9;
    font-size: 15px; font-weight: 500; color: #334155; cursor: pointer; font-family: "Poppins", sans-serif;
}
.sort-radio-label input[type="radio"] { accent-color: #ff4500; width: 18px; height: 18px; }

/* =========================================================
   📱 Filter Overlay Content (Full Screen Layout) - FIXED
   ========================================================= */
.mobile-overlay-content {
    background: #fff; 
    width: 100%; 
    height: 100%; /* Fallback for older browsers */
    height: 100dvh; /* 🛑 ম্যাজিক: আসল মোবাইলের ব্রাউজার UI এর জন্য ফিক্স */
    position: absolute; 
    bottom: 0; left: 0;
    display: flex; 
    flex-direction: column; /* ফ্লেক্স লেআউট, যাতে বাটন নিচে ফিক্সড থাকে */
    animation: slideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mobile-overlay-header { 
    display: flex; align-items: center; padding: 15px 20px; 
    border-bottom: 1px solid #e2e8f0; 
    background: #fff; 
    flex-shrink: 0; /* হেডার যাতে চ্যাপ্টা না হয় */
}
.cancel-btn { background: transparent; border: none; color: #1e293b; font-size: 20px; cursor: pointer; }
.mobile-overlay-title { font-size: 18px; font-weight: 700; color: #1e293b; margin-left: 15px; font-family: "Poppins", sans-serif; }

/* 🛑 মাঝখানের ফিল্টার এরিয়া (এখানেই শুধু স্ক্রল হবে) */
.filter-section { 
    display: flex; 
    flex: 1; /* মাঝখানের সবটুকু জায়গা নেবে */
    overflow: hidden; /* বাইরে স্ক্রল হতে দেবে না */
    background: #f8fafc; 
}

.brand-list-sardar { 
    width: 40%; background: #f1f5f9; 
    overflow-y: auto; /* শুধু ব্র্যান্ড লিস্ট স্ক্রল হবে */
    -webkit-overflow-scrolling: touch; /* 🛑 আইফোন/অ্যান্ড্রয়েডে স্মুথ স্ক্রল */
    border-right: 1px solid #e2e8f0; 
    height: 100%;
}
.brand-item { padding: 18px 15px; font-size: 14px; font-weight: 600; color: #334155; border-bottom: 1px solid #e2e8f0; cursor: pointer; font-family: "Poppins", sans-serif; }

.model-list-sardar { 
    width: 60%; background: #fff; 
    overflow-y: auto; /* শুধু মডেল লিস্ট স্ক্রল হবে */
    -webkit-overflow-scrolling: touch; /* 🛑 আইফোন/অ্যান্ড্রয়েডে স্মুথ স্ক্রল */
    padding: 15px 10px; 
    height: 100%;
}
.model-item { margin-bottom: 18px; }

/* 🛑 নিচের বাটনের এরিয়া (সবসময় ফিক্সড থাকবে) */
.mobile-bottom-area { 
    background: #fff; 
    border-top: 1px solid #e2e8f0; 
    box-shadow: 0 -4px 10px rgba(0,0,0,0.05); 
    padding-bottom: env(safe-area-inset-bottom, 15px); /* আইফোনের জন্য Fallback */
    flex-shrink: 0; /* বাটন এরিয়া যাতে কোনোভাবেই গায়েব না হয় */
    width: 100%;
}
.actions { display: flex; gap: 15px; padding: 15px 20px; }
.btn-sardar { flex: 1; padding: 14px; border-radius: 8px; font-size: 15px; font-weight: 600; text-transform: uppercase; cursor: pointer; font-family: "Poppins", sans-serif; transition: 0.2s; }
.clear-btn { background: #fff; border: 1px solid #cbd5e1 !important; color: #475569 !important; }
.apply-btn { background: #ff4500 !important; border: none !important; color: #fff !important; box-shadow: 0 4px 6px rgba(255, 69, 0, 0.2); }

/* অ্যানিমেশন */
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* =========================================================
   📱 Media Query for Mobile Layout
   ========================================================= */
@media(max-width: 768px){
    .mobile-action-bar { display: flex; }
    #videoSection { padding-bottom: 70px; } /* বটম বারের নিচে যাতে ভিডিও ঢাকা না পড়ে */
}




    .pk-master-wrapper {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 12px 20px;
        margin-bottom: 25px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.03);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        transition: all 0.3s ease;
    }

   
    .pk-selection-group {
        display: flex;
        align-items: center;
        gap: 15px;
        flex-shrink: 1; 
    }

    .pk-segmented-btns {
        display: flex;
        background: #f1f5f9;
        padding: 4px;
        border-radius: 8px;
        gap: 4px;
    }

    .pk-segmented-btns button {
        background: transparent;
        border: none;
        padding: 6px 12px;
        font-size: 13px;
        font-weight: 700;
        color: #475569;
        border-radius: 6px;
        cursor: pointer;
    }


    .pk-sort-container {
        border-left: 2px solid #f1f5f9;
        padding-left: 20px;
        flex-shrink: 0; 
    }

    .pk-sort-select {
        appearance: none;
        padding: 9px 30px 9px 12px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        background: #ffffff;
        color: #1e293b;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        min-width: 170px;
        outline: none;
    }

  
    @media (max-width: 1100px) {
        .pk-master-wrapper {
            padding: 10px 15px;
            gap: 10px;
        }
        .pk-selection-group {
            gap: 10px;
        }
        .pk-sort-select {
            min-width: 150px; 
            font-size: 13px;
        }
    }

 
    @media (max-width: 900px) {
        .pk-label-text {
            display: none; 
        }
        .pk-segmented-btns button {
            padding: 6px 8px; 
        }
    }

    
    @media (max-width: 700px) {
        .pk-sort-container {
            display: none !important; 
        }
        .pk-selection-group {
            width: 100%;
            justify-content: space-between;
        }
    }


    @media (max-width: 500px) {
        .pk-master-wrapper {
            padding: 10px 12px; 
            border-radius: 8px;
        }
        
        .pk-selection-group {
            flex-wrap: wrap; 
            justify-content: center;
            gap: 8px;
        }

    
        .pk-segmented-btns {
            padding: 2px;
        }
        .pk-segmented-btns button {
            padding: 6px 10px;
            font-size: 12px;
        }

        .pk-custom-input-box input {
            width: 40px !important;
            padding: 6px 4px !important;
            font-size: 12px !important;
        }
        .pk-custom-input-box button {
            padding: 6px 8px !important;
            font-size: 12px !important;
        }

      
        .pk-selection-group > button:last-child {
            padding: 4px 8px !important;
            font-size: 12px !important;
            margin-left: 0 !important; 
        }
    }