/* ============================================================================
   Sayban.pk — homepage widgets: [sayban_finder] + [sayban_featured]
   Matches the Claude Design hero finder + featured cards.
   ========================================================================== */
.sayban-finder,.sb-featured{
  --ink:var(--sb-charcoal); --ink2:var(--sb-ink-2); --ink3:var(--sb-ink-3);
  --gold:var(--sb-gold); --gold-deep:var(--sb-gold-deep); --gold-soft:var(--sb-gold-soft);
  --teal:var(--sb-teal); --teal-deep:var(--sb-teal-deep);
  --surface:#FFFFFF; --line:var(--sb-line); --line2:var(--sb-line-2); --brick:var(--sb-brick);
  --serif:'Marcellus', Georgia, serif;
  --sans:'Manrope','Segoe UI',system-ui,sans-serif;
  font-family:var(--sans); color:var(--ink); line-height:1.5;
}
.sayban-finder *,.sb-featured *{box-sizing:border-box;}

/* ---------------- HERO FINDER ---------------- */
.sayban-finder{max-width:1080px; margin:0 auto;}
.sf-panel{background:var(--surface); border-radius:14px; overflow:hidden; box-shadow:0 18px 50px rgba(31,28,20,.18);}
.sf-tabs{display:flex; background:var(--sb-paper-2); border-bottom:1px solid var(--line);}
.sf-tab{appearance:none; background:none; border:none; cursor:pointer; font-family:var(--sans);
  padding:16px 28px; font-size:15px; font-weight:700; color:var(--ink2); position:relative; transition:color .15s;}
/* neutralise Elementor's global button/link hover (pink) — keep tabs flat + gold */
.sf-tab,.sf-tab:hover,.sf-tab:focus,.sf-tab:active,.sf-tab:focus-visible{
  background:transparent !important; background-color:transparent !important;
  box-shadow:none !important; outline:none !important; text-decoration:none !important; border-radius:0 !important;}
.sf-tab:hover,.sf-tab:focus{color:var(--gold-deep) !important;}
.sf-tab.on{color:var(--gold-deep) !important;}
.sf-tab.on::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--gold);}

.sf-form{padding:22px 24px;}
.sf-fields{display:grid; grid-template-columns:repeat(4,1fr) auto; gap:16px; align-items:end;}
.sf-field{display:flex; flex-direction:column; gap:7px; min-width:0;}
.sf-field label{font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3);}
.sf-select{position:relative;}
.sf-select::after{content:""; position:absolute; right:14px; top:50%; margin-top:-3px; pointer-events:none;
  border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--ink3);}
.sf-form select,.sf-input{width:100%; height:48px; border:1px solid var(--line2); border-radius:9px;
  background:#fff; padding:0 14px; font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--ink);}
.sf-form select{-webkit-appearance:none; appearance:none; padding-right:34px; cursor:pointer;}
.sf-input::placeholder{color:var(--ink3); font-weight:500;}
.sf-form select:focus,.sf-input:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(176,140,70,.15); outline:none;}
.sf-search{height:48px; padding:0 34px; background:var(--gold) !important; color:#fff !important; border:1px solid var(--gold);
  border-radius:9px; font-family:var(--sans); font-weight:800; font-size:14.5px; letter-spacing:.02em; cursor:pointer;
  text-transform:uppercase; transition:background-color .15s;}
.sf-search:hover{background:var(--gold-deep) !important; border-color:var(--gold-deep); color:#fff !important;}

.sf-trust{display:flex; justify-content:center; gap:34px; flex-wrap:wrap; margin-top:18px;
  font-size:14px; font-weight:600; color:var(--sb-line);}
.sf-trust span{white-space:nowrap;}

/* ---------------- FEATURED GRID ---------------- */
.sb-featured-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}

/* ---------------- shared design card ---------------- */
.sb-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:0 2px 10px rgba(31,28,20,.05); display:flex; flex-direction:column; transition:transform .16s,box-shadow .16s;}
.sb-card:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(31,28,20,.12);}
.sb-card-img{position:relative; display:block; height:190px; background:var(--sb-line) center/cover no-repeat;}
.sb-card-badges{position:absolute; top:12px; left:12px; display:flex; gap:6px; z-index:2;}
.sb-b{display:inline-flex; align-items:center; font-size:10.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px; line-height:1.3;}
.sb-b-sale{background:var(--teal); color:#fff;}
.sb-b-rent{background:#fff; color:var(--teal-deep); border:1px solid var(--teal);}
.sb-b-feat{background:var(--gold); color:#fff;}
.sb-card-fav{position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:999px;
  background:rgba(255,255,255,.92); color:var(--ink2); font-size:17px; z-index:2; display:grid; place-items:center;}
.sb-card-body{padding:16px 18px 16px; display:flex; flex-direction:column; gap:6px;}
.sb-card-price{font-size:20px; font-weight:800; color:var(--gold-deep); letter-spacing:-.01em; line-height:1.2;}
.sb-card-price .sb-cur{font-weight:700;}
.sb-card-price .sb-per{font-size:13px; font-weight:600; color:var(--ink3);}
.sb-card-title{font-size:15px; font-weight:700; color:var(--ink); line-height:1.35;}
.sb-card-loc{font-size:13px; color:var(--ink3);}
.sb-card-specs{display:flex; gap:14px; border-top:1px solid var(--line); margin-top:8px; padding-top:11px;
  font-size:12.5px; font-weight:600; color:var(--ink2);}
.sb-card-specs span{position:relative;}
.sb-card-specs span + span::before{content:"·"; position:absolute; left:-9px; color:var(--line2);}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .sf-fields{grid-template-columns:1fr 1fr; }
  .sf-search{grid-column:1 / -1; width:100%;}
  .sb-featured-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .sf-tabs{overflow-x:auto;}
  .sf-fields{grid-template-columns:1fr;}
  .sf-trust{gap:16px; font-size:13px;}
  .sb-featured-grid{grid-template-columns:1fr;}
}

/* ============================ Browse by City ============================= */
.sb-cities{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
.sb-city{position:relative; display:block; aspect-ratio:4/5; border-radius:16px; overflow:hidden;
  background:var(--sb-charcoal); box-shadow:0 4px 16px rgba(31,28,20,.08); text-decoration:none;
  transition:transform .2s, box-shadow .2s;}
.sb-city:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(31,28,20,.20);}
.sb-city-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .35s ease;}
.sb-city:hover .sb-city-img{transform:scale(1.05);}
.sb-city-grad{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,16,10,0) 42%, rgba(20,16,10,.55) 72%, rgba(20,16,10,.88) 100%);}
.sb-city-meta{position:absolute; left:18px; right:18px; bottom:16px; z-index:2; color:#fff;}
.sb-city-meta b{display:block; font-family:'Marcellus',Georgia,serif; font-weight:400; font-size:22px; line-height:1.12; margin-bottom:3px; color:#fff;}
.sb-city-meta span{font-size:13px; color:rgba(255,255,255,.82); font-family:'Manrope',system-ui,sans-serif;}
@media (max-width:1100px){ .sb-cities{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .sb-cities{grid-template-columns:repeat(2,1fr); gap:12px;} .sb-city-meta b{font-size:19px;} }