/* Box + header */
.rzsp-box{ background:var(--box-bg,#fff); border:1px solid var(--box-bd,#e5e7eb); border-radius:var(--box-rad,14px); padding:12px; box-shadow:var(--box-sh,0 10px 30px rgba(0,0,0,.06)); direction:rtl; }
.rzsp-box-head{ background:var(--hdr-bg,#0ea5e9); color:var(--hdr-color,#fff); border-radius:var(--hdr-rad,10px); padding:10px 12px; margin-bottom:10px; display:flex; align-items:center; justify-content:center; font-weight:800; }
.rzsp-box-title{ margin:0; font-size:15px; }

/* Specialty cloud */
.rzsp-sw{ --pill-bg:#f3f4f6; --badge-bg:#e5e7eb; --hover:#34d399; --accent:#10b981; position:relative; }
.rzsp-sw-list{ display:flex; flex-direction:column; gap:8px; }
.rzsp-sw-item{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; border:0; background:transparent; width:100%; cursor:pointer; padding:0; }
.rzsp-sw-pill{ flex:1; display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-radius:9999px; background:var(--pill-bg); transition: all .25s ease; box-shadow: 0 1px 0 rgba(0,0,0,.03) inset; }
.rzsp-sw-pill .dashicons{ font-size:16px; width:16px; height:16px; line-height:16px; }
.rzsp-sw-count{ min-width:28px; height:28px; padding:0 .25rem; display:inline-flex; align-items:center; justify-content:center; border-radius:9999px; background:var(--badge-bg); font-weight:700; font-size:.85rem; }
.rzsp-sw-item:hover .rzsp-sw-pill{ background: var(--hover); color:#064e3b; transform: translateY(-1px); }
.rzsp-sw-item:hover .rzsp-sw-count{ background: var(--hover); color:#064e3b; }
.rzsp-sw-item.is-active .rzsp-sw-pill, .rzsp-sw-item.is-active .rzsp-sw-count{ outline:2px solid var(--accent); }

/* Search */
.rzsp-search{ position:relative; }
.rzsp-search-row{ display:flex; gap:8px; }
.rzsp-search-input{ flex:1; border:1px solid var(--box-bd,#e5e7eb); border-radius:10px; padding:10px 12px; outline:none; }
.rzsp-search-btn{ border:0; border-radius:10px; background:var(--hdr-bg,#0ea5e9); color:var(--hdr-color,#fff); padding:10px 12px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.rzsp-search-btn .dashicons{ width:18px; height:18px; font-size:18px; line-height:18px; }

/* Util: hide whole card safely */
.rzsp-hide{ display:none !important; visibility:hidden !important; height:0 !important; margin:0 !important; padding:0 !important; }


/* ====== RZSP Specialty Widget — Mobile Popup (Bottom Sheet) ====== */
/* Themeable via CSS vars derived from existing widget vars: 
   --popup-bg, --popup-header-bg, --popup-header-color, 
   --popup-pill-bg, --popup-pill-color, --popup-pill-hover-bg, --popup-pill-hover-color,
   --popup-count-bg, --popup-count-hover-bg, --popup-accent
   Defaults map to existing --hdr-bg, --hdr-color, --pill-bg, --badge-bg, --hover, --accent. */
.widget_rzsp_specialty_widget .rzsp-box{
  --popup-bg: #ffffff;
  --popup-header-bg: var(--hdr-bg, #0ea5e9);
  --popup-header-color: var(--hdr-color, #ffffff);
  --popup-pill-bg: var(--pill-bg, #ffffff);
  --popup-pill-color: inherit;
  --popup-pill-hover-bg: var(--hover, #34d399);
  --popup-pill-hover-color: #064e3b;
  --popup-count-bg: var(--badge-bg, #eef2f3);
  --popup-count-hover-bg: var(--hover, #34d399);
  --popup-accent: var(--accent, #10b981);
}

/* lock scroll when modal open */
.rzsp-lock { overflow: hidden !important; }

/* Mobile hamburger header indicator */
@media (max-width: 768px){
  .widget_rzsp_specialty_widget .rzsp-box-head{
    cursor:pointer; user-select:none;
    position:relative; padding-right:48px;
  }
  .widget_rzsp_specialty_widget .rzsp-box-head::after{
    content:""; position:absolute; top:50%; right:14px;
    width:22px; height:2px; background:var(--popup-header-color,#fff);
    box-shadow:0 -6px 0 var(--popup-header-color,#fff), 0 6px 0 var(--popup-header-color,#fff);
    transform:translateY(-50%); border-radius:2px; opacity:.95;
  }
  /* hide inline list in mobile; popup will be used */
  .widget_rzsp_specialty_widget .rzsp-sw .rzsp-sw-list{
    max-height:0; overflow:hidden;
  }
}

/* Modal layout */
.rzsp-sw-modal{ position:fixed; inset:0; z-index:9999; display:none; }
.rzsp-sw-modal.is-active{ display:block; }
.rzsp-sw-modal-backdrop{ position:absolute; inset:0; background:rgba(17,24,39,.55); backdrop-filter: blur(6px); }
.rzsp-sw-modal-panel{
  position:absolute; left:0; right:0; bottom:0;
  background:var(--popup-bg,#fff); border-radius:16px 16px 0 0;
  box-shadow:0 -18px 40px rgba(0,0,0,.22);
  max-height:80vh; overflow:auto;
  transform:translateY(100%); transition: transform .3s ease;
  -webkit-overflow-scrolling: touch;
}
.rzsp-sw-modal.is-active .rzsp-sw-modal-panel{ transform:translateY(0); }

.rzsp-sw-modal-header{
  position:sticky; top:0; z-index:1; background:var(--popup-bg,#fff);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid #eee;
  color: var(--popup-header-color,#111827);
  background-image: linear-gradient(0deg, rgba(0,0,0,0.00), rgba(0,0,0,0.00));
}
.rzsp-sw-modal-title{ font-weight:800; font-size:15px; color:var(--popup-header-color,#111827); }
.rzsp-sw-modal-close{
  width:36px; height:36px; border-radius:10px; border:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:center; background:var(--popup-bg,#fff); color:#111;
}

.rzsp-sw-modal-body{ padding:12px; }
.rzsp-sw-modal .rzsp-sw{
  --pill-bg: var(--popup-pill-bg, #fff);
  --badge-bg: var(--popup-count-bg, #eef2f3);
  --hover: var(--popup-pill-hover-bg, #34d399);
  --accent: var(--popup-accent, #10b981);
  color: var(--popup-pill-color, inherit);
}
.rzsp-sw-modal .rzsp-sw-list{
  display:flex; flex-direction:column; gap:10px; max-height:none; background:transparent; margin:0;
}
.rzsp-sw-modal .rzsp-sw-item .rzsp-sw-pill{
  border-radius:9999px;
  padding:.6rem .85rem;
  background: #1dbab5;
  box-shadow:0 1px 0 rgba(0,0,0,.03) inset;
  transition:all .2s ease;
  color: var(--popup-pill-color,inherit);
}
.rzsp-sw-modal .rzsp-sw-item:hover .rzsp-sw-pill{
  transform:translateY(-1px); box-shadow:0 6px 18px rgba(16,185,129,.18);
  background: var(--popup-pill-hover-bg,#34d399); color: var(--popup-pill-hover-color,#064e3b);
}
.rzsp-sw-modal .rzsp-sw-count{
  min-width:28px;
  height:28px;
  border-radius:9999px;
  background: #1dbab5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}
.rzsp-sw-modal .rzsp-sw-item:hover .rzsp-sw-count{
  background: var(--popup-count-hover-bg, var(--popup-pill-hover-bg,#34d399));
  color: var(--popup-pill-hover-color,#064e3b);
}
/* ==== RZSP Patch styles (gapless) ==== */
.rzsp-sw .rzsp-sw-item.rzsp-sw-all .rzsp-sw-pill{
  font-weight:800;
  background: var(--pill-bg, #f3f4f6);
}
.rzsp-sw .rzsp-sw-item.rzsp-sw-all.is-active .rzsp-sw-pill{
  outline: 2px solid var(--accent, #10b981);
}
.rzsp-sw .rzsp-sw-item.rzsp-sw-all .rzsp-sw-count{ display:none; }

/* کمک به موتور گرید برای چیدمان فشرده */
.elementor .elementor-grid,
.elementor .elementor-loop-container{
  grid-auto-flow: row dense;
}

/* وقتی کلاس کمکی ست شد، مرورگر را مجبور به رندر مجدد کن */
.rzsp-packed{ contain: layout paint; }

/* آیتم مخفی کاملاً از جریان خارج شود */
.rzsp-hide{
  display:none !important;
  visibility:hidden !important;
  height:0 !important; margin:0 !important; padding:0 !important;
}
/* ================== RZSP Cards — Mobile Enforcer (center + no overflow) ================== */
@media (max-width: 768px){

  /* 1) کانتینرهای رایج لیست کارت‌ها — تک‌ستونه و وسط‌چین آیتم‌ها */
  .rzsp-cards,
  .rzsp-cards-grid,
  .rzsp-list,
  .rzsp-archive,
  .rzsp-loop,
  .elementor .elementor-loop-container,
  .elementor .elementor-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important; /* خود کارت وسط */
    align-items: start !important;
    gap: 16px !important;
  }

  /* 2) اگر ساختار متفاوت بود: هر ظرفی که کارت توش هست، با :has وسط‌چین می‌شود */
  /* (مرورگرهای مدرن موبایل پشتیبانی می‌کنند) */
  .entry-content:has(.rzsp-card),
  .elementor .elementor-section:has(.rzsp-card) .elementor-container,
  .elementor .elementor-widget-container:has(.rzsp-card) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* 3) خود کارت — عرض امن و کاملاً وسط */
  .rzsp-card,
  article.rzsp-card,
  .elementor .elementor-loop-item .rzsp-card,
  .elementor .elementor-grid-item .rzsp-card,
  .rzsp-cards .rzsp-card,
  .rzsp-cards-grid .rzsp-card {
    width: min(100%, 420px) !important;   /* بزرگ‌تر از موبایل نشه */
    max-width: 100% !important;
    margin-inline: auto !important;       /* وسط */
    box-sizing: border-box !important;
    overflow: hidden !important;          /* هر بیرون‌زدگی قطع */
    border-radius: 16px;
    contain: content;                     /* جلوگیری از اثرات بیرونی */
  }

  /* 4) ظرف تصویر — نسبت ثابت و قفل‌شدن خروجی */
  .rzsp-card .rzsp-card-thumb,
  .rzsp-card .post-thumbnail,
  .rzsp-card .elementor-post__thumbnail,
  .rzsp-card .wp-block-image,
  .rzsp-card .wp-block-image figure,
  .rzsp-card .elementor-image,
  .rzsp-card .elementor-image figure {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;       /* اگر عمودی می‌خوای: 4/5 یا 3/4 */
    overflow: hidden !important;
    border-radius: 16px;
  }

  /* 5) خود img — تمام قاب را پر کند (بیرون‌زدن غیرممکن) */
  .rzsp-card .rzsp-card-thumb img,
  .rzsp-card .post-thumbnail img,
  .rzsp-card .elementor-post__thumbnail img,
  .rzsp-card .wp-block-image img,
  .rzsp-card .elementor-image img {
    position: absolute !important;
    inset: 0 !important;                  /* top/right/bottom/left:0 */
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;         /* کراپ تمیز */
    object-position: center !important;
    display: block !important;
    transform: translateZ(0);             /* رندر نرم موبایل */
  }

  /* 6) خنثی‌سازی عرض/ارتفاع‌های اینلاین خرابکار (از قالب/المنتور) */
  .rzsp-card img[width],
  .rzsp-card img[height]{
    width: 100% !important;
    height: auto !important;
  }

  /* 7) جلوگیری از بیرون‌زدن محتواهای متن/بلوک‌های عریض داخل کارت */
  .rzsp-card :is(.alignfull, .alignwide){
    max-width: 100% !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .rzsp-card *{
    overflow-wrap: anywhere; /* شکست واژه‌های بلند */
    word-break: break-word;
  }
}