body{
            background-color:#f5ede1;
        }
        
        @media screen and (max-width: 800px) {
            .desktopview {
                    display: none;
                    
                }
            }
         @media screen and (min-width: 801px) {
            .mobileview {
                    display: none;
                }
            }
            
            #desktopmainpg{
                height:100vh;
                width:100%;
                background-color:#1F1103;
                position:absolute;
            }
            #logomainpg{
                margin-top:15vh; 
                margin:auto; 
                height:200px; 
                width:200px;
            }
            #headinglookpg{
                color:#bfa786;
                text-align:center;
                font-style:'Outfit';
                font-weight:bolder;
            }
            
#buttonscontainer {
    display: flex;
    justify-content: center;
    gap: 30px; /* space between the buttons */
    margin-top: 30px;
    flex-wrap: wrap; /* allow wrap on small screens */
}

#malebtnouter,
#femalebtnouter {
    flex: 1 1 200px; /* grow, shrink, minimum 200px */
    max-width: 300px; /* cap maximum width */
}

#malebtnmain,
#femalebtnmain {
    width: 100%;
    height: 50px;
    font-size: 20px;
    font-family: 'Outfit', sans-serif;
    font-weight: bold;
    background-image: radial-gradient(at center center, #5D0706 0%, #1F1103 100%);
    color: #fff;
    border: 1px solid #bfa786;
    border-radius: 50px;
}

            #desktopmainpgmob{
            height:100vh;
            width:100%;
            background-color:#1F1103;
            position:absolute;
            }
            #logomainpgmob{
                margin-top:15vh;
                margin:auto;
                height:130px;
                width:130px;
            }
            #headinglookpgmob{
                color:#bfa786;
                text-align:center;
                font-family: 'Outfit', sans-serif;
                font-weight:bolder;
                font-size:20px;
            }
            #malebtnoutermob{
                height:50px;
                width:49%;
                float:left;
                margin-top:30px;
            }
            #malebtnmainmob{
                height:100%;
                width:150px;
                font-size:15px;
                font-style:'Outfit';
                font-weight:bold;
                background-image: radial-gradient(at center center, #310f75 0%, #1F1103 100%);
                transform: translate(20%, 0%);
                color:#fff; border:1px solid #bfa786;
                border-radius:50px;
            }
            #femalebtnoutermob{
                height:50px;
                width:49%;
                float:right;
                margin-top:30px;
            }
            #femalebtnmainmob{
                height:100%;
                width:150px;
                font-size:15px;
                font-family:'Outfit';
                font-weight:bold;
                background-image: radial-gradient(at center center, #5D0750 0%, #1F1103 100%);
                transform: translate(0%, 0%);
                color:#fff;
                border:1px solid #bfa786;
                border-radius:50px;
            }
            
            
            /*maledatafilter page*/
            
            
            
 @media screen and (max-width: 800px) {
            .desktopview {
                    display: none !important;
                }
               .filter-container {
    display: inline-block;
    position: relative;
  }
                .choosebtn.filter-btn {
    background-image: radial-gradient(at center center, #5D0706 0%, #1F1103 100%);
    color: #fff;
    padding: 10px;
    height: auto;
    width: 100px;
    display: inline-block; /* Ensures padding/border-radius works on label */
    border-radius: 0 10px 10px 0; /* Left sharp (0), right rounded (10px) */
    border: none; /* Removes default borders */
    cursor: pointer; /* Makes it feel like a button */
    text-align: center; /* Centers text (optional) */
}
  .filter-options {
    display: none;
    
    background-color:transparent;
    background-image: radial-gradient(at center center, #5D0706 0%, #1F1103 100%);
    padding: 10px;
    border: 1px solid #ddd;
    width: 120px;
    max-height: auto;
    overflow-y: auto;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
  }

  .filter-container:hover .filter-options {
    display: block;
  }

  .filter-options label {
    display: block;
   
    font-size: 10px;
  }

  .filter-options input[type="checkbox"] {
    margin-right: 8px;
  }

  .filter-container label {
    cursor: pointer;
    font-size: 10px;
    padding: 4px 0px 0px 0px;
    background-color: #f5f5f5;
    border-radius: 4px;
    text-align: center;
  }

  .filter-container label:hover {
    background-color: #ddd;
  }
  
  
}
            
            
            
         @media screen and (min-width: 801px) {
            .mobileview {
                    display: none !important;
                }
                              .filter-container {
    display: inline-block;
    position: relative;
  }
                .choosebtn{
        background-image: radial-gradient(at center center, #5D0706 0%, #1F1103 100%);
        color:#fff;
        height:40px;
        width:150px;
    }
  .filter-options {
    display: none;
    
    background-color:transparent;
    background-image: radial-gradient(at center center, #5D0706 0%, #1F1103 100%);
    padding: 10px;
    border: 1px solid #ddd;
    width: 170px;
    max-height: auto;
    overflow-y: auto;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
  }

  .filter-container:hover .filter-options {
    display: block;
  }

  .filter-options label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
  }

  .filter-options input[type="checkbox"] {
    margin-right: 8px;
  }

  .filter-container label {
    cursor: pointer;
    font-size: 16px;
    padding: 8px;
    background-color: #f5f5f5;
    border-radius: 4px;
    text-align: center;
  }

  .filter-container label:hover {
    background-color: #ddd;
  }
         }
       .filtertext {
    font-size: 14px;
    margin: 0;          /* Remove all outer margins */
    padding: 0;         /* Remove all padding */
    display: flex;      /* Tightly align checkbox + text */
    align-items: center; /* Vertically center */
    gap: 2px;           /* Only 2px between checkbox & text */
}
.filtertext input {
    height: 12px;
    width: 12px;        /* Fix width to prevent shifts */
    margin: 0;          /* Remove default checkbox margins */
    padding: 0;         /* Remove internal padding */
    transform: translateX(-2px); /* Pull checkbox 2px left to offset any remaining space */
}
        
    
  
  /* width */
::-webkit-scrollbar {
  width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
background-image: radial-gradient(at center center, #5D0706 0%, #1F1103 100%);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}
            
            #desktopfilterouter{
                height:100vh; width: 18%; background-color:#bfa786; padding:20px; float:left; position:fixed; overflow-y:auto; overflow-x: hidden;
                
                /*height:150px; width:100%; background-color:#bfa786; padding:20px; position:fixed; overflow-x: hidden; margin:auto;*/
            }
            #desktopfilterouter h5{
                color:#fff;
            }
            #data-body{
                width:80%; height:auto; float:right; padding:20px;
            }
            #loading-bar{
                display: none; text-align: center; margin: 10px;
            }
            
            
            
            
            
            
            
            
            .btn-clear {
    background-color: #f44336; /* Red color */
    color: white;
    border: none;
    padding: 10px 33px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    margin-top: 10px;
}

.btn-clear:hover {
    background-color: #d32f2f; /* Darker red on hover */
}

.btn-clear:disabled {
    background-color: #e0e0e0; /* Gray when disabled */
    cursor: not-allowed;
}
      
      
/* ===== Profiles: cards, tables, buttons ===== */
.match-container{
  background:#fff;
  border:2px solid #bfa786;
  border-radius:10px;
  margin:12px 8px;
  padding:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  font-family:'Outfit',sans-serif;
}

/* Pack more data per screen */
.table-tight td, .table-tight th{
  padding:6px 6px !important;
  font-size:13px;
}

/* Style tables inside cards */
.match-container table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.match-container td{
  padding:8px 6px;
  font-size:14px;
  color:#1F1103;
  vertical-align:top;
  border-bottom:1px solid #e0e0e0;
}
.match-container td:first-child{
  background:#f9f1e6;
  font-weight:600;
  color:#5D0706;
  width:42%;
  border-right:1px solid #ddd;
}

/* Buttons */
.profile-picture-link{
  display:inline-block;
  padding:6px 10px;
  background:#5D0706;
  color:#fff !important;
  border-radius:5px;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
}
.whatsapp-button{
  display:inline-block;
  margin-top:8px;
  padding:8px 12px;
  background:#25D366;
  color:#fff !important;
  border-radius:50px;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
}
.whatsapp-button:hover{ background:#1da851; }

.audio-button{
  display:inline-block;
  padding:6px 12px;
  background:#1F1103;
  color:#fff !important;
  border-radius:5px;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
}
.audio-button:hover{ background:#5D0706; }

/* Mobile tweaks */
@media (max-width:600px){
  .match-container{ padding:12px; margin:10px 2px; }
  .match-container td{ font-size:13px; padding:8px 6px; }
  .match-container td:first-child{ width:46%; }
  .whatsapp-button{ width:80%; text-align:center; font-size:14px; }
}
            
/* ===== Mobile tweaks for profile cards ===== */
@media screen and (max-width: 600px) {
  /* Card spacing tightened */
  .match-container {
    margin: 6px 4px;        /* less outside space */
    padding: 8px 8px 10px;  /* less inside padding */
    box-shadow: none;       /* optional: flatter look on small screens */
  }

  /* Headings smaller with tighter spacing */
  .match-container h2 {
    font-size: 16px;
    line-height: 1.2;
    margin: 4px 0 2px;
  }
  .match-container h3 {
    font-size: 13px;
    line-height: 1.2;
    margin: 0 0 6px;
    font-weight: 600;
  }

  /* Table compact + full width */
  .match-container table {
    width: 100%;
    table-layout: fixed; /* keeps columns stable */
    font-size: 12px;
  }
  .match-container .table-tight td {
    padding: 4px 6px;
    vertical-align: top;
  }

  /* Left label column a bit narrower so values have more room */
  .match-container td:first-child {
    width: 40%;
    background-color: #f9f1e6 !important;
    border-right: 1px solid #ccc !important;
  }

  /* Buttons slightly smaller & full width if you prefer */
  .profile-picture-link,
  .audio-button {
    font-size: 11px;
    padding: 6px 8px;
    margin-top: 6px;
  }
  .whatsapp-button {
    font-size: 13px;
    padding: 8px 12px;
    width: 100%;         /* makes the CTA easy to tap */
    margin-top: 10px;
  }
}

/* Optional: a bit tighter on all screens */
.table-tight td {
  padding: 6px 8px;
}

/* ---- MOBILE: make headings smaller + reduce side gutters ---- */
@media (max-width: 800px) {
  /* Make profile headings smaller */
  .match-container h2 {
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin: 4px 0 2px !important;
  }
  .match-container h3 {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 0 0 6px !important;
    font-weight: 600 !important;
  }

  /* Expand the table/card area next to the 30% sidebar */
  #data-bodymob,
  #data-body {                       /* in case your page uses #data-body */
    width: calc(100% - 30% - 4px) !important;  /* fill remaining space */
    padding: 8px 6px !important;                /* tighter inner padding */
    margin: 0 !important;
  }

  /* Reduce outer margins on each card so it hugs the container */
  .match-container {
    margin: 6px 0 !important;
    padding: 8px 8px 10px !important;
    box-shadow: none; /* optional */
  }

  /* Compact table cells a bit more on mobile */
  .match-container table { font-size: 12px !important; }
  .match-container td { padding: 6px 6px !important; }
  .match-container td:first-child {
    width: 40% !important;                        /* more room for values */
    background-color: #f9f1e6 !important;
    border-right: 1px solid #ccc !important;
  }

  /* Buttons a touch smaller */
  .profile-picture-link, .audio-button { font-size: 11px !important; padding: 6px 8px !important; }
  .whatsapp-button { font-size: 13px !important; padding: 8px 12px !important; width: 100% !important; }
}


/* MOBILE: remove right gutter and let the card fill the row */
@media (max-width: 800px) {
  html, body { margin: 0 !important; padding: 0 !important; }

  /* override inline width="95%" */
  .mobileview { width: 100% !important; }

  /* fill everything except the 30% fixed sidebar */
  #data-bodymob { 
    width: calc(100% - 30%) !important; 
    padding-right: 10px !important;   /* tighter padding on the right */
    margin: 0 !important;
    overflow-x: hidden !important;   /* hide any stray 1–2px overflow */
    box-sizing: border-box;
  }

  /* optional: make sure the left sidebar doesn’t “steal” extra width via padding */
  .mobileview > div[style*="position:fixed"] {
    box-sizing: border-box;
  }
}


/* Left-align the checkbox rows inside the dropdowns */
.filter-options { text-align: left; }

.filter-options label,
.filter-options .filtertext {
  text-align: left !important;   /* beats .filter-container label */
  background: transparent;       /* remove button-like bg on options */
  padding: 4px 0;
  border-radius: 0;
}

/* Make the checkbox + text sit neatly to the left */
.filter-options .filtertext {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.filter-options .filtertext input[type="checkbox"] {
  margin: 0 6px 0 0;
  transform: none;
}

/* Make option text inside dropdowns white */
.filter-options label,
.filter-options .filtertext,
.filter-options .filtertext *:not(input) {
  color: #fff !important;
}


/* Remove gray background on filter options (labels inside dropdowns) */
.filter-options label,
.filter-options .filtertext {
  background: transparent !important;
  box-shadow: none !important;
}

/* No hover/active fill */
.filter-options label:hover,
.filter-options label:active,
.filter-options label:focus {
  background: transparent !important;
  outline: none !important;
}

/* Optional: remove mobile tap highlight flash */
.filter-options label,
.filter-options input {
  -webkit-tap-highlight-color: transparent;
}


.no-results{
  background:#fff;
  border:2px dashed #bfa786;
  border-radius:10px;
  padding:16px;
  margin:12px 10px;
  text-align:center;
  font-family:'Outfit',sans-serif;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
}
.no-results h3{
  margin:6px 0 8px;
  font-size:18px;
  color:#5D0706;
}
.no-results p{
  margin:0 0 12px;
  font-size:14px;
  color:#1F1103;
}
.no-results-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}
.no-results .btn-try{
  background:#bfa786;
  color:#1F1103;
  padding:8px 12px;
  border-radius:999px;
  border:none;
  font-weight:700;
  cursor:pointer;
}
.no-results a.btn-wa{
  background:#25D366;
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
}
.no-results a.btn-home{
  background:#1F1103;
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
}

/* Mobile tweaks */
@media (max-width:600px){
  .no-results h3{ font-size:16px; }
  .no-results p { font-size:13px; }
}