/* ============================================================
   PANTIGAME — Main Stylesheet
   RTL-first, Persian Farsi support, Dark/Light mode
   ============================================================ */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  direction: rtl;
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: var(--line-height-normal);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-slow), color var(--transition-slow);
}

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-dark); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: var(--font-family); border: none; outline: none; background: none; }
input, textarea, select { font-family: var(--font-family); outline: none; }

/* ── Container ── */
.pg-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }

.pg-section-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-wide);
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-8);
}
.pg-section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 0;
  width: 60px;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
}

/* ── Cards ── */
.pg-card {
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  overflow: hidden;
}
.pg-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-hover);
}

/* ── Glass Card ── */
.pg-glass {
  background: var(--color-bg-glass);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--color-border);
}

/* ── Buttons ── */
.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 24px;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-normal);
  cursor: pointer;
  border: none;
  white-space: nowrap;
  text-decoration: none;
}

.pg-btn-primary {
  background: var(--gradient-primary);
  color: #0f172a;
  box-shadow: var(--shadow-primary);
}
.pg-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--color-primary-glow);
  color: #0f172a;
}

.pg-btn-secondary {
  background: var(--gradient-secondary);
  color: #fff;
  box-shadow: var(--shadow-secondary);
}
.pg-btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--color-secondary-glow);
}

.pg-btn-vip {
  background: var(--gradient-vip);
  color: #0f172a;
  box-shadow: var(--shadow-vip);
}
.pg-btn-outline {
  background: transparent;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
}
.pg-btn-outline:hover {
  background: var(--color-primary);
  color: #0f172a;
}
.pg-btn-ghost {
  background: var(--color-bg-3);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.pg-btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

.pg-btn-lg  { padding: 14px 32px; font-size: var(--font-size-base); }
.pg-btn-sm  { padding: 6px 16px; font-size: var(--font-size-xs); }
.pg-btn-icon { padding: 10px; width: 40px; height: 40px; }

/* ── Status Badge / Dot ── */
.pg-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.pg-status-dot.active  { background: var(--color-success); box-shadow: 0 0 6px var(--color-success-glow); }
.pg-status-dot.inactive{ background: var(--color-danger);  box-shadow: 0 0 6px rgba(239,68,68,0.4); }

.pg-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.pg-badge-success { background: rgba(34,197,94,0.15); color: var(--color-success); border: 1px solid rgba(34,197,94,0.3); }
.pg-badge-danger  { background: rgba(244,63,94,0.15);  color: var(--color-secondary); border: 1px solid rgba(244,63,94,0.3); }
.pg-badge-warning { background: rgba(251,191,36,0.15); color: var(--color-vip);       border: 1px solid rgba(251,191,36,0.3); }
.pg-badge-info    { background: rgba(129,140,248,0.15);color: var(--color-info);      border: 1px solid rgba(129,140,248,0.3); }
.pg-badge-primary { background: rgba(56,189,248,0.15); color: var(--color-primary);   border: 1px solid rgba(56,189,248,0.3); }

/* ── Form Elements ── */
.pg-input {
  width: 100%;
  background: var(--color-bg-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  direction: rtl;
}
.pg-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}
.pg-input::placeholder { color: var(--color-text-subtle); }

.pg-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.pg-form-group { margin-bottom: var(--space-5); }

/* ── Divider ── */
.pg-divider {
  height: 1px;
  background: var(--color-border);
  margin-block: var(--space-6);
}

/* ── Scroll Bar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-bg-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ── Skeleton Loading ── */
.pg-skeleton {
  background: linear-gradient(90deg, var(--color-bg-3) 25%, var(--color-bg-2) 50%, var(--color-bg-3) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Notification Pulse ── */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-primary-glow); }
  50%       { box-shadow: 0 0 0 8px transparent; }
}
.pg-pulse { animation: pulse-glow 2s infinite; }

/* ── Page Transitions ── */
.pg-page-enter { animation: fadeInUp 0.4s ease forwards; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Utility Classes ── */
.pg-text-primary   { color: var(--color-primary); }
.pg-text-secondary { color: var(--color-secondary); }
.pg-text-vip       { color: var(--color-vip); }
.pg-text-success   { color: var(--color-success); }
.pg-text-muted     { color: var(--color-text-muted); }
.pg-text-subtle    { color: var(--color-text-subtle); }
.pg-bg-2           { background: var(--color-bg-2); }
.pg-bg-3           { background: var(--color-bg-3); }
.pg-gradient-text  {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Responsive Grid ── */
.pg-grid { display: grid; gap: var(--space-6); }
.pg-grid-2 { grid-template-columns: repeat(2, 1fr); }
.pg-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pg-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .pg-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pg-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pg-grid-4, .pg-grid-3, .pg-grid-2 { grid-template-columns: 1fr; }
  .pg-container { padding-inline: var(--space-4); }
}

/* ── Sidebar Layout ── */
.pg-with-sidebar {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--space-8);
  align-items: start;
}
.pg-with-sidebar-left {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 1024px) {
  .pg-with-sidebar,
  .pg-with-sidebar-left { grid-template-columns: 1fr; }
}

/* ── Sticky ── */
.pg-sticky { position: sticky; top: calc(var(--navbar-height) + var(--space-6)); }

/* ══════════════════════════════════════════
   CUSTOM WIDGETS — پادرا-style, Pantigame UI
══════════════════════════════════════════ */

/* ── Featured product slider ── */
.pg-fp-slider {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  cursor: grab;
  user-select: none;
}
.pg-fp-slider:active { cursor: grabbing; }

.pg-fp-track {
  display: flex;
  will-change: transform;
  /* width and slide widths set by JS after measure */
}

/* Each slide: block, direction restored to RTL by JS */
.pg-fp-slide {
  display: block !important;
  opacity: 1 !important;
  animation: none !important;
  overflow: hidden; /* clip image inside slide */
}

/* Image wrap: square, contained */
.pg-fp-img-wrap {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg-3);
}
.pg-fp-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.5s ease;
}
.pg-fp-slider:hover .pg-fp-img-wrap img { transform: scale(1.04); }

/* Badge */
.pg-fp-badge {
  display: inline-block;
  position: absolute;
  top: var(--space-3); right: var(--space-3);
  z-index: 2;
  padding: 3px 10px;
  background: var(--gradient-secondary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
}
.pg-fp-sale-tag {
  position: absolute;
  bottom: var(--space-2); left: var(--space-2);
  background: var(--color-vip);
  color: #0f172a;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* Image */
.pg-fp-img-wrap {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg-3);
}
.pg-fp-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.pg-fp-slider:hover .pg-fp-img-wrap img { transform: scale(1.04); }
.pg-fp-no-img {
  width: 100%; height: 100%; min-height: 160px;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
}

/* Body */
.pg-fp-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-bg-2);
}
.pg-fp-cat {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pg-fp-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  margin: 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pg-fp-title a { color: var(--color-text); text-decoration: none; }
.pg-fp-title a:hover { color: var(--color-primary); }

.pg-fp-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.pg-fp-prices { display: flex; flex-direction: column; gap: 2px; }
.pg-fp-price { font-size: var(--font-size-base); font-weight: 900; color: var(--color-success); }
.pg-fp-price-old { font-size: 11px; color: var(--color-text-subtle); text-decoration: line-through; }

.pg-fp-buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: var(--gradient-primary);
  color: #0f172a;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  box-shadow: 0 3px 10px var(--color-primary-glow);
}
.pg-fp-buy-btn svg { width: 14px; height: 14px; }
.pg-fp-buy-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px var(--color-primary-glow);
  color: #0f172a;
}

/* Progress bar — always visible, never pauses */
.pg-fp-progress {
  height: 3px;
  background: rgba(255,255,255,0.06);
}
.pg-fp-progress-fill {
  height: 100%;
  background: var(--color-primary);
  width: 0%;
  box-shadow: 0 0 4px var(--color-primary);
}

/* ── No-image fallbacks ── */
.pg-w-no-img { width:100%;height:100%;min-height:120px;display:flex;align-items:center;justify-content:center;font-size:40px;background:var(--color-bg-3); }
.pg-w-no-img-sm { width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--color-bg-3);border-radius:var(--radius-md); }

/* ── Product & Post list ── */
.pg-w-product-list,.pg-w-post-list { list-style:none;padding:0;margin:0;display:flex;flex-direction:column; }
.pg-w-product-item,.pg-w-post-item {
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) 0;border-bottom:1px solid var(--color-border);
}
.pg-w-product-item:last-child,.pg-w-post-item:last-child { border-bottom:none; }
.pg-w-product-item-img { flex-shrink:0;width:52px;height:52px;border-radius:var(--radius-md);overflow:hidden; }
.pg-w-product-item-img img,.pg-w-post-thumb img { width:100%;height:100%;object-fit:cover; }
.pg-w-post-thumb { flex-shrink:0;width:52px;height:52px;border-radius:var(--radius-md);overflow:hidden;display:block; }
.pg-w-product-item-info,.pg-w-post-info { flex:1;min-width:0;display:flex;flex-direction:column;gap:3px; }
.pg-w-product-item-name,.pg-w-post-name {
  font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;
}
.pg-w-product-item-name:hover,.pg-w-post-name:hover { color:var(--color-primary); }
.pg-w-post-meta { font-size:11px;color:var(--color-text-subtle); }
.pg-w-stars { font-size:12px;color:var(--color-vip); }

/* ── Archive list ── */
.pg-w-archive-list { list-style:none;padding:0;margin:0; }
.pg-w-archive-list li a {
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--color-border);
  font-size:var(--font-size-sm);color:var(--color-text-muted);text-decoration:none;
  transition:color var(--transition-fast);
}
.pg-w-archive-list li:last-child a { border-bottom:none; }
.pg-w-archive-list li a:hover { color:var(--color-primary); }
.pg-w-archive-count { background:var(--color-bg-3);padding:2px 8px;border-radius:var(--radius-full);font-size:11px; }

/* ── Category list ── */
.pg-w-cat-list { list-style:none;padding:0;margin:0; }
.pg-w-cat-list li a {
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--color-border);
  font-size:var(--font-size-sm);color:var(--color-text-muted);text-decoration:none;
  transition:color var(--transition-fast);
}
.pg-w-cat-list li:last-child a { border-bottom:none; }
.pg-w-cat-list li a:hover { color:var(--color-primary); }
.pg-w-cat-name { flex:1; }
.pg-w-cat-count { background:var(--color-bg-3);padding:2px 8px;border-radius:var(--radius-full);font-size:11px;color:var(--color-text-subtle); }

/* ── Social buttons ── */
.pg-w-social-list { display:flex;flex-direction:column;gap:var(--space-2); }
.pg-w-social-btn {
  display:flex;align-items:center;gap:var(--space-3);
  padding:10px 14px;border-radius:var(--radius-lg);
  font-size:var(--font-size-sm);font-weight:600;color:#fff;
  text-decoration:none;background:var(--sc,#38bdf8);
  transition:filter var(--transition-fast);
}
.pg-w-social-btn:hover { filter:brightness(1.12);color:#fff; }

/* ── Gallery ── */
.pg-w-gallery { display:grid;grid-template-columns:repeat(var(--g-cols,3),1fr);gap:4px; }
.pg-w-gallery-item { aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius-sm); }
.pg-w-gallery-item img { width:100%;height:100%;object-fit:cover;transition:transform .4s; }
.pg-w-gallery-item:hover img { transform:scale(1.08); }

/* ── Seller info ── */
.pg-w-seller { text-align:center;padding:var(--space-2) 0; }
.pg-w-seller-logo { max-width:120px;max-height:60px;object-fit:contain;margin:0 auto var(--space-3);display:block; }
.pg-w-seller-name { font-size:var(--font-size-base);font-weight:700;margin-bottom:var(--space-2); }
.pg-w-seller-desc { font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-4);line-height:1.6; }
.pg-w-seller-contact { list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-2);text-align:right; }
.pg-w-seller-contact li { font-size:var(--font-size-sm);color:var(--color-text-muted); }
.pg-w-seller-contact a { color:var(--color-primary);text-decoration:none; }

/* ── Author ── */
.pg-w-author { display:flex;gap:var(--space-4);align-items:flex-start; }
.pg-w-author-avatar { width:60px;height:60px;border-radius:50%;object-fit:cover;border:2px solid var(--color-primary);flex-shrink:0; }
.pg-w-author-info { flex:1;min-width:0; }
.pg-w-author-name { display:block;font-size:var(--font-size-base);font-weight:700;margin-bottom:var(--space-2); }
.pg-w-author-bio { font-size:var(--font-size-xs);color:var(--color-text-muted);margin-bottom:var(--space-3);line-height:1.5; }
.pg-w-author-link { font-size:var(--font-size-xs);color:var(--color-primary);text-decoration:none;font-weight:600; }

/* ── Blog cards widget ── */
.pg-w-blog-list { display:flex;flex-direction:column;gap:var(--space-3); }
.pg-w-blog-card { display:flex;gap:var(--space-3);align-items:flex-start; }
.pg-w-blog-img { flex-shrink:0;width:64px;height:48px;border-radius:var(--radius-md);overflow:hidden;display:block; }
.pg-w-blog-img img { width:100%;height:100%;object-fit:cover; }
.pg-w-blog-body h5 { margin:0 0 4px;font-size:var(--font-size-sm);font-weight:600;line-height:1.4; }
.pg-w-blog-body h5 a { color:var(--color-text);text-decoration:none; }
.pg-w-blog-body h5 a:hover { color:var(--color-primary); }

/* ── Progress bar ── */
.pg-w-progress { padding:var(--space-2) 0; }
.pg-w-progress-labels { display:flex;justify-content:space-between;font-size:11px;color:var(--color-text-muted);margin-bottom:var(--space-2); }
.pg-w-progress-bar { height:8px;background:var(--color-bg-3);border-radius:var(--radius-full);overflow:hidden; }
.pg-w-progress-fill { height:100%;background:var(--gradient-secondary);border-radius:var(--radius-full);transition:width .8s ease; }
.pg-w-progress-pct { font-size:11px;color:var(--color-text-muted);margin-top:var(--space-2);text-align:center; }

/* ── Active users ── */
.pg-w-active-users { display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0; }
.pg-w-online-dot { width:10px;height:10px;background:var(--color-success);border-radius:50%;box-shadow:0 0 6px var(--color-success-glow);animation:pulse-glow 2s infinite;flex-shrink:0; }
.pg-w-online-count { font-size:var(--font-size-sm);font-weight:600;color:var(--color-success); }

/* ── Product desc ── */
.pg-w-product-desc { font-size:var(--font-size-sm);color:var(--color-text-muted);line-height:1.7; }
.pg-w-product-desc p { margin-bottom:var(--space-3); }

/* ══════════════════════════════════════════
   POPUP SIDEBAR (padra-popup-sidebar)
══════════════════════════════════════════ */
.pg-popup-sidebar-trigger {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: calc(var(--z-sticky) - 1);
  width: 36px;
  height: 64px;
  background: var(--color-primary);
  color: #0f172a;
  border: none;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 2px 0 12px var(--color-primary-glow);
  transition: width var(--transition-normal);
}
.pg-popup-sidebar-trigger svg { width: 18px; height: 18px; }
.pg-popup-sidebar-trigger:hover { width: 44px; }

.pg-popup-sidebar {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
}
.pg-popup-sidebar.open { pointer-events: all; }

.pg-popup-sidebar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity var(--transition-normal);
  cursor: pointer;
}
.pg-popup-sidebar.open .pg-popup-sidebar-overlay { opacity: 1; }

.pg-popup-sidebar-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--color-bg-2);
  border-right: 1px solid var(--color-border);  /* RTL: border on left visually */
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pg-popup-sidebar.open .pg-popup-sidebar-panel {
  transform: translateX(0);
}

.pg-popup-sidebar-close {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  width: 32px; height: 32px;
  background: var(--color-bg-3);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 1;
}
.pg-popup-sidebar-close:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

.pg-popup-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6) var(--space-5);
  padding-top: calc(var(--space-4) + 40px);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ══════════════════════════════════════════
   PAGE TEMPLATE LAYOUT (page.php)
══════════════════════════════════════════ */
.pg-page-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--space-8);
  align-items: start;
}
.pg-page-main { min-width: 0; }
.pg-page-sidebar {
  position: sticky;
  top: calc(var(--navbar-height,46px) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Double sidebar: 2-col grid inside sidebar column */
.pg-padra-double-sidebar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* Triple sidebar on homepage */
.pg-padra-triple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 1024px) {
  .pg-page-layout       { grid-template-columns: 1fr; }
  .pg-page-sidebar      { position: static; }
  .pg-padra-double-sidebar { grid-template-columns: 1fr; }
  .pg-padra-triple      { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pg-padra-triple      { grid-template-columns: 1fr; }
  .pg-padra-double-sidebar { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   PG_Widget_Button — دکمه گرادیانتی
   آیکون سمت راست، متن وسط، تمام عرض
══════════════════════════════════════════ */

/* Isolate button widget so it never affects sibling widgets */
.widget_pg_button {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  /* Stop any overflow or flex-leaking into siblings */
  overflow: hidden !important;
}

.pg-wb-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  direction: rtl;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* Isolate stacking context — critical to prevent leaking into siblings */
  isolation: isolate;
  contain: layout;
}
.pg-wb-wrap.pg-wb-layout-row  { flex-direction: row; flex-wrap: wrap; }
.pg-wb-wrap.pg-wb-layout-grid { display: grid; gap: var(--space-3); }
.pg-wb-wrap.pg-wb-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pg-wb-wrap.pg-wb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pg-wb-wrap.pg-wb-cols-4 { grid-template-columns: repeat(4, 1fr); }

.pg-wb-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  text-decoration: none;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  width: 100%;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
  gap: 0;
}
.pg-wb-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 7px 24px rgba(0,0,0,0.26);
}
.pg-wb-btn:active { transform: translateY(0); filter: brightness(0.96); }

/* Shine top-edge */
.pg-wb-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Sizes */
.pg-wb-size-sm { font-size: 13px; min-height: 52px;  padding: 6px  6px  6px  16px; }
.pg-wb-size-md { font-size: 18px; min-height: 68px;  padding: 8px  8px  8px  20px; }
.pg-wb-size-lg { font-size: 22px; min-height: 84px;  padding: 10px 10px 10px 24px; }

/* Label: centered in remaining space, RTL so text naturally right-aligns */
.pg-wb-label {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
  padding-right: var(--space-4);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

/* Icon: fixed right side, large, slightly scale-overflow so it feels "floating" */
.pg-wb-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.pg-wb-size-sm .pg-wb-icon { width: 52px;  height: 52px;  margin-right: 2px; }
.pg-wb-size-md .pg-wb-icon { width: 68px;  height: 68px;  margin-right: 4px; }
.pg-wb-size-lg .pg-wb-icon { width: 84px;  height: 84px;  margin-right: 6px; }

.pg-wb-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.25);   /* slightly overflow the button edge */
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.28));
  transition: transform 0.25s ease;
}
.pg-wb-btn:hover .pg-wb-icon img { transform: scale(1.35); }

/* In row/grid layout, allow non-full-width buttons */
.pg-wb-wrap.pg-wb-layout-row .pg-wb-btn:not(.pg-wb-full) {
  width: auto;
  flex: 1 1 140px;
}

/* Responsive */
@media (max-width: 640px) {
  .pg-wb-wrap.pg-wb-cols-3,
  .pg-wb-wrap.pg-wb-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .pg-wb-wrap.pg-wb-layout-row .pg-wb-btn { flex: 1 1 100%; }
}
@media (max-width: 380px) {
  .pg-wb-wrap.pg-wb-cols-2,
  .pg-wb-wrap.pg-wb-cols-3,
  .pg-wb-wrap.pg-wb-cols-4 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   Updated Products/Posts + Post Tabs Widgets
══════════════════════════════════════════ */

/* ── Shared list ── */
.pg-wu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* Constrain to sidebar width — no overflow */
  width: 100%;
  overflow: hidden;
}


/* ── Updated Products/Posts items — image RIGHT, content LEFT ── */
.pg-wu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

.pg-wu-item {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}
.pg-wu-item:last-child { border-bottom: none; }
.pg-wu-item:hover { background: rgba(56,189,248,0.05); }

/* Thumbnail — سمت راست — تمام چهار گوشه گرد */
.pg-wu-thumb {
  grid-column: 1;
  width: 62px;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 5px 5px 5px 0;  /* فاصله از لبه کادر — سمت چپ بدون padding چون محتوا شروع می‌شود */
}
.pg-wu-thumb img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  border-radius: var(--radius-md);   /* تمام چهار گوشه گرد */
  flex-shrink: 0;
}
.pg-wu-item:hover .pg-wu-thumb img { transform: scale(1.06); }

.pg-wu-no-img {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--color-bg-3);
  border-radius: var(--radius-md);
}

/* Content — سمت چپ */
.pg-wu-item-content {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7px 10px;
  min-width: 0;
  text-align: right;
  overflow: hidden;
}

.pg-wu-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.pg-wu-item:hover .pg-wu-title { color: var(--color-primary); }

.pg-wu-item-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 5px;
}

.pg-wu-days-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  background: var(--color-success);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pg-wu-date-label {
  font-size: 10px;
  color: var(--color-text-subtle);
}

.pg-wu-empty {
  padding: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

  text-align: center;
}

/* ── Post Tabs ── */
.pg-pt-widget { direction: rtl; }

.pg-pt-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 0;
}

.pg-pt-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.pg-pt-tab:hover { color: var(--color-text); }

/* Active tab — uses per-tab color variable */
.pg-pt-tab-active {
  color: var(--color-secondary) !important;
  border-bottom-color: var(--color-secondary);
}
.pg-pt-tab[data-tab="new"].pg-pt-tab-active  { color: var(--color-secondary) !important; border-bottom-color: var(--color-secondary); }
.pg-pt-tab[data-tab="pop"].pg-pt-tab-active  { color: var(--color-vip)       !important; border-bottom-color: var(--color-vip); }
.pg-pt-tab[data-tab="rand"].pg-pt-tab-active { color: var(--color-primary)   !important; border-bottom-color: var(--color-primary); }

.pg-pt-tab-icon { font-size: 13px; }

/* Panel */
.pg-pt-panel { display: none; }
.pg-pt-panel-active { display: block; animation: pg-pt-fadein 0.25s ease; }
@keyframes pg-pt-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Button widget: remove body padding so buttons fill edge-to-edge */
.widget_pg_button .pg-sidebar-widget-body {
  padding: 0 !important;
  overflow: hidden;
}
/* Ensure the wrap respects parent width in ALL sidebar contexts */
.pg-sidebar-widget .pg-wb-wrap,
.pg-blog-sidebar .pg-wb-wrap,
.pg-shop-sidebar-col .pg-wb-wrap,
.pg-page-sidebar .pg-wb-wrap {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}