{# Step 3: Containers - Number of items being brought in #}
<div class="step-screen" id="stepContainers" data-step="containers" style="display: none;">
    <div class="step-content">
        <h1 class="step-title">How many containers?</h1>
        <p class="step-desc">Bags, baskets, boxes, or bins you're bringing in today.</p>

        <div class="form-area">
            {# Container Number Selector #}
            <div class="number-selector" id="containerSelector">
                <button type="button" class="num-option" data-value="1">1</button>
                <button type="button" class="num-option" data-value="2">2</button>
                <button type="button" class="num-option selected" data-value="3">3</button>
                <button type="button" class="num-option" data-value="4">4</button>
                <button type="button" class="num-option" data-value="5+">5+</button>
            </div>

            {# Custom Number Input - Shown when 5+ selected #}
            <div class="custom-number-row" id="customNumberRow" style="display: none;">
                <label class="input-label" for="customContainerCount">How many containers exactly?</label>
                <input type="number"
                       class="custom-number-input"
                       id="customContainerCount"
                       name="customContainerCount"
                       min="5"
                       max="99"
                       value="5"
                       inputmode="numeric">
            </div>

            {# Hidden field to store actual count #}
            <input type="hidden" name="containerCount" id="containerCount" value="3">

            {# Toggle Options #}
            <div class="toggle-section">
                {# SMS Opt-In Toggle #}
                <div class="toggle-row">
                    <div class="toggle-info">
                        <i class="fas fa-comment-sms"></i>
                        <div class="toggle-text">
                            <span class="toggle-label">Text me when ready</span>
                            <span class="toggle-help">Get a text when your offer is ready</span>
                        </div>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input toggle-switch-input"
                               type="checkbox"
                               role="switch"
                               id="smsOptIn"
                               name="smsOptIn"
                               checked>
                    </div>
                </div>

                {# Designer Items Toggle - Only shown if store has this enabled #}
                <div class="toggle-row" id="designerToggleRow">
                    <div class="toggle-info">
                        <i class="fas fa-gem"></i>
                        <div class="toggle-text">
                            <span class="toggle-label">Designer items</span>
                            <span class="toggle-help">Premium brands need special review</span>
                        </div>
                        <button type="button"
                                class="toggle-info-btn"
                                data-bs-toggle="modal"
                                data-bs-target="#designerModal"
                                id="designerInfoBtn"
                                aria-label="What are designer items?">
                            <i class="fas fa-circle-question"></i>
                        </button>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input toggle-switch-input"
                               type="checkbox"
                               role="switch"
                               id="hasDesignerItems"
                               name="hasDesignerItems">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>