/* =============================================================
   Pagine account: login, registrazione, area utente, checkout
   ============================================================= */

.auth-wrap {
    display: grid;
    place-items: center;
    padding-block: clamp(3rem, 8vw, 6rem);
}
.auth-card {
    width: 100%;
    padding: 2.4rem 2.2rem;
}
.auth-card h1 { font-size: 2rem; margin-bottom: 1.4rem; }
.auth-alt {
    margin-top: 1.4rem;
    color: var(--lavanda);
    font-size: .95rem;
}
.auth-card .btn-astral { width: 100%; justify-content: center; }

/* ---------- Area account ---------- */
.account-head { margin-bottom: 2.2rem; }
.account-head h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 400; }
.account-list { display: grid; gap: 1rem; }
.account-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    background: linear-gradient(160deg, var(--indaco-700), var(--indaco-800));
    border: 1px solid rgba(185, 175, 214, .12);
    border-radius: var(--radius-sm);
}
.account-item .a-glyph { width: 38px; height: 38px; color: var(--oro); flex: none; }
.account-item .a-name { font-family: var(--font-display); font-size: 1.2rem; flex: 1; }
.account-empty { color: var(--lavanda); }

/* ---------- Checkout ---------- */
.checkout-wrap { padding-block: clamp(3rem, 8vw, 6rem); }
.checkout-card { padding: 2.4rem 2.2rem; text-align: center; }
.checkout-card .co-glyph { width: 64px; height: 64px; color: var(--oro); margin: 0 auto 1.2rem; }
.checkout-card h1 { font-size: 2rem; }
.checkout-card .co-desc { color: var(--lavanda); margin-bottom: 1rem; }
.checkout-price {
    font-family: var(--font-num);
    font-size: 2.6rem;
    color: var(--oro-soft);
    margin-bottom: .3rem;
}
.checkout-price small {
    display: block;
    font-family: var(--font-body);
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--lavanda);
    margin-bottom: 1.6rem;
}
/* Larghezza del widget PayPal: un componente esterno con dimensione propria,
   non contenuto di pagina, per cui qui un limite ha senso (mx-auto lo centra). */
#paypal-buttons { max-width: 360px; margin-top: 1.6rem; min-height: 48px; }
.co-secure { color: var(--lavanda); font-size: .85rem; }

/* ---------- Area account: sezioni dati/risultati ---------- */
.account-section-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.4rem;
    margin: 2.4rem 0 1rem;
}
.account-profile {
    padding: 1.2rem 1.4rem;
    background: linear-gradient(160deg, var(--indaco-700), var(--indaco-800));
    border: 1px solid rgba(185, 175, 214, .12);
    border-radius: var(--radius-sm);
}
.account-profile-grid { display: grid; gap: .8rem; }
.account-profile-row { display: flex; justify-content: space-between; gap: 1rem; }
.account-profile-row .a-label { color: var(--lavanda); }
.account-profile-row .a-value { font-family: var(--font-display); }
.account-item .a-date { color: var(--lavanda); font-size: .85rem; flex: none; }
.account-logout { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.6rem; }
.account-delete-form { margin: 0; }
.account-delete-btn { border-color: #b23b3b; color: #e07a7a; }
.account-delete-btn:hover { border-color: #e07a7a; color: #ffb3b3; }