/**
 * 3D Ricambi - Componenti Assistenza v2
 * Con integrazione WooCommerce prodotti
 */

:root {
    --assistenza-primary: #2563eb;
    --assistenza-primary-dark: #1d4ed8;
    --assistenza-success: #16a34a;
    --assistenza-warning: #f59e0b;
    --assistenza-danger: #dc2626;
    --assistenza-info: #0891b2;
    --assistenza-gray-50: #f9fafb;
    --assistenza-gray-100: #f3f4f6;
    --assistenza-gray-200: #e5e7eb;
    --assistenza-gray-300: #d1d5db;
    --assistenza-gray-500: #6b7280;
    --assistenza-gray-700: #374151;
    --assistenza-gray-900: #111827;
    --assistenza-radius: 8px;
    --assistenza-shadow: 0 1px 3px rgba(0,0,0,0.1);
    --assistenza-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --assistenza-shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
}

/* ============================================
   1. TABELLA CODICI ERRORE
   ============================================ */
.assistenza-errori-container {
    margin: 1.5rem 0;
}

.assistenza-errori-titolo {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--assistenza-gray-900);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--assistenza-primary);
}

.assistenza-errori-lista {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.assistenza-errore-card {
    background: var(--assistenza-gray-50);
    border: 1px solid var(--assistenza-gray-200);
    border-radius: var(--assistenza-radius);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.assistenza-errore-card:hover {
    box-shadow: var(--assistenza-shadow-md);
}

.errore-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: white;
    border-bottom: 1px solid var(--assistenza-gray-200);
}

.errore-codice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 0.25rem 0.75rem;
    background: var(--assistenza-danger);
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 4px;
    font-family: monospace;
}

.errore-descrizione {
    font-weight: 500;
    color: var(--assistenza-gray-900);
}

.errore-body {
    padding: 0.75rem 1rem;
}

.errore-riga {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.errore-riga:last-child {
    margin-bottom: 0;
}

.errore-label {
    font-weight: 600;
    color: var(--assistenza-gray-700);
    min-width: 70px;
}

.errore-valore {
    color: var(--assistenza-gray-700);
    flex: 1;
}

/* ============================================
   2. TABELLA RICAMBI CON PRODOTTI
   ============================================ */
.assistenza-ricambi-container {
    margin: 1.5rem 0;
    background: var(--assistenza-gray-50);
    border-radius: var(--assistenza-radius);
    padding: 1rem;
}

.assistenza-ricambi-titolo {
    font-size: 1rem;
    font-weight: 600;
    color: var(--assistenza-gray-900);
    margin-bottom: 0.75rem;
}

.assistenza-ricambi-lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.assistenza-ricambio-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: white;
    border-radius: 6px;
    border: 1px solid var(--assistenza-gray-200);
    transition: all 0.2s ease;
}

.assistenza-ricambio-item.has-product {
    border-color: var(--assistenza-success);
    border-left: 3px solid var(--assistenza-success);
}

.assistenza-ricambio-item.has-product:hover {
    box-shadow: var(--assistenza-shadow-md);
}

.ricambio-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

/* Codice senza link */
.ricambio-codice {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--assistenza-gray-500);
    background: var(--assistenza-gray-100);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    display: inline-block;
    width: fit-content;
}

/* Codice con link prodotto */
.ricambio-codice-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    width: fit-content;
}

.ricambio-codice-link .ricambio-codice {
    background: var(--assistenza-success);
    color: white;
    transition: background 0.2s ease;
}

.ricambio-codice-link:hover .ricambio-codice {
    background: var(--assistenza-primary);
}

.ricambio-disponibile {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--assistenza-success);
    background: #dcfce7;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
}

.ricambio-nome {
    font-weight: 500;
    color: var(--assistenza-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Azione / Prezzo */
.ricambio-azione {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}

.ricambio-prezzo-reale {
    font-weight: 600;
    color: var(--assistenza-gray-900);
}

.ricambio-prezzo-reale del {
    color: var(--assistenza-gray-500);
    font-weight: 400;
    font-size: 0.875em;
}

.ricambio-prezzo-reale ins {
    text-decoration: none;
    color: var(--assistenza-danger);
}

.ricambio-prezzo-indicativo {
    font-size: 0.875rem;
    color: var(--assistenza-gray-500);
}

.prezzo-label {
    font-size: 0.75rem;
}

.ricambio-acquista-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: var(--assistenza-success);
    color: white;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.ricambio-acquista-btn:hover {
    background: #15803d;
    color: white;
}

/* ============================================
   PRODUCT PREVIEW POPUP
   ============================================ */
.ricambio-preview {
    display: none;
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    padding: 0.5rem;
}

.preview-inner {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: var(--assistenza-radius);
    box-shadow: var(--assistenza-shadow-lg);
    border: 1px solid var(--assistenza-gray-200);
}

.preview-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 4px;
    background: var(--assistenza-gray-50);
    flex-shrink: 0;
}

.preview-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.preview-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--assistenza-gray-900);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.preview-price {
    font-weight: 700;
    color: var(--assistenza-primary);
}

.preview-price del {
    color: var(--assistenza-gray-500);
    font-weight: 400;
}

.preview-price ins {
    text-decoration: none;
}

.preview-stock {
    font-size: 0.75rem;
    font-weight: 500;
}

.preview-stock.in-stock {
    color: var(--assistenza-success);
}

.preview-stock.out-of-stock {
    color: var(--assistenza-danger);
}

.preview-cta {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    padding: 0.5rem 1rem;
    background: var(--assistenza-primary);
    color: white;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 4px;
    text-align: center;
    justify-content: center;
}

.preview-cta:hover {
    background: var(--assistenza-primary-dark);
    color: white;
}

/* Show preview on hover (desktop) */
@media (min-width: 769px) {
    .assistenza-ricambio-item.has-product:hover .ricambio-preview {
        display: block;
    }
}

/* Show preview on click (mobile) */
.assistenza-ricambio-item.has-product.preview-open .ricambio-preview {
    display: block;
}

/* ============================================
   3. BOX DIAGNOSTICA / SINTOMI
   ============================================ */
.assistenza-diagnostica {
    margin: 1.5rem 0;
    border-radius: var(--assistenza-radius);
    overflow: hidden;
}

.assistenza-diagnostica--default {
    background: var(--assistenza-gray-50);
    border: 1px solid var(--assistenza-gray-200);
}

.assistenza-diagnostica--warning {
    background: #fffbeb;
    border: 1px solid #fcd34d;
}

.assistenza-diagnostica--success {
    background: #f0fdf4;
    border: 1px solid #86efac;
}

.assistenza-diagnostica--info {
    background: #ecfeff;
    border: 1px solid #67e8f9;
}

.diagnostica-titolo {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    margin: 0;
    border-bottom: 1px solid inherit;
}

.assistenza-diagnostica--default .diagnostica-titolo {
    background: var(--assistenza-gray-100);
    color: var(--assistenza-gray-900);
}

.assistenza-diagnostica--warning .diagnostica-titolo {
    background: #fef3c7;
    color: #92400e;
}

.assistenza-diagnostica--success .diagnostica-titolo {
    background: #dcfce7;
    color: #166534;
}

.assistenza-diagnostica--info .diagnostica-titolo {
    background: #cffafe;
    color: #0e7490;
}

.diagnostica-contenuto {
    padding: 1rem;
}

.diagnostica-sintomo {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.diagnostica-sintomo:last-child {
    margin-bottom: 0;
}

.sintomo-icona {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
}

.sintomo-icona--check {
    background: var(--assistenza-success);
    color: white;
}

.sintomo-icona--alert {
    background: var(--assistenza-warning);
    color: white;
}

.sintomo-icona--info {
    background: var(--assistenza-info);
    color: white;
}

.sintomo-icona--x {
    background: var(--assistenza-danger);
    color: white;
}

.sintomo-testo {
    color: var(--assistenza-gray-700);
    line-height: 1.5;
}

/* ============================================
   4. DIFFICOLTA' RIPARAZIONE
   ============================================ */
.assistenza-difficolta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--assistenza-gray-50);
    border-radius: var(--assistenza-radius);
    margin: 0.75rem 0;
}

.difficolta-label {
    font-weight: 500;
    color: var(--assistenza-gray-700);
    font-size: 0.875rem;
}

.difficolta-stelle {
    display: flex;
    gap: 0.125rem;
}

.difficolta-stella {
    font-size: 1rem;
}

.stella-piena {
    color: var(--assistenza-warning);
}

.stella-vuota {
    color: var(--assistenza-gray-300);
}

.difficolta-testo {
    font-size: 0.875rem;
    color: var(--assistenza-gray-500);
    font-style: italic;
}

.difficolta-livello-1 .stella-piena,
.difficolta-livello-2 .stella-piena {
    color: var(--assistenza-success);
}

.difficolta-livello-4 .stella-piena,
.difficolta-livello-5 .stella-piena {
    color: var(--assistenza-danger);
}

/* ============================================
   5. ULTIMO AGGIORNAMENTO
   ============================================ */
.assistenza-aggiornamento {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    margin-top: 2rem;
    border-top: 1px solid var(--assistenza-gray-200);
    font-size: 0.875rem;
    color: var(--assistenza-gray-500);
}

.aggiornamento-label {
    font-style: italic;
}

.aggiornamento-data {
    font-weight: 500;
    color: var(--assistenza-gray-700);
}

/* ============================================
   6. TABELLA DIAGNOSTICA RAPIDA
   ============================================ */
.assistenza-tabella-diagnostica {
    margin: 1.5rem 0;
}

.tabella-diagnostica-titolo {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--assistenza-gray-900);
    margin-bottom: 1rem;
}

.tabella-diagnostica-lista {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.riga-diagnostica {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--assistenza-gray-50);
    border-radius: var(--assistenza-radius);
    border-left: 4px solid var(--assistenza-primary);
}

.riga-diagnostica > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.rd-label {
    font-weight: 600;
    color: var(--assistenza-gray-700);
    min-width: 70px;
}

.riga-diagnostica-ricambio {
    padding-top: 0.5rem;
    border-top: 1px dashed var(--assistenza-gray-300);
    margin-top: 0.25rem;
}

@media (min-width: 768px) {
    .riga-diagnostica {
        grid-template-columns: 1.5fr 1fr 1.5fr 1fr;
        align-items: center;
    }

    .riga-diagnostica > div {
        flex-direction: column;
        gap: 0.125rem;
    }

    .riga-diagnostica-ricambio {
        padding-top: 0;
        border-top: none;
        margin-top: 0;
    }
}

/* ============================================
   7. FAQ ACCORDION
   ============================================ */
.assistenza-faq {
    margin: 1.5rem 0;
}

.faq-item {
    margin-bottom: 0.5rem;
    border: 1px solid var(--assistenza-gray-200);
    border-radius: var(--assistenza-radius);
    overflow: hidden;
}

.faq-domanda {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: white;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    color: var(--assistenza-gray-900);
    transition: background-color 0.2s ease;
}

.faq-domanda:hover {
    background: var(--assistenza-gray-50);
}

.faq-domanda[aria-expanded="true"] {
    background: var(--assistenza-gray-50);
    border-bottom: 1px solid var(--assistenza-gray-200);
}

.faq-icona {
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--assistenza-primary);
    transition: transform 0.2s ease;
}

.faq-domanda[aria-expanded="true"] .faq-icona {
    transform: rotate(45deg);
}

.faq-risposta {
    display: none;
    padding: 1rem;
    background: var(--assistenza-gray-50);
}

.faq-risposta.is-open {
    display: block;
}

.faq-risposta p {
    margin: 0 0 0.75rem 0;
    color: var(--assistenza-gray-700);
    line-height: 1.6;
}

.faq-risposta p:last-child {
    margin-bottom: 0;
}

/* ============================================
   8. CTA RICAMBIO
   ============================================ */
.assistenza-cta-ricambio {
    margin: 1.5rem 0;
}

.cta-ricambio-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--assistenza-primary);
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--assistenza-radius);
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.cta-ricambio-button:hover {
    background: var(--assistenza-primary-dark);
    color: white;
    transform: translateY(-1px);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
    .errore-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .assistenza-ricambio-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .ricambio-azione {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .assistenza-difficolta {
        flex-wrap: wrap;
    }

    .preview-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .preview-image {
        width: 100px;
        height: 100px;
    }
}

/* ============================================
   PRINT
   ============================================ */
@media print {
    .assistenza-errore-card,
    .assistenza-ricambio-item,
    .riga-diagnostica,
    .faq-item {
        break-inside: avoid;
    }

    .faq-risposta {
        display: block !important;
    }

    .cta-ricambio-button,
    .ricambio-acquista-btn,
    .ricambio-preview {
        display: none;
    }
}