/* 1. Κοινή ευθυγράμμιση για Frontend και 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. 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. Θέση εικονιδίου στο 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 με inline SVG data URI
   Το --btn-icon περιέχει το SVG με fill="currentColor"
   οπότε αλλάζει χρώμα μαζί με το κείμενο του button
   ============================================================ */
.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 δουλεύει γιατί το SVG έχει fill="currentColor" encoded μέσα */
}