/* ============================================
   form.css — Elegant Responsive Form Styles
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Playfair+Display:wght@500;600&display=swap');

/* --- Custom Properties --- */
:root {
  --form-bg: #ffffff;
  --form-surface: #f8f7f4;
  --form-border: #e2dfd8;
  --form-border-focus: #8b7e6a;
  --form-text: #2c2825;
  --form-text-muted: #7a7167;
  --form-accent: #6b5b3e;
  --form-accent-hover: #55482f;
  --form-radius: 10px;
  --form-shadow: 0 1px 3px rgba(44, 40, 37, 0.06),
                 0 4px 12px rgba(44, 40, 37, 0.04);
  --form-shadow-focus: 0 0 0 3px rgba(107, 91, 62, 0.12),
                       0 1px 3px rgba(44, 40, 37, 0.08);
  --form-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --form-max-width: 620px;
}

/* --- Container --- */
#spf_form {
  max-width: var(--form-max-width);
  margin: 2.5rem auto;
  padding: 2.5rem 2.75rem 2.25rem;
  background: var(--form-bg);
  border: 1px solid var(--form-border);
  border-radius: calc(var(--form-radius) + 4px);
  box-shadow: var(--form-shadow);
  font-family: 'DM Sans', sans-serif;
  color: var(--form-text);
  line-height: 1.5;
}

/* --- Recipient block --- */
.spf_recipient {
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--form-border);
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--form-text);
  letter-spacing: -0.01em;
}

/* --- Input pairs --- */
.spf_input_pair {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

/* --- Labels / Prompts --- */
.spf_block_prompt {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--form-text-muted);
  margin-bottom: 0.15rem;
}

/* --- Text Inputs --- */
.spf_normal_input {
  display: block;
  width: 100%;
}

.spf_normal_input input[type="text"],
.spf_normal_input input[type="email"] {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.975rem;
  color: var(--form-text);
  background: var(--form-surface);
  border: 1.5px solid var(--form-border);
  border-radius: var(--form-radius);
  outline: none;
  transition: border-color var(--form-transition),
              box-shadow var(--form-transition),
              background var(--form-transition);
  box-sizing: border-box;
  -webkit-appearance: none;
}

.spf_normal_input input[type="text"]:hover,
.spf_normal_input input[type="email"]:hover {
  border-color: var(--form-border-focus);
}

.spf_normal_input input[type="text"]:focus,
.spf_normal_input input[type="email"]:focus {
  border-color: var(--form-accent);
  background: #fff;
  box-shadow: var(--form-shadow-focus);
}

/* Remove inline br tags effect */
.spf_input_pair br {
  display: none;
}

/* --- Textarea --- */
.spf_textarea {
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
}

.spf_textarea label {
  display: block;
}

.spf_textarea textarea {
  width: 100%;
  min-height: 150px;
  padding: 0.75rem 0.9rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.975rem;
  color: var(--form-text);
  background: var(--form-surface);
  border: 1.5px solid var(--form-border);
  border-radius: var(--form-radius);
  outline: none;
  resize: vertical;
  transition: border-color var(--form-transition),
              box-shadow var(--form-transition),
              background var(--form-transition);
  box-sizing: border-box;
  line-height: 1.6;
  -webkit-appearance: none;
}

.spf_textarea textarea:hover {
  border-color: var(--form-border-focus);
}

.spf_textarea textarea:focus {
  border-color: var(--form-accent);
  background: #fff;
  box-shadow: var(--form-shadow-focus);
}

/* --- Comments prompt (above textarea) --- */
.spf_textarea + .spf_block_prompt,
div.spf_block_prompt {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* --- Buttons --- */
.spf_buttons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--form-border);
  margin-top: 0.25rem;
}

.spf_buttons input[type="submit"],
.spf_buttons input[type="reset"] {
  padding: 0.65rem 1.75rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: none;
  border-radius: var(--form-radius);
  cursor: pointer;
  transition: background var(--form-transition),
              transform 0.15s ease,
              box-shadow var(--form-transition);
}

.spf_buttons input[type="submit"] {
  background: var(--form-accent);
  color: #fff;
}

.spf_buttons input[type="submit"]:hover {
  background: var(--form-accent-hover);
  box-shadow: 0 2px 8px rgba(107, 91, 62, 0.25);
}

.spf_buttons input[type="submit"]:active {
  transform: translateY(1px);
}

.spf_buttons input[type="reset"] {
  background: transparent;
  color: var(--form-text-muted);
  border: 1.5px solid var(--form-border);
}

.spf_buttons input[type="reset"]:hover {
  background: var(--form-surface);
  border-color: var(--form-border-focus);
  color: var(--form-text);
}

/* --- Captcha area --- */
#spf_form fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* --- Cookie message --- */
#spf_form .spf_cookie-message {
  font-size: 0.85rem;
  color: var(--form-text-muted);
  margin-bottom: 1rem;
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

/* Tablet */
@media (max-width: 768px) {
  #spf_form {
    margin: 1.5rem 1rem;
    padding: 2rem 1.75rem 1.75rem;
  }
}

/* Mobile */
@media (max-width: 480px) {
  #spf_form {
    margin: 1rem 0.5rem;
    padding: 1.5rem 1.15rem 1.25rem;
    border-radius: var(--form-radius);
  }

  .spf_recipient {
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
  }

  .spf_block_prompt {
    font-size: 0.78rem;
  }

  .spf_normal_input input[type="text"],
  .spf_normal_input input[type="email"],
  .spf_textarea textarea {
    font-size: 1rem; /* Prevents iOS zoom on focus */
    padding: 0.75rem 0.8rem;
  }

  .spf_textarea textarea {
    min-height: 130px;
  }

  .spf_buttons {
    flex-direction: column;
    gap: 0.6rem;
  }

  .spf_buttons input[type="submit"],
  .spf_buttons input[type="reset"] {
    width: 100%;
    text-align: center;
    padding: 0.75rem 1rem;
  }
}

/* Small mobile */
@media (max-width: 360px) {
  #spf_form {
    padding: 1.25rem 0.9rem 1rem;
  }
}