/* ============================================
   VINEET PANICKER — PREMIUM CONSULT WIDGET
   Crimson Red | Antique Gold | Rounded Rectangle
   ============================================ */

.vp-consult-pill {
    --consult-gold: #f5d7a3;
    --consult-gold-soft: #ffe9c4;
    --consult-red: var(--color-primary, #D10023);
    --consult-red-dark: #850018;
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 142px;
    padding: 16px 19px;
    background: radial-gradient( circle at 50% 0%, rgb(255 255 255 / 12%), transparent 65% ), linear-gradient( 145deg, var(--consult-red) 0%, #a8001c 58%, var(--consult-red-dark) 100% );
    border: 1px solid rgb(245 215 163 / 75%);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgb(83 0 18 / 30%), 0 3px 8px rgb(45 0 10 / 18%), inset 0 1px 0 rgb(255 255 255 / 25%);
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

    /* Subtle inner gold outline */
    .vp-consult-pill::before {
        content: "";
        position: absolute;
        inset: 4px;
        border: 1px solid rgb(255 232 190 / 18%);
        border-radius: 13px;
        pointer-events: none;
    }

    /* Gentle hover lift */
    .vp-consult-pill:hover {
        border-color: var(--consult-gold-soft);
        box-shadow: 0 16px 38px rgb(83 0 18 / 36%), 0 5px 12px rgb(45 0 10 / 18%), inset 0 1px 0 rgb(255 255 255 / 28%);
    }

/* ============================================
   EYEBROW TEXT
   ============================================ */

.vp-consult-pill__eyebrow {
    display: block;
    color: var(--consult-gold-soft);
    font-family: var(--font-body, "DM Sans"), sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
}

/* ============================================
   ICON ROW
   ============================================ */

.vp-consult-pill__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Individual circular icon buttons */
.vp-consult-pill__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

    /* SVG sizing */
    .vp-consult-pill__button svg {
        display: block;
        width: 21px;
        height: 21px;
    }

/* ============================================
   WHATSAPP — ORIGINAL GREEN ICON
   ============================================ */

.vp-consult-pill__button--whatsapp {
    color: #25D366;
    background: #fff;
    border: 1px solid rgb(255 255 255 / 90%);
    box-shadow: 0 3px 9px rgb(50 0 10 / 18%), inset 0 1px 0 #fff;
}

    .vp-consult-pill__button--whatsapp:hover {
        color: #128C4A;
        background: #f0fff5;
        transform: translateY(-3px);
        box-shadow: 0 6px 14px rgb(50 0 10 / 24%), 0 0 0 3px rgb(37 211 102 / 20%);
    }

/* ============================================
   PHONE — PREMIUM GOLD ICON
   ============================================ */

.vp-consult-pill__button--call {
    color: #ffe2a1;
    background: rgb(75 0 17 / 32%);
    border: 1px solid rgb(255 226 161 / 75%);
    box-shadow: 0 3px 9px rgb(50 0 10 / 15%), inset 0 1px 0 rgb(255 255 255 / 10%);
}

    .vp-consult-pill__button--call:hover {
        color: #fff3d5;
        background: rgb(75 0 17 / 58%);
        transform: translateY(-3px);
        box-shadow: 0 6px 14px rgb(50 0 10 / 24%), 0 0 0 3px rgb(255 226 161 / 15%);
    }

/* Keyboard accessibility */
.vp-consult-pill__button:focus-visible {
    outline: 2px solid #fff1cf;
    outline-offset: 4px;
}

/* ============================================
   TABLET RESPONSIVENESS
   ============================================ */

@media (max-width: 768px) {
    .vp-consult-pill {
        right: 18px;
        bottom: 18px;
        min-width: 134px;
        padding: 13px 16px 14px;
        gap: 9px;
        border-radius: 16px;
    }

        .vp-consult-pill::before {
            border-radius: 11px;
        }

    .vp-consult-pill__actions {
        gap: 10px;
    }

    .vp-consult-pill__button {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

        .vp-consult-pill__button svg {
            width: 20px;
            height: 20px;
        }
}

/* ============================================
   MOBILE RESPONSIVENESS
   ============================================ */

@media (max-width: 480px) {
    .vp-consult-pill {
        right: 13px;
        bottom: max(13px, env(safe-area-inset-bottom));
        min-width: 122px;
        padding: 12px 14px 13px;
        gap: 8px;
        border-radius: 14px;
    }

        .vp-consult-pill::before {
            border-radius: 9px;
        }

    .vp-consult-pill__eyebrow {
        font-size: 9px;
        letter-spacing: 1.7px;
    }

    .vp-consult-pill__actions {
        gap: 9px;
    }

    .vp-consult-pill__button {
        width: 37px;
        height: 37px;
        flex-basis: 37px;
    }

        .vp-consult-pill__button svg {
            width: 19px;
            height: 19px;
        }
}

/* ============================================
   VERY SMALL PHONES
   ============================================ */

@media (max-width: 350px) {
    .vp-consult-pill {
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        min-width: 116px;
        padding: 11px 12px 12px;
        border-radius: 13px;
    }

        .vp-consult-pill::before {
            border-radius: 8px;
        }

    .vp-consult-pill__eyebrow {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .vp-consult-pill__actions {
        gap: 8px;
    }

    .vp-consult-pill__button {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

        .vp-consult-pill__button svg {
            width: 18px;
            height: 18px;
        }
}

/* ============================================
   REDUCED MOTION ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .vp-consult-pill,
    .vp-consult-pill__button {
        transition: none;
    }

        .vp-consult-pill__button:hover {
            transform: none;
        }
}



/* Initially hide the consultation widget */
.vp-consult-pill {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
}

    /* Reveal after the delay */
    .vp-consult-pill.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .vp-consult-pill {
        transition: none;
    }
}



/* ==========================================
   SUBTLE LUXURY ATTENTION ANIMATION
   Starts after the widget becomes visible
   ========================================== */

.vp-consult-pill.is-visible {
    animation: consultGentleFloat 3.5s ease-in-out infinite;
    transform-origin: center;
}

/* Gentle floating with a tiny side-to-side movement */
@keyframes consultGentleFloat {
    0%, 76%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    80% {
        transform: translateY(-2px) rotate(-0.7deg);
    }

    84% {
        transform: translateY(0) rotate(0.7deg);
    }

    88% {
        transform: translateY(-1px) rotate(-0.4deg);
    }

    92% {
        transform: translateY(0) rotate(0deg);
    }
}

/* Keep hover interaction smooth */
.vp-consult-pill.is-visible:hover {
    animation-play-state: paused;
}

/* Respect reduced-motion accessibility settings */
@media (prefers-reduced-motion: reduce) {
    .vp-consult-pill.is-visible {
        animation: none;
    }
}