/* PUBG Squad Up - Global Styles */

/* CSS Variables for easy customization */
:root {
    --border-radius: 4px;
    --input-height: 48px;
    --primary-color: #FAB426;
    --primary-hover: #E8A020;
    --background-dark: #111827;
    --background-gray: #1f2937;
    --dark-blue: #111827;
    --text-white: #ffffff;
    --text-gray: #9ca3af;
    --border-gray: #4b5563;
    --border-gray-light: #6b7280;
    --focus-yellow: #f59e0b;
    --error-red: #ef4444;
}

/* Spinner Animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Reset and Base Styles */
* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
}

/* Form Elements - Consistent Height and Border Radius */
input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
select,
button {
    height: var(--input-height) !important;
    min-height: var(--input-height) !important;
    border-radius: var(--border-radius) !important;
}

/* Textarea should not have fixed height */
textarea {
    border-radius: var(--border-radius) !important;
    min-height: 100px;
}

/* Specific Form Element Styling */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
select,
textarea {
    border-radius: var(--border-radius) !important;
}

/* Ensure file inputs maintain their natural height */
input[type="file"] {
    height: auto !important;
    min-height: auto !important;
}

/* Button Styling */
button[type="submit"],
button[type="button"] {
    height: var(--input-height) !important;
    min-height: var(--input-height) !important;
    border-radius: var(--border-radius) !important;
}

/* Ensure registration form buttons are visible */
#nextStepBtn,
#prevStepBtn,
#submitBtn {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: var(--input-height) !important;
    min-height: var(--input-height) !important;
    border-radius: var(--border-radius) !important;
}

/* Disabled button styling - make sure they're still visible */
#nextStepBtn:disabled,
#submitBtn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: #FAB426 !important;
    color: #1a1a1a !important;
}

/* Next button should be visible by default */
#nextStepBtn {
    display: inline-block !important;
    background-color: #FAB426 !important;
    color: #1a1a1a !important;
}

/* Hidden buttons should be properly hidden - must come after general button rules */
#prevStepBtn.hidden,
#submitBtn.hidden,
#nextStepBtn.hidden {
    display: none !important;
}

/* Ensure TEST BUTTON is always visible */
button[onclick*="alert"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: red !important;
    color: white !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    margin-right: 16px !important;
}

/* Tailwind Class Overrides */
.rounded,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-full {
    border-radius: var(--border-radius) !important;
}

/* Specific Class Combinations */
.w-full.px-4.py-3.bg-gray-800.border.border-gray-600 {
    border-radius: var(--border-radius) !important;
}

/* Form Container Styling */
.form-container,
.card-container {
    border-radius: var(--border-radius) !important;
}

/* Utility Classes */
.border-radius-4 {
    border-radius: var(--border-radius) !important;
}

/* Focus States */
input:focus,
select:focus,
textarea:focus {
    border-radius: var(--border-radius) !important;
}

/* Hover States */
button:hover {
    border-radius: var(--border-radius) !important;
}

/* Override any inline styles */
input[style*="border-radius"],
select[style*="border-radius"],
textarea[style*="border-radius"],
button[style*="border-radius"] {
    border-radius: var(--border-radius) !important;
}

/* Nuclear option - target everything with form-related classes */
*[class*="w-full"][class*="px-4"],
*[class*="w-full"][class*="py-3"],
*[class*="bg-gray-800"],
*[class*="border"] {
    border-radius: var(--border-radius) !important;
}

/* Additional specificity for common form element combinations */
input.w-full,
select.w-full,
textarea.w-full {
    border-radius: var(--border-radius) !important;
}

/* Force border radius on all form elements with maximum specificity */
*[class*="w-full"][class*="px-4"][class*="py-3"][class*="bg-gray-800"][class*="border"] {
    border-radius: var(--border-radius) !important;
}

/* Common Inline Style Replacements */
.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-primary-hover {
    background-color: var(--primary-hover) !important;
}

.bg-black-transparent {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

.bg-black-transparent-80 {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

/* Button Hover Effects */
.btn-primary {
    background-color: var(--primary-color) !important;
    color: #1a1a1a !important;
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
}

/* Form Container Styling */
.form-dark-overlay {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

/* Background Utility Classes */
.bg-dark-blue {
    background-color: var(--dark-blue) !important;
}

/* Progress Indicator Styling */
.progress-active {
    background-color: var(--primary-color) !important;
    color: #1a1a1a !important;
}

.progress-inactive {
    background-color: #374151 !important;
    color: #9CA3AF !important;
}