/* ============================================================
   Spottime - Foglio di stile Pagina Download
   Tenace Games S.r.l. Semplificata
   Data: 31 Marzo 2026
   File: /assets/css/style-download.css
   Dipende da: /assets/css/style-home.css (variabili CSS)
============================================================ */

/* =============================================
   LAYOUT PAGINA
============================================= */
body { padding-top: 73px; } /* compensa navbar fixed */

/* =============================================
   HERO DOWNLOAD
============================================= */
.hero-download {
    background:
        linear-gradient(var(--sp-hero-ov), rgba(10,20,50,0.80)),
        url('/assets/img/home-img.webp') center/cover no-repeat;
    padding: 100px 0 120px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero-download::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 80px;
    background: var(--sp-grigio-sf);
    clip-path: ellipse(55% 100% at 50% 100%);
}
.hero-download .hero-badge {
    display: inline-block;
    background: rgba(245,194,0,0.18);
    border: 1px solid rgba(245,194,0,0.45);
    color: var(--sp-giallo);
    font-family: 'Sora', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 99px;
    padding: .3rem 1rem;
    margin-bottom: 1.1rem;
}
.hero-download h1 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2rem, 6vw, 3.4rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: .9rem;
    line-height: 1.15;
}
.hero-download h1 span { color: var(--sp-giallo); }
.hero-download p {
    color: rgba(255,255,255,0.72);
    font-size: 1.1rem;
    max-width: 520px;
    margin: 0 auto;
}

/* =============================================
   SEZIONE DOWNLOAD PRINCIPALE
============================================= */
.sezione-download { padding: 80px 0 100px; }

/* Intestazione sezione */
.download-sezione-titolo {
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 800;
    margin-bottom: .4rem;
    color: var(--sp-testo);
}
.download-sezione-sottotitolo {
    color: var(--sp-testo-light);
    font-size: .98rem;
    margin-bottom: 3rem;
}

/* =============================================
   CARD DOWNLOAD PIATTAFORMA
============================================= */
.card-download {
    background: var(--sp-card-sf);
    border: 2px solid var(--sp-bordo);
    border-radius: var(--raggio);
    padding: 2.2rem 2rem;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
    box-shadow: var(--ombra-card);
    overflow: visible;
}
.card-download::before {
    content: '';
    position: absolute;
    top: 0; left: 4px; right: 4px;
    height: 3px;
    background: var(--sp-giallo);
    opacity: 0;
    transition: opacity var(--trans);
}
.card-download:hover {
    transform: translateY(-7px);
    box-shadow: var(--ombra-hover);
    border-color: var(--sp-giallo);
}
.card-download:hover::before { opacity: 1; }

/* Versione featured (es. Windows) */
.card-download.in-evidenza {
    border-color: var(--sp-giallo);
    box-shadow: 0 0 0 3px rgba(245,194,0,0.15), var(--ombra-card);
}
.card-download.in-evidenza::before { opacity: 1; }

/* Badge "Più usato" */
.badge-evidenza {
    position: absolute;
    top: -13px; left: 50%;
    transform: translateX(-50%);
    background: var(--sp-giallo);
    color: var(--sp-blu);
    font-family: 'Sora', sans-serif;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .28rem 1rem;
    border-radius: 99px;
    white-space: nowrap;
    z-index: 1;
}

/* Icona piattaforma */
.card-download-icona {
    width: 72px; height: 72px;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    margin-bottom: 1.3rem;
    flex-shrink: 0;
}
.icona-chrome  { background: linear-gradient(135deg, #e8f0fe 0%, #c2d3fb 100%); color: #1a73e8; }
.icona-windows { background: linear-gradient(135deg, #e8f5fe 0%, #bde3ff 100%); color: #0078d4; }
.icona-android { background: linear-gradient(135deg, #e8f8f0 0%, #b9ecd3 100%); color: #3ddc84; }
.icona-rpi     { background: linear-gradient(135deg, #fce8ef 0%, #f8c0d0 100%); color: #c51a4a; }

[data-tema="scuro"] .icona-chrome  { background: rgba(26,115,232,0.15); }
[data-tema="scuro"] .icona-windows { background: rgba(0,120,212,0.15);  }
[data-tema="scuro"] .icona-android { background: rgba(61,220,132,0.15); }
[data-tema="scuro"] .icona-rpi     { background: rgba(197,26,74,0.15);  }

/* Titolo e testo card */
.card-download-titolo {
    font-family: 'Sora', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sp-testo);
    margin-bottom: .35rem;
}
.card-download-versione {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    background: var(--sp-grigio-sf);
    border: 1px solid var(--sp-bordo);
    color: var(--sp-testo-light);
    border-radius: 99px;
    padding: .15rem .7rem;
    margin-bottom: .9rem;
}
[data-tema="scuro"] .card-download-versione {
    background: rgba(255,255,255,0.06);
    border-color: var(--sp-bordo);
}
.card-download-desc {
    color: var(--sp-testo-light);
    font-size: .9rem;
    line-height: 1.65;
    flex-grow: 1;
    margin-bottom: 1.4rem;
}

/* Requisiti di sistema */
.requisiti-lista {
    list-style: none;
    padding: 0; margin: 0 0 1.6rem;
    border-top: 1px dashed var(--sp-bordo);
    padding-top: 1rem;
}
.requisiti-lista li {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .82rem;
    color: var(--sp-testo-light);
    padding: .22rem 0;
}
.requisiti-lista .bi { color: var(--sp-giallo); font-size: .85rem; flex-shrink: 0; }

/* Pulsante download */
.btn-scarica {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: .85rem 1.2rem;
    border-radius: 10px;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    border: 2px solid var(--sp-giallo);
    background: transparent;
    color: var(--sp-blu);
    transition: background var(--trans), color var(--trans),
                transform var(--trans), box-shadow var(--trans);
    text-decoration: none;
    margin-top: auto;
}
[data-tema="scuro"] .btn-scarica { color: var(--sp-giallo); }
.btn-scarica:hover,
.card-download.in-evidenza .btn-scarica {
    background: var(--sp-giallo);
    color: var(--sp-blu);
    box-shadow: 0 4px 18px rgba(245,194,0,0.28);
}
.card-download.in-evidenza .btn-scarica:hover {
    background: var(--sp-giallo-hov);
    transform: translateY(-1px);
}
.btn-scarica .bi { font-size: 1.05rem; }

/* Dimensione file badge */
.card-download-size {
    text-align: center;
    font-size: .75rem;
    color: var(--sp-testo-light);
    margin-top: .65rem;
}
.card-download-size i { margin-right: .25rem; }

/* =============================================
   SEZIONE GUIDA
============================================= */
.sezione-guida { padding: 0 0 100px; }

.box-guida {
    background: linear-gradient(135deg, var(--sp-blu) 0%, var(--sp-blu-chiaro) 100%);
    border-radius: calc(var(--raggio) * 1.5);
    padding: 3rem 2.5rem;
    position: relative;
    overflow: hidden;
}
.box-guida::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 90% 10%, rgba(245,194,0,0.12) 0%, transparent 55%);
}
.box-guida-icona {
    width: 64px; height: 64px;
    background: rgba(245,194,0,0.15);
    border: 1px solid rgba(245,194,0,0.3);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    color: var(--sp-giallo);
    margin-bottom: 1.2rem;
    flex-shrink: 0;
}
.box-guida h3 {
    font-family: 'Sora', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .6rem;
}
.box-guida p {
    color: rgba(255,255,255,0.65);
    font-size: .95rem;
    margin: 0;
}
.btn-vai-guida {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--sp-giallo);
    color: var(--sp-blu);
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: .97rem;
    border-radius: 10px;
    padding: .85rem 1.8rem;
    text-decoration: none;
    transition: background var(--trans), transform var(--trans), box-shadow var(--trans);
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-vai-guida:hover {
    background: var(--sp-giallo-hov);
    color: var(--sp-blu);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245,194,0,0.35);
}

/* =============================================
   SEZIONE REQUISITI GENERALI
============================================= */
.sezione-requisiti {
    padding: 0 0 80px;
}
.card-requisiti-globali {
    background: var(--sp-card-sf);
    border: 1px solid var(--sp-bordo);
    border-radius: var(--raggio);
    padding: 1.8rem;
    height: 100%;
    box-shadow: var(--ombra-card);
    transition: box-shadow var(--trans);
}
.card-requisiti-globali:hover { box-shadow: var(--ombra-hover); }

.req-titolo {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--sp-testo);
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--sp-giallo);
}
.req-titolo .bi { font-size: 1.1rem; color: var(--sp-giallo); }
.req-lista { list-style: none; padding: 0; margin: 0; }
.req-lista li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .88rem;
    color: var(--sp-testo-light);
    padding: .35rem 0;
    border-bottom: 1px dashed var(--sp-bordo);
}
.req-lista li:last-child { border-bottom: none; }
.req-lista .bi-check-circle-fill { color: #22c55e; flex-shrink: 0; margin-top: .15rem; }

/* =============================================
   PULSANTE SCARICA (button reset)
============================================= */
button.btn-scarica {
    cursor: pointer;
    outline: none;
}

/* =============================================
   MODAL VERIFICA DOWNLOAD
============================================= */
.modal-download-content {
    background: var(--sp-card-sf);
    border: 1px solid var(--sp-bordo);
    border-radius: calc(var(--raggio) * 1.2);
    overflow: hidden;
}
.modal-download-header {
    background: linear-gradient(135deg, var(--sp-blu) 0%, var(--sp-blu-chiaro) 100%);
    border-bottom: none;
    padding: 1.4rem 1.6rem;
}
.modal-download-header .modal-title {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
}
.modal-download-sottotitolo {
    color: rgba(255,255,255,0.6);
    font-size: .85rem;
    margin: .25rem 0 0;
}
.modal-download-body {
    padding: 1.6rem;
}
.form-label-download {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: .85rem;
    color: var(--sp-testo);
    margin-bottom: .35rem;
    display: block;
}
.form-label-download .bi { color: var(--sp-giallo); }
.form-control-download {
    background: var(--sp-grigio-sf);
    border: 1px solid var(--sp-bordo);
    color: var(--sp-testo);
    border-radius: 8px;
    padding: .65rem .9rem;
    font-size: .9rem;
    transition: border-color .25s, box-shadow .25s;
}
.form-control-download:focus {
    border-color: var(--sp-giallo);
    box-shadow: 0 0 0 3px rgba(245,194,0,0.15);
    background: var(--sp-grigio-sf);
    color: var(--sp-testo);
}
.form-control-download::placeholder {
    color: var(--sp-testo-light);
    opacity: .6;
}
.form-hint-download {
    font-size: .75rem;
    color: var(--sp-testo-light);
    margin-top: .3rem;
    padding-left: .15rem;
}
.btn-verifica-download {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .8rem 1.2rem;
    border-radius: 10px;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    border: none;
    background: var(--sp-giallo);
    color: var(--sp-blu);
    cursor: pointer;
    transition: background .25s, transform .25s, box-shadow .25s;
    margin-top: .5rem;
}
.btn-verifica-download:hover {
    background: var(--sp-giallo-hov);
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(245,194,0,0.28);
}
.btn-verifica-download:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Messaggi feedback */
.download-msg {
    border-radius: 8px;
    padding: .75rem 1rem;
    font-size: .85rem;
    margin-bottom: 1rem;
}
.download-msg-errore {
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.3);
    color: #ef4444;
}
[data-tema="scuro"] .download-msg-errore {
    color: #fca5a5;
}
.download-msg-successo {
    background: rgba(34,197,94,0.12);
    border: 1px solid rgba(34,197,94,0.3);
    color: #16a34a;
}
[data-tema="scuro"] .download-msg-successo {
    color: #86efac;
}

/* =============================================
   RESPONSIVE
============================================= */
@media (max-width: 991px) {
    .box-guida { text-align: center; }
    .box-guida-icona { margin: 0 auto 1.2rem; }
    .btn-vai-guida { margin-top: 1.5rem; }
}

@media (max-width: 576px) {
    .hero-download { padding: 80px 0 100px; }
    .sezione-download { padding: 60px 0 80px; }
    .box-guida { padding: 2rem 1.5rem; }
}