/**
 * Stile Moderno ed Elegante - Content Font Size Resizer
 */

/* Contenitore principale: design a pillola */
.plg-font-resizer-container {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f4f7f9;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid #e1e8ed;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Posizionamento inline a destra (desktop) */
.plg-size-inline {
    float: right;
}

/* Versione Flottante con effetto Vetro (desktop+mobile quando selezionata da backend) */
.plg-size-floating {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    z-index: 10000;
}

/* Pulsanti: puliti, con icone testuali raffinate */
.plg-font-resizer-container button {
    background-color: transparent;
    color: #0054a6; /* Blu evangelo.info */
    border: none;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 44px;              /* target minimo touch */
    min-height: 36px;
    outline: none; /* gestito con :focus-visible */
}

/* Hover: contrasto invertito morbido */
.plg-font-resizer-container button:hover {
    background-color: #156980;
    color: #ffffff;
}

/* Focus visibile (accessibilità tastiera) */
.plg-font-resizer-container button:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 84, 166, 0.35);
}

/* Pulsante Reset: distinto da un tono neutro */
.plg-font-resizer-container .btn-size-reset {
    background-color: #e1e8ed;
    color: #546e7a;
}

.plg-font-resizer-container .btn-size-reset:hover,
.plg-font-resizer-container .btn-size-reset:focus-visible {
    background-color: #546e7a;
    color: #ffffff;
}

/* --- FEEDBACK HUD CENTRALE --- */
.plg-size-feedback {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 24px 40px;
    border-radius: 20px;
    font-size: 2.5rem;
    font-weight: 700;
    z-index: 10001;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.plg-size-feedback.is-visible {
    opacity: 1;
}

/* HUD: descrizione */
.plg-size-feedback::after {
    content: "Dimensione Testo";
    font-size: 0.9rem;
    margin-top: 8px;
    font-weight: 400;
    opacity: 0.7;
}

/* Riduzione motion per utenti sensibili */
@media (prefers-reduced-motion: reduce) {
    .plg-size-feedback {
        transition: none;
    }
}

/* =============================================================
   WRAPPER DEI CONTENUTI (SOLUZIONE A)
   — NON deve alterare il layout del template
   — Usa display: contents per NON creare un box
   — Le variabili CSS vengono propagate ai figli
   — ⚠️ Nessun font-size di default (allo 0% non tocchiamo nulla)
   ============================================================= */
.plg-size-wrapper {
    display: contents !important; /* non altera margini/line-box del template */
    --plg-scale: 1;
    transition: none;
}

/* Applica il font-size SOLO quando si sta scalando (≠ 100%) */
.plg-size-wrapper.is-scaled {
    font-size: calc(100% * var(--plg-scale));
}

/* Wrapper esterno opzionale */
.plg-size-outer-wrapper {
    /* Esempi di layout utili: scegline uno o personalizza */
    /* display: flex; */
    /* align-items: flex-start; */
    /* gap: 12px; */
}

/* Esempio di controllo sticky entro il parent:
.plg-size-outer-wrapper .plg-font-resizer-container {
    position: sticky;
    top: 16px;
}
*/

/* =============================================================
   ✅ AUTO-FLOATING SU MOBILE
   - Quando il backend è su "inline", sotto 768px il controllo
     diventa floating (fixed bottom-right) automaticamente e si
	 posiziona al centro left: 50%; transform:translateX(-50%);.
   - Non tocca il caso già "floating".
   - Aumenta leggermente i target touch e riduce l'ingombro.
   ============================================================= */
@media (max-width: 768px) {
    /* Trasforma l'inline in floating su mobile */
    .plg-size-inline {
        float: none !important;      /* rimuove il float */
        position: fixed;
        left: 50%;
		transform:translateX(-50%);
        bottom: 16px;
        z-index: 10000;
        background: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        padding: 6px !important;
        border-radius: 14px !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    }

    /* Bottoni: più “tap-friendly” su mobile */
    .plg-font-resizer-container button {
        padding: 8px 12px;
        min-width: 40px;
        min-height: 40px;       /* 40-44px: target tattile confortevole */
        font-size: 16px;        /* leggibilità su schermi piccoli */
    }
}