/* ==========================================================================
   Contact form — TripGuidely
   Add near your forms / content section in styles.css
   ========================================================================== */

.contact-form{
  display:grid;
  gap:14px;
  margin-top:10px;
}

.contact-honeypot{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.form-row{
  display:grid;
  gap:8px;
}

.form-row label{
  font-weight:850;
  color:var(--text);
  letter-spacing:-0.12px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="url"],
.contact-form select,
.contact-form textarea{
  width:100%;
  max-width:100%;
  min-width:0;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(15,23,42,.12);
  background:#ffffff;
  color:var(--text);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 10px 22px rgba(2,6,23,.06);
  transition:
    border-color .14s ease,
    box-shadow .14s ease,
    background .14s ease,
    transform .12s ease;
}

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

.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:var(--muted2);
}

.contact-form select{
  cursor:pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,.68) 50%),
    linear-gradient(135deg, rgba(15,23,42,.68) 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:42px;
}

.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover{
  border-color:rgba(15,23,42,.18);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:rgba(18,207,208,.46);
  box-shadow:
    0 0 0 4px rgba(18,207,208,.16),
    0 14px 28px rgba(2,6,23,.08);
  background:#ffffff;
}

.contact-form input[aria-invalid="true"],
.contact-form select[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"]{
  border-color:rgba(220,38,38,.44);
  box-shadow:
    0 0 0 4px rgba(220,38,38,.10),
    0 10px 22px rgba(2,6,23,.06);
}

.form-note{
  margin-top:2px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(420px 160px at 10% 10%, rgba(18,207,208,.10), transparent 60%),
    radial-gradient(420px 160px at 90% 30%, rgba(244,162,97,.10), transparent 60%),
    #ffffff;
  box-shadow:0 10px 22px rgba(2,6,23,.06);
}

.form-note p{
  margin:0;
  color:var(--muted);
  font-size:.96rem;
}

.form-status{
  display:none;
  margin-top:2px;
  padding:13px 14px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 22px rgba(2,6,23,.06);
  font-weight:700;
}

.form-status.is-visible{
  display:block;
}

.form-status.is-success{
  color:#065f46;
  border-color:rgba(16,185,129,.24);
  background:linear-gradient(135deg, rgba(16,185,129,.12), rgba(18,207,208,.10));
}

.form-status.is-error{
  color:#991b1b;
  border-color:rgba(239,68,68,.24);
  background:linear-gradient(135deg, rgba(239,68,68,.12), rgba(244,162,97,.10));
}

.contact-intro{
  max-width:72ch;
}

.section-divider{
  border:0;
  border-top:1px solid rgba(15,23,42,.12);
  margin:32px 0;
  opacity:.15;
}

.contact-form .btn,
.contact-form button[type="submit"]{
  margin-top:2px;
}

.contact-form .btn.primary,
.contact-form .btn.btn-primary,
.contact-form button[type="submit"].btn-primary{
  background:linear-gradient(135deg, var(--cta1), var(--cta2));
  color:#ffffff;
  border:1px solid rgba(18,207,208,.55);
  box-shadow:0 12px 30px rgba(18,207,208,.35);
}

.contact-form .btn.primary:hover,
.contact-form .btn.btn-primary:hover,
.contact-form button[type="submit"].btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(18,207,208,.46);
  border-color:rgba(18,207,208,.75);
}

.contact-form .btn[disabled],
.contact-form button[disabled]{
  opacity:.72;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:0 8px 18px rgba(2,6,23,.08) !important;
}

@media (max-width:760px){
  .contact-form{
    gap:12px;
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="url"],
  .contact-form select,
  .contact-form textarea{
    padding:15px 15px;
    border-radius:18px;
    font-size:16px;
  }

  .contact-form .btn,
  .contact-form button[type="submit"]{
    width:100%;
    justify-content:center;
    padding:16px 16px;
    border-radius:16px;
    font-size:18px;
  }
}