﻿@charset "UTF-8";
@font-face {
  font-family: "Castoro";
  src: url("../fonts/Castoro-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Castoro-Semibold";
  src: url("../fonts/Castoro-Semibold.woff2") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Castoro-Italic";
  src: url("../fonts/Castoro-Italic.woff2") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.survey .sd-body .sd-checkbox.sd-item, .survey .sd-body .sd-radio {
  padding: 0;
}
.survey .sd-body .sd-item--checked.sd-checkbox.sd-item .sd-selectbase__label, .survey .sd-body .sd-item--checked.sd-radio .sd-selectbase__label {
  background-color: #0A806C;
  border-color: #0A806C;
}
.survey .sd-body .sd-item--checked.sd-checkbox.sd-item .sd-selectbase__label .sd-item__control-label, .survey .sd-body .sd-item--checked.sd-radio .sd-selectbase__label .sd-item__control-label {
  color: #fff;
}
.survey .sd-body .sd-item--checked.sd-checkbox.sd-item .sd-selectbase__label:hover, .survey .sd-body .sd-item--checked.sd-radio .sd-selectbase__label:hover {
  background-color: #0A806C;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.survey .sd-body .sd-item--checked.option-b.sd-checkbox.sd-item .sd-selectbase__label, .survey .sd-body .sd-item--checked.option-b.sd-radio .sd-selectbase__label {
  background-color: #66329b;
  border-color: #66329b;
}
.survey .sd-body .sd-item--checked.option-b.sd-checkbox.sd-item .sd-selectbase__label .sd-item__control-label, .survey .sd-body .sd-item--checked.option-b.sd-radio .sd-selectbase__label .sd-item__control-label {
  color: #fff;
}
.survey .sd-body .sd-item--checked.option-b.sd-checkbox.sd-item .sd-selectbase__label:hover, .survey .sd-body .sd-item--checked.option-b.sd-radio .sd-selectbase__label:hover {
  background-color: #66329b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.survey .sd-body .sd-checkbox.sd-item:not(.sd-item--checked) .sd-selectbase__label:hover, .survey .sd-body .sd-radio:not(.sd-item--checked) .sd-selectbase__label:hover {
  background-color: #e7f2e0;
  color: #fff;
  border-color: #ccc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.survey .sd-body .sd-checkbox.sd-item:not(.sd-item--checked).option-a .sd-selectbase__label, .survey .sd-body .sd-radio:not(.sd-item--checked).option-a .sd-selectbase__label {
  background-color: #e7f2e0;
}
.survey .sd-body .sd-checkbox.sd-item:not(.sd-item--checked).option-a .sd-selectbase__label:hover, .survey .sd-body .sd-radio:not(.sd-item--checked).option-a .sd-selectbase__label:hover {
  background-color: #f2efe6;
}
.survey .sd-body .sd-checkbox.sd-item:not(.sd-item--checked).option-b .sd-selectbase__label, .survey .sd-body .sd-radio:not(.sd-item--checked).option-b .sd-selectbase__label {
  background-color: #e8e6f2;
}
.survey .sd-body .sd-checkbox.sd-item:not(.sd-item--checked).option-b .sd-selectbase__label:hover, .survey .sd-body .sd-radio:not(.sd-item--checked).option-b .sd-selectbase__label:hover {
  background-color: #f2efe6;
}
.survey .sd-body .sd-checkbox.sd-item .sd-item__control-label, .survey .sd-body .sd-radio .sd-item__control-label {
  text-align: center;
  font-weight: normal;
  transition: color 0.3s;
  font-family: "Sailec-Bold", sans-serif;
}
.survey .sd-body .sd-checkbox.sd-item .sd-selectbase__label, .survey .sd-body .sd-radio .sd-selectbase__label {
  display: block;
  padding: 16px 24px;
  margin: 8px auto;
  width: 100%;
  background-color: #f2efe6;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s, border-color 0.3s;
}
.survey .sd-body .sd-checkbox.sd-item .sd-selectbase__label .sd-radio__decorator, .survey .sd-body .sd-radio .sd-selectbase__label .sd-radio__decorator,
.survey .sd-body .sd-checkbox.sd-item .sd-selectbase__label .sd-checkbox__decorator,
.survey .sd-body .sd-radio .sd-selectbase__label .sd-checkbox__decorator {
  display: none;
}
.survey .sd-body .sd-checkbox.sd-item .sd-selectbase__label .sd-item__control-label, .survey .sd-body .sd-radio .sd-selectbase__label .sd-item__control-label {
  color: #333;
}
.survey .sd-body .option-a.sd-checkbox.sd-item .sd-selectbase__label, .survey .sd-body .option-a.sd-radio .sd-selectbase__label, .survey .sd-body .option-b.sd-checkbox.sd-item .sd-selectbase__label, .survey .sd-body .option-b.sd-radio .sd-selectbase__label {
  max-width: 300px;
}

#surveyContainer {
  display: none;
}

.survey {
  background: #faf9f6;
  /* === Progress Bar === */
  /* === Question === */
}
.survey .sv-required {
  display: none;
}
.survey .sd-root-modern {
  background: transparent;
}
.survey .survey-intro {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}
.survey .survey-intro .quiz-intro-btn {
  font-size: 24px;
  margin: 30px 5px 40px;
}
.survey .survey-intro .small p {
  font-size: 16px;
}
.survey .sd-progress-buttons__container-center .sd-progress-buttons__container .sd-progress-buttons__list {
  justify-content: center;
}
.survey .sd-progress-buttons__container-center .sd-progress-buttons__container .sd-progress-buttons__button {
  width: 4px;
  height: 4px;
  min-width: 4px;
  min-height: 4px;
}
.survey .sd-progress-buttons__container-center .sd-progress-buttons__container .sd-progress-buttons__list-element--current .sd-progress-buttons__button {
  width: 2px;
  height: 2px;
  min-width: 2px;
  min-height: 2px;
}
.survey .sd-progress-buttons__container-center .sd-progress-buttons__container .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
  display: none;
}
.survey .sd-progress-buttons__container-center .sd-progress-buttons__footer {
  display: none;
}
.survey .sd-body {
  /* === Radio & Checkbox Buttons (shared styles) === */
  /* === Footer === */
}
.survey .sd-body.sd-body--static {
  padding-top: 0;
}
.survey .sd-body.sd-body--static .sd-question.sd-row__question {
  background: transparent;
  box-shadow: none;
}
.survey .sd-body.sd-body--static .sd-question.sd-row__question .custom-html-above,
.survey .sd-body.sd-body--static .sd-question.sd-row__question .custom-html-below {
  white-space: normal;
  text-align: center;
  color: #0A806C;
  font-size: 2rem;
  line-height: normal;
  max-width: 460px;
  margin: 0 auto;
}
.survey .sd-body.sd-body--static .sd-question.sd-row__question .custom-html-above span.statemnt,
.survey .sd-body.sd-body--static .sd-question.sd-row__question .custom-html-below span.statemnt {
  display: block;
  color: #333;
  font-size: 13px;
  margin-bottom: 1.5rem;
  font-family: "Sailec-Bold", sans-serif;
}
.survey .sd-body.sd-body--static .sd-question.sd-row__question .custom-html-above p,
.survey .sd-body.sd-body--static .sd-question.sd-row__question .custom-html-below p {
  font-family: Castoro-Semibold, serif;
  font-size: 2rem;
}
.survey .sd-body.sd-body--static .sd-question.sd-row__question .custom-html-above p::before,
.survey .sd-body.sd-body--static .sd-question.sd-row__question .custom-html-below p::before {
  content: "“";
  margin-right: 2px;
}
.survey .sd-body.sd-body--static .sd-question.sd-row__question .custom-html-above p::after,
.survey .sd-body.sd-body--static .sd-question.sd-row__question .custom-html-below p::after {
  content: "”";
  margin-left: 2px;
}
.survey .sd-body.sd-body--static .sd-question.sd-row__question .custom-html-below {
  color: #66329b;
  font-size: 2.2rem;
  max-width: 390px;
  margin: 2rem auto;
}
.survey .sd-body.sd-body--static .sd-question.sd-row__question .custom-html-below p {
  margin: 0;
}
.survey .sd-body.sd-body--static .sd-question.sd-row__question .sd-error {
  background: transparent;
  text-align: center;
  font-family: "Sailec-Regular", sans-serif;
  font-weight: normal;
  font-size: 16px;
}
.survey .sd-body .sv-title-actions,
.survey .sd-body .sd-title {
  max-width: 450px;
  text-align: center;
  margin: 0 auto;
  display: block;
  margin-bottom: 3rem;
}
.survey .sd-body .sv-title-actions .sv-string-viewer,
.survey .sd-body .sd-title .sv-string-viewer {
  font-size: 2.8rem;
  line-height: normal;
  font-family: Castoro, serif;
}
.survey .sd-body .formated-answers .sd-item__control-label {
  font-family: "Sailec-Regular", sans-serif;
}
.survey .sd-body .formated-answers .sd-item__control-label .bold {
  font-family: "Sailec-Bold", sans-serif;
}
.survey .sd-body .text-align-left .sd-item__control-label {
  text-align: left;
}
.survey .sd-body .custom-button-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  column-gap: 1rem;
  margin: auto;
}
.survey .sd-body .custom-button-layout .sd-checkbox.sd-item .sd-selectbase__label {
  padding-left: 5px;
  padding-right: 5px;
}
.survey .sd-body .sd-action-bar.sd-footer {
  justify-content: center;
  padding: 0;
  margin-top: 2rem;
}
.survey .sd-body .sd-action-bar.sd-footer .sd-navigation__next-btn,
.survey .sd-body .sd-action-bar.sd-footer .sd-navigation__prev-btn {
  background: #00c1a1;
  color: #fff;
  font-weight: normal;
  font-family: "Sailec-Bold", sans-serif;
}
.survey .sd-body .sd-action-bar.sd-footer .sd-navigation__next-btn:hover,
.survey .sd-body .sd-action-bar.sd-footer .sd-navigation__prev-btn:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.survey .sd-body .sd-action-bar.sd-footer .sd-navigation__prev-btn {
  background: #f2efe6;
  color: #333;
}

/* Position the overlay relative to the survey container */
#surveyContainer {
  position: relative;
  transition: filter 0.3s ease;
}

/* Overlay that covers just the survey */
#surveyLoadingOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none; /* lets clicks pass through unless needed */
}

/* Modal box in the center of the overlay */
#surveyLoadingOverlay .loading-modal {
  background: white;
  padding: 2rem 3rem;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-size: 20px;
  font-family: Castoro-Semibold;
  pointer-events: auto;
}

.result-page {
  background: #faf9f6;
  color: #363537;
}
.result-page .narrow-container {
  max-width: 900px;
  margin: 0 auto;
}
.result-page .header-text-container {
  margin-top: 5rem;
  text-align: center;
}
.result-page .header-text-container .alignment-score {
  font-size: 3rem;
  font-family: "Castoro-Italic";
  margin: 0;
  color: #363537;
}
.result-page .header-text-container .alignment-score span {
  font-size: 4.5rem;
  color: #966d39;
  line-height: 1.5;
}
.result-page .header-text-container .group-title {
  font-size: 6rem;
  margin: 0;
  margin-bottom: 0.5rem;
  font-family: Castoro, serif;
  text-transform: none;
  color: #363537;
}
.result-page .header-text-container .quote {
  margin: 1rem auto 2rem;
  max-width: 460px;
  line-height: 1.5;
  font-style: italic;
  font-size: 1.3rem;
  font-weight: bold;
  font-family: Georgia, "Times New Roman", Times, serif;
  text-transform: none;
}
.result-page .btn-description {
  margin: 2rem;
}
.result-page .btn-description .btn {
  padding: 15px 30px;
}
.result-page .share-results {
  text-align: center;
  margin: 5rem 0;
  font-weight: bold;
  font-family: Georgia, "Times New Roman", Times, serif;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.result-page .share-results p {
  font-size: 2.5rem;
}
.result-page .share-results .social-sharing-buttons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.result-page .share-results .social-sharing-buttons .btn-twitter, .result-page .share-results .social-sharing-buttons .btn-facebook, .result-page .share-results .social-sharing-buttons .btn-copy-url {
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 35px 35px;
  border: none;
  width: 150px;
}
.result-page .share-results .social-sharing-buttons .btn-facebook {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>');
}
.result-page .share-results .social-sharing-buttons .btn-twitter {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.8 90.7 226.4 209.3 245V327.7h-63V256h63v-54.6c0-62.2 37-96.5 93.7-96.5 27.1 0 55.5 4.8 55.5 4.8v61h-31.3c-30.8 0-40.4 19.1-40.4 38.7V256h68.8l-11 71.7h-57.8V501C413.3 482.4 504 379.8 504 256z"/></svg>');
}
.result-page .btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.result-page .btn.btn-success {
  background: #00c1a1;
  color: #fff;
}
.result-page .btn.btn-success:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.result-page .footer-btns-wrapper {
  margin-bottom: 10rem;
  text-align: center;
}
.result-page .footer-btns-wrapper .btn {
  width: 48px;
  height: 48px;
  width: 150px;
}
.result-page .block {
  margin: 5.5rem 0;
}
.result-page .block .result-block-title {
  font-size: 4.5rem;
  font-family: "Castoro-Italic";
  margin-bottom: 3rem;
  text-align: center;
  text-transform: none;
}
.result-page .block.result-image-block img {
  max-width: 100%;
}
.result-page .block.result-image-block .block-text {
  margin: 3rem 0;
}
.result-page .block.result-text-block .narrow-container .text {
  max-width: 730px;
  margin: 0 auto;
}
.result-page .block.result-text-block .expandable-wrapper {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease;
}
.result-page .block.result-text-block .btn-description {
  text-align: center;
  margin-top: 1rem;
}
.result-page .block.result-stat-quote-block .stat-box {
  margin: 2rem 0;
}
.result-page .block.result-stat-quote-block .stat-box .left {
  text-align: left;
  font-family: Castoro-Italic;
}
.result-page .block.result-stat-quote-block .stat-box .left h2 {
  margin-bottom: 0;
  color: #363537;
  font-size: 7rem;
  line-height: 1;
  font-family: Castoro-Italic;
}
.result-page .block.result-stat-quote-block .narrow-container .stat-box {
  margin: 0 auto;
  max-width: 760px;
}
.result-page .block.result-stat-quote-block .quote {
  margin-bottom: 2rem;
  text-transform: none;
  font-family: Castoro, serif;
  font-size: 1.6rem;
  text-align: start;
}
.result-page .block.result-stat-quote-block .quote-author {
  margin-bottom: 0;
  font-weight: bold;
  text-align: start;
  font-size: 1.4rem;
}
.result-page .block.result-segments-block .segments-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.result-page .block.result-segments-block .segments-wrapper .segment-card-wrapper {
  margin-bottom: 3rem;
  text-decoration: none;
}
.result-page .block.result-segments-block .segments-wrapper .segment-card-wrapper .segment-card-img {
  width: 100%;
  object-fit: cover;
}
.result-page .block.result-segments-block .segments-wrapper .segment-card-wrapper .segment-card-body {
  padding: 1.5rem 0;
  gap: 2rem;
  /*.segment-card-percent {
  font-family: Castoro-Italic;
  text-decoration: unset;
  font-size: 3rem;
  line-height: 1.2;
  color: $gold;
  }*/
}
.result-page .block.result-segments-block .segments-wrapper .segment-card-wrapper .segment-card-body .segment-card-title {
  margin: 0;
  text-decoration: underline;
  font-family: Castoro;
  color: #5b5b5a;
  font-size: 2.5rem;
  text-align: center;
}

.custom-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background-color: #00c1a1;
  color: #fff;
  padding: 1rem 2.5rem;
  border-radius: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  z-index: 999999;
}

.custom-toast.show {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .result-page .header-text-container .group-title {
    font-size: 4rem;
  }
  .result-page .header-text-container .alignment-score {
    font-size: 2rem;
  }
  .result-page .header-text-container .alignment-score span {
    font-size: 3.5rem;
  }
  .survey .survey-intro .quiz-intro-btn {
    font-size: 22px;
  }
  .survey .survey-intro .small p {
    font-size: 14px;
  }
}
