.elementor-57188 .elementor-element.elementor-element-7f274e4{--display:flex;overflow:visible;}.elementor-57188 .elementor-element.elementor-element-6b69712.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-57188 .elementor-element.elementor-element-3c62497.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-57188 .elementor-element.elementor-element-3c62497 .sp-sv-widget-heading{color:var( --e-global-color-236feb8 );font-size:20px;}.elementor-57188 .elementor-element.elementor-element-3c62497 .sp-sv-grid{gap:20px;}.elementor-57188 .elementor-element.elementor-element-3c62497 .sp-sv-carousel-track{gap:20px;}/* Start custom CSS for soratpress_short_video_grid, class: .elementor-element-3c62497 *//* =========================================
   گرید ویدئوی کوتاه - نسخه نهایی و فول ریسپانسیو
   اسکوپ: elementor-element-3c62497
========================================= */

.elementor-element-3c62497,
.elementor-element-3c62497 * {
  box-sizing: border-box !important;
}

.elementor-element-3c62497 {
  direction: rtl;
}

/* تیتر بخش با خط زیرین نارنجی و فونت غیر-بولد */
.elementor-element-3c62497 .sp-sv-widget-heading {
  position: relative;
  margin: 0 0 24px;
  padding-bottom: 10px;
  color: #1a1a1a;
  font-size: 1.2rem;
  font-weight: 400;
  text-align: right;
}

/* خط نارنجی فلت زیر تیتر */
.elementor-element-3c62497 .sp-sv-widget-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 2px;
  background-color: #ff6700;
}

/* گرید کارت‌ها */
.elementor-element-3c62497 .sp-sv-grid {
  display: grid;
  grid-template-columns: repeat(var(--sp-sv-columns, 4), minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

.elementor-element-3c62497 .sp-sv-item {
  display: flex;
  height: 100%;
}

/* کارت ویدئو با بوردر 2px و ردیوس 10 */
.elementor-element-3c62497 .sp-sv-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 8px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.elementor-element-3c62497 .sp-sv-card:hover {
  background: #fffaf6;
  border-color: #ff6700;
}

/* قاب تصویر عمودی (9:16) با ردیوس 10 */
.elementor-element-3c62497 .sp-sv-open {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
  background: #1a1a1a;
  border: 0;
  border-radius: 10px;
}

.elementor-element-3c62497 .sp-sv-open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.35s ease;
}

.elementor-element-3c62497 .sp-sv-card:hover .sp-sv-open img {
  transform: scale(1.04);
}

/* دکمه پخش روی کارت */
.elementor-element-3c62497 .sp-sv-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0 0 0 2px;
  color: #ffffff;
  font-size: 15px;
  background: rgba(26, 26, 26, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.elementor-element-3c62497 .sp-sv-card:hover .sp-sv-play {
  background: #ff6700;
  border-color: #ff6700;
  transform: translate(-50%, -50%) scale(1.1);
}

/* عنوان کارت */
.elementor-element-3c62497 .sp-sv-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(0.88rem * 1.45 * 2);
  padding: 0 4px;
  margin: 10px 0 4px;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
}

.elementor-element-3c62497 .sp-sv-title a {
  display: -webkit-box;
  overflow: hidden;
  color: #334155;
  text-decoration: none;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-weight: 400;
  transition: color 0.25s ease;
}

.elementor-element-3c62497 .sp-sv-card:hover .sp-sv-title a {
  color: #ff6700;
}

/* =========================================
   لایت‌باکس (Modal) - کاملاً سنتر و فیت
========================================= */

.elementor-element-3c62497 .sp-sv-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  direction: rtl !important;
}

.elementor-element-3c62497 .sp-sv-modal[aria-hidden="true"] {
  display: none !important;
}

.elementor-element-3c62497 .sp-sv-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  cursor: pointer;
  background: rgba(18, 18, 20, 0.88) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* پنل اصلی لایت‌باکس با سنتر کامل و ردیوس 10 */
.elementor-element-3c62497 .sp-sv-modal-panel {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(380px, calc(100vw - 32px)) !important;
  height: min(720px, calc(100dvh - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  margin: auto !important;
  overflow: hidden !important;
  background: #141416 !important;
  border: 2px solid #2d2d32 !important;
  border-top: 3px solid #ff6700 !important;
  border-radius: 10px !important;
}

/* عنوان لایت‌باکس */
.elementor-element-3c62497 .sp-sv-modal-title {
  flex: 0 0 auto !important;
  width: 100% !important;
  padding: 12px 48px 10px 16px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #f4f4f5 !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  background: transparent !important;
}

.elementor-element-3c62497 .sp-sv-modal-title:empty {
  display: none !important;
}

/* تگ ویدئو داخل پنل لایت‌باکس با ردیوس 10 */
.elementor-element-3c62497 .sp-sv-modal-panel video {
  display: block !important;
  flex: 1 1 0% !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: contain !important;
  background: #000000 !important;
  border-radius: 10px !important;
  outline: none !important;
}

/* دکمه بستن لایت‌باکس */
.elementor-element-3c62497 .sp-sv-close {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  color: #d4d4d8 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  background: #242428 !important;
  border: 1px solid #3a3a40 !important;
  border-radius: 8px !important;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
}

.elementor-element-3c62497 .sp-sv-close:hover {
  color: #ffffff !important;
  background: #ff6700 !important;
  border-color: #ff6700 !important;
}

/* =========================================
   نوار کنترل سفارشی و فلت ویدئو
========================================= */

.elementor-element-3c62497 .sp-sv-controls {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 48px !important;
  max-height: 48px !important;
  padding: 0 12px !important;
  flex: 0 0 48px !important;
  direction: ltr !important;
  background: #141416 !important;
  border-top: 1px solid #222226 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* دکمه‌های کنترل (پلی، پاز، صدا) */
.elementor-element-3c62497 .sp-sv-control {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  flex: 0 0 28px !important;
  color: #88888c !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
}

.elementor-element-3c62497 .sp-sv-control svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: currentColor;
  pointer-events: none;
}

.elementor-element-3c62497 .sp-sv-control:hover {
  color: #ff6700 !important;
}

/* نوارهای Range (زمان و ولوم) */
.elementor-element-3c62497 input[type="range"].sp-sv-seek,
.elementor-element-3c62497 input[type="range"].sp-sv-volume {
  display: block !important;
  height: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #333338 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.elementor-element-3c62497 input[type="range"].sp-sv-seek {
  flex: 1 1 auto !important;
  width: 100% !important;
}

.elementor-element-3c62497 input[type="range"].sp-sv-volume {
  width: 50px !important;
  flex: 0 0 50px !important;
}

/* مسیر نوارها (WebKit) */
.elementor-element-3c62497 input[type="range"]::-webkit-slider-runnable-track {
  height: 3px !important;
  background: linear-gradient(
    to right,
    #ff6700 0%,
    #ff6700 var(--sp-p, 0%),
    #333338 var(--sp-p, 0%),
    #333338 100%
  ) !important;
  border: none !important;
}

.elementor-element-3c62497 input[type="range"]::-webkit-slider-thumb {
  width: 9px !important;
  height: 9px !important;
  margin-top: -3px !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #ff6700 !important;
  border: none !important;
  border-radius: 50% !important;
}

/* مسیر نوارها (Firefox) */
.elementor-element-3c62497 input[type="range"]::-moz-range-track {
  height: 3px !important;
  background: #333338 !important;
  border: none !important;
}

.elementor-element-3c62497 input[type="range"]::-moz-range-progress {
  height: 3px !important;
  background: #ff6700 !important;
}

.elementor-element-3c62497 input[type="range"]::-moz-range-thumb {
  width: 9px !important;
  height: 9px !important;
  cursor: pointer !important;
  background: #ff6700 !important;
  border: none !important;
  border-radius: 50% !important;
}

/* نمایش تایم */
.elementor-element-3c62497 .sp-sv-time {
  flex: 0 0 auto !important;
  color: #77777c !important;
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  direction: ltr !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.elementor-element-3c62497 .sp-sv-volume-group {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
}

/* =========================================
   تنظیمات ریسپانسیو و مرکزچین مودال در موبایل
========================================= */

@media (max-width: 1024px) {
  .elementor-element-3c62497 .sp-sv-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (max-width: 768px) {
  .elementor-element-3c62497 .sp-sv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* سنتر دقیق مودال در موبایل با فاصله ایمن از لبه‌ها */
  .elementor-element-3c62497 .sp-sv-modal {
    padding: 12px !important;
  }

  .elementor-element-3c62497 .sp-sv-modal-panel {
    width: min(360px, calc(100vw - 24px)) !important;
    height: min(640px, calc(100dvh - 30px), calc(100vh - 30px)) !important;
    max-height: calc(100dvh - 30px) !important;
    margin: auto !important;
  }

  /* بهینه‌سازی نوار کنترل در موبایل */
  .elementor-element-3c62497 input[type="range"].sp-sv-volume {
    display: none !important;
  }

  .elementor-element-3c62497 .sp-sv-controls {
    height: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 10px !important;
    gap: 6px !important;
  }
}

@media (max-width: 480px) {
  .elementor-element-3c62497 .sp-sv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .elementor-element-3c62497 .sp-sv-card {
    padding: 6px !important;
  }

  .elementor-element-3c62497 .sp-sv-title {
    font-size: 0.8rem !important;
    margin: 8px 0 2px !important;
    min-height: calc(0.8rem * 1.35 * 2) !important;
  }

  .elementor-element-3c62497 .sp-sv-play {
    width: 40px !important;
    height: 40px !important;
    font-size: 13px !important;
  }

  /* سایز بهینه مودال در گوشی‌های کوچک (مانند آیفون SE) */
  .elementor-element-3c62497 .sp-sv-modal {
    padding: 8px !important;
  }

  .elementor-element-3c62497 .sp-sv-modal-panel {
    width: min(340px, calc(100vw - 16px)) !important;
    height: min(580px, calc(100dvh - 20px), calc(100vh - 20px)) !important;
    border-radius: 10px !important;
  }

  .elementor-element-3c62497 .sp-sv-modal-title {
    font-size: 0.88rem !important;
    padding: 10px 42px 8px 12px !important;
  }
}/* End custom CSS */