/*
 * ableplayer-theme.css
 * Custom theme for Able Player — Audio, skin: 2020, icons: SVG
 * Variante: hell — #f2f2f2 / #ffffff / #e40046
 * WCAG AA contrast throughout; focus indicators WCAG AAA
 *
 * Load AFTER ableplayer.min.css:
 *   <link rel="stylesheet" href="ableplayer.min.css">
 *   <link rel="stylesheet" href="ableplayer-theme.css">
 */


/* ====================================================
   STEP 1: Globale Able-Farbtokens überschreiben
   ==================================================== */

:root {
    --base-color:             #e40046;
    --able-black:             #444444;   /* Icon-/Textfarbe auf hellem Grund */
    --able-white:             #ffffff;
    --able-off-white:         #f2f2f2;
    --able-dark-gray:         #1a1a1a;
    --able-medium-dark-gray:  #444444;
    --able-medium-dark-gray2: #f2f2f2;   /* controller background */
    --able-medium-gray:       #767676;
    --able-medium-light-gray: #cccccc;
    --able-light-gray:        #e8e8e8;
    --able-very-light-gray:   #f2f2f2;

    --able-light-orange:      #ffcc00;   /* focus ring — AAA auf hellem Grund */
    --able-bright-green:      #1a1a1a;   /* hover outline */
}


/* ====================================================
   STEP 2: Scoped custom properties
   ==================================================== */

.able-chapters-div,
.able-modal-dialog,
.able-modal-overlay,
.able-playlist,
.able-search-results,
.able-transcript-area,
.able-wrapper {
    --able-control-background:      #f2f2f2;
    --able-control-color:           #444444;
    --able-controller-background:   #f2f2f2;
    --able-statusbar-background:    #f2f2f2;
    --able-statusbar-color:         #767676;
    --able-separator-color:         #cccccc;

    --able-seekbar-border:          transparent;
    --able-seekbar-background:      #dddddd;
    --able-seekbar-loaded:          #cccccc;
    --able-seekbar-played:          var(--base-color);
    --able-seekbar-head:            var(--base-color);

    --able-now-playing-background:  #ffffff;
    --able-now-playing-color:       #1a1a1a;

    --able-volume-background:       #ffffff;
    --able-volume-outline:          var(--base-color);

    --able-default-caption-color:       #ffffff;
    --able-default-caption-background:  rgba(0,0,0,0.8);

    --able-focus-outline:           transparent; /*#ffffff;*/
    --able-hover-outline:           transparent; /*#1a1a1a;*/

    --able-tooltip-border:          #cccccc;
    --able-tooltip-color:           #1a1a1a;
    --able-tooltip-background:      #ffffff;

    --able-alert-background:        #fff3cd;
    --able-alert-button-color:      #1a1a1a;

    --able-menu-background:         #ffffff;
    --able-menu-border:             #cccccc;
    --able-menu-outline:            var(--base-color);
    --able-menu-color:              #1a1a1a;
    --able-menu-focus-background:   var(--base-color);
    --able-menu-focus-color:        #ffffff;

    --able-modal-color:             #1a1a1a;
    --able-modal-background:        #ffffff;
    --able-modal-border:            3px solid var(--base-color);
    --able-modal-overlay:           rgba(0,0,0,0.4);

    --able-transcript-background:           #ffffff;
    --able-cue-highlighted-background:      var(--base-color);
    --able-cue-highlighted-color:           #ffffff;
    --able-cue-interacting-background:      #fff3cd;
    --able-cue-interacting-color:           #1a1a1a;

    --able-playlist-item-background:            #ffffff;
    --able-playlist-item-color:                 #1a1a1a;
    --able-playlist-item-button-color:          #1a1a1a;
    --able-playlist-current-background:         var(--base-color);
    --able-playlist-current-border:             var(--base-color);
    --able-playlist-current-outline:            transparent; /*var(--base-color);*/
    --able-playlist-current-active-color:       #ffffff;
    --able-playlist-current-active-background:  var(--base-color);

    --able-current-chapter-background:  var(--base-color);
    --able-current-chapter-color:       #ffffff;

    --able-button-focus:             var(--base-color);

    --able-base-control-size: 32px; /* size of control buttons */
}

/* ====================================================
   MISC
   ==================================================== */
div[role="button"] {
    cursor: pointer;
}


/* ====================================================
   PLAYER-RAHMEN
   ==================================================== */

.able-wrapper {
    border: 1px solid var(--able-medium-light-gray);
}


/* ====================================================
   CONTROLLER
   ==================================================== */

.able-controller {
    background-color: var(--able-medium-dark-gray2) !important;
    border-top: 1px solid var(--able-light-gray);
}

.able-audio-wrapper {
    background: var(--able-medium-dark-gray2) !important;
}


/* ====================================================
   NOW PLAYING
   ==================================================== */

div.able-now-playing {
    background: var(--able-white) !important;
    color: var(--able-dark-gray) !important;
    border-bottom: 2px solid var(--able-menu-focus-background);
    font-size: 0.9375rem;
    padding: 0.75rem;
    font-family: var(--font-family);
}

div.able-now-playing span {
    color: var(--able-medium-gray);
}

@media (max-width: 575.98px) {
    div.able-now-playing span {
        font-size: 0.8rem;
    }
}

/* ====================================================
   SEEKBAR
   ==================================================== */

.able-seekbar-wrapper {
    padding: 10px 12px;
    background: var(--able-white);
    border-bottom: 1px solid var(--able-light-gray);
}

.able-seekbar {
    height: 6px;
    border-radius: 3px;
    border-color: transparent !important;
    background-color: #dddddd;
}

.able-seekbar-loaded {
    background-color: var(--able-medium-light-gray);
    border-radius: 3px;
}

.able-seekbar-played {
    background-color: var(--able-menu-focus-background) !important;
    border-radius: 3px;
}

/* Roter Handle mit weißem Ring */
.able-seekbar-head {
    width: 16px  !important;
    height: 16px !important;
    min-width: 16px  !important;
    min-height: 16px !important;
    border-radius: 50% !important;
    background-color: var(--able-menu-focus-background) !important;
    box-shadow: 0 0 0 2px var(--able-white), 0 0 0 3px var(--able-menu-focus-background);
}


/* ====================================================
   BUTTONS — Icons dunkelgrau auf hellgrauem Grund
   ==================================================== */

.able-controller,
.able-controller button,
.able-controller div[role=button] {
    color: var(--able-black) !important;
}

/* Hover: roter Hintergrund, weiße Icons */
.able-controller div[role=button]:hover,
.able-controller button:not(.able-big-play-button):hover {
    background-color: var(--able-menu-focus-background) !important;
    color: var(--able-white) !important;
}

/* Active */
.able-controller div[role=button]:active,
.able-controller button:not(.able-big-play-button):active {
    background-color: var(--able-playlist-current-border) !important;
    color: var(--able-white) !important;
}

/* Focus */
.able-controller div[role=button]:focus,
.able-controller button:focus,
.able-seekbar-head:focus {
}

/* Play-Button: immer rot */
.able-controller div.able-button-handler-play[role=button] {
    background-color: var(--able-menu-focus-background) !important;
    color: var(--able-white) !important;
    border-radius: 4px;
}

.able-controller div.able-button-handler-play[role=button]:hover {
    background-color: var(--able-playlist-current-border) !important;
}

.able-controller div.able-button-handler-play[role=button]:focus {
}


/* ====================================================
   STATUS BAR
   ==================================================== */

.able-status-bar {
    background: var(--able-medium-dark-gray2) !important;
    color: var(--able-medium-gray) !important;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    border-top: 1px solid var(--able-light-gray);
}


/* ====================================================
   POPUP MENUS
   ==================================================== */

.able ul.able-popup li.able-focus,
ul.able-popup li.able-focus {
    background-color: var(--able-menu-focus-background) !important;
    color: var(--able-white) !important;
}


/* ====================================================
   VOLUME SLIDER THUMB
   ==================================================== */

input[type=range]::-moz-range-thumb {
    background-color: var(--able-menu-focus-background) !important;
}

input[type=range]::-webkit-slider-thumb {
    background-color: var(--able-menu-focus-background) !important;
}


/* ====================================================
   PLAYLIST
   ==================================================== */

.able-playlist {
    border-top: none !important;
}

.able-playlist li {
    background-color: var(--able-white) !important;
    color: var(--able-dark-gray) !important;
    border-color: var(--able-light-gray) !important;
}

.able-playlist li:first-of-type:not(.able-player.able-playlistli), 
.able-search-results li:first-of-type {
    border-radius: 0 !important;
}

.able-playlist li:last-of-type {
    border-bottom: 1px solid var(--able-light-gray) !important;
    border-radius: 0 !important;
}

.able-playlist li button {
    color: var(--base-color) !important;
    background-color: transparent !important;
    font-size: 0.9375rem;
    padding: 12px 14px;
}

@media (max-width: 575.98px) {
    .able-playlist li button {
        font-size: 0.8rem;
    }
}

.able-playlist li button:hover {
    background-color: var(--able-medium-dark-gray2) !important;
}

.able-playlist li button:focus {
    background-color: var(--able-medium-dark-gray2) !important;
}

/* Aktiver Track */
.able-playlist li.able-current {
    background-color: var(--able-menu-focus-background) !important;
    border-color: var(--able-playlist-current-border) !important;
}

.able-playlist li.able-current button {
    color: var(--able-white) !important;
    background-color: transparent !important;
    border-left: 4px solid var(--able-playlist-current-border);
}

.able-playlist li.able-current button:hover,
.able-playlist li.able-current button:focus,
.able-playlist li.able-current button:active {
    color: var(--able-white) !important;
}

/* Optionale Laufzeit-Anzeige */
.able-playlist .track-meta {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--able-medium-gray);
    flex-shrink: 0;
}

.able-playlist li.able-current .track-meta {
    color: rgba(255,255,255,0.75);
}


/* ====================================================
   MODAL-DIALOGE
   ==================================================== */

div.able-modal-dialog {
    border-radius: 4px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}

div.able-modal-dialog h1 {
    color: var(--able-menu-focus-background);
}

div.able-modal-dialog .modalCloseButton {
    cursor: pointer;
}

.able-modal-dialog button:focus,
div.able-modal-dialog button:focus {
}

.able-modal-dialog button:hover,
div.able-modal-dialog button:hover {
}

.able-modal-dialog .able-prefs-captions > div {
    align-items: center;
}

/* ====================================================
   CONTROLS
   ==================================================== */

.able-modal-dialog button svg,
.able-modal-dialog div[role="button"] svg, 
.able-wrapper button svg, 
.able-wrapper div[role="button"] svg {
  /*width: 20px;*/
}

.able-seekbar-head {
    box-shadow: none;
}

.able-button-handler-play svg#ableplayer-play {
    width: 20px;
}

.able-button-handler-play svg#ableplayer-pause {
    width: 17px;
}

@media (max-width: 440px) {

    /* force wrap */
    .able-control-row .able-left-controls,
    .able-control-row .able-right-controls {
        flex:1 0 100%;
    }

    .able-control-row .able-left-controls {
        justify-content: space-between;
    }

    .able-control-row .able-right-controls div:nth-child(4) {
        margin-left: auto;
    }

    .able-control-row .able-pipe {
        display: none;
    }
}

/* ====================================================
   MISC
   ==================================================== */

.able-chapters-div, 
.able-modal-dialog, 
.able-playlist, 
.able-search-results, 
.able-transcript-area, 
.able-wrapper {
  font-family: var(--font-family);
  font-weight: 400;
}

/* ====================================================
   Full overwrite focus style
   ==================================================== */

.able-alert button:focus, .able-controller div[role="button"]:focus, .able-controller input:focus, .able-modal-dialog button:focus, .able-playlist button:focus, .able-search-results li button:focus, .able-seekbar-head:focus, .able-window-toolbar .able-button-handler-preferences:focus, .able-window-toolbar input:focus, .able-window-toolbar select:focus, .able-wrapper .able button.able-big-play-button:focus .icon-play, .able-wrapper .able button.able-big-play-button:focus svg, div.able-modal-dialog button:focus, div.able-modal-dialog input:focus {
    outline-color: transparent !important;
}