/* AirKit Design System - Input Components */
/* Adapted for PayLoadz WordPress Theme */

/* Input Group */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Input Field */
.input-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  background: var(--color-shade-01);
  border: 1px solid var(--color-neutral-06);
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  min-height: 52px;
}

.input-field:focus-within {
  border-color: var(--color-shade-02);
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(34, 34, 34, 0.1);
}

/* Input Label */
.input-label {
  font-size: 0.75rem;
  font-weight: var(--font-weight-regular);
  color: var(--color-neutral-07);
  margin-bottom: 0.25rem;
}

/* Input Element */
.input-element,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
  border: 1px solid var(--color-neutral-06);
  border-radius: 0.5rem;
  padding: 0.75rem;
  font-size: 1rem;
  font-family: var(--font-family-primary);
  color: var(--color-shade-02);
  background: var(--color-shade-01);
  transition: border-color 0.2s ease;
  width: 100%;
}

.input-element:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-shade-02);
  box-shadow: 0 0 0 2px rgba(34, 34, 34, 0.1);
}

.input-element::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--color-neutral-07);
}

/* Textarea */
textarea {
  min-height: 120px;
  resize: vertical;
}

/* Error State */
.input-error .input-field,
.input-error input,
.input-error textarea {
  border-color: var(--color-error-02);
  background: var(--color-error-01);
}

.input-error-message {
  font-size: 0.875rem;
  color: var(--color-error-02);
  margin-top: 0.25rem;
}

/* Success State */
.input-success .input-field,
.input-success input,
.input-success textarea {
  border-color: var(--color-success);
}

/* WordPress Comment Form Styling */
.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-shade-02);
  margin-bottom: 0.5rem;
  display: block;
}

.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
  width: 100%;
}

/* Submit Button in Forms */
input[type="submit"],
button[type="submit"] {
  background: var(--gradient-02);
  color: var(--color-shade-01);
  border: none;
  border-radius: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-family-primary);
}

input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--gradient-03);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 56, 92, 0.3);
}

/* Search Form */
.search-form {
  display: flex;
  gap: 0.5rem;
  max-width: 400px;
}

.search-form input[type="search"] {
  flex: 1;
}

.search-form input[type="submit"] {
  padding: 0.75rem 1.25rem;
}

/* Widget Search Form Specific */
.widget_search .search-form {
  margin-bottom: 0;
  max-width: 100%;
}

.widget_search input[type="search"] {
  width: 100%;
}

/* Sidebar Search Styling */
.sidebar .search-form-wrapper {
  width: 100%;
}

.sidebar .search-input {
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
}

.sidebar .search-submit {
  padding: 0.75rem 1rem;
}

.sidebar .search-submit svg {
  width: 16px;
  height: 16px;
}