/* ============================================================
   ISHIKAWA MEDIA
   AUDIO A/B COMPARISON
============================================================ */

.ishikawa-ab-comparison {
    --ab-black: #080808;
    --ab-white: #EDEDED;
    --slider-padding: 0px;
    --progress-padding: 0px;
    --mobile-button-width: 45%;
    --mobile-button-gap: 10px;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

.ishikawa-ab-comparison *,
.ishikawa-ab-comparison *::before,
.ishikawa-ab-comparison *::after {
    box-sizing: border-box;
}

.ishikawa-ab-comparison audio { display: none; }

.ishikawa-ab-control-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.ishikawa-ab-button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 48px;
    padding: 10px 20px;
    margin: 0;
    border: 1px solid var(--ab-black);
    border-radius: 0;
    background: transparent;
    color: var(--ab-black);
    font: inherit;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
    -webkit-appearance: none;
    appearance: none;
}

.ishikawa-ab-button:hover,
.ishikawa-ab-button.is-active {
    background: var(--ab-black);
    color: var(--ab-white);
}

.ishikawa-ab-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ============================================================
   A/B SLIDER
============================================================ */

.ishikawa-ab-slider {
    position: relative;
    flex: 1 1 auto;
    min-width: 60px;
    height: 48px;
    padding-left: var(--slider-padding);
    padding-right: var(--slider-padding);
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
    outline: none;
}

.ishikawa-ab-slider:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.ishikawa-ab-slider-track {
    position: absolute;
    left: var(--slider-padding);
    right: var(--slider-padding);
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: var(--ab-black);
    pointer-events: none;
}

.ishikawa-ab-slider-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
    color: var(--ab-black);
}

.ishikawa-ab-slider-default-svg,
.ishikawa-ab-slider-custom-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ishikawa-ab-slider-custom-svg,
.ishikawa-ab-play-custom-svg,
.ishikawa-ab-pause-custom-svg,
.ishikawa-ab-volume-custom-svg,
.ishikawa-ab-progress-custom-svg,
.ishikawa-ab-volume-thumb.ishikawa-ab-volume-custom-svg {
    background-color: currentColor;
    -webkit-mask-image: var(--ishikawa-svg-url);
    mask-image: var(--ishikawa-svg-url);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ============================================================
   PLAYER ROW
============================================================ */

.ishikawa-ab-player-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 20px;
}

/* ============================================================
   PLAY / PAUSE
============================================================ */

.ishikawa-ab-play {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ab-black);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ishikawa-ab-play:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.ishikawa-ab-play-icon {
    position: relative;
    display: block;
    width: 60%;
    height: 60%;
    margin: 0;
}

.ishikawa-ab-play-default-svg,
.ishikawa-ab-pause-default-svg,
.ishikawa-ab-play-custom-svg,
.ishikawa-ab-pause-custom-svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.ishikawa-ab-pause-default-svg,
.ishikawa-ab-pause-custom-svg {
    display: none;
}

.ishikawa-ab-play.is-playing .ishikawa-ab-play-default-svg,
.ishikawa-ab-play.is-playing .ishikawa-ab-play-custom-svg {
    display: none;
}

.ishikawa-ab-play.is-playing .ishikawa-ab-pause-default-svg,
.ishikawa-ab-play.is-playing .ishikawa-ab-pause-custom-svg {
    display: block;
}

/* ============================================================
   TIME
============================================================ */

.ishikawa-ab-time {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--ab-black);
    font: inherit;
    line-height: 1;
}

/* ============================================================
   PROGRESS
============================================================ */

.ishikawa-ab-progress-wrap {
    flex: 1 1 auto;
    min-width: 60px;
    padding-left: var(--progress-padding);
    padding-right: var(--progress-padding);
}

.ishikawa-ab-progress {
    position: relative;
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
    outline: none;
    background: #D9D9D9;
}

.ishikawa-ab-progress:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.ishikawa-ab-progress-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: #D9D9D9;
}

.ishikawa-ab-progress-fill {
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 4px;
    transform: translateY(-50%);
    background: var(--ab-black);
    pointer-events: none;
}

.ishikawa-ab-progress-thumb {
    position: absolute;
    top: 50%;
    right: 0;
    width: 12px;
    height: 12px;
    transform: translate(50%, -50%);
    display: block;
    border-radius: 50%;
    background: currentColor;
    color: var(--ab-black);
    pointer-events: none;
    z-index: 3;
}

/* ============================================================
   VOLUME
============================================================ */

.ishikawa-ab-volume {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ishikawa-ab-volume-button {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--ab-black);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ishikawa-ab-volume-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ishikawa-ab-volume-icon {
    position: relative;
    display: block;
    width: 16px;
    height: 14px;
}

.ishikawa-ab-volume-icon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 5px;
    height: 6px;
    background: currentColor;
}

.ishikawa-ab-volume-icon::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid currentColor;
}

.ishikawa-ab-volume-custom-svg {
    width: 20px;
    height: 20px;
}

.ishikawa-ab-volume-custom-svg::before,
.ishikawa-ab-volume-custom-svg::after {
    display: none;
}

.ishikawa-ab-volume-button.is-muted .ishikawa-ab-volume-icon {
    opacity: 0.45;
}

.ishikawa-ab-volume-slider {
    position: relative;
    width: 90px;
    height: 24px;
    cursor: pointer;
    touch-action: none;
    outline: none;
}

.ishikawa-ab-volume-slider:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ishikawa-ab-volume-track,
.ishikawa-ab-volume-fill {
    position: absolute;
    left: 0;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
}

.ishikawa-ab-volume-track {
    width: 100%;
    background: #D9D9D9;
}

.ishikawa-ab-volume-fill {
    width: 100%;
    background: var(--ab-black);
    transform-origin: left center;
    transform: translateY(-50%);
}

.ishikawa-ab-volume-thumb {
    position: absolute;
    top: 50%;
    right: 0;
    width: 12px;
    height: 12px;
    transform: translate(50%, -50%);
    display: block;
    border-radius: 50%;
    background: currentColor;
    color: var(--ab-black);
    pointer-events: none;
    z-index: 3;
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {
    .ishikawa-ab-slider { display: none; }

    .ishikawa-ab-control-row {
        justify-content: space-between;
        gap: var(--mobile-button-gap);
    }

    .ishikawa-ab-button {
        width: var(--mobile-button-width);
        height: var(--mobile-button-height, 48px);
    }

    .ishikawa-ab-player-row { gap: 10px; }
    .ishikawa-ab-volume-slider { display: none; }

    .ishikawa-ab-comparison[data-hide-mobile-volume="yes"] .ishikawa-ab-volume {
        display: none;
    }
}

@media (max-width: 420px) {
    .ishikawa-ab-time { font-size: 12px; }
    .ishikawa-ab-play { width: 40px; height: 40px; }
}