/* =====================================================================================
 * صفحه‌ی «ساخت ویدیو با هوش مصنوعی» (/ai-video) و «کیف پول» (/wallet)
 * بعد از prompts.css و studio.css لود می‌شود و از همان اجزا (st-*) استفاده می‌کند؛ این فایل فقط
 * اجزای مخصوص ویدیو و کیف پول را دارد (پیشوند vd- و wl-).
 * ===================================================================================== */
@media (min-width: 861px) {
  body:has(.pz-video) .nav-links a[href="/ai-video"] {
    color: #22e3f5; border: 1px solid rgba(34, 227, 245, .45); border-radius: 999px; padding: 5px 12px;
    box-shadow: 0 0 14px rgba(34, 227, 245, .18);
  }
}
@media (max-width: 860px) { body:has(.pz-video) .nav-links a[href="/ai-video"] { color: #22e3f5; } }
.pz-video [hidden], .pz-wallet [hidden] { display: none !important; }

/* حالت: متن به ویدیو / عکس به ویدیو */
.vd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vd-modes { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; border: 1px solid rgba(34, 227, 245, .25); background: rgba(3, 10, 17, .6); }
.vd-modes button {
  font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; padding: 8px 16px; border-radius: 999px; border: 0;
  color: var(--cy-text-2); background: transparent; transition: color .2s, background .2s, box-shadow .2s;
}
.vd-modes button.on { color: #021118; background: linear-gradient(90deg, var(--cy-cyan), var(--cy-magenta)); box-shadow: 0 0 16px rgba(34, 227, 245, .35); }
.vd-wallet {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border-radius: 999px; text-decoration: none;
  border: 1px solid rgba(61, 245, 160, .4); background: rgba(61, 245, 160, .06); color: var(--cy-text); font-size: 13px;
}
.vd-wallet b { color: var(--cy-green); }
.vd-wallet .vd-charge { padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: 12px; color: #021118; background: var(--cy-green); cursor: pointer; border: 0; font-family: inherit; }
.vd-uploads { display: flex; gap: 10px; align-items: stretch; }
.vd-uploads .st-upload-tile { flex-basis: 190px; }
.vd-ratio-note { font-size: 12px; color: var(--cy-muted); }
.st-chip select { max-width: 170px; }

/* کارت کار در جریان: نوار پیشرفت و پخش‌کننده */
.vd-progress { width: 100%; height: 8px; border-radius: 99px; background: rgba(34, 227, 245, .1); overflow: hidden; }
.vd-progress i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--cy-cyan), var(--cy-magenta)); box-shadow: 0 0 10px rgba(34, 227, 245, .6); transition: width .6s; }
.vd-progress.indet i { width: 35% !important; animation: vd-indet 1.4s ease-in-out infinite; }
@keyframes vd-indet { 0% { transform: translateX(120%); } 100% { transform: translateX(-320%); } }
.vd-stage { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--cy-muted); }
.vd-stage span.on { color: var(--cy-cyan); font-weight: 800; }
.vd-stage span.done { color: var(--cy-green); }
.vd-player { flex: 0 0 min(420px, 52%); }
.vd-player video { width: 100%; max-height: 520px; border-radius: 12px; background: #000; display: block; border: 1px solid rgba(61, 245, 160, .4); }
.vd-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.vd-meta span { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; color: var(--cy-text-2); border: 1px solid rgba(34, 227, 245, .22); background: rgba(34, 227, 245, .05); }
.vd-refund { font-size: 12.5px; color: var(--cy-green); }

/* کارت استایل ویدیو: پیش‌نمایش متحرک روی hover */
.st-style video.vd-prev { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.st-style.playing video.vd-prev { opacity: 1; }
.st-style .vd-badge { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 11px; padding: 3px 9px; border-radius: 999px; background: rgba(3, 6, 11, .7); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }

/* گالری ویدیوهای من */
.st-gal-media .vd-play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; cursor: pointer; }
.st-gal-media .vd-play span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #021118; background: rgba(34, 227, 245, .9); box-shadow: 0 0 22px rgba(34, 227, 245, .6); }
.st-gal-media .vd-pct { position: absolute; bottom: 10px; right: 10px; left: 10px; z-index: 1; }

/* مودال (شارژ کیف پول / پخش ویدیو) */
.vd-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(2, 4, 8, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vd-modal.open { display: flex; }
.vd-modal-box { position: relative; width: min(520px, 100%); max-height: 92vh; overflow: auto; padding: 22px; }
.vd-modal-box.wide { width: min(860px, 100%); padding: 14px; }
.vd-modal-box h3 { margin: 0 0 6px; color: #fff; font-size: 18px; }
.vd-modal-box .st-x { top: 12px; left: 12px; }
.vd-modal-box video { width: 100%; max-height: 80vh; border-radius: 12px; background: #000; display: block; }

/* بسته‌های شارژ */
.wl-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 14px 0 10px; }
.wl-pack {
  font: inherit; cursor: pointer; padding: 12px 8px; border-radius: 14px; text-align: center; font-weight: 800; font-size: 14px;
  color: var(--cy-text); background: rgba(34, 227, 245, .05); border: 1px solid rgba(34, 227, 245, .25); transition: border-color .2s, background .2s, box-shadow .2s;
}
.wl-pack small { display: block; font-size: 11px; color: var(--cy-muted); font-weight: 600; margin-top: 2px; }
.wl-pack:hover, .wl-pack.on { border-color: var(--cy-cyan); background: rgba(34, 227, 245, .12); box-shadow: 0 0 16px rgba(34, 227, 245, .2); }
.wl-pack.need { border-color: rgba(61, 245, 160, .6); }
.wl-custom { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wl-custom input {
  flex: 1 1 180px; font: inherit; font-size: 15px; padding: 11px 14px; border-radius: 12px; color: var(--cy-text);
  background: rgba(3, 10, 17, .7); border: 1px solid rgba(34, 227, 245, .28); text-align: center;
}
.wl-custom input:focus { outline: none; border-color: var(--cy-cyan); }
.wl-hint { font-size: 12.5px; color: var(--cy-muted); line-height: 1.9; margin: 8px 0 0; }

/* صفحه‌ی کیف پول */
.wl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.wl-card { padding: 18px; }
.wl-card .k { font-size: 12.5px; color: var(--cy-muted); }
.wl-card .v { font-size: clamp(20px, 3vw, 28px); font-weight: 900; color: #fff; margin-top: 4px; }
.wl-card.main .v { color: var(--cy-green); text-shadow: 0 0 16px rgba(61, 245, 160, .4); }
.wl-section { margin-top: 18px; padding: clamp(14px, 2.4vw, 22px); }
.wl-section h2 { margin: 0 0 4px; font-size: 18px; color: #fff; }
.wl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wl-table th, .wl-table td { padding: 10px 8px; text-align: right; border-bottom: 1px solid rgba(34, 227, 245, .12); }
.wl-table th { color: var(--cy-cyan); font-size: 12.5px; font-weight: 800; }
.wl-table td.plus { color: var(--cy-green); font-weight: 800; }
.wl-table td.minus { color: #ff8da0; font-weight: 800; }
.wl-table td.neutral { color: var(--cy-amber); font-weight: 800; }
.wl-scroll { overflow-x: auto; }
.wl-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

@media (max-width: 760px) {
  .wl-scroll .wl-table { min-width: 560px; }
}
@media (max-width: 640px) {
  .vd-top { flex-direction: column; align-items: stretch; }
  .vd-modes { justify-content: center; }
  .vd-modes button { flex: 1; padding: 8px 6px; font-size: 13px; }
  .vd-wallet { justify-content: space-between; }
  .vd-player { flex-basis: auto; width: 100%; }
  .wl-cards { grid-template-columns: 1fr; }
  .st-chip select { max-width: 100%; width: 100%; }
}