/* ==========================================================================
   MF COUNTER - ARCHITETTURA STRUTTURALE STRUTTURA BASE
   ========================================================================== */
.mf-counter-wrapper {
    display: flex;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    gap: 15px;
}

.mf-counter-number,
.mf-counter-label {
    margin: 0;
    box-sizing: border-box;
    width: 100%;
}

.mf-counter-number {
    line-height: 1;
    display: block !important; 
    text-align: inherit; 
}

.mf-counter-number-value {
    display: inline-block !important;
}

.mf-counter-suffix {
    display: inline-block !important;
    margin-left: 2px;
}

.mf-counter-label {
    font-weight: 500;
    line-height: 1.4;
    display: block !important;
    text-align: inherit; 
}

.mf-counter-wrapper .rich-text {
    display: inline-block;
    min-width: 10px;
}

/* ==========================================================================
   1. LAYOUT VERTICALE: NUMERO SOPRA / TESTO SOTTO
   ========================================================================== */
.mf-layout-number-top {
    display: flex !important;
    flex-direction: column !important;
    width: fit-content !important; 
    margin: 0 auto !important;     
    box-sizing: border-box;
}

.mf-layout-number-top .mf-counter-number {
    width: 100% !important;
    margin-bottom: 8px;
    display: flex !important;
    align-items: baseline;
    gap: 2px;
}

.mf-layout-number-top .mf-counter-label {
    width: 100% !important;
    display: block !important;
}

/* Allineamento: Centro */
.mf-counter-wrapper.mf-layout-number-top[style*="text-align: center"],
.mf-counter-wrapper.mf-layout-number-top[style*="text-align:center"] {
    align-items: center !important; 
    text-align: center !important;
}
.mf-layout-number-top[style*="text-align: center"] .mf-counter-number,
.mf-layout-number-top[style*="text-align:center"] .mf-counter-number { 
    justify-content: center !important; 
}
.mf-layout-number-top[style*="text-align: center"] .mf-counter-label,
.mf-layout-number-top[style*="text-align:center"] .mf-counter-label { 
    text-align: center !important; 
}

/* Allineamento: Sinistra */
.mf-counter-wrapper.mf-layout-number-top[style*="text-align: left"],
.mf-counter-wrapper.mf-layout-number-top[style*="text-align:left"] {
    align-items: flex-start !important;
    text-align: left !important;
}
.mf-layout-number-top[style*="text-align: left"] .mf-counter-number,
.mf-layout-number-top[style*="text-align:left"] .mf-counter-number { 
    justify-content: flex-start !important; 
}
.mf-layout-number-top[style*="text-align: left"] .mf-counter-label,
.mf-layout-number-top[style*="text-align:left"] .mf-counter-label { 
    text-align: left !important;
}

/* Allineamento: Destra */
.mf-counter-wrapper.mf-layout-number-top[style*="text-align: right"],
.mf-counter-wrapper.mf-layout-number-top[style*="text-align:right"] {
    align-items: flex-end !important;
    text-align: right !important;
}
.mf-layout-number-top[style*="text-align: right"] .mf-counter-number,
.mf-layout-number-top[style*="text-align:right"] .mf-counter-number { 
    justify-content: flex-end !important; 
}
.mf-layout-number-top[style*="text-align: right"] .mf-counter-label,
.mf-layout-number-top[style*="text-align:right"] .mf-counter-label { 
    text-align: right !important;
}

/* ==========================================================================
   2. LAYOUT VERTICALE INVERTITO: TESTO SOPRA / NUMERO SOTTO
   ========================================================================== */
.mf-layout-number-bottom {
    display: flex !important;
    flex-direction: column-reverse !important;
    width: fit-content !important; 
    margin: 0 auto !important;     
    box-sizing: border-box;
}

.mf-layout-number-bottom .mf-counter-number,
.mf-layout-number-bottom .mf-counter-label {
    width: 100% !important;
}

.mf-counter-wrapper.mf-layout-number-bottom[style*="text-align: center"] { align-items: center !important; }
.mf-layout-number-bottom[style*="text-align: center"] .mf-counter-number { justify-content: center !important; }
.mf-layout-number-bottom[style*="text-align: center"] .mf-counter-label { text-align: center !important; }

.mf-counter-wrapper.mf-layout-number-bottom[style*="text-align: left"] { align-items: flex-start !important; }
.mf-layout-number-bottom[style*="text-align: left"] .mf-counter-number { justify-content: flex-start !important; }
.mf-layout-number-bottom[style*="text-align: left"] .mf-counter-label { text-align: left !important; }

.mf-counter-wrapper.mf-layout-number-bottom[style*="text-align: right"] { align-items: flex-end !important; }
.mf-layout-number-bottom[style*="text-align: right"] .mf-counter-number { justify-content: flex-end !important; }
.mf-layout-number-bottom[style*="text-align: right"] .mf-counter-label { text-align: right !important; }

/* ==========================================================================
   3. LAYOUT ORIZZONTALE: NUMERO A SINISTRA / TESTO A DESTRA
   ========================================================================== */
.mf-layout-number-left {
    flex-direction: row !important;
    align-items: center !important;
}
.mf-layout-number-left .mf-counter-number { justify-content: flex-start !important; }

.mf-layout-number-left[style*="text-align: center"] { justify-content: center !important; }
.mf-layout-number-left[style*="text-align: center"] .mf-counter-label { text-align: left !important; }

.mf-layout-number-left[style*="text-align: left"] { justify-content: flex-start !important; }
.mf-layout-number-left[style*="text-align: left"] .mf-counter-label { text-align: left !important; }

.mf-layout-number-left[style*="text-align: right"] { justify-content: flex-end !important; }
.mf-layout-number-left[style*="text-align: right"] .mf-counter-label { text-align: left !important; }

/* ==========================================================================
   4. LAYOUT ORIZZONTALE INVERTITO: TESTO A SINISTRA / NUMERO A DESTRA
   ========================================================================== */
.mf-layout-number-right {
    flex-direction: row-reverse !important;
    align-items: center !important;
}
.mf-layout-number-right .mf-counter-number { justify-content: flex-start !important; }

.mf-counter-wrapper.mf-layout-number-right[style*="text-align: center"],
.mf-counter-wrapper.mf-layout-number-right[style*="text-align:center"] { 
    justify-content: center !important; 
}
.mf-layout-number-right[style*="text-align: center"] .mf-counter-label,
.mf-layout-number-right[style*="text-align:center"] .mf-counter-label { 
    text-align: center !important; 
}

.mf-counter-wrapper.mf-layout-number-right[style*="text-align: left"],
.mf-counter-wrapper.mf-layout-number-right[style*="text-align:left"] { 
    justify-content: flex-start !important; 
}
.mf-layout-number-right[style*="text-align: left"] .mf-counter-label,
.mf-layout-number-right[style*="text-align:left"] .mf-counter-label { 
    text-align: left !important; 
}

.mf-counter-wrapper.mf-layout-number-right[style*="text-align: right"],
.mf-counter-wrapper.mf-layout-number-right[style*="text-align:right"] { 
    justify-content: flex-end !important; 
}
.mf-layout-number-right[style*="text-align: right"] .mf-counter-label,
.mf-layout-number-right[style*="text-align:right"] .mf-counter-label { 
    text-align: right !important; 
}

/* ==========================================================================
   SISTEMAZIONI ED EDITING RENDERING BACKEND GUTENBERG
   ========================================================================== */
.mf-counter-wrapper .block-editor-rich-text,
.mf-counter-wrapper .rich-text {
    width: 100% !important;
}

.wp-block-mf-studio-counter .mf-counter-number,
.mf-counter-wrapper .mf-counter-number {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; 
    align-items: baseline !important;
}

.mf-counter-wrapper.mf-layout-number-top[style*="text-align: center"] .mf-counter-number,
.mf-counter-wrapper.mf-layout-number-top[style*="text-align:center"] .mf-counter-number {
    justify-content: center !important;
}

.mf-counter-wrapper.mf-layout-number-top[style*="text-align: right"] .mf-counter-number,
.mf-counter-wrapper.mf-layout-number-top[style*="text-align:right"] .mf-counter-number {
    justify-content: flex-end !important;
}

.mf-counter-wrapper.mf-layout-number-top[style*="text-align: left"] .mf-counter-number,
.mf-counter-wrapper.mf-layout-number-top[style*="text-align:left"] .mf-counter-number {
    justify-content: flex-start !important;
}

.mf-counter-number .block-editor-rich-text,
.mf-counter-number .rich-text {
    width: auto !important; 
    display: inline-block !important; 
    flex-grow: 0 !important; 
}

.mf-counter-number .block-editor-rich-text__editable {
    text-align: inherit !important;
}