/** * Smart Phone Field for Gravity Forms - Frontend Styles * * Custom styles for the intlTelInput integration * with Gravity Forms phone fields. * * Note: Flag image path CSS variables are also output as inline * CSS in by PHP for absolute URL overrides. */ /* ============================================ Container & Layout Fixes ============================================ */ /* * intlTelInput defaults to display:inline-block. * Override to block + 100% width so it fills the * Gravity Forms field container properly. */ .iti { width: 100% !important; display: block !important; } /* * Ensure the phone input takes full width. * Do NOT set padding-left or padding-right here - * intlTelInput dynamically calculates these based on * the flag button width and dial code width. */ .gfield .iti input.iti__tel-input, .gfield .iti input[type="tel"], .gfield .iti input[type="text"] { width: 100% !important; box-sizing: border-box !important; } /* ============================================ Validation Message Styles ============================================ */ .spfgf-validation-message { font-size: 13px; margin-top: 6px; padding: 5px 12px; border-radius: 4px; display: none; font-weight: 500; line-height: 1.5; clear: both; } .spfgf-validation-message.spfgf-valid { display: inline-block; color: #155724; background-color: #d4edda; border: 1px solid #c3e6cb; } .spfgf-validation-message.spfgf-invalid { display: inline-block; color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; } /* Validation icons */ .spfgf-icon { font-weight: bold; margin-right: 3px; } .spfgf-icon-valid { color: #28a745; } .spfgf-icon-invalid { color: #dc3545; } /* Input border colors for validation state */ .gfield input.spfgf-input-valid, .gfield .iti input.spfgf-input-valid { border-color: #28a745 !important; box-shadow: 0 0 0 1px rgba(40, 167, 69, 0.25) !important; } .gfield input.spfgf-input-invalid, .gfield .iti input.spfgf-input-invalid { border-color: #dc3545 !important; box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25) !important; } /* ============================================ Dropdown Styling ============================================ */ .iti__country-list { z-index: 99999 !important; } /* Dropdown container when appended to body */ .iti--container { z-index: 99999 !important; } /* ============================================ Gravity Forms Specific Overrides ============================================ */ .gform_wrapper .gfield .iti { margin-bottom: 0; } /* GF 2.5+ orbital theme */ .gform_wrapper.gravity-theme .gfield .iti, .gform_wrapper.gravity-theme .ginput_container_phone .iti { width: 100% !important; display: block !important; } /* Multi-step form support */ .gform_page .gfield .iti { width: 100% !important; display: block !important; } /* ============================================ Responsive ============================================ */ @media (max-width: 768px) { .gfield .iti input[type="tel"], .gfield .iti input[type="text"] { font-size: 16px; /* Prevent iOS zoom on focus */ } } /* ============================================ RTL Support ============================================ */ [dir="rtl"] .gfield .iti input[type="tel"], [dir="rtl"] .gfield .iti input[type="text"] { text-align: right; }