/* মেইন কন্টেইনার */
.mp-search-container {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 40px auto !important;
    padding: 0 15px !important;
}

.mp-search-form {
    display: flex !important;
    align-items: flex-end !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* প্রতিটা ইনপুট গ্রুপ */
.mp-form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex: 1 !important;
    min-width: 200px !important;
    position: relative; /* মডাল পজিশন ঠিক রাখার জন্য */
}

/* লেবেল ডিজাইন */
.mp-form-group label {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #4b2c7f !important; 
    font-family: 'Hind Siliguri', Arial, sans-serif !important;
    margin-bottom: 5px !important;
}

/* ইনপুট/সিলেক্ট বক্স এবং কাস্টম সিলেক্ট ডিজাইন */
.mp-form-group select, .mp-custom-select-box {
    width: 100% !important;
    padding: 10px 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    font-size: 15px !important;
    color: #666 !important;
    height: 55px !important;
    outline: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
}

/* ট্রিগার কন্টেন্ট (ব্যাক বাটন + টেক্সট) */
.mp-trigger-content {
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none; /* যাতে ক্লিকে সমস্যা না হয় */
}

.mp-custom-select-box {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 15px !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    height: 55px !important;
    cursor: pointer !important;
    position: relative;
}

.mp-selected-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.mp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    padding: 5px;
    z-index: 10;
}

.mp-icon-btn i { font-size: 18px; }

#mp-main-back-btn { color: #512da8; }
#mp-close-icon { color: #999; }

.mp-action-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

#mp-arrow-icon { color: #999; font-size: 18px; }

/* মডাল ডিজাইন */
.mp-modal {
    display: none;
    position: absolute;
    top: 105%;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    z-index: 999;
    border: 1px solid #eee;
    max-height: 300px;
    overflow-y: auto;
}

/* বাটন ডিজাইন */
.mp-submit-btn {
    background: linear-gradient(90deg, #27256D 0%, #CFBB5B 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 0 30px !important;
    height: 55px !important;
    border-radius: 12px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.3s ease !important;
}


/* লিস্ট আইটেম ডিজাইন */
.mp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}

.mp-list li {
    padding: 12px 20px;
    font-size: 14px;
    border-bottom: 1px solid #f9f9f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}

.mp-list li:hover {
    background-color: #f5f3ff;
    color: #512da8;
}

/* ডানদিকের অ্যারো */
.mp-list li::after {
    content: "\f345";
    font-family: dashicons;
    font-size: 14px;
    color: #ccc;
}

.mp-list li.mp-all-option {
    background: #f8f6ff !important; /* হালকা বেগুনি ব্যাকগ্রাউন্ড */
    font-weight: bold !important;
    color: #512da8 !important;
    border-bottom: 1px solid #e0d9ff !important;
}

.mp-list li.mp-all-option:hover {
    background: #f0ebff !important;
}

/* স্ক্রলবার */
.mp-list::-webkit-scrollbar { width: 5px; }
.mp-list::-webkit-scrollbar-thumb { background: #eee; border-radius: 10px; }

/* মোবাইল রেসপন্সিভ */
@media (max-width: 768px) {
    .mp-search-form {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}




/* Result Page CSS */
/* রেজাল্ট পেজ কন্টেইনার */
.mp-bd-results-page {
    background-color: #f7f7f7; /* হালকা ধূসর ব্যাকগ্রাউন্ড */
    padding: 40px 0;
    font-family: 'Hind Siliguri', sans-serif;
}

/* মেইন লেআউট ফিক্স */
.mp-bd-container {
    display: flex !important; /* সাইডবার এবং কন্টেন্ট পাশাপাশি আনতে */
    align-items: flex-start;
    gap: 30px;
    max-width: 1250px;
    margin: 40px auto;
}

/* সাইডবার ফিক্সড উইডথ */
.mp-bd-sidebar {
    flex: 0 0 300px !important; /* বাম পাশের সাইডবার ৩০০ পিক্সেল ফিক্সড */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    position: sticky;
    top: 20px;
}

/* ডান পাশের কন্টেন্ট এলাকা */
.mp-bd-content {
    flex: 1 !important; /* বাকি সব জায়গা রেজাল্ট গ্রিড নিবে */
}

/* গ্রিড ডিজাইন (প্রতি লাইনে ৩টি কার্ড) */
.mp-bd-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* ১ লাইনে ৩টি */
    gap: 20px;
}

/* কার্ডের ভেতরের বাটন (ছবির মতো স্টাইল) */
.mp-bd-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 15px;
    background: #fff;
    color: #e91e63;
    border: 1px solid #e91e63;
    border-radius: 15px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: 0.3s;
}

.mp-bd-view-btn:hover {
    background: #e91e63;
    color: #fff;
}

/* মোবাইল রেসপন্সিভ */
@media (max-width: 1024px) {
    .mp-bd-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .mp-bd-container {
        flex-direction: column; /* মোবাইলে সাইডবার উপরে চলে যাবে */
    }
    .mp-bd-sidebar {
        flex: 1 1 auto !important;
        width: 100%;
    }
    .mp-bd-grid {
        grid-template-columns: 1fr !important;
    }
}

.mp-sidebar-header {
    display: flex;
    background: #512da8; /* প্রধান বেগুনি কালার */
}

.mp-tab-btn {
    flex: 1;
    padding: 15px;
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.mp-tab-btn.active {
    background: #4b2c7f; /* গাঢ় বেগুনি */
}

.mp-sidebar-filters {
    padding: 20px;
}

/* সাইডবার একশন বাটন */
.mp-sidebar-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.mp-btn-clear, .mp-btn-search {
    flex: 1;
    padding: 10px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.mp-btn-clear { background: #fee2e2; color: #e91e63; }
.mp-btn-search { background: #e0f2fe; color: #0ea5e9; }

/* ডান পাশের কন্টেন্ট */
.mp-bd-content-header {
    text-align: center;
    margin-bottom: 30px;
}

.mp-bd-content-header h2 { color: #512da8; font-size: 28px; margin: 0 0 5px; }
.mp-bd-content-header p { color: #888; font-size: 16px; }

.mp-bd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* বায়োডাটা কার্ড (হুবহু ছবির মতো লুক) */
.mp-bd-card {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.mp-bd-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    position: relative;
}

.avatar-placeholder {
    width: 50px;
    height: 50px;
    background: #f0ebff;
    border-radius: 50%;
    color: #512da8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.mp-bd-id { color: #512da8; font-weight: bold; font-size: 16px; }

.mp-fav-icon {
    position: absolute;
    top: 0;
    right: 0;
    color: #ccc;
    cursor: pointer;
}

.mp-bd-card-body p {
    font-size: 14px;
    color: #555;
    margin: 5px 0;
}

.mp-bd-card-footer {
    margin-top: 15px;
    text-align: right;
}

.mp-bd-course-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 15px;
    background: #fdf2f8; /* হালকা গোলাপি */
    color: #e91e63; /* গোলাপি কালার */
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

/* "আরও বায়োডাটা দেখুন" বাটন */
.mp-load-more-container {
    text-align: center;
    margin-top: 40px;
}

.mp-bd-load-more-btn {
    padding: 12px 30px;
    background: linear-gradient(90deg, #512da8 0%, #e91e63 100%);
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* Registration CSS */
/* রেজিস্ট্রেশন কার্ড ডিজাইন */
.mp-auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    background: #f0f2f5;
}

.mp-auth-card {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.mp-auth-title {
    color: #512da8;
    margin-bottom: 30px;
    font-size: 26px;
    font-weight: 700;
}

/* ইনপুট বক্স ও আইকন পজিশন */
/* ইনপুট বক্সের মেইন কন্টেইনার */
.mp-input-box {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
}

/* আইকন পজিশন - ইনপুট থেকে আলাদা করা হয়েছে */
.mp-input-box i {
    position: absolute;
    left: 15px; /* বাম থেকে দূরত্ব */
    top: 50%;
    transform: translateY(-50%);
    color: #512da8;
    font-size: 18px;
    z-index: 2; /* যেন টেক্সটের উপরে থাকে */
}

/* ইনপুট ফিল্ড - বামে ৪ গুণ বেশি জায়গা (Padding) দেওয়া হয়েছে */
.mp-input-box input {
    width: 100%;
    padding: 15px 15px 15px 50px !important; /* ৫০ পিক্সেল প্যাডিং আইকনকে আলাদা রাখবে */
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box; /* উইডথ ঠিক রাখার জন্য */
    display: block;
}

/* এরর মেসেজ ডিজাইন */
#mp-reg-msg p {
    background: #fee2e2;
    color: #dc2626;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 15px;
    border: 1px solid #fecaca;
}

/* বাটন ডিজাইন */
.mp-auth-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(90deg, #512da8 0%, #e91e63 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.mp-auth-btn:active {
    transform: scale(0.98);
}

.mp-auth-btn:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

/* পছন্দের তালিকার বাটন ডিজাইন */
.spin {
    animation: mp-spin 2s infinite linear;
    display: inline-block;
}
@keyframes mp-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

/* Result Page CSS */
/* মেইন কন্টেইনার */
.mp-bd-container {
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto;
    font-family: 'Hind Siliguri', sans-serif; /* বাংলা ফন্ট */
}

/* সাইডবার ডিজাইন */
.mp-bd-sidebar {
    width: 300px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    height: fit-content;
    padding: 20px;
}

.mp-filter-group {
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 15px;
}

.mp-filter-title {
    font-size: 16px;
    font-weight: 600;
    color: #4a148c; /* তোমার থিমের পার্পল কালার */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

.mp-field label {
    display: block;
    font-size: 14px;
    margin-bottom: 8px;
    color: #555;
}

.mp-field select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 15px;
}

/* বায়োডাটা কার্ড ডিজাইন */
.mp-bd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.mp-bd-card {
    background: #fff;
    border-radius: 15px;
    border: 1px solid #eee;
    padding: 20px;
    text-align: center;
    transition: 0.3s;
    position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.mp-bd-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}

.mp-avatar {
    width: 70px;
    height: 70px;
    background: #f3e5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    color: #7b1fa2;
}

.mp-avatar i { font-size: 35px; }

.mp-bd-id {
    font-size: 14px;
    color: #7b1fa2;
    font-weight: bold;
    background: #f3e5f5;
    padding: 2px 10px;
    border-radius: 20px;
}

.mp-bd-card-body p {
    margin: 8px 0;
    font-size: 14px;
    color: #666;
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
}

.mp-view-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background: #7b1fa2;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-size: 14px;
    transition: 0.3s;
}

.mp-view-btn:hover { background: #4a148c; }

/* মোবাইল রেসপন্সিভ */
@media (max-width: 768px) {
    .mp-bd-container { flex-direction: column; }
    .mp-bd-sidebar { width: 100%; }
}