/* =========================================================
   File: assets/css/forms.css
   Project: DumagueteAA QCS Lite
   Version: 0.1.0

   Purpose:
   Form styling for:
   - Newsletter signup
   - Convention registration
   - Contact forms

   Forms are infrastructure.
   Forms are not funnels.

   ========================================================= */


/* =========================================================
   01) FORM CONTAINER
   ========================================================= */

.daa-form {
  width: 100%;
}

.daa-form-group {
  margin-bottom: var(--daa-space-sm);
}


/* =========================================================
   02) LABELS
   ========================================================= */

.daa-form label {
  display: block;
  margin-bottom: 0.5rem;

  font-weight: 600;
}


/* =========================================================
   03) INPUTS
   ========================================================= */

.daa-form input[type="text"],
.daa-form input[type="email"],
.daa-form input[type="tel"],
.daa-form input[type="number"],
.daa-form input[type="date"],
.daa-form textarea,
.daa-form select {
  width: 100%;

  padding: 0.75rem;

  background: var(--daa-white);

  border: 1px solid var(--daa-border-soft);
  border-radius: var(--daa-radius-soft);

  color: var(--daa-text);

  box-sizing: border-box;
}


/* =========================================================
   04) TEXTAREA
   ========================================================= */

.daa-form textarea {
  min-height: 140px;
  resize: vertical;
}


/* =========================================================
   05) INPUT FOCUS
   ========================================================= */

.daa-form input:focus,
.daa-form textarea:focus,
.daa-form select:focus {
  border-color: var(--daa-border-dark);
  outline: none;
}


/* =========================================================
   06) CHECKBOXES
   ========================================================= */

.daa-form input[type="checkbox"] {
  margin-right: 0.5rem;
}


/* =========================================================
   07) REQUIRED INDICATOR
   ========================================================= */

.daa-required {
  color: var(--daa-text);
  font-weight: 700;
}


/* =========================================================
   08) FORM ACTIONS
   ========================================================= */

.daa-form-actions {
  margin-top: var(--daa-space-md);
}


/* =========================================================
   09) NEWSLETTER FORM
   ========================================================= */

.daa-newsletter-form {
  max-width: 540px;
}


/* =========================================================
   10) REGISTRATION FORM
   ========================================================= */

.daa-registration-form {
  max-width: 760px;
}


/* =========================================================
   11) FORM MESSAGES
   ========================================================= */

.daa-form-message {
  margin-top: var(--daa-space-sm);
}

.daa-form-message--success {
  color: #1f5f1f;
}

.daa-form-message--error {
  color: #8b1e1e;
}