@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
  box-sizing: border-box;
}

:root {
  /* Backgrounds */
  --form-page-bg: #d9d5ce;
  --form-container-bg: #f6f4ef;
  --form-card-bg: #ffffff;

  /* Typography */
  --form-text: #2b2b2b;
  --form-heading: #c9a85d;
  --form-muted: #66645f;

  /* Accents */
  --form-accent: #4f9a8a;
  --form-accent-light: #6bb3a4;

  /* Borders */
  --form-border: #d9d3c7;

  /* Effects */
  --form-focus:
    rgba(107,179,164,0.18);

  --form-invalid:
    #b85c5c;

  /* Radius */
  --form-radius: 8px;

  /* Shadows */
  --form-shadow:
    0 4px 12px rgba(0,0,0,0.08);

  --form-card-shadow:
    0 2px 8px rgba(0,0,0,0.06);
}

body {
  margin: 0;
  padding: 40px 20px;
  background-color: var(--form-page-bg);
  color: var(--form-text);
  font-family: "Inter", serif;
  min-height: 100vh;
}

.form_page {
  width: 100%;
}

.form_container {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  background-color: var(--form-container-bg);
  border-radius: var(--form-radius);
  padding: 50px;
  box-shadow: var(--form-shadow);
}

form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ==========================================
   TITLE BLOCK
========================================== */
.form_title_block {
  margin-bottom: 10px;
}

.form_title_block h1 {
  margin: 0 0 18px 0;
  font-family: "Geist", sans-serif;
  font-size: 3rem;
  font-weight: 750;
  line-height: 1.1;
  color: var(--form-heading);
}

.form_title_block p {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--form-text);
}

/* ==========================================
   FIELD WRAPPERS
========================================== */

.form_field {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-left: 6px solid var(--form-accent);
  padding: 18px;
  border-bottom: 1px solid var(--form-border);
}

.form_field:hover {
  box-shadow:
    0 5px 14px rgba(0,0,0,0.10);
}

.form_field > label, fieldset > legend {
  display: block;
  margin: 0;
  font-family: "Geist", sans-serif;
  /* font-size: 1.08rem; */
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--form-text);
}

.form_field[hidden] {
    display: none !important;
}

.form_description,
.form_help {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--form-muted);
}

/* ==========================================
   TEXT INPUTS
========================================== */

input[type="text"],
input[type="email"],
textarea,
select {
  width: 100%;
  max-width: 650px;
  padding: 14px 16px;
  font-family: "Libre Baskerville", serif;
  font-size: 1rem;
  line-height: 1.5;
  background-color: #fff;
  color:
    var(--form-text);
  border: 1px solid
    var(--form-border);
  border-radius: 6px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

/* ==========================================
   TEXTAREA
========================================== */

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

/* ==========================================
   FOCUS STATES
========================================== */

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--form-accent);
  box-shadow: 0 0 0 4px var(--form-focus);
}

/* ==========================================
   FIELDSETS
========================================== */

fieldset {
  border: none;
  margin: 8px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ==========================================
   RADIO LABELS
========================================== */

fieldset label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.5;
  cursor: pointer;
}

/* ==========================================
   RADIO BUTTONS
========================================== */

input[type="radio"] {

  accent-color:
    var(--form-accent);

  transform: scale(1.12);

  cursor: pointer;
}

/* ==========================================
   SLOT GROUPS
========================================== */

.slot_group {

  background-color:
    #eef5f3;

  border-radius:
    var(--form-radius);

  padding: 18px;

  margin-top: 10px;
}

.slot_group legend {

  margin-bottom: 10px;

  font-family: "Geist", sans-serif;

  font-weight: 700;

  color:
    var(--form-accent);
}

/* ==========================================
   DROPDOWNS
========================================== */

select {

  appearance: none;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--form-accent) 50%
    ),
    linear-gradient(
      135deg,
      var(--form-accent) 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 20px) calc(50% - 3px),
    calc(100% - 14px) calc(50% - 3px);

  background-size:
    6px 6px,
    6px 6px;

  background-repeat: no-repeat;

  padding-right: 40px;
}

/* ==========================================
   SUBMIT BUTTON
========================================== */

button[type="submit"] {

  align-self: flex-start;

  margin-top: 6px;

  background-color:
    var(--form-accent);

  color: white;

  border: none;
  border-radius: 6px;

  padding: 14px 30px;

  font-family: "Geist", sans-serif;

  font-size: 1rem;
  font-weight: 650;

  letter-spacing: 0.02em;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

button[type="submit"]:hover {

  background-color:
    var(--form-accent-light);

  transform: translateY(-1px);

  box-shadow:
    0 4px 10px rgba(0,0,0,0.12);
}

button[type="submit"]:active {
  transform: translateY(0);
}

/* ==========================================
   VALIDATION
========================================== */

input:invalid,
textarea:invalid,
select:invalid {

  border-color:
    var(--form-invalid);
}

input:invalid:focus,
textarea:invalid:focus,
select:invalid:focus {

  box-shadow:
    0 0 0 4px rgba(184,92,92,0.18);
}

/* ==========================================
   SUCCESS MESSAGE
========================================== */

.form_success {
  background-color: var(--form-card-bg);
  border-left: 6px solid var(--form-heading);
  border-radius: var(--form-radius);
  padding: 28px;
  box-shadow:
    var(--form-card-shadow);
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

  .form_main {
    padding: 20px 10px;
  }

  /* .form_container { */
  /*   padding: 20px; */
  /* } */

  .form_title_block,
  .form_field,
  .form_success {
    padding: 20px;
  }

  .form_title_block h1 {
    font-size: 2.2rem;
  }

  input[type="text"],
  input[type="email"],
  textarea,
  select {
    max-width: 100%;
  }

  button[type="submit"] {
    width: 100%;
    text-align: center;
  }
}