/* Anti Radio Player — frontend
   Bütün seçicilər .arp altında əhatələnib ki, tema stilləri ilə toqquşmasın. */

.arp{
  --arp-accent:#FF2E88;
  --arp-accent2:#2B34FF;
  --arp-paper:#DEDCD2;
  --arp-ink:#101010;
  --arp-dim:rgba(16,16,16,.58);
  --arp-line:rgba(16,16,16,.2);

  position:relative;
  box-sizing:border-box;
  margin:1.5em 0;
  background:var(--arp-paper);
  color:var(--arp-ink);
  border:2px solid var(--arp-ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.arp *,.arp *::before,.arp *::after{box-sizing:border-box}
.arp p{margin:0}
.arp b{font-weight:600}

/* tema bu sinfi təyin etməyibsə */
.arp .screen-reader-text{
  position:absolute !important;
  width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* ---------- başlıq ---------- */
.arp__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 14px;
  background:var(--arp-ink); color:var(--arp-paper);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
}
.arp__eyebrow{white-space:nowrap}
.arp__state{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.arp__dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);flex:none}
.arp__state[data-arp-state="1"] .arp__dot{
  background:var(--arp-accent);
  animation:arp-pulse 2s infinite;
}
@keyframes arp-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,46,136,.6)}
  70%{box-shadow:0 0 0 8px rgba(255,46,136,0)}
  100%{box-shadow:0 0 0 0 rgba(255,46,136,0)}
}

/* ---------- gövdə ---------- */
.arp__body{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  padding:18px;
}
.arp__art{
  width:96px; height:96px; flex:none;
  border:2px solid var(--arp-ink);
  background:var(--arp-ink);
  object-fit:cover; display:block;
  margin:0; border-radius:0; max-width:none;
}
.arp__now{min-width:0}
.arp__label{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--arp-dim); margin-bottom:5px !important;
}
.arp__track{
  font-size:clamp(17px,2.6vw,24px);
  font-weight:700; line-height:1.12; letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
.arp__artist{margin-top:4px !important;font-size:13.5px;color:var(--arp-dim);overflow-wrap:anywhere}
.arp__next{
  margin-top:12px !important; padding-top:10px;
  border-top:1.5px dashed var(--arp-line);
  font-size:12.5px; color:var(--arp-dim); overflow-wrap:anywhere;
}
.arp__next b{color:var(--arp-ink)}

/* ---------- düymə ---------- */
.arp__play{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  width:96px; height:96px; flex:none; padding:0;
  background:var(--arp-accent); color:var(--arp-ink);
  border:2px solid var(--arp-ink); border-radius:0;
  font-family:inherit; font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; text-align:center;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--arp-ink);
  transition:transform .09s cubic-bezier(.2,0,.2,1),
             box-shadow .09s cubic-bezier(.2,0,.2,1),
             background-color .18s ease,
             color .18s ease;
  /* mobil klikdə 300ms gecikməni və mavi highlight-ı ləğv edir */
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
  will-change:transform;
}
.arp__play:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--arp-ink)}
.arp__play:active,
.arp__play.arp-pressed{transform:translate(4px,4px);box-shadow:0 0 0 var(--arp-ink)}
.arp__play:focus-visible{outline:3px solid var(--arp-accent2);outline-offset:3px}
.arp__play[data-on="1"]{background:var(--arp-accent2);color:#fff}

/* ikon + spinner eyni yerdə dayanır ki, keçid sıçramasın */
.arp__ico{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; flex:none;
}
.arp__ico svg{
  width:24px;height:24px;fill:currentColor;display:block;
  transition:opacity .12s ease,transform .12s ease;
}
.arp__ring{
  position:absolute; inset:1px;
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  opacity:0; transform:scale(.7);
  transition:opacity .12s ease,transform .12s ease;
}
/* yüklənmə: rəng qalır, yalnız ikon halqaya çevrilir */
.arp__play[data-on="2"] svg{opacity:0;transform:scale(.7)}
.arp__play[data-on="2"] .arp__ring{opacity:1;transform:scale(1);animation:arp-spin .7s linear infinite}
@keyframes arp-spin{to{transform:rotate(360deg)}}

.arp__playtext{display:block;min-width:5.5em}

/* ---------- alt ---------- */
.arp__foot{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:10px 18px;
  border-top:2px solid var(--arp-ink);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--arp-dim);
}
.arp__vu{display:inline-flex;align-items:flex-end;gap:3px;height:22px;flex:none}
.arp__vu i{width:3px;height:20%;background:var(--arp-ink);display:block;opacity:.45}
.arp__vu[data-on="1"] i{opacity:1;animation:arp-bounce .8s ease-in-out infinite alternate}
.arp__vu i:nth-child(2n){animation-duration:.62s}
.arp__vu i:nth-child(3n){animation-duration:1.05s}
.arp__vu i:nth-child(5n){animation-duration:.47s}
@keyframes arp-bounce{from{height:14%}to{height:100%}}

.arp__vol{display:inline-flex;align-items:center;gap:8px;margin:0}
.arp__volicon{width:16px;height:16px;fill:var(--arp-dim);flex:none}
.arp__vol input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:110px;height:2px;margin:0;padding:0;
  background:var(--arp-ink);cursor:pointer;border:0;
}
.arp__vol input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;
  background:var(--arp-accent);border:2px solid var(--arp-ink);border-radius:0;
}
.arp__vol input[type=range]::-moz-range-thumb{
  width:14px;height:14px;background:var(--arp-accent);
  border:2px solid var(--arp-ink);border-radius:0;
}
.arp__vol input[type=range]:focus-visible{outline:3px solid var(--arp-accent2);outline-offset:4px}

.arp__listeners{margin-left:auto;white-space:nowrap}
.arp__listeners b{color:var(--arp-ink)}

.arp__close{
  background:none;border:0;padding:0 2px;margin-left:8px;
  font-size:20px;line-height:1;color:var(--arp-dim);cursor:pointer;
}
.arp__close:hover{color:var(--arp-ink)}

/* ---------- əyri kart ---------- */
.arp--tilt{
  transform:rotate(-.5deg);
  box-shadow:12px 12px 0 var(--arp-accent2);
  margin-bottom:2.2em;
}
/* əyri kartın içindəki mətn əks istiqamətdə düzəlmir — bütöv blok kimi əyilir,
   riso çapdakı kimi. Yalnız şəkil kəskin qalsın deyə: */
.arp--tilt .arp__art{transform:rotate(.5deg) scale(1.02)}

@media (max-width:600px){
  .arp--tilt{transform:none;box-shadow:8px 8px 0 var(--arp-accent2);margin-bottom:1.6em}
  .arp--tilt .arp__art{transform:none}
}

/* ---------- compact ---------- */
.arp--compact .arp__body{grid-template-columns:auto 1fr auto;gap:12px;padding:12px}
.arp--compact .arp__art{width:56px;height:56px}
.arp--compact .arp__play{width:56px;height:56px;gap:0;box-shadow:3px 3px 0 var(--arp-ink)}
.arp--compact .arp__play span{display:none}
.arp--compact .arp__play svg{width:22px;height:22px}
.arp--compact .arp__track{font-size:15px}
.arp--compact .arp__artist{font-size:12px}

/* ---------- bar ---------- */
.arp--bar{
  margin:0;
  border:0;
  border-top:2px solid var(--arp-ink);
}
.arp--bar .arp__body{
  grid-template-columns:auto 1fr auto;
  gap:14px; padding:10px 16px;
}
.arp--bar .arp__art{width:48px;height:48px}
.arp--bar .arp__play{
  width:48px;height:48px;gap:0;box-shadow:3px 3px 0 var(--arp-ink);order:-1;
}
.arp--bar .arp__play span{display:none}
.arp--bar .arp__play svg{width:20px;height:20px}
.arp--bar .arp__track{font-size:15px}
.arp--bar .arp__artist{font-size:12px}
.arp--bar .arp__foot{padding:6px 16px}

.arp.arp-is-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:99990;
  margin:0;
  box-shadow:0 -6px 24px rgba(0,0,0,.14);
  transform:translateY(100%);
  transition:transform .28s ease;
}
.arp.arp-is-sticky.arp-in{transform:translateY(0)}
.arp.arp-is-sticky.arp-dismissed{display:none}

/* ---------- kiçik ekran ---------- */
@media (max-width:600px){
  .arp__body{
    grid-template-columns:auto 1fr;
    grid-template-areas:"art now" "btn btn";
    row-gap:14px;
  }
  .arp__art{grid-area:art;width:72px;height:72px}
  .arp__now{grid-area:now}
  .arp__play{grid-area:btn;width:100%;height:auto;padding:14px;flex-direction:row;gap:10px}
  .arp__play span{display:inline}
  .arp__listeners{margin-left:0}

  .arp--bar .arp__body,
  .arp--compact .arp__body{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:none;
    row-gap:0;
  }
  .arp--bar .arp__play,
  .arp--compact .arp__play{width:48px;height:48px;padding:0;flex-direction:column}
  .arp--bar .arp__play span,
  .arp--compact .arp__play span{display:none}
  .arp--bar .arp__foot{gap:12px}
  .arp--bar .arp__vol{display:none}
}

@media (prefers-reduced-motion:reduce){
  .arp *,.arp{animation:none !important;transition:none !important}
}

/* ---------- popup düyməsi ---------- */
.arp__popup{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:2px 0;margin:0;
  font-family:inherit;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--arp-dim);cursor:pointer;
  border-bottom:1.5px solid transparent;
  transition:color .15s ease,border-color .15s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.arp__popup:hover{color:var(--arp-ink);border-bottom-color:var(--arp-ink)}
.arp__popup:focus-visible{outline:3px solid var(--arp-accent2);outline-offset:3px}
.arp__popup svg{width:14px;height:14px;fill:currentColor;flex:none}
.arp__popup[data-open="1"]{color:var(--arp-accent2);border-bottom-color:var(--arp-accent2)}

.arp__play:disabled{opacity:.45;cursor:default;box-shadow:4px 4px 0 var(--arp-ink)}
.arp__play:disabled:hover{transform:none;box-shadow:4px 4px 0 var(--arp-ink)}

/* ---------- ayrıca pəncərə səhifəsi ---------- */
body.arp-popup-page{
  margin:0;padding:14px;
  background:var(--arp-paper,#DEDCD2);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
}
body.arp-popup-page .arp{margin:0;width:100%;max-width:420px}
body.arp-popup-page .arp__body{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px}
body.arp-popup-page .arp__art{width:150px;height:150px}
body.arp-popup-page .arp__now{width:100%}
body.arp-popup-page .arp__next{border-top-color:var(--arp-line)}
body.arp-popup-page .arp__play{width:100%;height:auto;padding:15px;flex-direction:row;gap:10px}
body.arp-popup-page .arp__foot{justify-content:center;gap:14px}
body.arp-popup-page .arp__listeners{margin-left:0}

@media (max-height:520px){
  body.arp-popup-page .arp__art{width:96px;height:96px}
}