/**
 * Global Icon Styling
 * CSS variables for consistent icon styling across all modules
 */

/* CSS variables are set dynamically via PHP in wp_head */

/* Global CSS icon base styles */
.zvbb-icon {
    width: var(--zvbb-icon-size);
    height: var(--zvbb-icon-size);
    background: var(--zvbb-icon-bg-color);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    transition: all 0.2s ease;
}

/* CSS Icon Components */
.zvbb-icon::before,
.zvbb-icon::after {
    content: '';
    position: absolute;
    background: var(--zvbb-icon-color);
    border-radius: calc(var(--zvbb-icon-thickness) / 2);
}

/* Specific CSS Icons */
/* Menu Icon (3 horizontal lines) */
.zvbb-icon--menu::before {
    width: calc(var(--zvbb-icon-size) * 0.6);
    height: var(--zvbb-icon-thickness);
    top: calc(var(--zvbb-icon-size) * 0.3);
    left: 50%;
    transform: translateX(-50%);
}

.zvbb-icon--menu::after {
    width: calc(var(--zvbb-icon-size) * 0.6);
    height: var(--zvbb-icon-thickness);
    top: calc(var(--zvbb-icon-size) * 0.5);
    left: 50%;
    transform: translateX(-50%);
}

.zvbb-icon--menu {
    position: relative;
}

.zvbb-icon--menu::before {
    content: '';
    position: absolute;
    background: var(--zvbb-icon-color);
    border-radius: calc(var(--zvbb-icon-thickness) / 2);
}

.zvbb-icon--menu::after {
    content: '';
    position: absolute;
    background: var(--zvbb-icon-color);
    border-radius: calc(var(--zvbb-icon-thickness) / 2);
}

/* Plus Icon */
.zvbb-icon--plus::before {
    width: calc(var(--zvbb-icon-size) * 0.6);
    height: var(--zvbb-icon-thickness);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.zvbb-icon--plus::after {
    width: var(--zvbb-icon-thickness);
    height: calc(var(--zvbb-icon-size) * 0.6);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Gallery Icon (4 squares) */
.zvbb-icon--gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--zvbb-icon-size) * 0.1);
    padding: calc(var(--zvbb-icon-size) * 0.1);
}

.zvbb-icon--gallery::before,
.zvbb-icon--gallery::after {
    background: var(--zvbb-icon-color);
    border-radius: calc(var(--zvbb-icon-size) * 0.05);
}

.zvbb-icon--gallery::before {
    content: '';
    grid-column: 1;
    grid-row: 1;
}

.zvbb-icon--gallery::after {
    content: '';
    grid-column: 2;
    grid-row: 1;
}

/* Specific icon classes for different modules */
.zvbb-accordion .zvafbb-accordion__icon {
    width: var(--zvbb-icon-size);
    height: var(--zvbb-icon-size);
    background: var(--zvbb-icon-bg-color);
    border-radius: 4px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile menu icons (when using global settings) */
.zvbb-mobile-menu .zvbb-icon {
    width: var(--zvbb-icon-size);
    height: var(--zvbb-icon-size);
    background: var(--zvbb-icon-bg-color);
    border-radius: 4px;
    position: relative;
    transition: all 0.2s ease;
}

/* Photo gallery icons (when using global settings) */
.zvbb-photo-gallery .zvbb-icon {
    width: var(--zvbb-icon-size);
    height: var(--zvbb-icon-size);
    background: var(--zvbb-icon-bg-color);
    border-radius: 4px;
    position: relative;
    transition: all 0.2s ease;
}