/* SS UX Pack v3.2.4 – global ClassiPress polish + recent slider (12 on desktop) */
:root{
  --ss-glass: rgba(255,255,255,.86);
  --ss-blur: 12px;
  --ss-border:#e8edf3;
  --ss-shadow: 0 14px 34px rgba(0,0,0,.08);
  --ss-radius: 14px;
}
html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* Header shadow */
header.header{ position:sticky; top:0; z-index:999; background:#fff; transition:box-shadow .2s ease; }
header.header.is-scrolled{ box-shadow:0 8px 24px rgba(0,0,0,.08); }

/* Global UX polish for ClassiPress */
button, .button, input[type=submit], .btn{
  border-radius: var(--ss-radius) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transition: transform .06s ease, box-shadow .2s ease;
}
button:hover, .button:hover, input[type=submit]:hover, .btn:hover{ transform: translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.10); }
input, select, textarea{
  border-radius: var(--ss-radius) !important;
  border:1px solid var(--ss-border) !important;
}
.card, .entry, .cp-listing, .post, .listing, .cp_ad, .panel{
  border-radius:16px; border:1px solid var(--ss-border);
  box-shadow:0 8px 22px rgba(0,0,0,.06); overflow:hidden; background:#fff;
}
h1,h2,h3{ letter-spacing:.2px; }
section, .content, .container{ scroll-margin-top: 88px; }
.cp-listings .post, .listings .post{ margin-bottom:16px; padding:0; }

/* Recent slider */
#ss-recent{ position:sticky; top:52px; z-index:998; background:var(--ss-glass);
  backdrop-filter:blur(var(--ss-blur)); -webkit-backdrop-filter:blur(var(--ss-blur));
  border-bottom:1px solid rgba(0,0,0,.05); padding:.45rem .8rem; }
#ss-recent .ss-reel{ display:flex; gap:.6rem; overflow:auto; padding-bottom:.2rem; scrollbar-width: thin;
  scroll-snap-type:x mandatory; scroll-behavior:smooth; }
#ss-recent .ss-mini{ flex:0 0 auto; width:180px; border:1px solid var(--ss-border); border-radius:14px; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.05); overflow:hidden; scroll-snap-align:start; }
#ss-recent .ss-thumb{ display:block; height:100px; background-size:cover; background-position:center; background-color:#eef3f7; }
#ss-recent .ss-title{ font-size:.92rem; padding:.5rem .6rem; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }

/* Sticky search bar */
#ss-sticky-bar{ position:sticky; top:96px; z-index:997; background:var(--ss-glass);
  backdrop-filter:blur(var(--ss-blur)); -webkit-backdrop-filter:blur(var(--ss-blur));
  border-top:1px solid rgba(0,0,0,.05); border-bottom:1px solid rgba(0,0,0,.05); box-shadow: var(--ss-shadow); }
#ss-sticky-bar .ss-wrap{ max-width:1260px; margin:0 auto; padding:.6rem 1rem; display:grid; gap:.6rem; align-items:center;
  grid-template-columns: 2fr 1.2fr 1fr 1fr 1fr auto auto; }
#ss-sticky-bar input, #ss-sticky-bar select{ border-radius:14px; border:1px solid var(--ss-border); padding:.6rem .8rem; background:#fff; }
#ss-sticky-bar .ss-btn{ border-radius:14px; padding:.65rem 1rem; font-weight:800; }

/* Drawer */
#ss-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:996; }
#ss-drawer{ position:fixed; top:0; right:0; bottom:0; width:420px; max-width:92vw; background:#fff; box-shadow: var(--ss-shadow);
  transform: translateX(100%); transition: transform .2s ease; z-index:997; }
#ss-drawer.open{ transform: translateX(0); }
#ss-overlay.open{ opacity:1; pointer-events:auto; }
#ss-drawer .ss-drawer-inner{ display:flex; flex-direction:column; height:100%; }
#ss-drawer header{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--ss-border); }
#ss-drawer .ss-adv-grid{ padding:12px 14px; display:grid; gap:.7rem; grid-template-columns: 1fr 1fr; }
#ss-drawer input, #ss-drawer select{ width:100%; border:1px solid var(--ss-border); border-radius:12px; padding:.55rem .7rem; }
#ss-drawer .ss-actions{ grid-column: 1 / -1; display:flex; gap:.5rem; justify-content:flex-end; }

/* Live results cards */
.ss-results{ display:grid; gap:14px; grid-template-columns: repeat(3, 1fr); margin: 12px 0; }
.ss-results .ss-card{ border:1px solid var(--ss-border); border-radius:16px; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.05); overflow:hidden; }
.ss-results .ss-thumb{ display:block; height:180px; background-size:cover; background-position:center; }
.ss-results .ss-thumb.ss-noimg{ background:#eef3f7; }
.ss-results .ss-meta{ padding:12px; }
.ss-title{ font-size:1.05rem; margin:0 0 6px; }
.ss-excerpt{ color:#51606c; margin:0; }

/* Mobile */
#ss-mobile-toggle{ display:none; position:sticky; top:48px; z-index:999; margin:8px auto; left:0; right:0; width:92%; text-align:center; }
@media(max-width:1024px){
  #ss-recent{ top:48px; }
  #ss-sticky-bar{ top:88px; }
  #ss-sticky-bar .ss-wrap{ grid-template-columns: 1fr 1fr 1fr; }
  .ss-results{ grid-template-columns: repeat(2, 1fr); }
  #ss-drawer{ width:360px; }
}
@media(max-width:640px){
  #ss-mobile-toggle{ display:block; }
  #ss-sticky-bar{ display:none; top:0; position:fixed; left:0; right:0; }
  body.ss-bar-open #ss-sticky-bar{ display:block; }
  #ss-recent .ss-mini{ width:140px; }
  .ss-results{ grid-template-columns: 1fr; }
}