/* =========================================================
   WC Artist Dashboard - Artists Join Here Floating Button
   ---------------------------------------------------------
   Site-wide CTA linking to /dash/.
   Fixed at the top-right of the viewport so it remains
   stationary while the page scrolls.

   Namespace: .wad-artists-join-floating
   ========================================================= */

.wad-artists-join-floating {
    position: fixed;

    /* TOP-RIGHT POSITION */
    right: 18px;
    top: 190px;
    bottom: auto;
    left: auto;

    /* NO VERTICAL CENTER TRANSFORM */
    transform: none;

    z-index: 999998;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 8px 13px 8px 8px;

    background: #111;
    border: 2px solid #e21b23;
    border-radius: 8px;

    color: #fff !important;
    text-decoration: none !important;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.45);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

    /* Prevent any theme text-decoration on hover/focus/visited */
    text-underline-offset: 0;
    outline: none;
}

/* ---------------------------------------------------------
   Link states
   --------------------------------------------------------- */

.wad-artists-join-floating:hover,
.wad-artists-join-floating:focus,
.wad-artists-join-floating:active,
.wad-artists-join-floating:visited {
    color: #fff !important;
    text-decoration: none !important;
}

.wad-artists-join-floating:hover,
.wad-artists-join-floating:focus-visible {
    transform: translateX(-3px);
    background: #181818;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.6);
}

.wad-artists-join-floating:focus-visible {
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.6),
        0 0 0 3px rgba(226, 27, 35, 0.5);
}

/* ---------------------------------------------------------
   Icon bubble
   --------------------------------------------------------- */

.wad-artists-join-floating-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e21b23;
    border-radius: 50%;
}

.wad-artists-join-floating-icon svg {
    width: 22px;
    height: 22px;

    fill: #fff;
    display: block;
}

/* ---------------------------------------------------------
   Two-line label (ARTISTS / JOIN HERE)
   --------------------------------------------------------- */

.wad-artists-join-floating-label {
    display: flex;
    flex-direction: column;

    line-height: 1;
    text-align: left;
}

.wad-artists-join-floating-label strong {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.4px;
    color: #fff;
}

.wad-artists-join-floating-label span {
    margin-top: 4px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;

    color: #e21b23;
}

/* ---------------------------------------------------------
   Mobile
   Keep it at the top-right rather than dropping to the
   bottom, so it stays clear of the "+ Add Product" button.
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .wad-artists-join-floating {
        right: 8px;

        /* STICK TO TOP */
        top: 72px;
        bottom: auto;
        left: auto;

        transform: none;

        padding: 6px 10px 6px 6px;
        gap: 7px;
        border-radius: 7px;
    }

    .wad-artists-join-floating:hover,
    .wad-artists-join-floating:focus-visible {
        transform: translateX(-3px);
    }

    .wad-artists-join-floating-icon {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
    }

    .wad-artists-join-floating-icon svg {
        width: 19px;
        height: 19px;
    }

    .wad-artists-join-floating-label strong {
        font-size: 10px;
    }

    .wad-artists-join-floating-label span {
        font-size: 8px;
        margin-top: 3px;
    }
}

/* ---------------------------------------------------------
   Very small screens (optional tightening)
   --------------------------------------------------------- */

@media (max-width: 380px) {

    .wad-artists-join-floating {
        top: 68px;

        padding: 5px 8px 5px 5px;
        gap: 6px;
    }

    .wad-artists-join-floating-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .wad-artists-join-floating-icon svg {
        width: 17px;
        height: 17px;
    }

    .wad-artists-join-floating-label strong {
        font-size: 9px;
    }

    .wad-artists-join-floating-label span {
        font-size: 7px;
    }
}

/* ---------------------------------------------------------
   Print - hide the floating CTA
   --------------------------------------------------------- */

@media print {
    .wad-artists-join-floating {
        display: none !important;
    }
}