/**
 * Trackable Button – front-end button styles
 * Style is controlled via the Button Tracker > Settings page in WP Admin.
 */

/* ── STYLE 1: Original (purple, theme font, no rounded corners) ── */
.tb-btn {
    display:          inline-block;
    padding:          12px 28px;
    background:       #6C5CE7;
    color:            #ffffff !important;
    text-decoration:  none;
    border-radius:    0;
    font-weight:      600;
    font-size:        15px;
    letter-spacing:   0.02em;
    transition:       background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow:       0 2px 8px rgba(108, 92, 231, 0.35);
    cursor:           pointer;
}
.tb-btn:hover {
    background:       #5a4bd1;
    box-shadow:       0 4px 16px rgba(108, 92, 231, 0.5);
    transform:        translateY(-1px);
    color:            #ffffff !important;
    text-decoration:  none;
}
.tb-btn:active {
    transform:        translateY(0);
    box-shadow:       0 1px 4px rgba(108, 92, 231, 0.3);
}

/* ── STYLE 2: Rainbow border, #00a676 green, brush icon, no rounded corners ── */
.tb-btn-rainbow {
    display:          inline-flex;
    align-items:      center;
    gap:              10px;
    padding:          14px 36px;
    background:       #00a676;
    color:            #ffffff !important;
    text-decoration:  none;
    border-radius:    0;
    font-weight:      600;
    font-size:        15px;
    letter-spacing:   0.12em;
    text-transform:   uppercase;
    cursor:           pointer;
    position:         relative;
    border:           none;
    z-index:          0;
    transition:       transform 0.15s ease;
}

/* Animated rainbow border via ::before */
.tb-btn-rainbow::before {
    content:          '';
    position:         absolute;
    inset:            -3px;
    border-radius:    0;
    background:       linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #c77dff, #ff6b6b);
    background-size:  300% 100%;
    animation:        tb-rainbow-shift 4s linear infinite;
    z-index:          -1;
}

/* Green fill layer that fades on hover */
.tb-btn-rainbow::after {
    content:          '';
    position:         absolute;
    inset:            2px;
    border-radius:    0;
    background:       #00a676;
    z-index:          -1;
    transition:       opacity 0.3s ease;
}

.tb-btn-rainbow:hover::after {
    opacity:          0;
}
.tb-btn-rainbow:hover {
    color:            #ffffff !important;
    text-decoration:  none;
}
.tb-btn-rainbow:active {
    transform:        scale(0.96);
}

/* Brush icon inside rainbow button */
.tb-btn-rainbow .tb-brush-icon {
    display:          inline-block;
    width:            18px;
    height:           18px;
    background-color: currentColor;
    -webkit-mask:     url('brush-icon.svg') no-repeat center / contain;
    mask:             url('brush-icon.svg') no-repeat center / contain;
    flex-shrink:      0;
    filter:           brightness(0) invert(1);
}

@keyframes tb-rainbow-shift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}