/* ============================================================
   OPTION D — PREMIUM RED CONTACT FORM (IMPROVED)
   Includes styling for checkbox, select, spacing, focus, etc.
============================================================ */

/* MAIN CARD -------------------------------------------------- */
#contact.card {
  position: relative;
    background: linear-gradient(135deg, #fff4f4, #ffe6e6);
  color: var(--color-fg);
  padding: 3rem 2.5rem;
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
  margin-top: 2.5rem;
  border: 1px solid #e5e5e5;
}

/* Accent bar */
#contact.card::before {
  content: "";
  display: block;
  height: 10px;
  width: 100%;
  background: linear-gradient(90deg, #b40000, #ff3d3d);
  border-radius: 22px 22px 0 0;
  position: absolute;
  top: 0;
  left: 0;
}

/* HEADINGS ----------------------------------------------------- */
#contact h1 {
  font-size: 2.3rem;
  font-weight: 800;
  margin-top: .6rem;
  margin-bottom: 1rem;
  color: #660000;
}

#contact p {
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

/* SPACING FOR FIELDS ------------------------------------------ */
#contact form > div,
#contact fieldset {
  margin-bottom: 1.55rem;
}

/* LABELS ------------------------------------------------------- */
#contact label {
  font-weight: 600;
  display: block;
  margin-bottom: 0.3rem; /* before it was 0.45 */
  color: #222;
}

/* INPUTS / SELECT / TEXTAREA ---------------------------------- */
#contact input,
#contact select,
#contact textarea {
  width: 100%;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid #bbb;
  background: #fff;
  font-size: 1rem;
  transition: border .25s ease, box-shadow .25s ease;
  min-height: 52px; /* Fix small input issue */
}

#contact textarea {
  min-height: 140px;
  resize: vertical;
}

/* SELECT MENU PREMIUM STYLE ----------------------------------- */
#contact select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg ...");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  cursor: pointer;
}

/* CHECKBOX STYLE ---------------------------------------------- */
#contact input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: .5rem;
  transform: translateY(2px);
  accent-color: #c81818;
  cursor: pointer;
}

/* Focus ring for accessibility */
#contact input[type="checkbox"]:focus {
  outline: 3px solid rgba(181,0,0,.5);
  outline-offset: 3px;
}

/* FOCUS (WCAG AA) --------------------------------------------- */
#contact input:focus,
#contact select:focus,
#contact textarea:focus {
  outline: none;
  border-color: #b50505;
  box-shadow: 0 0 0 3px rgba(181,5,5,.28);
}

/* ERROR TEXT -------------------------------------------------- */
.error-text {
  color: #c40000;
  font-size: .9rem;
  margin-top: .35rem;
  font-weight: 600;
}

.field-error {
  border: 2px solid #c62828 !important;
  background-color: #ffebee;
}


/* CAPTCHA BOX -------------------------------------------------- */
#contact fieldset {
  padding: 1.2rem;
  border-radius: 16px;
  border: 1px solid #ddd;
  background: #fafafa;
}

#contact fieldset legend {
  font-weight: 700;
  color: #650000;
}

/* BUTTONS ------------------------------------------------------ */
#contact .btn[type="submit"] {
  background: linear-gradient(180deg, #ff4949, #c81818);
  padding: 1rem 2.2rem;
  border-radius: 16px;
  font-size: 1.05rem;
  font-weight: 700;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}

#contact .btn[type="submit"]:hover,
#contact .btn[type="submit"]:focus {
  background: linear-gradient(180deg, #c81818, #9f0e0e);
  transform: translateY(-2px);
}

#contact button[type="reset"] {
  background: #f3f3f3;
  color: #333;
  border-radius: 16px;
  padding: .95rem 1.3rem;
  border: none;
  margin-left: .8rem;
  cursor: pointer;
}

#contact button[type="reset"]:hover,
#contact button[type="reset"]:focus {
  background: #e3e3e3;
}

/* SUCCESS BANNER ---------------------------------------------- */
.success-banner {
  background: #dff7de;
  border-left: 8px solid #3a9d38;
  padding: 1.2rem 1.4rem;
  border-radius: 16px;
  font-size: 1.15rem;
  margin-bottom: 1.6rem;
  color: #185d17;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .35s ease, transform .35s ease;
}

.success-banner.visible {
  opacity: 1;
  transform: translateY(0);
}

.success-banner:focus {
  outline: 4px solid #3a9d38;
  outline-offset: 4px;
}

/* HIGH CONTRAST MODE ------------------------------------------ */
html[data-contrast="true"] #contact.card {
  background: #000;
  color: #fff;
  border-color: #666;
}

html[data-contrast="true"] #contact input,
html[data-contrast="true"] #contact select,
html[data-contrast="true"] #contact textarea {
  background: #111;
  border: 1px solid #fff;
  color: #fff;
}

html[data-contrast="true"] #contact input:focus,
html[data-contrast="true"] #contact select:focus,
html[data-contrast="true"] #contact textarea:focus {
  box-shadow: 0 0 0 3px #fff;
}

html[data-contrast="true"] .success-banner {
  background: #000;
  border-left-color: #0f0;
  color: #0f0;
}

html[data-contrast="true"] #contact .btn[type="submit"] {
  background: #fff !important;
  color: #000 !important;
}

html[data-contrast="true"] #contact button[type="reset"] {
  background: #444 !important;
  color: #fff !important;
}

/* MOBILE -------------------------------------------------------- */
@media (max-width: 600px) {
  #contact.card {
    padding: 1.8rem;
  }
  #contact h1 {
    font-size: 1.9rem;
  }
}