/*
 * Reusable contact form — styles.
 * Theme it by overriding the custom properties on a parent of the form (or
 * on .cf-form and .cf-status). Everything is scoped under .cf-* so it won't
 * clash with a site's own CSS.
 */
/* the status box usually sits just above the form, so it needs the tokens too */
.cf-form,
.cf-status{
  --cf-accent:#0E5F5C;          /* Send button */
  --cf-accent-hover:#093E3C;
  --cf-accent-soft:rgba(9,161,155,0.2); /* focus ring */
  --cf-focus:#09A19B;            /* focused field border */
  --cf-error-bg:rgba(220,38,38,0.1);
  --cf-error-text:#dc2626;
  --cf-error-border:#fca5a5;
  --cf-text:#12181b;
  --cf-required:#008681;         /* the * after required labels */
  --cf-border:#d8d7cf;
  --cf-field-bg:rgba(255,255,255,0.92);
  --cf-disabled:#d8d7cf;
  --cf-radius:8px;
  --cf-font:inherit;
}

.cf-form{
  outline:none; /* takes focus (script only) after the success pop-up closes */
  display:flex;
  flex-direction:column;
  gap:20px;
  font-family:var(--cf-font);
}

.cf-field{display:flex; flex-direction:column; gap:8px;}
.cf-field label{font-size:14px; font-weight:600; color:var(--cf-text);}
.cf-field--required label::after{content:" *"; color:var(--cf-required);}

.cf-field input,
.cf-field select,
.cf-field textarea{
  padding:12px 14px;
  border:1px solid var(--cf-border);
  border-radius:var(--cf-radius);
  font:inherit;
  font-size:16px; /* 16px stops iOS zooming on focus */
  color:var(--cf-text);
  background:var(--cf-field-bg);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus{
  outline:none;
  border-color:var(--cf-focus);
  box-shadow:0 0 0 3px var(--cf-accent-soft);
}
.cf-field textarea{min-height:120px; resize:vertical;}

/* honeypot: off-screen, never shown to people */
.cf-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.cf-actions{display:flex; gap:12px; margin-top:8px;}
.cf-submit{
  padding:12px 28px;
  border:0;
  border-radius:var(--cf-radius);
  background:var(--cf-accent);
  color:#fff;
  font:inherit;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease;
}
.cf-submit:hover{background:var(--cf-accent-hover);}
.cf-submit:disabled{background:var(--cf-disabled); cursor:not-allowed;}

/* errors only (success uses the pop-up below); sits next to Send */
.cf-status{display:none; padding:14px 16px; border-radius:var(--cf-radius); font-size:14px;}
.cf-status--error{display:block; background:var(--cf-error-bg); color:var(--cf-error-text); border:1px solid var(--cf-error-border);}

/* success confirmation pop-up (built by contact-form.js, appended to <body>) */
.cf-dialog{
  --cf-accent:#0E5F5C;
  --cf-accent-hover:#093E3C;
  --cf-success-bg:#093E3C;
  --cf-success-text:#fff;
  --cf-text:#12181b;
  --cf-muted:#4a4f52;
  --cf-radius:8px;

  margin:auto; /* many CSS resets zero margins; the browser centres modals with auto */
  width:min(420px, calc(100vw - 32px));
  padding:40px 32px 32px;
  border:0;
  border-radius:16px;
  background:#fff;
  color:var(--cf-text);
  text-align:center;
  box-shadow:0 24px 60px rgba(2,16,15,0.35);
}
.cf-dialog::backdrop{background:rgba(4,20,20,0.55); backdrop-filter:blur(2px);}
.cf-dialog[open]{animation:cf-in .22s ease-out;}
@keyframes cf-in{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){ .cf-dialog[open]{animation:none;} }
.cf-dialog-icon{
  width:56px; height:56px; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--cf-success-bg); color:var(--cf-success-text);
}
.cf-dialog-title{margin:0 0 8px; font-size:24px; line-height:1.2; color:var(--cf-text);}
.cf-dialog-text{margin:0 0 28px; font-size:16px; line-height:1.6; color:var(--cf-muted);}
.cf-dialog-close{min-width:140px;}
.cf-dialog-x{
  position:absolute; top:10px; right:10px;
  width:44px; height:44px;
  border:0; border-radius:8px; background:transparent;
  font-size:24px; line-height:1; color:var(--cf-muted); cursor:pointer;
}
.cf-dialog-x:hover{background:rgba(9,161,155,0.1); color:var(--cf-accent);}

@media (max-width:860px){
  .cf-actions{justify-content:center;}
}

.cf-row{display:grid; grid-template-columns:2fr 1fr; gap:12px;}
@media (max-width:480px){ .cf-row{grid-template-columns:1fr;} }