/* ===== VATC – Trust Creator Form (polished UI) ===== */

/* Container + headings */
.vatc-container { max-width: 920px; margin: 0 auto; }
.vatc-h2 { margin: 0 0 10px; font-weight: 700; letter-spacing: .2px; }
.vatc-lead { margin: 0 0 18px; opacity: .85; }

/* Success/info banner */
.vatc-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 18px; padding: 12px 14px;
  border-left: 4px solid #34c759; background: #f0fff3;
  border-radius: 8px; color: #173f2b;
}
.vatc-banner .vatc-spin { margin-left: 2px; }
.vatc-banner.is-busy { opacity: .9; }

/* Form wrapper */
.vatc-form { margin: 12px 0 20px; }
.vatc-vertical { display: flex; flex-direction: column; gap: 14px; }

/* Field blocks */
.vatc-field {
  display: flex; flex-direction: column;
  gap: 6px;                 /* tighter label-to-input spacing */
  margin: 6px 0 10px;       /* tighter field-to-field spacing */
}
.vatc-label { font-weight: 600; }
.vatc-req { color: #c00; }

/* Inputs */
.vatc-input,
.vatc-field input[type="text"],
.vatc-field input[type="date"],
.vatc-field input[type="file"],
.vatc-field select,
.vatc-field textarea {
  width: 100%; max-width: 900px;
  padding: 10px 12px;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
  font: inherit;
}
.vatc-field textarea { min-height: 110px; resize: vertical; }

/* Focus state (subtle, theme-friendly) */
.vatc-field input:focus,
.vatc-field select:focus,
.vatc-field textarea:focus {
  outline: 0;
  border-color: #7aa7ff;
  box-shadow: 0 0 0 3px rgba(122,167,255,.25);
}

/* Help/hint text */
.vatc-hint { margin-top: 6px; color: #555; font-size: .95rem; }

/* Optional section */
.vatc-optional { margin-top: 14px; }
.vatc-optional > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 0;
}
.vatc-optional > summary::-webkit-details-marker { display: none; }
.vatc-optional[open] > summary { opacity: .9; }

/* Actions row */
.vatc-actions { margin-top: 16px; display: flex; gap: 14px; flex-wrap: wrap; }
.vatc-btn-row { margin: .75rem 0; }

/* Spinner (used in button + banner) */
.vatc-spin {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid #666; border-top-color: transparent;
  border-radius: 50%; vertical-align: -2px;
  animation: vatcspin .8s linear infinite;
}
@keyframes vatcspin { to { transform: rotate(360deg); } }

/* Disable state on async actions */
.is-busy { opacity: .6; pointer-events: none; }

/* Drag & Drop uploader for Seal/Emblem */
#seal_image { display: none; } /* hidden, triggered by drop area */
.vatc-drop {
  border: 2px dashed #bfc6cf;
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  background: #fafafa;
  color: #445;
  cursor: pointer;                       /* pointer cursor */
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.vatc-drop:hover {
  background: #f5f8ff;                   /* hover highlight */
  border-color: #99baff;
  box-shadow: 0 0 0 3px rgba(122,167,255,.15);
}
.vatc-drop.is-drag {
  background: #eaf2ff;                   /* drag highlight */
  border-color: #77a7ff;
  box-shadow: 0 0 0 3px rgba(119,167,255,.2);
}
.vatc-drop b { display: block; margin-bottom: 6px; }
.vatc-drop small { opacity: .75; }

/* keyboard focus accessibility */
.vatc-drop:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(122,167,255,.25);
  border-color: #7aa7ff;
}

/* Hide form after submit (JS toggles this class) */
.vatc-form.is-hidden { display: none !important; }

/* Respect the theme’s primary .button styles.
   Only nudge spacing so our button and the summary link don’t collide. */
.button.vatc-primary { margin-top: 4px; }
.vatc-actions .vatc-optional-toggle { margin-left: 6px; }

/* Page-level spacing harmony */
.vatc-form h3 { margin: 0 0 8px; }
h4.vatc-section { margin: 12px 0 8px; }

/* Responsive */
@media (max-width: 640px) {
  .vatc-container { padding: 0 10px; }
  .vatc-actions { gap: 10px; }
}

/* When a preview is present */
.vatc-drop--has-image {
  padding: 8px;
}
.vatc-drop-preview img {
  display: inline-block;
  max-width: 220px;
  max-height: 120px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

/* Modal overlay */
.vatc-modal {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.55); /* semi-transparent */
  display: none;
  z-index: 9999;
}
.vatc-modal.is-open { display: flex; align-items: center; justify-content: center; }
.vatc-modal__box {
  background: #fff;
  border-radius: 12px;
  padding: 20px 22px;
  max-width: 520px;
  width: calc(100% - 32px);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.vatc-modal__title { margin: 0 0 10px 0; font-size: 18px; }
.vatc-modal__body { display: grid; grid-template-columns: 22px 1fr; grid-auto-rows: auto; column-gap: 12px; row-gap: 10px; align-items: center; }
.vatc-modal__spin { width: 22px; height: 22px; border: 3px solid #6b7280; border-top-color: transparent; border-radius: 50%; animation: vatcspin .8s linear infinite; }
@keyframes vatcspin { to { transform: rotate(360deg); } }
.vatc-modal__msg { margin: 0; color: #374151; }
.vatc-modal__link { grid-column: 1 / -1; margin: 4px 0 0 0; }

/* ==== VATC modal text wrapping fix ==== */
.vatc-modal-body{
  width:520px;                 /* comfortable width */
  max-width:calc(100vw - 64px);
}

.vatc-modal p,
.vatc-modal .vatc-msg{
  white-space:normal !important;
  word-break:normal !important;     /* no breaking every letter */
  overflow-wrap:break-word !important;
  margin:0;
}

/* Guard against theme overrides that cause vertical stacking */
.vatc-modal *{
  letter-spacing:normal !important;
  writing-mode:horizontal-tb !important;
}

/* ===== VATC full-screen overlay + modal ===== */
.vatc-overlay{
  position: fixed;
  inset: 0;                              /* top/right/bottom/left: 0 */
  background: rgba(24,28,37,.55);        /* dim entire page incl. header/footer */
  z-index: 2147483000;                   /* above theme & builders */
  display: flex;
  align-items: center;
  justify-content: center;
}
.vatc-overlay.vatc-hidden{ display:none; }

.vatc-modal{
  background:#fff;
  width:min(560px, calc(100vw - 48px));
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  padding:18px 22px;
}
.vatc-modal-title{ font-weight:600; margin:0 0 .5rem; }

.vatc-modal-body{
  display:flex; align-items:center; gap:10px;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
}
.vatc-modal *{
  letter-spacing:normal !important;
  writing-mode:horizontal-tb !important;
}

.vatc-modal .vatc-spin{
  width:16px; height:16px;
  border:2px solid currentColor; border-top-color:transparent;
  border-radius:50%;
  animation:vatcspin .8s linear infinite;
}

.vatc-modal-actions{ margin-top:10px; }
.vatc-modal-actions a{ display:none; }               /* hidden until ready */
.vatc-modal.is-ready .vatc-modal-actions a{ display:inline-block; }  /* show backup link */