/* PS Supply Gate — minimal structural frontend base.
   Visual styling is intentionally left to the Custom CSS tab. */
.psg-form { max-width: 520px; margin: 0 auto; }
.psg-field { margin-bottom: 16px; }
.psg-label { display: block; margin-bottom: 6px; font-weight: 600; }
.psg-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px; }
.psg-checkbox-label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.psg-checkbox { margin-top: 3px; }
.psg-btn { display: inline-block; width: 100%; padding: 12px 24px; border: 0; border-radius: 6px; cursor: pointer; font-weight: 700; }
.psg-required { color: #d63638; }
.psg-hp { position: absolute !important; left: -9999px !important; }
.psg-notice { border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; }
.psg-notice-error { background: rgba(214, 54, 56, 0.08); border: 1px solid rgba(214, 54, 56, 0.45); color: #b32d2e; }
.psg-notice-success { background: rgba(0, 163, 42, 0.08); border: 1px solid rgba(0, 163, 42, 0.45); color: #007a1f; }
.psg-error-list { margin: 0; padding-left: 18px; }
.psg-error-item { margin: 2px 0; }
.psg-form-links { margin-top: 12px; text-align: center; }

/* {terms} / {privacy} placeholder links inside checkbox labels */
.psg-checkbox-label .psg-inline-link { color: inherit; font-weight: 700; text-decoration: underline; }

/* Checkbox disclaimer — smaller than the label, muted, aligned under the label text */
.psg-disclaimer { margin: 5px 0 0; font-size: .82em; line-height: 1.6; color: #98a2b3; }

/* Login <-> lost-password view cross-fade */
.psg-view { transition: opacity .16s ease, transform .16s ease; }
.psg-fading { opacity: 0; transform: translateY(6px); }
.psg-view-hidden { display: none; }
@media (prefers-reduced-motion: reduce) {
	.psg-view { transition: none; }
	.psg-fading { transform: none; }
}
.psg-lost-title { margin: 0 0 6px; }
.psg-lost-sub { margin: 0 0 16px; }

/* Show/hide password toggle */
.psg-pw-wrap { position: relative; display: block; }
.psg-pw-wrap .psg-input { padding-right: 46px !important; }
.psg-pw-toggle { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; color: #98a2b3; border-radius: 8px; }
.psg-pw-toggle:hover { color: #6d28d9; }
.psg-pw-toggle svg { width: 17px; height: 17px; display: block; }
.psg-pw-toggle .psg-eye-off { display: none; }
.psg-pw-toggle.is-visible .psg-eye { display: none; }
.psg-pw-toggle.is-visible .psg-eye-off { display: block; }