/* =============================================================
   Skin Pro — Square Play Button variant
   Christos Andreou | christosandreou.com
   
   Change summary:
   • Play/Pause lives in a dedicated 55 × 55 px square button
     on the far left of each player row.
   • The scrub / progress bar starts immediately to the right
     of that square (left: 55px; width: calc(100% − 55px)).
   • Track name + genre remain visible inside the bar area.
   ============================================================= */

/* ── Hide unused elements ──────────────────────────────────── */

.audioplayer.skin-pro.under-500 .the-artist {
    display: none;
}

.audioplayer.skin-pro .audioplayer-inner .the-thumb-con {
    display: none;
}

.audioplayer.skin-pro .prev-btn,
.audioplayer.skin-pro .next-btn {
    display: none;
}


/* ── Player bar ────────────────────────────────────────────── */

.audioplayer.skin-pro .audioplayer-inner {
    height: 55px;
    border: solid 1px #e0e0e0;
    overflow: visible; /* let the square button sit flush */
    position: relative;
}


/* ── Hide loading preloader (white circle arc on first play) ── */

.audioplayer.skin-pro .loading-svg,
.audioplayer.skin-pro .media-load--preloader {
    display: none !important;
}


/* ── Square play / pause button ────────────────────────────── */

/* Suppress circular focus rings on any button/div inside the player */
.audioplayer.skin-pro *:focus {
    outline: none;
}
.audioplayer.skin-pro * {
    -webkit-tap-highlight-color: transparent;
}

.audioplayer.skin-pro .ap-controls .con-controls {
    position: static;
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
}

.audioplayer.skin-pro .ap-controls .con-controls .the-bg {
    display: none;
}

.audioplayer.skin-pro .ap-controls .con-playpause {
    /* Override base sizing */
    position: relative;
    top: auto;
    left: auto;
    margin: 0;

    /* Square dimensions – match player bar height exactly */
    width: 55px;
    height: 55px;
    flex-shrink: 0;

    /* Visual style */
    background-color: #ffffff;
    border: solid 1px #e0e0e0;
    border-left: none;
    cursor: pointer;
    z-index: 10;

    /* Centre the icon inside */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Smooth hover */
    transition: background-color 0.2s ease;

    /* Suppress the mobile tap flash / highlight */
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
}

.audioplayer.skin-pro .ap-controls .con-playpause:hover {
    background-color: #f5f5f5;
}

/* ── Play icon (white on dark square) ─────────────────────── */

.audioplayer.skin-pro .ap-controls .con-playpause .playbtn {
    border-width: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    /* Reset absolute positioning from base – centre via flex parent */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
}

.audioplayer.skin-pro .ap-controls .con-playpause .playbtn svg {
    width: 20px;
    height: 20px;
}

.audioplayer.skin-pro .ap-controls .con-playpause .playbtn svg path {
    fill: #444444;
}

/* ── Pause icon (dark on white square) ─────────────────────── */

.audioplayer.skin-pro .ap-controls .con-playpause .pausebtn {
    border-width: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
}

.audioplayer.skin-pro .ap-controls .con-playpause .pausebtn .pause-part-1,
.audioplayer.skin-pro .ap-controls .con-playpause .pausebtn .pause-part-2 {
    display: none;
}

.audioplayer.skin-pro .ap-controls .con-playpause .pausebtn .pause-icon {
    left: 0;
    position: relative;
}

.audioplayer.skin-pro .ap-controls .con-playpause .pausebtn svg {
    width: 20px;
    height: 20px;
}

.audioplayer.skin-pro .ap-controls .con-playpause .pausebtn svg path {
    fill: #444444;
}


/* ── Scrub / progress bar — starts after the square button ─── */

.audioplayer.skin-pro .ap-controls .scrubbar {
    position: absolute;
    top: 0;
    left: 0;                       /* ← back to full width so JS      */
    width: 100%;                   /*   calculates timing correctly    */
    height: 100%;
    overflow: hidden;
}

.audioplayer.skin-pro .ap-controls .scrubbar .scrub-bg {
    background-color: #ffffff;
}


/* ── Track meta (name + genre) inside the bar area ─────────── */

.audioplayer.skin-pro .meta-artist-con {
    color: #000000;
    font-size: 15px;
    bottom: auto;
    top: 0;
    height: 100%;
    left: 70px;           /* 55px button + 15px breathing room */
    pointer-events: none;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.audioplayer.skin-pro .meta-artist-con > * {
    display: inline-block;
    vertical-align: middle;
}

.audioplayer.skin-pro .the-name {
    font-weight: 500;
    display: block;
}

.audioplayer.skin-pro .the-genre {
    font-weight: 300;
    color: #5e5e5e;
}


/* ── Right-side controls (time, volume) ────────────────────── */

.audioplayer.skin-pro .ap-controls,
.audioplayer.skin-pro .ap-controls .con-controls {
    height: 100%;
}

.audioplayer.skin-pro .ap-controls .con-controls--right {
    margin-left: auto;
    margin-right: 0;
    white-space: nowrap;
}

.audioplayer.skin-pro .ap-controls .con-controls--right > * {
    display: inline-block;
    vertical-align: middle;
}

.audioplayer.skin-pro .ap-controls .con-controls--right .extrahtml-in-float-right {
    color: #444343;
    font-size: 13px;
    position: relative;
}

.audioplayer.skin-pro .ap-controls .curr-time,
.audioplayer.skin-pro .ap-controls .total-time {
    color: #000000;
    font-size: 14px;
    pointer-events: none;
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
}

.audioplayer.skin-pro .ap-controls .curr-time {
    opacity: 0.3;
}

.audioplayer.skin-pro .ap-controls .controls-volume {
    top: 25px;
    bottom: auto;
    right: 60px;
}

.audioplayer.skin-pro .ap-controls .controls-volume .volumeicon {
    background-color: #000000;
}

.audioplayer.skin-pro .ap-controls .controls-volume .volumeicon:before {
    border-right-color: #000000;
}