/* Circular Action Panel - FAB Style with Half-Circle Radial Menu */
/* Bottom-right floating action button with semi-radial expansion */

:root {
    --action-gold: #D4AF37;
    --action-gold-light: #FFD700;
    --action-gold-dark: #B8860B;
    --action-saffron: #FF9933;
    --action-red: #8B0000;
    --action-white: #FFF8DC;
    
    /* Responsive radius variables */
    --radius-mobile: min(45vw, 160px);
    --radius-desktop: min(30vw, 280px);
    
    /* Button colors for distinct actions */
    --color-home: #4CAF50;
    --color-darshan: #FF9800;
    --color-sloka: #9C27B0;
    --color-routes: #2196F3;
    --color-emergency: #f44336;
    --color-chatbot: #00BCD4;
    --color-social: #E91E63;
    --color-permission: #795548;
    --color-idcard: #607D8B;
    --color-admin: #FF5722;
}

/* Circular Action Panel Container */
.circular-action-panel {
    position: fixed;
    bottom: env(safe-area-inset-bottom, 16px);
    right: env(safe-area-inset-right, 16px);
    z-index: 1000;
    pointer-events: none;
}

.action-panel-container {
    position: relative;
    width: clamp(56px, 8vw, 72px);
    height: clamp(56px, 8vw, 72px);
}

/* Main Action Button (FAB) - Perfect Circle */
.main-action-btn {
    position: relative;
    width: clamp(56px, 8vw, 72px);
    height: clamp(56px, 8vw, 72px);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--action-gold) 0%, var(--action-gold-dark) 100%);
    border: 4px solid var(--action-gold-light);
    box-shadow: 
        0 4px 12px rgba(212, 175, 55, 0.4),
        0 0 20px rgba(212, 175, 55, 0.3),
        inset 0 2px 8px rgba(255, 255, 255, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: all;
    z-index: 1001;
    touch-action: manipulation;
}

.main-action-btn:hover {
    transform: scale(1.1);
    box-shadow: 
        0 6px 16px rgba(212, 175, 55, 0.5),
        0 0 30px rgba(212, 175, 55, 0.4),
        inset 0 2px 10px rgba(255, 255, 255, 0.4);
}

.main-action-btn:active {
    transform: scale(0.95);
}

.main-action-btn:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.main-action-icon {
    font-size: clamp(24px, 4vw, 32px);
    color: var(--action-red);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: actionPulse 2s ease-in-out infinite;
}

@keyframes actionPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Action Rings Animation */
.action-rings {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--action-gold-light);
    opacity: 0;
    animation: ringExpand 2s ease-out infinite;
}

@keyframes ringExpand {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Half-Circle Action Menu Container */
.action-buttons-circle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 100% 0 0 0;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.8);
    transform-origin: bottom right;
    transition: 
        transform 0.3s ease,
        opacity 0.2s ease;
    z-index: 1000;
    max-width: 100vw;
    max-height: 100vh;
}

.circular-action-panel.expanded .action-buttons-circle {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

/* Individual Circular Action Button */
.circular-action-btn {
    position: absolute;
    width: clamp(44px, 6vw, 52px);
    height: clamp(44px, 6vw, 52px);
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--action-gold) 0%, var(--action-gold-dark) 100%);
    border: 3px solid var(--action-gold-light);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 16px rgba(0, 0, 0, 0.2),
        inset 0 2px 6px rgba(255, 255, 255, 0.3);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: all !important;
    bottom: 0;
    right: 0;
    transform-origin: center;
    transform: 
        rotate(var(--angle, 0deg))
        translate(var(--radius, 0px))
        rotate(calc(-1 * var(--angle, 0deg)))
        scale(0);
    opacity: 0;
    z-index: 1001;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.circular-action-panel.expanded .circular-action-btn {
    transform: 
        rotate(var(--angle, 0deg))
        translate(var(--radius, 0px))
        rotate(calc(-1 * var(--angle, 0deg)))
        scale(1);
    opacity: 1;
    transition: 
        transform 0.3s ease var(--delay, 0s),
        opacity 0.2s ease var(--delay, 0s);
    pointer-events: all !important;
}

.circular-action-btn:hover {
    transform: 
        rotate(var(--angle, 0deg))
        translate(var(--radius, 0px))
        rotate(calc(-1 * var(--angle, 0deg)))
        scale(1.15) !important;
    box-shadow: 
        0 6px 16px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(0, 0, 0, 0.3),
        inset 0 2px 8px rgba(255, 255, 255, 0.4);
    z-index: 1002;
}

.circular-action-btn:active {
    transform: 
        rotate(var(--angle, 0deg))
        translate(var(--radius, 0px))
        rotate(calc(-1 * var(--angle, 0deg)))
        scale(0.95) !important;
}

.circular-action-btn:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Distinct colors for each action type */
.circular-action-btn[data-action="showHomeContent"],
.circular-action-btn#homeBtn {
    background: linear-gradient(135deg, var(--color-home) 0%, #388E3C 100%);
    border-color: #66BB6A;
}

.circular-action-btn[data-action="darshan"],
.circular-action-btn#darshanBtn {
    background: linear-gradient(135deg, var(--color-darshan) 0%, #F57C00 100%);
    border-color: #FFB74D;
}

.circular-action-btn[data-action="sloka"],
.circular-action-btn#slokaBtn {
    background: linear-gradient(135deg, var(--color-sloka) 0%, #7B1FA2 100%);
    border-color: #BA68C8;
}

.circular-action-btn[data-action="routes"],
.circular-action-btn#routesBtn {
    background: linear-gradient(135deg, var(--color-routes) 0%, #1976D2 100%);
    border-color: #64B5F6;
}

.circular-action-btn[data-action="emergency"],
.circular-action-btn#emergencyBtn {
    background: linear-gradient(135deg, var(--color-emergency) 0%, #C62828 100%);
    border-color: #EF5350;
    animation: emergencyPulse 2s ease-in-out infinite;
}

.circular-action-btn[data-action="chatbot"],
.circular-action-btn#chatbotBtn {
    background: linear-gradient(135deg, var(--color-chatbot) 0%, #0097A7 100%);
    border-color: #4DD0E1;
}

.circular-action-btn[data-action="social"],
.circular-action-btn#socialBtn {
    background: linear-gradient(135deg, var(--color-social) 0%, #C2185B 100%);
    border-color: #F48FB1;
}

.circular-action-btn[data-action="permission"],
.circular-action-btn#permissionBtn {
    background: linear-gradient(135deg, var(--color-permission) 0%, #5D4037 100%);
    border-color: #A1887F;
}

.circular-action-btn[data-action="idCard"],
.circular-action-btn#idCardBtn {
    background: linear-gradient(135deg, var(--color-idcard) 0%, #455A64 100%);
    border-color: #90A4AE;
}

.circular-action-btn[data-action="adminApproval"],
.circular-action-btn#adminApprovalBtn,
.circular-action-btn[data-action="adminIdApproval"],
.circular-action-btn#adminIdApprovalBtn,
.circular-action-btn[data-action="adminEmployees"],
.circular-action-btn#adminEmployeesBtn,
.circular-action-btn[data-action="hotelSurvey"],
.circular-action-btn#hotelSurveyBtn {
    background: linear-gradient(135deg, var(--color-admin) 0%, #D84315 100%);
    border-color: #FF8A65;
}

@keyframes emergencyPulse {
    0%, 100% { 
        box-shadow: 0 4px 12px rgba(244, 67, 54, 0.5), 0 0 16px rgba(244, 67, 54, 0.3); 
    }
    50% { 
        box-shadow: 0 6px 20px rgba(244, 67, 54, 0.8), 0 0 24px rgba(244, 67, 54, 0.6); 
    }
}

.action-icon {
    font-size: clamp(20px, 3vw, 24px);
    line-height: 1;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
    pointer-events: none;
    user-select: none;
}

.action-label {
    font-size: clamp(8px, 1.2vw, 10px);
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
    user-select: none;
}

.action-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.circular-action-btn:hover .action-glow {
    opacity: 1;
    animation: glowPulse 1.5s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

/* Mobile Responsive - Boundary Constraints */
@media (max-width: 768px) {
    .circular-action-panel {
        bottom: env(safe-area-inset-bottom, 12px);
        right: env(safe-area-inset-right, 12px);
    }
    
    .action-panel-container {
        width: clamp(56px, 10vw, 64px);
        height: clamp(56px, 10vw, 64px);
    }
    
    .main-action-btn {
        width: clamp(56px, 10vw, 64px);
        height: clamp(56px, 10vw, 64px);
    }
    
    .action-buttons-circle {
        max-width: 100vw;
        max-height: 100vh;
        overflow: hidden;
    }
    
    .circular-action-btn {
        width: clamp(44px, 7vw, 48px);
        height: clamp(44px, 7vw, 48px);
        min-width: 44px;
        min-height: 44px;
    }
}

/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
    .action-buttons-circle {
        max-width: 50vw;
        max-height: 50vh;
        overflow: hidden;
    }
}

/* Desktop - Ensure no overflow */
@media (min-width: 1025px) {
    .action-buttons-circle {
        max-width: 50vw;
        max-height: 50vh;
        overflow: hidden;
    }
}