/*
 * Elatum Single Download Widget CSS
 * Loaded only when [elatum] shortcode is rendered.
 * Requires elatum-shared.css.
 */

/* ── Download action button ──────────────────────────────────────────────── */
.amel-card-action {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    flex-shrink:    0;
    padding-top:    4px;
}
.amel-wrap .amel-card-action .amel-dl-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    padding:         10px 20px;
    background:      var(--amel-accent, #c4a75d);
    color:           var(--amel-btn-text-color);
    border:          none;
    border-radius:   var(--amel-radius-sm);
    font-weight:     700;
    font-size:       13px;
    text-decoration: none;
    transition:      opacity 0.15s, transform 0.1s;
    white-space:     nowrap;
    cursor:          pointer;
    line-height:     1;
}
.amel-wrap .amel-card-action .amel-dl-btn:hover  { opacity: 0.85; transform: translateY(-1px); text-decoration: none; }
.amel-wrap .amel-card-action .amel-dl-btn:active { transform: translateY(0); text-decoration: none; }
.amel-dl-btn-icon { display: inline-flex; align-items: center; line-height: 1; }
.amel-dl-btn-icon iconify-icon { color: var(--amel-btn-text-color); width: 16px; height: 16px; display: block; font-size: 16px; }
.amel-dl-btn-label  { text-decoration: none; }
.amel-ver-dl-label  { text-decoration: none; }

/* ── Previous versions — software ───────────────────────────────────────── */
.amel-prev-versions {
    margin-top:  4px;
    border:      1px solid var(--amel-border);
    border-radius: var(--amel-radius-sm);
    overflow:    hidden;
    width:       100%;
    box-sizing:  border-box;
}
.amel-prev-versions-label {
    padding:        7px 12px;
    font-size:      10px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color:          var(--amel-accent-muted);
    background:     var(--amel-glass);
    border-bottom:  1px solid var(--amel-border);
}

/* Individual version accordion */
.amel-ver-accordion { border-bottom: 1px solid var(--amel-border); }
.amel-ver-accordion:last-child { border-bottom: none; }

.amel-ver-acc-toggle {
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             10px;
    padding:         9px 12px;
    background:      none;
    border:          none;
    cursor:          pointer;
    text-align:      left;
    transition:      background 0.2s;
}
.amel-ver-acc-toggle:hover              { background: var(--amel-glass-hover); }
.amel-ver-acc-toggle[aria-expanded="true"] { background: var(--amel-glass-hover); }

.amel-ver-acc-left {
    display:    flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
    flex:        1;
    min-width:   0;
}
.amel-ver-acc-right {
    display:    flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
}

.amel-ver-acc-body {
    padding:    0 12px 12px;
    background: var(--amel-glass);
}
.amel-ver-acc-body[hidden] { display: none; }
.amel-ver-acc-notes {
    border-top:  1px solid var(--amel-border);
    padding-top: 10px;
}

/* ── Inline version download link ───────────────────────────────────────── */
.amel-wrap .amel-ver-dl-link {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    padding:         4px 10px;
    background:      var(--amel-glass);
    border:          1px solid var(--amel-accent-border);
    border-radius:   var(--amel-radius-sm);
    font-size:       11px;
    font-weight:     600;
    color:           var(--amel-accent);
    text-decoration: none;
    white-space:     nowrap;
    transition:      background 0.2s, color 0.2s, border-color 0.2s;
    flex-shrink:     0;
}
.amel-wrap .amel-ver-dl-link:hover {
    background:      var(--amel-accent-glow);
    border-color:    var(--amel-accent);
    color:           var(--amel-accent);
    text-decoration: none;
}
.amel-wrap .amel-ver-dl-link img {
    width:   14px;
    height:  14px;
    display: block;
}
.amel-wrap .amel-ver-dl-link iconify-icon {
    color:     inherit;
    width:     14px;
    height:    14px;
    display:   block;
    font-size: 14px;
}
.amel-wrap .amel-ver-dl-link:hover img {
    filter: none;
}

/* ── Variants layout — audio, video, document ────────────────────────────── */
.amel-variants-wrap {
    margin-top:    4px;
    border:        1px solid var(--amel-border);
    border-radius: var(--amel-radius-sm);
    overflow:      hidden;
    width:         100%;
    box-sizing:    border-box;
}
.amel-variants-label {
    padding:        7px 12px;
    font-size:      10px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color:          var(--amel-accent-muted);
    background:     var(--amel-glass);
    border-bottom:  1px solid var(--amel-border);
}
.amel-variant-item        { border-bottom: 1px solid var(--amel-border); }
.amel-variant-item:last-child { border-bottom: none; }
.amel-variant-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             10px;
    padding:         9px 12px;
    flex-wrap:       wrap;
}
.amel-variant-left {
    display:    flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
    flex:        1;
    min-width:   0;
}
.amel-variant-right {
    display:    flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
}
.amel-variant-name {
    font-size:   12px;
    font-weight: 600;
    color:       var(--amel-text);
    white-space: nowrap;
}
.amel-variant-notes-toggle {
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         4px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0.6;
    transition:      opacity 0.15s;
}
.amel-variant-notes-toggle:hover { opacity: 1; }
.amel-variant-notes {
    padding:     0 12px 10px;
    background:  var(--amel-glass);
    border-top:  1px solid var(--amel-border);
}
.amel-variant-notes[hidden] { display: none; }

/* ── Image layout ────────────────────────────────────────────────────────── */
.amel-card--image { flex-direction: row; }

/* ── Image panel — matches video panel layout exactly ────────────────────── */
.amel-img-panel {
    display:        flex;
    flex-direction: row;
    align-items:    flex-start;
    gap:            16px;
    padding:        12px;
    border-top:     1px solid var(--amel-border);
    background:     var(--amel-glass);
}
.amel-img-panel[hidden] { display: none; }
.amel-img-preview-wrap {
    flex:            0 0 60%;
    max-width:       60%;
    display:         flex;
    align-items:     center;
    justify-content: center;
}
/* When no release notes — centre the image within the full panel width */
.amel-img-panel:not(.amel-img-panel--has-notes) .amel-img-preview-wrap {
    flex:      0 0 60%;
    max-width: 60%;
    margin:    0 auto;
}
.amel-img-preview {
    width:         100%;
    height:        auto;
    display:       block;
    border-radius: var(--amel-radius-sm);
    cursor:        pointer;
    transition:    opacity 0.15s;
}
.amel-img-preview:hover { opacity: 0.85; }
.amel-img-notes {
    flex:            1;
    min-width:       0;
    font-size:       13px;
    color:           var(--amel-text-body);
    line-height:     1.6;
    overflow-y:      auto;
    max-height:      300px;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-self:      stretch;
}

/* ── Lightbox overlay ────────────────────────────────────────────────────── */
#amel-lightbox {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,0.88);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         99999;
    padding:         24px;
}
#amel-lightbox[hidden] { display: none; }
#amel-lightbox-img {
    max-width:     90vw;
    max-height:    90vh;
    object-fit:    contain;
    border-radius: 4px;
    display:       block;
}
#amel-lightbox-close {
    position:    absolute;
    top:         16px;
    right:       20px;
    background:  none;
    border:      none;
    color:       #fff;
    font-size:   32px;
    line-height: 1;
    cursor:      pointer;
    opacity:     0.7;
    transition:  opacity 0.15s;
    padding:     0;
}
#amel-lightbox-close:hover { opacity: 1; }

/* ── Minified audio player — Audio variant rows ──────────────────────────── */
.amel-mini-player {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
}
.amel-mini-play-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      var(--amel-accent-glow);
    border:          1px solid var(--amel-accent-border);
    color:           var(--amel-accent);
    cursor:          pointer;
    flex-shrink:     0;
    transition:      background 0.2s, border-color 0.2s;
    padding:         0;
    position:        relative;
}
.amel-mini-play-btn:hover {
    background:   var(--amel-accent-muted);
    border-color: var(--amel-accent);
}
.amel-mini-play-btn iconify-icon {
    width:          16px;
    height:         16px;
    font-size:      16px;
    color:          inherit;
    pointer-events: none;
    display:        block;
    position:       absolute;
    bottom:         5px;
    right:          5px;
}
.amel-mini-progress-wrap {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-shrink: 0;
}
.amel-mini-time {
    font-size:            11px;
    color:                var(--amel-text-muted);
    white-space:          nowrap;
    min-width:            30px;
    text-align:           right;
    font-variant-numeric: tabular-nums;
}
.amel-mini-progress {
    position:      relative;
    width:         90px;
    height:        3px;
    border-radius: 2px;
    background:    rgba(255,255,255,0.15);
    cursor:        pointer;
    flex-shrink:   0;
}
.amel-mini-progress-fill {
    position:        absolute;
    left:            0;
    top:             0;
    height:          100%;
    width:           0%;
    border-radius:   2px;
    background:      var(--amel-accent);
    pointer-events:  none;
    transition:      width 0.1s linear;
}
.amel-mini-vol-wrap {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
    gap:         4px;
}
.amel-mini-vol-btn {
    display:     flex;
    align-items: center;
    background:  none;
    border:      none;
    color:       var(--amel-text-muted);
    cursor:      pointer;
    padding:     4px;
    flex-shrink: 0;
    transition:  color 0.2s;
}
.amel-mini-vol-btn:hover { color: var(--amel-accent); }
.amel-mini-vol-btn iconify-icon {
    width:          18px;
    height:         18px;
    font-size:      18px;
    pointer-events: none;
}
.amel-mini-vol-slider-wrap {
    overflow:    hidden;
    max-width:   0;
    transition:  max-width 0.25s ease;
    display:     flex;
    align-items: center;
}
.amel-mini-vol-wrap.vol-visible .amel-mini-vol-slider-wrap {
    max-width: 75px;
}
.amel-mini-vol-slider {
    width:        70px;
    height:       3px;
    accent-color: var(--amel-accent);
    cursor:       pointer;
    flex-shrink:  0;
}

/* ── Video panel — two-column layout, hidden until accordion toggle ───────── */
.amel-video-panel {
    display:        flex;
    flex-direction: row;
    align-items:    flex-start;
    gap:            16px;
    padding:        12px;
    border-top:     1px solid var(--amel-border);
    background:     var(--amel-glass);
}
.amel-video-panel[hidden] { display: none; }
.amel-video-player-wrap {
    flex:       0 0 60%;
    max-width:  60%;
    display:    flex;
    align-items: center;
    justify-content: center;
}
/* When no release notes — centre the player within the full panel width */
.amel-video-panel:not(.amel-video-panel--has-notes) .amel-video-player-wrap {
    flex:      0 0 60%;
    max-width: 60%;
    margin:    0 auto;
}
.amel-video-player {
    width:         100%;
    border-radius: var(--amel-radius-sm);
    background:    #000;
    display:       block;
}
.amel-video-notes {
    flex:            1;
    min-width:       0;
    font-size:       13px;
    color:           var(--amel-text-body);
    line-height:     1.6;
    overflow-y:      auto;
    max-height:      300px;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-self:      stretch;
}

/* ── Document panel — release notes only ─────────────────────────────────── */
.amel-doc-panel {
    padding:    12px;
    border-top: 1px solid var(--amel-border);
    background: var(--amel-glass);
}
.amel-doc-panel[hidden] { display: none; }
.amel-doc-notes {
    font-size:   13px;
    color:       var(--amel-text-body);
    line-height: 1.6;
}