/* =========================================================
   Contact form section — matches existing design system.
   Reuses: --cream, --wine, --orange, display/sans/meta fonts,
   14px radius card, wine-08 border, orange primary button.
   ========================================================= */

.contact{
  background:var(--cream);
  position:relative;
  overflow:hidden;
}
.contact .contact-head{
  text-align:center;max-width:760px;margin:0 auto 48px;
}
.contact .contact-head .overline{color:var(--orange);display:block;margin-bottom:14px}
.contact .contact-head .h2{color:var(--wine);margin:0}
.contact .contact-head .kicker{margin:22px auto 0;text-align:center}

.contact-card{
  max-width:680px;margin:0 auto;
  background:#fff;border-radius:14px;
  border:1px solid rgba(58,10,30,.08);
  padding:40px 44px 44px;
  position:relative;z-index:2;
}

.contact-form{display:flex;flex-direction:column;gap:20px}
.contact-form[hidden],
.contact-success[hidden],
.contact-banner[hidden],
.field-error[hidden],
.contact-spinner[hidden]{display:none !important}

.field{display:flex;flex-direction:column;gap:8px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.field-label{
  font-family:var(--meta);font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;
  font-size:11px;color:var(--wine);
  display:flex;align-items:center;gap:8px;
}
.field-optional{
  font-family:var(--meta);font-weight:400;
  font-size:10px;letter-spacing:0.12em;
  color:rgba(58,10,30,.5);
  text-transform:uppercase;
}

.field-input,
.field-select,
.field-textarea{
  font-family:var(--sans);
  font-size:15px;line-height:1.5;
  color:var(--wine);
  background:var(--cream);
  border:1px solid rgba(58,10,30,.12);
  border-radius:10px;
  padding:13px 14px;
  width:100%;
  transition:border-color .18s ease-out, background .18s ease-out,
             box-shadow .18s ease-out;
  -webkit-appearance:none;appearance:none;
}
.field-input::placeholder,
.field-textarea::placeholder{color:rgba(58,10,30,.4)}

.field-input:hover,
.field-select:hover,
.field-textarea:hover{
  border-color:rgba(58,10,30,.24);
}
.field-input:focus,
.field-select:focus,
.field-textarea:focus{
  outline:0;
  background:#fff;
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(232,78,15,.12);
}

.field-textarea{resize:vertical;min-height:120px;font-family:var(--sans)}

/* Custom select chevron in brand wine */
.field-select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' stroke='%233A0A1E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-color:var(--cream);
  padding-right:38px;
  cursor:pointer;
}

/* Date: style native picker icon */
.field-input[type="date"]{
  cursor:pointer;
  font-family:var(--sans);
}
.field-input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:.55;cursor:pointer;
}

.contact-submit{
  width:100%;
  justify-content:center;
  margin-top:8px;
}

.contact-helper{
  font-size:13px;line-height:1.5;
  color:rgba(58,10,30,.6);
  text-align:center;
  max-width:480px;
  margin:6px auto 0;
}

/* ---------- Success state ---------- */

.contact-success{
  text-align:center;
  padding:16px 0 8px;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.contact-success-icon{
  width:72px;height:72px;border-radius:50%;
  background:var(--orange);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px -12px rgba(232,78,15,.55);
}
.contact-success h3{
  font-family:var(--display);font-weight:900;
  font-variation-settings:"SOFT" 100;
  font-size:32px;line-height:1.05;letter-spacing:-0.022em;
  color:var(--wine);
  margin:0;
  text-wrap:balance;
}
.contact-success p{
  margin:0;
  font-family:var(--sans);
  font-size:16px;line-height:1.55;
  color:var(--wine);opacity:.75;
  max-width:440px;
}
.contact-success p a{
  color:var(--orange);
  border-bottom:1px solid rgba(232,78,15,.4);
  padding-bottom:1px;
}
.contact-success-btn{margin-top:0}
.contact-success-actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px;
}

/* ---------- Honeypot (hidden from humans, visible to bots) ---------- */
.contact-honeypot{
  position:absolute;left:-9999px;width:1px;height:1px;opacity:0;
  pointer-events:none;
}

/* ---------- Field-level error ---------- */
.field-error{
  font-family:var(--meta);font-size:12px;line-height:1.4;
  color:#c5253a;letter-spacing:0.01em;
  margin-top:-2px;
}
.field-input.is-invalid,
.field-select.is-invalid,
.field-textarea.is-invalid{
  border-color:#c5253a;
  box-shadow:0 0 0 3px rgba(197,37,58,.12);
}

/* ---------- Banner-level error (server / generic) ---------- */
.contact-banner{
  padding:14px 18px;border-radius:10px;
  background:#fdecef;border:1px solid rgba(197,37,58,.3);
  color:#7a1b29;font-size:14px;line-height:1.5;
}
.contact-banner.is-warning{
  background:#fff5e0;border-color:rgba(232,160,32,.5);color:#5c3d05;
}

/* ---------- Submit loading state ---------- */
.contact-submit{position:relative}
.contact-submit[disabled]{opacity:.7;cursor:wait}
.contact-spinner{
  display:inline-block;width:16px;height:16px;
  border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;margin-left:10px;
  animation:contactSpin .8s linear infinite;
  vertical-align:-3px;
}
@keyframes contactSpin{to{transform:rotate(360deg)}}

/* ---------- Outline wine button (success state) ---------- */
.btn-outline-wine{
  background:transparent;color:var(--wine);
  border:1.5px solid var(--wine);
}
.btn-outline-wine:hover{background:var(--wine);color:#fff}

/* Entry animation */
@keyframes contactSuccessIn{
  from{opacity:0; transform:translateY(12px) scale(.98)}
  to  {opacity:1; transform:none}
}
.contact-success{
  animation:contactSuccessIn .45s ease-out;
}

/* ---------- Responsive ---------- */
@media (max-width:680px){
  .contact-card{padding:28px 22px 32px;border-radius:12px}
  .field-row{grid-template-columns:1fr;gap:20px}
  .contact-success h3{font-size:26px}
}

@media (prefers-reduced-motion: reduce){
  .contact-success{animation:none}
  .field-input,.field-select,.field-textarea{transition:none}
  .contact-spinner{animation:none}
}