/* ==========================================================================
   Form Styles — Inner Space Creation
   Shared form styling for site-visit and contact pages.
   ========================================================================== */

.isc-form {
  max-width: 640px;
  margin-inline: auto;
}

.isc-form__row {
  margin-bottom: var(--isc-space-lg);
}

.isc-form__row--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--isc-space-lg);
}

@media (min-width: 600px) {
  .isc-form__row--split {
    grid-template-columns: repeat(2, 1fr);
  }
}

.isc-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--isc-space-xs);
}

.isc-form__label {
  font-family: var(--isc-font-body);
  font-weight: var(--isc-fw-regular);
  font-size: var(--isc-fs-body);
  color: var(--isc-color-heading);
}

.isc-form__label .required {
  color: var(--isc-text-stone);
  margin-left: var(--isc-space-xs);
}

.isc-form__input,
.isc-form__select,
.isc-form__textarea {
  font-family: var(--isc-font-body);
  font-weight: var(--isc-fw-light);
  font-size: var(--isc-fs-body);
  color: var(--isc-color-body);
  background-color: #FFFFFF;
  border: 1px solid var(--isc-pale-stone);
  border-radius: var(--isc-radius-sm);
  padding: var(--isc-space-sm) var(--isc-space-md);
  min-height: var(--isc-touch-min);
  transition: border-color var(--isc-transition-fast);
  width: 100%;
}

.isc-form__input:focus,
.isc-form__select:focus,
.isc-form__textarea:focus {
  border-color: var(--isc-text-stone);
  outline: var(--isc-focus-ring);
  outline-offset: var(--isc-focus-offset);
  box-shadow: 0 0 0 3px rgba(110, 90, 62, 0.15);
}

/* Label highlight on focus-within */
.isc-form__field:focus-within .isc-form__label {
  color: var(--isc-text-stone);
}

.isc-form__textarea {
  min-height: 120px;
  resize: vertical;
}

.isc-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235E5850' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--isc-space-md) center;
  padding-right: var(--isc-space-2xl);
}

.isc-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--isc-font-body);
  font-weight: var(--isc-fw-regular);
  font-size: var(--isc-fs-body);
  background-color: var(--isc-bg-stone);
  color: #FFFFFF;
  border: 2px solid var(--isc-bg-stone);
  border-radius: var(--isc-radius-sm);
  padding: var(--isc-space-sm) var(--isc-space-2xl);
  min-height: var(--isc-touch-min);
  cursor: pointer;
  transition: all var(--isc-transition-base);
}

.isc-form__submit:hover {
  background-color: var(--isc-ink-black);
  border-color: var(--isc-ink-black);
}

/* Success / Error messages */
.isc-form__message {
  padding: var(--isc-space-md) var(--isc-space-lg);
  border-radius: var(--isc-radius-sm);
  margin-bottom: var(--isc-space-xl);
  font-weight: var(--isc-fw-regular);
}

.isc-form__message--success {
  background-color: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.isc-form__message--error {
  background-color: #fce4ec;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

/* --- Inline Validation States --- */
.isc-form__field--error .isc-form__input,
.isc-form__field--error .isc-form__select,
.isc-form__field--error .isc-form__textarea {
  border-color: #c62828;
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.1);
}

.isc-form__field--valid .isc-form__input,
.isc-form__field--valid .isc-form__select,
.isc-form__field--valid .isc-form__textarea {
  border-color: #2e7d32;
}

.isc-form__error {
  font-size: var(--isc-fs-caption);
  color: #c62828;
  margin-top: var(--isc-space-xs);
}

/* --- Submit Loading State --- */
.isc-form__submit--loading {
  pointer-events: none;
  opacity: 0.7;
  position: relative;
}

.isc-form__submit--loading::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: var(--isc-space-sm);
  border: 2px solid transparent;
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: isc-spin 0.6s linear infinite;
}

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