/*
 * Audiority A/B Audio Player
 * Place at: wp-content/themes/your-theme/audiority-ab-player.css
 *
 * Palette derived from audiority.com:
 *   --aud-bg        : #1a1a1a   (dark card background)
 *   --aud-surface   : #222222   (inner surface)
 *   --aud-border    : #333333   (subtle border)
 *   --aud-text      : #ffffff   (primary text)
 *   --aud-muted     : #888888   (secondary text / time)
 *   --aud-accent    : #e8622a   (Add to Cart orange — swap with exact value from DevTools)
 *   --aud-accent-h  : #d4541e   (hover darken)
 *   --aud-track-bg  : #3a3a3a   (progress track)
 *   --aud-fill      : #e8622a   (progress fill, same accent)
 */

.aud-ab-player {
    --aud-bg:       transparent;   /* no card background */
    --aud-border:   #404040;   /* no border */
    --aud-surface:  transparent;
    --aud-text:     #404040; /*#1a1a1a;*/
    --aud-muted:    #888888;
    --aud-accent:   #1a1a1a;       /* play button and progress fill: black */
    --aud-accent-h: #333333;
    --aud-track-bg: #dddddd;

    background:    var(--aud-bg);
    border:        1px solid var(--aud-border);
    border-radius: 6px;
    padding:       16px 20px;
    margin:        10px 0;
    font-family:   'Inter', sans-serif;
    max-width:     680px;
}

.aud-ab-title {
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--aud-muted);
    margin-bottom:  12px;
}

/* ── Control row ── */
.aud-ab-controls {
    display:     flex;
    align-items: center;
    gap:         14px;
}

/* ── Play button ── */
/*.aud-ab-play {
    flex-shrink:   0;
    width:         36px;
    height:        36px;
    border-radius: 50%;
    border:        1.5px solid var(--aud-accent);
    background:    transparent;
    color:         var(--aud-accent);
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background 0.15s, color 0.15s;
    padding:       0;
}
.aud-ab-play:hover {
    background: var(--aud-accent);
    color:      #fff;
}*/

.aud-ab-play {
    background:  var(--aud-accent);
    border-color: var(--aud-accent);
    color:       #ffffff;
}
.aud-ab-play:hover {
    background:  var(--aud-accent-h);
    border-color: var(--aud-accent-h);
}

.aud-ab-play svg {
    width:    14px;
    height:   14px;
    fill:     currentColor;
    stroke:   none;
    display:  block;        /* removes inline baseline gap */
    flex-shrink: 0;
}

.aud-ab-play .icon-pause        { display: none;  }
.aud-ab-play.is-playing .icon-play  { display: none;  }
.aud-ab-play.is-playing .icon-pause { display: block; }

/* ── Progress ── */
.aud-ab-progress-wrap {
    flex:    1;
    cursor:  pointer;
    padding: 8px 0;
}
.aud-ab-progress-track {
    position:      relative;
    height:        3px;
    background:    var(--aud-track-bg);
    border-radius: 2px;
}
.aud-ab-progress-fill {
    position:      absolute;
    left:          0; top: 0;
    height:        100%;
    width:         0%;
    background:    var(--aud-accent);
    border-radius: 2px;
    transition:    width 0.05s linear;
}
.aud-ab-progress-thumb {
    position:      absolute;
    top:           50%;
    left:          0%;
    transform:     translate(-50%, -50%);
    width:         11px;
    height:        11px;
    border-radius: 50%;
    background:    var(--aud-accent);
    opacity:       0;
    transition:    opacity 0.15s, left 0.05s linear;
}
.aud-ab-progress-wrap:hover .aud-ab-progress-thumb {
    opacity: 1;
}

/* ── Time ── */
.aud-ab-time {
    flex-shrink: 0;
    font-size:   11px;
    font-weight: 500;
    color:       var(--aud-muted);
    min-width:   32px;
    text-align:  right;
    font-variant-numeric: tabular-nums;
}

/* ── Dry / Wet switch ── */
.aud-ab-switch {
    flex-shrink:   0;
    display:       flex;
    border:        none;
    border-radius: 4px;
    overflow:      hidden;
}
.aud-ab-switch button {
    padding:        0 14px;
    height:         30px;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.1em;
    border:         none;
    background:     var(--aud-surface);
    color:          var(--aud-muted);
    cursor:         pointer;
    transition:     background 0.15s, color 0.15s;
    line-height:    1;
}
.aud-ab-switch button:first-child {
    border-right: none;
}
.aud-ab-switch button.active {
    background: var(--aud-accent);
    color:      #ffffff;
}
.aud-ab-switch button:not(.active):hover {
    background: #2c2c2c;
    color:      #cccccc;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .aud-ab-controls { flex-wrap: wrap; }
    .aud-ab-progress-wrap { order: 3; flex-basis: 100%; }
    .aud-ab-time { order: 4; }
}