/**
 * [cvs_contact_form] styles. Same token set/shadow language as the rest of
 * the site (publish-wizard.css's premium card treatment); mobile-first
 * (section 7), RTL, dark-mode aware.
 */

.cvs-contact {
  --cvs-bg: #F5EFE2;
  --cvs-surface: #FFFDF8;
  --cvs-surface-alt: #EDE3CC;
  --cvs-text: #201C16;
  --cvs-text-muted: #6E6656;
  --cvs-border: #E9DFC4;
  --cvs-primary: #1E3A5F;
  --cvs-primary-strong: #12283F;
  --cvs-accent: #A66F2E;
  --cvs-accent-soft: #EFDFB8;
  --cvs-danger: #B23A32;
  --cvs-danger-soft: #F3DAD6;
  --cvs-success: #2F7D54;
  --cvs-success-soft: #DCEEE1;
  --cvs-shadow: 0 1px 2px rgba(32, 28, 22, 0.06), 0 8px 24px -12px rgba(32, 28, 22, 0.18);

  font-family: 'Assistant', 'Arial Hebrew', 'Segoe UI', sans-serif;
  color: var(--cvs-text);
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px 48px;
}

@media (prefers-color-scheme: dark) {
  .cvs-contact {
    --cvs-bg: #14201C;
    --cvs-surface: #1B2925;
    --cvs-surface-alt: #223530;
    --cvs-text: #EFE9DA;
    --cvs-text-muted: #A79E8A;
    --cvs-border: #2A3B34;
    --cvs-primary: #85AEDC;
    --cvs-primary-strong: #B7D0EC;
    --cvs-accent: #E0AC64;
    --cvs-accent-soft: #3A2E19;
    --cvs-danger: #E58177;
    --cvs-danger-soft: #3B2320;
    --cvs-success: #66C295;
    --cvs-success-soft: #1E3428;
    --cvs-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px -12px rgba(0, 0, 0, 0.5);
  }
}

.cvs-contact-banner {
  text-align: center;
  padding: 36px 20px;
  margin: 0 -20px 28px;
  background: linear-gradient(155deg, var(--cvs-primary), var(--cvs-primary-strong));
  color: var(--cvs-bg);
}
.cvs-contact-banner-title {
  margin: 0 0 8px;
  font-family: 'Frank Ruhl Libre', Georgia, serif;
  font-weight: 800;
  font-size: 30px;
}
.cvs-contact-banner-subtitle {
  margin: 0;
  font-size: 15px;
  opacity: 0.9;
}

.cvs-contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--cvs-surface);
  border: 1px solid var(--cvs-border);
  border-radius: 16px;
  box-shadow: var(--cvs-shadow);
  padding: 28px 22px;
}
.cvs-contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cvs-text-muted);
}
.cvs-contact-form input,
.cvs-contact-form textarea {
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--cvs-border);
  border-radius: 10px;
  background: var(--cvs-bg);
  color: var(--cvs-text);
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.cvs-contact-form input:focus,
.cvs-contact-form textarea:focus {
  outline: none;
  border-color: var(--cvs-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cvs-accent) 20%, transparent);
}
.cvs-contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.cvs-contact-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Honeypot: visually and structurally hidden from a real visitor, but not
   display:none/type=hidden — those are the first things a scraping bot
   filters out before filling a form. */
.cvs-contact-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.cvs-contact-error {
  font-size: 13px;
  color: var(--cvs-danger);
  min-height: 1em;
}

.cvs-contact-form .cvs-btn-primary {
  background: linear-gradient(135deg, var(--cvs-accent), var(--cvs-primary));
  color: #fff;
  border: none;
  min-height: 48px;
  border-radius: 10px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--cvs-accent) 55%, transparent);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.cvs-contact-form .cvs-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -4px color-mix(in srgb, var(--cvs-accent) 60%, transparent);
}
.cvs-contact-form .cvs-btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.cvs-contact-success {
  text-align: center;
  padding: 28px 20px;
  background: var(--cvs-success-soft);
  color: var(--cvs-success);
  border-radius: 14px;
  font-weight: 700;
  font-size: 15px;
}

@media (min-width: 560px) {
  .cvs-contact-banner {
    padding: 48px 20px;
    border-radius: 0 0 20px 20px;
  }
  .cvs-contact-banner-title {
    font-size: 36px;
  }
  .cvs-contact-row {
    flex-direction: row;
  }
  .cvs-contact-row label {
    flex: 1;
  }
  .cvs-contact-form {
    padding: 36px;
  }
}