/* ═══════════════════════════════════════════════════════
   AMG Player v2.2 — Complete CSS
   ═══════════════════════════════════════════════════════ */

:root {
  --amg-accent:   #00d4ff;
  --amg-glow:     rgba(0,212,255,.4);
  --amg-bg:       #0a0a0f;
  --amg-surface:  #12121a;
  --amg-border:   rgba(255,255,255,.08);
  --amg-text:     rgba(255,255,255,.88);
  --amg-muted:    rgba(255,255,255,.45);
  --amg-radius:   14px;
  --amg-ease:     .22s cubic-bezier(.4,0,.2,1);
}

.amg-player-wrapper *,
.amg-player-wrapper *::before,
.amg-player-wrapper *::after { box-sizing:border-box; margin:0; padding:0; }
.amg-player-wrapper { font-family:system-ui,-apple-system,'Segoe UI',sans-serif; direction:ltr; }
.amg-player-wrapper.amg-dropdown-active { position:relative; z-index:1000; }

/* ════════════════════════════════════════
   SKIN VARIABLES — applied via JS on init
   These override --amg-* custom props
════════════════════════════════════════ */

/* dark (default) */
.amg-skin-dark  { --amg-bg:#0a0a0f; --amg-surface:#12121a; --amg-border:rgba(255,255,255,.08); }
/* light */
.amg-skin-light { --amg-bg:#e8e8f0; --amg-surface:#d8d8e8; --amg-border:rgba(0,0,0,.12); --amg-text:rgba(0,0,0,.85); --amg-muted:rgba(0,0,0,.45); }
.amg-skin-light .amg-controls-overlay { background:linear-gradient(to bottom,rgba(0,0,0,.4) 0%,transparent 25%,transparent 60%,rgba(0,0,0,.7) 100%) !important; }
.amg-skin-light .amg-audio-card { background:#d0d0e0; }
/* glass */
.amg-skin-glass { --amg-bg:rgba(10,10,30,.7); --amg-surface:rgba(14,14,28,.8); --amg-border:rgba(255,255,255,.15); }
.amg-skin-glass.amg-video-wrapper,
.amg-skin-glass.amg-audio-wrapper .amg-audio-card {
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 8px 40px rgba(0,212,255,.1), inset 0 0 0 1px rgba(255,255,255,.12) !important;
  border-radius:20px !important;
}
/* neon — glow color customizable via --amg-neon-glow */
.amg-skin-neon  { --amg-bg:#050510; --amg-surface:#080818; --amg-border:var(--amg-neon-glow, var(--amg-accent)); }
.amg-skin-neon.amg-video-wrapper {
  box-shadow:0 0 0 2px var(--amg-neon-glow, var(--amg-accent)), 0 0 30px rgba(var(--_nr,0),var(--_ng,212),var(--_nb,255),.4), 0 8px 40px rgba(0,0,0,.6) !important;
}
.amg-skin-neon.amg-audio-wrapper .amg-audio-card {
  box-shadow:0 0 0 1px var(--amg-neon-glow, var(--amg-accent)), 0 0 20px rgba(var(--_nr,0),var(--_ng,212),var(--_nb,255),.35) !important;
}
.amg-skin-neon .amg-progress-played,
.amg-skin-neon .amg-audio-progress-played { box-shadow:0 0 14px var(--amg-neon-glow, var(--amg-accent)) !important; }
/* minimal */
.amg-skin-minimal { --amg-bg:#111; --amg-surface:#0a0a0a; --amg-border:rgba(255,255,255,.06); }
.amg-skin-minimal.amg-video-wrapper { border-radius:4px !important; box-shadow:none !important; }

/* ════════════════════════════════════════
   NEW COLOR SCHEMES (رنگ‌بندی‌های جدید)
════════════════════════════════════════ */
/* sunset (غروب) — warm orange/pink gradient */
.amg-skin-sunset {
  --amg-bg:#1a0f12; --amg-surface:#241318; --amg-border:rgba(255,138,101,.18);
  --amg-accent:#ff6b6b; --amg-glow:rgba(255,107,107,.4);
}
.amg-skin-sunset.amg-video-wrapper,
.amg-skin-sunset.amg-audio-wrapper .amg-audio-card {
  background-image:linear-gradient(160deg,#2b1018 0%,#1a0f12 60%);
  box-shadow:0 8px 30px rgba(255,107,107,.12) !important;
}
.amg-skin-sunset .amg-progress-played,
.amg-skin-sunset .amg-audio-progress-played {
  background:linear-gradient(90deg,#ff6b6b,#ffa75c) !important;
}

/* ocean (اقیانوس) — deep teal/blue */
.amg-skin-ocean {
  --amg-bg:#061b21; --amg-surface:#0a242c; --amg-border:rgba(0,180,216,.18);
  --amg-accent:#00b4d8; --amg-glow:rgba(0,180,216,.4);
}
.amg-skin-ocean.amg-video-wrapper,
.amg-skin-ocean.amg-audio-wrapper .amg-audio-card {
  background-image:linear-gradient(160deg,#0a2a33 0%,#061b21 65%);
  box-shadow:0 8px 30px rgba(0,180,216,.12) !important;
}
.amg-skin-ocean .amg-progress-played,
.amg-skin-ocean .amg-audio-progress-played {
  background:linear-gradient(90deg,#0077b6,#00b4d8) !important;
}

/* forest (جنگل) — muted green / earth tones */
.amg-skin-forest {
  --amg-bg:#0f1810; --amg-surface:#152018; --amg-border:rgba(122,166,108,.18);
  --amg-accent:#7aa66c; --amg-glow:rgba(122,166,108,.4);
}
.amg-skin-forest.amg-video-wrapper,
.amg-skin-forest.amg-audio-wrapper .amg-audio-card {
  background-image:linear-gradient(160deg,#16241a 0%,#0f1810 65%);
  box-shadow:0 8px 30px rgba(122,166,108,.1) !important;
}
.amg-skin-forest .amg-progress-played,
.amg-skin-forest .amg-audio-progress-played {
  background:linear-gradient(90deg,#4f7a3f,#a9c97e) !important;
}

/* royal (سلطنتی) — purple / gold */
.amg-skin-royal {
  --amg-bg:#160f24; --amg-surface:#1e1530; --amg-border:rgba(212,175,55,.22);
  --amg-accent:#d4af37; --amg-glow:rgba(212,175,55,.35);
}
.amg-skin-royal.amg-video-wrapper,
.amg-skin-royal.amg-audio-wrapper .amg-audio-card {
  background-image:linear-gradient(160deg,#241634 0%,#160f24 65%);
  box-shadow:0 8px 30px rgba(212,175,55,.1), inset 0 0 0 1px rgba(212,175,55,.12) !important;
}
.amg-skin-royal .amg-progress-played,
.amg-skin-royal .amg-audio-progress-played {
  background:linear-gradient(90deg,#7b2ff7,#d4af37) !important;
}

/* mono (مونوکروم) — grayscale, high contrast */
.amg-skin-mono {
  --amg-bg:#000; --amg-surface:#0d0d0d; --amg-border:rgba(255,255,255,.14);
  --amg-accent:#e8e8e8; --amg-glow:rgba(255,255,255,.25); --amg-text:rgba(255,255,255,.92);
}
.amg-skin-mono.amg-video-wrapper { border-radius:6px !important; box-shadow:none !important; }
.amg-skin-mono.amg-audio-wrapper .amg-audio-card { box-shadow:none !important; }
.amg-skin-mono .amg-progress-played,
.amg-skin-mono .amg-audio-progress-played { background:#e8e8e8 !important; box-shadow:none !important; }

/* ════════════════════════════════════════
   VIBRANT / NEON SCHEMES (مدرن و پرانرژی)
════════════════════════════════════════ */
/* aurora (اورورا) — teal/violet/pink northern-lights gradient */
.amg-skin-aurora {
  --amg-bg:#150a26; --amg-surface:#1d0f33; --amg-border:rgba(155,93,229,.25);
  --amg-accent:#9b5de5; --amg-glow:rgba(155,93,229,.5);
}
.amg-skin-aurora.amg-video-wrapper,
.amg-skin-aurora.amg-audio-wrapper .amg-audio-card {
  background-image:linear-gradient(135deg,#0d1b2a 0%,#1d0f33 50%,#2a0f24 100%);
  box-shadow:0 0 0 1px rgba(155,93,229,.25), 0 8px 34px rgba(155,93,229,.18) !important;
}
.amg-skin-aurora .amg-progress-played,
.amg-skin-aurora .amg-audio-progress-played {
  background:linear-gradient(90deg,#00f5d4,#9b5de5,#f15bb5) !important;
  box-shadow:0 0 10px rgba(155,93,229,.6) !important;
}
.amg-skin-aurora .amg-btn:hover { box-shadow:0 0 14px rgba(155,93,229,.5); }

/* cyber (سایبر) — deep violet/black with electric cyan glow */
.amg-skin-cyber {
  --amg-bg:#0d0221; --amg-surface:#190061; --amg-border:rgba(0,255,209,.3);
  --amg-accent:#00ffd1; --amg-glow:rgba(0,255,209,.55);
}
.amg-skin-cyber.amg-video-wrapper,
.amg-skin-cyber.amg-audio-wrapper .amg-audio-card {
  background-image:linear-gradient(160deg,#190061 0%,#0d0221 70%);
  box-shadow:0 0 0 1px rgba(0,255,209,.3), 0 0 30px rgba(0,255,209,.15) !important;
}
.amg-skin-cyber .amg-progress-played,
.amg-skin-cyber .amg-audio-progress-played {
  background:#00ffd1 !important; box-shadow:0 0 12px rgba(0,255,209,.7) !important;
}
.amg-skin-cyber .amg-btn:hover { box-shadow:0 0 14px rgba(0,255,209,.55); }

/* candy (کندی) — playful pink/purple */
.amg-skin-candy {
  --amg-bg:#241430; --amg-surface:#2e1a3d; --amg-border:rgba(255,111,181,.25);
  --amg-accent:#ff6fb5; --amg-glow:rgba(255,111,181,.45);
}
.amg-skin-candy.amg-video-wrapper,
.amg-skin-candy.amg-audio-wrapper .amg-audio-card {
  background-image:linear-gradient(135deg,#2e1a3d 0%,#241430 60%);
  box-shadow:0 8px 30px rgba(255,111,181,.15) !important;
}
.amg-skin-candy .amg-progress-played,
.amg-skin-candy .amg-audio-progress-played {
  background:linear-gradient(90deg,#ff6fb5,#7c4dff) !important;
}

/* toxic (توکسیک) — near-black with acid-green glow */
.amg-skin-toxic {
  --amg-bg:#0c1f0c; --amg-surface:#142914; --amg-border:rgba(173,255,47,.3);
  --amg-accent:#adff2f; --amg-glow:rgba(173,255,47,.55);
}
.amg-skin-toxic.amg-video-wrapper,
.amg-skin-toxic.amg-audio-wrapper .amg-audio-card {
  background-image:linear-gradient(160deg,#142914 0%,#0c1f0c 70%);
  box-shadow:0 0 0 1px rgba(173,255,47,.3), 0 0 26px rgba(173,255,47,.12) !important;
}
.amg-skin-toxic .amg-progress-played,
.amg-skin-toxic .amg-audio-progress-played {
  background:#adff2f !important; box-shadow:0 0 12px rgba(173,255,47,.65) !important;
}
.amg-skin-toxic .amg-btn:hover { box-shadow:0 0 14px rgba(173,255,47,.5); }

/* vapor (وپوروِیو) — vaporwave pink/cyan/mint gradient */
.amg-skin-vapor {
  --amg-bg:#1a0f2e; --amg-surface:#241540; --amg-border:rgba(255,113,206,.25);
  --amg-accent:#01cdfe; --amg-glow:rgba(1,205,254,.5);
}
.amg-skin-vapor.amg-video-wrapper,
.amg-skin-vapor.amg-audio-wrapper .amg-audio-card {
  background-image:linear-gradient(135deg,#241540 0%,#1a0f2e 60%);
  box-shadow:0 8px 30px rgba(1,205,254,.15) !important;
}
.amg-skin-vapor .amg-progress-played,
.amg-skin-vapor .amg-audio-progress-played {
  background:linear-gradient(90deg,#ff71ce,#01cdfe,#05ffa1) !important;
  box-shadow:0 0 10px rgba(1,205,254,.5) !important;
}


/* ════════════════════════════════════════
   VIDEO WRAPPER
════════════════════════════════════════ */
.amg-video-wrapper {
  position:relative; width:100%; background:var(--amg-bg);
  border-radius:var(--amg-radius); overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.6), 0 0 0 1px var(--amg-border);
  user-select:none; -webkit-user-select:none;
  transition:box-shadow .3s, background .3s;
}
.amg-video-container {
  position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden;
}
video.amg-video-js { width:100%; height:100%; display:block; object-fit:contain; }
.amg-social-embed { position:absolute; inset:0; }
.amg-social-embed iframe { width:100%; height:100%; border:none; display:block; }

/* ── Controls Overlay ── */
.amg-controls-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:space-between; opacity:0; transition:opacity var(--amg-ease);
  background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,transparent 25%,transparent 60%,rgba(0,0,0,.8) 100%);
  z-index:10; pointer-events:none;
}
.amg-video-container:hover .amg-controls-overlay,
.amg-video-container.amg-paused .amg-controls-overlay { opacity:1; pointer-events:all; }
.amg-controls-overlay[style*="opacity: 1"],
.amg-controls-overlay[style*="opacity:1"] { pointer-events:all; }

/* top bar */
.amg-top-bar { display:flex; justify-content:space-between; align-items:center; padding:12px 14px 0; }
.amg-title { color:#fff; font-size:14px; font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70%; }
.amg-top-actions { display:flex; gap:4px; }

/* center play */
.amg-center-play { display:flex; align-items:center; justify-content:center; flex:1; }
.amg-big-play-btn {
  width:64px; height:64px; border-radius:50%; border:none;
  background:rgba(0,0,0,.5); backdrop-filter:blur(8px);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform var(--amg-ease), background var(--amg-ease), box-shadow var(--amg-ease), opacity var(--amg-ease);
  box-shadow:0 0 0 2px rgba(255,255,255,.2), 0 4px 20px rgba(0,0,0,.4);
}
.amg-big-play-btn:hover { transform:scale(1.1); background:var(--amg-accent); box-shadow:0 0 0 2px rgba(255,255,255,.3),0 0 30px var(--amg-glow); }
.amg-big-play-btn svg { width:26px; height:26px; fill:#fff; transform:translateX(2px); }

/* bottom controls */
.amg-bottom-controls { padding:0 10px 10px; }

/* progress */
.amg-progress-container { position:relative; padding:8px 0; cursor:pointer; }
.amg-progress-bar { position:relative; height:4px; background:rgba(255,255,255,.2); border-radius:2px; transition:height var(--amg-ease); }
.amg-progress-container:hover .amg-progress-bar { height:6px; }
.amg-progress-buffered { position:absolute; left:0; top:0; bottom:0; background:rgba(255,255,255,.3); border-radius:2px; width:0; }
.amg-progress-played   { position:absolute; left:0; top:0; bottom:0; background:var(--amg-accent); border-radius:2px; width:0; box-shadow:0 0 8px var(--amg-glow); }
.amg-progress-thumb {
  position:absolute; top:50%; left:0; transform:translate(-50%,-50%) scale(0);
  width:14px; height:14px; border-radius:50%; background:#fff;
  box-shadow:0 0 6px rgba(0,0,0,.5); pointer-events:none; transition:transform var(--amg-ease);
}
.amg-progress-container:hover .amg-progress-thumb { transform:translate(-50%,-50%) scale(1); }
.amg-time-tooltip {
  position:absolute; bottom:110%; transform:translateX(-50%);
  background:rgba(0,0,0,.85); color:#fff; font-size:11px; padding:3px 7px;
  border-radius:4px; pointer-events:none; opacity:0; transition:opacity .15s; white-space:nowrap;
}
.amg-progress-container:hover .amg-time-tooltip { opacity:1; }

/* controls row */
.amg-controls-row { display:flex; align-items:center; justify-content:space-between; gap:2px; }
.amg-controls-left, .amg-controls-right { display:flex; align-items:center; gap:2px; }

/* buttons */
.amg-btn {
  width:36px; height:36px; border:none; background:transparent;
  color:rgba(255,255,255,.85); cursor:pointer; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  transition:color var(--amg-ease), background var(--amg-ease), transform var(--amg-ease);
  font-size:12px; font-weight:700; flex-shrink:0; padding:0; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.amg-btn svg { width:20px; height:20px; fill:currentColor; }
.amg-btn:hover { color:#fff; background:rgba(255,255,255,.12); }
.amg-btn.active { color:var(--amg-accent); }
.amg-btn:active { transform:scale(.9); }

/* volume */
.amg-volume-wrap { display:flex; align-items:center; gap:2px; }
.amg-volume-slider { width:0; overflow:hidden; transition:width var(--amg-ease); }
.amg-volume-wrap:hover .amg-volume-slider,
.amg-volume-wrap:focus-within .amg-volume-slider { width:68px; }
.amg-volume-track { position:relative; height:4px; background:rgba(255,255,255,.2); border-radius:2px; cursor:pointer; width:68px; }
.amg-volume-fill  { position:absolute; left:0; top:0; bottom:0; background:var(--amg-accent); border-radius:2px; width:80%; }
.amg-volume-thumb { position:absolute; top:50%; transform:translate(-50%,-50%); width:12px; height:12px; border-radius:50%; background:#fff; pointer-events:none; left:80%; }

/* time */
.amg-time-display { color:rgba(255,255,255,.85); font-size:12px; font-weight:500; white-space:nowrap; padding:0 4px; }
.amg-time-sep { opacity:.5; margin:0 2px; }

/* dropdowns */
.amg-dropdown-wrap { position:relative; }
.amg-dropdown {
  position:absolute; bottom:calc(100% + 6px); right:0;
  background:#1a1a2e; border:1px solid rgba(255,255,255,.1); border-radius:10px;
  min-width:140px; padding:6px 0;
  opacity:0; pointer-events:none; transform:translateY(6px) scale(.97);
  transition:opacity var(--amg-ease), transform var(--amg-ease);
  z-index:9999; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 8px 32px rgba(0,0,0,.6); overflow-y:auto; -webkit-overflow-scrolling:touch;
  /* ریشه‌ی واقعیِ باگِ «اسکرول افقیِ ناخواسته در باکس دانلود»: تنظیم
     overflow-y:auto بدون یک width صریح، خودِ مرورگر را مجبور می‌کند
     overflow-x را هم به‌جای visible (که باکس را برای جا دادن محتوای
     white-space:nowrap بزرگ می‌کند) روی auto بگذارد — یعنی به‌جای بزرگ
     شدنِ باکس، محتوا بریده و اسکرول‌پذیر می‌شود. این باگ از قبل هم بود،
     فقط چون کارت با overflow:hidden کل باکس را قطع می‌کرد دیده نمی‌شد؛
     حالا که باکس کامل نمایان است، همین مشکلِ کمین‌کرده هم دیده شد.
     width:max-content باکس را همیشه دقیقاً به‌اندازه‌ی محتوایش بزرگ
     می‌کند؛ max-width فقط برای برچسب‌های خیلی طولانی جلوی بیرون‌زدن از
     صفحه را می‌گیرد. */
  width:max-content; max-width:min(280px, calc(100vw - 24px)); overflow-x:hidden;
  direction:ltr;
}
.amg-dropdown-wrap.open .amg-dropdown { opacity:1; pointer-events:all; transform:translateY(0) scale(1); }
.amg-dropdown-title { color:var(--amg-muted); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:4px 12px 6px; }
.amg-dropdown-item {
  background:none; border:none; color:#e0e0f0;
  font-size:13px; padding:8px 12px; text-align:left; cursor:pointer;
  display:block; white-space:nowrap; transition:background var(--amg-ease), color var(--amg-ease);
  text-decoration:none;
}
.amg-dropdown-item:hover  { background:rgba(255,255,255,.07); color:#fff; }
.amg-dropdown-item.active { color:var(--amg-accent); font-weight:700; }
.amg-dropdown-item.active::before { content:'✓  '; }
/* Download links specifically */
a.amg-dropdown-item { color:#e0e0f0 !important; text-decoration:none !important; }

/* loading */
.amg-loading-overlay {
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); z-index:20; backdrop-filter:blur(4px);
}
.amg-loading-overlay.amg-vis { display:flex; }
.amg-spinner { display:flex; gap:5px; align-items:center; }
.amg-spinner div { width:9px; height:9px; border-radius:50%; background:var(--amg-accent); animation:amgPulse 1s ease-in-out infinite; }
.amg-spinner div:nth-child(2) { animation-delay:.15s; }
.amg-spinner div:nth-child(3) { animation-delay:.30s; }
.amg-spinner div:nth-child(4) { animation-delay:.45s; }
@keyframes amgPulse { 0%,100%{transform:scale(.6);opacity:.4} 50%{transform:scale(1);opacity:1} }

/* toast */
.amg-toast {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:rgba(0,0,0,.75); color:#fff; font-size:15px; font-weight:700;
  padding:10px 20px; border-radius:8px; pointer-events:none;
  opacity:0; transition:opacity .2s; z-index:50; white-space:nowrap;
}
.amg-toast.amg-toast-show { opacity:1; }

/* error */
.amg-error { padding:14px; background:rgba(255,59,48,.1); border:1px solid rgba(255,59,48,.3); border-radius:8px; color:#ff3b30; font-size:14px; text-align:center; }

/* ════════════════════════════════════════
   FULLSCREEN
════════════════════════════════════════ */
.amg-video-container:fullscreen,
.amg-video-container:-webkit-full-screen,
.amg-video-container:-moz-full-screen {
  width:100vw !important; height:100vh !important;
  background:#000 !important; border-radius:0 !important;
  display:flex !important; flex-direction:column !important; aspect-ratio:unset !important;
}
.amg-video-container:fullscreen video,
.amg-video-container:-webkit-full-screen video,
.amg-video-container:-moz-full-screen video {
  flex:1 1 auto; width:100% !important; height:100% !important; object-fit:contain !important;
}
.amg-video-container:fullscreen .amg-controls-overlay,
.amg-video-container:-webkit-full-screen .amg-controls-overlay { position:absolute; inset:0; }
.amg-video-container:fullscreen .amg-dropdown,
.amg-video-container:-webkit-full-screen .amg-dropdown { z-index:99999; }
@media (orientation:portrait) {
  .amg-video-container:fullscreen video,
  .amg-video-container:-webkit-full-screen video { object-fit:contain !important; max-height:100vh; }
}

/* ════════════════════════════════════════
   AUDIO PLAYER
════════════════════════════════════════ */
.amg-audio-wrapper { width:100%; max-width:620px; }
/* Guard against theme/global CSS (this is by far the most common cause of
   "the player turns into a giant square on mobile"): most WordPress themes
   ship a blanket `img { max-width:100%; height:auto; }` reset. If that
   rule happens to be more specific or load after ours, the album-art
   <img> stretches to its own intrinsic aspect ratio at full container
   width instead of respecting our fixed box — since album covers are
   near-square, the whole player balloons into a tall square exactly like
   this. Locking these two properties with !important makes every
   layout's sizing authoritative regardless of the active theme. */
.amg-player-wrapper, .amg-player-wrapper * { box-sizing:border-box; }
.amg-player-wrapper .amg-album-art,
.amg-player-wrapper .amg-audio-icon-wrap {
  width:100% !important; height:100% !important; max-width:none !important;
}
/* Alignment: defaults to centered (the common expectation for an embedded
   media box); "راست‌چین"/"چپ‌چین" push it to the block's start/end edge
   instead. Uses margin-inline so it also behaves correctly in RTL. */
.amg-player-wrapper.amg-align-center { margin-inline:auto; }
.amg-player-wrapper.amg-align-right  { margin-inline-start:auto; margin-inline-end:0; }
.amg-player-wrapper.amg-align-left   { margin-inline-start:0; margin-inline-end:auto; }

.amg-audio-card {
  position:relative; display:flex; border-radius:var(--amg-radius); overflow:hidden;
  background:var(--amg-surface); border:1px solid var(--amg-border);
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  transition:background .3s, border-color .3s, box-shadow .3s;
}

/* visual side */
.amg-audio-visual { position:relative; width:150px; min-height:150px; flex-shrink:0; background:var(--amg-bg); overflow:hidden; transition:background .3s; align-self:stretch; }
/* object-fit:contain (not "cover") so the album art image is ALWAYS shown
   in full, never cropped — any leftover space is letterboxed with the
   current skin's background colour instead of cutting off part of the
   cover art. */
.amg-album-art    { width:100%; height:100%; min-height:150px; object-fit:contain; object-position:center; display:block; background:var(--amg-bg); }
.amg-audio-icon-wrap {
  width:100%; min-height:150px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0a0a1a,#12122a); transition:background .3s;
}
.amg-audio-icon { width:54px; height:54px; fill:var(--amg-accent); opacity:.7; animation:amgIconPulse 3s ease-in-out infinite; }
@keyframes amgIconPulse { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.08);opacity:1} }

/* body */
.amg-audio-body { flex:1; display:flex; flex-direction:column; padding:16px 16px 12px; gap:10px; min-width:0; }
.amg-audio-meta { display:flex; flex-direction:column; gap:2px; }
.amg-audio-artist { font-size:11px; font-weight:700; color:var(--amg-accent); text-transform:uppercase; letter-spacing:.08em; transition:color .3s; }
.amg-audio-title  { font-size:15px; font-weight:700; color:var(--amg-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.amg-audio-album  { font-size:11px; color:var(--amg-muted); margin-top:1px; }

/* waveform section — IS the seekbar */
.amg-waveform-section { display:flex; flex-direction:column; gap:4px; }

.amg-waveform {
  width:100%; height:60px; cursor:pointer;
  border-radius:6px; overflow:hidden;
  background:rgba(255,255,255,.04);
  /* ensure WaveSurfer canvas fills container */
}
.amg-waveform wave { overflow:hidden !important; display:block !important; }
.amg-waveform wave canvas { display:block !important; }

/* ── Alternative visualizers: plain progress bar with a circle or arrow
     thumb (نوار معمولی با دایره / نوار با پیکان) — a lighter-weight option
     for people who don't want the WaveSurfer waveform. ── */
.amg-progressbar { width:100%; padding:8px 0; }
.amg-progressbar-track {
  position:relative; width:100%; height:6px; border-radius:99px;
  background:rgba(255,255,255,.12); cursor:pointer; touch-action:none;
}
.amg-progressbar-fill {
  position:absolute; inset-inline-start:0; top:0; height:100%; width:0%;
  border-radius:99px; background:var(--amg-accent); transition:width .1s linear;
}
.amg-progressbar-thumb {
  position:absolute; top:50%; left:0%; transform:translate(-50%,-50%);
  width:16px; height:16px; background:var(--amg-accent);
  box-shadow:0 0 0 3px rgba(255,255,255,.15); transition:left .1s linear;
}
/* دایره: a plain round handle */
.amg-progressbar-circle .amg-progressbar-thumb { border-radius:50%; }
/* پیکان: a small triangular/arrow handle pointing along the track */
.amg-progressbar-arrow .amg-progressbar-thumb {
  width:0; height:0; background:transparent; box-shadow:none;
  border-inline-start:10px solid var(--amg-accent);
  border-top:8px solid transparent; border-bottom:8px solid transparent;
  border-radius:0;
}

/* Hidden legacy progress bar — not used in audio, only kept for video */
.amg-audio-progress-bar { display:none; }

/* time row */
.amg-audio-time { display:flex; justify-content:space-between; font-size:11px; color:var(--amg-muted); font-weight:500; }

/* controls row */
.amg-audio-controls { display:flex; align-items:center; justify-content:space-between; gap:2px; }
.amg-audio-controls-left, .amg-audio-controls-right { display:flex; align-items:center; gap:2px; }

.amg-audio-big-play {
  width:46px !important; height:46px !important; border-radius:50% !important;
  background:var(--amg-accent) !important; color:#000 !important;
  box-shadow:0 4px 14px var(--amg-glow) !important; transition:transform var(--amg-ease), box-shadow var(--amg-ease), background .3s !important;
}
.amg-audio-big-play:hover { transform:scale(1.08) !important; box-shadow:0 6px 22px var(--amg-glow) !important; }
.amg-audio-big-play svg   { fill:#000 !important; }

/* extras (speed, quality, download) */
.amg-audio-extras { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:auto; }
.amg-pill-btn {
  height:28px !important; width:auto !important; padding:0 10px !important;
  border-radius:20px !important; font-size:11px !important;
  background:rgba(255,255,255,.07) !important; color:var(--amg-text) !important;
  border:1px solid var(--amg-border) !important; display:flex !important;
  align-items:center !important; gap:4px !important;
  transition:background .2s, color .2s !important;
}
.amg-pill-btn:hover { background:rgba(255,255,255,.14) !important; color:#fff !important; }
.amg-pill-btn svg   { width:13px !important; height:13px !important; }

/* ════════════════════════════════════════
   LAYOUT PRESETS (نوع قرارگیری) — AUDIO ONLY
   Pure CSS rearrangement of the existing audio-card DOM — no markup
   or JS changes needed, so it automatically works the same in
   Gutenberg, WPBakery and Elementor (Editor Bridge passes the same
   `layout` attribute through to every editor identically).
════════════════════════════════════════ */

/* classic (کلاسیک) — default: art on the side, waveform+controls in body.
   No extra rules needed; this IS the base .amg-audio-card behavior. */

/* breeze (نسیم) — art centered on top, full-width waveform below, airy padding */
.amg-audio-wrapper.amg-layout-breeze .amg-audio-card { flex-direction:column; }
.amg-audio-wrapper.amg-layout-breeze .amg-audio-visual {
  width:100%; height:190px; min-height:190px; align-self:auto;
}
.amg-audio-wrapper.amg-layout-breeze .amg-audio-visual .amg-album-art,
.amg-audio-wrapper.amg-layout-breeze .amg-audio-visual .amg-audio-icon-wrap {
  width:100%; height:190px; min-height:190px;
}
.amg-audio-wrapper.amg-layout-breeze .amg-album-art { object-position:center; }
.amg-audio-wrapper.amg-layout-breeze .amg-audio-body { padding:16px 20px; }
.amg-audio-wrapper.amg-layout-breeze .amg-audio-meta { text-align:center; align-items:center; }

/* glow (درخشش) — slim pill-shaped bar: tiny round art, single-row controls,
   the whole card glows with the accent color. Waveform tucked away, expands
   on hover so it never clutters the compact view. */
.amg-audio-wrapper.amg-layout-glow .amg-audio-card {
  align-items:center; border-radius:50px; padding:6px 10px 6px 6px;
  flex-direction:row; /* must be explicit: without it, the generic mobile
    breakpoint's `.amg-audio-card{flex-direction:column}` (no competing
    rule for this property at glow's higher specificity) silently turned
    the compact pill into a tall stacked card on small screens */
  box-shadow:0 0 0 1px var(--amg-accent), 0 0 22px rgba(0,212,255,.35);
  box-shadow:0 0 0 1px var(--amg-accent), 0 0 22px color-mix(in srgb, var(--amg-accent) 45%, transparent);
}
.amg-audio-wrapper.amg-layout-glow .amg-audio-visual {
  width:48px; height:48px; min-height:48px; border-radius:50%; align-self:center; overflow:hidden; flex-shrink:0;
}
.amg-audio-wrapper.amg-layout-glow .amg-audio-visual .amg-album-art,
.amg-audio-wrapper.amg-layout-glow .amg-audio-visual .amg-audio-icon-wrap {
  width:48px; height:48px; min-height:48px; border-radius:50%;
}
.amg-audio-wrapper.amg-layout-glow .amg-audio-icon { width:22px; height:22px; }
.amg-audio-wrapper.amg-layout-glow .amg-audio-body { padding:4px 10px; gap:4px; }
.amg-audio-wrapper.amg-layout-glow .amg-audio-meta { font-size:12px; }
.amg-audio-wrapper.amg-layout-glow .amg-waveform-section {
  order:3; max-height:0; opacity:0; overflow:hidden; transition:max-height .25s,opacity .2s;
}
.amg-audio-wrapper.amg-layout-glow .amg-audio-card:hover .amg-waveform-section,
.amg-audio-wrapper.amg-layout-glow .amg-audio-card:focus-within .amg-waveform-section {
  max-height:70px; opacity:1; margin-top:4px;
}
.amg-audio-wrapper.amg-layout-glow .amg-audio-controls { order:1; }
.amg-audio-wrapper.amg-layout-glow .amg-audio-extras   { order:2; margin-top:0; }
.amg-audio-wrapper.amg-layout-glow .amg-audio-meta     { order:0; }
.amg-audio-wrapper.amg-layout-glow .amg-big-play-btn,
.amg-audio-wrapper.amg-layout-glow .amg-btn-play {
  box-shadow:0 0 14px rgba(0,212,255,.45);
  box-shadow:0 0 14px color-mix(in srgb, var(--amg-accent) 60%, transparent);
}

/* horizon (افق) — wide cinematic strip: a horizontal band of album art runs
   across the full top of the card like a banner, title/controls below. */
.amg-audio-wrapper.amg-layout-horizon .amg-audio-card { flex-direction:column; }
.amg-audio-wrapper.amg-layout-horizon .amg-audio-visual {
  width:100%; height:90px; min-height:90px;
}
.amg-audio-wrapper.amg-layout-horizon .amg-audio-visual .amg-album-art,
.amg-audio-wrapper.amg-layout-horizon .amg-audio-visual .amg-audio-icon-wrap {
  width:100%; height:90px; min-height:90px;
}
.amg-audio-wrapper.amg-layout-horizon .amg-album-art { object-position:center 35%; }
.amg-audio-wrapper.amg-layout-horizon .amg-audio-visual::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 0%, var(--amg-surface) 100%);
  opacity:.85;
}
.amg-audio-wrapper.amg-layout-horizon .amg-audio-body { padding:10px 18px 16px; margin-top:-22px; position:relative; z-index:1; }

/* corner (نشان گوشه) — small album-art badge that floats clearly OUTSIDE the
   text column in its own reserved gutter, so it never overlaps the title or
   any controls and its position is always unambiguous: top-right of the card,
   pinned in a dedicated 76px-wide rail with its own background separation. */
.amg-audio-wrapper.amg-layout-corner .amg-audio-card { flex-direction:row-reverse; }
.amg-audio-wrapper.amg-layout-corner .amg-audio-visual {
  width:76px; min-height:76px; height:76px; align-self:flex-start;
  margin:14px 14px 0 0; border-radius:12px; overflow:hidden; flex-shrink:0;
  box-shadow:0 4px 14px rgba(0,0,0,.4), 0 0 0 1px var(--amg-border);
}
.amg-audio-wrapper.amg-layout-corner .amg-audio-visual .amg-album-art,
.amg-audio-wrapper.amg-layout-corner .amg-audio-visual .amg-audio-icon-wrap {
  width:76px; height:76px; min-height:76px;
}
.amg-audio-wrapper.amg-layout-corner .amg-audio-icon { width:34px; height:34px; }
.amg-audio-wrapper.amg-layout-corner .amg-audio-body { width:100%; flex:1 1 0; min-width:0; }

/* duo (دوقلو) — art and waveform side-by-side equal halves, controls
   spanning the bottom full-width */
.amg-audio-wrapper.amg-layout-duo .amg-audio-card { flex-wrap:wrap; }
.amg-audio-wrapper.amg-layout-duo .amg-audio-visual { width:45%; min-height:220px; }
.amg-audio-wrapper.amg-layout-duo .amg-audio-visual .amg-album-art,
.amg-audio-wrapper.amg-layout-duo .amg-audio-visual .amg-audio-icon-wrap { min-height:220px; }
.amg-audio-wrapper.amg-layout-duo .amg-audio-body { width:55%; flex:1 1 0; min-height:220px; justify-content:center; }
.amg-audio-wrapper.amg-layout-duo .amg-audio-controls,
.amg-audio-wrapper.amg-layout-duo .amg-audio-extras {
  width:100%; flex-basis:100%;
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width:520px) {
  .amg-audio-card    { flex-direction:column; }
  /* --amg-art-height: set from the new "پیشرفته" (Advanced) tab's height
     field (falls back to 160px, the old hardcoded value, when unset).
     !important is intentional here too — see the note above the
     .amg-album-art guard: this is the exact rule that USED TO get
     silently defeated by theme img resets, turning the player into a
     giant square on small screens. */
  .amg-audio-visual  { width:100%; height:var(--amg-art-height,160px) !important; min-height:var(--amg-art-height,160px) !important; }
  .amg-audio-icon-wrap { min-height:var(--amg-art-height,130px) !important; }
  .amg-btn           { width:32px; height:32px; }
  .amg-btn svg       { width:18px; height:18px; }
  .amg-time-display  { font-size:11px; }
  .amg-big-play-btn  { width:54px; height:54px; }
  .amg-big-play-btn svg { width:22px; height:22px; }
  .amg-dropdown      { min-width:120px; font-size:12px; }
  .amg-waveform      { height:44px; }

  /* Layout presets collapse to classic stacked behavior on small screens for usability */
  .amg-audio-wrapper.amg-layout-duo .amg-audio-card { flex-wrap:nowrap; }
  .amg-audio-wrapper.amg-layout-duo .amg-audio-visual,
  .amg-audio-wrapper.amg-layout-duo .amg-audio-body { width:100% !important; }
  .amg-audio-wrapper.amg-layout-duo .amg-audio-visual {
    min-height:var(--amg-art-height,160px) !important;
  }
  .amg-audio-wrapper.amg-layout-duo .amg-audio-visual .amg-album-art,
  .amg-audio-wrapper.amg-layout-duo .amg-audio-visual .amg-audio-icon-wrap {
    min-height:var(--amg-art-height,160px) !important;
  }
  .amg-audio-wrapper.amg-layout-duo .amg-audio-body { min-height:auto; }

  /* "glow" reveals its waveform/seek row only on :hover, which touch
     screens can't reliably trigger — without this, mobile users could
     never seek at all in this layout. Always show it on small screens. */
  .amg-audio-wrapper.amg-layout-glow .amg-waveform-section {
    max-height:70px; opacity:1; margin-top:4px;
  }
}

/* Video.js overrides */
.video-js .vjs-big-play-button { display:none !important; }
.video-js .vjs-control-bar     { display:none !important; }
.video-js .vjs-text-track-display { bottom:56px !important; }


/* ══════════════════════════════════════════════════════════════
   LYRICS (متن آهنگ) POPUP — Phase 3
   Appended as a direct child of the player wrapper so it inherits
   that instance's skin CSS variables (--amg-accent/--amg-bg/etc).
   ══════════════════════════════════════════════════════════════ */
.amg-lyrics-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:100000; opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.amg-lyrics-overlay.amg-open { opacity:1; pointer-events:auto; }
.amg-lyrics-popup {
  width:min(92vw, 420px); max-height:min(82vh, 640px);
  background:var(--amg-surface, #12121a); color:var(--amg-text, rgba(255,255,255,.92));
  border:1px solid var(--amg-border, rgba(255,255,255,.1)); border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(10px) scale(.98); transition:transform .18s ease;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
}
.amg-lyrics-overlay.amg-open .amg-lyrics-popup { transform:translateY(0) scale(1); }
.amg-lyrics-popup-header {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 14px; border-bottom:1px solid var(--amg-border, rgba(255,255,255,.08)); flex-shrink:0;
}
.amg-lyrics-popup-title { font-size:13px; font-weight:600; opacity:.9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.amg-lyrics-popup-duration { font-size:11px; opacity:.55; flex-shrink:0; margin:0 8px; font-variant-numeric:tabular-nums; }
.amg-lyrics-popup-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.amg-lyrics-popup-actions button {
  background:transparent; border:none; cursor:pointer; color:inherit; opacity:.7;
  width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center;
}
.amg-lyrics-popup-actions button:hover { opacity:1; background:rgba(255,255,255,.08); }
.amg-lyrics-popup-actions svg { width:16px; height:16px; fill:currentColor; }
.amg-lyrics-popup-body {
  flex:1; overflow-y:auto; padding:16px 18px 70px; scroll-behavior:smooth;
  font-size:var(--amg-lyrics-fontsize, 18px);
}
.amg-lyrics-popup-body.amg-lyrics-font-vazirmatn { font-family:'Vazirmatn', system-ui, sans-serif; }
.amg-lyrics-popup-body.amg-lyrics-font-samim     { font-family:'Samim', system-ui, sans-serif; }
.amg-lyrics-popup-body.amg-lyrics-font-poppins   { font-family:'Poppins', system-ui, sans-serif; }
.amg-lyrics-popup-body.amg-lyrics-font-inter     { font-family:'Inter', system-ui, sans-serif; }
.amg-lyrics-popup-body.amg-lyrics-font-roboto    { font-family:'Roboto', system-ui, sans-serif; }
.amg-lyrics-popup-body.amg-lyrics-font-montserrat{ font-family:'Montserrat', system-ui, sans-serif; }
.amg-lyrics-popup-body.amg-lyrics-font-georgia   { font-family:Georgia, 'Times New Roman', serif; }
.amg-lyrics-popup-body.amg-lyrics-font-playfair  { font-family:'Playfair Display', Georgia, serif; }

.amg-lyrics-line {
  padding:6px 0; line-height:1.9; color:var(--amg-lyrics-inactive, rgba(255,255,255,.45));
  transition:color .2s ease, transform .2s ease; text-align:center;
  /* Direction is set explicitly per-line via the dir="rtl|ltr" ATTRIBUTE
     in amg-player.js (renderLines()) — not via a CSS auto-detection
     property. .amg-player-wrapper forces direction:ltr for the rest of
     the player's UI, and that's fine for a single plain text node (the
     browser still bidi-reorders the CHARACTERS inside it correctly on
     its own) — but once a line is split into several sibling <span>
     word-elements (amg-lyrics-enhanced, word-by-word sync), the line's
     own <div> has no direct strong-directional text of its own (all of
     it lives one level down, inside the word spans), so CSS-only
     auto-detection (unicode-bidi:plaintext) unreliably fails to pick up
     the script from its children. Setting the real dir="rtl"/"ltr"
     ATTRIBUTE directly is unambiguous and works in every browser,
     because dir has always been designed to apply to a whole subtree
     regardless of how many child elements the text is broken into.
  */
}
.amg-lyrics-line.amg-lyrics-clickable { cursor:pointer; }
.amg-lyrics-line.amg-lyrics-active {
  color:var(--amg-lyrics-active, var(--amg-accent, #00d4ff));
  transform:scale(1.04);
}
.amg-lyrics-line.amg-lyrics-active.amg-lyrics-bold {
  /* Faux-bold via stacked text-shadow, NOT font-weight — a real weight
     change alters glyph widths and can push the line onto an extra visual
     row exactly when it becomes active, which is confusing mid-playback. */
  text-shadow: 0.4px 0 currentColor, -0.4px 0 currentColor, 0 0.4px currentColor, 0 -0.4px currentColor;
}
.amg-lyrics-word { transition:color .18s ease, opacity .18s ease; display:inline-block; }
.amg-lyrics-line.amg-lyrics-enhanced .amg-lyrics-word { color:inherit; opacity:.4; }
.amg-lyrics-word.amg-lyrics-word-active {
  /* Words fill in one at a time, purely by taking on the highlight color —
     no extra bold/scale/glow on top of that. The line itself already
     zooms slightly the moment it becomes active (see .amg-lyrics-active
     above); words should only ever change color/opacity as they're reached. */
  color:var(--amg-lyrics-active, var(--amg-accent, #00d4ff));
  opacity:1 !important;
}
.amg-ly-popup-playpause {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:var(--amg-accent, #00d4ff); color:#00131a; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.35); transition:transform .15s ease;
}
.amg-ly-popup-playpause:hover { transform:translateX(-50%) scale(1.06); }
.amg-ly-popup-playpause svg { width:20px; height:20px; fill:currentColor; }
.amg-lyrics-popup-resync {
  position:absolute; bottom:66px; left:50%; transform:translateX(-50%);
  background:var(--amg-accent, #00d4ff); color:#00131a; border:none; border-radius:20px;
  padding:6px 16px; font-size:12px; font-weight:600; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.amg-lyrics-popup-resync.amg-show { opacity:1; pointer-events:auto; }
.amg-lyrics-popup-empty { text-align:center; opacity:.5; font-size:13px; padding:30px 0; }