/*!
 * Global Modern Input Styles for NX-Commerz
 * 
 * Apple-inspired input design with theme color integration
 * Applies globally across all forms and components
 * 
 * Features:
 * - Theme color integration from backend
 * - Apple-style focus states and animations
 * - Mobile-optimized touch experience
 * - Consistent styling across all inputs
 * 
 * Version: 1.0.0
 */

/* ========================================================================
   GLOBAL INPUT STYLES - APPLE DESIGN WITH THEME COLORS
   ======================================================================== */

:root {
    /* Global Input Variables */
    --nx-input-height: 48px;
    --nx-input-height-sm: 40px;
    --nx-input-height-lg: 56px;
    --nx-input-border-radius: 12px;
    --nx-input-border-radius-lg: 16px;
    --nx-input-font-size: 16px; /* Prevents iOS zoom */
    --nx-input-font-size-sm: 14px;
    --nx-input-padding: 0 1rem;
    --nx-input-padding-lg: 0 1.5rem;
    
    /* Input Colors - Fixed Values to Prevent Black Background */
    --nx-input-bg: #ffffff;
    --nx-input-bg-focus: #ffffff;
    --nx-input-border: rgba(0, 0, 0, 0.12);
    --nx-input-border-hover: rgba(0, 0, 0, 0.2);
    --nx-input-border-focus: var(--bs-primary, var(--primary, #0071e3));
    --nx-input-text: #1d1d1f;
    --nx-input-placeholder: #6e6e73;
    
    /* Input Effects */
    --nx-input-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.08);
    --nx-input-shadow-focus: 
        0 0 0 4px color-mix(in srgb, var(--bs-primary, var(--primary, #0071e3)) 12%, transparent),
        0 4px 12px rgba(0, 0, 0, 0.1);
    --nx-input-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* State Colors */
    --nx-input-error: #ff3b30;
    --nx-input-success: #30d158;
    --nx-input-warning: #ff9500;
}

/* ========================================================================
   BASE INPUT STYLING
   ======================================================================== */

/* Universal Input Base Styles - High Specificity to Override Bootstrap */
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="search"],
body input[type="tel"],
body input[type="url"],
body input[type="number"],
body input[type="date"],
body input[type="time"],
body input[type="datetime-local"],
body input[type="month"],
body input[type="week"],
body textarea,
body select,
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
    /* Reset and Base Styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    
    /* Typography */
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    font-size: var(--nx-input-font-size);
    font-weight: 400;
    line-height: 1.5;
    color: var(--nx-input-text);
    
    /* Layout */
    width: 100%;
    height: var(--nx-input-height);
    padding: var(--nx-input-padding);
    margin: 0;
    
    /* Visual Design */
    background: var(--nx-input-bg);
    border: 2px solid var(--nx-input-border);
    border-radius: var(--nx-input-border-radius);
    outline: none;
    
    /* Smooth Animations */
    transition: var(--nx-input-transition);
}

/* Textarea Specific */
textarea {
    height: auto;
    min-height: calc(var(--nx-input-height) * 2.5);
    padding: 1rem;
    resize: vertical;
}

/* Select Specific */
select {
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px;
    padding-right: 3rem;
}

/* ========================================================================
   INPUT STATES AND INTERACTIONS
   ======================================================================== */

/* Hover State - High Specificity */
body input[type="text"]:hover:not(:focus):not(:disabled),
body input[type="email"]:hover:not(:focus):not(:disabled),
body input[type="password"]:hover:not(:focus):not(:disabled),
body input[type="search"]:hover:not(:focus):not(:disabled),
body input[type="tel"]:hover:not(:focus):not(:disabled),
body input[type="url"]:hover:not(:focus):not(:disabled),
body input[type="number"]:hover:not(:focus):not(:disabled),
body input[type="date"]:hover:not(:focus):not(:disabled),
body input[type="time"]:hover:not(:focus):not(:disabled),
body input[type="datetime-local"]:hover:not(:focus):not(:disabled),
body input[type="month"]:hover:not(:focus):not(:disabled),
body input[type="week"]:hover:not(:focus):not(:disabled),
body textarea:hover:not(:focus):not(:disabled),
body select:hover:not(:focus):not(:disabled),
.form-control:hover:not(:focus):not(:disabled),
input.form-control:hover:not(:focus):not(:disabled),
textarea.form-control:hover:not(:focus):not(:disabled),
select.form-control:hover:not(:focus):not(:disabled) {
    border-color: var(--nx-input-border-hover);
    background: var(--nx-input-bg-focus);
    box-shadow: var(--nx-input-shadow-hover);
}

/* Focus State - Theme Color Integration - High Specificity */
body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="password"]:focus,
body input[type="search"]:focus,
body input[type="tel"]:focus,
body input[type="url"]:focus,
body input[type="number"]:focus,
body input[type="date"]:focus,
body input[type="time"]:focus,
body input[type="datetime-local"]:focus,
body input[type="month"]:focus,
body input[type="week"]:focus,
body textarea:focus,
body select:focus,
.form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    border-color: var(--nx-input-border-focus);
    background: var(--nx-input-bg-focus);
    box-shadow: var(--nx-input-shadow-focus);
    transform: translateY(-1px);
}

/* Placeholder Styling - Fixed Colors */
input::placeholder,
textarea::placeholder {
    color: #6e6e73 !important;
    opacity: 0.6 !important;
    transition: all 0.3s ease !important;
}

input:focus::placeholder,
textarea:focus::placeholder {
    color: #6e6e73 !important;
    opacity: 0.4 !important;
    transform: translateX(4px) !important;
}

/* ========================================================================
   INPUT STATES - ERROR, SUCCESS, DISABLED
   ======================================================================== */

/* Error State */
input.error,
input:invalid,
textarea.error,
textarea:invalid,
select.error,
select:invalid,
.has-error input,
.has-error textarea,
.has-error select {
    border-color: var(--nx-input-error);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--nx-input-error) 12%, transparent);
}

/* Success State */
input.success,
input:valid.touched,
textarea.success,
textarea:valid.touched,
select.success,
select:valid.touched,
.has-success input,
.has-success textarea,
.has-success select {
    border-color: var(--nx-input-success);
}

/* Warning State */
input.warning,
textarea.warning,
select.warning,
.has-warning input,
.has-warning textarea,
.has-warning select {
    border-color: var(--nx-input-warning);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--nx-input-warning) 12%, transparent);
}

/* Disabled State */
input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
    color: var(--nx-input-placeholder);
}

/* ========================================================================
   INPUT SIZES
   ======================================================================== */

/* Small Inputs */
input.nx-input-sm,
textarea.nx-input-sm,
select.nx-input-sm {
    height: var(--nx-input-height-sm);
    font-size: var(--nx-input-font-size-sm);
    padding: 0 0.75rem;
}

/* Large Inputs */
input.nx-input-lg,
textarea.nx-input-lg,
select.nx-input-lg {
    height: var(--nx-input-height-lg);
    padding: var(--nx-input-padding-lg);
    border-radius: var(--nx-input-border-radius-lg);
    font-size: 18px;
}

/* ========================================================================
   BOOTSTRAP COMPATIBILITY
   ======================================================================== */

/* Override Bootstrap form-control and all global inputs - FORCE OVERRIDE */
body .form-control,
body input.form-control,
body textarea.form-control,
body select.form-control,
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: var(--nx-input-bg) !important;
    border: 2px solid var(--nx-input-border) !important;
    border-radius: var(--nx-input-border-radius) !important;
    font-size: var(--nx-input-font-size) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif !important;
    transition: var(--nx-input-transition) !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box !important;
    height: var(--nx-input-height) !important;
    padding: var(--nx-input-padding) !important;
    color: var(--nx-input-text) !important;
}

/* Focus State - Force Override */
body .form-control:focus,
body input.form-control:focus,
body textarea.form-control:focus,
body select.form-control:focus,
.form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    border-color: var(--nx-input-border-focus) !important;
    box-shadow: var(--nx-input-shadow-focus) !important;
    background: var(--nx-input-bg-focus) !important;
    transform: translateY(-1px) !important;
}

/* Hover State - Force Override */
body .form-control:hover:not(:focus),
body input.form-control:hover:not(:focus),
body textarea.form-control:hover:not(:focus),
body select.form-control:hover:not(:focus),
.form-control:hover:not(:focus),
input.form-control:hover:not(:focus),
textarea.form-control:hover:not(:focus),
select.form-control:hover:not(:focus) {
    border-color: var(--nx-input-border-hover) !important;
    background: var(--nx-input-bg-focus) !important;
    box-shadow: var(--nx-input-shadow-hover) !important;
}

/* Placeholder - Force Override */
body .form-control::placeholder,
body input.form-control::placeholder,
body textarea.form-control::placeholder,
.form-control::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--nx-input-placeholder) !important;
    opacity: 0.6 !important;
    transition: all 0.3s ease !important;
}

body .form-control:focus::placeholder,
body input.form-control:focus::placeholder,
body textarea.form-control:focus::placeholder,
.form-control:focus::placeholder,
input.form-control:focus::placeholder,
textarea.form-control:focus::placeholder {
    opacity: 0.4 !important;
    transform: translateX(4px) !important;
}

/* ========================================================================
   INPUT GROUP STYLING
   ======================================================================== */

.input-group .form-control,
.input-group input {
    border-radius: var(--nx-input-border-radius) 0 0 var(--nx-input-border-radius);
}

.input-group .form-control:last-child,
.input-group input:last-child {
    border-radius: 0 var(--nx-input-border-radius) var(--nx-input-border-radius) 0;
}

.input-group-text {
    background: var(--nx-input-bg);
    border: 2px solid var(--nx-input-border);
    color: var(--nx-input-text);
    font-weight: 500;
}

/* ========================================================================
   FORM LABELS AND HELPERS
   ======================================================================== */

/* Enhanced Label Styling */
label {
    font-weight: 500;
    color: var(--nx-input-text);
    margin-bottom: 0.5rem;
    display: block;
    font-size: 14px;
}

/* Helper Text */
.form-text,
.help-text {
    font-size: 13px;
    color: var(--nx-input-placeholder);
    margin-top: 0.25rem;
}

/* Error Messages */
.error-message,
.invalid-feedback {
    color: var(--nx-input-error);
    font-size: 13px;
    margin-top: 0.25rem;
    display: block;
}

/* Success Messages */
.success-message,
.valid-feedback {
    color: var(--nx-input-success);
    font-size: 13px;
    margin-top: 0.25rem;
    display: block;
}

/* ========================================================================
   SEARCH INPUT SPECIFIC STYLING
   ======================================================================== */

/* Search Input with Icon */
.nx-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.nx-search-wrapper input[type="search"] {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.nx-search-wrapper .nx-search-icon {
    position: absolute;
    left: 1rem;
    color: var(--nx-input-placeholder);
    pointer-events: none;
    z-index: 2;
    transition: all 0.3s ease;
}

.nx-search-wrapper input[type="search"]:focus + .nx-search-icon {
    color: var(--nx-input-border-focus);
    transform: scale(1.1);
}

/* ========================================================================
   RESPONSIVE DESIGN
   ======================================================================== */

/* Mobile Optimizations */
@media (max-width: 767px) {
    :root {
        --nx-input-height: 52px; /* Larger for mobile touch */
        --nx-input-font-size: 16px; /* Prevent zoom */
        --nx-input-border-radius: 14px;
    }
    
    /* Larger touch targets on mobile */
    input, textarea, select {
        min-height: 52px;
    }
}

/* Tablet and Up */
@media (min-width: 768px) {
    /* Slightly smaller on larger screens */
    :root {
        --nx-input-height: 48px;
        --nx-input-border-radius: 12px;
    }
}

/* ========================================================================
   FINAL CATCH-ALL OVERRIDES - MAXIMUM SPECIFICITY
   ======================================================================== */

/* Catch any remaining inputs that might be missed */
* input[type="text"],
* input[type="email"],
* input[type="password"],
* input[type="search"],
* input[type="tel"],
* input[type="url"],
* input[type="number"],
* input[type="date"],
* textarea,
* select,
*[class*="form"] input,
*[class*="form"] textarea,
*[class*="form"] select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: var(--nx-input-bg) !important;
    border: 2px solid var(--nx-input-border) !important;
    border-radius: var(--nx-input-border-radius) !important;
    font-size: var(--nx-input-font-size) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif !important;
    transition: var(--nx-input-transition) !important;
    outline: none !important;
    color: var(--nx-input-text) !important;
    min-height: var(--nx-input-height) !important;
}

/* Focus state catch-all */
* input[type="text"]:focus,
* input[type="email"]:focus,
* input[type="password"]:focus,
* input[type="search"]:focus,
* input[type="tel"]:focus,
* input[type="url"]:focus,
* input[type="number"]:focus,
* input[type="date"]:focus,
* textarea:focus,
* select:focus,
*[class*="form"] input:focus,
*[class*="form"] textarea:focus,
*[class*="form"] select:focus {
    border-color: var(--nx-input-border-focus) !important;
    box-shadow: var(--nx-input-shadow-focus) !important;
    background: var(--nx-input-bg-focus) !important;
    transform: translateY(-1px) !important;
}

/* Debug styles - Add temporary visual indicator and force styles */
body {
    --nx-input-debug: 1; /* This helps verify CSS is loaded */
}

/* CSS LOADED INDICATOR - Remove after testing */


/* Nuclear option - Override EVERYTHING with explicit white backgrounds and visible outlines */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="image"]) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    outline: 1px solid rgba(0, 0, 0, 0.1) !important;
    outline-offset: -1px !important;
    color: #1d1d1f !important;
    min-height: 48px !important;
    /* padding: 0 1rem !important; */
    box-sizing: border-box !important;
}

input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="image"]):focus {
    border-color: var(--bs-primary, #0071e3) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-primary, #0071e3) 12%, transparent), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    transform: translateY(-1px) !important;
}

textarea {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    outline: 1px solid rgba(0, 0, 0, 0.1) !important;
    outline-offset: -1px !important;
    color: #1d1d1f !important;
    min-height: 120px !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    resize: vertical !important;
}

textarea:focus {
    border-color: var(--bs-primary, #0071e3) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-primary, #0071e3) 12%, transparent), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    transform: translateY(-1px) !important;
}

select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    outline: 1px solid rgba(0, 0, 0, 0.1) !important;
    outline-offset: -1px !important;
    color: #1d1d1f !important;
    min-height: 48px !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

select:focus {
    border-color: var(--bs-primary, #0071e3) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-primary, #0071e3) 12%, transparent), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* ========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================================================== */

/* High Contrast Mode */
@media (prefers-contrast: high) {
    input, textarea, select {
        border-width: 3px;
    }
    
    input:focus, textarea:focus, select:focus {
        outline: 3px solid var(--nx-input-border-focus);
        outline-offset: 2px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    input, textarea, select {
        transition: none;
    }
    
    input::placeholder, textarea::placeholder {
        transition: none;
    }
    
    input:focus::placeholder, textarea:focus::placeholder {
        transform: none;
    }
}

/* ========================================================================
   EMERGENCY BLACK BACKGROUND FIX
   ======================================================================== */

/* Force white backgrounds on ALL inputs - Emergency override */
input, 
input[type], 
textarea, 
select,
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
    background: white !important;
    background-color: white !important;
    color: #1d1d1f !important;
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
    outline: 1px solid rgba(0, 0, 0, 0.1) !important;
    outline-offset: -1px !important;
}

/* Remove any box-shadow that might cause black appearance */
input:not(:focus), 
textarea:not(:focus), 
select:not(:focus) {
    box-shadow: none !important;
}

/* Ensure white background on focus too */
input:focus, 
textarea:focus, 
select:focus,
.form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    background: white !important;
    background-color: white !important;
    color: #1d1d1f !important;
}