/**
 * Order Tracking Form Styles
 * 
 * These styles are specific to the order tracking form component.
 * They follow the ComputerVariations theme naming conventions and
 * use the established design tokens for consistent styling.
 */

/* 
 * Order Tracking Form Component
 * Creates a centered card-like container for the tracking form
 * Following the theme pattern of using simple, descriptive class names
 */
.order-tracking-form {
    max-width: 600px;
    margin: 0 auto;
    background-color: var(--white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-xl);
    margin-bottom: var(--space-lg);
}

/* 
 * Header section contains the icon and descriptive text
 * Centered alignment to draw attention to the purpose of the form
 */
.tracking-form-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

/* 
 * Icon styling for visual identification of the form's purpose
 * Uses primary color to maintain brand consistency
 */
.tracking-form-icon {
    color: var(--primary-color);
    font-size: 2.5rem;
    margin-bottom: var(--space-sm);
}

/* 
 * The form container uses light background for visual distinction
 * Rounded appearance matches the theme's aesthetic
 */
.tracking-form {
    background: var(--light-gray);
    border-radius: var(--border-radius-pill);
    padding: 5px 15px;
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-md);
}

/* 
 * Form groups create spacing between input fields
 * Consistent with other form implementations in the theme
 */
.form-group {
    margin-bottom: var(--space-md);
}

/* 
 * Label styling for accessibility and visual clarity
 * Medium weight for better readability while not overwhelming
 */
.form-label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: var(--font-weight-medium);
    color: var(--dark-gray);
}

/* 
 * Input styling creates clean, borderless fields within the form container
 * The transparent background allows the form container color to show through
 */
.form-input {
    width: 100%;
    padding: 10px 12px;
    border: none;
    outline: none;
    background: transparent; 
    font-size: var(--font-size-base);
    font-family: var(--body-font);
    border-radius: var(--border-radius-pill);
    color: var(--dark-gray);
}

/* 
 * Helper text provides additional context for users
 * Smaller and lighter text to indicate secondary importance
 */
.form-helper {
    font-size: var(--font-size-sm);
    color: var(--medium-gray);
    margin-top: var(--space-xs);
}

/* 
 * The submit button spans the full width of the form
 * Positioned with margin to create visual separation from the form fields
 */
.form-submit {
    width: 100%;
    margin-top: var(--space-md);
}

/* 
 * Error message styling for validation feedback
 * Red color and border indicate issues that need attention
 */
.tracking-error {
    background-color: #fde8e8;
    border-left: 4px solid #dc3545;
    color: #dc3545;
    padding: var(--space-sm);
    margin-top: var(--space-md);
    border-radius: var(--border-radius-sm);
}

/* 
 * Responsive adjustments ensure the form looks good on all devices
 * Reduced padding on smaller screens maintains proportional appearance
 */
@media (max-width: 768px) {
    .order-tracking-form {
        padding: var(--space-lg);
    }
}