#mondoreale-audio-box .mra-progress{margin:10px 0;padding:9px 10px;background:#f0f0f1;border-left:4px solid #2271b1;font-size:12px;line-height:1.4}#mondoreale-audio-box audio{width:100%;margin-top:8px}#mondoreale-audio-box .mra-preserve-row{padding:10px;background:#f6f7f7;border-radius:4px}#mondoreale-audio-box .mra-preserve-row label{display:flex;align-items:center;gap:7px}#mondoreale-audio-box .mra-help{display:block;margin-top:5px;color:#646970;font-size:11px;line-height:1.35}

/*
 * MONDOREALE AUDIO PLAYER
 * Tema Foxiz normale  -> player scuro.
 * Foxiz [data-theme="dark"] -> player chiaro, per mantenere contrasto con la pagina.
 */
.mondoreale-audio-player{
    --mra-green:#2bd267;
    --mra-bg-a:#080a09;
    --mra-bg-b:#111513;
    --mra-text:#fff;
    --mra-muted:#b9bfbd;
    --mra-wave:#5a5f5d;
    --mra-line:rgba(255,255,255,.08);
    --mra-border:rgba(255,255,255,.06);
    --mra-brand-border:rgba(255,255,255,.13);
    --mra-brand-bg:rgba(255,255,255,.018);
    --mra-tool-hover:rgba(255,255,255,.07);
    --mra-play-bg:#fff;
    --mra-play-color:#070a08;
    --mra-shadow:0 12px 30px rgba(0,0,0,.16);
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    margin:0 0 28px;
    padding:22px 24px 18px;
    border:1px solid var(--mra-border);
    border-radius:20px;
    background:radial-gradient(circle at 28% 0,rgba(43,210,103,.055),transparent 32%),linear-gradient(145deg,var(--mra-bg-a),var(--mra-bg-b));
    color:var(--mra-text);
    box-shadow:var(--mra-shadow);
    font-family:inherit;
    overflow:hidden;
    transition:background .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease
}
.mondoreale-audio-player *{box-sizing:border-box}.mra-native-audio{display:none!important}

/* Foxiz dark mode: player chiaro. Il selettore funziona sia se data-theme è su html sia se è su un wrapper. */
[data-theme="dark"] .mondoreale-audio-player{
    --mra-bg-a:#fff;
    --mra-bg-b:#f3f6f4;
    --mra-text:#111513;
    --mra-muted:#626966;
    --mra-wave:#aeb5b2;
    --mra-line:rgba(11,14,13,.10);
    --mra-border:rgba(11,14,13,.12);
    --mra-brand-border:rgba(11,14,13,.14);
    --mra-brand-bg:rgba(11,14,13,.025);
    --mra-tool-hover:rgba(11,14,13,.06);
    --mra-play-bg:#0b0e0d;
    --mra-play-color:#fff;
    --mra-shadow:0 12px 30px rgba(0,0,0,.22)
}

.mra-player-head{display:grid;grid-template-columns:92px minmax(0,1fr) 68px;gap:18px;align-items:center}
.mra-brand{height:82px;border:1px solid var(--mra-brand-border);border-radius:14px;background:var(--mra-brand-bg);display:flex;align-items:center;justify-content:center;padding:10px}
.mra-brand img{display:block;max-width:100%;max-height:60px;width:auto;height:auto;object-fit:contain}
.mra-title{min-width:0;display:flex;align-items:center;gap:12px;font-size:clamp(20px,3vw,28px);line-height:1.08;color:var(--mra-text)}
.mra-title strong{display:block;min-width:0;color:inherit}
.mra-soundmark{display:flex;align-items:center;gap:3px;height:30px;flex:0 0 auto}
.mra-soundmark i{display:block;width:4px;border-radius:4px;background:var(--mra-green)}
.mra-soundmark i:nth-child(1),.mra-soundmark i:nth-child(5){height:12px}.mra-soundmark i:nth-child(2),.mra-soundmark i:nth-child(4){height:22px}.mra-soundmark i:nth-child(3){height:30px}
.mra-play{width:64px;height:64px;border-radius:50%;border:2px solid var(--mra-green);background:var(--mra-play-bg);color:var(--mra-play-color);display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 0 0 5px rgba(43,210,103,.07);transition:transform .16s ease,box-shadow .16s ease,background .22s ease,color .22s ease}
.mra-play:hover{transform:scale(1.035);box-shadow:0 0 0 7px rgba(43,210,103,.09)}
.mra-play-icon{display:grid;place-items:center;width:29px;height:29px}.mra-play svg{width:29px;height:29px;fill:currentColor}.mra-play.is-playing .mra-play-icon{position:relative;width:24px;height:28px}.mra-play.is-playing .mra-play-icon:before,.mra-play.is-playing .mra-play-icon:after{content:"";position:absolute;top:2px;bottom:2px;width:7px;border-radius:2px;background:currentColor}.mra-play.is-playing .mra-play-icon:before{left:3px}.mra-play.is-playing .mra-play-icon:after{right:3px}.mra-play.is-playing svg{display:none}

/* La waveform ora occupa davvero tutta la larghezza disponibile. */
.mra-waveform{position:relative;height:58px;margin:22px 0 8px;overflow:hidden}
.mra-wave-base,.mra-wave-progress{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:0}
.mra-wave-base i,.mra-wave-progress i{display:block;flex:0 0 4px;width:4px;border-radius:5px;background:var(--mra-wave)}
.mra-wave-progress{z-index:2;width:100%;clip-path:inset(0 100% 0 0);will-change:clip-path}
.mra-wave-progress i{background:var(--mra-green)}

.mra-progress-row{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:10px;align-items:center}
.mra-time{font-size:12px;line-height:1;color:var(--mra-text);font-variant-numeric:tabular-nums}.mra-duration{text-align:right}
.mra-seek{width:100%;height:4px;margin:0;accent-color:var(--mra-green);cursor:pointer}
.mra-bottom{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:19px;padding-top:15px;border-top:1px solid var(--mra-line)}
.mra-tools{display:flex;align-items:center;gap:11px;min-width:0}
.mra-tool{appearance:none;border:0;background:transparent;color:var(--mra-text);text-decoration:none!important;cursor:pointer;padding:7px 10px;border-radius:9px;display:flex;align-items:center;gap:8px;font:inherit;transition:background .15s ease,color .15s ease}
.mra-tool:hover{background:var(--mra-tool-hover);color:var(--mra-text)}
.mra-tool svg{width:22px;height:22px;fill:currentColor;flex:0 0 auto}.mra-tool span{display:flex;flex-direction:column;align-items:flex-start;line-height:1}.mra-tool b{font-size:14px;color:inherit;font-weight:700}.mra-tool small{font-size:11px;color:var(--mra-muted);margin-top:4px;white-space:nowrap}
.mra-volume{display:grid;grid-template-columns:24px minmax(90px,140px);align-items:center;gap:9px;flex:0 1 175px;margin:0;color:var(--mra-text)}
.mra-volume svg{width:22px;height:22px;fill:currentColor}.mra-volume input{width:100%;accent-color:var(--mra-green);cursor:pointer}

@media(max-width:620px){
    .mondoreale-audio-player{padding:18px 16px 15px;border-radius:17px}
    .mra-player-head{grid-template-columns:66px minmax(0,1fr) 56px;gap:12px}.mra-brand{height:62px;padding:7px;border-radius:11px}.mra-brand img{max-height:46px}.mra-title{gap:8px;font-size:18px}.mra-soundmark{height:24px;gap:2px}.mra-soundmark i{width:3px}.mra-soundmark i:nth-child(1),.mra-soundmark i:nth-child(5){height:9px}.mra-soundmark i:nth-child(2),.mra-soundmark i:nth-child(4){height:17px}.mra-soundmark i:nth-child(3){height:24px}.mra-play{width:52px;height:52px}.mra-play svg{width:24px;height:24px}
    .mra-waveform{height:46px;margin-top:17px}.mra-wave-base i,.mra-wave-progress i{flex-basis:3px;width:3px}
    .mra-bottom{align-items:flex-start;flex-direction:column;gap:11px}.mra-tools{width:100%;justify-content:flex-start;flex-wrap:wrap}.mra-tool{padding:6px 8px}.mra-volume{width:100%;grid-template-columns:24px 1fr;flex:none}.mra-tool small{font-size:10px}
}
@media(max-width:410px){
    .mra-player-head{grid-template-columns:54px minmax(0,1fr) 48px;gap:9px}.mra-brand{height:52px}.mra-brand img{max-height:38px}.mra-title{font-size:16px}.mra-soundmark{display:none}.mra-play{width:46px;height:46px}.mra-tools{gap:3px}.mra-tool{gap:5px}.mra-tool svg{width:19px;height:19px}.mra-waveform{height:40px}.mra-wave-base i,.mra-wave-progress i{flex-basis:2px;width:2px}.mra-progress-row{grid-template-columns:40px minmax(0,1fr) 40px;gap:7px}.mra-time{font-size:10px}
}