/* ZFLUENT — site-wide search: header suggestion dropdown + results page.
   Logical properties throughout so RTL comes for free. */

:root { --zfs-accent:#7a3ff2; --zfs-accent-2:#a855f7; }

/* ══════════════════════════════════════════════ header popup + dropdown ══ */

/* The theme ships a cyan submit button and a square field — bring both onto the brand.
   Selectors mirror the theme's own depth (.search-popup .search-popup__content …) so these win. */

/* The theme centres the box in the viewport (top:50% + translateY(-50%)), which leaves the
   suggestions hanging off the bottom of the screen. Pin it near the top instead and let the
   whole thing scroll, so the field is where the eye already is and every hit is reachable. */
.search-popup .search-popup__content{
  position:fixed;top:0;left:50%;bottom:0;
  transform:translate(-50%,0);
  max-width:760px;width:100%;
  padding:96px 16px 32px;
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  pointer-events:none; /* the gap around the box stays click-through, so it closes the popup */
}
.search-popup .search-popup__content > *{pointer-events:auto;}
.search-popup.active .search-popup__content{
  width:100%;opacity:1;transform:translate(-50%,0);transition-delay:.25s;
}
@media (max-width:767px){
  .search-popup .search-popup__content{padding-top:72px;}
}
.search-popup .search-popup__content .search-popup__form{display:flex;align-items:stretch;
  border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(18,23,29,.22);}
.search-popup .search-popup__content .search-popup__form input[type=search],
.search-popup .search-popup__content .search-popup__form input[type=text]{
  width:100%;border:0;height:62px;padding:16px 22px;
  font-size:16px;font-weight:600;color:#12171d;background:#fff;}
.search-popup .search-popup__content .search-popup__form input:focus{outline:none;}
.search-popup .search-popup__content .search-popup__form input::placeholder{color:#9aa0a6;font-weight:600;}
.search-popup .search-popup__content .search-popup__form button{
  position:static;flex:0 0 68px;width:68px;height:62px;border:0;border-radius:0;cursor:pointer;
  font-size:17px;color:#fff;background:linear-gradient(135deg,var(--zfs-accent),var(--zfs-accent-2));
  transition:filter .18s;}
.search-popup .search-popup__content .search-popup__form button:hover{filter:brightness(1.08);}
.search-popup .search-popup__content .search-popup__form button::after{display:none;}

/* Default (results page): floats under the field it belongs to. */
.zf-suggest{
  position:absolute;inset-inline:0;top:calc(100% + 10px);z-index:30;
  max-height:min(62vh,520px);overflow-y:auto;overscroll-behavior:contain;
  background:#fff;border:1px solid #e9eaee;border-radius:18px;
  box-shadow:0 24px 60px rgba(18,23,29,.22);
  padding:8px;text-align:start;
}
.zf-suggest[hidden]{display:none;}

/* Inside the popup the panel sits in normal flow, directly beneath the field: the popup
   itself scrolls, so a long result list stays reachable instead of running off-screen. */
.search-popup .zf-suggest{
  position:static;margin-top:12px;max-height:none;overflow:visible;
}

.zf-sg__group + .zf-sg__group{margin-top:4px;border-top:1px solid #f0f1f4;padding-top:6px;}
.zf-sg__head{display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px 6px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9aa0a6;}
.zf-sg__head span{font-size:11px;font-weight:800;color:#7a3ff2;background:#f4f0ff;border-radius:20px;padding:2px 8px;letter-spacing:0;}

.zf-sg__item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;
  color:#12171d;text-decoration:none;transition:background .15s;}
.zf-sg__item:hover,.zf-sg__item[aria-selected="true"]{background:#f6f3ff;color:#12171d;}
.zf-sg__thumb{width:42px;height:42px;flex:0 0 42px;border-radius:11px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f3eefe,#faf5ff);border:1px solid rgba(122,63,242,.14);color:var(--zfs-accent);font-size:15px;}
.zf-sg__thumb img{width:100%;height:100%;object-fit:cover;}
.zf-sg__text{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;}
.zf-sg__name{font-size:14.5px;font-weight:800;line-height:1.3;color:#12171d;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.zf-sg__desc{font-size:12.5px;font-weight:600;color:#8a9096;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.zf-sg__name mark,.zf-sg__desc mark{background:rgba(122,63,242,.16);color:inherit;padding:0 1px;border-radius:3px;font-weight:900;}

.zf-sg__rating{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;font-size:12.5px;font-weight:800;color:#12171d;}
.zf-sg__rating i{color:#ffc24b;font-size:11px;}
.zf-sg__price{display:inline-flex;align-items:baseline;gap:3px;flex:0 0 auto;color:#12171d;}
.zf-sg__price b{font-size:14px;font-weight:900;}
.zf-sg__price small{font-size:11px;font-weight:700;color:#9aa0a6;}
.zf-sg__free{color:#10b981;}

.zf-sg__all{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;
  padding:12px;border-radius:12px;font-size:13.5px;font-weight:800;
  color:#fff;background:linear-gradient(135deg,var(--zfs-accent),var(--zfs-accent-2));text-decoration:none;transition:.18s;}
.zf-sg__all:hover,.zf-sg__all[aria-selected="true"]{color:#fff;transform:translateY(-1px);box-shadow:0 10px 22px rgba(122,63,242,.35);}
[dir="rtl"] .zf-sg__all i{transform:scaleX(-1);}
.zf-sg__empty{margin:0;padding:20px 14px;text-align:center;font-size:13.5px;font-weight:600;color:#8a9096;}

/* ═══════════════════════════════════════════════════════ results page ══ */

.zf-sr{padding:112px 0 80px;background:linear-gradient(180deg,#ffffff 0%,#faf8ff 100%);}
@media (max-width:991px){.zf-sr{padding-top:76px;}}
.zf-sr__wrap{max-width:960px;}

.zf-sr__crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:#8a9096;margin-bottom:12px;}
.zf-sr__crumb a{color:#8a9096;}
.zf-sr__crumb a:hover{color:var(--zfs-accent);}
.zf-sr__title{font-size:clamp(24px,3vw,34px);font-weight:900;letter-spacing:-.5px;color:#12171d;margin:0 0 18px;}
.zf-sr__lead{font-size:15px;font-weight:700;color:#656565;margin:0 0 22px;}

/* on-page search box */
.zf-sr__box{position:relative;margin-bottom:20px;}
.zf-sr__form{position:relative;display:flex;align-items:center;gap:8px;}
.zf-sr__form > i{position:absolute;inset-inline-start:16px;color:#9aa0a6;font-size:15px;pointer-events:none;}
.zf-sr__form input{flex:1;min-height:52px;border:1px solid #e0e2e6;border-radius:14px;background:#fff;
  padding:12px 16px;padding-inline-start:44px;font-size:15px;font-weight:600;color:#12171d;transition:.15s;}
.zf-sr__form input:focus{outline:none;border-color:var(--zfs-accent);box-shadow:0 0 0 3px rgba(122,63,242,.12);}
.zf-sr__form button{min-height:52px;padding:0 26px;border:0;border-radius:14px;cursor:pointer;
  font-size:14.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--zfs-accent),var(--zfs-accent-2));
  box-shadow:0 10px 24px rgba(122,63,242,.28);transition:.18s;}
.zf-sr__form button:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(122,63,242,.4);}

/* tabs */
.zf-sr__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;}
.zf-sr__tab{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:30px;
  font-size:13.5px;font-weight:800;color:#4b5158;background:#fff;border:1px solid #e9eaee;transition:.16s;}
.zf-sr__tab span{font-size:11.5px;font-weight:800;color:#9aa0a6;}
.zf-sr__tab:hover{border-color:rgba(122,63,242,.35);color:var(--zfs-accent);}
.zf-sr__tab.is-active{background:linear-gradient(135deg,var(--zfs-accent),var(--zfs-accent-2));border-color:transparent;color:#fff;
  box-shadow:0 8px 20px rgba(122,63,242,.28);}
.zf-sr__tab.is-active span{color:rgba(255,255,255,.75);}

/* groups */
.zf-sr__group + .zf-sr__group{margin-top:34px;}
.zf-sr__group-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;}
.zf-sr__group-head h2{margin:0;font-size:17px;font-weight:900;color:#12171d;letter-spacing:-.2px;}
.zf-sr__more{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--zfs-accent);}
.zf-sr__more:hover{color:var(--zfs-accent-2);}
[dir="rtl"] .zf-sr__more i{transform:scaleX(-1);}

.zf-sr__list{display:flex;flex-direction:column;gap:10px;}
.zf-sr__item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;
  background:#fff;border:1px solid #ecedf0;box-shadow:0 6px 20px rgba(18,23,29,.05);
  color:#12171d;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s;}
.zf-sr__item:hover{transform:translateY(-2px);border-color:rgba(122,63,242,.28);
  box-shadow:0 14px 32px rgba(122,63,242,.14);color:#12171d;}
.zf-sr__thumb{width:56px;height:56px;flex:0 0 56px;border-radius:14px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--zfs-accent);
  background:linear-gradient(135deg,#f3eefe,#faf5ff);border:1px solid rgba(122,63,242,.14);}
.zf-sr__thumb img{width:100%;height:100%;object-fit:cover;}
.zf-sr__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.zf-sr__name{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:800;color:#12171d;line-height:1.3;}
.zf-sr__verified{color:var(--zfs-accent);font-size:13px;}
.zf-sr__desc{font-size:13.5px;font-weight:600;color:#8a9096;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.zf-sr__meta{display:flex;align-items:center;gap:14px;font-size:12.5px;font-weight:700;color:#656565;}
.zf-sr__meta:empty{display:none;}
.zf-sr__rating{display:inline-flex;align-items:center;gap:5px;color:#12171d;}
.zf-sr__rating i{color:#ffc24b;font-size:11px;}
.zf-sr__rating small{color:#9aa0a6;font-weight:700;}
.zf-sr__price{display:inline-flex;align-items:baseline;gap:4px;flex:0 0 auto;}
.zf-sr__price b{font-size:17px;font-weight:900;color:#12171d;}
.zf-sr__price small{font-size:11.5px;font-weight:700;color:#9aa0a6;}
.zf-sr__free{color:#10b981!important;}
.zf-sr__go{flex:0 0 auto;color:#c6c9ce;font-size:14px;transition:.2s;}
[dir="rtl"] .zf-sr__go{transform:scaleX(-1);}
.zf-sr__item:hover .zf-sr__go{color:var(--zfs-accent);transform:translateX(3px);}
[dir="rtl"] .zf-sr__item:hover .zf-sr__go{transform:scaleX(-1) translateX(3px);}

/* empty state */
.zf-sr__empty{text-align:center;padding:56px 20px;background:#fff;border:1px solid #ecedf0;border-radius:22px;
  box-shadow:0 10px 30px rgba(18,23,29,.05);}
.zf-sr__empty-icon{display:inline-flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:22px;
  font-size:26px;color:var(--zfs-accent);background:linear-gradient(135deg,#f3eefe,#faf5ff);
  border:1px solid rgba(122,63,242,.14);margin-bottom:18px;}
.zf-sr__empty h2{font-size:20px;font-weight:900;color:#12171d;margin:0 0 8px;}
.zf-sr__empty p{font-size:14.5px;color:#8a9096;margin:0 auto 22px;max-width:440px;}
.zf-sr__empty-links{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}
.zf-sr__ghost{display:inline-flex;align-items:center;padding:12px 22px;border-radius:40px;
  font-size:14px;font-weight:800;color:var(--zfs-accent);border:1px solid rgba(122,63,242,.3);background:#fff;transition:.18s;}
.zf-sr__ghost:hover{background:#f6f3ff;color:var(--zfs-accent);}

@media (max-width:575px){
  .zf-sr__form{flex-wrap:wrap;}
  .zf-sr__form button{width:100%;}
  .zf-sr__item{padding:12px;gap:11px;}
  .zf-sr__thumb{width:46px;height:46px;flex:0 0 46px;}
  .zf-sr__price b{font-size:15px;}
}