/* Scheda degli annunci (SalePreviews/_SalePreview.cshtml, .sale-card) in ricerche, vendite e acquisti: caricato da _GridLayout.
   Solo aspetto: le classi usate da saleFunctions.js (addToCart, wish, copy...) non cambiano.
   theme.css colora le varianti .btn-*: i pulsanti delle schede usano !important per tenere i propri colori */

.sale .sale-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--border, #e2e4ec);
    border-radius: 14px;
    background: var(--bg, #fff);
    box-shadow: 0 1px 2px rgba(21, 26, 45, .04);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .sale .sale-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(21, 26, 45, .12);
    }

    /* foto: occupa tutta la larghezza, senza il bordo di img-thumbnail */
    .sale .sale-card > .row {
        margin: 0;
    }

        .sale .sale-card > .row > [class*="col-"] {
            padding: 0;
        }

    .sale .sale-card .carousel-item.img-thumbnail {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: var(--bg-soft, #f4f5f8);
    }

    .sale .sale-card .carousel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0 !important;
    }

    .sale .sale-card .carousel img[src$="no_photo.svg"] {
        object-fit: contain;
        padding: 1.5rem;
    }

    /* frecce del carosello: discrete, visibili solo al passaggio */
    .sale .sale-card .carousel-control-prev,
    .sale .sale-card .carousel-control-next {
        top: 50%;
        height: 2.2rem;
        width: 2.2rem;
        margin: 0 .4rem;
        border-radius: 50%;
        background-color: rgba(21, 26, 45, .55);
        opacity: 0;
        transform: translateY(-50%);
        transition: opacity .15s ease;
    }

    .sale .sale-card:hover .carousel-control-prev,
    .sale .sale-card:hover .carousel-control-next {
        opacity: .9;
    }

    /* categoria: etichetta in alto a sinistra */
    .sale .sale-card .categoryBox {
        top: .6rem;
        left: .6rem;
        margin: 0;
        max-width: calc(100% - 1.2rem);
        padding: .2rem .65rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 1px 4px rgba(21, 26, 45, .15);
        font-size: .7rem;
        letter-spacing: .03em;
        color: var(--accent-dark, #0f5f86);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .sale .sale-card .categoryBox a {
            color: var(--accent-dark, #0f5f86);
            font-style: normal;
        }

        .sale .sale-card .categoryBox i {
            width: auto;
            font-size: .8rem;
            margin-right: .15rem;
            color: var(--accent, #1478a6);
        }

    /* prezzo in Happycoin: pillola in basso a destra */
    .sale .sale-card .happyBox {
        right: .6rem;
        bottom: .6rem;
        padding: .25rem .6rem .25rem .3rem;
        border-radius: 999px;
        background: var(--accent-dark, #0f5f86);
        box-shadow: 0 2px 8px rgba(21, 26, 45, .3);
    }

        .sale .sale-card .happyBox:empty {
            display: none;
        }

        .sale .sale-card .happyBox .fas {
            width: auto;
        }

        .sale .sale-card .happyBox span:first-child {
            border: 0;
            background: transparent;
        }

        .sale .sale-card .happyBox .happy {
            font-style: normal;
            font-size: 1rem;
            color: #fff;
        }

    /* titolo e valutazione */
    .sale .sale-card .details {
        padding: .85rem .9rem 0;
    }

        .sale .sale-card .details > [class*="col-"] {
            padding: 0;
        }

    .sale .sale-card .title {
        margin: 0;
    }

        .sale .sale-card .title a, .sale .sale-card .title a:hover {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            min-height: 0;
            font-size: 1rem;
            line-height: 1.3;
            text-transform: none;
            color: var(--ink, #151a2d);
        }

        .sale .sale-card .title a:hover {
            color: var(--accent-dark, #0f5f86);
        }

    .sale .sale-card .feedback {
        margin: 0 0 .5rem;
        font-size: .8rem;
        color: var(--ink-soft, #4a5178);
    }

        .sale .sale-card .feedback .fas {
            width: auto;
            font-size: .85rem;
            margin-right: .2rem;
        }

    /* azioni: acquisto a tutta larghezza, le altre affiancate */
    .sale .sale-card > .row:last-child {
        margin-top: auto;
    }

    .sale .sale-card footer {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        padding: 0 .9rem .9rem;
    }

        .sale .sale-card footer .row {
            display: contents;
        }

        .sale .sale-card footer [class*="col-"] {
            flex: 1 1 auto;
            width: auto;
            max-width: none;
            padding: 0;
        }

        .sale .sale-card footer .row:first-child [class*="col-"] {
            flex-basis: 100%;
        }

        .sale .sale-card footer .btn {
            display: block;
            width: 100%;
            margin: 0 !important;
            padding: .4rem .7rem;
            border-radius: 999px;
            font-size: .8rem;
        }

        .sale .sale-card footer .btn .fas, .sale .sale-card footer .btn .far {
            width: auto;
            font-size: .85rem;
        }

        .sale .sale-card footer .btn-primary {
            background-color: var(--accent, #1478a6) !important;
            border-color: var(--accent, #1478a6);
            color: #fff !important;
        }

            .sale .sale-card footer .btn-primary:hover {
                background-color: var(--accent-dark, #0f5f86) !important;
                border-color: var(--accent-dark, #0f5f86);
            }

        .sale .sale-card footer .btn-success {
            background-color: var(--accent-soft, #e8f5fb) !important;
            border-color: var(--accent-soft, #e8f5fb);
            color: var(--accent-dark, #0f5f86) !important;
        }

        .sale .sale-card footer .btn-danger.wish {
            background-color: #fff !important;
            border-color: var(--border, #e2e4ec);
            color: #b83a4b !important;
        }

        .sale .sale-card footer .btn-secondary, .sale .sale-card footer .btn-dark {
            background-color: var(--bg-soft, #f4f5f8) !important;
            border-color: var(--border, #e2e4ec);
            color: var(--ink, #151a2d) !important;
        }

/* azioni del venditore (Modifica, Elimina, Promuovi, Abilita...): due per riga, il QR a tutta larghezza.
   Il selettore ripete .row per prevalere sulla regola "primo row a tutta larghezza" dell'acquisto */
.sale .sale-card footer .row [class*="col-"]:has(.editSell, .deleteSell, .promoteSell, .enableSell, .unblock, .make-offer) {
    flex: 1 1 calc(50% - .4rem);
    min-width: 8rem;
}

.sale .sale-card footer .row [class*="col-"]:has(.inPersonQr) {
    flex-basis: 100%;
}

/* vendite e acquisti completati: dati dell'acquisto o dell'acquirente */
.sale .sale-card footer .sale-meta {
    flex: 1 1 100%;
    padding-top: .65rem;
    border-top: 1px solid var(--border, #e2e4ec);
}

    .sale .sale-card footer .sale-meta h5 {
        margin: 0 0 .35rem;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--ink-soft, #4a5178);
    }

    .sale .sale-card footer .sale-meta p {
        margin: 0 0 .4rem;
        font-size: .85rem;
        color: var(--ink, #151a2d);
    }

    .sale .sale-card footer .sale-meta .fas, .sale .sale-card footer .sale-meta .far {
        width: auto;
        margin-right: .25rem;
        color: var(--accent, #1478a6);
    }

.sale .sale-card .sale-meta__badge {
    display: inline-block;
    padding: .1rem .6rem;
    border-radius: 999px;
    background: var(--accent-soft, #e8f5fb);
    color: var(--accent-dark, #0f5f86);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.sale .sale-card footer .sale-meta .btn-warning {
    background-color: #fff !important;
    border: 2px solid #e0a800;
    color: var(--ink, #151a2d) !important;
}

.sale .sale-card footer .sale-meta .btn-outline-primary {
    background-color: #fff !important;
    border-color: var(--accent, #1478a6);
    color: var(--accent-dark, #0f5f86) !important;
}

@media (prefers-reduced-motion: reduce) {
    .sale .sale-card, .sale .sale-card .carousel-control-prev, .sale .sale-card .carousel-control-next {
        transition: none;
    }

        .sale .sale-card:hover {
            transform: none;
        }
}

/* ---------- Schede degli annunci in tutte le ricerche: piu' aria tra un box e l'altro ---------- */
#results .gridData, #grid {
    margin-left: -.9rem;
    margin-right: -.9rem;
}

    #results .gridData > .sale, #grid > .sale {
        padding-left: .9rem;
        padding-right: .9rem;
        margin-bottom: .6rem;
    }

/* pagina Vendite: i pulsanti sono figli diretti del footer (senza colonne) */
.sale .sale-card footer > .btn.editSell,
.sale .sale-card footer > .btn.deleteSell,
.sale .sale-card footer > .btn.enableSell,
.sale .sale-card footer > .btn.unblock {
    flex: 1 1 calc(50% - .4rem);
    min-width: 8rem;
}

.sale .sale-card footer > .btn.make-offer,
.sale .sale-card footer > .row .make-offer {
    flex-basis: 100%;
}

/* ---------- Vetrina dei gadget (GadgetShowcase): sopra gli annunci della home e nel crowdfunding ---------- */
.gadget-card .card-img-top {
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--sale-photo-bg, #f4f6f8);
}

.gadget-photo {
    object-fit: contain;
    background: var(--sale-photo-bg, #f4f6f8);
}