/* Enhanced Mobile Modal - React Design Improvements */

/* Enhanced mobile bottom sheet with better touch targets and gestures */
@media (max-width: 640px) {
    /* Improved backdrop with better touch handling */
    .group-modal-backdrop {
        background: rgba(0, 0, 0, 0.4);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Enhanced container with better animation */
    .group-modal-container {
        max-height: 80vh;
        transform: translateY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Improved drag handle for better affordance */
    .modal-handle {
        width: 48px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        top: 8px;
        cursor: grab;
        touch-action: manipulation;
    }

    .modal-handle:active {
        cursor: grabbing;
    }

    /* Enhanced progress steps to match React design */
    .step-progress {
        margin-bottom: 12px;
        padding: 0 24px 16px 24px;
    }

    .step-indicator {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        gap: 0;
    }

    .step {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: none;
    }

    .step-number {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 500;
        transition: all 0.3s ease;
        background: #d1d5db;
        color: #6b7280;
    }

    .step.active .step-number {
        background: #2563eb;
        color: #ffffff;
    }

    .step.completed .step-number {
        background: #10b981;
        color: #ffffff;
    }

    .step-label {
        font-size: 12px;
        font-weight: 500;
        color: #6b7280;
        display: inline-block !important;
    }

    .step-connector {
        flex: 1;
        height: 1px;
        background: #e5e7eb;
        margin: 0 8px;
        max-width: none;
        position: static;
    }

    /* Removed CSS-generated banner; moved copy into DOM for i18n & a11y */

    /* Remove old-school emoji icon and improve form intro styling */
    .form-intro {
        margin-bottom: var(--space-sm);
        padding: 0;
        display: block;
        background: none;
        border: none;
    }

    .form-intro::before {
        display: none; /* Remove emoji icon */
    }

    .form-intro p {
        margin: 0;
        color: var(--modal-text-muted);
        line-height: 1.5;
        font-size: 14px; /* Decreased from 0.875rem */
        text-align: center;
    }

    /* Decrease overall font sizes according to spacing guide */
    .modal-title {
        font-size: 18px; /* Decreased from 1.25rem */
        line-height: 22px;
    }

    .section-title {
        font-size: 16px; /* Decreased from 1.125rem */
        line-height: 1.4;
        margin: 0 0 var(--space-xs) 0;
    }

    /* Enhanced form field styling */
    .field-input,
    .field-select,
    .field-textarea {
        height: 48px;
        padding: 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 14px;
        transition: border-color 0.2s, box-shadow 0.2s;
        background: #ffffff;
    }

    .field-input:focus,
    .field-select:focus,
    .field-textarea:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 1px #2563eb;
    }

    .field-textarea {
        height: auto;
        min-height: 80px;
        resize: vertical;
    }

    /* Enhanced error states */
    .field-input.error,
    .field-select.error,
    .field-textarea.error {
        border-color: #dc2626;
    }

    .field-error.active {
        display: block;
        font-size: 12px;
        color: #dc2626;
        margin-top: 4px;
    }

    /* Better field labels with decreased font size */
    .field-label {
        font-size: 13px; /* Decreased from 14px */
        font-weight: 500;
        color: #374151;
        margin-bottom: 4px;
    }

    /* Decrease field input font sizes */
    .field-input,
    .field-select,
    .field-textarea {
        font-size: 14px; /* Consistent with guide */
    }

    /* Decrease button text sizes */
    .prev-button,
    .next-button,
    .submit-button {
        font-size: 14px; /* Decreased from larger sizes */
    }

    /* Form note text size */
    .form-note {
        font-size: 12px; /* Consistent small size */
        color: #6b7280;
        margin: 0;
        text-align: right;
    }

    /* Enhanced footer with React-style layout */
    .group-modal-footer {
        border-top: 1px solid #e5e7eb;
        padding: 16px 24px;
        background: #ffffff;
    }

    .step-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
    }

    .prev-button {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: transparent;
        border: none;
        color: #6b7280;
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.2s;
        font-size: 14px;
    }

    .prev-button:hover {
        background: #f3f4f6;
        color: #374151;
    }

    .next-button,
    .submit-button {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 24px;
        background: #2563eb;
        color: #ffffff;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;
        min-width: 120px;
        justify-content: center;
    }

    .next-button:hover,
    .submit-button:hover {
        background: #1d4ed8;
    }

    .next-button:disabled,
    .submit-button:disabled {
        background: #9ca3af;
        cursor: not-allowed;
    }

    .form-note {
        font-size: 12px;
        color: #6b7280;
        margin: 0;
        text-align: right;
    }

    /* Loading state improvements (use single spinner element from base CSS; no pseudo) */
    .submit-button.loading .button-text { opacity: 0; }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Enhanced animations */
    .group-modal.active .group-modal-container {
        animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .group-modal.closing .group-modal-container {
        animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    @keyframes slideDown {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(100%);
        }
    }

    /* Form step transitions */
    .form-step.active {
        animation: slideInStep 0.3s ease-out;
    }

    @keyframes slideInStep {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Touch gesture indicators */
    .group-modal-container.dragging {
        transition: none;
    }

    .group-modal-container.dragging .modal-handle {
        background: #9ca3af;
    }

    /* Better responsive grid */
    .form-grid.half-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    @media (max-width: 480px) {
        .form-grid.half-grid {
            grid-template-columns: 1fr;
        }

        .group-modal-container {
            max-height: 90vh;
        }
    }

    /* Improved select styling */
    .field-select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 12px center;
        background-repeat: no-repeat;
        background-size: 16px;
        padding-right: 40px;
    }

    /* Better checkbox styling */
    .checkbox-input {
        width: 16px;
        height: 16px;
        accent-color: #2563eb;
        margin: 0;
    }

    .checkbox-label {
        font-size: 12px;
        color: #6b7280;
        cursor: pointer;
        margin: 0;
    }

    /* Enhanced date input group */
    .date-input-group {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .date-flexible {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
    }

    /* Improved field headers */
    .field-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
    }

    /* Better focus indicators */
    .nav-button:focus,
    .submit-button:focus,
    .modal-close:focus {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }
}

/* High DPI screen optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .modal-handle {
        background: linear-gradient(to bottom, #d1d5db, #9ca3af);
    }
}


/* Tom-Select Pickup Location Styling */
.tom-select-pickup-location {
    width: 100%;
}

.tom-select-pickup-location .ts-wrapper {
    position: relative;
    width: 100%;
}

.tom-select-pickup-location .ts-control {
    min-height: 44px;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    color: var(--color-body);
    font-size: var(--fs-body);
    font-family: var(--font-body);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.tom-select-pickup-location .ts-control:focus-within,
.tom-select-pickup-location .ts-control.focus {
    border-color: var(--color-info);
    box-shadow: 0 0 0 1px var(--color-info);
    outline: none;
}

.tom-select-pickup-location .ts-control input {
    border: none;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    padding: 0;
    outline: none;
    width: 100%;
    min-width: 6ch; /* keep a visible caret area for typing */
}

.tom-select-pickup-location .ts-control input::placeholder {
    color: var(--color-muted);
}

.tom-select-pickup-location .ts-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10000;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
}

.tom-select-pickup-location .ts-dropdown .ts-dropdown-content {
    padding: 0;
}

.tom-select-pickup-location .ts-dropdown .option {
    padding: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    color: var(--color-body);
    font-size: var(--fs-body);
    transition: background-color 0.15s ease;
}

.tom-select-pickup-location .ts-dropdown .option:hover,
.tom-select-pickup-location .ts-dropdown .option.active {
    background-color: #f8fafc;
}

.tom-select-pickup-location .ts-dropdown .option:last-child {
    border-bottom: none;
}

.tom-select-pickup-location .ts-dropdown .create {
    padding: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    background-color: #f0f9ff;
    color: var(--color-info);
    font-weight: var(--weight-medium);
    font-size: var(--fs-body);
}

.tom-select-pickup-location .ts-dropdown .no-results {
    padding: var(--space-sm);
    color: var(--color-muted);
    font-size: var(--fs-body);
    text-align: center;
    font-style: italic;
}

/* Tom-Select option templates */
.tom-option {
    display: flex;
    align-items: center;
}

.tom-option .option-title {
    font-weight: var(--weight-medium);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tom-option-create {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.tom-option-create .create-label {
    color: var(--color-muted);
    font-size: var(--fs-sm);
}

.tom-option-create .create-value {
    font-weight: var(--weight-medium);
    color: var(--color-info);
}

.tom-no-results {
    text-align: center;
}

.tom-no-results .no-results-text {
    color: var(--color-muted);
    margin-bottom: var(--space-xs);
}

.tom-no-results .no-results-hint {
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

/* Error state integration */
.form-field.error .tom-select-pickup-location .ts-control {
    border-color: var(--color-error);
    box-shadow: 0 0 0 1px var(--color-error);
}

/* Mobile optimizations for tom-select */
@media (max-width: 640px) {
    .tom-select-pickup-location .ts-dropdown {
        max-height: 150px;
    }

    .tom-select-pickup-location .ts-dropdown .option {
        padding: var(--space-md) var(--space-sm);
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .tom-select-pickup-location .ts-control {
        font-size: 16px; /* Prevent zoom on iOS */
        min-height: 48px;
    }
}

/* Tom-Select Best Time Styling (match pickup styles) */
.tom-select-best-time { width: 100%; }
.tom-select-best-time .ts-control { min-height: 44px; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-background); color: var(--color-body); font-size: var(--fs-body); transition: all 0.2s ease; box-sizing: border-box; }
.tom-select-best-time .ts-control:focus-within, .tom-select-best-time .ts-control.focus { border-color: var(--color-info); box-shadow: 0 0 0 1px var(--color-info); outline: none; }
.tom-select-best-time .ts-control input { border: none; background: transparent; color: inherit; font-size: inherit; font-family: inherit; padding: 0; outline: none; width: 100%; }
.tom-select-best-time .ts-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 10000; background: var(--color-background); border: 1px solid var(--color-border); border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); max-height: 200px; overflow-y: auto; }
.tom-select-best-time .ts-dropdown .option { padding: var(--space-sm); border-bottom: 1px solid var(--color-border); cursor: pointer; color: var(--color-body); font-size: var(--fs-body); transition: background-color .15s ease; }
.tom-select-best-time .ts-dropdown .option:hover, .tom-select-best-time .ts-dropdown .option.active { background-color: #f8fafc; }

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .group-modal-container,
    .form-step,
    .step-number,
    .nav-button,
    .submit-button {
        transition: none;
        animation: none;
    }
}