/* LeBrown Installments v1.1.2 - Frontend CSS */
.lbri-wrapper, .lbri-wrapper *, .lbri-wrapper *::before, .lbri-wrapper *::after { box-sizing: border-box; }
.lbri-wrapper {
    width: 100%;
    margin-top: var(--lbri-current-margin-top, var(--lbri-desk-margin-top, 4px));
    margin-bottom: var(--lbri-current-margin-bottom, var(--lbri-desk-margin-bottom, 12px));
    color: var(--lbri-color-text, #333);
}

.lbri-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: var(--lbri-current-alignment, var(--lbri-desk-alignment, flex-start));
    gap: var(--lbri-current-img-text-gap, var(--lbri-desk-img-text-gap, 6px));
    max-width: var(--lbri-current-max-width, var(--lbri-desk-max-width, 100%));
    padding: var(--lbri-current-padding-v, 0px) var(--lbri-current-padding-h, 0px);
    position: relative;
    cursor: pointer;
    outline: none;
}

.lbri-content-col {
    display: flex;
    flex-direction: column;
    gap: var(--lbri-current-row-gap, var(--lbri-desk-row-gap, 4px));
}

.lbri-line-one {
    font-size: var(--lbri-current-font-size-1, var(--lbri-desk-font-size-1, 14px));
    line-height: var(--lbri-current-line-height, var(--lbri-desk-line-height, 1.4));
    letter-spacing: var(--lbri-current-letter-spacing, var(--lbri-desk-letter-spacing, 0px));
    font-weight: var(--lbri-current-font-weight-1, var(--lbri-desk-font-weight-1, 400));
}

.lbri-line-two {
    font-size: var(--lbri-current-font-size-2, var(--lbri-desk-font-size-2, 12px));
    line-height: var(--lbri-current-line-height, var(--lbri-desk-line-height, 1.4));
    letter-spacing: var(--lbri-current-letter-spacing, var(--lbri-desk-letter-spacing, 0px));
    font-weight: var(--lbri-current-font-weight-2, var(--lbri-desk-font-weight-2, 400));
    color: var(--lbri-color-text-two, #666);
}

.lbri-icon-col {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lbri-tooltip-icon {
    font-size: var(--lbri-current-icon-size, var(--lbri-desk-icon-size, 16px));
    color: var(--lbri-color-icon, #2271b1);
    transition: color 0.2s ease;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lbri-tooltip-icon svg {
    width: var(--lbri-current-icon-size, 16px);
    height: var(--lbri-current-icon-size, 16px);
    fill: currentColor;
}

.lbri-container:hover .lbri-tooltip-icon, .lbri-container:focus-within .lbri-tooltip-icon {
    color: var(--lbri-color-icon-hover, #005177);
}

.lbri-tooltip {
    position: absolute;
    width: var(--lbri-tooltip-width, 220px);
    background-color: var(--lbri-color-tooltip-bg, #1a1a1a);
    color: var(--lbri-color-tooltip-text, #ffffff);
    padding: var(--lbri-tooltip-padding, 10px);
    border-radius: var(--lbri-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(--lbri-tooltip-speed, 200ms) ease, transform var(--lbri-tooltip-speed, 200ms) ease;
}

.lbri-tooltip.lbri-pos-top {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
}
.lbri-tooltip.lbri-pos-top::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--lbri-color-tooltip-bg, #1a1a1a) transparent transparent transparent;
}

.lbri-tooltip.lbri-pos-bottom {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
}
.lbri-tooltip.lbri-pos-bottom::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--lbri-color-tooltip-bg, #1a1a1a) transparent;
}

.lbri-tooltip.lbri-pos-left {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}
.lbri-tooltip.lbri-pos-left::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent var(--lbri-color-tooltip-bg, #1a1a1a);
}

.lbri-tooltip.lbri-pos-right {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
}
.lbri-tooltip.lbri-pos-right::after {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent var(--lbri-color-tooltip-bg, #1a1a1a) transparent transparent;
}

.lbri-container:hover .lbri-tooltip, .lbri-container:focus-within .lbri-tooltip, .lbri-container.lbri-active-tip .lbri-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.lbri-tooltip.lbri-pos-left:hover, .lbri-container:hover .lbri-tooltip.lbri-pos-left, .lbri-container.lbri-active-tip .lbri-tooltip.lbri-pos-left {
    transform: translateY(-50%) translateX(0);
}
.lbri-tooltip.lbri-pos-right:hover, .lbri-container:hover .lbri-tooltip.lbri-pos-right, .lbri-container.lbri-active-tip .lbri-tooltip.lbri-pos-right {
    transform: translateY(-50%) translateX(0);
}

.lbri-wrapper.lbri-preview-desktop {
    --lbri-current-font-size-1: var(--lbri-desk-font-size-1);
    --lbri-current-font-size-2: var(--lbri-desk-font-size-2);
    --lbri-current-font-size-sum: var(--lbri-desk-font-size-sum);
    --lbri-current-icon-size: var(--lbri-desk-icon-size);
    --lbri-current-line-height: var(--lbri-desk-line-height);
    --lbri-current-letter-spacing: var(--lbri-desk-letter-spacing);
    --lbri-current-font-weight-1: var(--lbri-desk-font-weight-1);
    --lbri-current-font-weight-2: var(--lbri-desk-font-weight-2);
    --lbri-current-font-weight-sum: var(--lbri-desk-font-weight-sum);
    --lbri-current-margin-top: var(--lbri-desk-margin-top);
    --lbri-current-margin-bottom: var(--lbri-desk-margin-bottom);
    --lbri-current-padding-v: var(--lbri-desk-padding-v);
    --lbri-current-padding-h: var(--lbri-desk-padding-h);
    --lbri-current-row-gap: var(--lbri-desk-row-gap);
    --lbri-current-img-text-gap: var(--lbri-desk-img-text-gap);
    --lbri-current-alignment: var(--lbri-desk-alignment);
    --lbri-current-max-width: var(--lbri-desk-max-width);
}

.lbri-wrapper.lbri-preview-tablet {
    --lbri-current-font-size-1: var(--lbri-tab-font-size-1);
    --lbri-current-font-size-2: var(--lbri-tab-font-size-2);
    --lbri-current-font-size-sum: var(--lbri-tab-font-size-sum);
    --lbri-current-icon-size: var(--lbri-tab-icon-size);
    --lbri-current-line-height: var(--lbri-tab-line-height);
    --lbri-current-letter-spacing: var(--lbri-tab-letter-spacing);
    --lbri-current-font-weight-1: var(--lbri-tab-font-weight-1);
    --lbri-current-font-weight-2: var(--lbri-tab-font-weight-2);
    --lbri-current-font-weight-sum: var(--lbri-tab-font-weight-sum);
    --lbri-current-margin-top: var(--lbri-tab-margin-top);
    --lbri-current-margin-bottom: var(--lbri-tab-margin-bottom);
    --lbri-current-padding-v: var(--lbri-tab-padding-v);
    --lbri-current-padding-h: var(--lbri-tab-padding-h);
    --lbri-current-row-gap: var(--lbri-tab-row-gap);
    --lbri-current-img-text-gap: var(--lbri-tab-img-text-gap);
    --lbri-current-alignment: var(--lbri-tab-alignment);
    --lbri-current-max-width: var(--lbri-tab-max-width);
}

.lbri-wrapper.lbri-preview-mobile {
    --lbri-current-font-size-1: var(--lbri-mob-font-size-1);
    --lbri-current-font-size-2: var(--lbri-mob-font-size-2);
    --lbri-current-font-size-sum: var(--lbri-mob-font-size-sum);
    --lbri-current-icon-size: var(--lbri-mob-icon-size);
    --lbri-current-line-height: var(--lbri-mob-line-height);
    --lbri-current-letter-spacing: var(--lbri-mob-letter-spacing);
    --lbri-current-font-weight-1: var(--lbri-mob-font-weight-1);
    --lbri-current-font-weight-2: var(--lbri-mob-font-weight-2);
    --lbri-current-font-weight-sum: var(--lbri-mob-font-weight-sum);
    --lbri-current-margin-top: var(--lbri-mob-margin-top);
    --lbri-current-margin-bottom: var(--lbri-mob-margin-bottom);
    --lbri-current-padding-v: var(--lbri-mob-padding-v);
    --lbri-current-padding-h: var(--lbri-mob-padding-h);
    --lbri-current-row-gap: var(--lbri-mob-row-gap);
    --lbri-current-img-text-gap: var(--lbri-mob-img-text-gap);
    --lbri-current-alignment: var(--lbri-mob-alignment);
    --lbri-current-max-width: var(--lbri-mob-max-width);
}

@media screen and (min-width: 1025px) {
    .lbri-wrapper:not(.lbri-preview-desktop):not(.lbri-preview-tablet):not(.lbri-preview-mobile) {
        --lbri-current-font-size-1: var(--lbri-desk-font-size-1);
        --lbri-current-font-size-2: var(--lbri-desk-font-size-2);
        --lbri-current-font-size-sum: var(--lbri-desk-font-size-sum);
        --lbri-current-icon-size: var(--lbri-desk-icon-size);
        --lbri-current-line-height: var(--lbri-desk-line-height);
        --lbri-current-letter-spacing: var(--lbri-desk-letter-spacing);
        --lbri-current-font-weight-1: var(--lbri-desk-font-weight-1);
        --lbri-current-font-weight-2: var(--lbri-desk-font-weight-2);
        --lbri-current-font-weight-sum: var(--lbri-desk-font-weight-sum);
        --lbri-current-margin-top: var(--lbri-desk-margin-top);
        --lbri-current-margin-bottom: var(--lbri-desk-margin-bottom);
        --lbri-current-padding-v: var(--lbri-desk-padding-v);
        --lbri-current-padding-h: var(--lbri-desk-padding-h);
        --lbri-current-row-gap: var(--lbri-desk-row-gap);
        --lbri-current-img-text-gap: var(--lbri-desk-img-text-gap);
        --lbri-current-alignment: var(--lbri-desk-alignment);
        --lbri-current-max-width: var(--lbri-desk-max-width);
    }
}

@media screen and (max-width: 1024px) and (min-width: 769px) {
    .lbri-wrapper:not(.lbri-preview-desktop):not(.lbri-preview-tablet):not(.lbri-preview-mobile) {
        --lbri-current-font-size-1: var(--lbri-tab-font-size-1);
        --lbri-current-font-size-2: var(--lbri-tab-font-size-2);
        --lbri-current-font-size-sum: var(--lbri-tab-font-size-sum);
        --lbri-current-icon-size: var(--lbri-tab-icon-size);
        --lbri-current-line-height: var(--lbri-tab-line-height);
        --lbri-current-letter-spacing: var(--lbri-tab-letter-spacing);
        --lbri-current-font-weight-1: var(--lbri-tab-font-weight-1);
        --lbri-current-font-weight-2: var(--lbri-tab-font-weight-2);
        --lbri-current-font-weight-sum: var(--lbri-tab-font-weight-sum);
        --lbri-current-margin-top: var(--lbri-tab-margin-top);
        --lbri-current-margin-bottom: var(--lbri-tab-margin-bottom);
        --lbri-current-padding-v: var(--lbri-tab-padding-v);
        --lbri-current-padding-h: var(--lbri-tab-padding-h);
        --lbri-current-row-gap: var(--lbri-tab-row-gap);
        --lbri-current-img-text-gap: var(--lbri-tab-img-text-gap);
        --lbri-current-alignment: var(--lbri-tab-alignment);
        --lbri-current-max-width: var(--lbri-tab-max-width);
    }
}

@media screen and (max-width: 768px) {
    .lbri-wrapper:not(.lbri-preview-desktop):not(.lbri-preview-tablet):not(.lbri-preview-mobile) {
        --lbri-current-font-size-1: var(--lbri-mob-font-size-1);
        --lbri-current-font-size-2: var(--lbri-mob-font-size-2);
        --lbri-current-font-size-sum: var(--lbri-mob-font-size-sum);
        --lbri-current-icon-size: var(--lbri-mob-icon-size);
        --lbri-current-line-height: var(--lbri-mob-line-height);
        --lbri-current-letter-spacing: var(--lbri-mob-letter-spacing);
        --lbri-current-font-weight-1: var(--lbri-mob-font-weight-1);
        --lbri-current-font-weight-2: var(--lbri-mob-font-weight-2);
        --lbri-current-font-weight-sum: var(--lbri-mob-font-weight-sum);
        --lbri-current-margin-top: var(--lbri-mob-margin-top);
        --lbri-current-margin-bottom: var(--lbri-mob-margin-bottom);
        --lbri-current-padding-v: var(--lbri-mob-padding-v);
        --lbri-current-padding-h: var(--lbri-mob-padding-h);
        --lbri-current-row-gap: var(--lbri-mob-row-gap);
        --lbri-current-img-text-gap: var(--lbri-mob-img-text-gap);
        --lbri-current-alignment: var(--lbri-mob-alignment);
        --lbri-current-max-width: var(--lbri-mob-max-width);
    }
}