.pinterest-follow-bar {
    --pin-red: #bd081c;
    --pin-red-dark: #a00618;
    --pin-red-light: #e60023;
    --pin-bg: #ffffff;
    --pin-text: #ffffff;
    --pin-shadow: rgba(189, 8, 28, 0.3);
    --pin-glow: rgba(255, 77, 77, 0.5);
    --bar-height: 48px;
    --bar-radius: 8px;
    --bar-gap: 12px;
    --bar-padding: 0;
    --bar-spacing: 1.5rem 0;
    --font-size: 15px;
    --font-weight: 600;
    --anim-fast: 0.25s;
    --anim-med: 0.45s;
    --anim-slow: 0.7s;
}


.pinterest-follow-bar {
    width: 100%;
    padding: var(--bar-padding);
    text-align: center;
    margin: var(--bar-spacing);
}

.pinterest-follow-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bar-gap);
    width: 100%;
    min-height: var(--bar-height);
    font: var(--font-weight) var(--font-size) var(--font-base);
    color: var(--pin-text);
    text-decoration: none;
    border-radius: var(--bar-radius);
    overflow: hidden;
    position: relative;
    transition: transform var(--anim-fast) ease, box-shadow var(--anim-fast) ease;
    z-index: 1;
}

.pin-icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
    transition: transform var(--anim-med) ease;
}

/* ────────────────────── 1. SOLID RED ────────────────────── */
.pinterest-bar-solid a {
    background: var(--pin-red);
}

.pinterest-bar-solid a:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--pin-shadow);
}

.pinterest-bar-solid a::before {
    content: "";
    position: absolute;
    inset: 0;
    _background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
    left: -100%;
    transition: left var(--anim-slow) ease;
    z-index: -1;
}

.pinterest-bar-solid a:hover::before {
    left: 100%;
}

.pinterest-bar-solid a:hover .pin-icon {
    animation: pulse var(--anim-med) ease;
}

/* ────────────────────── 2. GRADIENT ────────────────────── */
.pinterest-bar-gradient a {
    background: linear-gradient(135deg, var(--pin-red-light), var(--pin-red));
    box-shadow: 0 4px 12px rgba(230, 0, 35, .2);
}

.pinterest-bar-gradient a:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(230, 0, 35, .35);
}

.pinterest-bar-gradient a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    left: -100%;
    transition: left var(--anim-slow) ease;
    z-index: -1;
}

.pinterest-bar-gradient a:hover::before {
    left: 100%;
}

.pinterest-bar-gradient a:hover .pin-icon {
    animation: pulse var(--anim-med) ease;
}

/* ────────────────────── 3. OUTLINE ────────────────────── */
.pinterest-bar-outline a {
    background: transparent;
    color: var(--pin-red);
    border: 2px solid var(--pin-red);
}

.pinterest-bar-outline a:hover {
    background: var(--pin-red);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--pin-shadow);
}

.pinterest-bar-outline a .pin-icon {
    fill: var(--pin-red);
}

.pinterest-bar-outline a:hover .pin-icon {
    animation: bounce var(--anim-med) ease;
    fill: #fff;
}

/* ────────────────────── 5. NEON GLOW ────────────────────── */
.pinterest-bar-neon a {
    background: #111;
    color: var(--pin-red-light);
    box-shadow: 0 0 8px var(--pin-glow);
}

.pinterest-bar-neon a:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 0 20px var(--pin-glow), 0 12px 30px rgba(255, 77, 77, .4);
}

.pinterest-bar-neon a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, .4 60%), transparent);
    opacity: 0;
    transition: opacity var(--anim-med);
    z-index: -1;
}

.pinterest-bar-neon a:hover::after {
    opacity: 1;
}

.pinterest-bar-neon a:hover .pin-icon {
    animation: bounce var(--anim-med) ease;
}

/* ────────────────────── 6. 3D FLIP (FIXED) ────────────────────── */
.pinterest-bar-3d {
    perspective: 1000px;
}

.pinterest-bar-3d a {
    background: var(--pin-red);
    transform-style: preserve-3d;
}

.pinterest-bar-3d a:hover {
    transform: translateY(-4px) rotateX(15deg);
    box-shadow: 0 12px 28px var(--pin-shadow);
}

.pinterest-bar-3d a:hover .pin-icon {
    animation: flip var(--anim-slow) ease;
}

/* ────────────────────── 8. MINIMAL ────────────────────── */
.pinterest-bar-minimal a {
    background: transparent;
    color: var(--pin-red);
    font-weight: 500;
    min-height: auto;
    padding: 8px 0;
}

.pinterest-bar-minimal a:hover {
    color: var(--pin-red-dark);
}

.pinterest-bar-minimal a:hover .pin-icon {
    transform: scale(1.2);
}

.pinterest-bar-custom a {
    background-color: var(--pinterest-bar-user-bg, var(--pin-red));
    color: var(--pinterest-bar-user-text, #fff);
    font-weight: 500;
    transition: background 0.15s ease-in-out;
}

.pinterest-bar-custom a:hover {
    background-color: var(--pinterest-bar-user-hover-bg, var(--pin-red-light));
    color: var(--pinterest-bar-user-hover-text, #fff);
}

/* ────────────────────── 9. FLOATING (Bottom-Right) ────────────────────── */
.pinterest-follow-bar-floating {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: auto;
    padding: 0;
    z-index: 9999;
    margin: 0;
    --bar-height: auto;
}

.pinterest-follow-bar-floating a {
    padding: 12px;
}

/* ────────────────────── ANIMATIONS ────────────────────── */
@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.35);
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-8px);
    }

    70% {
        transform: translateY(-3px);
    }
}

@keyframes flip {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

@keyframes pulseBorder {

    0%,
    100% {
        transform: scale(1);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}


/* ────────────────────── RESPONSIVE ────────────────────── */
@media (max-width: 720px) {
    .pinterest-follow-bar a {
        font-size: 14px;
        padding: 12px 16px;
    }

    .pinterest-follow-bar .pin-icon {
        width: 20px;
        height: 20px;
    }

    .pinterest-bar-mobile-button span {
        display: none;
    }

    .pinterest-bar-mobile-bar {
        bottom: 0;
        right: 0;
        width: 100%;
        padding: 3px;
    }

    .pinterest-bar-mobile-none {
        display: none !important;
    }
}