/* Elementor Custom Audio Player — v3.2.15 — CORS-friendly (no crossorigin), Safari/FF fixes */

/* --- Base layout (2 columns desktop; stack on mobile) --- */
.ecap-player{
  --ecap-gap: 14px;
  --ecap-col-gap: 16px;
  display: grid;
  grid-template-columns: var(--ecap-art-w, 140px) 1fr;
  grid-column-gap: var(--ecap-col-gap);
  align-items: start;
  position: relative;
}
.ecap-artwork{ grid-column: 1; grid-row: 1; }
.ecap-texts{   grid-column: 2; grid-row: 1; min-width: 0; }
.ecap-audio-wrap{ grid-column: 1 / -1; grid-row: 2; margin-top: var(--ecap-gap); display: flex; }

/* Responsive stack */
@media (max-width: 680px){
  .ecap-player{
    grid-template-columns: 1fr;
    grid-row-gap: 12px;
  }
  .ecap-artwork{ grid-column: 1; grid-row: 1; }
  .ecap-texts{   grid-column: 1; grid-row: 2; }
  .ecap-audio-wrap{ grid-column: 1; grid-row: 3; }
}

/* Artwork */
.ecap-artwork{ position: relative; overflow: hidden; border-radius: 12px; cursor: pointer; }
.ecap-artwork img{ display: block; width: 100%; height: auto; }

/* Texts */
.ecap-title{ margin: 0 0 6px 0; line-height: 1.25; }
.ecap-description{ margin: 0; opacity: .9; }
.ecap-description p{ margin: .5em 0 0; }

/* --- Custom Audio UI --- */
.ecap-audio{ display: none; } /* hide native controls */

.ecap-audio-ui{
  --ecap-ui-h: 48px;
  --ecap-play-size: 40px;
  --ecap-play-bg: #111827;
  --ecap-play-bg-hover: #0b1220;
  --ecap-play-ico: #ffffff;
  --ecap-ui-gap: 12px; /* gap between play and right column (max 100 via control) */
  --ecap-prog-h: 6px;
  --ecap-prog-bg: #e5e7eb;
  --ecap-prog-fill: #3b82f6;
  --ecap-pt-gap: 6px;  /* gap between progress & time */

  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: var(--ecap-play-size) 1fr;
  column-gap: var(--ecap-ui-gap);
  align-items: center; /* center right column to play button */
  min-height: var(--ecap-ui-h);
}

/* Strong override to beat Elementor Global link/button styles */
.elementor .ecap-player .ecap-audio-ui .ecap-play,
.ecap-player .ecap-audio-ui .ecap-play{
  width: var(--ecap-play-size);
  height: var(--ecap-play-size);
  border: 0;
  border-radius: 10px;
  background: var(--ecap-play-bg) !important;
  background-color: var(--ecap-play-bg) !important;
  color: var(--ecap-play-ico) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
  position: relative;
  z-index: 3; /* above any overlay to ensure taps go to the button */
}
.elementor .ecap-player .ecap-audio-ui .ecap-play:hover,
.ecap-player .ecap-audio-ui .ecap-play:hover{
  background: var(--ecap-play-bg-hover) !important;
  background-color: var(--ecap-play-bg-hover) !important;
}
.ecap-play:active{ transform: scale(.98); }
.ecap-play:focus-visible{ outline: 2px solid rgba(0,0,0,.35); outline-offset: 2px; }
.ecap-play svg{ width: 60%; height: 60%; fill: currentColor; display: block; }

/* Right column = progress + time stacked and centered */
.ecap-right{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: var(--ecap-pt-gap);
}

.ecap-progress{ cursor: pointer; }
.ecap-progress__bar{
  --h: var(--ecap-prog-h);
  height: var(--h); background: var(--ecap-prog-bg);
  border-radius: calc(var(--h) / 2); position: relative; overflow: hidden;
}
.ecap-progress__fill{ display: block; height: 100%; width: 0%; background: var(--ecap-prog-fill); }

.ecap-timebar{
  display: flex;
  justify-content: space-between; /* current left, remaining right */
  align-items: center;
}
.ecap-time{ font-size: 13px; color: #111827; white-space: nowrap; }

/* Platform buttons */
.ecap-platform-buttons{
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px;
}

/* Button base */
.ecap-btn{
  --btn-bg:#f3f4f6; --btn-fg:#111827; --btn-border:#e5e7eb;
  display:inline-flex; align-items:center; gap:.55em; padding:.6em 1em; border-radius:999px;
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-border);
  text-decoration:none; font-weight:600; font-size:14px; line-height:1;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ecap-btn:hover{ transform: translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08); }
.ecap-btn:active{ transform: translateY(0); box-shadow:0 3px 10px rgba(0,0,0,.08); }
.ecap-btn:focus-visible{ outline:2px solid #111; outline-offset:2px; }
.ecap-btn__dot{ width:8px; height:8px; border-radius:50%; background: currentColor; opacity:.9; }
.ecap-btn__icon-img{ width:18px; height:18px; object-fit:contain; display:inline-block; }
.ecap-btn__icon{ display:inline-flex; align-items:center; line-height:0; }
.ecap-btn__icon svg{ width:18px; height:18px; }

/* Brand skins */
.ecap-btn--spotify{   --btn-bg:#1DB954; --btn-fg:#fff; --btn-border:#1DB954; background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-border); }
.ecap-btn--apple{     --btn-bg:#A970FF; --btn-fg:#fff; --btn-border:#A970FF; background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-border); }
.ecap-btn--soundcloud{--btn-bg:#FF5500; --btn-fg:#fff; --btn-border:#FF5500; background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-border); }
.ecap-btn--podimo{    --btn-bg:#0EA5A0; --btn-fg:#fff; --btn-border:#0EA5A0; background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-border); }
.ecap-btn--mytuner{   --btn-bg:#D0021B; --btn-fg:#fff; --btn-border:#D0021B; background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-border); }
.ecap-btn--youtube{   --btn-bg:#FF0000; --btn-fg:#fff; --btn-border:#FF0000; background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-border); }
.ecap-btn--rutube{    --btn-bg:#2E77FF; --btn-fg:#fff; --btn-border:#2E77FF; background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-border); }
.ecap-btn--arzamas{   --btn-bg:#111111; --btn-fg:#fff; --btn-border:#111111; background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-border); }

/* Custom */
.ecap-btn--custom{ --btn-bg:#f3f4f6; --btn-fg:#111827; --btn-border:#e5e7eb; }

/* Visual cue only when actually playing */
.ecap-player.is-playing .ecap-artwork{ box-shadow: 0 0 0 3px rgba(16,185,129,.25); }

/* Editor nicety */
.elementor-editor-active .ecap-platform-buttons{ min-height: 40px; }