/* ==========================================================
   COMMON SEARCH BAR — Buy / Rent + native select fields
   Compact, center-aligned (not full width). Same theme tokens
   as common/header.css (--sk-*).
========================================================== */
:root{
  --sk-p:#6f4fe0;
  --sk-pd:#5638bf;
  --sk-ps:#efeaff;
  --sk-ps2:#f6f3ff;
  --sk-ink:#1c1a29;
  --sk-muted:#7a7b87;
  --sk-line:#ece9f6;
  --sk-white:#ffffff;
  --sk-shadow:0 20px 48px rgba(35,25,70,.14);
}

.sk-searchbar-wrap *{box-sizing:border-box;}
.sk-searchbar-wrap{
  position:relative;z-index:20;
  padding-bottom:8px;
  display:flex;  /* center, not full width */
}

.sk-searchbar{
  background:#fff;border-radius:16px;
  border:1px solid var(--sk-line);padding:12px 14px 14px;
}

/* ---------- top row: tabs + requirement link ---------- */
.sk-sb-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--sk-line);
}
.sk-sb-tabs{display:inline-flex;align-items:center;gap:3px;background:var(--sk-ps2);border-radius:99px;padding:3px;}
.sk-sb-tab{
  display:flex;align-items:center;gap:6px;border:0;background:transparent;
  padding:7px 15px;border-radius:99px;font-size:12px;font-weight:700;
  color:var(--sk-muted);cursor:pointer;transition:.18s;white-space:nowrap;
}
.sk-sb-tab i{font-size:11px;}
.sk-sb-tab:hover{color:var(--sk-ink);}
.sk-sb-tab.active{
  background:linear-gradient(135deg,var(--sk-p),var(--sk-pd));
  color:#fff;box-shadow:0 6px 14px rgba(111,79,224,.32);
}

.sk-sb-requirement{
  display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--sk-muted);
  font-size:11.5px;font-weight:600;white-space:nowrap;flex-shrink:0;
}
.sk-sb-requirement i:first-child{color:#f5a524;font-size:12px;}
.sk-sb-requirement strong{color:var(--sk-p);font-weight:800;}
.sk-sb-requirement i:last-child{color:var(--sk-p);font-size:11px;transition:.15s;}
.sk-sb-requirement:hover i:last-child{transform:translateX(3px);}

/* ---------- bottom row: fields ---------- */
.sk-sb-fields{display:flex;align-items:center;gap:2px;}
.sk-sb-field{
  display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;
  transition:.15s;flex:1;min-width:0;
}
.sk-sb-field:hover,.sk-sb-field:focus-within{background:var(--sk-ps2);}
.sk-sb-field-icon{color:var(--sk-p);font-size:14px;flex-shrink:0;}
.sk-sb-field-text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.sk-sb-field-text label{font-size:9.5px;font-weight:700;color:var(--sk-muted);text-transform:uppercase;letter-spacing:.3px;}

/* Bootstrap .form-control / .form-select, re-themed to sit flush
   inside the compact field (no default BS border/shadow/height) */
.sk-sb-field-text .sk-sb-input,
.sk-sb-field-text .sk-sb-select{
  border:0;background-color:transparent;outline:0;padding:0;
  box-shadow:none;border-radius:0;min-height:0;line-height:1.3;
  font-size:13px;font-weight:700;color:var(--sk-ink);
  width:100%;font-family:inherit;cursor:pointer;
}
.sk-sb-field-text .sk-sb-input{cursor:text;}
.sk-sb-field-text .sk-sb-input::placeholder{color:var(--sk-muted);font-weight:600;}
.sk-sb-field-text .sk-sb-input:focus,
.sk-sb-field-text .sk-sb-select:focus{box-shadow:none;border-color:transparent;}
.sk-sb-field-text .sk-sb-select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7'><path d='M1 1l4 4 4-4' stroke='%237a7b87' stroke-width='1.5' fill='none' fill-rule='evenodd'/></svg>");
  background-repeat:no-repeat;background-position:right 1px center;
  background-size:10px 7px;padding-right:16px;
}

/* the dropdown list itself (Chrome/Edge/Firefox honour this;
   Safari falls back to native styling but stays usable) */
.sk-sb-field-text .sk-sb-select option{
  padding:10px 14px;font-size:13px;font-weight:600;color:var(--sk-ink);background:#fff;
}
.sk-sb-field-text .sk-sb-select option:checked,
.sk-sb-field-text .sk-sb-select option:hover{
  background:var(--sk-p);color:#fff;
}

.sk-sb-divider{width:1px;height:28px;background:var(--sk-line);flex-shrink:0;}

.sk-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;text-decoration:none;border:0;border-radius:10px;cursor:pointer;transition:.18s;}
.sk-sb-submit{
  color:#fff;background:linear-gradient(135deg,var(--sk-p),var(--sk-pd));
  padding:11px 20px;box-shadow:0 8px 18px rgba(111,79,224,.3);
  flex-shrink:0;margin-left:6px;white-space:nowrap;
}
.sk-sb-submit:hover{filter:brightness(1.06);box-shadow:0 10px 22px rgba(111,79,224,.38);}

/* ==========================================================
   RESPONSIVE
========================================================== */
@media (max-width:991px){
  .sk-searchbar-wrap{margin-top:-26px;}
  .sk-sb-requirement span{display:none;}
}

@media (max-width:767px){
  .sk-container{padding:0 14px;}
  .sk-searchbar{border-radius:14px;padding:10px 10px 12px;}
  .sk-sb-tabs{width:100%;}
  .sk-sb-tab{flex:1;justify-content:center;}
  .sk-sb-requirement{width:100%;order:3;justify-content:center;padding-top:6px;border-top:1px dashed var(--sk-line);}
  .sk-sb-requirement span{display:inline;font-size:11px;}

  .sk-sb-fields{flex-direction:column;align-items:stretch;gap:0;}
  .sk-sb-field{width:100%;padding:11px 8px;border-bottom:1px solid var(--sk-line);border-radius:0;}
  .sk-sb-field:first-child{border-top:1px solid var(--sk-line);}
  .sk-sb-divider{display:none;}
  .sk-sb-submit{width:100%;justify-content:center;margin-left:0;margin-top:10px;padding:12px;}
}