@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    background-color: #000;
}

[x-cloak] { 
    display: none !important; 
}


input[type="number"], input[type="text"] {
    width: 40px; /* Adjust width */
    height: 40px; /* Make it square */
    font-size: 21px; /* Larger numbers */
    text-align: center; /* Centre the numbers */
    border: 2px solid #ccc; /* Optional: for styling */
    border-radius: 5px; /* Optional: rounded corners */
    background-color: #f9f9f9; /* Optional: light background */
    outline: none; /* Remove outline on focus */
    appearance: none; /* Remove browser-specific styles */
}

/* Remove spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}

/* Custom button styles */
button {
    background-color: #7d0e35 !important;
    color: white !important;
}

button:hover {
    background-color: #5a0a26 !important;
}

/* Custom margin classes */
.mr-4 {
    margin-right: 1rem;
}

/* Custom width for radio image */
.w-\[200px\] {
    width: 200px;
}

/* Hide landscape warning by default */
.landscape-warning {
    display: none !important;
}

/* Show warning in portrait mode on mobile */
@media screen and (orientation: portrait) and (max-width: 768px) {
    .landscape-warning {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.95);
        z-index: 9999;
        color: white;
        font-size: 18px;
        text-align: center;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}