/* Custom styles from NewBranding/code.html */
.bubble-hover:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 0px 0px #e6a100;
}

.progress-bar {
    transition: width 1s ease-in-out;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.2) 10px, transparent 10px, transparent 20px);
}

.slot-border {
    border: 4px solid #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.2);
}

.retro-shadow {
    text-shadow: 3px 3px 0px #000000;
}

.bulb-grid {
    background-image: radial-gradient(#ffd700 20%, transparent 20%), radial-gradient(#ff0055 20%, transparent 20%);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
}

.text-stroke-sm {
    -webkit-text-stroke: 1px black;
    color: white;
}

.marquee-container {
    overflow: hidden;
    white-space: nowrap;
}

/* Ensure Material Symbols render correctly */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Fix for ASP.NET Validation Summaries in the new theme */
.text-danger {
    color: #ef4444 !important;
    /* Tailwind red-500 */
    font-weight: bold;
}

/* Mobile Scroll Effect: replicate hover state */
@media (max-width: 768px) {
    .hover-active {
        transform: translateY(-0.5rem) !important;
    }

    .hover-active img {
        transform: scale(1.1) !important;
    }

    /* Scheme 0: Yellow */
    .hover-active.scheme-0 {
        border-color: #facc15 !important; /* yellow-400 */
        box-shadow: 0px 10px 0px 0px #fbbf24 !important;
    }

    /* Scheme 1: Pink/Purple */
    .hover-active.scheme-1 {
        border-color: #a855f7 !important; /* purple-500 */
        box-shadow: 0px 10px 0px 0px #a855f7 !important;
    }

    /* Scheme 2: Green */
    .hover-active.scheme-2 {
        border-color: #10b981 !important; /* emerald-500 */
        box-shadow: 0px 10px 0px 0px #10b981 !important;
    }

    /* Pink Theme (Charities) */
    .hover-active.pink-theme {
        border-color: #ec4899 !important; /* pink-500 */
        box-shadow: 0px 10px 0px 0px #ec4899 !important;
    }
    /* Cashflows */
    .inputField{
        height: 48px;    padding: 12px;
    
    }
}