/* ===== RESET & BASE (from style_elements.css + style_colors.css) ===== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: black;
  color: black;
  font-family: 'Open Sans', sans-serif;
}

input, button {
  font-family: 'Open Sans', sans-serif;
}

div { margin: 0; padding: 0; }

a { color: black; }
a:hover { color: gray; }
select { color: gray; }

/* Bold text on mobile (from style_form.css) */
p, ol { font-weight: 600; }
@media all and (min-width: 600px) {
  p, ol { font-weight: 400; }
}

/* ===== TYPOGRAPHY (from style_elements.css) ===== */
h1, h2 {
  margin: 1.5em 0 0.5em 0;
  padding: 0;
  letter-spacing: 1px;
  clear: both;
  text-transform: uppercase;
  font-family: 'Saira Semi Condensed', sans-serif;
}

h1 { font-size: 1.8rem; text-align: center; margin: 1em 0 0.6em 0; }
h2 { font-size: 1.5rem; text-align: left; }

#pageinfo + h2, h2:first-child {
  margin-top: .5em;
}

p { margin: 1em 0px; padding: 0; clear: both; }

ul {
  margin: 1em 30px 0 30px;
  padding: 0;
  list-style: square;
  list-style-position: inside;
}

ol {
  margin: 1em 0 0 0;
  padding: 0;
  list-style-position: inside;
  clear: both;
}

ol ol, ul ul, ol ul, ul ol {
  margin: 1em 0 0 30px;
  list-style: lower-alpha;
}

li { margin: 0.5em 0 1em 0; padding: 0; clear: both; }
tr { margin: 0; padding: 0; }
td { margin: 0; padding: 2px 0; }

/* Utility classes */
.center { text-align: center; }
.large { font-size: 1.1em; }
.x-large { font-size: 1.3em; }
.bold { font-weight: bold; }
.uppercase { text-transform: uppercase; }
.red { color: red; }

/* ===== PAGE LAYOUT (from style_layout.css) ===== */
#container {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  background-color: white;
  overflow-x: hidden;
}

#header {
  margin: 0;
  padding: 10px 0;
  font-size: calc(16px + 8.2vw);
  font-weight: bold;
  font-family: 'Libre Baskerville', sans-serif;
  text-align: center;
  background-color: gray;
  color: white;
}

@media all and (min-width: 600px) {
  #header { font-size: 68px; }
}

#body {
  margin: 0 auto;
  max-width: 960px;
  padding: 0px 20px;
  font-size: 1rem;
  background-color: white;
}

#footer {
  margin: 0;
  padding: 5px 20px;
  min-height: 115px;
  text-align: center;
  font-size: 70%;
  background-color: black;
  color: white;
}

#footer a { color: white; }

/* ===== WAIT OVERLAY (from style_layout.css) ===== */
#wait {
  position: fixed;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  margin: 0;
  background: rgba(200, 200, 200, 0.5);
  z-index: 300;
  visibility: hidden;
}

#wait div {
  position: fixed;
  bottom: calc(50vh + 60px);
  left: calc(50vw - 60px);
  padding: 5px;
  width: 120px;
  line-height: 30px;
  background-color: white;
  text-align: center;
  border-radius: 5px;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* ===== WARNING (from style_layout.css) ===== */
/* ===== VALIDATION ALERT (fixed bottom card) ===== */
@keyframes alert-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.alert-validation {
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 480px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 6px;
  border-left: 4px solid;
  font-size: 0.92em;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 1100;
  animation: alert-slide-up 0.25s ease both;
}

.alert-validation--required {
  background: #fef2f2;
  border-color: #e53935;
  color: #7f1d1d;
}

.alert-validation--warn {
  background: #fef9ee;
  border-color: #f59e0b;
  color: #78350f;
}

.alert-validation__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.alert-validation__body {
  flex: 1;
}

.alert-validation__message {
  font-weight: 600;
}

/* ===== PAGE INFO BAR ===== */
#pageinfo {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 999;
  background: white;
}

/* --- Segmented Progress Bar --- */
.progress-segments {
  display: flex;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  gap: 2px;
}

.progress-segment {
  flex: 1;
  height: 6px;
  background: #e8e8e8;
  position: relative;
  overflow: hidden;
}

.progress-fill {
  position: absolute;
  inset: 0;
  background: black;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-segment.completed .progress-fill {
  transform: scaleX(1);
  background: black;
}

.progress-segment.current .progress-fill {
  transform: scaleX(1);
  background: #555;
  animation: segmentPulse 2s ease-in-out infinite;
}

.progress-segment.fill-back .progress-fill {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes segmentPulse {
  0%, 100% { background: #555; }
  50% { background: #333; }
}

/* --- Compact Info Row --- */
.pageinfo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  min-height: 28px;
}

#page_progress {
  margin: 0;
  padding: 0;
  font-size: 11px;
  color: #999;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* --- Exit Area --- */
.exit-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.exit-link {
  font-size: 11px;
  color: #bbb;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: color 0.15s, opacity 0.15s;
  background: none;
  border: none;
  font-family: 'Open Sans', sans-serif;
  padding: 0;
}

.exit-link:hover { color: #888; }
.exit-link.hidden { opacity: 0; pointer-events: none; }

/* --- Inline Exit Confirmation --- */
.exit-confirm {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.exit-confirm.visible {
  opacity: 1;
  pointer-events: auto;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

.exit-confirm-text {
  font-size: 11px;
  color: #888;
  letter-spacing: 0.3px;
}

.exit-confirm-yes,
.exit-confirm-no {
  font-size: 11px;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px 6px;
  border-radius: 3px;
  transition: all 0.15s;
}

.exit-confirm-yes {
  color: #c62828;
  font-weight: 600;
}
.exit-confirm-yes:hover { background: #fff0f0; }

.exit-confirm-no {
  color: #888;
  font-weight: 600;
}
.exit-confirm-no:hover { background: #f5f5f5; color: #333; }

/* ===== FORM INPUTS (from style_form.css + style_colors.css) ===== */
textarea {
  width: 75%;
  margin: 5px auto;
  padding: 8px 12px;
  font-size: 90%;
  border: 1px solid #ccc;
  border-radius: 3px;
  display: block;
  font-family: 'Open Sans', sans-serif;
  background: #fafafa;
  transition: border-color 0.5s, background-color 0.5s;
}

input[type="text"], input[type="number"], input[type="email"] {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 90%;
  font-family: 'Open Sans', sans-serif;
  background: #fafafa;
  transition: border-color 0.5s, background-color 0.5s;
}

input[type="text"]:hover, input[type="text"]:focus,
input[type="number"]:hover, input[type="number"]:focus,
input[type="email"]:hover, input[type="email"]:focus,
textarea:focus, textarea:hover {
  border-color: #999;
  background: white;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
  outline: none;
  transition: 0s;
}

/* Not-answered states (from style_colors.css) */
input[type="text"].not-answered, input[type="number"].not-answered,
input[type="email"].not-answered, textarea.not-answered, select.not-answered {
  border-color: #e53935;
}

input[type="text"].not-answered-warn, input[type="number"].not-answered-warn,
input[type="email"].not-answered-warn, textarea.not-answered-warn, select.not-answered-warn {
  border-color: #f59e0b;
}

tr.shade {
  background-color: #d3d3d3;
}

/* ===== NAVIGATION BUTTONS ===== */
.nav-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 0;
  gap: 10px;
}

.btn-back {
  padding: 8px 24px;
  background: none;
  color: #999;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-transform: uppercase;
  font-size: 95%;
  font-family: 'Open Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-back:hover {
  border-color: #bbb;
  color: #666;
  background: #fafafa;
}

#continue {
  padding: 8px 32px;
  outline: none;
  background-color: #ddd;
  color: gray;
  border: none;
  border-radius: 5px;
  text-transform: uppercase;
  font-size: 95%;
  font-family: 'Open Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
}

#continue:hover {
  background-color: #bbb;
  color: white;
}

/* ===== CONSENT (from style_form.css) ===== */
#consent {
  margin: 0 0 30px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

#consent div, .consent-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 5px 40px;
  padding: 5px;
  min-width: 140px;
  height: 70px;
  background-color: #ddd;
  border-radius: 2px;
  color: gray;
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
  font-size: 120%;
  cursor: pointer;
}

#consent div.selected, .consent-btn.selected {
  background-color: gray;
  color: white;
}

#consent div:hover, .consent-btn:hover {
  background-color: gray;
  color: white;
}

/* ===== COMMENTS (from style_form.css) ===== */
#comments {
  display: block;
  width: 80%;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 8px 12px;
  margin: 5px auto 0 auto;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8em;
  color: gray;
  background: #fafafa;
  transition: border-color 0.5s, background-color 0.5s;
}

/* ===== ALIGNED LISTS (from style_form.css) ===== */
ol.aligned li, ul.aligned li, li.aligned {
  position: relative;
  margin-right: 210px;
  margin-left: -6px;
  padding-left: 2px;
}

ol.aligned li input[type="text"], ul.aligned li input[type="text"],
ol.aligned li select, ul.aligned li select,
ol.aligned li input[type="checkbox"], ul.aligned li input[type="checkbox"],
li.aligned input[type="text"], li.aligned select, li.aligned input[type="checkbox"] {
  margin: 0;
  position: absolute;
  right: -210px;
  bottom: 4px;
}

ol.aligned li input[type="text"], ul.aligned li input[type="text"], li.aligned input[type="text"] {
  width: 120px;
}

ol.aligned li select, ul.aligned li select, li.aligned select {
  width: 132px;
}

ol.aligned li:hover, ul.aligned li:hover, li.aligned:hover {
  border-color: #ccc;
  transition: border-color 0.5s;
}

/* ===== QUESTIONS ===== */
.question { margin: 1em 0; padding: 0 0 0 15px; clear: both; border-left: 3px solid transparent; }

.question-label {
  margin: 1em 0 0.5em 0;
  font-weight: 600;
}

@media all and (min-width: 600px) {
  .question-label { font-weight: 400; }
}

.required-indicator { color: #ff3333; font-weight: bold; }

.question.not-answered {
  border-left-color: #e53935;
  border-radius: 0 4px 4px 0;
}

.question.not-answered-warn {
  border-left-color: #f59e0b;
  border-radius: 0 4px 4px 0;
}

/* Matrix: border lives on each dimension row, not the wrapper */
.question[data-type="likert_matrix"].not-answered,
.question[data-type="likert_matrix"].not-answered-warn {
  border-left-color: transparent;
  border-radius: 0;
}

.question.not-answered .question-label { color: #e53935; }
.question.not-answered-warn .question-label { color: #92400e; }

.text-input { width: 100%; max-width: 400px; }
.number-input { max-width: 120px; }
.textarea-input { width: 75%; display: block; resize: vertical; }

/* When wrapped in input-container, the container controls width */
.input-container .text-input { max-width: none; }
.input-container .textarea-input { width: 100%; }
.input-container .select-input { width: 100%; }
.input-container .searchable-select { max-width: none; width: 100%; }

.select-input {
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: 'Open Sans', sans-serif;
  color: gray;
  background: #fafafa;
  transition: border-color 0.5s, background-color 0.5s, color 0.3s;
}

/* Select & text inputs: darken border when answered */
.select-input.has-value {
  border-color: #999;
  color: inherit;
}

.text-input.has-value,
.textarea-input.has-value {
  border-color: #999;
}

/* Radio & Checkbox groups */
.radio-group, .checkbox-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: 4px;
  border-left: 3px solid transparent;
  padding-left: 8px;
}

.radio-option, .checkbox-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.15s;
}

.radio-option:hover, .checkbox-option:hover { background: #f0f2f5; }

/* Selected row highlight */
.radio-option:has(input:checked),
.checkbox-option:has(input:checked) {
  background: #f2f5f8;
}
.radio-option:has(input:checked):hover,
.checkbox-option:has(input:checked):hover {
  background: #e9edf2;
}

/* Custom radio button */
.radio-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #adb5bd;
  border-radius: 50%;
  margin: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.radio-option input[type="radio"]:checked {
  border-color: #5a6a7a;
}
.radio-option input[type="radio"]::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5a6a7a;
  opacity: 0;
  transition: opacity 0.15s;
}
.radio-option input[type="radio"]:checked::after {
  opacity: 1;
}

/* Custom checkbox */
.checkbox-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #adb5bd;
  border-radius: 4px;
  margin: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.15s, background-color 0.15s;
}
.checkbox-option input[type="checkbox"]:checked {
  border-color: #5a6a7a;
  background: #5a6a7a;
}
.checkbox-option input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.15s;
}
.checkbox-option input[type="checkbox"]:checked::after {
  opacity: 1;
}

.radio-group.not-answered, .checkbox-group.not-answered {
  border-left-color: #e53935;
}

.radio-group.not-answered-warn, .checkbox-group.not-answered-warn {
  border-left-color: #f59e0b;
}

.hideQuestion { display: none; }

/* ===== AGREEMENT SCALE (from style_form.css) ===== */
div.agreement {
  display: flex;
  flex-wrap: wrap;
  margin: 4px 0 0 0;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  font-size: 80%;
  text-transform: uppercase;
  font-weight: 400;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
}

div.agreement.narrow {
  margin: 8px 0 0 0;
  flex-direction: column;
  align-items: center;
}

div.agreement div.response {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  min-height: 50px;
  padding: 3px 6px;
  margin: 1px;
  border: 5px solid #f0f0f0;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.5s;
}

div.fullwidth div.response {
  min-width: auto;
  width: auto;
  flex-grow: 1;
  flex-basis: 40px;
}

div.agreement.narrow div.response {
  width: 90%;
  margin: 3px 0;
  padding: 6px 0px;
  min-height: auto;
  flex-basis: auto;
}

div.agreement.fixedwidth div.response {
  width: 85px;
}

div.agreement .response:hover {
  border-color: #e0e0e0;
  transition: 0s;
}

div.agreement .response.selected {
  border-color: black;
}

div.agreement .response:hover span.pop-up_text, div.agreement .response:hover div.arrow-down {
  display: inline-block;
}

div.agreement div.response span {
  position: relative;
}

div.agreement div.response .sub_text {
  position: absolute;
  font-size: 70%;
  color: gray;
  bottom: 0px;
  text-transform: none;
}

div.agreement.narrow div.response .sub_text {
  position: relative;
  margin-left: 4px;
}

div.agreement div.response span.pop-up_text {
  position: absolute;
  bottom: calc(100% + 10px);
  display: none;
  padding: 4px;
  background: #eeeeee;
  border: 3px solid #cccccc;
  border-radius: 3px;
}

div.agreement div.response span.pop-up_text:hover,
div.agreement div.response div.arrow-down:hover {
  display: none;
}

div.arrow-down {
  display: none;
  position: absolute;
  bottom: calc(100% + 5px);
  left: calc(50% - 10px);
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #cccccc;
}

/* ===== DRILL-DOWN (from style_form.css) ===== */
div.drill-down div { display: none; }
div.drill-down div.agreement:first-of-type { display: flex; }

div.arrow-to {
  width: 0; height: 0;
  position: relative;
  margin: 14px auto 0 auto;
  border-left: 50px solid transparent;
  border-top: 20px solid #eeeeee;
  border-right: 50px solid transparent;
}

div.arrow-to span {
  position: absolute;
  display: block;
  font-size: 50%;
  width: 300px;
  height: auto;
  text-align: center;
  bottom: 22px;
  right: -150px;
  color: gray;
  font-weight: 400;
}

div.narrow + div.arrow-to { margin-top: 20px; }

/* ===== ANCHOR SCALE (from style_form.css) ===== */
div.anchorscale {
  display: flex;
  cursor: default;
  flex-direction: column;
  align-items: center;
  margin-top: 6px;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

div.anchorscale div {
  display: flex;
  align-items: center;
  justify-content: center;
}

div.anchorscale .response {
  width: 80px;
  margin: 1px 0;
  min-width: 80px;
  height: 30px;
  border: 5px solid #f0f0f0;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.5s;
}

div.anchorscale .leftanchor { padding-right: 4px; text-align: center; }
div.anchorscale .rightanchor { padding-left: 4px; text-align: center; }

/* Narrow anchor scale */
div.anchorscale.narrow {
  justify-content: center;
  flex-flow: row wrap;
  align-items: center;
}

div.anchorscale.narrow .response {
  width: 60px; margin: 0 1px; min-width: 60px; height: 50px; order: 3;
}

div.anchorscale.narrow .leftanchor, div.anchorscale.narrow .rightanchor {
  flex-grow: 2; flex-basis: 45%;
}

div.anchorscale.narrow .leftanchor {
  justify-content: flex-start; order: 1; text-align: left;
}

div.anchorscale.narrow .rightanchor {
  justify-content: flex-end; order: 2; text-align: right;
}

/* Wide anchor scale */
div.anchorscale.wide {
  flex-wrap: nowrap; flex-direction: row;
}

div.anchorscale.wide .response {
  order: 1; width: 60px; margin: 0 1px; min-width: 60px; height: 50px;
}

div.anchorscale.wide .leftanchor, div.anchorscale.wide .rightanchor {
  flex-grow: 2; flex-basis: 60px; min-width: 60px;
}

div.anchorscale.wide .leftanchor {
  justify-content: flex-end; order: 1; text-align: right;
}

div.anchorscale.wide .rightanchor {
  justify-content: flex-start; order: 1; text-align: left;
}

div.anchorscale .response:hover { border-color: #e0e0e0; transition: 0s; }
div.anchorscale .response.selected { border-color: black; transition: 0s; }

/* ===== LIKERT SCALE ===== */
.likert-scale {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 6px 0;
  flex-wrap: nowrap;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.anchor {
  font-size: 80%;
  color: black;
  min-width: 60px;
  padding: 0 4px;
  font-weight: 400;
}

.left-anchor { text-align: right; }
.right-anchor { text-align: left; }

.likert-points {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
}

.likert-point {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 50px;
  margin: 0 1px;
  min-width: 60px;
  border: 5px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 80%;
  text-transform: uppercase;
  font-weight: 400;
  transition: border-color 0.5s;
}

@media (hover: hover) {
  .likert-point:hover { border-color: #e0e0e0; transition: 0s; }
}
.likert-point.selected { border-color: black; transition: 0s; }

/* --- Likert STACKED state (added by JS when overflowing) --- */
.likert-scale.stacked {
  flex-direction: column;
  align-items: center;
}

.likert-scale.stacked .anchor {
  text-align: center !important;
  min-width: auto;
  padding: 4px 0;
}

.likert-scale.stacked .left-anchor { order: -1; }
.likert-scale.stacked .right-anchor { order: 1; }

.likert-scale.stacked .likert-points {
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.likert-scale.stacked .likert-point {
  width: 100%;
  max-width: 260px;
  height: 44px;
  margin: 1px 0;
}


/* ===== LIKERT MATRIX (div-based) ===== */
.matrix-container {
  margin: 6px 0;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* --- Desktop: grid layout --- */
.matrix-header {
  display: flex;
  align-items: flex-end;
  padding: 2px 0px 2px 7px;
  border-left: 3px solid transparent;
}

.matrix-header-spacer {
  flex: 0 0 200px;
}

.matrix-header-label {
  flex: 1;
  text-align: center;
  font-size: 75%;
  text-transform: uppercase;
  color: black;
  font-weight: 400;
  padding: 0 0 4px 0;
  margin: 0;
  min-width: 40px;
}

.matrix-dimension {
  display: flex;
  align-items: center;
  padding: 2px 0 2px 7px;
  border-left: 3px solid transparent;
}

.matrix-dimension.shade {
  background-color: rgba(0, 0, 0, 0.035);
}

.matrix-dimension.not-answered {
  border-left-color: #e53935;
}

.matrix-dimension.not-answered-warn {
  border-left-color: #f59e0b;
}

.matrix-dim-text {
  flex: 0 0 200px;
  text-align: left;
  padding: 2px 12px 2px 4px;
}

.matrix-dim-responses {
  display: flex;
  flex: 1;
  gap: 0;
}

/* Desktop matrix cells: styled like likert points */
.matrix-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 0 1px;
  min-width: 36px;
  border: 5px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 80%;
  text-transform: uppercase;
  font-weight: 400;
  transition: border-color 0.5s;
}

@media (hover: hover) {
  .matrix-cell:hover { border-color: #e0e0e0; transition: 0s; }
}
.matrix-cell.selected { border-color: black; transition: 0s; }

.matrix-dimension.shade .matrix-cell.selected {
  border-color: black;
}

/* Desktop: show numbers, hide labels */
.cell-label { display: none; }
.cell-number { display: inline; }


/* --- Matrix STACKED state (added by JS when overflowing) --- */
.matrix-container.stacked .matrix-header {
  display: none;
}

.matrix-container.stacked .matrix-dimension {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  margin-bottom: 16px;
  background: none !important;
}

.matrix-container.stacked .matrix-dimension.shade {
  background: none !important;
}

.matrix-container.stacked .matrix-dim-text {
  flex: none;
  padding: 6px 0 4px 0;
  font-weight: 600;
}

.matrix-container.stacked .matrix-dim-responses {
  flex-direction: column;
  align-items: center;
}

.matrix-container.stacked .matrix-cell {
  width: 100%;
  max-width: 280px;
  height: auto;
  min-height: 44px;
  margin: 1px 0;
  padding: 6px 12px;
  font-size: 75%;
  background: white;
}

.matrix-container.stacked .matrix-cell:hover {
  border-color: #e0e0e0;
  background: white;
}

.matrix-container.stacked .matrix-cell.selected {
  border-color: black;
  background: white;
}

/* Stacked: hide numbers, show labels */
.matrix-container.stacked .cell-number { display: none; }
.matrix-container.stacked .cell-label { display: inline; }

/* ===== FLOATING RESPONSE BOXES (from style_form.css) ===== */
div.floatingResponseBoxes {
  display: flex;
  margin: 4px 0;
  cursor: default;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 400;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

div.floatingResponseBoxes div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px; height: 100px;
  border-width: 5px; border-style: solid;
  border-color: #dadada; border-radius: 5px;
  margin: 3px; padding: 3px;
  cursor: pointer;
  transition: background-color 0.5s;
}

div.floatingResponseBoxes div:hover { border-color: #c0c0c0; transition: 0s; }
div.floatingResponseBoxes div.selected { border-color: gray; transition: 0s; }
div.floatingResponseBoxes span.name { display: block; text-align: center; }

/* ===== STACKED RESPONSE BOXES (from style_form.css) ===== */
div.stackedResponseBoxes {
  display: flex;
  margin: 4px 0 0 0;
  cursor: default;
  flex-direction: column;
  align-items: center;
  font-weight: 400;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

div.stackedResponseBoxes div.response {
  max-width: 400px; width: 100%;
  font-size: 0.9em; text-align: center;
  overflow: hidden;
  border-width: 5px; border-style: solid;
  border-color: #f0f0f0; border-radius: 8px;
  padding: 3px; margin: 3px 0;
  cursor: pointer;
  transition: border-color 0.5s;
}

div.stackedResponseBoxes .response:hover { border-color: #e0e0e0; transition: 0s; }
div.stackedResponseBoxes .response.selected { border-color: black; }

div.stackedResponseBoxes div.response div.name {
  width: 100%; margin: 0 2px;
  text-transform: uppercase; font-size: 0.9em; text-align: left;
}

div.stackedResponseBoxes div.response div.ex {
  display: block; color: gray;
  margin-left: 10px; font-size: 0.7em; text-align: left;
}

/* ===== LABEL FOR TEXT INPUTS (from style_form.css) ===== */
div.textbox_label_container {
  position: relative;
  display: inline-block;
  width: calc(100% - 100px);
  min-width: 158px;
  margin: 0;
}

div.textbox_label_container input[type="text"] {
  width: 100%; text-align: left;
  min-width: 158px; max-width: 300px;
  border-color: #c0c0c0; border-width: 0 0 1px 0;
  margin: 0 0 3px 4px; padding: 7px 4px 0px 4px;
  font-size: 0.8em; color: gray;
}

div.textbox_label_container input[type="text"]:focus { outline: none; }

div.textbox_label_container label {
  position: absolute; top: 6px; left: 1px;
  min-width: 147px; font-size: 0.8em;
  color: gray; cursor: text;
}

/* ===== PROBABILITY QUESTION (from style_form.css) ===== */
div.probability {
  display: flex; flex-flow: row nowrap;
  width: 100%; min-width: min-content;
  margin: 0 auto;
  justify-content: center; align-items: flex-start;
  font-size: 80%; font-weight: 400;
  background-color: white;
}

div.numcol, div.percentcol, div.addminuscol, div.decimalcol {
  display: flex; flex-flow: column nowrap;
  cursor: default;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

div.display, div.decimal, div.addcol, div.percent {
  font-size: 200%; color: #cccccc; height: 80px;
  font-family: 'Saira Semi Condensed', monospace;
  font-weight: bold;
  transition: color 0.5s;
}

div.percent { padding-right: 8px; color: black; }

div.addcol {
  display: flex; flex-flow: row nowrap;
  cursor: pointer; color: #c0c0c0;
}

div.plus, div.minus {
  display: flex; justify-content: center;
  font-family: monospace; font-size: 80%;
  margin: 2px; border: 2px solid #c0c0c0;
  border-radius: 2px; width: 22px; height: 22px;
}

div.numcol div, div.percentcol div, div.addminuscol div, div.decimalcol div {
  display: flex; align-items: center; justify-content: center;
}

div.numcol .probresponse {
  width: 30px; height: 30px; margin: 1px;
  border: 5px solid white; border-radius: 16px;
  cursor: pointer; color: #c0c0c0;
  border-color: #f0f0f0;
  transition: border-color 0.5s;
}

div.numcol .probresponse.selected {
  border-color: #808080;
  transition: border-color 0.5s;
}

@media all and (min-width: 520px) {
  div.probability, div.numberquestion { font-size: 100%; }
  div.numcol .probresponse { height: 36px; width: 36px; }
}

/* ===== NUMBER QUESTION (from style_form.css) ===== */
div.numberquestion {
  display: flex; flex-flow: row nowrap;
  width: 100%; margin: 0 auto;
  justify-content: center; align-items: flex-start;
  font-size: 80%; font-weight: 400;
}

div.numcol, div.writing {
  display: flex; flex-flow: column nowrap;
  cursor: default;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

div.display {
  font-size: 200%; color: #cccccc; height: 80px;
  font-family: 'Saira Semi Condensed', monospace;
  font-weight: bold;
}

div.display.selected, div.writing div.display { color: black; }

div.numcol div, div.writing div {
  display: flex; align-items: center; justify-content: center;
}

div.writing div { letter-spacing: 5px; }

div.numcol .numresponse {
  width: 35px; height: 35px;
  border: 5px solid white; border-radius: 3px;
  cursor: pointer;
  color: #c0c0c0;
  border-color: #f0f0f0 #c0c0c0 #c0c0c0 #f0f0f0;
  transition: 0s;
}

@media all and (min-width: 520px) {
  div.numberquestion { font-size: 100%; }
}

div.numcol .numresponse.selected {
  border-color: #aaaaaa #808080 #808080 #aaaaaa;
  transition: 0s;
}

/* ===== ETHNICITY (from style_form.css) ===== */
div.ethnicity {
  display: flex;
  margin: 4px 0 0 0;
  cursor: default;
  flex-direction: column;
  align-items: center;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  font-weight: 400;
}

div.ethnicity span.name {
  display: block; margin: 0 2px;
  text-transform: uppercase; font-size: 80%;
}

div.ethnicity span.ex {
  display: block; color: gray;
  margin-left: 10px; font-size: 60%;
}

div.ethnicity div.response {
  max-width: 400px; width: 100%;
  overflow: hidden; padding: 6px 2px; margin: 2px 0;
  border-width: 5px; border-style: solid;
  border-color: #f0f0f0; border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.5s;
}

div.ethnicity .response.selected {
  border-color: black;
  transition: 0s;
}

/* ===== AGE GROUPS (from style_form.css) ===== */
div.age_groups {
  display: flex; flex-wrap: wrap;
  width: 400px; min-width: 240px;
  margin: 4px auto 0 auto;
}

div.age_category {
  width: 30%; text-align: right;
  font-size: 80%; padding: 5px 2px 4px 2px;
}

div.age_prob {
  width: 70%; padding: 0 0 2px 10px;
}

div.age_prob_label_container {
  position: relative; display: inline-block;
  width: 100%; margin: 0; padding: 0; font-size: 80%;
}

div.age_prob input[type="text"] {
  font-family: 'Roboto Mono', monospace;
  border-style: dashed; border-width: 0 0 1px 0;
  border-color: gray; padding: 2px; margin: 0;
  width: 15ch; text-align: right; font-size: 100%;
}

div.age_prob input[type="text"]:focus { outline: none; }

div.age_prob_label_container label {
  font-family: 'Roboto Mono', monospace;
  position: absolute; padding: 2px; width: 15ch;
  top: 0px; left: 0; text-align: right;
  color: gray; cursor: text; font-size: 100%;
}

/* ===== SCENARIO & PICTURE (from style_elements.css) ===== */
div.scenario { margin: 0 20px 10px 20px; }
div.picture { display: flex; }
div.picture img { margin: auto; }

/* ===== MTURK (from style_elements.css) ===== */
#mturk {
  width: 80px; line-height: 30px;
  margin: 20px auto; font-size: 24px;
  font-weight: bold; background-color: #c0c0c0;
  text-align: center; border: 5px solid gray;
  border-style: outset;
}

/* Text block content (replaces old page-level instructions) */
.text-block {
  margin: 1em 0;
  padding: 0;
  clear: both;
}

.text-block p {
  margin: 0;
}

/* ===== LABEL SCALE ===== */
.label-scale {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0;
  user-select: none;
  -webkit-user-select: none;
}

.label-scale-points {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
}

.label-scale-point {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 50px;
  padding: 4px 12px;
  margin: 0 1px;
  border: 5px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  background: white;
  transition: border-color 0.5s;
}

@media (hover: hover) {
  .label-scale-point:hover { border-color: #e0e0e0; }
}
.label-scale-point.selected { border-color: black; transition: 0s; }

.label-scale-text {
  font-size: 75%;
  font-weight: 400;
  color: black;
  text-transform: uppercase;
  line-height: 1.2;
}

.label-scale.stacked .label-scale-points {
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.label-scale.stacked .label-scale-point {
  width: 100%;
  max-width: 260px;
  height: auto;
  min-height: 44px;
  margin: 1px 0;
}

/* ===== OTHER OPTION ===== */
.other-option {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.other-text-input {
  flex: 1;
  min-width: 120px;
  max-width: 300px;
  padding: 6px 10px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  font-size: 90%;
  font-family: 'Open Sans', sans-serif;
  background: #fafafa;
  transition: opacity 0.15s, border-color 0.15s;
}

/* Dim the text field when the Other option is not selected */
.other-option:has(input:not(:checked)) .other-text-input {
  opacity: 0.5;
}

.other-text-input:focus {
  border-style: solid;
  border-color: #999;
  outline: none;
}

/* ===== SEARCHABLE SELECT ===== */
.searchable-select {
  position: relative;
  max-width: 400px;
}

.searchable-select-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 90%;
  font-family: 'Open Sans', sans-serif;
  background: #fafafa;
  box-sizing: border-box;
}

.searchable-select-input:focus {
  border-color: #999;
  outline: none;
}

.searchable-select-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 3px 3px;
  z-index: 100;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.searchable-select-option {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 90%;
}

.searchable-select-option:hover { background: #f0f0f0; }

.searchable-select.not-answered .searchable-select-input {
  border-color: #e53935;
}

.searchable-select.not-answered-warn .searchable-select-input {
  border-color: #f59e0b;
}

/* ===== NUMBER WITH UNIT ===== */
.number-with-unit {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.number-with-unit .number-input-wrap {
  flex: 1;
  min-width: 0;
}

.prefix-label,
.unit-label {
  font-size: 100%;
  color: #555;
  font-weight: 400;
  white-space: nowrap;
}

/* h3 and h4 heading styles (h2 already exists) */
h3 {
  margin: 1.2em 0 0.4em 0;
  padding: 0;
  letter-spacing: 0.5px;
  clear: both;
  text-transform: uppercase;
  font-family: 'Saira Semi Condensed', sans-serif;
  font-size: 1.2rem;
  text-align: left;
}

h4 {
  margin: 1em 0 0.6em 0;
  padding: 0;
  letter-spacing: 0.3px;
  clear: both;
  text-transform: uppercase;
  font-family: 'Saira Semi Condensed', sans-serif;
  font-size: 1rem;
  text-align: left;
}

#pageinfo + h3, h3:first-child { margin-top: .5em; }
#pageinfo + h4, h4:first-child { margin-top: .5em; }

/* ===== SLIDER ===== */
.slider-container {
  margin: 8px 0;
  max-width: 500px;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 80%;
  font-weight: 400;
  color: black;
}

.slider-current-value {
  font-size: 130%;
  font-weight: 600;
  min-width: 60px;
  width: 60px;
  text-align: center;
  color: black;
}

.slider-current-value:empty::before {
  content: '\00a0';
}

.slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  margin: 0;
  padding: 0;
  background: #e0e0e0;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: gray;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.slider-input::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: gray;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.slider-input:hover::-webkit-slider-thumb { background: #555; }
.slider-input:hover::-moz-range-thumb { background: #555; }

/* Untouched state — muted thumb for visible starting positions */
.slider-input[data-touched="false"]::-webkit-slider-thumb {
  background: #ccc;
}
.slider-input[data-touched="false"]::-moz-range-thumb {
  background: #ccc;
}

/* Hidden until interaction — thumb fully invisible */
.slider-input[data-touched="false"][data-default-position="none"]::-webkit-slider-thumb {
  opacity: 0;
}
.slider-input[data-touched="false"][data-default-position="none"]::-moz-range-thumb {
  opacity: 0;
}
.slider-input[data-touched="false"][data-default-position="none"]:hover::-webkit-slider-thumb {
  background: #ccc;
  opacity: 0;
}
.slider-input[data-touched="false"][data-default-position="none"]:hover::-moz-range-thumb {
  background: #ccc;
  opacity: 0;
}

.slider-container.not-answered .slider-input {
  /* border on wrapper handles the signal */
}

.slider-container.not-answered-warn .slider-input {
  /* border on wrapper handles the signal */
}

.slider-ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
  margin-top: -2px;
  pointer-events: none;
}

.slider-tick {
  width: 1px;
  height: 8px;
  background: #bbb;
}

/* ===== RANK ORDER ===== */
.rank-order-container {
  margin: 8px 0;
  max-width: 500px;
}

.rank-order-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rank-order-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 5px solid #f0f0f0;
  border-radius: 8px;
  margin: 1px 0;
  background: white;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  transition: transform 0.15s ease, border-color 0.15s;
}

.rank-order-item:hover {
  border-color: #e0e0e0;
}

/* Touched — all items darken once participant interacts */
.rank-order-container.rank-touched .rank-order-item {
  border-color: #b6b6b6;
}

.rank-order-container.rank-touched .rank-order-item:hover {
  border-color: #888;
}

/* Suppress hover effects while dragging */
.rank-order-container:has(.rank-dragging) .rank-order-item,
.rank-order-container:has(.rank-dragging) .rank-order-item:hover {
  border-color: #b6b6b6;
}

/* Drag in progress — hide the original item completely (placeholder takes its space) */
.rank-order-item.rank-dragging {
  display: none;
}

/* Placeholder showing where the item will land */
.rank-order-placeholder {
  border: 2px dashed #ccc;
  border-radius: 8px;
  margin: 1px 0;
  background: #f9f9f9;
}

/* Floating clone under the cursor */
.rank-order-clone {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  cursor: grabbing;
  opacity: 0.95;
  border-color: black;
}

.rank-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #e0e0e0;
  border-radius: 50%;
  font-size: 80%;
  font-weight: 600;
  color: black;
  flex-shrink: 0;
}

.rank-label {
  flex: 1;
  font-weight: 400;
}

.rank-buttons {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.rank-up, .rank-down {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 20px;
  border: 2px solid #e0e0e0;
  border-radius: 3px;
  background: white;
  font-size: 10px;
  cursor: pointer;
  color: gray;
  padding: 0;
  line-height: 1;
  font-family: 'Open Sans', sans-serif;
}

.rank-up:hover:not(:disabled), .rank-down:hover:not(:disabled) {
  border-color: #bbb;
  background: #f5f5f5;
  color: black;
}

.rank-up:disabled, .rank-down:disabled {
  opacity: 0.3;
  cursor: default;
}

.rank-order-container.not-answered .rank-order-item {
  border-color: #e53935;
}

.rank-order-container.not-answered-warn .rank-order-item {
  border-color: #f59e0b;
}

/* Preview overlay */
.preview-overlay {
  position: fixed;
  top: 12px;
  left: 12px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 4px;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-overlay.preview-complete {
  pointer-events: auto;
}

.preview-label {
  white-space: nowrap;
}

.preview-condition-select {
  font-size: 0.7rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  padding: 1px 4px;
  border: 1px solid #d4a017;
  border-radius: 3px;
  background: #fff;
  color: #856404;
  cursor: pointer;
  max-width: 160px;
}

.preview-condition-select:focus {
  outline: none;
  border-color: #856404;
}

.preview-cond-badge {
  background: #856404;
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.65rem;
  white-space: nowrap;
}

.close-preview-btn {
  background: #333;
  color: white;
  border: none;
  padding: 10px 28px;
  border-radius: 3px;
  font-size: 0.95rem;
  font-family: 'Open Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}

.close-preview-btn:hover {
  background: #555;
}

/* ===== ARRIVAL MODAL ===== */

.arrival-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  pointer-events: all;
}

.arrival-modal {
  background: white;
  border-radius: 4px;
  padding: 32px 36px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  box-sizing: border-box;
}

.arrival-modal-icon {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 16px;
  line-height: 1;
}

.arrival-modal-icon--warn  { color: #d97706; }
.arrival-modal-icon--block { color: #b91c1c; }

.arrival-modal-title {
  font-family: 'Saira Semi Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  margin: 0 0 12px 0;
}

.arrival-modal-message {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #444;
  text-align: center;
  margin: 0 0 24px 0;
}

.arrival-modal-continue {
  display: block;
  width: 100%;
  padding: 10px 0;
  background: #555;
  color: white;
  border: none;
  border-radius: 3px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s;
  text-align: center;
}

.arrival-modal-continue:hover { background: #333; }