/* Customizing Native Dropdown Arrows */
select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

select option {
    background-color: #1e293b; 
    color: white;
}

/* =========================================
   GENERAL THEME OVERRIDES (Flipped)
   ========================================= */

/* Flip the gradient to start with Blue and end with Yellow */
body {
    background: linear-gradient(135deg, #0ea5e9 0%, #10b981 50%, #facc15 100%) !important;
}

/* Flip the floating glowing shapes to contrast the new background */
.bg-shapes div:nth-child(1) {
    background-color: rgba(250, 204, 21, 0.25) !important; /* Yellow glow over the blue top-left */
}

.bg-shapes div:nth-child(2) {
    background-color: rgba(14, 165, 233, 0.25) !important; /* Blue glow over the yellow bottom-right */
}