/* ================== CHOR TOPUP PREMIUM UI/UX DESIGN ================== */
    .fab-custom-container {
        position: fixed;
        bottom: 85px; /* Sits perfectly above the bottom sticky menu */
        right: 20px; /* Aligned nicely with margins */
        z-index: 2500;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        pointer-events: none;
    }

    /* 1. Closed State Main Trigger */
    .fab-custom-main-trigger {
        width: 60px; /* Reduced to sit compactly on mobile screen sizes */
        height: 60px;
        border-radius: 50%;
        background: transparent !important;
        border: none;
        cursor: pointer;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none !important;
        padding: 0;
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        pointer-events: auto;
    }

    /* Pulsating Translucent Outer Glow Ring */
    .fab-custom-main-trigger::before {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: rgba(124, 58, 237, 0.22);
        animation: fab-glow-pulse 2s infinite ease-in-out;
        z-index: 1;
    }

    /* Vibrant Purple Middle Ring (Closed State) */
    .fab-outer-purple-ring {
        width: 50px; /* Scaled down */
        height: 50px;
        border-radius: 50%;
        background: #7c3aed; 
        border: 2px solid #7c3aed;
        box-shadow: 0 8px 22px rgba(124, 58, 237, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
        transition: all 0.3s ease;
    }

    /* Orange Gradient Circle with crisp white outline */
    .fab-inner-orange-gradient {
        width: 38px; /* Scaled down */
        height: 38px;
        border-radius: 50%;
        background: linear-gradient(135deg, #FF8A00, #E52E00);
        border: 2px solid #ffffff; 
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25);
    }

    /* Custom SVG Bubble scale adjustment */
    .fab-inner-orange-gradient svg {
        width: 18px;
        height: 18px;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
    }

    /* Closed State wrapper animation toggle */
    .fab-closed-state {
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        opacity: 1;
        transform: scale(1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 2. Active Close State ("X" Button UI matching Image 2) */
    .fab-open-state {
        position: absolute;
        inset: 4px;
        background: linear-gradient(135deg, #8b5cf6, #6366f1);
        border-radius: 50%;
        border: 3px solid rgba(255, 255, 255, 0.25);
        box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        opacity: 0;
        transform: scale(0.5) rotate(-45deg);
        transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 3;
    }

    .fab-open-state svg {
        width: 18px;
        height: 18px;
        stroke-width: 3.5;
    }

    /* Toggled animations on active main trigger */
    .fab-custom-container.active .fab-closed-state {
        opacity: 0;
        transform: scale(0.5) rotate(45deg);
    }

    .fab-custom-container.active .fab-open-state {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    /* 3. Dark Premium Support Options Panel */
    .fab-custom-options {
        width: 290px; /* Reduced width for better compact look */
        max-width: calc(100vw - 40px);
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;
        padding: 18px;
        border-radius: 20px;
        background: rgba(13, 19, 31, 0.95); 
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1.5px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
        opacity: 0;
        transform: scale(0.85) translateY(30px);
        visibility: hidden;
        transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.2);
        pointer-events: none;
    }

    .fab-custom-container.active .fab-custom-options {
        opacity: 1;
        transform: scale(1) translateY(0);
        visibility: visible;
        pointer-events: auto;
    }

    /* Headings */
    .fab-options-title {
        font-size: 1.05rem;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 14px;
        font-family: 'Hind Siliguri', sans-serif;
        letter-spacing: 0.02em;
    }

    /* Individual options */
    .fab-options-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .fab-custom-option {
        display: flex;
        align-items: center;
        padding: 10px 14px;
        border-radius: 14px;
        color: white !important;
        text-decoration: none !important;
        transition: all 0.25s ease;
        box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    }

    .fab-custom-option:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 10px 24px rgba(0,0,0,0.22);
        filter: brightness(1.1);
    }

    /* Social Gradients */
    .fab-whatsapp { 
        background: linear-gradient(135deg, #10b981, #059669); 
    }
    .fab-telegram { 
        background: linear-gradient(135deg, #0ea5e9, #0284c7); 
    }
    .fab-messenger { 
        background: linear-gradient(135deg, #2563eb, #1d4ed8); 
    }

    /* Left Icon Container */
    .fab-option-icon-box {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.16);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    /* Right Content */
    .fab-option-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .fab-option-title {
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .fab-option-subtitle {
        font-size: 0.78rem;
        opacity: 0.85;
        margin-top: 1px;
        letter-spacing: 0.02em;
    }

    /* Help side text trigger label */
    .fab-custom-trigger-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* 4. Pulsing and Breathing Animations */
    @keyframes fab-glow-pulse {
        0% { transform: scale(0.96); opacity: 0.5; }
        50% { transform: scale(1.08); opacity: 0.75; }
        100% { transform: scale(0.96); opacity: 0.5; }
    }

    @keyframes fab-attention-pulse {
        0% { transform: translateY(0); }
        50% { transform: translateY(-4px); }
        100% { transform: translateY(0); }
    }

    .fab-custom-main-trigger.attention {
        animation: fab-attention-pulse 3.8s ease-in-out infinite;
        will-change: transform;
    }