/* ==========================================================================
   EPP Icon Box Widget
   ========================================================================== */

.epp-icon-box {
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s ease, transform .25s ease;
    padding: 24px;
}

/* ── Position variants ── */
.epp-icon-box--left,
.epp-icon-box--right {
    flex-direction: row;
    align-items: flex-start;
}

.epp-icon-box--right {
    flex-direction: row-reverse;
}

/* ── Icon ── */
.epp-icon-box__icon {
    display: flex;
    flex-shrink: 0;
    margin-bottom: 16px; /* overridden by slider control */
}

.epp-icon-box--left  .epp-icon-box__icon { margin-bottom: 0; margin-right: 16px; }
.epp-icon-box--right .epp-icon-box__icon { margin-bottom: 0; margin-left: 16px; }

.epp-icon-box__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color .25s ease;
}

.epp-icon-box__icon i {
    font-size: 40px;
    line-height: 1;
    color: var(--epp-primary, #7c3aed);
    transition: color .25s ease;
}

.epp-icon-box__icon svg {
    width: 40px;
    height: 40px;
    fill: var(--epp-primary, #7c3aed);
    transition: fill .25s ease;
}

/* ── Content ── */
.epp-icon-box__content {
    flex: 1;
    min-width: 0;
}

.epp-icon-box__title {
    margin: 0 0 8px;
    line-height: 1.3;
    color: var(--epp-gray-900, #111827);
    font-size: 1.1rem;
    font-weight: 700;
    transition: color .25s ease;
}

.epp-icon-box__title a {
    color: inherit;
    text-decoration: none;
}

.epp-icon-box__title a:hover {
    text-decoration: underline;
}

.epp-icon-box__description {
    margin: 0;
    line-height: 1.6;
    color: var(--epp-gray-600, #4b5563);
}

/* ── Icon Shape presets ── */
.epp-icon-box--shape-circle .epp-icon-box__icon-wrap,
.epp-icon-box--shape-square .epp-icon-box__icon-wrap,
.epp-icon-box--shape-rounded .epp-icon-box__icon-wrap {
    padding: 16px;
    background-color: var(--epp-primary-light, #ede9fe);
}
.epp-icon-box--shape-circle  .epp-icon-box__icon-wrap { border-radius: 50%; }
.epp-icon-box--shape-square  .epp-icon-box__icon-wrap { border-radius: 4px; }
.epp-icon-box--shape-rounded .epp-icon-box__icon-wrap { border-radius: 12px; }

/* ── Button styles ── */
.epp-icon-box__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .2s ease;
    cursor: pointer;
}
.epp-icon-box__btn--link   { color: var(--epp-primary, #7c3aed); padding: 0; }
.epp-icon-box__btn--link:hover { text-decoration: underline; }
.epp-icon-box__btn--filled { background: var(--epp-primary, #7c3aed); color: #fff; padding: 8px 20px; border-radius: var(--epp-radius-sm, 6px); }
.epp-icon-box__btn--filled:hover { background: var(--epp-primary-dark, #6d28d9); opacity: 1; }
.epp-icon-box__btn--outline { border: 2px solid var(--epp-primary, #7c3aed); color: var(--epp-primary, #7c3aed); padding: 6px 18px; border-radius: var(--epp-radius-sm, 6px); }
.epp-icon-box__btn--outline:hover { background: var(--epp-primary-light, #ede9fe); opacity: 1; }

/* ── Box hover transition ── */
.epp-icon-box { transition: box-shadow .25s ease, transform .25s ease, background-color .25s ease, border-color .25s ease; }