/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~                     APPLE BUTTONS (UI KIT)                  ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* Contenitore per i pulsanti delle riparazioni (se presenti) */
.fault-buttons {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center; /* Centrati come il design Apple */
}

/* 1. STILE BASE (Condiviso)
 * Definisce la forma a pillola, il font e l'animazione */
.fault-buttons .btn,
.apple-load-more,
button.apple-load-more { /* Selettore rafforzato */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px; /* Più larghi per eleganza */
    border-radius: 980px; /* Pillola perfetta */
    
    /* Tipografia Apple */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 17px; /* Dimensione standard Apple body */
    font-weight: 500; /* Medium weight */
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    
    /* Transizioni fluide: specifica solo le proprietà animate per ottimizzare le performance */
    transition: background-color 0.3s cubic-bezier(0, 0, 0.5, 1), color 0.3s cubic-bezier(0, 0, 0.5, 1), box-shadow 0.3s cubic-bezier(0, 0, 0.5, 1), transform 0.3s cubic-bezier(0, 0, 0.5, 1), border-color 0.3s cubic-bezier(0, 0, 0.5, 1);
    border: 1px solid transparent;
}

/* Effetto "Click" tattile (rimpicciolisce leggermente) */
.fault-buttons .btn:active,
.apple-load-more:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
}

/* 2. VARIANTE PRIMARY (Blu Pieno)
 * Usata per le CTA principali o pulsanti attivi */
.fault-buttons .btn.btn--primary,
.apple-load-more.btn--primary {
    background-color: #0071e3;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3); /* Glow blu */
}

.fault-buttons .btn.btn--primary:hover,
.apple-load-more.btn--primary:hover {
    background-color: #0077ed; /* Leggermente più luminoso */
    box-shadow: 0 6px 16px rgba(0, 113, 227, 0.45);
    transform: translateY(-1px);
}

/* 3. VARIANTE SECONDARY / LOAD MORE (Grigio Soft)
 * Stile classico del tasto "Load More" o opzioni secondarie.
 * Parte grigio chiaro e diventa blu al passaggio del mouse. */
.fault-buttons .btn, /* Default se non ha classe primary */
.apple-load-more {
    background-color: rgba(0, 0, 0, 0.05); /* Grigio chiarissimo */
    color: #1d1d1f; /* Nero Apple */
    border-color: transparent;
}

.fault-buttons .btn:hover,
.apple-load-more:hover {
    background-color: rgba(0, 113, 227, 0.1); /* Tint blu molto leggero */
    color: #0071e3; /* Testo diventa blu */
    transform: translateY(-1px);
}

/* Focus state per accessibilità (Tastiera) */
.fault-buttons .btn:focus-visible,
.apple-load-more:focus-visible {
    outline: 2px solid #0071e3;
    outline-offset: 2px;
}

/* Mobile Optimization */
@media (max-width: 767px) {
    .apple-load-more {
        width: 100%; /* A tutta larghezza su mobile è più facile da premere */
        max-width: 300px; /* Ma non gigante */
        margin-left: auto;
        margin-right: auto;
        display: flex;
    }
}