/* --- Hanuman App Homepage Styles (Pixel-Perfect Layout) --- */
.emotion-btn, .emotion-btn, .floating-home-btn * {
    outline: none !important;
}

@media (max-width: 768px) {
    .emotion-btn:focus,
    .emotion-btn:active,
    .emotion-btn:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }
    
    /* Kill mobile browser defaults */
    button:focus {
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.4) !important;
    }
}




/* --- Floating Home Icon --- */
.floating-home-btn {
    position: fixed; /* Fixed position so it stays in place when scrolling */
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: rgba(244, 196, 48, 0.8); /* Saffron color, matching your theme */
    color: #fff;
    font-size: 1.8em;
    text-align: center;
    line-height: 50px; /* Vertically center the emoji */
    text-decoration: none;
    border-radius: 50%; /* Makes it a circle */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 10; /* Ensure it's on top of other content */
    transition: transform 0.2s ease, background-color 0.2s ease;
    /* ... existing styles ... */
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;

}


@media (max-width: 768px) {
    .floating-home-btn:focus,
    .floating-home-btn:active,
    .floating-home-btn:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }
    
    .floating-home-btn {
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        -webkit-touch-callout: none;
    }
}


.floating-home-btn:hover {
    transform: scale(1.1); /* Slight zoom on hover */
    background-color: rgba(0,0,0,0.9); /* Darker on hover */
}



html, body, #wrapper, #inner-wrap, #primary, .content-container, .site-main, .content-wrap, .entry-content-wrap, .entry-content {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;

}

body.hanuman-questions-page {
    background: linear-gradient(135deg, #1a1a1a, #2d3748) !important;
}


.hanuman-homepage {
    position: relative !important;
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. The video background (Overriding Everything) */
.hanuman-homepage > #bg-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important; /* Override theme constraints */
    object-fit: cover !important;
    z-index: 1 !important; /* Put it behind content, but ensure it's rendered */
}

/* ... (the rest of your CSS remains the same) ... */

/* 3. The main title */
.homepage-content h1 {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%); /* This centers the title horizontally */
    color: #FFFFFF;
    font-size: 3em;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    z-index: 4;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
}


/* Add this to your hanuman-app.css file - Floating Bubble Emotion Buttons */

/* Enhanced Bubble Button Base Styles */
.emotion-btn {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Perfect circles */
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 
        0 8px 32px rgba(255, 165, 0, 0.3),
        inset 0 2px 10px rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(10px); /* Glassy bubble effect */
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    z-index: 5 !important;
    /* ... existing styles ... */
    -webkit-tap-highlight-color: transparent; /* iOS Safari */
    -webkit-appearance: none; /* Mobile browsers */

}


.emotion-btn:focus {
    outline: none !important;
}



.emotion-btn:active {
    transform: scale(0.98) !important;
}



/* Golden Saffron Bubble Colors - Matches Hanuman theme */
.emotion-btn:nth-child(1) { /* Angry */
    background: radial-gradient(circle at 30% 30%, #FF8F29, #FAAA16, #D62B2B);
}
.emotion-btn:nth-child(2) { /* Happy */
    background: radial-gradient(circle at 70% 20%, #FBEE26, #F4C430, #FF8F29);
}
.emotion-btn:nth-child(3) { /* Sad */
    background: radial-gradient(circle at 50% 70%, #FAAA16, #87211C, #FF8F29);
}
.emotion-btn:nth-child(4) { /* Other */
    background: radial-gradient(circle at 20% 60%, #FBEE26, #F4C430, #D62B2B);
}

/* Floating Animation Keyframes */
@keyframes float1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    25% { transform: translate(20px, -15px) rotate(5deg) scale(1.05); }
    50% { transform: translate(-10px, -25px) rotate(-3deg) scale(0.98); }
    75% { transform: translate(15px, -10px) rotate(4deg) scale(1.02); }
}

@keyframes float2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(-25px, 10px) rotate(-4deg) scale(1.08); }
    66% { transform: translate(15px, -20px) rotate(6deg) scale(1.03); }
}

@keyframes float3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    20% { transform: translate(10px, 20px) rotate(3deg) scale(0.97); }
    50% { transform: translate(-20px, 5px) rotate(-5deg) scale(1.06); }
    80% { transform: translate(5px, -15px) rotate(2deg) scale(1.01); }
}

@keyframes float4 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    40% { transform: translate(-15px, -20px) rotate(4deg) scale(1.04); }
    80% { transform: translate(25px, 10px) rotate(-2deg) scale(0.99); }
}

/* Apply unique floating animations to each button */
.emotion-buttons .emotion-btn:nth-child(1) {
    animation: float1 12s ease-in-out infinite;
    top: 40%;
    left: 10%;
}

.emotion-buttons .emotion-btn:nth-child(2) {
    animation: float2 15s ease-in-out infinite reverse;
    top: 15%;
    right: 10%;
}

.emotion-buttons .emotion-btn:nth-child(3) {
    animation: float3 14s ease-in-out infinite;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
}

.emotion-buttons .emotion-btn:nth-child(4) {
    animation: float4 16s ease-in-out infinite reverse;
    bottom: 15%;
    left: 10%;
}

/* Enhanced Hover Effects - Bubbles pulse and glow */
.emotion-btn:hover {
    transform: scale(1.15) !important; /* Override animation */
    box-shadow: 
        0 20px 60px rgba(255, 165, 0, 0.6),
        0 0 30px rgba(255, 255, 255, 0.4),
        inset 0 2px 15px rgba(255, 255, 255, 0.3);
    background-size: 120% 120% !important;
    animation-play-state: paused; /* Pause floating during hover */
}

/* Subtle shimmer effect on hover */
.emotion-btn:hover::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: conic-gradient(transparent, rgba(255,255,255,0.4), transparent);
    border-radius: 50%;
    animation: shimmer 1.5s infinite;
    z-index: -1;
}

@keyframes shimmer {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .emotion-btn {
        width: 140px;
        height: 140px;
        font-size: 1em;
    }
    
    .emotion-buttons .emotion-btn:nth-child(1) { left: 5%; }
    .emotion-buttons .emotion-btn:nth-child(2) { right: 5%; }
    .emotion-buttons .emotion-btn:nth-child(4) { left: 5%; }
}



/* --- Questions Page Styles (Complete & Final) --- */
.hanuman-questions-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a1a, #2d3748); /* A professional dark gradient */
    padding: 20px;
    box-sizing: border-box;
     background: url('https://hanuman.aazhtra.in/wp-content/uploads/2025/12/sacred_golden_gada_of_lord_hanuman_placed.jpeg') center/cover no-repeat fixed !important;
}

.question-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 50px;
}

#questions-container.loading {
    text-align: center;
    color: white;
    font-size: 1.5em;
}

/* --- Desktop Grid Styles --- */
.desktop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 150px;
    gap: 25px;
}

.question-button.desktop-style {
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid #F4C430;
    border-radius: 12px;
    padding: 20px;
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.question-button.desktop-style:hover {
    background-color: #F4C430;
    color: #fff;
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* --- Mobile Stack & Scrollable Styles --- */
.mobile-stack {
    position: relative;
    width: 100%;
    height: 80vh; /* Use most of the viewport height */
    overflow-y: auto; /* Make it scrollable */
    scroll-snap-type: y mandatory; /* Enable snap scrolling */
    padding: 10px 0; /* Add some padding */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stack-card {
    width: 80%;
    max-width: 300px;
    height: 120px;
    margin: 15px auto; /* Center the card horizontally */
    background-color: rgba(244, 196, 48, 0.9);
    color: #333;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    scroll-snap-align: center; /* Each card will snap to center */
    border: 2px solid #fff;
}

.stack-card.active {
    background-color: #F4C430; /* Highlight with saffron */
    color: #fff;
    transform: scale(1.05); /* Lift it up slightly */
    box-shadow: 0 8px 25px rgba(244, 196, 48, 0.6); /* Larger shadow for depth */
    z-index: 2; /* Ensure it's above other cards */
}

.stack-nav {
    position: fixed; /* Fixed position so it doesn't scroll */
    bottom: 20px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    font-size: 2em;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
}
.stack-nav.prev { left: 20px; }
.stack-nav.next { right: 20px; }