/* Custom styling for radio button labels to look like outline buttons */
.sd-selectbase__label {
	display: block !important;
	background: transparent !important;
	color: #BC3347 !important;
	border: 2px solid #BC3347 !important;
	border-radius: 100px !important;
	padding: 0.667em 1.33em !important;
	font-size: 12.135px !important;
	text-align: center !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	letter-spacing: 0.0636666667em !important;
	transition: background 0.3s, color 0.3s, border-color 0.3s !important;
	cursor: pointer !important;
	margin: 15px auto !important;
	width: 80% !important;
	max-width: 500px !important;
}

/* Mobile responsive styling */
@media (max-width: 768px) {
	.sd-selectbase__label {
		width: 100% !important;
		margin: 15px 0 !important;
	}
}

.sd-selectbase__label:hover {
	background-color: #BC3347 !important;
	color: #FEFEFF !important;
	border-color: #BC3347 !important;
}

/* Hide the actual radio button input */
.sd-selectbase__label .sd-visuallyhidden {
	display: none !important;
}

/* Hide the radio button decorator */
.sd-selectbase__label .sd-item__decorator {
	display: none !important;
}

/* Style the control label text */
.sd-selectbase__label .sd-item__control-label {
	color: #BC3347 !important;
	font-weight: bold !important;
	margin: 0 !important;
}

/* Selected state styling */
.sd-selectbase__label.sd-radio--checked,
.sd-selectbase__label[aria-checked="true"] {
	background-color: #BC3347 !important;
	color: #FEFEFF !important;
	border-color: #BC3347 !important;
}

/* Selected state text color */
.sd-selectbase__label.sd-radio--checked .sd-item__control-label,
.sd-selectbase__label[aria-checked="true"] .sd-item__control-label {
	color: #FEFEFF !important;
}

/* Style survey question titles to match main headings */
.sd-question__header {
	color: var(--color_intro_widgets_background);
	font-size: 1.382em;
	font-weight: 700 !important;
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif !important;
	line-height: 0px m !important;
	margin-bottom: 0;
	margin-top: 3em;
	text-transform: none !important;
	text-align: center !important;
        white-space: pre-line;
}

input.sd-btn.sd-navigation__next-btn {
	display: none;
}


.submit {
	border: 2px solid #BC3347;
	border-radius: 100px;
}
.sd-btn {
	border-radius:100px;
}

/* Hide all radio button inputs within the survey */
.sd-selectbase__label input[type="radio"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Additional fallback to hide any remaining radio elements */
.sd-selectbase__label [role="radio"] {
    display: none !important;
}

/* Hide radio elements by tag */
.sd-selectbase__label radio {
    display: none !important;
}

.sd-selectbase__label .sd-item__control-label {
    color: #BC3347 !important;  /* Red in default state */
}

.sd-selectbase__label:hover .sd-item__control-label {
    color: #FEFEFF !important;  /* White on hover */
}

/* Style the Previous button to match answer buttons */
button[type="button"],
.sd-navigation__prev-btn,
button.sd-btn.sd-navigation__prev-btn {
    display: block !important;
    margin: 15px auto !important;
    /* width: 80% !important; */
    /* max-width: 500px !important; */
}

/* Mobile responsive styling for Previous button */
@media (max-width: 768px) {
    button[type="button"],
    .sd-navigation__prev-btn,
    button.sd-btn.sd-navigation__prev-btn {
        width: 100% !important;
        margin: 15px 0 !important;
    }
}

/* Style the Complete button to match answer buttons */
button[type="button"],
.sd-navigation__complete-btn,
button.sd-btn.sd-navigation__complete-btn {
    display: block !important;
    margin: 15px auto !important;
}

/* Mobile responsive styling for Complete button */
@media (max-width: 768px) {
    button[type="button"],
    .sd-navigation__complete-btn,
    button.sd-btn.sd-navigation__complete-btn {
        width: 100% !important;
        margin: 15px 0 !important;
    }
}

textarea, input.sd-input{
	display: block;
	width: 80% !important;
	margin: 15px auto !important;
}

/* When Complete button is visible, switch to vertical layout with Complete on top */
.sd-action-bar:has(#sv-nav-complete) {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 15px;
}

/* Alternative approach if :has() isn't supported in older browsers */
.sd-action-bar #sv-nav-complete ~ #sv-nav-prev {
  order: 2;
}

.sd-action-bar #sv-nav-complete {
  order: 1;
}

/* Optional: Make buttons full width when stacked vertically */
.sd-action-bar:has(#sv-nav-complete) .sv-action {
  width: 100%;
  max-width: 200px;
}

.sd-action-bar:has(#sv-nav-complete) .sd-btn {
  width: 100%;
}

.sd-action-bar:has(#sv-nav-complete) .sd-btn.sd-navigation__prev-btn {
	background-color: var(--color_accent_text);
    color: var(--color_accent);
}

.sv-scroll__scrollbar-sizer {
	max-height: 50px;
}

#surveyContainer {
	border-style: solid;
    border-color: #BC3347;
    border-radius: 50px;
}