/* ====================================
   ProductAI - Base CSS
   Foundation styles, reset, and core layout
   ==================================== */

/* Mobile-first design */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 📱 CRITICAL iOS Safari Mobile Fix - Issue #2: Form Controls */
input[type="radio"], input[type="checkbox"] {
    /* Keep dimensions but DO NOT forcefully remove native appearance globally */
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #ddd !important;
    border-radius: 50% !important;
    outline: none !important;
    background: white !important;
    position: relative !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    margin: 0 !important;
}

input[type="radio"]:checked, input[type="checkbox"]:checked {
    background: #007bff !important;
    border-color: #007bff !important;
}

input[type="radio"]:checked::before, input[type="checkbox"]:checked::before {
    content: '' !important;
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    background: white !important;
    border-radius: 50% !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* iOS Safari general input fixes */
input, select, textarea, button {
    -webkit-appearance: none !important;
    -webkit-border-radius: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    font-family: inherit !important;
}

/* Hide iOS specific styling issues */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #333;
    padding-bottom: 55px; /* Very tight gap - footer almost touches login bar */
}

/* Additional bottom padding for main containers */
.home-container {
    padding-bottom: 0 !important;
}

/* App pages need sufficient padding to show footer above fixed buttons */
.app-container, .support-container, .container {
    padding-bottom: 100px !important; /* Adequate space for Brand Settings module visibility */
    max-width: 420px;
    margin: 0 auto;
}

/* Specific padding for preset options to prevent Brand Settings cutoff */
#presetOptions {
    padding-bottom: 120px !important; /* Extra padding for last module (Brand Settings) */
}