.package-head {
    cursor: pointer;
}

.package-toggle {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.package-head .pkg-chevron-closed {
    display: inline;
}

.package-head .pkg-chevron-open {
    display: none;
}

.package-head:not(.collapsed) .pkg-chevron-closed {
    display: none;
}

.package-head:not(.collapsed) .pkg-chevron-open {
    display: inline;
}

/*
da caricare su main.css per evitare conflitti con le classi di bootstrap
:root,
[data-bs-theme=light] {
  --danger-text: #f50048;
  --danger-bg: rgba(245, 0, 72, 0.1);
}

.alert-info-custom {
    background: var(--info-bg);
    color: var(--info-text);
    border: none;
}

.alert-danger-custom {
    background: var(--danger-bg);
    color: var(--danger-text);
    border: none;
}
*/

/*
   Cambio password dal profilo (views/pages/account.blade.php).

   L'icona di modifica accanto al campo password e' diventata un <button> che
   apre il modale. Il posizionamento passa quindi dall'<img> al bottone:
   .account-edit-icon e' absolute dentro .account-input-wrap, e lasciandola
   cosi' il bottone avrebbe occupato spazio inline accanto al campo.
*/
.account-input-wrap .account-edit-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.account-input-wrap .account-edit-btn:hover {
    opacity: 0.8;
}

/* dentro il bottone l'icona torna statica: a posizionare e' il bottone */
.account-input-wrap .account-edit-btn .account-edit-icon {
    position: static;
    transform: none;
    opacity: 1;
}

/*
   Il corpo del modale riusa il layout di registerStep2 (.auth-fields-section,
   .auth-input-wrap, .auth-password-rules), quindi lo stile arriva gia' da
   main.css e qui non serve aggiungere nulla.

   L'unica differenza: .auth-right nel popup di registrazione ha un padding
   generoso pensato per una colonna larga 468px, che dentro un modale stretto
   toglie troppo spazio. Lo si riduce.
*/
#changePasswordModal .modal-body.auth-right {
    gap: 20px;
}

/* Cambio email in sospeso, mostrato sotto il campo nel profilo */
.account-pending-email {
    font-size: 13px;
    color: var(--warning-text, #b58713);
    background: var(--warning-bg, rgba(181, 135, 19, 0.1));
    border-radius: 8px;
    padding: 8px 12px;
    width: 250px;
}

@media (max-width: 575.98px) {
    .account-pending-email {
        width: 100%;
    }
}

#changeEmailModal .modal-body.auth-right {
    gap: 20px;
}

/* Referral in attesa di maturazione: il credito arriva dopo
   settings.referral_credit_days giorni, e fino ad allora la riga non deve
   sembrare completata (verde) ne' fallita (rossa). */
.account-badge.account-badge-waiting {
    background: var(--badge-waiting-bg, #8a8f98);
}

/* Register/Login della navbar desktop.

   L'anchor sta dentro `.nav-icons-row`, che e' `d-none d-lg-flex`: sotto i
   992px del collasso della navbar dovrebbe gia' sparire, e al suo posto compare
   l'icona utente del blocco mobile (`d-flex d-lg-none`). La regola qui lo dice
   in modo esplicito e sull'elemento invece che sul contenitore, cosi' il
   pulsante resta fuori dal mobile anche se un giorno viene spostato o se una
   utility sul contenitore cambia.

   !important perche' deve battere le classi di utilita' di Bootstrap, che sono
   dichiarate cosi' anche loro. */
@media (max-width: 991.98px) {
    .nav-register-login-desktop {
        display: none !important;
    }
}

/* Pulsante di chiusura ordine quando non c'e' niente da pagare: pacchetto
   gratuito, o saldo che copre tutto il carrello. Prende il posto dei due
   gateway, che restano a vista ma disabilitati.

   Stesso stile del bottone primario del carrello (`.btn-pay-stripe`), perche'
   nel punto in cui compare e' l'azione principale: non c'e' niente d'altro da
   premere. */
.btn-pay-free {
    background: var(--p-medium);
}

.btn-pay-free:disabled,
.btn-pay-free.disabled {
    background: var(--gs-200);
    color: #fff;
}

/* Link in coda al messaggio di una notifica.

   Eredita il colore dall'alert (lo decide il tipo della notifica): un link blu
   dentro un alert rosso stonerebbe, e il contrasto con lo sfondo colorato e'
   gia' quello giusto. Si distingue dal testo con peso e sottolineatura. */
.office-notice-link a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.office-notice-link a:hover {
    opacity: .8;
}