/* ==========================================================
   FORM.CSS — LIGHT THEME (WITNEY SELF STORAGE)
========================================================== */

.contact-form {
  width: 100%;
}

.contact-form h2 {
  margin-bottom: 2rem;
  font-family: "Exo 2", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--brand-navy);
}

label {
  display: block;
  margin: 1.2rem 0 0.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brand-navy);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 1rem;
  color: #222;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px rgba(11, 85, 181, 0.12);
}

::placeholder {
  color: #b3b3b3;
  opacity: 1;
}

::-webkit-input-placeholder {
  color: #b3b3b3;
}

:-ms-input-placeholder {
  color: #b3b3b3;
}

::-ms-input-placeholder {
  color: #b3b3b3;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%230b55b5' height='14' width='14' xmlns='http://www.w3.org/2000/svg'><polygon points='0,0 14,0 7,9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}

input[type="submit"] {
  display: block;
  width: 100%;
  margin-top: 2rem;
  padding: 16px;
  background: var(--brand-blue);
  color: #fff;
  font-family: "Exo 2", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
}

input[type="submit"]:hover {
  background: var(--brand-navy);
}

.form-message {
  margin-top: 1.5rem;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 0.95rem;
}

.form-message.error {
  background: #fdeaea;
  border: 1px solid #e0a1a1;
  color: #7a1f1f;
}

.form-message.success {
  background: #e8f2ff;
  border: 1px solid #b7d3f5;
  color: #08386b;
}

@media (max-width: 768px) {
  .contact-form h2 {
    font-size: 2rem;
  }
}