/* ============================================================
   FORM ELEMENTS — Text inputs, date selectors, selects,
   checkboxes, radios, labels, helper text, error states.

   USAGE:
   <div class="form-field">
     <label class="form-label">
       Birthday person name <span class="form-required">*</span>
     </label>
     <input class="form-input" type="text" placeholder="e.g., Sarah" />
     <span class="form-helper">This helps us personalize
       all decorations, cake, and greetings</span>
   </div>

   FOR DATE SELECTOR (special treatment — larger, accent border):
   <div class="form-field">
     <label class="form-label">Birthday date <span class="form-required">*</span></label>
     <div class="form-date-selector">
       <input type="text" placeholder="Select birthday date" />
       <svg class="form-date-chevron">...</svg>
     </div>
   </div>
   ============================================================ */

/* ── Field wrapper ── */
.form-field {
  margin-bottom: 20px;
}

/* ── Label ── */
.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.form-required {
  color: var(--color-error);           /* Status red — NOT brand color */
}

/* ── Helper text (below input) ── */
.form-helper {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-light);
  margin-top: 6px;
  line-height: 1.5;
}

/* ── Text input ── */
.form-input {
  display: block;
  width: 100%;
  padding: var(--input-padding);       /* 14px 16px */
  border: 1px solid var(--color-border);
  border-radius: 0;                    /* SHARP corners */
  background: var(--color-surface-base);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

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

.form-input:focus {
  outline: none;
  border-color: var(--focus-border);   /* accent — NOT blue */
  box-shadow: var(--focus-ring);       /* Accent glow — NOT blue glow */
}

/* ── Date selector (special: larger, accent border) ── */
.form-date-selector {
  position: relative;
}

.form-date-selector input {
  display: block;
  width: 100%;
  padding: 18px 24px;
  border: 1px solid var(--color-accent);  /* Accent border — NOT gray */
  border-radius: 0;
  background: var(--color-surface-subtle);
  font-family: var(--font-display);    /* Display font — NOT system font */
  font-size: 24px;
  font-weight: 500;
  color: var(--color-text-primary);
  transition: border-color 0.2s, background 0.2s;
}

.form-date-selector input::placeholder {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-placeholder);
}

.form-date-selector input:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-accent-hover);
}

.form-date-selector input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.form-date-chevron {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-accent);            /* Accent chevron — NOT gray */
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* ── Select / Dropdown ── */
.form-select {
  display: block;
  width: 100%;
  padding: var(--input-padding);
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface-base);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  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 d='M4 6l4 4 4-4' fill='none' stroke='%23AC7F42' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  /* TODO: Replace with inline SVG component that reads var(--color-accent) at runtime */
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

.form-select:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: var(--focus-ring);
}

/* ── Checkbox ── */
.form-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border-control);  /* WCAG 1.4.11 — 4.5:1 */
  border-radius: 2px;
  background: var(--color-surface-base);
  appearance: none;
  cursor: pointer;
  position: relative;
}

.form-checkbox:checked {
  background: var(--color-primary);    /* primary — NOT blue */
  border-color: var(--color-primary);
}

.form-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--color-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-checkbox:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Radio ── */
.form-radio {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border-control);  /* WCAG 1.4.11 — 4.5:1 */
  border-radius: 50%;
  background: var(--color-surface-base);
  appearance: none;
  cursor: pointer;
  position: relative;
}

.form-radio:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.form-radio:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--color-on-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.form-radio:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Error state ── */
.form-input--error,
.form-select--error {
  border-color: var(--color-error);
  background: var(--color-error-bg);
}

.form-input--error:focus,
.form-select--error:focus {
  border-color: var(--color-error);
  box-shadow: var(--focus-ring-error);
}

.form-error-text {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-error);
  margin-top: 6px;
}

/* ── Disabled state ── */
.form-input:disabled,
.form-select:disabled {
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-border);
  color: var(--color-disabled-text);
  cursor: not-allowed;
}