/* Copyright (c) 2025-2026 Spwig contributors. Licensed under AGPL-3.0. */

/**
 * Contact Form Element Styles
 *
 * Layout and section styling for the contact form page builder element.
 * Base form classes (.form-group, .form-input, .form-label, .form-checkbox, .btn)
 * are provided by components.css — this file adds element-specific layout
 * using --theme-element-form-* tokens from the theme system.
 */

/* Section container */
.contact-form-section {
  padding: var(--theme-element-form-spacing-lg, var(--theme-space-6, 1.5rem))
    var(--theme-element-form-container-padding, var(--theme-space-6, 1.5rem));
}

/* Narrow container for form centering */
.contact-form-section .container--narrow {
  max-width: var(--theme-element-form-container-max-width, 720px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--theme-element-form-container-padding, var(--theme-space-6, 1.5rem));
  padding-right: var(--theme-element-form-container-padding, var(--theme-space-6, 1.5rem));
}

/* Section header */
.contact-form-section .section-header__title {
  font-size: var(--theme-element-form-title-size, var(--theme-font-size-xl, 1.75rem));
  font-weight: var(--theme-element-form-font-weight-bold, var(--theme-font-weight-semibold, 600));
  color: var(--theme-element-form-text-color, var(--theme-color-text, #374151));
  margin: 0 0 var(--theme-element-form-spacing-xs, var(--theme-space-2, 0.5rem));
}

.contact-form-section .section-header__subtitle {
  font-size: var(--theme-element-form-base-size, var(--theme-font-size-base, 1rem));
  color: var(--theme-element-form-text-muted, var(--theme-color-text-muted, #6b7280));
  line-height: var(
    --theme-element-form-line-height-relaxed,
    var(--theme-line-height-relaxed, 1.625)
  );
}

/* Form card */
.contact-form-section .contact-form {
  padding: var(--theme-element-form-container-padding, var(--theme-space-6, 1.5rem));
  border-radius: var(--theme-element-form-input-radius, var(--theme-radius-md, 0.5rem));
  box-shadow: var(
    --theme-element-form-shadow,
    var(--theme-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1))
  );
  background: var(--theme-element-form-bg-color, var(--theme-color-surface, #ffffff));
}

/* Form row — side-by-side fields (e.g. first/last name, email/phone) */
.contact-form-section .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--theme-element-form-spacing-md, var(--theme-space-4, 1rem));
}

/* When form-row has only one visible child, let it span full width */
.contact-form-section .form-row > .form-group:only-child {
  grid-column: 1 / -1;
}

/* Form group spacing */
.contact-form-section .form-group {
  margin-bottom: var(--theme-element-form-spacing-md, var(--theme-space-4, 1rem));
}

/* Labels */
.contact-form-section .form-label {
  font-size: var(--theme-element-form-label-size, var(--theme-font-size-sm, 0.875rem));
  font-weight: var(--theme-element-form-font-weight-medium, var(--theme-font-weight-medium, 500));
  color: var(--theme-element-form-label-color, var(--theme-color-text, #374151));
  margin-bottom: var(--theme-element-form-spacing-xs, var(--theme-space-2, 0.5rem));
  display: block;
}

/* Inputs */
.contact-form-section .form-input {
  background: var(--theme-element-form-input-bg, var(--theme-color-surface, #ffffff));
  border: 1px solid var(--theme-element-form-input-border, var(--theme-color-border, #d1d5db));
  border-radius: var(--theme-element-form-input-radius, var(--theme-radius-base, 0.375rem));
  padding: var(--theme-element-form-input-padding, var(--theme-space-4, 0.75rem));
  font-size: var(--theme-element-form-base-size, var(--theme-font-size-base, 1rem));
  color: var(--theme-element-form-text-color, var(--theme-color-text, #374151));
  transition: var(--theme-element-form-transition, all 0.2s ease);
  width: 100%;
}

.contact-form-section .form-input::placeholder {
  color: var(--theme-element-form-input-placeholder-color, var(--theme-color-text-muted, #9ca3af));
}

.contact-form-section .form-input:focus {
  border-color: var(--theme-element-form-input-focus-border, var(--theme-color-primary, #3b82f6));
  box-shadow: var(--theme-element-form-focus-shadow, 0 0 0 3px rgba(59, 130, 246, 0.1));
  outline: none;
}

/* Textarea */
.contact-form-section .form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Required indicator */
.contact-form-section .form-required {
  color: var(--theme-element-form-error-color, var(--theme-color-error, #ef4444));
  margin-left: 2px;
}

/* Checkbox */
.contact-form-section .form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--theme-element-form-spacing-sm, var(--theme-space-3, 0.75rem));
  cursor: pointer;
}

.contact-form-section .form-checkbox__input {
  margin-top: 3px;
  flex-shrink: 0;
}

.contact-form-section .form-checkbox__label {
  font-size: var(--theme-element-form-small-size, var(--theme-font-size-sm, 0.875rem));
  color: var(--theme-element-form-text-muted, var(--theme-color-text-muted, #6b7280));
  line-height: var(
    --theme-element-form-line-height-relaxed,
    var(--theme-line-height-relaxed, 1.625)
  );
}

.contact-form-section .form-checkbox__label .link {
  color: var(--theme-element-form-primary-color, var(--theme-color-primary, #3b82f6));
  text-decoration: underline;
}

/* Submit button */
.contact-form-section .btn--full {
  width: 100%;
  margin-top: var(--theme-element-form-spacing-md, var(--theme-space-4, 1rem));
}

/* Success/error alert messages */
.contact-form-section .alert {
  padding: var(--theme-element-form-spacing-md, var(--theme-space-4, 1rem));
  border-radius: var(--theme-element-form-input-radius, var(--theme-radius-base, 0.375rem));
  font-size: var(--theme-element-form-base-size, var(--theme-font-size-base, 1rem));
}

.contact-form-section .alert--success {
  background-color: color-mix(
    in srgb,
    var(--theme-element-form-success-color, var(--theme-color-success, #22c55e)) 10%,
    transparent
  );
  color: var(--theme-element-form-success-color, var(--theme-color-success, #22c55e));
  border: 1px solid
    color-mix(
      in srgb,
      var(--theme-element-form-success-color, var(--theme-color-success, #22c55e)) 20%,
      transparent
    );
}

.contact-form-section .alert--error {
  background-color: color-mix(
    in srgb,
    var(--theme-element-form-error-color, var(--theme-color-error, #ef4444)) 10%,
    transparent
  );
  color: var(--theme-element-form-error-color, var(--theme-color-error, #ef4444));
  border: 1px solid
    color-mix(
      in srgb,
      var(--theme-element-form-error-color, var(--theme-color-error, #ef4444)) 20%,
      transparent
    );
}

/* Responsive: stack side-by-side fields on mobile */
@media (max-width: 640px) {
  .contact-form-section .form-row {
    grid-template-columns: 1fr;
  }

  .contact-form-section .contact-form {
    padding: var(--theme-element-form-spacing-md, var(--theme-space-4, 1rem));
  }

  .contact-form-section .section-header__title {
    font-size: var(--theme-element-form-heading-size, var(--theme-font-size-lg, 1.25rem));
  }
}