/* ===========================================================
   ISCRIZIONE.CSS
   Layout moderno
=========================================================== */

:root{

    --primary:#0d6efd;
    --primary-dark:#0b5ed7;

    --success:#198754;

    --bg:#f4f7fb;

    --card:#ffffff;

    --border:#e6eaf0;

    --text:#243746;

    --muted:#6c757d;

    --shadow:
        0 10px 25px rgba(0,0,0,.05);

    --radius:18px;

}


/* ===========================================================
   PAGINA
=========================================================== */

body{

    background:var(--bg);

}


.app-container{

    max-width:1400px;

    margin:auto;

    padding:40px 20px 80px;

}


/* ===========================================================
   HEADER
=========================================================== */

.app-header{

    text-align:center;

    margin-bottom:40px;

}

.app-header h1{

    font-size:2rem;

    font-weight:700;

    color:var(--text);

    margin-bottom:10px;

}

.app-header p{

    color:var(--muted);

    font-size:1.1rem;

}


/* ===========================================================
   GRID
=========================================================== */

.app-grid{

    display:grid;

    grid-template-columns:

        1fr
        1fr
        360px;

    gap:25px;

    align-items:start;

}


/* ===========================================================
   CARD
=========================================================== */

.app-card{

    background:white;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    border:1px solid var(--border);

    padding:30px;

}


.app-card h3{

    margin-bottom:25px;

    font-size:1.25rem;

    font-weight:600;

    color:var(--text);

}


/* ===========================================================
   INPUT
=========================================================== */

.form-control{

    margin-bottom:15px;

    border-radius:12px;

    border:1px solid #d9dee5;

    min-height:48px;

    padding:.75rem 1rem;

    transition:.25s;

}


.form-control:focus{

    border-color:var(--primary);

    box-shadow:

        0 0 0 .20rem

        rgba(13,110,253,.15);

}


.form-label{

    font-weight:600;

    color:var(--text);

}


/* ===========================================================
   LIBRI
=========================================================== */

.app-books{

    grid-column:

        1 / 3;

}


.card-header-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}


/* elenco libri */

#catalogo-libri{

    display:grid;

    grid-template-columns:

        repeat(auto-fill,minmax(260px,1fr));

    gap:15px;

}


/* ogni libro */

.libro-item{

    border:1px solid #dfe5ec;

    border-radius:14px;

    padding:18px;

    transition:.25s;

    background:white;

    cursor:pointer;

}


.libro-item:hover{

    border-color:var(--primary);

    transform:translateY(-3px);

    box-shadow:

        0 8px 20px rgba(0,0,0,.08);

}


.libro-item label{

    width:100%;

    display:flex;

    gap:12px;

    align-items:center;

    cursor:pointer;

}


.libro-item input{

    width:20px;

    height:20px;

}


/* ===========================================================
   PRICE BOX
=========================================================== */

.price-box{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 16px;

    border-radius:12px;

    background:#f8f9fc;

    margin-bottom:15px;

}


.price-box span{

    color:var(--muted);

}


.price-box strong{

    font-size:1.1rem;

    color:var(--text);

}


.total-box{

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color:white;

}


.total-box span,

.total-box strong{

    color:white;

}

/* ===========================================================
   RIEPILOGO
=========================================================== */

.app-summary{
    position: sticky;
    top: 90px;
    align-self: start;
}

.summary-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.payment-box{
    margin-top: 25px;
}

.payment-box small{
    display: block;
    text-align: center;
    margin-top: 10px;
    color: var(--muted);
}


/* ===========================================================
   PULSANTI
=========================================================== */

.btn{
    border-radius: 12px;
    min-height: 48px;
    font-weight: 600;
    transition: all .25s ease;
}

.btn-pay{
    width: 100%;
    background: linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );
    border: none;
    color: white;
}

.btn-pay:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(13,110,253,.25);
}

.btn-outline-primary,
.btn-outline-success{
    width: 100%;
    margin-bottom: 10px;
}


/* ===========================================================
   LINK ASSOCIAZIONE
=========================================================== */

.info-links{
    margin-top: 25px;
}

.info-links h5{
    margin-bottom: 15px;
    font-weight: 600;
}

.info-links .btn{
    text-align: left;
}


/* ===========================================================
   HR
=========================================================== */

hr{
    border: none;
    border-top: 1px solid var(--border);
    margin: 25px 0;
}


/* ===========================================================
   ANIMAZIONI
=========================================================== */

.app-card{
    animation: fadeUp .4s ease;
}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ===========================================================
   FOCUS ACCESSIBILITÀ
=========================================================== */

button:focus,
input:focus,
select:focus{

    outline:none;

}


/* ===========================================================
   TABLET
=========================================================== */

@media (max-width:1200px){

    .app-grid{

        grid-template-columns:
            1fr 1fr;

    }

    .app-books{

        grid-column:1 / -1;

    }

    .app-summary{

        grid-column:1 / -1;

        position:relative;

        top:auto;

    }

}


/* ===========================================================
   SMARTPHONE
=========================================================== */

@media (max-width:768px){

    .app-container{

        padding:20px 15px 60px;

    }

    .app-header h1{

        font-size:1.6rem;

    }

    .app-header p{

        font-size:1rem;

    }

    .app-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .app-books{

        grid-column:auto;

    }

    .app-summary{

        grid-column:auto;

        position:relative;

        top:auto;

    }

    .app-card{

        padding:22px;

    }

    #catalogo-libri{

        grid-template-columns:1fr;

    }

    .card-header-row{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

}


/* ===========================================================
   TELEFONI PICCOLI
=========================================================== */

@media (max-width:480px){

    .app-header h1{

        font-size:1.3rem;

    }

    .app-card{

        padding:18px;

    }

    .price-box{

        padding:10px 12px;

    }

    .price-box strong{

        font-size:1rem;

    }

    .btn{

        font-size:.95rem;

    }

}


/* ===========================================================
   FOOTER
=========================================================== */

/*
Se il footer è nel CSS principale con:

position: fixed;

eliminalo.

Meglio:

footer{

    position:relative;

}

oppure usa il layout flex nel body.
*/


/* ===========================================================
   SCROLL
=========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#cfd6df;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#b8c0ca;

}