/* LeBrown Product Features v2.1.15 - Frontend CSS */
.lbpf-wrapper, .lbpf-wrapper *, .lbpf-wrapper *::before, .lbpf-wrapper *::after { box-sizing: border-box; }
.lbpf-wrapper { width: 100%; margin: 4px 0 12px 0; color: var(--lbpf-color-text, #333); }

/* Base Container & Item Default mapping */
.lbpf-container {
    display: flex; flex-direction: row; align-items: center;
    flex-wrap: var(--lbpf-current-wrap, var(--lbpf-desk-wrap, wrap));
    justify-content: var(--lbpf-current-alignment, var(--lbpf-desk-alignment, flex-start));
    gap: var(--lbpf-current-gap, var(--lbpf-desk-gap, 16px));
    max-width: var(--lbpf-current-max-width, var(--lbpf-desk-max-width, 100%));
}
.lbpf-item { display: flex; flex-direction: row; align-items: center; gap: var(--lbpf-current-img-text-gap, var(--lbpf-desk-img-text-gap, 8px)); position: relative; cursor: pointer; outline: none; }
.lbpf-icon { width: var(--lbpf-current-img-size, var(--lbpf-desk-img-size, 32px)); height: var(--lbpf-current-img-size, var(--lbpf-desk-img-size, 32px)); display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.lbpf-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lbpf-text { font-size: var(--lbpf-current-font-size, var(--lbpf-desk-font-size, 14px)); line-height: var(--lbpf-current-line-height, var(--lbpf-desk-line-height, 1.4)); white-space: var(--lbpf-current-text-wrap, var(--lbpf-desk-text-wrap, normal)); }

/* Tooltip Styles */
.lbpf-tooltip {
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px);
    width: var(--lbpf-tooltip-width, 220px);
    background-color: var(--lbpf-color-tooltip-bg, #1a1a1a);
    color: var(--lbpf-color-tooltip-text, #ffffff);
    padding: var(--lbpf-tooltip-padding, 10px);
    border-radius: var(--lbpf-tooltip-radius, 6px);
    font-size: 12px; line-height: 1.4; text-align: center;
    white-space: pre-line;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0; visibility: hidden; z-index: 9999; pointer-events: none;
    transition: opacity var(--lbpf-tooltip-speed, 200ms) ease, transform var(--lbpf-tooltip-speed, 200ms) ease;
}
.lbpf-tooltip::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border-width: 5px; border-style: solid; border-color: var(--lbpf-color-tooltip-bg, #1a1a1a) transparent transparent transparent;
}
.lbpf-item:hover .lbpf-tooltip, .lbpf-item:focus-within .lbpf-tooltip, .lbpf-item.lbpf-active-tip .lbpf-tooltip {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* Three Independent Device Classes */
.lbpf-wrapper.lbpf-preview-desktop {
    --lbpf-current-img-size: var(--lbpf-desk-img-size);
    --lbpf-current-font-size: var(--lbpf-desk-font-size);
    --lbpf-current-gap: var(--lbpf-desk-gap);
    --lbpf-current-img-text-gap: var(--lbpf-desk-img-text-gap);
    --lbpf-current-line-height: var(--lbpf-desk-line-height);
    --lbpf-current-max-width: var(--lbpf-desk-max-width);
    --lbpf-current-alignment: var(--lbpf-desk-alignment);
    --lbpf-current-wrap: var(--lbpf-desk-wrap);
    --lbpf-current-text-wrap: var(--lbpf-desk-text-wrap);
}

.lbpf-wrapper.lbpf-preview-tablet {
    --lbpf-current-img-size: var(--lbpf-tab-img-size);
    --lbpf-current-font-size: var(--lbpf-tab-font-size);
    --lbpf-current-gap: var(--lbpf-tab-gap);
    --lbpf-current-img-text-gap: var(--lbpf-tab-img-text-gap);
    --lbpf-current-line-height: var(--lbpf-tab-line-height);
    --lbpf-current-max-width: var(--lbpf-tab-max-width);
    --lbpf-current-alignment: var(--lbpf-tab-alignment);
    --lbpf-current-wrap: var(--lbpf-tab-wrap);
    --lbpf-current-text-wrap: var(--lbpf-tab-text-wrap);
}

.lbpf-wrapper.lbpf-preview-mobile {
    --lbpf-current-img-size: var(--lbpf-mob-img-size);
    --lbpf-current-font-size: var(--lbpf-mob-font-size);
    --lbpf-current-gap: var(--lbpf-mob-gap);
    --lbpf-current-img-text-gap: var(--lbpf-mob-img-text-gap);
    --lbpf-current-line-height: var(--lbpf-mob-line-height);
    --lbpf-current-max-width: var(--lbpf-mob-max-width);
    --lbpf-current-alignment: var(--lbpf-mob-alignment);
    --lbpf-current-wrap: var(--lbpf-mob-wrap);
    --lbpf-current-text-wrap: var(--lbpf-mob-text-wrap);
}

/* Frontend Media Queries */
@media screen and (min-width: 1025px) {
    .lbpf-wrapper:not(.lbpf-preview-desktop):not(.lbpf-preview-tablet):not(.lbpf-preview-mobile) {
        --lbpf-current-img-size: var(--lbpf-desk-img-size);
        --lbpf-current-font-size: var(--lbpf-desk-font-size);
        --lbpf-current-gap: var(--lbpf-desk-gap);
        --lbpf-current-img-text-gap: var(--lbpf-desk-img-text-gap);
        --lbpf-current-line-height: var(--lbpf-desk-line-height);
        --lbpf-current-max-width: var(--lbpf-desk-max-width);
        --lbpf-current-alignment: var(--lbpf-desk-alignment);
        --lbpf-current-wrap: var(--lbpf-desk-wrap);
        --lbpf-current-text-wrap: var(--lbpf-desk-text-wrap);
    }
}

@media screen and (max-width: 1024px) and (min-width: 769px) {
    .lbpf-wrapper:not(.lbpf-preview-desktop):not(.lbpf-preview-tablet):not(.lbpf-preview-mobile) {
        --lbpf-current-img-size: var(--lbpf-tab-img-size);
        --lbpf-current-font-size: var(--lbpf-tab-font-size);
        --lbpf-current-gap: var(--lbpf-tab-gap);
        --lbpf-current-img-text-gap: var(--lbpf-tab-img-text-gap);
        --lbpf-current-line-height: var(--lbpf-tab-line-height);
        --lbpf-current-max-width: var(--lbpf-tab-max-width);
        --lbpf-current-alignment: var(--lbpf-tab-alignment);
        --lbpf-current-wrap: var(--lbpf-tab-wrap);
        --lbpf-current-text-wrap: var(--lbpf-tab-text-wrap);
    }
}

@media screen and (max-width: 768px) {
    .lbpf-wrapper:not(.lbpf-preview-desktop):not(.lbpf-preview-tablet):not(.lbpf-preview-mobile) {
        --lbpf-current-img-size: var(--lbpf-mob-img-size);
        --lbpf-current-font-size: var(--lbpf-mob-font-size);
        --lbpf-current-gap: var(--lbpf-mob-gap);
        --lbpf-current-img-text-gap: var(--lbpf-mob-img-text-gap);
        --lbpf-current-line-height: var(--lbpf-mob-line-height);
        --lbpf-current-max-width: var(--lbpf-mob-max-width);
        --lbpf-current-alignment: var(--lbpf-mob-alignment);
        --lbpf-current-wrap: var(--lbpf-mob-wrap);
        --lbpf-current-text-wrap: var(--lbpf-mob-text-wrap);
    }
}