/* Modal base */
.ssc-survey { position: fixed; inset: 0; display: none; z-index: 9999; }
.ssc-survey.is-open { display: block; }
.ssc-survey__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); }

/* Dialog */
.ssc-survey__dialog {
  position: absolute; inset: 10% max(12px, env(safe-area-inset-left)) auto max(12px, env(safe-area-inset-right));
  margin: auto; max-width: 560px; background:#fff; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.25);
  padding: 20px 20px 16px; left:0; right:0;
}
.ssc-survey__close{
  position:absolute; top:8px; right:8px; border:0; background:transparent; font-size:28px; line-height:1; cursor:pointer;
}
.ssc-survey__minimize{
  position:absolute; top:8px; right:44px; border:0; background:transparent; font-size:26px; line-height:1; cursor:pointer; padding:4px 8px;
}

.ssc-survey__sub { margin-top:4px; color:#555; }
.ssc-legend { margin-bottom:8px; }
.ssc-field { display:block; margin:14px 0; }
.ssc-options { display:grid; gap:8px; }
.ssc-options label { display:flex; gap:8px; align-items:flex-start; }

.ssc-inline { margin-top:10px; padding:10px 12px; border-left:4px solid #111; background:#f7f7f7; border-radius:8px; display:none; }
.ssc-inline.is-visible { display:block; }

.ssc-btn { display:inline-block; padding:10px 14px; border-radius:10px; border:0; background:#111; color:#fff; cursor:pointer; }
.ssc-btn:disabled { opacity:.6; cursor:not-allowed; }
.ssc-status { margin-top:10px; font-size:.95rem; color:#333; min-height:1.1em; }
.ssc-thanks { text-align:center; padding:24px 6px 14px; }
.ssc-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

@media (prefers-reduced-motion:no-preference){
  .ssc-survey__dialog { transition: transform .2s ease, opacity .2s ease; transform: translateY(10px); opacity:0; }
  .ssc-survey.is-open .ssc-survey__dialog { transform: translateY(0); opacity:1; }
}

/* Dock pill */
.ssc-dock{
  position:fixed; right:16px; bottom:16px; z-index:10000;
  padding:10px 14px; border-radius:999px; border:0; background:#111; color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.25); cursor:pointer; font:600 14px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
}
.ssc-dock:focus{ outline:2px solid #000; outline-offset:2px; }


/* Show the question only once; remove the default fieldset border */
.ssc-field { border: 0; padding: 0; margin: 14px 0; }

/* Hide the legend visually but keep it for screen readers */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 1px, 1px) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Inline message styling; it will sit directly BELOW the selected label */
.ssc-inline {
  display: none;
  margin: 8px 0 6px 28px; /* small indent so it visually nests under the radio */
  padding: 10px 12px;
  background: #f7f7f7;
  border-left: 4px solid #111;
  border-radius: 8px;
}
.ssc-inline.is-visible { display: block; }

/* Shake animation for the dock pill */
@keyframes ssc-shake {
  0% { transform: translateX(0); }
  15% { transform: translateX(-3px); }
  30% { transform: translateX(3px); }
  45% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
  75% { transform: translateX(-1px); }
  90% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}
.ssc-dock.shake {
  animation: ssc-shake 0.6s ease both;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ssc-dock.shake { animation: none; }
}