/* analyzer.css — Payment Processing Cost Analyzer form styling. */

.sbdt-pp { max-width: 760px; }
.sbdt-pp h2 { font-size: 1.25rem; margin: 1.5rem 0 0.75rem; }
.sbdt-tag { font-size: 0.75rem; background: #eee; border-radius: 4px; padding: 0.15rem 0.5rem; vertical-align: middle; }
.sbdt-mode { border: 1px solid #e2e2e2; border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1rem; }
.sbdt-mode legend { font-weight: bold; padding: 0 0.5rem; }
.sbdt-mode label { margin-right: 1.25rem; }
.sbdt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 1rem; }
.sbdt-field label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.sbdt-field input[type="text"], .sbdt-field input[type="email"] {
  width: 100%; padding: 0.65rem 0.75rem; font-size: 1rem;
  border: 1px solid #bbb; border-radius: 6px; min-height: 44px; box-sizing: border-box;
}
.sbdt-field input:focus { outline: 2px solid #1a73e8; outline-offset: 1px; border-color: #1a73e8; }
.sbdt-req { font-weight: normal; color: #666; font-size: 0.85em; }
.sbdt-hint { font-size: 0.85rem; color: #666; margin: 0.25rem 0 0; }
.sbdt-eq { border: 1px solid #e2e2e2; border-radius: 8px; padding: 0.75rem 1rem; margin-top: 0.9rem; }
.sbdt-eq legend { font-weight: bold; padding: 0 0.5rem; }
.sbdt-eq label { margin-right: 1rem; }
.sbdt-check { display: block; margin: 1rem 0; font-weight: 600; }
.sbdt-email { margin: 2rem 0; padding: 1.25rem; border: 1px solid #e2e2e2; border-radius: 8px; background: #fafafa; }
.sbdt-email h2 { margin-top: 0; }
.sbdt-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.sbdt-btn {
  padding: 0.7rem 1.4rem; font-size: 1rem; font-weight: 600; cursor: pointer;
  background: #1a73e8; color: #fff; border: none; border-radius: 6px; min-height: 44px; margin-top: 0.75rem;
}
.sbdt-btn:disabled { opacity: 0.6; cursor: wait; }
.sbdt-btn:focus-visible { outline: 2px solid #0b4fc4; outline-offset: 2px; }

@media (max-width: 720px) {
  .sbdt-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sbdt-pp * { animation: none !important; transition: none !important; }
}