/* Estils per al frontend - Icones a les pestanyes GutenBee */

/* Contenidor de la icona - sobre el títol, centrat */
.marbrava-tab-icon-wrapper {
    display: block;
    text-align: center;
    margin-bottom: 10px;
}

/* Mida normal de la icona */
.marbrava-tab-icon {
    display: inline-block;
    opacity: 0.9;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.marbrava-tab-icon.marbrava-icon-normal {
    width: 36px;
    height: 36px;
}

/* Mida gran de la icona */
.marbrava-tab-icon.marbrava-icon-large {
    width: 48px;
    height: 48px;
}

/* Pestanya amb icona - layout vertical */
.wp-block-gutenbee-tabs-nav-item.has-marbrava-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 16px;
}

/* Hover effect */
.wp-block-gutenbee-tabs-nav-item:hover .marbrava-tab-icon {
    opacity: 1;
    transform: scale(1.1);
}

/* Pestanya activa */
.wp-block-gutenbee-tabs-nav-item-active .marbrava-tab-icon {
    opacity: 1;
}

/* Bloc amb icones - ajustar navegació */
.wp-block-gutenbee-tabs.has-marbrava-icons .wp-block-gutenbee-tabs-nav {
    flex-wrap: wrap;
}

/* Responsive - tablet */
@media (max-width: 768px) {
    .marbrava-tab-icon {
        width: 28px;
        height: 28px;
    }
    
    .marbrava-tab-icon-wrapper {
        margin-bottom: 6px;
    }
}

/* Responsive - mòbil */
@media (max-width: 575px) {
    .marbrava-tab-icon {
        width: 24px;
        height: 24px;
    }
    
    .marbrava-tab-icon-wrapper {
        margin-bottom: 4px;
    }
    
    .wp-block-gutenbee-tabs-nav-item.has-marbrava-icon {
        padding: 10px 12px;
    }
}