/* =====================================================
   JUDY MARKETING - SMART STORE QUIZ
   CSS ONLY
===================================================== */

#judy-smart-quiz,
#judy-smart-quiz * {
  box-sizing: border-box;
}

#judy-smart-quiz {
  --jq-primary: #5f63f2;
  --jq-primary-dark: #4d45d8;
  --jq-primary-light: #eef0ff;
  --jq-secondary: #6bbef2;
  --jq-text: #1f2850;
  --jq-muted: #66708c;
  --jq-border: #e5e8f5;
  --jq-surface: #f8faff;

  font-family: "Cairo", sans-serif;
  direction: rtl;
}

/* =========================
   LAUNCHER
========================= */

.jq-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999999;

  display: flex;
  align-items: center;
  gap: 10px;

  min-width: 255px;
  padding: 7px 10px 7px 8px;

  border: 1px solid rgba(95, 99, 242, .16);
  border-radius: 999px;

  background: rgba(255, 255, 255, .97);
  color: var(--jq-text);

  font-family: inherit;
  cursor: pointer;

  box-shadow: 0 12px 35px rgba(50, 58, 130, .18);

  backdrop-filter: blur(14px);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;

  animation: jq-float 3.2s ease-in-out infinite;
}

.jq-launcher:hover {
  transform: translateY(-4px);

  border-color: rgba(95, 99, 242, .35);

  box-shadow: 0 18px 42px rgba(50, 58, 130, .24);

  animation-play-state: paused;
}

.jq-launcher-avatar {
  width: 58px;
  height: 58px;

  flex: 0 0 58px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border: 3px solid #fff;
  border-radius: 50%;

  background: linear-gradient(
    135deg,
    var(--jq-primary),
    var(--jq-secondary)
  );

  box-shadow: 0 4px 15px rgba(95, 99, 242, .28);
}

.jq-launcher-avatar img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  padding: 4px;

  background: #fff;
}

.jq-launcher-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  flex: 1;

  text-align: right;
}

.jq-launcher-copy strong {
  color: var(--jq-text);

  font-size: 13px;
  line-height: 1.5;
}

.jq-launcher-copy small {
  margin-top: 1px;

  color: var(--jq-muted);

  font-size: 9px;
  line-height: 1.5;
}

.jq-launcher-arrow {
  width: 31px;
  height: 31px;

  flex: 0 0 31px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--jq-primary-light);
  color: var(--jq-primary);

  font-size: 17px;

  transition: .25s ease;
}

.jq-launcher:hover .jq-launcher-arrow {
  background: var(--jq-primary);
  color: #fff;

  transform: translateX(-3px);
}

@keyframes jq-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}


/* =========================
   OVERLAY
========================= */

.jq-overlay {
  position: fixed;
  inset: 0;

  z-index: 1000000;

  background: rgba(22, 27, 58, .56);

  backdrop-filter: blur(5px);
}


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

.jq-modal {
  position: fixed;

  top: 50%;
  left: 50%;

  z-index: 1000001;

  width: min(92vw, 470px);
  max-height: 92vh;

  overflow-y: auto;

  transform: translate(-50%, -50%);

  padding: 22px 22px 15px;

  border: 1px solid rgba(255,255,255,.7);

  border-radius: 26px;

  background: rgba(255,255,255,.98);

  color: var(--jq-text);

  box-shadow:
    0 24px 70px rgba(45,52,120,.22);
}


/* =========================
   CLOSE
========================= */

.jq-close {
  position: absolute;

  top: 13px;
  left: 14px;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border: 1px solid #e7e9f4;
  border-radius: 50%;

  background: #f8f9ff;
  color: #68718b;

  font-size: 15px;

  cursor: pointer;

  transition: .2s ease;
}

.jq-close:hover {
  background: var(--jq-primary);
  border-color: var(--jq-primary);
  color: #fff;

  transform: rotate(8deg);
}


/* =========================
   BRAND
========================= */

.jq-brand {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  margin: 3px 0 17px;

  color: var(--jq-primary);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 1.3px;
}

.jq-brand-mark {
  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border: 1.5px solid var(--jq-primary);
  border-radius: 50%;

  background: var(--jq-primary-light);
}

.jq-brand-mark img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  padding: 3px;
}


/* =========================
   PROGRESS
========================= */

.jq-progress {
  height: 5px;

  margin: 0 3px 27px;

  overflow: hidden;

  border-radius: 999px;

  background: #edf0fa;
}

.jq-progress span {
  display: block;

  width: 0;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--jq-secondary),
      var(--jq-primary)
    );

  transition: width .35s ease;
}


/* =========================
   CONTENT
========================= */

.jq-content {
  padding: 0 7px;

  text-align: center;
}

.jq-step {
  display: none;
}

.jq-step.active {
  display: block;

  animation: jq-in .3s ease;
}

@keyframes jq-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* =========================
   INTRO ICON
========================= */

.jq-avatar {
  width: 105px;
  height: 105px;

  margin: 0 auto 5px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border: 1px solid #dfe3ff;
  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--jq-primary-light),
      #eef9ff
    );

  box-shadow:
    0 8px 25px rgba(95,99,242,.1);
}

.jq-avatar img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  padding: 6px;
}


/* =========================
   TYPOGRAPHY
========================= */

.jq-kicker {
  margin: 0 0 7px;

  color: var(--jq-primary);

  font-size: 11px;
  font-weight: 800;
}

.jq-content h2 {
  margin: 0 0 9px;

  color: var(--jq-text);

  font-size: 24px;
  font-weight: 800;

  line-height: 1.5;
}

.jq-content p {
  max-width: 350px;

  margin: 0 auto 20px;

  color: var(--jq-muted);

  font-size: 13px;
  line-height: 1.9;
}

.jq-question-help {
  margin-bottom: 13px !important;

  color: #8991a8 !important;

  font-size: 12px !important;
}

.jq-intro-small {
  display: block;

  margin-top: 11px;

  color: #9aa1b5;

  font-size: 10px;
}


/* =========================
   START BUTTON
========================= */

.jq-primary {
  width: 100%;
  min-height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 12px 18px;

  border: 0;
  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      #748dff,
      var(--jq-primary)
    );

  color: #fff;

  font-family: inherit;

  font-size: 13px;
  font-weight: 800;

  text-decoration: none;

  cursor: pointer;

  box-shadow:
    0 10px 25px rgba(95,99,242,.2);

  transition: .25s ease;
}

.jq-primary:hover {
  transform: translateY(-2px);

  background:
    linear-gradient(
      135deg,
      var(--jq-primary),
      var(--jq-primary-dark)
    );

  box-shadow:
    0 15px 30px rgba(95,99,242,.27);
}

.jq-primary span {
  font-size: 19px;
}


/* =========================
   OPTIONS
========================= */

.jq-options {
  display: grid;

  gap: 9px;

  margin-top: 15px;
}

.jq-option {
  width: 100%;

  padding: 13px 14px;

  border: 1px solid var(--jq-border);
  border-radius: 13px;

  background: #fff;

  color: #46506e;

  font-family: inherit;

  font-size: 15px;
  font-weight: 600;

  text-align: right;

  cursor: pointer;

  transition: .22s ease;
}

.jq-option:hover {
  border-color: rgba(95,99,242,.45);

  background: var(--jq-primary-light);

  color: var(--jq-primary-dark);

  transform: translateX(-3px);

  box-shadow:
    0 7px 20px rgba(95,99,242,.08);
}


/* =========================
   RESULT
========================= */

.jq-result-icon {
  width: 55px;
  height: 55px;

  margin: 0 auto 13px;

  display: grid;
  place-items: center;

  border: 1px solid #dfe3ff;
  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #eef0ff,
      #edfaff
    );

  color: var(--jq-primary);

  font-size: 23px;
}

.jq-result-title {
  font-size: 21px !important;
}

.jq-result-description {
  margin-bottom: 12px !important;

  font-size: 12px !important;
}


/* =========================
   MAIN PRODUCT
========================= */

.jq-product {
  margin: 13px 0;

  padding: 12px;

  border: 1px solid #e7e9f5;
  border-radius: 15px;

  background: #fff;

  text-align: right;

  box-shadow:
    0 6px 20px rgba(45,52,120,.04);
}

.jq-product-image {
  width: 100%;
  height: 165px;

  overflow: hidden;

  margin-bottom: 10px;

  border-radius: 12px;

  background: #f7f8fc;
}

.jq-product-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;
}

.jq-product-badge {
  display: inline-block;

  margin-bottom: 5px;

  padding: 4px 9px;

  border-radius: 20px;

  background: var(--jq-primary-light);

  color: var(--jq-primary);

  font-size: 9px;
  font-weight: 800;
}

.jq-product-title {
  margin: 0 0 5px;

  color: var(--jq-text);

  font-size: 15px;
  font-weight: 800;

  line-height: 1.7;
}

.jq-product-text {
  margin: 0 0 12px !important;

  color: var(--jq-muted) !important;

  font-size: 11px !important;

  line-height: 1.8 !important;

  text-align: right;
}

.jq-product-link {
  width: 100%;
  min-height: 43px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 10px;

  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      #748dff,
      var(--jq-primary)
    );

  color: #fff !important;

  font-size: 12px;
  font-weight: 800;

  text-decoration: none !important;

  transition: .25s ease;
}

.jq-product-link:hover {
  transform: translateY(-2px);

  background:
    linear-gradient(
      135deg,
      var(--jq-primary),
      var(--jq-primary-dark)
    );
}

.jq-product-link span {
  font-size: 17px;
}


/* =========================
   SECONDARY PRODUCTS
========================= */

.jq-more {
  margin-top: 12px;

  text-align: right;
}

.jq-more-title {
  margin: 0 0 8px;

  color: var(--jq-text);

  font-size: 11px;
  font-weight: 800;
}

.jq-more-item {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 7px;

  padding: 7px;

  border: 1px solid #edf0f7;
  border-radius: 11px;

  background: #fafbff;

  text-decoration: none !important;

  transition: .2s ease;
}

.jq-more-item:hover {
  border-color: rgba(95,99,242,.3);

  background: var(--jq-primary-light);

  transform: translateX(-2px);
}

.jq-more-item img {
  width: 48px;
  height: 48px;

  flex: 0 0 48px;

  object-fit: contain;

  border-radius: 8px;

  background: #fff;
}

.jq-more-info {
  min-width: 0;

  flex: 1;
}

.jq-more-info strong {
  display: block;

  color: var(--jq-text);

  font-size: 10px;

  line-height: 1.6;
}

.jq-more-info small {
  display: block;

  margin-top: 2px;

  color: var(--jq-primary);

  font-size: 9px;
}

.jq-more-arrow {
  color: var(--jq-primary);

  font-size: 15px;
}


/* =========================
   SUMMARY
========================= */

.jq-summary {
  margin: 12px 0 14px;

  padding: 10px 13px;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      #f5f4ff,
      #f2faff
    );

  color: #68718b;

  font-size: 11px;

  line-height: 1.9;

  text-align: right;
}

.jq-summary strong {
  color: var(--jq-text);
}


/* =========================
   WHATSAPP
========================= */

.jq-whatsapp {
  background:
    linear-gradient(
      135deg,
      #35d978,
      #20b85c
    );
}

.jq-whatsapp:hover {
  background:
    linear-gradient(
      135deg,
      #20b85c,
      #15984b
    );
}


/* =========================
   RESTART
========================= */

.jq-restart {
  display: block;

  margin: 12px auto 0;

  padding: 4px;

  border: 0;

  background: none;

  color: #9299ab;

  font-family: inherit;

  font-size: 11px;

  cursor: pointer;
}

.jq-restart:hover {
  color: var(--jq-primary);
}


/* =========================
   FOOTER
========================= */

.jq-footer {
  margin-top: 20px;

  padding-top: 12px;

  border-top: 1px solid #edf0f7;

  color: #9aa1b5;

  font-size: 9px;

  text-align: center;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 560px) {

  .jq-launcher {
    right: 14px;
    bottom: 14px;

    min-width: 0;

    max-width: calc(100vw - 28px);

    padding: 6px 8px 6px 7px;
  }

  .jq-launcher-avatar {
    width: 43px;
    height: 43px;

    flex-basis: 43px;
  }

  .jq-launcher-copy strong {
    font-size: 12px;
  }

  .jq-launcher-copy small {
    font-size: 8px;
  }

  .jq-modal {
    width: calc(100vw - 24px);

    max-height: 90vh;

    padding: 19px 15px 13px;

    border-radius: 22px;
  }

  .jq-content {
    padding: 0 4px;
  }

  .jq-content h2 {
    font-size: 21px;
  }

  .jq-option {
    padding: 12px;

    font-size: 12px;
  }

  .jq-product-image {
    height: 140px;
  }

}

@media (max-width: 360px) {

  .jq-launcher-copy small {
    display: none;
  }

}
/* =====================================================
   DESKTOP - LARGER & 2 COLUMNS
===================================================== */

@media (min-width: 769px) {

  /* Bigger modal */
  #judy-smart-quiz .jq-modal {
    width: min(94vw, 720px);
    max-height: 90vh;

    padding: 30px 34px 18px;

    border-radius: 30px;
  }


  /* Bigger brand */
  #judy-smart-quiz .jq-brand {
    margin-bottom: 20px;

    font-size: 13px;
  }

  #judy-smart-quiz .jq-brand-mark {
    width: 32px;
    height: 32px;
  }


  /* Bigger content */
  #judy-smart-quiz .jq-content {
    padding: 0 10px;
  }


  /* Bigger headings */
  #judy-smart-quiz .jq-content h2 {
    font-size: 29px;
    line-height: 1.5;

    margin-bottom: 10px;
  }


  /* Bigger paragraphs */
  #judy-smart-quiz .jq-content p {
    max-width: 500px;

    font-size: 15px;
    line-height: 2;

    margin-bottom: 24px;
  }


  #judy-smart-quiz .jq-kicker {
    font-size: 13px;
  }


  #judy-smart-quiz .jq-question-help {
    font-size: 14px !important;
  }


  /* Bigger options + TWO COLUMNS */
  #judy-smart-quiz .jq-options {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 13px;

    margin-top: 20px;
  }


  #judy-smart-quiz .jq-option {
    min-height: 65px;

    display: flex;
    align-items: center;

    padding: 16px 18px;

    border-radius: 15px;

    font-size: 15px;
    line-height: 1.8;
  }


  /* Bigger intro avatar */
  #judy-smart-quiz .jq-avatar {
    width: 125px;
    height: 125px;

    margin-bottom: 10px;
  }


  /* Bigger start button */
  #judy-smart-quiz .jq-primary {
    min-height: 54px;

    padding: 14px 22px;

    border-radius: 15px;

    font-size: 15px;
  }


  #judy-smart-quiz .jq-primary span {
    font-size: 21px;
  }


  /* Bigger intro small text */
  #judy-smart-quiz .jq-intro-small {
    font-size: 11px;
  }


  /* Result */
  #judy-smart-quiz .jq-result-title {
    font-size: 25px !important;
  }


  #judy-smart-quiz .jq-result-description {
    max-width: 560px !important;

    font-size: 14px !important;
  }


  /* Product */
  #judy-smart-quiz .jq-product {
    margin: 18px 0;

    padding: 16px;

    border-radius: 17px;
  }


  #judy-smart-quiz .jq-product-image {
    height: 220px;

    border-radius: 14px;
  }


  #judy-smart-quiz .jq-product-title {
    font-size: 18px;

    line-height: 1.7;
  }


  #judy-smart-quiz .jq-product-text {
    font-size: 13px !important;

    line-height: 1.9 !important;
  }


  #judy-smart-quiz .jq-product-badge {
    font-size: 10px;

    padding: 5px 11px;
  }


  #judy-smart-quiz .jq-product-link {
    min-height: 49px;

    font-size: 14px;
  }


  /* Secondary products - TWO COLUMNS */
  #judy-smart-quiz .jq-more {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 9px;

    margin-top: 15px;
  }


  #judy-smart-quiz .jq-more-title {
    grid-column: 1 / -1;

    font-size: 13px;

    margin-bottom: 2px;
  }


  #judy-smart-quiz .jq-more-item {
    margin-bottom: 0;

    min-height: 65px;

    padding: 8px 10px;

    border-radius: 13px;
  }


  #judy-smart-quiz .jq-more-item img {
    width: 55px;
    height: 55px;

    flex-basis: 55px;
  }


  #judy-smart-quiz .jq-more-info strong {
    font-size: 11px;

    line-height: 1.7;
  }


  #judy-smart-quiz .jq-more-info small {
    font-size: 10px;
  }


  /* Bigger summary */
  #judy-smart-quiz .jq-summary {
    padding: 13px 16px;

    font-size: 12px;

    line-height: 2;
  }


  /* Bigger restart */
  #judy-smart-quiz .jq-restart {
    font-size: 12px;
  }


  /* Bigger footer */
  #judy-smart-quiz .jq-footer {
    font-size: 10px;

    margin-top: 22px;
  }

}


/* =====================================================
   MOBILE
   KEEP CURRENT DESIGN
===================================================== */

@media (max-width: 768px) {

  #judy-smart-quiz .jq-modal {
    width: calc(100vw - 24px);

    max-height: 90vh;

    padding: 19px 15px 13px;

    border-radius: 22px;
  }


  #judy-smart-quiz .jq-content {
    padding: 0 4px;
  }


  #judy-smart-quiz .jq-content h2 {
    font-size: 21px;
  }


  #judy-smart-quiz .jq-options {
    display: grid;

    grid-template-columns: 1fr;

    gap: 9px;
  }


  #judy-smart-quiz .jq-option {
    min-height: auto;

    padding: 12px;

    font-size: 12px;
  }


  #judy-smart-quiz .jq-product-image {
    height: 140px;
  }

}
#judy-smart-quiz .jq-modal {
  overflow-y: auto !important;
  overflow-x: hidden !important;

  -webkit-overflow-scrolling: touch;

  overscroll-behavior: contain;

  touch-action: pan-y;

  scrollbar-width: thin;
}

/* منع الـoverlay من التأثير على Scroll الـModal */
#judy-smart-quiz .jq-overlay {
  overflow: hidden !important;
  touch-action: none;
}

/* السماح بالـscroll داخل محتوى الـModal */
#judy-smart-quiz .jq-content {
  overflow: visible;
}

/* شكل الـscrollbar في الكمبيوتر */
#judy-smart-quiz .jq-modal::-webkit-scrollbar {
  width: 6px;
}

#judy-smart-quiz .jq-modal::-webkit-scrollbar-track {
  background: transparent;
}

#judy-smart-quiz .jq-modal::-webkit-scrollbar-thumb {
  background: #d9ddf2;
  border-radius: 20px;
}

#judy-smart-quiz .jq-modal::-webkit-scrollbar-thumb:hover {
  background: #b9bfdf;
}