{# Step 1: ID Entry - Driver's License / Phone Lookup #}
<div class="step-screen" id="stepId" data-step="id">
    <div class="step-content">
        <div class="step-illustration">
            <i class="fas fa-id-card"></i>
        </div>

        <h1 class="step-title">Enter your ID</h1>
        <p class="step-desc">We'll use this to find your account and make future visits faster.</p>

        <form class="form-area" id="idForm" novalidate>
            {# ID Type Selector - Only shown if multiple ID types accepted #}
            <div class="id-type-selector mb-4" id="idTypeSelector" style="display: none;">
                <label class="input-label">How would you like to check in?</label>
                <div class="btn-group w-100" role="group" aria-label="ID Type">
                    <input type="radio" class="btn-check" name="idType" id="idTypeDl" value="dl" checked>
                    <label class="btn btn-outline-primary" for="idTypeDl">
                        <i class="fas fa-id-card me-2"></i>Driver's License
                    </label>
                    <input type="radio" class="btn-check" name="idType" id="idTypePhone" value="phone">
                    <label class="btn btn-outline-primary" for="idTypePhone">
                        <i class="fas fa-phone me-2"></i>Phone Number
                    </label>
                </div>
            </div>

            {# Driver's License Input #}
            <div class="input-group-custom" id="dlInputGroup">
                <label class="input-label" for="driversLicense">Driver's License Number</label>
                <div class="input-wrapper">
                    <i class="fas fa-id-card input-icon"></i>
                    <input type="text"
                           class="input-field"
                           id="driversLicense"
                           name="driversLicense"
                           placeholder="Enter number"
                           autocomplete="off"
                           autocapitalize="characters"
                           inputmode="text"
                           required>
                </div>
                <div class="invalid-feedback" id="dlError"></div>
            </div>

            {# Phone Input - Hidden by default #}
            <div class="input-group-custom" id="phoneInputGroup" style="display: none;">
                <label class="input-label" for="phoneNumber">Phone Number</label>
                <div class="input-wrapper">
                    <i class="fas fa-phone input-icon"></i>
                    <input type="tel"
                           class="input-field"
                           id="phoneNumber"
                           name="phoneNumber"
                           placeholder="(555) 555-5555"
                           autocomplete="tel"
                           inputmode="tel">
                </div>
                <div class="invalid-feedback" id="phoneError"></div>
            </div>

            {# State Selector - For DL #}
            <div id="stateSelector">
                <label class="input-label">State</label>
                <div class="state-quick-select" id="stateQuickSelect">
                    {# Store's state shown first with star, then adjacent states #}
                    {# Populated by JavaScript based on store location #}
                </div>
                <p class="state-note">
                    <i class="fas fa-star"></i> Your store's state shown first
                </p>
                <input type="hidden" name="idState" id="idState" value="">
            </div>

            {# reCAPTCHA v2 Fallback Container - Hidden by default #}
            <div class="recaptcha-v2-container" id="recaptchaV2Container" style="display: none;">
                <label class="input-label">Security Check</label>
                <div id="recaptchaV2Widget"></div>
            </div>
        </form>
    </div>
</div>