/* 1. Shared alignment for Frontend and Editor */
.wp-block-button__link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 13px 24px !important;
    border: 2px solid var(--secondary-button-color) !important;
    background: var(--secondary-button-color) !important;
    color: var(--secondary-button-text-color) !important;
    transition: all 0.3s ease;
}

/* 2. Icon styling — Frontend (PHP inject) */
.poka-btn-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    flex-shrink: 0;
}

.poka-btn-icon,
.poka-btn-icon path {
    fill: currentColor;
}

/* 3. Icon position on the Frontend */
.icon-pos-left  { order: -1; }
.icon-pos-right { order: 1; }

/* 4. Hover Effects */
.wp-block-button__link:hover {
    background: transparent !important;
    border-color: var(--secondary-button-color) !important;
    color: var(--secondary-button-color) !important;
    gap: 8px;
}

/* ============================================================
   EDITOR ONLY — :before with inline SVG data URI
   The --btn-icon contains the SVG with fill="currentColor"
   so it changes color along with the button text
   ============================================================ */
.has-custom-icon .wp-block-button__link::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-image: var(--btn-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    order: var(--btn-icon-order, -1);
    /* currentColor works because the SVG has fill="currentColor" encoded inside */
}