{# Step: Designer Item Certification - Only shown if customer has designer items #}
<div class="step-screen" id="stepDesignerTerms" data-step="designer-terms" style="display: none;">
    <div class="step-content">
        <h1 class="step-title">Designer Certification</h1>
        <p class="step-desc">Please review the designer item terms below.</p>

        <form class="form-area" id="designerTermsForm" novalidate>
            {# Designer Terms Box - Content loaded from store settings #}
            <div class="terms-box designer-terms-box" id="designerTermsBox">
                <div class="terms-content" id="designerTermsContent">
                    {{ settings.designerTermsHtml|raw }}
                </div>
            </div>

            {# Acknowledgment Checkbox #}
            <div class="designer-acknowledgment">
                <div class="form-check">
                    <input class="form-check-input"
                           type="checkbox"
                           id="designerCertCheckbox"
                           name="designerCertCheckbox">
                    <label class="form-check-label" for="designerCertCheckbox">
                        I certify that all designer items I am presenting are authentic and legally owned by me.
                    </label>
                </div>
                <div class="invalid-feedback" id="designerCertError" style="display: none;">
                    Please acknowledge the designer item certification
                </div>
            </div>

            {# Hidden field #}
            <input type="hidden" name="designerTermsAccepted" id="designerTermsAccepted" value="0">
        </form>
    </div>
</div>