/* ═══════════════════════════════════════════════════════════════
   contact.css  —  styles for the ProcessWire Ajax contact form
   Place in /site/templates/styles/
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  --c-bg:          #f5f4f0;
  --c-surface:     #ffffff;
  --c-border:      #d9d5cc;
  --c-border-focus:#3d6b4f;
  --c-text:        #1a1a18;
  --c-muted:       #6b6b64;
  --c-accent:      #3d6b4f;
  --c-accent-dark: #2d5039;
  --c-error:       #b83232;
  --c-success-bg:  #eaf4ec;
  --c-success-bd:  #89c49a;
  --c-error-bg:    #fdf0f0;
  --c-error-bd:    #e8aaaa;

  --radius:  6px;
  --shadow:  0 2px 12px rgba(0,0,0,.08);
  --trans:   .18s ease;
}

/* ── Layout wrapper ──────────────────────────────────────────── */
.cf-wrap {
  max-width: 680px;
  margin: 1rem auto;
  /*padding: 0 1rem;
  font-family: var(--font-sans);
  color: var(--c-text);*/
}

/* ── Two-column row ──────────────────────────────────────────── */

/*
.cf-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
}
.cf-group .cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 520px) {
  .cf-row { grid-template-columns: 1fr; }
}
*/


.req { color: var(--c-error); margin-left: 2px; }

.cf-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: .85rem;
}

/* ── Inputs & textarea ───────────────────────────────────────── */
.cf-group input[type="text"],
.cf-group input[type="email"],
.cf-group textarea {

  transition   : border-color var(--trans), box-shadow var(--trans);
  outline      : none;
  resize       : vertical;
}

.cf-group input:focus,
.cf-group textarea:focus {
  border-color: var(--c-border-focus);
  box-shadow  : 0 0 0 3px rgba(61,107,79,.15);
  background  : #fff;
}

.cf-group input.is-invalid,
.cf-group textarea.is-invalid {
  border-color: var(--c-error);
  box-shadow  : 0 0 0 3px rgba(184,50,50,.12);
}

.cf-error {
  font-size  : .78rem;
  color      : var(--c-error);
  margin-top : .3rem;
  min-height : 1em;
}

/* ── File drop area ──────────────────────────────────────────── */
.cf-file-area {
  display       : flex;
  align-items   : center;
  gap           : .6rem;
  padding       : .9rem 1rem;
  border        : 2px dashed var(--c-border);
  border-radius : var(--radius);
  background    : var(--c-bg);
  cursor        : pointer;
  transition    : border-color var(--trans), background var(--trans);
  user-select   : none;
}

.cf-file-area:hover,
.cf-file-area.is-over {
  border-color: var(--c-border-focus);
  background  : #edf4ef;
}

.cf-file-area input[type="file"] { display: none; }

.cf-file-icon  { font-size: 1.3rem; flex-shrink: 0; }
.cf-file-label { font-size: .88rem; color: var(--c-muted); }
.cf-file-label u { text-decoration-color: var(--c-border-focus); color: var(--c-accent); }

/* File chip (after selection) */
.cf-file-preview { margin-top: .5rem; }

.cf-file-chip {
  display    : inline-flex;
  align-items: center;
  gap        : .5rem;
  padding    : .3rem .7rem;
  background : var(--c-success-bg);
  border     : 1px solid var(--c-success-bd);
  border-radius: 99px;
  font-size  : .82rem;
}

.cf-file-remove {
  background  : none;
  border      : none;
  cursor      : pointer;
  color       : var(--c-muted);
  font-size   : .75rem;
  line-height : 1;
  padding     : 0;
  transition  : color var(--trans);
}
.cf-file-remove:hover { color: var(--c-error); }

/* ── Honeypot ────────────────────────────────────────────────── */
#hpField {
  position : absolute;
  left     : -9999px;
  opacity  : 0;
  height   : 0;
  width    : 0;
  pointer-events: none;
}

/* ── Submit button ───────────────────────────────────────────── */
.cf-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : .6rem;
  cursor         : pointer;
  transition     : background var(--trans), transform var(--trans);
}
.cf-btn:hover:not(:disabled) {  }
.cf-btn:active:not(:disabled){ transform: translateY(1px); }
.cf-btn:disabled              { opacity: .6; cursor: not-allowed; }

/* Spinner inside button */
.btn-spinner {
  display   : none;
  width     : 16px;
  height    : 16px;
  border    : 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation : cfSpin .7s linear infinite;
}

.cf-btn.is-loading .btn-spinner { display: block; }
.cf-btn.is-loading .btn-label   { opacity: .7; }

@keyframes cfSpin { to { transform: rotate(360deg); } }

/* ── Alert banners ───────────────────────────────────────────── */
.cf-alert {
  margin-top   : 1.25rem;
  padding      : 1rem 1.25rem;
  border-radius: var(--radius);
  font-size    : .9rem;
  line-height  : 1.5;
}

.cf-alert--success {
  background  : var(--c-success-bg);
  border      : 1px solid var(--c-success-bd);
  color       : #1e5c2e;
}

.cf-alert--error {
  background  : var(--c-error-bg);
  border      : 1px solid var(--c-error-bd);
  color       : var(--c-error);
}