/* page-contact.php — content exclusive to the Contact page template. */

.tabs { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; overflow: hidden; margin-bottom: 0; width: fit-content; }
.tabs button { font: inherit; font-weight: 700; border: none; background: var(--bg-raised); padding: 12px 22px; cursor: pointer; color: var(--ink-soft); font-size: 0.88rem; transition: background .2s ease, color .2s ease; }
/* UX fix: width:fit-content plus non-wrapping button labels let this pill grow
   wider than the viewport on phones (two Japanese labels + their padding don't
   fit in ~280px of content width), silently clipping the second tab off-screen
   with no way to scroll to it. Below 480px it now spans the full width with
   both tabs sharing it equally instead of sizing to their label. */
@media (max-width: 480px) {
  .tabs { width: 100%; }
  /* Was shrunk to 0.82rem to guarantee both tabs fit full-width without
     wrapping — no longer necessary now that they split the width evenly
     via flex:1 instead of sizing to their own label, so it can go back up
     to (and slightly past) the desktop size instead of reading smaller. */
  .tabs button { flex: 1 1 0; padding: 12px 10px; font-size: 0.92rem; }
}
.tabs button[aria-selected="true"] { background: var(--navy); color: var(--amber); }
.form-panel { display: none; border: 1px solid var(--line); border-top: none; border-radius: 0 var(--radius) var(--radius) var(--radius); background: var(--bg-raised); padding: 32px; }
.form-panel.active { display: block; }

/* .cf7-confirm-panel (assets/js/main.js) — the review step shown before a
   contact form actually sends. Its heading/lead paragraph/table inherit
   .wpcf7-form's own spacing and .material-modal-table's existing row
   styling, so only the action-button row needs its own rule. */
.cf7-confirm-actions { display: flex; gap: 14px; margin-top: 22px; }
@media (max-width: 480px) {
  .cf7-confirm-actions { flex-direction: column; }
  .cf7-confirm-actions .btn { width: 100%; }
}

.guarantee {
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  background: var(--amber-tint);
  padding: 22px 24px;
  align-items: start;
}
.guarantee .seal {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--navy); color: var(--amber);
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-weight: 700; font-size: 0.72rem; text-align: center; line-height: 1.15;
  flex-shrink: 0;
}
.guarantee h5 { margin: 0 0 6px; }
.guarantee p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }