/**
 * Mobile forms, wizards, inputs.
 */

.form-input,
.form-select,
.comment-textarea {
    min-height: var(--m-touch-min) !important;
    font-size: 16px !important; /* prevents iOS zoom */
    border-radius: var(--m-radius-sm) !important;
    width: 100% !important;
    box-sizing: border-box;
}

.form-row {
    flex-direction: column !important;
    gap: var(--m-space-md) !important;
}

.form-group {
    width: 100% !important;
    min-width: 0 !important;
}

.route-type-options {
    flex-direction: column !important;
    gap: var(--m-space-sm) !important;
}

.route-type-option {
    min-height: var(--m-touch-min) !important;
    width: 100% !important;
}

.wizard-steps {
    display: flex !important;
    gap: var(--m-space-xs) !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--m-space-sm);
    margin-bottom: var(--m-space-lg) !important;
}

.wizard-step {
    flex: 0 0 auto;
    font-size: var(--m-font-caption) !important;
    padding: var(--m-space-sm) var(--m-space-md) !important;
    white-space: nowrap;
}

.order-button,
.prev-step-btn,
.create-request-toggle-btn {
    min-height: var(--m-touch-min) !important;
}

.total-container {
    flex-direction: column !important;
    gap: var(--m-space-md) !important;
}

.total-container .order-button,
.total-container .prev-step-btn {
    width: 100% !important;
}

/* Create request / query cards */
.create-request-card {
    background: var(--tg-bg-card) !important;
    border-radius: var(--m-radius-lg) !important;
    border: 1px solid var(--tg-border-light) !important;
    box-shadow: var(--m-shadow-card) !important;
    margin-bottom: var(--m-space-lg) !important;
    padding: 0 !important;
    overflow: hidden;
}

.create-request-card.is-collapsed .create-request-card__body {
    display: none !important;
}

.create-request-card__body {
    padding: var(--m-space-lg) !important;
}

/* Full-screen wizard on mobile when expanded */
body.m-wizard-open .create-request-card:not(.is-collapsed) {
    position: fixed !important;
    inset: calc(var(--m-header-h) + env(safe-area-inset-top, 0px)) 0 0 0 !important;
    z-index: 1004 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
}

body.m-wizard-open .create-request-card__body {
    padding-bottom: calc(80px + var(--m-safe-bottom)) !important;
}

.wizard-actions--step1 {
    position: sticky;
    bottom: 0;
    background: var(--tg-bg-card);
    padding: var(--m-space-md) 0 calc(var(--m-space-md) + var(--m-safe-bottom));
    margin: 0 calc(-1 * var(--m-space-lg));
    padding-left: var(--m-space-lg);
    padding-right: var(--m-space-lg);
    border-top: 1px solid var(--tg-border-light);
}

/* Auth pages */
.login-page,
.registration-page {
    padding: var(--m-space-lg) !important;
    padding-top: calc(var(--m-space-2xl) + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(var(--m-space-2xl) + var(--m-safe-bottom)) !important;
    min-height: 100dvh;
    box-sizing: border-box;
}

.login-form-container,
.registration-form-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: var(--m-space-xl) var(--m-space-lg) !important;
    border-radius: var(--m-radius-lg) !important;
}

.login-form .form-input,
.registration-form .form-input {
    min-height: 48px !important;
}

.login-button,
.registration-submit-btn {
    min-height: var(--m-touch-min) !important;
    width: 100% !important;
    font-size: var(--m-font-body) !important;
}