:root{
  --wbu-logo-align: auto;
  --wbu-logo: 72px;
  --wbu-radius: 16px;
  --wbu-gap: 16px;
  --wbu-gray: 100%;
  --wbu-hover-lift: 3px;

  --wbu-card-bg: rgba(255,255,255,.92);
  --wbu-card-bg-hover: var(--wbu-card-bg);
  --wbu-logo-bg: transparent;
  --wbu-logo-bg-hover: transparent;

  --wbu-name-gap: 10px;
  --wbu-name-color: #111;
  --wbu-name-hover: var(--wbu-name-color);

  --wbu-icon-color: rgba(0,0,0,.55);
  --wbu-icon-hover: rgba(0,0,0,.85);
}

.wbu{ width:100%; }
.wbu-note{ padding:12px 14px; border:1px dashed rgba(0,0,0,.2); border-radius:14px; }

/* Directory search box: force center + Bakala-like look */
.wbu-dir{ --wbu-icon-color:#c5a153; --wbu-icon-hover:#c5a153; }
.wbu-dir .wbu-head{ width:100%; justify-content:center; }
.wbu-dir .wbu-search{ margin-inline:auto; }
.wbu-dir .wbu-search-input{ background:#f4f4f4; }
.wbu-dir .wbu-search-ico-fallback{ pointer-events:none; }

/* Search */
.wbu-head{ margin-bottom:14px; display:flex; justify-content:center; }
.wbu-search{max-width:520px;width:100%; position:relative; width:min(520px,100%); }
.wbu-search-input{
  width:100%; padding-block:12px; padding-inline:14px; padding-inline-start:40px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:16px; outline:none;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
}
.wbu-search-input:focus{
  border-color: rgba(0,0,0,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.wbu-search-ico{
  position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%);
  opacity:1; font-size:16px;
  color: var(--wbu-icon-color);
}
.wbu-search:focus-within .wbu-search-ico{ color: var(--wbu-icon-hover); }

/* Grid */
.wbu-grid{
  --cols: 6;
  display:grid;
  grid-template-columns: repeat(var(--cols), minmax(0,1fr));
  gap: var(--wbu-gap);
}
@media (max-width:1024px){ .wbu-grid{ --cols: 4; } }
@media (max-width:640px){  .wbu-grid{ --cols: 2; } }

/* Card */
.wbu-card{
  border-radius: var(--wbu-radius);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  display:flex; flex-direction:column; align-items: var(--wbu-items-align, center); justify-content: var(--wbu-justify, center);
  text-align: var(--wbu-text-align, center);
  gap: var(--wbu-name-gap);
  padding:16px 12px;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Logo */
.wbu-logo-wrap{
  align-self: var(--wbu-logo-align, auto) !important;
  width: calc(var(--wbu-logo) + 10px);
  height: calc(var(--wbu-logo) + 10px);
  display:flex; align-items:center; justify-content:center;
  border-radius: calc(var(--wbu-radius) + 2px);
  background: var(--wbu-logo-bg);
  overflow:hidden;
}
.wbu-logo{
  width: var(--wbu-logo);
  height: var(--wbu-logo);
  object-fit:contain;
  transition: filter .22s ease, transform .22s ease;
}
.wbu-logo-fallback{
  width: var(--wbu-logo);
  height: var(--wbu-logo);
  border-radius: calc(var(--wbu-radius) - 2px);
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.05);
  font-weight:700;
}

/* Grayscale -> color on hover */
.wbu.is-grayscale .wbu-logo{
  filter: grayscale(var(--wbu-gray)) saturate(0) contrast(1.05);
}
.wbu-name{
  font-size:13px;
  line-height:1.4;
  opacity:.9;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  color: var(--wbu-name-color);
}
.wbu-card:hover .wbu-name{ color: var(--wbu-name-hover); }

/* Empty state */
.wbu-empty{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(0,0,0,.04);
}

/* Slider */
.wbu-slider .wbu-swiper{ 
  position:relative; 
  padding:6px 42px; 
}

/* Mobile optimization - reduce horizontal padding */
@media (max-width: 768px) {
  .wbu-slider .wbu-swiper { 
    padding: 6px 12px !important; 
  }
}

.wbu-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
  z-index:10;
  color: var(--wbu-icon-color);
}
.wbu-nav:hover{ transform: translateY(-50%) scale(1.06); box-shadow: 0 10px 24px rgba(0,0,0,.10); color: var(--wbu-icon-hover); }
.wbu-prev{ inset-inline-start:6px; }
.wbu-next{ inset-inline-end:6px; }

/* Fallback scroll (no Swiper) */
.wbu-fallback-scroll .wbu-swiper{ overflow:auto; padding:0; }
.wbu-fallback-scroll .swiper-wrapper{
  display:flex;
  gap: var(--wbu-gap);
  padding: 4px 2px;
}
@media (max-width: 768px) {
  .wbu-fallback-scroll .swiper-wrapper {
    padding: 0 !important;
  }
}
.wbu-fallback-scroll .swiper-slide{ flex: 0 0 auto; width: 220px; }

/* Chromium white-band fix: create isolated stacking context */
.wbu.wbu-slider{
  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  background: inherit !important;
}
.wbu.wbu-slider::before{
  content: none !important;
}
.wbu.wbu-slider > *{
  position: relative;
  z-index: 1;
}

/* Marquee */
.wbu-marquee{ --wbu-marquee-duration: 20s; }
.wbu-marquee__viewport{
  overflow:hidden;
  width:100%;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.wbu-marquee__track{
  display:flex;
  gap: var(--wbu-gap);
  width: max-content;
  animation: wbu-marquee var(--wbu-marquee-duration) linear infinite;
}
.wbu-marquee.is-pause-hover:hover .wbu-marquee__track{
  animation-play-state: paused;
}
.wbu-card--marquee{
  flex: 0 0 auto;
  min-width: 200px;
}

@keyframes wbu-marquee{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(var(--wbu-marquee-shift, -50%),0,0); }
}

/* RTL helpers */
html[dir="rtl"] .wbu-search-ico{ left:auto; right:14px; }
html[dir="rtl"] .wbu-search-input{ padding-inset-inline-start:14px; padding-right:40px; }

.wbu-card:hover .wbu-logo-wrap{ background: var(--wbu-logo-bg-hover); }

/* Extra vars */
:root{
  --wbu-logo-align: auto;
  --wbu-card-bg: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84));
  --wbu-card-bg-hover: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90));
  --wbu-icon: rgba(0,0,0,.55);
  --wbu-icon-hover: rgba(0,0,0,.75);
}

/* Icon colors (search + nav) */
.wbu-search-ico{ color: var(--wbu-icon); }
.wbu-search:hover .wbu-search-ico,
.wbu-search-input:focus ~ .wbu-search-ico{ color: var(--wbu-icon-hover); }
.wbu-nav{ color: var(--wbu-icon); }
.wbu-nav:hover{ color: var(--wbu-icon-hover); }

/* Disable color reveal on hover (keep grayscale) */
.wbu.is-grayscale.is-no-color-hover .wbu-card:hover .wbu-logo{
  filter: grayscale(var(--wbu-gray)) saturate(0) contrast(1.05);
  transform: none;
}

/* Layout options */
.wbu.layout-horizontal .wbu-card{
  flex-direction: row;
  justify-content: var(--wbu-justify-h, flex-start);
  text-align: var(--wbu-text-align, start);
}
.wbu.layout-horizontal .wbu-name{ text-align: inherit; }

[dir="rtl"] .wbu.layout-horizontal .wbu-card{ flex-direction: row-reverse; }

/* Robust layout & styling (theme-proof) */
.wbu .wbu-card{
  background: var(--wbu-card-bg) !important;
  text-align: var(--wbu-text-align) !important;
  align-items: var(--wbu-items-align) !important;
}
.wbu .wbu-card:hover{
  background: var(--wbu-card-bg-hover) !important;
}
.wbu.layout-horizontal .wbu-card{
  justify-content: var(--wbu-justify) !important;
}
.wbu .wbu-logo-wrap{
  align-self: var(--wbu-logo-align, auto) !important;
}

/* Grayscale logic */
.wbu.is-grayscale .wbu-logo{
  filter: grayscale(var(--wbu-gray)) saturate(0) contrast(1.05) !important;
}
.wbu.is-grayscale:not(.is-no-color-hover) .wbu-card:hover .wbu-logo{
  filter: none !important;
  transform: scale(1.02);
}
.wbu:not(.is-grayscale) .wbu-logo{
  filter: none !important;
}

.wbu-pagination{display:flex; justify-content:center; margin-top:16px;}
.wbu-pages{display:flex; gap:8px; flex-wrap:wrap; justify-content:center;}
.wbu-page{border:1px solid rgba(0,0,0,.15); background:transparent; padding:8px 12px; border-radius:12px; cursor:pointer; font:inherit;}
.wbu-page.is-active{background:rgba(0,0,0,.06);}
.wbu-loadmore{display:block; margin:16px auto 0; padding:10px 14px; border-radius:14px; border:1px solid rgba(0,0,0,.15); background:transparent; cursor:pointer;}

/* Hard center alignment */
.wbu .wbu-card{
  text-align: center !important;
  align-items: center !important;
}
.wbu .wbu-name{ text-align: center !important; }
.wbu .wbu-logo-wrap{
  align-self: center !important;
  margin-inline: auto !important;
}
.wbu.layout-horizontal .wbu-card{
  justify-content: center !important;
}

.wbu-head{display:flex;justify-content:center;}
.wbu-search{max-width:520px;width:100%;}

/* Chromium white-band / overlay fix: neutralize theme interference */
.wbu .swiper,
.wbu .wbu-swiper,
.wbu .swiper-wrapper,
.wbu .swiper-slide{
  background: inherit !important;
}
.wbu .swiper::before,
.wbu .swiper::after,
.wbu .wbu-swiper::before,
.wbu .wbu-swiper::after,
.wbu .swiper-wrapper::before,
.wbu .swiper-wrapper::after,
.wbu .swiper-slide::before,
.wbu .swiper-slide::after{
  content: none !important;
  display: none !important;
}

/* Prevent composite bugs in Chrome */
.wbu-slider{ isolation: isolate; }
.wbu-slider .wbu-swiper{ contain: layout paint; }

/* Brand Filter Widget (Bakala-friendly, RTL-safe) */
.wbu-bf{direction:rtl;text-align:right;}
.wbu-bf-search{position:relative;margin:10px 0 12px;}
.wbu-bf-input{width:100%;height:44px;border-radius:14px;padding:0 44px 0 14px;border:1px solid rgba(0,0,0,.08);background:#f3f4f7;outline:none;box-shadow:none;}
.wbu-bf-ico{position:absolute;right:12px;top:50%;transform:translateY(-50%);opacity:.6;font-size:16px;}
.wbu-bf-list{list-style:none;margin:0;padding:0;overflow:auto;border-radius:14px;}
.wbu-bf-item{border-top:1px solid rgba(0,0,0,.06);}
.wbu-bf-item:first-child{border-top:none;}
.wbu-bf-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 6px;cursor:pointer;user-select:none;}
.wbu-bf-right{display:flex;align-items:center;gap:10px;min-width:0;}
.wbu-bf-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wbu-bf-check{width:18px;height:18px;flex:0 0 auto;}
.wbu-bf-logo{width:24px;height:24px;border-radius:7px;object-fit:contain;background:#fff;border:1px solid rgba(0,0,0,.06);}
.wbu-bf-logo--ph{display:inline-block;width:24px;height:24px;border-radius:7px;background:rgba(0,0,0,.06);}
.wbu-bf-clear{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;text-decoration:none;}

/* Brand Filter UI tweaks (RTL + full-width + logos) */
.wbu-bf-search{ width:100% !important; }
.wbu-bf-input{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
.wbu-bf-row{ flex-direction:row-reverse !important; }
.wbu-bf-right{ flex-direction:row-reverse !important; }
.wbu-bf-logo,
.wbu-bf-logo--ph{
  width:34px !important;
  height:34px !important;
  border-radius:10px !important;
}
.wbu-bf-logo{
  padding:4px !important;
  background: transparent !important;
  object-fit: contain !important;
}

/* Brand Filter: scrollbar (Bakala-style / Chrome-friendly) */
.wbu-bf-list{
  overflow:auto;
  scrollbar-width: thin;
}
.wbu-bf-scroll::-webkit-scrollbar{
  width: 6px;
}
.wbu-bf-scroll::-webkit-scrollbar-track{
  background: rgba(0,0,0,.05);
  border-radius: 10px;
}
.wbu-bf-scroll::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.22);
  border-radius: 10px;
}
.wbu-bf-scroll::-webkit-scrollbar-thumb:hover{
  background: rgba(0,0,0,.32);
}

/* Brand Filter – Bakala UX fixes */
.wbu-bf{position:relative;}
.wbu-bf-head{position:static;z-index:5;padding:10px 0 0;background:transparent;}
.wbu-bf-search{margin:0 0 12px !important;}
.wbu-bf-search{position:relative;}
.wbu-bf-ico{position:absolute;left:12px !important;right:auto !important;top:50%;transform:translateY(-50%);opacity:.65;font-size:18px;line-height:1;pointer-events:none;}
.wbu-bf-input{width:100% !important;display:block !important;box-sizing:border-box !important;padding:0 14px 0 44px !important;}

.wbu-bf-scroll{overflow:auto !important;border-radius:14px;}
.wbu-bf-list{overflow:visible !important;max-height:none !important;}

.wbu-bf-row{display:grid !important;grid-template-columns:28px 1fr 44px;align-items:center;column-gap:12px;justify-content:stretch !important;padding:10px 6px;}
.wbu-bf-checkWrap{flex:0 0 auto;}
.wbu-bf-check{margin:0 !important;}

.wbu-bf-logoWrap{flex:0 0 auto;}
.wbu-bf-logo{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:48px !important;
  max-height:36px !important;
  border-radius:6px !important;
  object-fit:contain !important;
  padding:0 !important;
  background:transparent !important;
}
.wbu-bf-logo--ph{width:36px !important;height:36px !important;border-radius:10px !important;}

html.wbu-bf-loading{cursor:progress;}

.wbu-bf-row{direction:rtl !important;}

.widget_wbu_brand_filter_widget .matrix-widget-content{overflow:visible !important;max-height:none !important;}

.widget_wbu_brand_filter_widget .wbu-bf{direction:rtl !important;text-align:right !important;}
.widget_wbu_brand_filter_widget .wbu-bf-checkWrap{justify-self:start;}
.widget_wbu_brand_filter_widget .wbu-bf-logoWrap{justify-self:end;}
.widget_wbu_brand_filter_widget .wbu-bf-name{text-align:right;min-width:0;}

/* Directory search matches Bakala widget */
.wbu-dir .wbu-search-input{background:#f3f4f7 !important;border-color:rgba(0,0,0,.08) !important;box-shadow:none !important;}
.wbu-dir .wbu-search-ico{color:#c5a153 !important;opacity:1 !important;}

/* Directory search SVG icon */
.wbu-dir .wbu-search-ico{ color: var(--wbu-icon-color, #c5a153); }
.wbu-dir .wbu-ico-svg{ display:block; }

/* Brand Directory: center search + guaranteed icon */
.wbu-dir .wbu-head{display:flex;justify-content:center;}
.wbu-dir .wbu-search{width:100%;max-width:560px;margin-inline:auto;}

.wbu-dir .wbu-search-ico:empty{
  width:18px;height:18px;display:inline-block;
  background-repeat:no-repeat;background-position:center;background-size:18px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.5 18.5C14.6421 18.5 18 15.1421 18 11C18 6.85786 14.6421 3.5 10.5 3.5C6.35786 3.5 3 6.85786 3 11C3 15.1421 6.35786 18.5 10.5 18.5Z' stroke='%23c5a153' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 21L16.65 16.65' stroke='%23c5a153' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Brand Directory Search (FIX): center + visible icon */
.wbu-dir .wbu-head{
  display:flex !important;
  justify-content:center !important;
  width:100% !important;
}

.wbu-dir .wbu-search{
  position:relative !important;
  width:100% !important;
  max-width:560px !important;
  margin:0 auto !important;
}

.wbu-dir .wbu-search-input{
  width:100% !important;
  background:#f3f4f7 !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:16px !important;
  box-shadow:none !important;
  padding-inline-start:52px !important;
}

.wbu-dir .wbu-search-ico{
  position:absolute !important;
  inset-inline-start:18px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:22px !important;
  height:22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:5 !important;
  pointer-events:none !important;
  opacity:1 !important;
}

.wbu-dir .wbu-search-ico:empty{
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:22px 22px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.5 18.5C14.6421 18.5 18 15.1421 18 11C18 6.85786 14.6421 3.5 10.5 3.5C6.35786 3.5 3 6.85786 3 11C3 15.1421 6.35786 18.5 10.5 18.5Z' stroke='%23c5a153' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 21L16.65 16.65' stroke='%23c5a153' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
@media (max-width: 768px) {
  .wbu-slider .wbu-swiper {
    padding: 6px 12px !important;
  }
  
  .wbu-fallback-scroll .swiper-wrapper {
    padding: 0 !important;
  }
  
  .wbu-fallback-scroll .swiper-slide {
    width: 180px !important;
  }
}@media (max-width: 768px) {
  .wbu-card {
    border: none;
  }
}
.wbu-nav {
  border: 1px solid rgba(0,0,0,.14);
}
@media (max-width: 768px) {
  /* حذف gap بین اسلایدها */
  .wbu-slider {
    --wbu-gap: 0 !important;
  }
  
  /* حذف padding کانتینر */
  .wbu-slider .wbu-swiper {
    padding: 0 !important;
  }
  
  /* حذف padding wrapper */
  .wbu-fallback-scroll .swiper-wrapper {
    padding: 0 !important;
  }
  
  /* کاهش padding کارت */
  .wbu .wbu-card {
    padding: 6px !important;
    gap: 6px !important;
  }
  
  /* حذف border */
  .wbu-card {
    border: none !important;
  }
}


/* Brand Filter: logo wrapper – let logo breathe at its natural aspect ratio */
.wbu-bf-logoWrap{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:52px !important;
  height:40px !important;
  flex:0 0 52px !important;
  overflow:visible !important;
  background:transparent !important;
}

/* ================================================================
   Brand Filter Widget – Logo: FINAL OVERRIDE
   Shows logo at natural aspect ratio, never clipped.
   All previous conflicting rules are overridden here.
   ================================================================ */
.wbu-bf .wbu-bf-logoWrap,
.widget_wbu_brand_filter_widget .wbu-bf-logoWrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 56px !important;
  height: 44px !important;
  min-width: 56px !important;
  overflow: visible !important;
  background: transparent !important;
}

.wbu-bf .wbu-bf-logo,
.widget_wbu_brand_filter_widget .wbu-bf-logo {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  max-width: 52px !important;
  max-height: 40px !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 4px !important;
}
/* ── Brand Filter Widget: logo display fix ── */
.wbu-bf-logoWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: auto; /* RTL: push to end of row */
}

.wbu-bf-logo {
  display: block;
  width: 48px;          /* overridden by inline style from widget settings */
  height: 48px;
  object-fit: contain;  /* show full logo, no crop */
  object-position: center;
  background: #fff;
  border-radius: 6px;
  padding: 2px;
  box-sizing: border-box;
}

.wbu-bf-logo--ph {
  display: inline-block;
  background: #f0f0f0;
  border-radius: 6px;
}

/* RTL support */
[dir="rtl"] .wbu-bf-logoWrap,
.rtl .wbu-bf-logoWrap {
  margin-right: 0;
  margin-left: auto;
}
/* رفع مشکل اسکرول افقی در ابزارک فیلتر برند */
.wbu-bf-scroll {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
.wbu-bf-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}