/* ===========================================================
   BB ICON FEATURES — FONT AWESOME VERSION
   =========================================================== */

.bb-icon-feature {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;              /* vertical for left/right layout */
    justify-content: flex-start;      /* horizontal */
    width: 100%;

    padding: var(--bb-padding, 25px 25px);
    margin:  var(--bb-margin, 0);

    gap: var(--bb-gap, 24px);

    background: var(--bb-card-bg, #ffffff);
    border-radius: var(--bb-card-radius, 24px);

    min-height: var(--bb-min-height, auto);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

/* Full-height mode (column/row must allow it) */
.bb-icon-feature[data-fullheight="1"] {
    height: 100%;
}

/* Card hover (can be disabled via data-card-hover="0") */
.bb-icon-feature[data-card-hover="1"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    background: var(--bb-card-bg-hover, var(--bb-card-bg, #ffffff));
}

.bb-icon-feature[data-card-hover="0"]:hover {
    transform: none;
    box-shadow: none;
}

/* ===========================================================
   ICON POSITION & ALIGN
   =========================================================== */

/* Left & right: row layout */
.bb-icon-feature[data-icon-position="left"],
.bb-icon-feature[data-icon-position="right"] {
    flex-direction: row;
}

/* Right = reverse row */
.bb-icon-feature[data-icon-position="right"] {
    flex-direction: row-reverse;
}

/* Horizontal alignment for left/right */
.bb-icon-feature[data-icon-position="left"][data-h-align="left"],
.bb-icon-feature[data-icon-position="right"][data-h-align="left"] {
    justify-content: flex-start;
}
.bb-icon-feature[data-h-align="center"][data-icon-position="left"],
.bb-icon-feature[data-h-align="center"][data-icon-position="right"] {
    justify-content: center;
}
.bb-icon-feature[data-icon-position="left"][data-h-align="right"],
.bb-icon-feature[data-icon-position="right"][data-h-align="right"] {
    justify-content: flex-end;
}

/* Vertical alignment for left/right (icon + text together) */
.bb-icon-feature[data-icon-position="left"][data-v-align="top"],
.bb-icon-feature[data-icon-position="right"][data-v-align="top"] {
    align-items: flex-start;
}
.bb-icon-feature[data-icon-position="left"][data-v-align="center"],
.bb-icon-feature[data-icon-position="right"][data-v-align="center"] {
    align-items: center;
}
.bb-icon-feature[data-icon-position="left"][data-v-align="bottom"],
.bb-icon-feature[data-icon-position="right"][data-v-align="bottom"] {
    align-items: flex-end;
}

/* Top: column layout, icon above text */
.bb-icon-feature[data-icon-position="top"] {
    flex-direction: column;
}

/* Top – horizontal and vertical align combined */
.bb-icon-feature[data-icon-position="top"][data-h-align="left"] {
    align-items: flex-start;
    text-align: left;
}
.bb-icon-feature[data-icon-position="top"][data-h-align="center"] {
    align-items: center;
    text-align: center;
}
.bb-icon-feature[data-icon-position="top"][data-h-align="right"] {
    align-items: flex-end;
    text-align: right;
}

.bb-icon-feature[data-icon-position="top"][data-v-align="top"] {
    justify-content: flex-start;
}
.bb-icon-feature[data-icon-position="top"][data-v-align="center"] {
    justify-content: center;
}
.bb-icon-feature[data-icon-position="top"][data-v-align="bottom"] {
    justify-content: flex-end;
}

/* ===========================================================
   ICON CIRCLE
   =========================================================== */

.bb-icon-wrap {
    width:  var(--bb-circle-size, 90px);
    height: var(--bb-circle-size, 90px);
    background: var(--bb-circle-bg, #f3f3f3);
    border-radius: 50%;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition: all 0.25s ease;
}

/* ICON */
.bb-icon-wrap i,
.bb-icon-wrap svg {
    width:  var(--bb-icon-size, 42px);
    height: var(--bb-icon-size, 42px);
    font-size: var(--bb-icon-size, 42px);
    color: var(--bb-icon-color, #F4B225);
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.25s ease;
}

/* Hover colors + circle shadow */
.bb-icon-feature:hover .bb-icon-wrap {
    background: var(--bb-circle-bg-hover, #e0e0e0);
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}
.bb-icon-feature:hover .bb-icon-wrap i,
.bb-icon-feature:hover .bb-icon-wrap svg {
    color: var(--bb-icon-hover-color, #ffffff);
}

/* ===========================================================
   TEXT
   =========================================================== */

.bb-icon-content {
    display: flex;
    flex-direction: column;
    gap: var(--bb-title-desc-gap, 10px);
}

.bb-icon-content h3 {
    font-size:   var(--bb-title-size, 24px);
    font-weight: var(--bb-title-weight, 700);
    color:       var(--bb-title-color, #222222);
    margin: 0;
}

.bb-icon-content p {
    margin: 0;
    font-size:   var(--bb-desc-size, 17px);
    line-height: 1.6;
    color:       var(--bb-desc-color, #4a4a4a);
}

/* ===========================================================
   RADIO-WAVE PULSE EFFECT (subtle)
   =========================================================== */

.bb-icon-wrap::after,
.bb-icon-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.85);
}

.bb-icon-wrap::after {
    background: var(--bb-pulse-inner, rgba(244,178,37,0.25));
    z-index: -1;
    transition: all 0.40s ease-out;
}

.bb-icon-wrap::before {
    background: var(--bb-pulse-outer, rgba(244,178,37,0.15));
    z-index: -2;
    transition: all 0.55s ease-out;
}

/* Slightly reduced ripple size */
.bb-icon-feature:hover .bb-icon-wrap::after {
    transform: scale(1.15);
    opacity: 1;
}
.bb-icon-feature:hover .bb-icon-wrap::before {
    transform: scale(1.35);
    opacity: 1;
}