/* ═══════════════════════════════════════════════════════════
   PREMIUM BACK-TO-TOP BUTTON
   Theme: Luxury Gold & Black  |  Position: Above chatbot
   ═══════════════════════════════════════════════════════════ */

#backToTop {
    position: fixed;
    bottom: 100px;
    /* sits above the chatbot with comfortable gap */
    right: 28px;
    /* aligned with chatbot */
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 9980;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Dark jewellery background */
    background: #0d0b07;

    /* Gold outer ring */
    box-shadow:
        0 0 0 1.5px rgba(212, 175, 55, 0.55),
        0 6px 24px rgba(0, 0, 0, 0.60),
        0 2px 8px rgba(0, 0, 0, 0.40);

    /* Hidden until scroll threshold reached */
    opacity: 0;
    transform: translateY(12px) scale(0.85);
    pointer-events: none;
    transition:
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s ease;
}

/* ── Visible state (added by JS) ── */
#backToTop.btt-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* ── Hover lift + glow ── */
#backToTop.btt-visible:hover {
    transform: translateY(-5px) scale(1.06);
    box-shadow:
        0 0 0 1.5px rgba(212, 175, 55, 0.9),
        0 0 22px rgba(212, 175, 55, 0.45),
        0 10px 32px rgba(0, 0, 0, 0.65);
}

/* ── Solid Gold Fill Container ── */
#bttWater {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
}

/* Single solid gold fill column — translateY controlled by JS */
#bttWaterInner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #d4af37;
    /* single solid gold */
    transform: translateY(100%);
    /* starts empty */
    transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

/* ── Arrow icon ── */
#bttArrow {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#bttArrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
    transition: stroke 0.25s ease;
}

#backToTop.btt-visible:hover #bttArrow {
    transform: translateY(-3px);
}

/* When mostly filled — arrow stays white; against gold BG it still reads clearly */

/* ── Spinning conic shimmer ring (subtle) ── */
#backToTop::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            transparent 0%,
            rgba(212, 175, 55, 0.18) 15%,
            transparent 30%);
    animation: btt-ring-spin 3s linear infinite;
    pointer-events: none;
    z-index: 3;
    opacity: 0.7;
}

@keyframes btt-ring-spin {
    from {
        transform: rotate(0deg);
    }

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

/* ── Mobile ── */
@media (max-width: 767px) {
    #backToTop {
        width: 44px;
        height: 44px;
        bottom: 84px;
        /* above chatbot mobile with gap */
        right: 12px;
    }

    #bttArrow svg {
        width: 17px;
        height: 17px;
    }
}