/*
 * Forms & Inputs Component
 * A unified system for form elements with consistent styling, validation states, and documentation
 *
 * 1. MODERN vs LEGACY CLASSES
 * 2. INPUT CONTAINERS
 * 3. VALIDATION CLASSES
 * 4. ICONS
 */

/* ============================================
   BASE STYLES
   ============================================ */

/* Modern input styles */
.input {
    display: block;
    width: 100%;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    font-style: normal;
    line-height: normal;
    padding: 16px;
    transition: all var(--transition-duration);
    border: 1px solid transparent;
    outline: none;
}

/* Legacy form-control (keeping for backward compatibility) */
.form-control {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-6xl) var(--spacing-md) var(--spacing-lg-16);
    border: 1px solid var(--color-accent);
    border-radius: var(--border-radius-sm);
    color: var(--color-support-alt);
    font-family: var(--font-family-base);
    font-size: var(--font-size-b-14);
    font-weight: var(--font-weight-medium);
}

/* ============================================
   PLACEHOLDERS
   ============================================ */

.input::placeholder {
    color: var(--color-text);
}

/* ============================================
   SIZE VARIANTS
   ============================================ */

/* Large inputs */
.input--lg {
    height: 50px;
    font-size: 16px;
    border-radius: var(--border-radius-sm);
}

@media (max-width: 1024px) {
    .input--lg {
        height: 43px;
        font-size: 14px;
        border-radius: var(--border-radius-xs);
    }
}

/* Medium inputs */
.input--md {
    height: 43px;
    font-size: 14px;
    border-radius: var(--border-radius-xs);
}

/* ============================================
   INPUT CONTAINERS & ICON POSITIONING
   ============================================ */

.input-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Add space for icons in any input inside a container */
.input-container .input {
    padding-right: 48px; /* Space for icon + 16px(right + left) */
}

/* For large inputs (50px height) */
.input-container--lg .icon {
    position: absolute;
    top: 15px;
    right: 16px;
    z-index: 2;
}

@media (max-width: 1024px) {
    .input-container--lg .icon {
        top: 13px;
    }
}

/* For standard/md inputs (43px height) */
.input-container--md .icon {
    position: absolute;
    top: 13px;
    right: 16px;
    z-index: 2;
}

/* Fallback for position when size not specified (centered) */
.input-container:not(.input-container--lg):not(.input-container--md) .icon {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 2;
}

/* Legacy icon positioning (for backward compatibility) */
.error-icon img,
.success-icon img {
    width: 12.977px;
}

/* Base icon styles */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    cursor: pointer;
    pointer-events: auto;
}

/* Icon sizes */
.icon--extra-lg {
    width: 50px;
    height: 50px;
}

.icon--lg {
    width: 22px;
    height: 22px;
}

/* Icon sizes for buttons */
.icon--md-btn {
    width: 20px;
    height: 20px;
}

.icon--md {
    width: 20px;
    height: 20px;
    padding: 2.5px 1px;
}

@media (max-width: 1024px) {
    .icon--extra-lg {
        width: 43px;
        height: 43px;
    }

    .icon--lg {
        width: 20px;
        height: 20px;
    }

    .icon--md {
        width: 17px;
        height: 17px;
        padding: 1.5px 0.5px;
    }
}

.icon--sm {
    width: 17px;
    height: 17px;
    padding: 1.5px 0.5px;
}

/*
  .icon--white,
  .icon--gray,
  .icon--black,
  .icon--primary,
  .icon--warning,
  .icon--error
  */

/* ============================================
   STYLE VARIANTS
   ============================================ */

/* Model One: Dark input with accent border */
.input--dark {
    background-color: var(--color-secondary);
    color: var(--color-support-alt);
    border: 1px solid var(--color-accent);
}

.input--dark:focus {
    border: 1px solid var(--color-primary);
}

/* Model Two: Borderless black input */
.input--black {
    background-color: var(--color-black);
    color: var(--color-support-alt);
    border: 1px solid transparent;
}

.input--black:focus {
    border: 1px solid var(--color-primary);
}

/* Model Three: Accent background input */
.input--accent {
    background-color: var(--color-accent);
    color: var(--color-secondary-alt);
    border: 1px solid transparent;
}

.input--accent::placeholder {
    color: var(--color-support-alt);
}

.input--accent:focus {
    border: 1px solid var(--color-primary);
}

/* ============================================
   VALIDATION STATES
   Works with both modern and legacy styles
   ============================================ */

/* Valid state */
.input--valid,
.input-container.valid .input,
.form-group.valid input {
    border-color: var(--color-primary);
}

/* Invalid/Error state */
.input--invalid,
.input-error,
.input-container.error .input,
.form-group.error input {
    border-color: var(--color-warning);
}

.input--invalid:focus,
.input-error:focus,
.input-container.error .input:focus {
    border-color: var(--color-warning);
}

/* Error/Success Icon Visibility (legacy) */
.form-group:not(.valid) .success-icon,
.form-group:not(.error) .error-icon {
    display: none;
}

/* ============================================
   ERROR MESSAGES
   ============================================ */

.input-error-message {
    color: var(--color-warning);
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
}

/* ============================================
   SPECIAL INPUT TYPES
   ============================================ */

/* Password Requirements */
.password-requirements {
    display: none;
    margin-left: 16px;
}

.form-group.error .password-requirements .input-error-message,
.password-requirements.error .input-error-message {
    color: var(--color-warning);
}

.password-requirements .input-error-message {
    color: var(--color-text);
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
}

/* Code inputs for verification */
.code-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.code-character-input {
    padding: 5px 0;
    text-align: center;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h-26);
    line-height: 31px;
    color: var(--color-primary);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-accent);
    background-color: var(--color-secondary);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
}

.code-character-input:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* ============================================
   TEXTAREA STYLES
   ============================================ */

/* Custom scrollbar for textareas */
textarea::-webkit-scrollbar {
    width: 4px;
    background: var(--textarea-scrollbar-track);
    border-radius: 4px;
}

textarea::-webkit-scrollbar-track {
    background: var(--textarea-scrollbar-track);
    border-radius: 4px;
}

textarea::-webkit-scrollbar-thumb {
    background: var(--textarea-scrollbar-thumb);
    border-radius: 4px;
}

/* Custom scrollbar for '--accent' */
textarea.input--accent::-webkit-scrollbar-track {
    background: var(--color-accent);
}

/* ============================================
   BROWSER COMPATIBILITY
   ============================================ */

/* Change the background color of selected autocomplete option */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--color-secondary) inset !important;
  -webkit-text-fill-color: var(--color-support-alt) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ============================================
   STATES
   ============================================ */

/* Disabled state */
.input:disabled,
.form-control:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--color-support);
}