/* ==========================================================================
   DL Social Share - Stili professionali (PrestaShop 8.x)
   ========================================================================== */

.dlss-wrapper {
    --dlss-fb: #1877f2;
    --dlss-wa: #25d366;
    --dlss-ig-1: #f09433;
    --dlss-ig-2: #e6683c;
    --dlss-ig-3: #dc2743;
    --dlss-ig-4: #cc2366;
    --dlss-ig-5: #bc1888;
    --dlss-tw: #000000;
    --dlss-tg: #0088cc;
    --dlss-em: #607d8b;
    --dlss-cp: #495057;
    --dlss-mono: #2c3e50;

    --dlss-radius: 10px;
    --dlss-size: 44px;
    --dlss-icon-size: 18px;
    --dlss-gap: 10px;
    --dlss-text: #2c3e50;
    --dlss-bg: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    --dlss-border: #e9ecef;

    box-sizing: border-box;
    margin: 22px 0;
    padding: 18px 20px;
    background: var(--dlss-bg);
    border: 1px solid var(--dlss-border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    font-family: inherit;
}

.dlss-wrapper *,
.dlss-wrapper *::before,
.dlss-wrapper *::after {
    box-sizing: border-box;
}

/* --- Dimensioni ---------------------------------------------------------- */
.dlss-wrapper.dlss-size-small  { --dlss-size: 34px; --dlss-icon-size: 15px; --dlss-gap: 8px; }
.dlss-wrapper.dlss-size-medium { --dlss-size: 44px; --dlss-icon-size: 18px; --dlss-gap: 10px; }
.dlss-wrapper.dlss-size-large  { --dlss-size: 54px; --dlss-icon-size: 22px; --dlss-gap: 12px; }

/* --- Stile bordi --------------------------------------------------------- */
.dlss-wrapper.dlss-style-rounded { --dlss-radius: 10px; }
.dlss-wrapper.dlss-style-circle  { --dlss-radius: 50%; }
.dlss-wrapper.dlss-style-square  { --dlss-radius: 0; }
.dlss-wrapper.dlss-style-flat    { --dlss-radius: 4px; }

/* --- Titolo -------------------------------------------------------------- */
.dlss-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px 0;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--dlss-text);
    letter-spacing: 0.2px;
    line-height: 1.3;
}

.dlss-title-icon {
    width: 18px;
    height: 18px;
    color: #6c757d;
    flex-shrink: 0;
}

/* --- Lista pulsanti ------------------------------------------------------ */
.dlss-buttons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--dlss-gap);
}

.dlss-buttons li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dlss-buttons li::before {
    content: none !important;
}

/* --- Pulsante base ------------------------------------------------------- */
.dlss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: var(--dlss-size);
    height: var(--dlss-size);
    padding: 0 14px;
    border-radius: var(--dlss-radius);
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    border: none;
    background: var(--dlss-mono);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.dlss-btn:hover,
.dlss-btn:focus {
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    outline: none;
}

.dlss-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.4), 0 6px 16px rgba(0, 0, 0, 0.18);
}

.dlss-wrapper.dlss-animated .dlss-btn:hover {
    transform: translateY(-2px) scale(1.04);
}

.dlss-wrapper.dlss-animated .dlss-btn:active {
    transform: translateY(0) scale(0.97);
}

.dlss-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dlss-icon-size);
    height: var(--dlss-icon-size);
    flex-shrink: 0;
}

.dlss-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.dlss-label {
    font-size: 13px;
    white-space: nowrap;
    line-height: 1;
}

/* Solo icona, senza etichetta */
.dlss-wrapper:not(.dlss-with-label) .dlss-btn {
    padding: 0;
    width: var(--dlss-size);
}

/* --- Modalità colore: brand --------------------------------------------- */
.dlss-wrapper.dlss-color-brand .dlss-facebook  { background: var(--dlss-fb); }
.dlss-wrapper.dlss-color-brand .dlss-whatsapp  { background: var(--dlss-wa); }
.dlss-wrapper.dlss-color-brand .dlss-instagram {
    background: linear-gradient(45deg,
        var(--dlss-ig-1) 0%,
        var(--dlss-ig-2) 25%,
        var(--dlss-ig-3) 50%,
        var(--dlss-ig-4) 75%,
        var(--dlss-ig-5) 100%);
}
.dlss-wrapper.dlss-color-brand .dlss-twitter   { background: var(--dlss-tw); }
.dlss-wrapper.dlss-color-brand .dlss-telegram  { background: var(--dlss-tg); }
.dlss-wrapper.dlss-color-brand .dlss-email     { background: var(--dlss-em); }
.dlss-wrapper.dlss-color-brand .dlss-copylink  { background: var(--dlss-cp); }

/* --- Modalità colore: monocromatico ------------------------------------- */
.dlss-wrapper.dlss-color-mono .dlss-btn {
    background: var(--dlss-mono);
}
.dlss-wrapper.dlss-color-mono .dlss-btn:hover {
    filter: brightness(1.18);
}

/* --- Modalità colore: personalizzato ------------------------------------ */
.dlss-wrapper.dlss-color-custom .dlss-btn {
    background: var(--dlss-custom, #3498db);
}
.dlss-wrapper.dlss-color-custom .dlss-btn:hover {
    filter: brightness(1.1);
}

/* --- Toast notifica ------------------------------------------------------ */
.dlss-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1f2937;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 9999;
    max-width: 90vw;
    text-align: center;
}

.dlss-toast.dlss-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 575px) {
    .dlss-wrapper {
        padding: 14px 14px;
        margin: 18px 0;
    }
    .dlss-wrapper.dlss-with-label .dlss-label {
        display: none;
    }
    .dlss-wrapper.dlss-with-label .dlss-btn {
        padding: 0;
        width: var(--dlss-size);
    }
}

/* --- Riduzione movimento (accessibilità) -------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .dlss-btn,
    .dlss-toast {
        transition: none !important;
    }
    .dlss-wrapper.dlss-animated .dlss-btn:hover {
        transform: none;
    }
}

/* --- Dark mode (compatibilità con temi scuri) --------------------------- */
@media (prefers-color-scheme: dark) {
    .dlss-wrapper {
        --dlss-bg: linear-gradient(135deg, #1f2937 0%, #111827 100%);
        --dlss-border: #374151;
        --dlss-text: #e5e7eb;
    }
    .dlss-title-icon {
        color: #9ca3af;
    }
}