/* =======================================
   আপনার দেওয়া সার্চ ইন্টারফেসের CSS (মোবাইল রেসপন্সিভ)
   ======================================= */
#vsc_custom_design {
    font-family: Arial, Helvetica, sans-serif !important;
    text-align: left !important;
    background: #ffffff !important;
}

/* box-sizing যুক্ত করা হয়েছে যাতে প্যাডিংয়ের কারণে সাইজ না বাড়ে */
#vsc_custom_design * {
    box-sizing: border-box !important;
}

#vsc_custom_design .container {
    width: 100% !important; /* মোবাইলের জন্য ১০০% */
    max-width: 760px !important; /* পিসির জন্য আপনার দেওয়া ৭৬০px */
    margin: 30px auto !important;
    overflow: hidden !important; /* মোবাইলে যেন বাইরে না যায় */
}

#vsc_custom_design .title {
    font-weight: bold !important;
    font-size: 18px !important;
    border-bottom: 1px solid #cfcfcf !important;
    padding-bottom: 5px !important;
    color: #000 !important;
}

#vsc_custom_design .panel {
    background: #b7c9cc !important;
    margin-top: 10px !important;
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important; /* মোবাইলে নিচে নিচে আসার জন্য */
    min-height: 310px !important; /* আপনার দেওয়া ৩১০px */
}

#vsc_custom_design .left {
    padding: 18px !important;
    width: 100% !important;
    max-width: 360px !important; /* আপনার দেওয়া ৩৬০px */
}

#vsc_custom_design .right {
    flex: 1 !important; /* বাকি জায়গা নিয়ে নেবে */
    border-left: 1px solid #9fb0b3 !important;
    min-height: 100% !important;
}

#vsc_custom_design label {
    font-size: 14px !important;
    color: #000 !important;
    font-weight: normal !important;
}

#vsc_custom_design input[type="text"] {
    width: 100% !important;
    max-width: 300px !important; /* আপনার দেওয়া ৩০০px */
    height: 22px !important;
    border: 1px solid #8f8f8f !important;
    margin-top: 5px !important;
    margin-bottom: 14px !important;
    padding: 2px 4px !important;
    background: #fff !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

#vsc_captcha_canvas {
    border: 1px solid #9c9c9c !important;
    margin-bottom: 6px !important;
    background: #d7e4e6 !important;
    display: block !important;
    max-width: 100% !important; /* মোবাইলে ক্যানভাস রেসপন্সিভ করতে */
}

#vsc_custom_design .refresh {
    color: #2d3cff !important;
    font-size: 13px !important;
    cursor: pointer !important;
    display: block !important;
    margin-bottom: 10px !important;
    text-decoration: none !important;
}

#vsc_custom_design button {
    width: 100% !important;
    max-width: 300px !important; /* আপনার দেওয়া ৩০০px */
    height: 28px !important; /* আপনার দেওয়া ২৮px */
    background: #4f7da6 !important;
    border: 2px solid #274a69 !important;
    color: white !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 0 !important;
    line-height: normal !important;
    box-shadow: none !important;
    text-transform: none !important;
}

#vsc_custom_design button:hover {
    background: #3f668a !important;
}

/* মোবাইলের জন্য স্পেশাল ফিক্স */
@media (max-width: 768px) {
    #vsc_custom_design .right {
        display: none !important; /* মোবাইলে ফাঁকা ডান পাশটি হাইড করা হলো জায়গা বাঁচাতে */
    }
    #vsc_custom_design .panel {
        height: auto !important;
        padding-bottom: 20px !important;
    }
}

/* =======================================
   সার্চ রেজাল্ট ইনফো (আপনার আগের ডিজাইন অপরিবর্তিত) 
   ======================================= */
#vsc_plugin_wrapper {
    width: 100% !important;
    max-width: 650px !important;
    background-color: #e1f0f0 !important;
    border: 1px solid #b5c4df !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    color: #000 !important;
    margin: 20px auto !important;
}
#vsc_plugin_wrapper .vsc-header { background-color: #ffffff !important; padding: 5px 10px !important; font-weight: bold !important; font-size: 13px !important; border-bottom: 1px solid #b5c4df !important; }
#vsc_plugin_wrapper .vsc-res-padding { padding: 15px !important; }
#vsc_plugin_wrapper .vsc-flex-row { display: flex !important; gap: 15px !important; margin-bottom: 15px !important; }
#vsc_plugin_wrapper img.vsc-photo { width: 110px !important; height: 130px !important; border: 1px solid #666 !important; object-fit: cover !important; }
#vsc_plugin_wrapper p { margin: 4px 0 !important; font-size: 13px !important; color: #000 !important; }
#vsc_plugin_wrapper strong { font-weight: bold !important; color: #000 !important; }
#vsc_plugin_wrapper .status-red { color: #cc0000 !important; font-weight: bold !important; }
#vsc_plugin_wrapper .btn-center { text-align: center !important; margin-top: 25px !important; }
#vsc_plugin_wrapper button.btn-wide {
    width: 250px !important;
    background: linear-gradient(to bottom, #428bca, #2b5e8e) !important;
    border: 1px solid #1e466b !important;
    color: #ffffff !important;
    padding: 6px 25px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    cursor: pointer !important;
}