/* ============================================
   Detached Button and Icon Hover Swap
   ============================================ */

.pretpot-detached-button-wrapper {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    gap: 0;
}

/* ── Button Text ── */
.pretpot-detached-button-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    border-radius: 22px;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s ease;
}

/* ── Icon Circle ── */
.pretpot-detached-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 18px;
    font-weight: 300;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Alignment ── */
.pretpot-detached-button-wrapper.align-left {
    justify-content: flex-start;
}

.pretpot-detached-button-wrapper.align-center {
    justify-content: center;
}

.pretpot-detached-button-wrapper.align-right {
    justify-content: flex-end;
}

/* ── Default: Icon AFTER text ── */
.pretpot-detached-button-wrapper.icon-after .pretpot-detached-button-icon {
    margin-left: var(--pretpot-icon-spacing, 4px);
}

/* Hover: icon moves to BEFORE (when swap enabled) */
.pretpot-detached-button-wrapper.icon-after:hover .pretpot-detached-button-icon {
    order: -1;
    margin-left: 0;
    margin-right: var(--pretpot-icon-spacing, 4px);
}

/* ── Default: Icon BEFORE text ── */
.pretpot-detached-button-wrapper.icon-before .pretpot-detached-button-icon {
    margin-right: var(--pretpot-icon-spacing, 4px);
}

/* Hover: icon moves to AFTER (when swap enabled) */
.pretpot-detached-button-wrapper.icon-before:hover .pretpot-detached-button-icon {
    order: 1;
    margin-right: 0;
    margin-left: var(--pretpot-icon-spacing, 4px);
}

/* ── Icon Rotation (only when swap is enabled) ── */
.pretpot-detached-button-wrapper:hover .pretpot-detached-button-icon {
    transform: rotate(var(--pretpot-icon-rotate, 0deg));
}

/* ============================================
   DISABLE SWAP + ANIMATION (hover-swap-disabled)
   ============================================ */
.pretpot-detached-button-wrapper.hover-swap-disabled .pretpot-detached-button-icon {
    transition: background-color 0.25s ease, color 0.25s ease;
    /* transform transition removed */
}

/* No order change, no margin swapping, no rotation */
.pretpot-detached-button-wrapper.hover-swap-disabled.icon-after:hover .pretpot-detached-button-icon {
    order: 0;
    margin-left: var(--pretpot-icon-spacing, 4px);
    margin-right: 0;
    transform: none;
}

.pretpot-detached-button-wrapper.hover-swap-disabled.icon-before:hover .pretpot-detached-button-icon {
    order: 0;
    margin-right: var(--pretpot-icon-spacing, 4px);
    margin-left: 0;
    transform: none;
}

.pretpot-detached-button-wrapper.hover-swap-disabled:hover .pretpot-detached-button-icon {
    transform: none;
}

/* ── Link wrapper ── */
.pretpot-detached-button-link {
    text-decoration: none;
    display: inline-flex;
}