/*
 * Custom Contact Form — Frontend v1.0
 * Colours follow WordPress theme CSS custom properties automatically.
 */

.ccf-wrapper {
  --ccf-accent    : var(--wp--preset--color--primary, #0073aa);
  --ccf-bg        : var(--wp--preset--color--background, #ffffff);
  --ccf-surface   : var(--wp--preset--color--secondary, #f8f8f8);
  --ccf-text      : var(--wp--preset--color--foreground, #1a1a1a);
  --ccf-muted     : var(--wp--preset--color--contrast-3, #6b6b6b);
  --ccf-border    : rgba(0,0,0,.12);
  --ccf-error     : #d63638;
  --ccf-success   : #00a32a;
  --ccf-radius    : 10px;
  --ccf-tr        : 0.2s ease;
  --ccf-font      : var(--wp--preset--font-family--body, system-ui, -apple-system, sans-serif);
  --ccf-shadow    : 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --ccf-shadow-focus: 0 0 0 3px rgba(0,115,170,.18);

  font-family  : var(--ccf-font);
  color        : var(--ccf-text);
  width        : 100%;
  box-sizing   : border-box;
}

.ccf-wrapper *, .ccf-wrapper *::before, .ccf-wrapper *::after {
  box-sizing: inherit;
}

/* ── Field grid ──────────────────────────────────────── */
.ccf-fields {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 1.1rem;
}

.ccf-field { display:flex; flex-direction:column; gap:.4rem; }
.ccf-field--full { grid-column: 1 / -1; }
.ccf-field--half { grid-column: span 1; }

@media (max-width: 580px) {
  .ccf-fields { grid-template-columns: 1fr; }
  .ccf-field--half { grid-column: 1 / -1; }
}

/* ── Labels ──────────────────────────────────────────── */
.ccf-label {
  font-size   : .875rem;
  font-weight : 600;
  color       : var(--ccf-text);
  line-height : 1.3;
}

.ccf-required {
  color       : var(--ccf-error);
  margin-left : 2px;
  font-weight : 400;
}

/* ── Inputs ──────────────────────────────────────────── */
.ccf-input {
  width            : 100%;
  height           : 46px;
  padding          : 0 1rem;
  background       : var(--ccf-bg);
  color            : var(--ccf-text);
  border           : 1.5px solid var(--ccf-border);
  border-radius    : var(--ccf-radius);
  font-family      : var(--ccf-font);
  font-size        : .9375rem;
  line-height      : 1;
  outline          : none;
  transition       : border-color var(--ccf-tr), box-shadow var(--ccf-tr);
  -webkit-appearance: none;
}

.ccf-input::placeholder { color: var(--ccf-muted); opacity:.7; }
.ccf-input:hover  { border-color: color-mix(in srgb, var(--ccf-accent) 40%, var(--ccf-border)); }
.ccf-input:focus  { border-color: var(--ccf-accent); box-shadow: var(--ccf-shadow-focus); }

.ccf-input.ccf-has-error { border-color: var(--ccf-error); }
.ccf-input.ccf-has-error:focus { box-shadow: 0 0 0 3px rgba(214,54,56,.18); }

/* Textarea */
.ccf-textarea {
  height      : auto;
  padding-top : .85rem;
  padding-bottom: .85rem;
  resize      : vertical;
  min-height  : 100px;
  line-height : 1.6;
}

/* ── Select ──────────────────────────────────────────── */
.ccf-select-wrap {
  position: relative;
}

.ccf-select {
  appearance : none;
  padding-right: 2.5rem;
  cursor     : pointer;
}

.ccf-select-arrow {
  position      : absolute;
  right         : .85rem;
  top           : 50%;
  transform     : translateY(-50%);
  width         : 16px;
  height        : 16px;
  color         : var(--ccf-muted);
  pointer-events: none;
}

/* ── Checkbox ────────────────────────────────────────── */
.ccf-checkbox-label {
  display     : flex;
  align-items : flex-start;
  gap         : .65rem;
  cursor      : pointer;
  font-size   : .9375rem;
  color       : var(--ccf-text);
  line-height : 1.5;
}

.ccf-checkbox { display: none; }

.ccf-checkbox-custom {
  flex-shrink   : 0;
  width         : 20px;
  height        : 20px;
  border        : 1.5px solid var(--ccf-border);
  border-radius : 5px;
  background    : var(--ccf-bg);
  display       : flex;
  align-items   : center;
  justify-content: center;
  margin-top    : 2px;
  transition    : border-color var(--ccf-tr), background var(--ccf-tr);
}

.ccf-checkbox:checked + .ccf-checkbox-custom {
  background   : var(--ccf-accent);
  border-color : var(--ccf-accent);
}

.ccf-checkbox:checked + .ccf-checkbox-custom::after {
  content : '';
  width   : 5px;
  height  : 9px;
  border  : 2px solid #fff;
  border-top : none;
  border-left: none;
  transform  : rotate(45deg) translateY(-1px);
}

/* ── Radio ───────────────────────────────────────────── */
.ccf-radio-group { display:flex; flex-direction:column; gap:.5rem; }

.ccf-radio-label {
  display     : flex;
  align-items : center;
  gap         : .65rem;
  cursor      : pointer;
  font-size   : .9375rem;
  color       : var(--ccf-text);
}

.ccf-radio { display:none; }

.ccf-radio-custom {
  flex-shrink    : 0;
  width          : 20px;
  height         : 20px;
  border         : 1.5px solid var(--ccf-border);
  border-radius  : 50%;
  background     : var(--ccf-bg);
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : border-color var(--ccf-tr);
}

.ccf-radio:checked + .ccf-radio-custom {
  border-color: var(--ccf-accent);
}

.ccf-radio:checked + .ccf-radio-custom::after {
  content      : '';
  width        : 10px;
  height       : 10px;
  border-radius: 50%;
  background   : var(--ccf-accent);
}

/* ── Error messages ──────────────────────────────────── */
.ccf-error {
  font-size  : .8rem;
  color      : var(--ccf-error);
  min-height : 1.2em;
  line-height: 1.3;
  display    : block;
}

/* ── Form footer ─────────────────────────────────────── */
.ccf-form-footer {
  display    : flex;
  align-items: center;
  gap        : 1rem;
  margin-top : 1.25rem;
  flex-wrap  : wrap;
}

.ccf-privacy-note {
  font-size  : .8rem;
  color      : var(--ccf-muted);
  margin     : 0;
  flex       : 1;
}

/* ── Submit button ───────────────────────────────────── */
.ccf-submit {
  position       : relative;
  display        : inline-flex;
  align-items    : center;
  gap            : .5rem;
  height         : 48px;
  padding        : 0 1.75rem;
  background     : var(--ccf-accent);
  color          : #ffffff;
  border         : none;
  border-radius  : var(--ccf-radius);
  font-family    : var(--ccf-font);
  font-size      : .9375rem;
  font-weight    : 600;
  cursor         : pointer;
  overflow       : hidden;
  transition     : opacity var(--ccf-tr), transform var(--ccf-tr), box-shadow var(--ccf-tr);
  white-space    : nowrap;
}

.ccf-submit:hover:not(:disabled) {
  opacity   : .9;
  transform : translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

.ccf-submit:active { transform: translateY(0); }
.ccf-submit:disabled { opacity:.65; cursor:not-allowed; transform:none; }

.ccf-submit__text { transition: opacity .2s; }
.ccf-submit.ccf-loading .ccf-submit__text,
.ccf-submit.ccf-loading .ccf-submit__arrow { opacity: 0; }
.ccf-submit.ccf-loading .ccf-submit__spinner { opacity: 1; }

.ccf-submit__spinner {
  position      : absolute;
  width         : 18px;
  height        : 18px;
  border        : 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius : 50%;
  opacity       : 0;
  animation     : ccf-spin .7s linear infinite;
  transition    : opacity .2s;
}

@keyframes ccf-spin { to { transform:rotate(360deg); } }

.ccf-submit__arrow {
  width      : 18px;
  height     : 18px;
  flex-shrink: 0;
  transition : opacity .2s, transform .2s;
}

.ccf-submit:hover .ccf-submit__arrow { transform: translateX(3px); }

/* ── Success state ───────────────────────────────────── */
.ccf-success {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 1rem;
  padding        : 2.5rem 2rem;
  text-align     : center;
  background     : var(--ccf-surface);
  border         : 1.5px solid rgba(0,163,42,.25);
  border-radius  : var(--ccf-radius);
  animation      : ccf-fade-in .4s ease;
}

.ccf-success__icon {
  width  : 56px;
  height : 56px;
  color  : var(--ccf-success);
}

.ccf-success__icon svg { width:100%; height:100%; }

.ccf-success__msg {
  font-size   : 1rem;
  color       : var(--ccf-text);
  margin      : 0;
  line-height : 1.6;
}

@keyframes ccf-fade-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}