/* Variables & base font */

:root{

--primary: #d63384;

--accent: #1d4ed8;

--muted: #6b7280;

--bg: #f8fafc;

--card: #ffffff;

--border: #e6e9ef;

--success: #10b981;

--danger: #ef4444;

--radius: 12px;

--gap: 16px;

--shadow: 0 8px 30px rgba(2,6,23,0.06);

--text: #0f172a;

--soft: #f3f6fb;

font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

box-sizing: border-box;

}








/* --- Fixed inline location + search layout (desktop + mobile) --- */
.location-row {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  flex-wrap: nowrap;
}

/* Input: allow shrinking on small screens */
.input-location {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;        /* fully rounded pill */
  border: 1px solid rgba(29,78,216,0.2) !important;
  
  /* modern subtle tint + glass effect */
  background: linear-gradient(90deg, rgba(214,51,132,0.05), rgba(29,78,216,0.07)) !important;
  backdrop-filter: blur(6px) !important;

  font-size: 15px !important;
  color: #000 !important;                /* black text */
  font-weight: 500 !important;

  box-shadow: 0 6px 18px rgba(29,78,216,0.1),
              0 2px 6px rgba(214,51,132,0.08) !important;
  transition: transform .12s ease, box-shadow .16s ease, border-color .12s ease, background .12s ease !important;
}

/* Ensure placeholder & focus look good */
.input-location::placeholder { 
  color: #555 !important; 
  opacity: 1 !important;
}

.input-location:focus {
  outline: none !important;
  transform: translateY(-2px) !important;
  border-color: var(--accent) !important;
  background: linear-gradient(90deg, rgba(214,51,132,0.08), rgba(29,78,216,0.12)) !important;
  box-shadow: 0 14px 36px rgba(29,78,216,0.18),
              0 6px 20px rgba(214,51,132,0.12) !important;
}

/* 🔹 Mobile-specific (max-width: 480px) */
@media (max-width: 480px) {
  .input-location::placeholder {
    font-size: 13px !important;   /* smaller placeholder */
  }
}



/* Search button: fixed size, visible color in all states */
button.btn-search,
.fds-search-wrap .btn-search {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(90deg, var(--primary), var(--accent)) !important;
  color: #fff !important;           /* always white text */
  border: none !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 30px rgba(213,51,132,0.12) !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;        /* do not stretch */
  min-width: 90px !important;       /* set a reasonable min width */
  transition: opacity .12s ease, transform .08s ease, box-shadow .12s ease !important;
}

/* hover / focus */
.fds-search-wrap .btn-search:hover,
.fds-search-wrap .btn-search:focus,
.fds-search-wrap .btn-search:active {
  opacity: 0.98 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 36px rgba(29,78,216,0.12) !important;
  color: #fff !important;           /* make sure color stays white */
}

/* If some other CSS turns background to white on active/focus, force it back */
button.btn-search:focus,
button.btn-search:active {
  background-image: linear-gradient(90deg, var(--primary), var(--accent)) !important;
  color: #fff !important;
}

/* Actions compact (only More filters now) */
.fds-actions-compact {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 8px !important;
}




/* Compact More Filter & Reset buttons on mobile */
@media (max-width: 700px) {
  .fds-actions-compact button,
  .fds-actions-compact .fds-btn {
    padding: 6px 10px !important;   /* ছোট padding */
    font-size: 13px !important;     /* টেক্সট ছোট */
    border-radius: 8px !important;  /* corner একটু ছোট */
    min-width: auto !important;     /* default width বাদ */
    flex: 0 0 auto !important;      /* auto shrink */
  }
}

/* আরও ছোট স্ক্রিনের জন্য (520px এর নিচে) */
@media (max-width: 520px) {
  .fds-actions-compact button,
  .fds-actions-compact .fds-btn {
    padding: 5px 8px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }
}








/* Responsive: on small screens keep them inline but allow sensible stacking */
@media (max-width: 700px) {
  .fds-search-top { flex-direction: column !important; gap: 12px !important; align-items: stretch !important; }
  .location-row { flex-wrap: wrap !important; }
  .location-row .input-location { flex: 1 1 100% !important; }
  .location-row .btn-search { flex: 0 0 auto !important; margin-left: 0 !important; }

  button.btn-search,
  .fds-search-wrap .btn-search { min-width: 90px !important; max-width: 160px !important; }
}

/* small defensive rule */
.fds-search-wrap .btn-search { 
  background: linear-gradient(90deg, var(--primary), var(--accent)) !important; 
  color: #fff !important; 
}







/* ---------------------------

Results header & grid

--------------------------- */

#fds-results{ margin-top:18px; min-height:80px; }

.fds-result-header{

margin-bottom:12px;

display:flex;

align-items:center;

justify-content:flex-start;

gap:12px;

flex-wrap:wrap;

}

.fds-result-header h2{

font-size:18px;

margin:0;

color:var(--text);

font-weight:700;

display:flex;

align-items:center;

gap:12px;

}

/* Driver count pill – white center + subtle gradient edge */

.fds-result-header .fds-count-pill {

display: inline-flex;

align-items: center;

justify-content: center;

padding: 6px 14px;

border-radius: 999px;

font-weight: 800;

font-size: 13px;

color: #000; /* number black */

/* gradient border trick */

background: linear-gradient(90deg, #fff, #fff) padding-box,

linear-gradient(90deg, rgba(214,51,132,0.5), rgba(29,78,216,0.5)) border-box;

border: 2px solid transparent;

box-shadow: 0 4px 10px rgba(0,0,0,0.08);

}

/* Grid */

.fds-grid{

display:grid;

grid-template-columns: repeat(3, 1fr);

gap:18px;

}









/* ---------------------------

Cards

--------------------------- */

.fds-card{

background: var(--card);

border-radius: var(--radius);

overflow:hidden;

border:1px solid var(--border);

transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .14s;

display:flex;

flex-direction:column;

min-height: 360px;

}

.fds-card:hover{ transform: translateY(-8px); box-shadow: 0 20px 40px rgba(2,6,23,0.08); }

/* Overlay / Card photo fix (more zoom-out, full view) */

#fds-overlay-results .fds-card-media {

height: 320px;                  /* 🔑 container একটু লম্বা */

background: #fff;               /* সাদা ব্যাকগ্রাউন্ড */

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

}

/* Card media - square avatar */

#fds-overlay-results .fds-card-media {

width: 160px;               /* square size */

height: 160px;

margin: 16px auto 10px;     /* center align */

border-radius: 16px;        /* 🔑 এখন আর গোল না, বরং হালকা rounded square */

overflow: hidden;

border: 3px solid #fff;     /* white border */

box-shadow: 0 6px 18px rgba(0,0,0,0.12);

background: #f9fafb;

display:flex;

align-items:center;

justify-content:center;

}

#fds-overlay-results .fds-card-media img {

width: 100%;

height: 100%;

object-fit: cover;         /* ছবির main অংশ focus করবে */

object-position: center;

border-radius: 16px;       /* square রাখার জন্য same border-radius */

}

/* card body */

.fds-card-body{

padding:16px;

display:flex;

flex-direction:column;

gap:10px;

flex:1;

}

.fds-card-title{

font-size:17px;

margin:0;

display:flex;

align-items:center;

gap:10px;

justify-content:space-between;

flex-wrap:wrap;

}

.fds-card-title a{ color:var(--text); text-decoration:none; font-weight:700; }










/* ===========================
   Compact / Alternative Tag Style
   (Replace previous tag block with this)
   =========================== */

/* container context */
.fds-card { position: relative; }

/* compact defaults for all tags inside cards */
.fds-card-meta .tag,
.fds-card-meta .exp-pill,
.fds-card-body .tag,
.fds-card-body .exp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;           /* much smaller padding */
  min-height: 26px;          /* compact height */
  line-height: 1;
  font-size: 12px;           /* smaller text */
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  box-shadow: none;          /* remove heavy shadow for compact look */
  border: 1px solid rgba(255,255,255,0.06);
  background-clip: padding-box;
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform .12s ease, opacity .12s ease;
}

/* icons inside tags */
.fds-card-meta .tag svg,
.fds-card-meta .exp-pill svg,
.fds-card-body .tag svg,
.fds-card-body .exp-pill svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  vertical-align: middle;
  fill: currentColor;
  stroke: none;
  opacity: 0.95;
}

/* Neutral subtle backdrop to increase legibility over images */
.fds-card-meta .tag::before,
.fds-card-meta .exp-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.04));
  opacity: 0.9;
  pointer-events: none;
}

/* Color variations (more muted / modern) */
.fds-card .tag.tag-location,
.fds-card-body .tag.tag-location {
  background: rgba(34,197,94,0.12) !important;   /* হালকা সবুজ ব্যাকগ্রাউন্ড */
  color: #15803d !important;                     /* গাঢ় সবুজ টেক্সট + আইকন */
  border: 1px solid #16a34a !important;          /* সবুজ বর্ডার */
  box-shadow: none !important;
}



.fds-card .tag.tag-category,
.fds-card-body .tag.tag-category {
  background: rgba(147,51,234,0.12) !important;
  color: #6d28d9 !important;
  border: 1px solid #7c3aed !important;
  box-shadow: none !important;
}




/* Experience — Orange + Car Icon */
.fds-card .exp-pill,
.fds-card-body .exp-pill {
  background: rgba(249,115,22,0.12) !important;
  color: #c2410c !important;
  border: 1px solid #ea580c !important;
  box-shadow: none !important;

  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  border-radius: 999px;
  padding: 4px 10px;
}

/* Car icon before text */
.fds-card .exp-pill::before,
.fds-card-body .exp-pill::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23c2410c' viewBox='0 0 24 24'><path d='M5 11l1-3c.2-.6.8-1 1.4-1h9.2c.6 0 1.2.4 1.4 1l1 3H5zm0 2h14v6h-2v-2H7v2H5v-6zm3.5 3.5c.8 0 1.5-.7 1.5-1.5S9.3 13.5 8.5 13.5 7 14.2 7 15s.7 1.5 1.5 1.5zm9 0c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5-1.5.7-1.5 1.5.7 1.5 1.5 1.5z'/></svg>") no-repeat center;
  background-size: contain;
}






/* Hover micro-interaction (subtle) */
.fds-card-meta .tag:hover,
.fds-card-meta .exp-pill:hover {
  transform: translateY(-2px);
  opacity: 0.98;
}

/* Accessibility: ensure strong inside inherits color */
.fds-card-meta .tag strong,
.fds-card-meta .tag span,
.fds-card-body .tag strong,
.fds-card-body .tag span {
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Desktop spacing: keep tags inline but compact */
.fds-card-meta {
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap:wrap;   /* allow wrap on wide screens */
  margin-top: 8px;
}




@media (max-width: 760px) {
  .fds-card-meta .tag,
  .fds-card-body .tag,
  .fds-card-body .exp-pill {
    font-size: 11px !important;     /* ছোট ফন্ট */
    padding: 2px 6px !important;    /* ভেতরের ফাঁকা জায়গা কম */
    min-height: 22px !important;    /* height ছোট */
    gap: 4px !important;            /* icon আর টেক্সটের মাঝখানের ফাঁকা কম */
  }

  .fds-card-meta .tag svg,
  .fds-card-body .tag svg,
  .fds-card-body .exp-pill svg {
    width: 10px !important;
    height: 10px !important;        /* icon ছোট */
  }
}










/* stats & actions */

.fds-card-stats{ display:flex; gap:12px; color:var(--muted); font-size:14px; margin-top:6px; }

.fds-card-actions{ margin-top:auto; display:flex; gap:8px; align-items:center; }







/* ===== View Profile strong button and compact tags override ===== */
.fds-card-meta .tag.tag-location {
  background: rgba(37,163,80,0.10); /* light green bg */
  color: #065f46;                   /* dark green text/icon */
  border: 1px solid rgba(16,185,129,0.22); /* green border */
}
.fds-card-meta .tag.tag-location svg,
.fds-card-meta .tag.tag-location .svg-icon {
  fill: currentColor;
  width: 12px;
  height: 12px;
}

/* New View Profile button style (high specificity so it applies) */
.fds-card .fds-btn-outline,
#fds-overlay-results .fds-card .fds-btn-outline {
  background: linear-gradient(135deg,#10b981 0%,#059669 100%) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 22px rgba(5,150,105,0.12) !important;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
}
.fds-card .fds-btn-outline:hover,
#fds-overlay-results .fds-btn-outline:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(5,150,105,0.18) !important;
}

/* Mobile: make tags smaller & horizontal scroll */
@media (max-width:520px){
  .fds-card-meta { overflow-x:auto; -webkit-overflow-scrolling:touch; gap:8px; padding-bottom:6px; }
  .fds-card-meta .tag { padding:4px 8px !important; font-size:12px !important; min-height:26px !important; }
  .fds-card-meta .tag.tag-location { padding-left:6px !important; padding-right:6px !important; }
  .fds-card .fds-btn-outline { padding:8px 12px !important; font-size:13px !important; }
}









/* pagination */

.fds-pagination{ display:flex; gap:8px; justify-content:center; margin-top:18px; flex-wrap:wrap; }

.fds-pagination .fds-page{ padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:#fff; cursor:pointer; }

.fds-pagination .fds-page.is-active{ background:var(--accent); color:#fff; border-color:var(--accent); }



#fds-results.is-loading{ opacity:0.6; pointer-events:none; position:relative; }

#fds-results.is-loading::after{

content:''; position:absolute; inset:0;

background: linear-gradient(90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.6), rgba(255,255,255,0.0));

animation: shimmer 1.2s infinite;

}

@keyframes shimmer{ 0%{ transform: translateX(-100%);} 100%{ transform: translateX(100%);} }


/* force no gap and badge flush to name */

.driver-name {

display: inline-flex;

align-items: center;

gap: 0 !important;

white-space: nowrap;

}

.driver-name + .fd-search-verified-badge,

.driver-name > .fd-search-verified-badge {

margin-left: 0 !important;

margin-right: 0 !important;

vertical-align: middle;

transform: translateY(0) !important;

}

/* fine-tune tiny overlap if needed (tweak -1px / -2px) */

.driver-name + .fd-search-verified-badge { margin-left: -1px; }

.fd-search-verified-badge {

display: inline-flex;

align-items: center;

justify-content: center;

margin-left: 0px;       /* নাম থেকে দূরত্ব একটু বাড়ালাম */

vertical-align: middle;

line-height: 1;

/* pointer-events: none; / / uncomment করলে ব্যাজ ক্লিকেবল হবে না */

}

/* SVG sizing & crisp rendering */

.fd-search-verified-flower {

width: 25px;   /* আগে ছিল 25px */

height: 25px;  /* আগে ছিল 20px, এখন square */

display: block;

shape-rendering: geometricPrecision;

image-rendering: optimizeQuality;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

filter: drop-shadow(0 1px 0 rgba(0,0,0,0.08));

}

/* slightly smaller on small screens */



/* rating */

.fds-rating { display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:15px; line-height:1; }

.fds-rating .star{ font-size:20px; color:#e6e7ea; position:relative; display:inline-block; line-height:1; }

.fds-rating .star.filled { color: #f59e0b; }

.fds-rating .star.half::before { content:"★"; color:#f59e0b; position:absolute; left:0; top:0; width:50%; overflow:hidden; }

.fds-rating .rating-value{ font-weight:700; color:var(--text); font-size:14px; }

.fds-rating .rating-count{ color:var(--muted); font-weight:600; font-size:13px; }

/* small polish */

.fds-meta-item svg{ width:14px; height:14px; color:var(--muted); }

/* ---------------------------

OVERLAY (fullscreen cinematic backdrop,

but KEEP CARDS WHITE + existing buttons)

--------------------------- */

/* Backdrop: almost-solid black */

#fds-overlay {

position: fixed !important;

inset: 0 !important;

width: 100% !important;

height: 100% !important;

background: rgba(0,0,0,0.95) !important;

z-index: 2147483647 !important;

display: none;

align-items: center;

justify-content: center;

padding: 20px;

overflow: hidden;

}

#fds-overlay[aria-hidden="false"] { display:flex !important; }

/* lock body scroll when overlay open (toggle body.fds-overlay-open via JS) */

body.fds-overlay-open { overflow:hidden !important; touch-action:none !important; height:100% !important; }

/* Inner container - transparent so backdrop shows, cards remain white */

.fds-overlay-inner {

background: transparent;

border-radius: 10px;

max-width: 1200px;

width: 100%;

height: calc(100vh - 60px);

overflow-y: auto;

-webkit-overflow-scrolling: touch;

padding: 18px;

box-sizing: border-box;

display:flex;

flex-direction:column;

gap:16px;

align-items:center;

}

/* Results area full width */

#fds-overlay-results { width:100%; max-width:1200px; }




/* Responsive grid inside overlay */

#fds-overlay-results { width:100%; max-width:1200px; }

/* Responsive grid inside overlay */

#fds-overlay-results .fds-grid { grid-template-columns: repeat(1,1fr); gap:14px; width:100%; margin:0 auto; }

@media (min-width:700px){ #fds-overlay-results .fds-grid { grid-template-columns: repeat(2,1fr); max-width:1000px; } }

@media (min-width:1100px){ #fds-overlay-results .fds-grid { grid-template-columns: repeat(3,1fr); max-width:1200px; } }














/* Keep cards white and crisp inside overlay */

#fds-overlay-results .fds-card {

background:#fff !important;

color:inherit !important;

border:1px solid var(--border) !important;

box-shadow: 0 8px 30px rgba(2,6,23,0.06) !important;

backdrop-filter: none !important;

transition: transform .16s ease, box-shadow .16s ease;

border-radius: 12px;

overflow:hidden;

}

/* Card media and image handling */

#fds-overlay-results .fds-card-media { height:220px; background:#f9fafb; }

#fds-overlay-results .fds-card-media img,

#fds-overlay-results .fds-card-media .fds-avatar {

width:100%; height:100%;

object-fit: cover; object-position: 50% 35%;

display:block;

}

/* Keep card body original (dark text on white) */

#fds-overlay-results .fds-card-body { padding:16px; color:var(--text); background:#fff; }

#fds-overlay-results .fds-card-title a { color:var(--text); }

/* Keep rating / tags / buttons style consistent */

#fds-overlay-results .fds-rating .star.filled { color:#f59e0b; }

#fds-overlay-results .tag { background:#fff !important; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02); color:var(--text); border:1px solid rgba(15,23,42,0.03); }

/* Preserve your outlined button style inside overlay */

#fds-overlay-results .fds-btn-outline {

background:#fff !important;

color:var(--accent) !important;

border:1px solid rgba(15,23,42,0.06) !important;

padding:8px 12px !important;

border-radius:8px !important;

font-weight:700 !important;

width:auto !important;

box-shadow:0 6px 18px rgba(2,6,23,0.04) !important;

}

/* Overlay header look */

.fds-overlay-inner .fds-result-header {

align-self:flex-start;

background:transparent;

padding:6px 8px;

border-radius:999px;

display:flex;

gap:12px;

align-items:center;

margin-bottom:6px;

}

.fds-overlay-inner .fds-result-header h2 { font-size:18px; color:#fff; font-weight:800; }

/* Overlay close button styled like pill */

#fds-close {

position: absolute;

top: 14px;

right: 14px;

width: 42px;

height: 42px;

border-radius: 50%;

font-size: 20px;

font-weight: 700;

line-height: 1;

cursor: pointer;

/* gradient border with white center */

background: linear-gradient(90deg, #fff, #fff) padding-box,

linear-gradient(90deg, rgba(214,51,132,0.6), rgba(29,78,216,0.6)) border-box;

border: 2px solid transparent;

color: #000; /* cross icon color */

box-shadow: 0 4px 12px rgba(0,0,0,0.25);

display: flex;

align-items: center;

justify-content: center;

transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s;

}

#fds-close:hover {

transform: translateY(-2px) rotate(90deg);

opacity: 0.9;

box-shadow: 0 6px 16px rgba(0,0,0,0.3);

}

/* Pagination and scroll visuals */

#fds-overlay-results .fds-pagination { margin-top:12px; justify-content:center; }

.fds-overlay-inner::-webkit-scrollbar { width: 10px; }

.fds-overlay-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius:8px; }

/* Mobile adjustments for overlay */

@media (max-width:480px){

.fds-overlay-inner { padding:12px; height: calc(100vh - 40px); }

#fds-close { width:34px; height:34px; top:10px; right:10px; font-size:18px; }

}











/* autocomplete dropdown */
.location-row { position: relative; }

.fds-loc-suggestions {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 2147483650;
  list-style: none;
  margin: 0;
  padding: 6px 4px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.06);
  max-height: 240px;
  overflow: auto;
}

.fds-loc-item {
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  font-weight: 600;
  border-radius: 8px;
}

.fds-loc-item:hover,
.fds-loc-item.is-active {
  background: linear-gradient(90deg, rgba(29,78,216,0.06), rgba(214,51,132,0.03));
  color: var(--accent);
}



/* Label under which input field থাকে, তার নিচে gap */
.lbl-location {
  display: block;            /* label ব্লক করলে input নিচে যাবে */
  margin-bottom: 6px;        /* Location আর input এর মাঝে gap */
  font-weight: 600;
  color: var(--text);
}



/* ====== Redesigned Filter Dropdown ====== */
.fds-filter {
  appearance: none;                 /* remove browser default */
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100% !important;           /* parent অনুযায়ী full width */
  min-width: 180px;                 /* ন্যূনতম 180px রাখলাম */
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.15);
  
  background: #fff;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;

  box-shadow: 0 4px 12px rgba(2,6,23,0.05);
  transition: all 0.2s ease;
  padding-right: 42px; /* space for arrow */
}

/* Hover / Focus */
.fds-filter:hover,
.fds-filter:focus {
  border-color: var(--accent);
  background: linear-gradient(90deg, rgba(248,250,252,1), rgba(241,245,249,0.95));
  box-shadow: 0 6px 16px rgba(29,78,216,0.10);
  outline: none;
}

/* Custom dropdown arrow (accent color) */
.fds-filter {
  background-image: url("data:image/svg+xml;utf8,<svg fill='%231d4ed8' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

/* Options styling */
.fds-filter option {
  font-weight: 500;
  padding: 10px;
  background: #fff;
  color: var(--text);
}







/* End of cleaned CSS */