/* ==========================================================================
   Form Component - Input & Form styles
   ========================================================================== */

/* ==========================================================================
   Input Component
   ========================================================================== */

.input {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-base);
  border: var(--border-thick);
  background-color: var(--color-canvas);
  box-shadow: var(--shadow-small);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.input:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-medium);
}

.input:focus {
  outline: none;
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-medium);
  border-color: var(--color-secondary);
}

.input::placeholder {
  color: #666;
  font-style: italic;
}

/* Input with error state */
.input--error {
  border-color: var(--color-danger);
  background-color: #fff0f0;
}

/* ==========================================================================
   Form Component
   ========================================================================== */

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.form--centered {
  align-items: center;
  text-align: center;
}

/* Form labels */
.form label {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  letter-spacing: 0.05em;
  position: relative;
  width: fit-content;
  isolation: isolate;
}

/* Colorful pencil swipe behind label text */
.form .label::before {
  content: '';
  position: absolute;
  top: 0.1em;
  left: -0.2em;
  width: calc(100% + 0.4em);
  height: 1.1em;
  background: var(--color-primary);
  z-index: -1;
  transform: skewX(-30deg) rotate(-5deg);
}

.form .label.label--accent::before {
  background: var(--color-accent);
}

.form .label.label--danger::before {
  background: var(--color-danger);
}

.form .label.label--secondary::before {
  background: var(--color-secondary);
}

/* Form inputs and selects */
.form input[type='text'],
.form input[type='email'],
.form input[type='password'],
.form input[type='number'],
.form input[type='tel'],
.form input[type='url'],
.form input[type='search'],
.form textarea,
.form select {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-base);
  border: var(--border-thick);
  background-color: var(--color-canvas);
  box-shadow: var(--shadow-small);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.form input[type='text']:hover,
.form input[type='email']:hover,
.form input[type='password']:hover,
.form input[type='number']:hover,
.form input[type='tel']:hover,
.form input[type='url']:hover,
.form input[type='search']:hover,
.form textarea:hover,
.form select:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-medium);
}

.form input[type='text']:focus,
.form input[type='email']:focus,
.form input[type='password']:focus,
.form input[type='number']:focus,
.form input[type='tel']:focus,
.form input[type='url']:focus,
.form input[type='search']:focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-medium);
  border-color: var(--color-secondary);
}

.form input::placeholder,
.form textarea::placeholder {
  color: #888;
  font-style: italic;
}

/* Select arrow styling */
.form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  padding-right: var(--space-xl);
  cursor: pointer;
}

/* ==========================================================================
   Checkbox Component
   ========================================================================== */

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
  position: relative;
}

.checkbox input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox__box {
  display: block;
  width: 24px;
  height: 24px;
  border: var(--border-thick);
  background-color: var(--color-canvas);
  box-shadow: var(--shadow-small);
  flex-shrink: 0;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.checkbox:hover .checkbox__box {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-medium);
}

.checkbox input[type='checkbox']:checked + .checkbox__box {
  background-color: var(--color-primary);
  border-color: #000;
}

.checkbox input[type='checkbox']:checked + .checkbox__box::after {
  content: '✓';
  display: block;
  text-align: center;
  line-height: 20px;
  font-size: 16px;
  font-weight: 900;
  color: #000;
}

.checkbox input[type='checkbox']:focus + .checkbox__box {
  outline: none;
  box-shadow: var(--shadow-medium);
}

.checkbox__label {
  font-weight: 700;
  font-size: var(--font-size-base);
  line-height: 1.4;
  padding-top: 2px;
}