/* Componenti del carrello dei siti (Farmacommerce.Carrello), uguali in WebClient e Armani. I colori si cambiano dal sito con
   le variabili sul suo :root: --carrello-colore (pulsanti, contatori), --carrello-colore-testo (testo sui pulsanti).
   Selettori con due classi: i temi dei siti hanno regole generiche su button e a che altrimenti prevarrebbero */

.carrello-testata,
.carrello-aggiungi,
.carrello-quantita {
    --carrello-c: var(--carrello-colore, var(--assistente-colore, #2b7a5b));
    --carrello-t: var(--carrello-colore-testo, #fff);
    font-size: 15px;
    line-height: 1.3;
}

.carrello-icona {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: middle;
}

/* Pulsanti */
.carrello-aggiungi .carrello-pulsante,
.carrello-quantita .carrello-pulsante,
.carrello-testata .carrello-pulsante {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid var(--carrello-c);
    border-radius: 999px;
    background: var(--carrello-c);
    color: var(--carrello-t);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
}

.carrello-aggiungi .carrello-pulsante:hover:not(:disabled),
.carrello-quantita .carrello-pulsante:hover:not(:disabled),
.carrello-testata .carrello-pulsante:hover {
    filter: brightness(1.1);
    color: var(--carrello-t);
}

.carrello-aggiungi .carrello-pulsante:disabled,
.carrello-quantita .carrello-pulsante:disabled {
    opacity: .6;
    cursor: default;
}

.carrello-testata .carrello-pulsante-secondario {
    background: transparent;
    color: var(--carrello-c);
}

.carrello-testata .carrello-pulsante-secondario:hover {
    color: var(--carrello-c);
}

.carrello-messaggio {
    display: block;
    margin-top: 6px;
    font-size: .85em;
    color: #444;
}

.carrello-avviso,
.carrello-non-disponibile {
    margin: 0;
    color: #b42318;
    font-size: .9em;
}

/* Scheda prodotto: pulsante tondo con l'icona, come le schede di WebClient in produzione. Il suggerimento a sinistra compare
   al passaggio del mouse (dissolvenza come i tooltip di Bootstrap) e mostra per un attimo l'esito dopo il clic; il numero
   dei pezzi gia' nel carrello sta sull'angolo. Nessuno dei due cambia le misure della scheda */
.carrello-aggiungi {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
}

.carrello-aggiungi .carrello-pulsante-tondo {
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
    transition: all .5s ease-in-out;
}

/* Con l'etichetta (MostraEtichetta): pillola con icona e testo; il suggerimento serve solo per l'esito dopo il clic */
.carrello-aggiungi .carrello-pulsante-etichetta {
    height: 46px;
    padding: 0 22px;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgb(0 0 0 / 18%);
}

    .carrello-aggiungi .carrello-pulsante-etichetta:disabled {
        opacity: 1;
    }

    .carrello-aggiungi .carrello-pulsante-etichetta ~ .carrello-suggerimento:not(.carrello-suggerimento-visibile) {
        display: none;
    }

/* Non attivo solo finche' WebAssembly carica o durante l'aggiunta: senza sbiadire, come in produzione */
.carrello-aggiungi .carrello-pulsante-tondo:disabled {
    opacity: 1;
}

.carrello-aggiungi .carrello-pulsante-tondo .carrello-icona {
    width: 18px;
    height: 18px;
}

@media (min-width: 992px) and (max-width: 1399px) {
    .carrello-aggiungi .carrello-pulsante-tondo {
        width: 37px;
        height: 37px;
    }

    .carrello-aggiungi .carrello-pulsante-tondo .carrello-icona {
        width: 15px;
        height: 15px;
    }
}

.carrello-aggiungi .carrello-suggerimento {
    position: absolute;
    top: 50%;
    right: calc(100% + 8px);
    z-index: 5;
    max-width: 200px;
    padding: 2px 10px;
    border-radius: 50px;
    background: var(--carrello-c);
    color: var(--carrello-t);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    width: max-content;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s linear, visibility .15s linear;
}

.carrello-aggiungi .carrello-suggerimento::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -6px;
    border: 6px solid transparent;
    border-right-width: 0;
    border-left-color: var(--carrello-c);
}

/* Smartphone e schermi stretti: sopra il pulsante, centrato. A sinistra uscirebbe dalle file a scorrimento e dai caroselli,
   che lo taglierebbero (il tooltip di Bootstrap stava nel body e si spostava da solo) */
@media (hover: none), (max-width: 767.98px) {
    .carrello-aggiungi .carrello-suggerimento {
        top: auto;
        right: auto;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
    }

    .carrello-aggiungi .carrello-suggerimento::after {
        top: 100%;
        left: 50%;
        margin-top: 0;
        margin-left: -6px;
        border-width: 6px 6px 0;
        border-color: var(--carrello-c) transparent transparent;
    }
}

.carrello-aggiungi .carrello-pulsante-tondo:hover ~ .carrello-suggerimento,
.carrello-aggiungi .carrello-pulsante-tondo:focus-visible ~ .carrello-suggerimento,
.carrello-aggiungi .carrello-suggerimento-visibile {
    opacity: 1;
    visibility: visible;
}

.carrello-aggiungi .carrello-aggiungi-numero {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 1;
    display: block;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid var(--carrello-c);
    border-radius: 50px;
    background: #fff;
    color: var(--carrello-c);
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    text-decoration: none;
}

/* Dettaglio: quantita' e pulsante */
.carrello-quantita {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.carrello-quantita .carrello-nel-carrello {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--carrello-c);
    font-weight: 600;
    text-decoration: none;
}

.carrello-quantita-riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.carrello-quantita .carrello-quantita-selettore {
    display: inline-flex;
    align-items: stretch;
    height: 42px;
    border: 1px solid #ccc;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}

.carrello-quantita .carrello-quantita-selettore button {
    width: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #333;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.carrello-quantita .carrello-quantita-selettore button:disabled {
    color: #bbb;
    cursor: default;
}

.carrello-quantita .carrello-quantita-selettore input {
    width: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: center;
    font: inherit;
    font-weight: 600;
    background: none;
    -moz-appearance: textfield;
}

.carrello-quantita .carrello-quantita-selettore input::-webkit-outer-spin-button,
.carrello-quantita .carrello-quantita-selettore input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.carrello-quantita .carrello-quantita-pulsante {
    height: 42px;
    padding: 0 22px;
}

.carrello-massimo {
    font-size: .85em;
    color: #666;
}

/* Testata: icona con il numero, totale e riepilogo */
.carrello-testata {
    position: relative;
    display: inline-block;
}

.carrello-testata .carrello-testata-pulsante {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

.carrello-testata-icona {
    position: relative;
    display: inline-flex;
}

.carrello-testata .carrello-testata-numero {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--carrello-c);
    color: var(--carrello-t);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.carrello-testata-totale {
    font-weight: 600;
}

.carrello-testata-sfondo {
    position: fixed;
    inset: 0;
    z-index: 100000;
}

.carrello-testata-pannello {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 100001;
    width: 360px;
    max-width: calc(100vw - 24px);
    padding: 14px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
    color: #222;
    text-align: left;
}

.carrello-testata-vuoto {
    margin: 4px 0;
}

.carrello-testata-intestazione,
.carrello-testata-totali {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.carrello-testata-intestazione {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
}

.carrello-testata-intestazione a {
    color: var(--carrello-c);
    font-weight: 400;
}

.carrello-testata .carrello-testata-righe {
    max-height: 50vh;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.carrello-testata-righe li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.carrello-testata-immagine img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.carrello-testata-riga {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.carrello-testata .carrello-testata-titolo {
    color: inherit;
    text-transform: capitalize;
    text-decoration: none;
}

.carrello-testata-prezzo del {
    margin-right: 4px;
    color: #888;
}

.carrello-testata .carrello-testata-rimuovi {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f2f2f2;
    color: #555;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.carrello-testata-totali {
    padding: 12px 0;
    font-size: 1.05em;
}

.carrello-testata-azioni {
    display: flex;
    gap: 10px;
}

.carrello-testata-azioni .carrello-pulsante {
    flex: 1 1 0;
}

/* Smartphone: il riepilogo occupa la larghezza dello schermo e il totale in testata non c'e' */
@media (max-width: 767.98px) {
    .carrello-testata-totale {
        display: none;
    }

    .carrello-testata-pannello {
        position: fixed;
        top: 64px;
        left: 12px;
        right: 12px;
        width: auto;
    }
}