@charset "utf-8";

/* =========================================================
   wabi office — contact form and thanks pages
   Loaded on top of site.css by /contact/, /en/contact/ and their
   thanks pages only. Every selector is scoped to .form-page or
   .form-header so it cannot reach the other page stylesheets.
   ========================================================= */

/* These pages carry no fixed mobile CTA bar, so the room site.css
   reserves for it under 640px has to be given back. */
.form-page { padding-bottom: 0; }
@media (max-width: 639px) {
  .form-page + .site-footer { padding-bottom: 24px; }
}

/* Simplified header: no nav, so the language switch keeps the right edge. */
@media (min-width: 1024px) {
  .form-header .lang-switch { margin-left: auto; }
}

/* 1. Card -------------------------------------------------- */
.form-page .form-section { padding-block: 32px 48px; }
.form-page .form-shell { display: flex; flex-direction: column; align-items: center; }

.form-page .form-card {
  width: 100%;
  max-width: 640px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* auto-phrase keeps the Japanese headings from breaking mid-word; other
   engines ignore it and fall back to the default break behaviour. */
.form-page .form-card h1 { font-size: 24px; word-break: auto-phrase; }
.form-page .form-card__head { display: flex; flex-direction: column; gap: 8px; }
.form-page .form-card__lead { font-size: 14px; color: var(--ink-muted); }
.form-page .form-rule {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--border);
}

/* 2. Fields ------------------------------------------------ */
.form-page .form-fields { display: flex; flex-direction: column; gap: 22px; }
.form-page .field-list { display: flex; flex-direction: column; gap: 18px; }
.form-page .field { display: flex; flex-direction: column; gap: 6px; }

.form-page .field__label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.form-page .field__label-main { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }
.form-page .field__label-sub { font-size: 11px; color: var(--faint); }

.form-page .field__control {
  width: 100%;
  min-height: 42px;
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px; /* 16px-safe on iOS once zoomed; keeps the field from zooming */
  line-height: 1.6;
}
.form-page .field__control::placeholder { color: var(--faint); }
.form-page .field__control:hover { border-color: #c2bfae; }
.form-page .field__control:focus { border-color: var(--accent); }
.form-page .field__control:user-invalid,
.form-page .field__control.is-invalid,
.form-page .field__control.is-invalid:focus { border-color: var(--danger); }
.form-page .field__control--area { min-height: 120px; resize: vertical; }

.form-page .field__select { position: relative; display: flex; }
.form-page .field__select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}
.form-page .field__select select:invalid { color: var(--faint); }
.form-page .field__chevron {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  color: var(--muted);
  pointer-events: none;
}

/* Honeypot: off-screen rather than display:none so bots still fill it. */
.form-page .hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 3. Errors and submit ------------------------------------- */
.form-page .form-error {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #e0c2ba;
  border-radius: 10px;
  background: #f8ebe7;
  color: var(--danger);
  font-size: 13px;
  line-height: 1.7;
}
.form-page .form-error[hidden] { display: none; }

.form-page .form-actions { display: flex; flex-direction: column; gap: 12px; }
.form-page .form-submit { width: 100%; }
.form-page .btn[disabled] { opacity: 0.6; cursor: default; }

/* 4. Thanks ------------------------------------------------ */
.form-page .form-card--thanks {
  align-items: center;
  text-align: center;
  gap: 16px;
  padding-block: 36px;
}
.form-page .form-card--thanks .form-card__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 320px;
}
.form-page .form-card--thanks .btn { width: 100%; }

/* 5. Tablet ------------------------------------------------ */
@media (min-width: 640px) {
  .form-page .form-section { padding-block: 48px 72px; }
  .form-page .form-card { padding: 32px 32px 30px; }
  .form-page .form-card h1 { font-size: 26px; }
  .form-page .form-card--thanks .form-card__actions {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }
  .form-page .form-card--thanks .btn { width: auto; min-width: 180px; }
}

/* 6. Desktop ----------------------------------------------- */
@media (min-width: 1024px) {
  .form-page .form-section { padding-block: 56px 88px; }
  .form-page .form-card { padding: 36px 40px 34px; gap: 24px; }
  .form-page .form-card h1 { font-size: 28px; }
  .form-page .form-fields { gap: 24px; }
  .form-page .form-card--thanks { padding-block: 44px; }
}