/*
 * Download-row styles for the watch page's `.mapper-dl-*` markup.
 *
 * NOT new CSS: this is the theme's own block, lifted verbatim out of
 * mapper.js, which used to inject it as <style id="anikoto-mapper-style">
 * at the same moment it built the row from a third-party API response.
 *
 * The row is server-rendered now (frontend/partials/watch/servers.blade.php),
 * so it is in the DOM at first paint — while mapper.js is deferred and runs
 * after. Leaving the rules in JS meant one frame of unstyled blue link text
 * before they landed. A stylesheet in <head> has them ready when the markup is.
 */
.mapper-dl-row{display:flex;align-items:center;padding:10px 15px;border-top:1px dashed #142030;overflow:visible}
.mapper-dl-row label{margin:0 10px 0 0;padding:0;min-width:70px}
.mapper-dl-links{flex:1;display:flex;flex-wrap:wrap;gap:6px;overflow:visible}
.mapper-dl-chip{display:inline-block;background:#111b29;color:#8097b2;padding:5px 10px;border-radius:.25rem;text-decoration:none;transition:all .2s}
.mapper-dl-chip:before{content:"\f019";font-family:"Font Awesome 6 Free";font-weight:900;margin-right:5px;font-size:.8rem;vertical-align:.05rem}
.mapper-dl-chip:hover{background:#26a3d6;color:#eee;text-decoration:none}
.mapper-dl-grp{position:relative;display:inline-flex;align-items:center;overflow:visible}
.mapper-dl-grp-toggle:after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;margin-left:6px;font-size:.7rem;display:inline-block;transition:transform .2s}
.mapper-dl-grp.is-open .mapper-dl-grp-toggle{background:#26a3d6;color:#eee}
.mapper-dl-grp.is-open .mapper-dl-grp-toggle:after{transform:rotate(180deg)}
.mapper-dl-grp-items{display:none;position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);z-index:60;width:max-content;max-width:min(280px,calc(100vw - 20px));background:#0c1420;border:1px solid #20334d;border-radius:8px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.mapper-dl-grp.is-open .mapper-dl-grp-items{display:flex;flex-wrap:wrap;gap:6px}
.mapper-dl-grp-items:after{content:"";position:absolute;top:100%;left:var(--mapper-arrow-x,50%);transform:translateX(-50%);border:6px solid transparent;border-top-color:#20334d}
@media(max-width:768px){.mapper-dl-row{display:block;padding:10px}
.mapper-dl-row label{display:block;margin-bottom:5px}
}
