/**
 * NuxtIt Contact Form — Plugin Stylesheet
 *
 * All rules scoped under .nuxtit-cf-wrap to prevent
 * collision with the active WordPress theme.
 * Original design preserved exactly.
 */

.nuxtit-cf-wrap {
  --color-brand-100: #E6F0F7;
  --color-brand-200: #C7DFF0;
  --color-brand-300: #3D85BB;
  --color-brand-500: #2F6F9F;
  --color-brand-700: #1F4E75;
  --color-accent-500: #FF4D3A;
  --color-accent-600: #E03828;
  --color-surface:   #F8FAFC;
  --color-white:     #FFFFFF;
  --color-ink-900:   #0F172A;
  --color-ink-600:   #475569;
  --color-ink-400:   #94A3B8;
  --color-ink-200:   #E2E8F0;
  --color-ink-100:   #F1F5F9;
  --color-success:      #22C55E;
  --color-success-bg:   #DCFCE7;
  --color-success-text: #15803D;
  --color-error:        #EF4444;
  --color-error-bg:     #FEF2F2;
  --color-error-text:   #DC2626;

  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', 'Fira Code', monospace;

  --text-xs:   clamp(0.6875rem, 0.9vw + 0.35rem,  0.75rem);
  --text-sm:   clamp(0.8125rem, 1vw   + 0.4rem,   0.875rem);
  --text-base: clamp(0.9375rem, 1.1vw + 0.45rem,  1.0625rem);
  --text-lg:   clamp(1.0625rem, 1.4vw + 0.5rem,   1.125rem);
  --text-2xl:  clamp(1.25rem,   2vw   + 0.6rem,   1.5rem);
  --text-3xl:  clamp(1.5rem,    2.5vw + 0.65rem,  1.75rem);

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --leading-snug:    1.3;
  --leading-normal:  1.65;
  --leading-relaxed: 1.75;

  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;

  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  --shadow-lg: 0 16px 48px rgba(0,0,0,.10);

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink-900);
}

.nuxtit-cf-wrap *,
.nuxtit-cf-wrap *::before,
.nuxtit-cf-wrap *::after { box-sizing: border-box; }
.nuxtit-cf-wrap ul,
.nuxtit-cf-wrap ol  { list-style: none; padding: 0; margin: 0; }
.nuxtit-cf-wrap button,
.nuxtit-cf-wrap input,
.nuxtit-cf-wrap textarea,
.nuxtit-cf-wrap select { font-family: inherit; }

/* ── Contact layout ── */
.nuxtit-cf-wrap .contact-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  align-items: start;
  gap: clamp(3rem, 6vw, 5rem);
}

/* ── Button ── */
.nuxtit-cf-wrap .btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: clamp(0.625rem, 1.5vw, 0.875rem) clamp(1rem, 3vw, 1.75rem);
  border-radius: var(--radius-md); font-family: var(--font-sans);
  font-size: var(--text-sm); font-weight: var(--weight-semi); line-height: 1;
  text-decoration: none; border: 1.5px solid transparent;
  cursor: pointer; transition: all var(--transition-base); white-space: nowrap;
}
.nuxtit-cf-wrap .btn--primary { background-color: var(--color-accent-500); color: var(--color-white); border-color: var(--color-accent-500); box-shadow: 0 4px 14px rgba(255,77,58,.35); }
.nuxtit-cf-wrap .btn--primary:hover { background-color: var(--color-accent-600); transform: translateY(-1px); }
.nuxtit-cf-wrap .btn--primary:focus-visible { outline: 2px solid var(--color-accent-500); outline-offset: 3px; }
.nuxtit-cf-wrap .btn--primary:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.nuxtit-cf-wrap .btn--outline { background-color: transparent; color: var(--color-brand-500); border-color: var(--color-brand-500); }
.nuxtit-cf-wrap .btn--outline:hover { background-color: var(--color-brand-100); }
.nuxtit-cf-wrap .btn--lg   { font-size: var(--text-base); padding: 1rem 2rem; }
.nuxtit-cf-wrap .btn--full { width: 100%; justify-content: center; }

/* ── Contact form card ── */
.nuxtit-cf-wrap .contact-form {
  background-color: var(--color-white);
  border: 1px solid var(--color-ink-200);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-lg);
}
.nuxtit-cf-wrap .contact-form__heading {
  font-size: var(--text-2xl); font-weight: var(--weight-bold);
  letter-spacing: -0.02em; margin-block-end: var(--space-2); margin-top: 0;
}
.nuxtit-cf-wrap .contact-form__subhead {
  font-size: var(--text-base); color: var(--color-ink-600);
  margin-block-end: var(--space-8); line-height: var(--leading-relaxed);
}
.nuxtit-cf-wrap .field-group { display: flex; flex-direction: column; gap: var(--space-5); margin-block-end: var(--space-6); }
.nuxtit-cf-wrap .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-4); }
.nuxtit-cf-wrap .field { display: flex; flex-direction: column; gap: var(--space-2); }
.nuxtit-cf-wrap fieldset.field { border: none; padding: 0; margin: 0; }
.nuxtit-cf-wrap .field__label { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--color-ink-900); }
.nuxtit-cf-wrap .field__label--required::after { content: ' *'; color: var(--color-accent-500); font-weight: var(--weight-bold); }
.nuxtit-cf-wrap .field__hint { font-size: var(--text-xs); color: var(--color-ink-400); margin-top: calc(-1 * var(--space-2)); }

.nuxtit-cf-wrap .field__input,
.nuxtit-cf-wrap .field__textarea,
.nuxtit-cf-wrap .field__select {
  width: 100%;
  padding: clamp(0.625rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1rem);
  border: 1.5px solid var(--color-ink-200);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-ink-900);
  background-color: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none; -webkit-appearance: none;
}
.nuxtit-cf-wrap .field__input::placeholder,
.nuxtit-cf-wrap .field__textarea::placeholder { color: var(--color-ink-400); }
.nuxtit-cf-wrap .field__input:hover,
.nuxtit-cf-wrap .field__textarea:hover,
.nuxtit-cf-wrap .field__select:hover { border-color: var(--color-ink-400); }
.nuxtit-cf-wrap .field__input:focus,
.nuxtit-cf-wrap .field__textarea:focus,
.nuxtit-cf-wrap .field__select:focus { outline: none; border-color: var(--color-brand-500); box-shadow: 0 0 0 3px rgba(47,111,159,.12); }
.nuxtit-cf-wrap .field__input:user-invalid,
.nuxtit-cf-wrap .field__textarea:user-invalid,
.nuxtit-cf-wrap .field__select:user-invalid { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(239,68,68,.08); }
.nuxtit-cf-wrap .field__textarea { resize: vertical; min-height: 140px; line-height: var(--leading-relaxed); }
.nuxtit-cf-wrap .field__select-wrap { position: relative; }
.nuxtit-cf-wrap .field__select-wrap::after { content: ''; position: absolute; top: 50%; right: var(--space-4); transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--color-ink-400); pointer-events: none; }
.nuxtit-cf-wrap .field__select { padding-right: 2.5rem; cursor: pointer; }
.nuxtit-cf-wrap .field__error { display: none; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-error-text); align-items: center; gap: var(--space-2); }
.nuxtit-cf-wrap .field__input:user-invalid ~ .field__error,
.nuxtit-cf-wrap .field__textarea:user-invalid ~ .field__error,
.nuxtit-cf-wrap .field__select:user-invalid ~ .field__error { display: flex; }

/* ── Project type chips ── */
.nuxtit-cf-wrap .project-type__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: var(--space-2); }
.nuxtit-cf-wrap .project-chip { position: relative; }
.nuxtit-cf-wrap .project-chip__input { position: absolute; opacity: 0; width: 0; height: 0; }
.nuxtit-cf-wrap .project-chip__label {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--color-ink-600); background-color: var(--color-surface);
  border: 1.5px solid var(--color-ink-200); cursor: pointer;
  transition: all var(--transition-fast); user-select: none; text-align: center; white-space: nowrap;
}
.nuxtit-cf-wrap .project-chip__input:checked + .project-chip__label { background-color: var(--color-brand-100); border-color: var(--color-brand-500); color: var(--color-brand-700); font-weight: var(--weight-semi); }
.nuxtit-cf-wrap .project-chip__input:focus-visible + .project-chip__label { outline: 2px solid var(--color-brand-500); outline-offset: 2px; }
.nuxtit-cf-wrap .project-chip__label:hover { border-color: var(--color-brand-300); color: var(--color-brand-500); }

/* ── Budget options ── */
.nuxtit-cf-wrap .budget__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 110px), 1fr)); gap: var(--space-2); }
.nuxtit-cf-wrap .budget__option { position: relative; }
.nuxtit-cf-wrap .budget__input { position: absolute; opacity: 0; width: 0; height: 0; }
.nuxtit-cf-wrap .budget__label {
  display: block; padding: var(--space-3) var(--space-2); text-align: center;
  border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: var(--weight-semi);
  color: var(--color-ink-600); background-color: var(--color-surface);
  border: 1.5px solid var(--color-ink-200); cursor: pointer;
  transition: all var(--transition-fast); line-height: var(--leading-snug); user-select: none;
}
.nuxtit-cf-wrap .budget__input:checked + .budget__label { background-color: var(--color-brand-100); border-color: var(--color-brand-500); color: var(--color-brand-700); }
.nuxtit-cf-wrap .budget__input:focus-visible + .budget__label { outline: 2px solid var(--color-brand-500); outline-offset: 2px; }
.nuxtit-cf-wrap .budget__label:hover { border-color: var(--color-brand-300); color: var(--color-brand-500); }

/* ── Submit area ── */
.nuxtit-cf-wrap .contact-form__submit { margin-top: var(--space-8); }
.nuxtit-cf-wrap .contact-form__note { font-size: var(--text-xs); color: var(--color-ink-400); margin-top: var(--space-3); text-align: center; }

/* ── Success state ── */
.nuxtit-cf-wrap .contact-form__success {
  display: none; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-4); padding: var(--space-8);
}
.nuxtit-cf-wrap .contact-form__success-icon {
  width: 64px; height: 64px; border-radius: var(--radius-full);
  background-color: var(--color-success-bg); display: flex; align-items: center; justify-content: center; font-size: 1.75rem;
}
.nuxtit-cf-wrap .contact-form__success-title { font-size: var(--text-2xl); font-weight: var(--weight-bold); margin-top: 0; }
.nuxtit-cf-wrap .contact-form__success-body  { font-size: var(--text-base); color: var(--color-ink-600); max-width: 36ch; line-height: var(--leading-relaxed); }
.nuxtit-cf-wrap .contact-form.is-submitted .contact-form__fields  { display: none; }
.nuxtit-cf-wrap .contact-form.is-submitted .contact-form__success { display: flex; }

/* ── Submitting spinner ── */
.nuxtit-cf-wrap .btn--submitting { opacity: .7; cursor: not-allowed; pointer-events: none; }
.nuxtit-cf-wrap .btn--submitting::after { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: ncf-spin .6s linear infinite; margin-left: var(--space-2); }
@keyframes ncf-spin { to { transform: rotate(360deg); } }

/* ── Sidebar ── */
.nuxtit-cf-wrap .contact-sidebar { display: flex; flex-direction: column; gap: var(--space-6); }

.nuxtit-cf-wrap .pulse-dot {
  position: relative; width: 8px; height: 8px;
  border-radius: var(--radius-full); background-color: var(--color-success); flex-shrink: 0;
}
.nuxtit-cf-wrap .pulse-dot::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: var(--radius-full); background-color: rgba(34,197,94,.25);
  animation: ncf-pulse 2s ease infinite;
}
@keyframes ncf-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0; transform: scale(1.7); }
}

.nuxtit-cf-wrap .availability-card {
  background-color: var(--color-success-bg); border: 1px solid #BBF7D0;
  border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6);
  display: flex; align-items: center; gap: var(--space-4);
}
.nuxtit-cf-wrap .availability-card__dot { flex-shrink: 0; }
.nuxtit-cf-wrap .availability-card__text { font-size: var(--text-sm); color: var(--color-success-text); line-height: var(--leading-snug); }
.nuxtit-cf-wrap .availability-card__text strong { font-weight: var(--weight-semi); }

.nuxtit-cf-wrap .response-card { background-color: var(--color-brand-700); border-radius: var(--radius-xl); padding: clamp(1.5rem, 4vw, 2rem); color: var(--color-white); }
.nuxtit-cf-wrap .response-card__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.nuxtit-cf-wrap .response-card__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background-color: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0; }
.nuxtit-cf-wrap .response-card__title { font-size: var(--text-base); font-weight: var(--weight-semi); }
.nuxtit-cf-wrap .response-card__time { font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: -0.03em; margin-bottom: var(--space-2); }
.nuxtit-cf-wrap .response-card__body { font-size: var(--text-sm); color: rgba(255,255,255,.65); line-height: var(--leading-relaxed); }

.nuxtit-cf-wrap .next-steps { background-color: var(--color-white); border: 1px solid var(--color-ink-200); border-radius: var(--radius-xl); padding: clamp(1.5rem, 4vw, 2rem); }
.nuxtit-cf-wrap .next-steps__title { font-size: var(--text-base); font-weight: var(--weight-semi); margin-bottom: var(--space-5); margin-top: 0; }
.nuxtit-cf-wrap .next-steps__list { display: flex; flex-direction: column; gap: var(--space-4); }
.nuxtit-cf-wrap .next-step { display: flex; align-items: flex-start; gap: var(--space-4); }
.nuxtit-cf-wrap .next-step__num { width: 28px; height: 28px; border-radius: var(--radius-full); background-color: var(--color-brand-100); border: 1px solid var(--color-brand-200); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-brand-700); flex-shrink: 0; }
.nuxtit-cf-wrap .next-step__text { font-size: var(--text-sm); color: var(--color-ink-600); line-height: var(--leading-relaxed); padding-top: 4px; }
.nuxtit-cf-wrap .next-step__text strong { color: var(--color-ink-900); }