/* =========================================================
   UGL FLOATING WHATSAPP BUTTON
   Luxury white + champagne-gold circle with the WhatsApp
   icon; fills WhatsApp green on hover. Sits in the
   bottom-right corner; the back-to-top button stacks above.
   Unique "ugl-wa-*-x1" classes only.
   ========================================================= */

.ugl-wa-x1 {
    --ugl-wa-size: 60px;
    --ugl-wa-gap: 28px;

    position: fixed;
    right: var(--ugl-wa-gap);
    bottom: var(--ugl-wa-gap);
    z-index: 99990;              /* below the navbar/menu (99999) */

    width: var(--ugl-wa-size);
    height: var(--ugl-wa-size);

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

    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- circle ---------- */

.ugl-wa-circle-x1 {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 30% 25%,
            #FFFFFF 0%,
            #FAF8F2 55%,
            #F3EEE2 100%
        );
    border: 1px solid rgba(214, 181, 106, 0.75);
    box-shadow:
        0 12px 30px rgba(43, 45, 49, 0.16),
        inset 0 0 0 3px rgba(214, 181, 106, 0.10);
    color: #1FAF5A;
    font-size: calc(var(--ugl-wa-size) * 0.47);
    transition:
        transform 0.35s cubic-bezier(.22, 1, .36, 1),
        background 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

/* thin gold outer ring */
.ugl-wa-circle-x1::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(214, 181, 106, 0.45);
    transition: inset 0.35s ease, border-color 0.35s ease;
}

/* ---------- soft gold halo (gentle pulse) ---------- */

.ugl-wa-halo-x1 {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    background: rgba(214, 181, 106, 0.30);
    animation: uglWaHaloX1 3.2s ease-out infinite;
    pointer-events: none;
}

@keyframes uglWaHaloX1 {
    0%   { transform: scale(1);    opacity: 0.55; }
    70%  { transform: scale(1.55); opacity: 0;    }
    100% { transform: scale(1.55); opacity: 0;    }
}

/* ---------- label (slides out on hover / focus) ---------- */

.ugl-wa-label-x1 {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    white-space: nowrap;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid rgba(214, 181, 106, 0.55);
    box-shadow: 0 12px 30px rgba(43, 45, 49, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translate(10px, -50%);
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.35s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}

.ugl-wa-label-x1 strong {
    color: #2B2D31;
    font-family: "Poppins", "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.ugl-wa-label-x1 small {
    color: #7A5F2A;
    font-family: "Poppins", "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

/* ---------- hover / focus ---------- */

.ugl-wa-x1:hover .ugl-wa-circle-x1,
.ugl-wa-x1:focus-visible .ugl-wa-circle-x1 {
    transform: translateY(-3px);
    color: #FFFFFF;
    background: linear-gradient(135deg, #25D366 0%, #1FAF5A 55%, #128C7E 100%);
    border-color: rgba(214, 181, 106, 0.95);
    box-shadow:
        0 16px 34px rgba(18, 140, 126, 0.30),
        0 0 0 3px rgba(214, 181, 106, 0.25);
}

.ugl-wa-x1:hover .ugl-wa-circle-x1::after,
.ugl-wa-x1:focus-visible .ugl-wa-circle-x1::after {
    inset: -8px;
    border-color: rgba(214, 181, 106, 0.75);
}

.ugl-wa-x1:hover .ugl-wa-label-x1,
.ugl-wa-x1:focus-visible .ugl-wa-label-x1 {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

.ugl-wa-x1:focus-visible {
    outline: none;
}

.ugl-wa-x1:focus-visible .ugl-wa-circle-x1 {
    outline: 2px solid #A9853F;
    outline-offset: 10px;
}

.ugl-wa-x1:active .ugl-wa-circle-x1 {
    transform: translateY(0) scale(0.96);
}

/* ---------- back-to-top stacks above the WhatsApp button ---------- */

.asr-scrolltop-x9 {
    bottom: calc(28px + 60px + 16px);
}

/* ---------- responsive (matches the back-to-top sizes) ---------- */

@media (max-width: 991px) {
    .ugl-wa-x1 {
        --ugl-wa-size: 55px;
        --ugl-wa-gap: 22px;
    }
    .asr-scrolltop-x9 {
        bottom: calc(22px + 55px + 14px);
    }
}

@media (max-width: 600px) {
    .ugl-wa-x1 {
        --ugl-wa-size: 51px;
        --ugl-wa-gap: 17px;
    }
    .asr-scrolltop-x9 {
        bottom: calc(17px + 51px + 12px);
    }
    /* touch screens: no hover label */
    .ugl-wa-label-x1 {
        display: none;
    }
}

@media (max-width: 390px) {
    .ugl-wa-x1 {
        --ugl-wa-size: 48px;
        --ugl-wa-gap: 14px;
    }
    .asr-scrolltop-x9 {
        bottom: calc(14px + 48px + 12px);
    }
}

/* ---------- accessibility / print ---------- */

@media (prefers-reduced-motion: reduce) {
    .ugl-wa-halo-x1 {
        animation: none;
        opacity: 0;
    }
    .ugl-wa-circle-x1,
    .ugl-wa-circle-x1::after,
    .ugl-wa-label-x1 {
        transition: none;
    }
}

@media print {
    .ugl-wa-x1 {
        display: none;
    }
}