/* ==========================================================================
   INPUT TEXT COMPONENT
   Based on: PHASE_7B_DESIGN_PREMIUM_SPEC.md - Input Text Section
   
   States: rest, focus, hover, filled, error
   ========================================================================== */

.input-wrapper {
  position: relative;
  width: 100%;
}

/* ==========================================================================
   BASE INPUT
   ========================================================================== */

.input-text {
  /* Dimensions */
  width: 100%;
  height: 56px;
  padding: var(--space-md) var(--space-lg);  /* 16px 20px */
  
  /* Typography */
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-800);
  
  /* Appearance */
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: none;
  
  /* Behavior */
  transition: all var(--transition-base);
  appearance: none;
  -webkit-appearance: none;
}

/* Placeholder */
.input-text::placeholder {
  color: var(--color-gray-400);
  font-weight: var(--font-weight-normal);
}

/* ==========================================================================
   STATE: HOVER (non-focus)
   ========================================================================== */

.input-text:hover:not(:focus) {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
}

/* ==========================================================================
   STATE: FOCUS
   ========================================================================== */

.input-text:focus {
  border-color: var(--color-red-600);
  box-shadow: var(--shadow-focus);
  outline: none;
}

/* Icon lupă schimbă culoarea la focus */
.input-wrapper:focus-within .input-icon {
  color: var(--color-red-600);
}

/* ==========================================================================
   STATE: FILLED (has value)
   ========================================================================== */

.input-text:not(:placeholder-shown) {
  font-weight: var(--font-weight-medium);
  border-color: var(--color-gray-300);
}

/* ==========================================================================
   STATE: ERROR
   ========================================================================== */

.input-text--error {
  border-color: var(--color-red-600);
  box-shadow: var(--shadow-focus);
}

/* Error Icon */
.input-error-icon {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-red-600);
  pointer-events: none;
}

/* Error Message */
.input-error-message {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-red-600);
  line-height: var(--line-height-normal);
}

/* ==========================================================================
   VARIANT: WITH ICON (lupă search)
   ========================================================================== */

.input-wrapper--with-icon {
  position: relative;
}

.input-icon {
  position: absolute;
  left: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--color-gray-400);
  pointer-events: none;
  transition: color var(--transition-base);
}

.input-text--with-icon {
  padding-left: 48px;  /* Spațiu pentru icon */
}

/* ==========================================================================
   DISABLED STATE
   ========================================================================== */

.input-text:disabled {
  background: var(--color-gray-100);
  border-color: var(--color-gray-200);
  color: var(--color-gray-400);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.input-text:focus-visible {
  box-shadow: var(--shadow-focus-strong);
}