/* Custom styles extending Tailwind */

/* ============================================================
   CRITICAL: PREVENT HORIZONTAL OVERFLOW ON MOBILE
   Without this, glow orbs and absolute elements can cause
   the page to be wider than the screen, making everything
   appear shifted/cut off on mobile browsers.
============================================================ */
html {
    overflow-x: hidden !important;
    max-width: 100vw;
}

body {
    overflow-x: hidden !important;
    max-width: 100%;
    background-color: #050505; /* Deep dark background */
}

/* Glassmorphism utilities if needed */
.glass {
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #1a1a1a;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2a2a2a;
}

/* Typography polish */
.prose h1, .prose h2, .prose h3 {
    color: #ffffff;
}

.prose p {
    color: #9ca3af;
}

.prose a {
    color: #22c55e;
}

.prose a:hover {
    color: #16a34a;
}

/* Fix for range slider */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #22c55e; /* Tailwind green-500 */
    cursor: pointer;
    margin-top: -6px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #1a1a1a;
    border-radius: 2px;
}

select.custom-native-select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23A8FF35%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}