/* ============================================
   FIX AUTH MODAL - Tailwind fallback for products page
   ============================================ */
#auth-modal {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 99999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

#auth-modal.show {
    display: flex !important;
}

/* Hidden class (Tailwind fallback) */
#auth-modal .hidden {
    display: none !important;
}

/* Modal content panel */
#auth-modal .bg-white {
    background-color: #fff !important;
}
#auth-modal .rounded-3xl {
    border-radius: 1.5rem !important;
}
#auth-modal .rounded-t-3xl {
    border-top-left-radius: 1.5rem !important;
    border-top-right-radius: 1.5rem !important;
}
#auth-modal .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}
#auth-modal .max-w-md {
    max-width: 28rem !important;
}
#auth-modal .w-full {
    width: 100% !important;
}

/* Header gradient */
#auth-modal .bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-from, #7c3aed), var(--tw-gradient-via, #7c3aed), var(--tw-gradient-to, #3730a3)) !important;
}
/* Specific gradient for modal header */
#auth-modal .from-purple-600 {
    --tw-gradient-from: #7c3aed !important;
}
#auth-modal .via-purple-700 {
    --tw-gradient-via: #6d28d9 !important;
}
#auth-modal .to-indigo-800 {
    --tw-gradient-to: #3730a3 !important;
}

/* Spacing */
#auth-modal .p-8 {
    padding: 2rem !important;
}
#auth-modal .p-4 {
    padding: 1rem !important;
}
#auth-modal .mb-2 {
    margin-bottom: 0.5rem !important;
}
#auth-modal .mb-3 {
    margin-bottom: 0.75rem !important;
}
#auth-modal .mb-4 {
    margin-bottom: 1rem !important;
}
#auth-modal .mb-6 {
    margin-bottom: 1.5rem !important;
}
#auth-modal .mt-1 {
    margin-top: 0.25rem !important;
}
#auth-modal .mt-2 {
    margin-top: 0.5rem !important;
}
#auth-modal .space-y-6 > * + * {
    margin-top: 1.5rem !important;
}

/* Text alignment & sizing */
#auth-modal .text-center {
    text-align: center !important;
}
#auth-modal .text-right {
    text-align: right !important;
}
#auth-modal .text-2xl {
    font-size: 1.5rem !important;
}
#auth-modal .text-lg {
    font-size: 1.125rem !important;
}
#auth-modal .text-sm {
    font-size: 0.875rem !important;
}
#auth-modal .text-xs {
    font-size: 0.75rem !important;
}
#auth-modal .font-bold {
    font-weight: 700 !important;
}
#auth-modal .font-medium {
    font-weight: 500 !important;
}
#auth-modal .font-semibold {
    font-weight: 600 !important;
}
#auth-modal .text-white {
    color: #fff !important;
}
#auth-modal .text-gray-400 {
    color: #9ca3af !important;
}
#auth-modal .text-gray-500 {
    color: #6b7280 !important;
}
#auth-modal .text-gray-600 {
    color: #4b5563 !important;
}
#auth-modal .text-gray-700 {
    color: #374151 !important;
}
#auth-modal .text-gray-800 {
    color: #1f2937 !important;
}
#auth-modal .text-black {
    color: #000 !important;
}
#auth-modal .text-purple-100 {
    color: #ede9fe !important;
}
#auth-modal .text-purple-600 {
    color: #7c3aed !important;
}

/* Buttons */
#auth-modal .bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-from, #7c3aed), var(--tw-gradient-to, #4f46e5)) !important;
}
#auth-modal .from-purple-600 {
    --tw-gradient-from: #7c3aed !important;
}
#auth-modal .to-indigo-600 {
    --tw-gradient-to: #4f46e5 !important;
}
#auth-modal .from-green-500 {
    --tw-gradient-from: #22c55e !important;
}
#auth-modal .to-emerald-600 {
    --tw-gradient-to: #059669 !important;
}
#auth-modal .from-purple-100 {
    --tw-gradient-from: #ede9fe !important;
}
#auth-modal .to-indigo-100 {
    --tw-gradient-to: #e0e7ff !important;
}
#auth-modal .bg-white\/90 {
    background-color: rgba(255, 255, 255, 0.9) !important;
}
#auth-modal .bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2) !important;
}
#auth-modal .bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

#auth-modal .py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
#auth-modal .px-5 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}
#auth-modal .px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
#auth-modal .rounded-xl {
    border-radius: 0.75rem !important;
}
#auth-modal .rounded-2xl {
    border-radius: 1rem !important;
}
#auth-modal .rounded-full {
    border-radius: 9999px !important;
}
#auth-modal .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
}

/* Input fields */
#auth-modal .border-2 {
    border-width: 2px !important;
}
#auth-modal .border-gray-200 {
    border-color: #e5e7eb !important;
}
#auth-modal input {
    font-family: inherit !important;
}
#auth-modal input[type="tel"],
#auth-modal input[type="text"] {
    padding: 1rem 1.25rem !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 0.75rem !important;
    font-size: 0.875rem !important;
    transition: all 0.2s !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#auth-modal input:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1) !important;
    transform: translateY(-2px) !important;
}
#auth-modal #otp-input {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5em !important;
    text-align: center !important;
}
#auth-modal #phone-input {
    text-align: center !important;
    font-size: 1.125rem !important;
    font-weight: 500 !important;
}

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

/* Buttons */
#auth-modal button {
    cursor: pointer !important;
    font-family: inherit !important;
    border: none !important;
    font-weight: 700 !important;
    border-radius: 0.75rem !important;
    padding: 1rem 1.5rem !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
}
#auth-modal button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

/* Specific button overrides */
#auth-modal #resend-btn {
    background: transparent !important;
    color: #7c3aed !important;
    padding: 0.5rem !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    display: inline !important;
    width: auto !important;
}
#auth-modal #resend-btn:hover {
    transform: none !important;
    box-shadow: none !important;
}
#auth-modal #resend-btn:disabled {
    color: #9ca3af !important;
    cursor: not-allowed !important;
}

/* Close button */
#auth-modal .absolute {
    position: absolute !important;
}
#auth-modal .top-4 {
    top: 1rem !important;
}
#auth-modal .left-4 {
    left: 1rem !important;
}
#auth-modal .w-10 {
    width: 2.5rem !important;
}
#auth-modal .h-10 {
    height: 2.5rem !important;
}
#auth-modal .w-16 {
    width: 4rem !important;
}
#auth-modal .h-16 {
    height: 4rem !important;
}
#auth-modal .w-20 {
    width: 5rem !important;
}
#auth-modal .h-20 {
    height: 5rem !important;
}
#auth-modal .w-24 {
    width: 6rem !important;
}
#auth-modal .h-24 {
    height: 6rem !important;
}
#auth-modal .w-32 {
    width: 8rem !important;
}
#auth-modal .h-32 {
    height: 8rem !important;
}
#auth-modal .z-10 {
    z-index: 10 !important;
}
#auth-modal .z-20 {
    z-index: 20 !important;
}
#auth-modal .relative {
    position: relative !important;
}
#auth-modal .overflow-hidden {
    overflow: hidden !important;
}
#auth-modal .-mr-16 {
    margin-right: -4rem !important;
}
#auth-modal .-mt-16 {
    margin-top: -4rem !important;
}
#auth-modal .-ml-12 {
    margin-left: -3rem !important;
}
#auth-modal .-mb-12 {
    margin-bottom: -3rem !important;
}
#auth-modal .mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}
#auth-modal .flex {
    display: flex !important;
}
#auth-modal .items-center {
    align-items: center !important;
}
#auth-modal .justify-center {
    justify-content: center !important;
}
#auth-modal .justify-between {
    justify-content: space-between !important;
}
#auth-modal .gap-1 {
    gap: 0.25rem !important;
}
#auth-modal .gap-3 {
    gap: 0.75rem !important;
}
#auth-modal .tracking-widest {
    letter-spacing: 0.25em !important;
}
#auth-modal .backdrop-blur-lg {
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}
#auth-modal .transform {
    transform: translateZ(0) !important;
}
#auth-modal .transition-all {
    transition-property: all !important;
}
#auth-modal .transition-transform {
    transition-property: transform !important;
}
#auth-modal .transition-colors {
    transition-property: color, background-color, border-color !important;
}
#auth-modal .duration-200 {
    transition-duration: 0.2s !important;
}
#auth-modal .duration-300 {
    transition-duration: 0.3s !important;
}
#auth-modal .hover\:scale-110:hover {
    transform: scale(1.1) !important;
}
#auth-modal .hover\:bg-white:hover {
    background-color: #fff !important;
}
#auth-modal .hover\:text-purple-700:hover {
    color: #6d28d9 !important;
}
#auth-modal .hover\:text-gray-800:hover {
    color: #1f2937 !important;
}
#auth-modal .hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}
#auth-modal .disabled\:text-gray-400:disabled {
    color: #9ca3af !important;
}
#auth-modal .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed !important;
}

/* SVG icons */
#auth-modal svg {
    flex-shrink: 0 !important;
}
#auth-modal .w-4 {
    width: 1rem !important;
}
#auth-modal .h-4 {
    height: 1rem !important;
}
#auth-modal .w-5 {
    width: 1.25rem !important;
}
#auth-modal .h-5 {
    height: 1.25rem !important;
}
#auth-modal .w-6 {
    width: 1.5rem !important;
}
#auth-modal .h-6 {
    height: 1.5rem !important;
}
#auth-modal .w-8 {
    width: 2rem !important;
}
#auth-modal .h-8 {
    height: 2rem !important;
}
#auth-modal .w-10 {
    width: 2.5rem !important;
}
#auth-modal .h-10 {
    height: 2.5rem !important;
}

/* Responsive */
@media (max-width: 640px) {
    #auth-modal .p-8 {
        padding: 1.5rem !important;
    }
}