/* ========================================
   MINIMAL CSS - Let Plugin Handle Mobile
   Don't override the plugin's default behavior!
   ======================================== */

/* Base form styling */
.form_group:has(input[type="tel"]),
.form_group:has(.iti) {
    margin-bottom: 24px !important; 
}


/* ITI Container */
.iti {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

/* Error message positioning */
.phone-group + label.error {
    position: absolute !important;
    top: calc(100% + 2px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
    background: transparent !important;
    margin: 0 !important;
    font-size: 12px !important;
}

/* Prevent iOS zoom on input focus */
input[type="tel"] {
    font-size: 16px !important;
}

/* ========================================
   DESKTOP ONLY - Dropdown positioning
   ======================================== */
@media (min-width: 1025px) {
    
    /* Stacking for multiple phone fields */
    .grid > .form_group:nth-child(1) {
        z-index: 3 !important;
    }
    
    .grid > .form_group:nth-child(2) {
        z-index: 2 !important;
    }
    
    .grid > .form_group:nth-child(3) {
        z-index: 1 !important;
    }
    
    .iti--open {
        z-index: 10 !important;
    }
}