/*!
 * Bootstrap  v5.3.7 (https://getbootstrap.com/)
 * Copyright 2011-2025 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

#poop-translator-quiz[data-quiz-step=result] .poop-translator-quiz-stepper-header {
  display: none !important;
}

#poop-translator-quiz[data-quiz-step=loading] .poop-translator-quiz-content {
  min-height: 100vh;
}

#poop-translator-quiz .modal .btn-close {
  --bs-btn-close-bg: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 1.33337L1.33337 12M12 12L1.33337 1.33337' stroke='%23003DA6' stroke-width='2.66667' stroke-linecap='round'/></svg>");
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  background-size: 12px 12px !important;
  /* Optional: Adjust opacity since Bootstrap defaults it to 0.5 */
  opacity: 1;
}

#poop-translator-quiz .modal #compare-sketch-preview svg {
  height: 100%;
}

#poop-translator-quiz .poop-quiz-gradient-bg {
  
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .6) 100%), url("./images/quiz-grid-bg.png");
  background-blend-mode: normal;
}

[dir="rtl"] #poop-translator-quiz .poop-quiz-gradient-bg {
  
  background: linear-gradient(-180deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .6) 100%), url("./images/quiz-grid-bg.png");
}

[dir] #poop-translator-quiz .poop-quiz-gradient-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: lightgray;
}

#poop-translator-quiz #poopComparePhotoModal .poop-quiz-gradient-bg {
  
  background-image: url("./images/toilet-bowl.png"), linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .6) 100%), url("./images/quiz-grid-bg.png") !important;
  background-size: auto 150%, cover, cover !important;
  
  background-position: right -25px center, center center, center center !important;
}

[dir="rtl"] #poop-translator-quiz #poopComparePhotoModal .poop-quiz-gradient-bg {
  
  background-image: url("./images/toilet-bowl.png"), linear-gradient(-180deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .6) 100%), url("./images/quiz-grid-bg.png") !important;
  
  background-position: left -25px center, center center, center center !important;
}

#poop-translator-quiz .text-primary {
  color: #003da6 !important;
}

#poop-translator-quiz .stepper-active-gold {
  
  background: linear-gradient(153deg, #fbf0b9 0%, #efc65b 32%, #fefacb 75%, #f9d371 99%);
}

[dir="rtl"] #poop-translator-quiz .stepper-active-gold {
  
  background: linear-gradient(-153deg, #fbf0b9 0%, #efc65b 32%, #fefacb 75%, #f9d371 99%);
}

#poop-translator-quiz .stepper-item {
  flex-basis: 33.33%;
}

#poop-translator-quiz .stepper-line {
  top: 20%;
}

#poop-translator-quiz .quiz-potty-visual {
  position: relative;
  overflow: hidden;
  transition: background .3s ease;
}

#poop-translator-quiz .quiz-potty-visual .toilet-bowl-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#poop-translator-quiz .quiz-potty-visual .toilet-bowl-bg svg {
  width: 100%;
  height: 100%;
}

#poop-translator-quiz .quiz-potty-visual .poop-sketch-overlay {
  position: relative;
  z-index: 2;
  width: 180px;
  height: 180px;
  transition: transform .4s ease-in-out, opacity .4s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

#poop-translator-quiz .quiz-potty-visual .poop-sketch-overlay img,
#poop-translator-quiz .quiz-potty-visual .poop-sketch-overlay svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#poop-translator-quiz .freq-swiper-container {
  width: 100%;
}

#poop-translator-quiz .freq-swiper-container .freq-swiper-track {
  position: absolute;
  top: 50%;
  width: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 8px;
  background: #025ac1;
  border-radius: 10px;
  transform: translateY(-50%);
  box-shadow: 0 2px 8px 0 rgba(7, 29, 76, .4), 0 0 10px rgba(64, 176, 240, .6);
  pointer-events: none;
}

#poop-translator-quiz .freq-swiper-container .swiper {
  width: 100%;
  padding: 16px 0;
  z-index: auto !important;
  overflow: visible !important;
}

#poop-translator-quiz .freq-swiper-container .swiper .swiper-wrapper {
  z-index: auto !important;
}

#poop-translator-quiz .freq-swiper-container .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#poop-translator-quiz .freq-swiper-container .swiper-slide:nth-child(1) .freq-dot-2a,
#poop-translator-quiz .freq-swiper-container .swiper-slide:nth-child(1) .freq-dot-2b {
  
  left: -45%;
}

[dir="rtl"] #poop-translator-quiz .freq-swiper-container .swiper-slide:nth-child(1) .freq-dot-2a,
[dir="rtl"] #poop-translator-quiz .freq-swiper-container .swiper-slide:nth-child(1) .freq-dot-2b {
  left: auto;
  
  right: -45%;
}

#poop-translator-quiz .freq-swiper-container .swiper-slide:nth-child(2) .freq-dot-2a,
#poop-translator-quiz .freq-swiper-container .swiper-slide:nth-child(2) .freq-dot-2b {
  
  left: -16.666%;
}

[dir="rtl"] #poop-translator-quiz .freq-swiper-container .swiper-slide:nth-child(2) .freq-dot-2a,
[dir="rtl"] #poop-translator-quiz .freq-swiper-container .swiper-slide:nth-child(2) .freq-dot-2b {
  left: auto;
  
  right: -16.666%;
}

#poop-translator-quiz .freq-swiper-container .swiper-slide:nth-child(3) .freq-dot-2a,
#poop-translator-quiz .freq-swiper-container .swiper-slide:nth-child(3) .freq-dot-2b {
  
  left: 16.666%;
}

[dir="rtl"] #poop-translator-quiz .freq-swiper-container .swiper-slide:nth-child(3) .freq-dot-2a,
[dir="rtl"] #poop-translator-quiz .freq-swiper-container .swiper-slide:nth-child(3) .freq-dot-2b {
  left: auto;
  
  right: 16.666%;
}

#poop-translator-quiz .freq-swiper-container .swiper-slide:nth-child(4) .freq-dot-2a,
#poop-translator-quiz .freq-swiper-container .swiper-slide:nth-child(4) .freq-dot-2b {
  
  left: 45%;
}

[dir="rtl"] #poop-translator-quiz .freq-swiper-container .swiper-slide:nth-child(4) .freq-dot-2a,
[dir="rtl"] #poop-translator-quiz .freq-swiper-container .swiper-slide:nth-child(4) .freq-dot-2b {
  left: auto;
  
  right: 45%;
}

#poop-translator-quiz .freq-swiper-container .freq-dot,
#poop-translator-quiz .freq-swiper-container .freq-dot-2a,
#poop-translator-quiz .freq-swiper-container .freq-dot-2b {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  z-index: 3;
}

#poop-translator-quiz .freq-swiper-container .freq-dot.active,
#poop-translator-quiz .freq-swiper-container .freq-dot-2a.active,
#poop-translator-quiz .freq-swiper-container .freq-dot-2b.active {
  width: 20px;
  height: 20px;
  
  background: linear-gradient(153deg, #fbf0b9 0%, #efc65b 32%, #fefacb 75%, #f9d371 99%);
  outline: 8px solid rgba(64, 176, 240, .6);
}

[dir="rtl"] #poop-translator-quiz .freq-swiper-container .freq-dot.active,
[dir="rtl"] #poop-translator-quiz .freq-swiper-container .freq-dot-2a.active,
[dir="rtl"] #poop-translator-quiz .freq-swiper-container .freq-dot-2b.active {
  
  background: linear-gradient(-153deg, #fbf0b9 0%, #efc65b 32%, #fefacb 75%, #f9d371 99%);
}

#poop-translator-quiz .freq-swiper-container .freq-dot.active::before,
#poop-translator-quiz .freq-swiper-container .freq-dot-2a.active::before,
#poop-translator-quiz .freq-swiper-container .freq-dot-2b.active::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  box-shadow: 0 2px 8px 0 rgba(7, 29, 76, .6);
  z-index: -1;
  pointer-events: none;
}

#poop-translator-quiz .shape-swiper-container {
  width: 100%;
}

#poop-translator-quiz .shape-swiper-container .shape-swiper-track {
  position: absolute;
  top: 37%;
  width: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 8px;
  background: #025ac1;
  border-radius: 10px;
  transform: translateY(-50%);
  box-shadow: 0 2px 8px 0 rgba(7, 29, 76, .4), 0 0 10px rgba(64, 176, 240, .6);
  pointer-events: none;
}

#poop-translator-quiz .shape-swiper-container .swiper {
  width: 100%;
  padding: 16px 0;
  z-index: auto !important;
  overflow: visible;
}

#poop-translator-quiz .shape-swiper-container .swiper .swiper-wrapper {
  z-index: auto !important;
}

#poop-translator-quiz .shape-swiper-container .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#poop-translator-quiz .shape-swiper-container .swiper-slide:nth-child(1) .shape-dot {
  
  left: -40%;
}

[dir="rtl"] #poop-translator-quiz .shape-swiper-container .swiper-slide:nth-child(1) .shape-dot {
  left: auto;
  
  right: -40%;
}

#poop-translator-quiz .shape-swiper-container .swiper-slide:nth-child(2) .shape-dot {
  
  left: -33.333%;
}

[dir="rtl"] #poop-translator-quiz .shape-swiper-container .swiper-slide:nth-child(2) .shape-dot {
  left: auto;
  
  right: -33.333%;
}

#poop-translator-quiz .shape-swiper-container .swiper-slide:nth-child(3) .shape-dot {
  
  left: -16.667%;
}

[dir="rtl"] #poop-translator-quiz .shape-swiper-container .swiper-slide:nth-child(3) .shape-dot {
  left: auto;
  
  right: -16.667%;
}

#poop-translator-quiz .shape-swiper-container .swiper-slide:nth-child(4) .shape-dot {
  
  left: 0;
}

[dir="rtl"] #poop-translator-quiz .shape-swiper-container .swiper-slide:nth-child(4) .shape-dot {
  left: auto;
  
  right: 0;
}

#poop-translator-quiz .shape-swiper-container .swiper-slide:nth-child(5) .shape-dot {
  
  left: 16.667%;
}

[dir="rtl"] #poop-translator-quiz .shape-swiper-container .swiper-slide:nth-child(5) .shape-dot {
  left: auto;
  
  right: 16.667%;
}

#poop-translator-quiz .shape-swiper-container .swiper-slide:nth-child(6) .shape-dot {
  
  left: 33.333%;
}

[dir="rtl"] #poop-translator-quiz .shape-swiper-container .swiper-slide:nth-child(6) .shape-dot {
  left: auto;
  
  right: 33.333%;
}

#poop-translator-quiz .shape-swiper-container .swiper-slide:nth-child(7) .shape-dot {
  
  left: 40%;
}

[dir="rtl"] #poop-translator-quiz .shape-swiper-container .swiper-slide:nth-child(7) .shape-dot {
  left: auto;
  
  right: 40%;
}

#poop-translator-quiz .shape-swiper-container .shape-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  z-index: 3;
}

#poop-translator-quiz .shape-swiper-container .shape-dot.active {
  width: 20px;
  height: 20px;
  
  background: linear-gradient(153deg, #fbf0b9 0%, #efc65b 32%, #fefacb 75%, #f9d371 99%);
  outline: 8px solid rgba(64, 176, 240, .6);
}

[dir="rtl"] #poop-translator-quiz .shape-swiper-container .shape-dot.active {
  
  background: linear-gradient(-153deg, #fbf0b9 0%, #efc65b 32%, #fefacb 75%, #f9d371 99%);
}

#poop-translator-quiz .shape-swiper-container .shape-dot.active::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  box-shadow: 0 2px 8px 0 rgba(7, 29, 76, .6);
  z-index: -1;
  pointer-events: none;
}

#poop-translator-quiz .poop-flush-animation {
  animation: poop-flush .8s ease-in-out;
}

@keyframes poop-flush {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }

  50% {
    transform: scale(0) rotate(720deg);
    opacity: 0;
  }

  51% {
    transform: scale(0) rotate(-720deg);
    opacity: 0;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

#poop-translator-quiz .freq-image {
  display: flex;
  justify-content: center;
}

#poop-translator-quiz .freq-image img {
  max-height: 150px;
}

#poop-translator-quiz .color-swiper-container {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

#poop-translator-quiz .color-swiper-container .swiper {
  padding: 15px 0 15px;
}

#poop-translator-quiz .color-swiper-container .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto !important;
}

#poop-translator-quiz .color-swiper-container .swiper-pagination-bullet {
  background: rgba(255, 255, 255, .5);
  opacity: 1;
}

#poop-translator-quiz .color-swiper-container .swiper-pagination-bullet-active {
  background: #ffbb51;
}

#poop-translator-quiz .color-option {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer;
  z-index: 1;
}

#poop-translator-quiz .color-option.active::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  box-shadow: 0 2px 8px 0 rgba(7, 29, 76, .6);
  z-index: -1;
  pointer-events: none;
}

#poop-translator-quiz .color-change-animation {
  animation: color-pulse .5s ease;
}

@keyframes color-pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}

#poop-translator-quiz .warning-option {
  position: relative;
  transition: all .2s ease;
  border: none !important;
  background-color: rgba(219, 237, 255, .7490196078) !important;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 1;
}

#poop-translator-quiz .warning-option::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  
  background: linear-gradient(180deg, #64c6f6 0%, #c2f4f8 50%, #64c6f6 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
  transition: background .2s ease;
}

[dir="rtl"] #poop-translator-quiz .warning-option::before {
  
  background: linear-gradient(-180deg, #64c6f6 0%, #c2f4f8 50%, #64c6f6 100%);
}

#poop-translator-quiz .warning-option .custom-radio-box {
  background-color: #fff;
  color: #003da6;
  transition: all .2s ease;
}

#poop-translator-quiz .warning-option .warning-option-text {
  color: #003da6;
  transition: color .2s ease;
}

#poop-translator-quiz .warning-option.active, #poop-translator-quiz .warning-option:has(input:checked) {
  background-color: #003da6 !important;
}

#poop-translator-quiz .warning-option.active .custom-radio-box, #poop-translator-quiz .warning-option:has(input:checked) .custom-radio-box {
  
  background: linear-gradient(153deg, #fbf0b9 0%, #efc65b 32%, #fefacb 75%, #f9d371 99%);
  color: #003da6;
}

[dir="rtl"] #poop-translator-quiz .warning-option.active .custom-radio-box, [dir="rtl"] #poop-translator-quiz .warning-option:has(input:checked) .custom-radio-box {
  
  background: linear-gradient(-153deg, #fbf0b9 0%, #efc65b 32%, #fefacb 75%, #f9d371 99%);
}

#poop-translator-quiz .warning-option.active .warning-option-text, #poop-translator-quiz .warning-option:has(input:checked) .warning-option-text {
  color: #fff;
}

#poop-translator-quiz .custom-checklist-item {
  transition: all .2s ease;
}

#poop-translator-quiz .custom-checklist-item .custom-checkbox-box {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #ced4da;
  background: #fffffc;
  transition: all .2s ease;
}

#poop-translator-quiz .custom-checklist-item .custom-checkbox-box .checkmark-icon {
  opacity: 0;
  transform: scale(.5);
  transition: all .2s ease;
}

#poop-translator-quiz .custom-checklist-item .checklist-text {
  font-size: 14px;
  transition: all .2s ease;
}

#poop-translator-quiz .custom-checklist-item .custom-checkbox-input:checked ~ .custom-checkbox-box {
  
  background: linear-gradient(153deg, #fbf0b9 0%, #efc65b 26.67%, #fefacb 62.5%, #f9d371 82.5%);
  border-color: transparent;
}

[dir="rtl"] #poop-translator-quiz .custom-checklist-item .custom-checkbox-input:checked ~ .custom-checkbox-box {
  
  background: linear-gradient(-153deg, #fbf0b9 0%, #efc65b 26.67%, #fefacb 62.5%, #f9d371 82.5%);
}

#poop-translator-quiz .custom-checklist-item .custom-checkbox-input:checked ~ .custom-checkbox-box .checkmark-icon {
  opacity: 1;
  transform: scale(1);
}

#poop-translator-quiz .custom-checklist-item .custom-checkbox-input:checked ~ .checklist-text {
  text-decoration: line-through;
}

#poop-translator-quiz .poop-faq-search .input-group-text {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#poop-translator-quiz .poop-faq-search input::placeholder {
  color: #003da6;
  opacity: 1;
}

#poop-translator-quiz .tahukah-ibu-card {
  position: relative;
  background-color: rgba(255, 255, 252, .5);
  z-index: 1;
}

#poop-translator-quiz .tahukah-ibu-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  z-index: -1;
  pointer-events: none;
}

#poop-translator-quiz .sudah-teruji-card {
  position: relative;
  background-color: rgba(255, 255, 255, .5);
  z-index: 1;
}

#poop-translator-quiz .sudah-teruji-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  
  background: linear-gradient(170deg, #fff 0%, #004da9 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}

[dir="rtl"] #poop-translator-quiz .sudah-teruji-card::before {
  
  background: linear-gradient(-170deg, #fff 0%, #004da9 100%);
}

#poop-translator-quiz #step-result {
  background: url("./images/result-light-banner.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

#poop-translator-quiz .result-hero-banner-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  z-index: 1;
  max-height: 225px;
}

#poop-translator-quiz .lg-product-section {
  border-radius: 24px 24px 0 0;
  
  background: linear-gradient(180deg, #fffffc 0%, var(--colors-blue-blue-100, #dbedff) 100%);
}

[dir="rtl"] #poop-translator-quiz .lg-product-section {
  
  background: linear-gradient(-180deg, #fffffc 0%, var(--colors-blue-blue-100, #dbedff) 100%);
}

#poop-translator-quiz .poop-quiz-confirm-bg {
  
  background: linear-gradient(180deg, #fff 0%, #dbedff 100%) !important;
}

[dir="rtl"] #poop-translator-quiz .poop-quiz-confirm-bg {
  
  background: linear-gradient(-180deg, #fff 0%, #dbedff 100%) !important;
}