/** Hash Configs **/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka&display=swap');

:root {
  
    /** Font **/
    --font1: Fredoka;

    --fontSize1: 5rem;
    --fontSize2: 2rem;

    --xs:1%;
    --sm:2.5%;
    --md:5%;
    --lg:7.5%;
    --xl:10%;

    --px-xs:1%;
    --px-sm:2.5%;
    --px-md:5%;
    --px-lg:7.5%;
    --px-xl:10%;

    
}

/** Hash Configs Ends **/

/*** 
====================================================================
	Text - START
====================================================================
***/

body{
  font-family:var(--font1);
  margin: auto;
}

/* lg screen*/
@media (max-width: 1012px) {
}
 
/* md screen*/
@media (max-width: 768px) {

    h1, .h1 {
      font-size:  6.4rem;
    }
    h2, .h2 {
      font-size: 3.4rem;
    }
}
 
/* sm screen*/
@media (max-width: 577px) {
 /** DESIGN **/
  h1, .h1 {
    font-size:  4.7rem;
  }
  h2, .h2 {
    font-size: 2.9rem;
  }
  h3, .h3 {
    font-size: 1.8rem;
  }
  h4, .h4 {
    font-size: 1.6rem;
  }
  h5, .h5 {
    font-size: 1.6rem;
  }
}

/*** 
====================================================================
	Text - Ends
====================================================================
***/


/*** 
====================================================================
    Common Styling - Start
====================================================================
***/

/*** Validation Styling ***/

.inner.correct { background-color: lightgreen; }
.inner.incorrect { background-color: lightcoral; }
.answer { cursor: url(../img/green-cursor.cur), auto;}
.selected {
cursor: url(../img/green-cursor.cur), auto;
background-color: #c8d6e5;
border-radius: 10px;
}

/*** END ***/

/*** 
====================================================================
    Page Styling - Start
====================================================================
***/

body {
  background-color: #EAFFEA;
  padding: 20px;
  cursor: url(../img/green-cursor.cur),auto;
  font-family: var(--font1);
  padding-left: 7.5%;
  padding-right: 7.5%;
}
.pageGrid {
  border: 5px dashed #62F163;
  width: 100%;
  border-radius: 50px;
  /* height: 690px; */
  height: auto;
}

#h1 p {
  color: #62F163;
  font-weight: 800;
  border: 4px dashed #62F163;
  border-radius: 15px;
  padding: 4px 15px;
  font-size: 2rem;
  line-height: 1.5;
}
#h1 button {
  background-color: #62F163;
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
  border: 1px solid #62F163;
  padding: 4px 15px;
  border-radius: 10px;
  cursor: url(../img/green-cursor.cur),auto;
  font-family: var(--font1);
}
#h1 .n0-i2 .n1-i2 {
  border: 4px dashed #62F163;
  height: fit-content;
  padding: 5px;
  border-radius: 17px;
}

#m1 p {
  font-size: 3.5rem;
  font-weight: 600;
}
#m1 img {
  width:90%;
}

.custom-overlay .ui-dialog-content {
  background-color:rgba(0, 0, 0, 0.5) !important;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  display: flex;           /* Add this line */
  justify-content: center; /* Add this line */
  align-items: center;     /* Add this line */
}

.result-image {
  /* width: 100px; */
  height: 100px;
}

.popup {
  display: none;
  /* initially hidden */
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background-color: rgb(0, 0, 0, 0.55);
}

.popup img {
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup_btn_border {
  border-radius: 15px;
  border: 4px dashed #62F163;
  padding: 4px;
  width: 140px;
  height: 45px;
}

#custom-alert{
  display: grid;
  justify-self: center;
  position: fixed;
  z-index: 1000;
  justify-content: center;
  align-items: center;
  top: 0;
}

.mobile p{
  display: none;
}
.mobile img{
  display: none;
}

/*** 
====================================================================
    Page Styling - END
====================================================================
***/

/*** 
====================================================================
   Responsive - START
====================================================================
***/

/* large laptop screen*/
@media (max-width: 1440px) {
 
}

/* small laptop screen*/
@media (max-width: 1024px) {
 
}

@media only screen and (max-width: 1024px) and (orientation: landscape) {
  .pageGrid {
    height: auto;
    min-height: auto;
  }
  #m1 .n0-i1 img{
    width: 550px;
  }
  #m1 .n0-i1 {
    --sm:1%;
  }
  /* #m1 .n0-i2{
    --sm:1%;
  } */
  #m1 .n0-i2 .inner{
    /* transform: scale(0.70); */
    zoom: 0.7;
  }

}


@media only screen and (max-width: 950px) and (orientation: landscape) {
  .pageGrid {
    display: block;
  }
  #h1 p {
    padding: 2px 10px;
    font-size: 1.8rem;
  }
  #h1 button {
    font-size: 1.8rem;
    padding: 2px 10px;
  }
  #h1 .n0-i2 .n1-i2 {
    border: 4px dashed #62F163;
    height: fit-content;
    padding: 4px;
    border-radius: 15px;
  }
  #h1 .boxborder {
    padding: 8px 10px;
}
  #h1 .boxborder img {
    width: 85%;
  }
  #h1 .load img {
    width: 45px;
  }
  #h1 .n0-i1 {
    --sm:4%;
  }
  #h1 .n0-i2 {
    --px-xs:2%;
  }
  #m1 .n0-i1 img{
    width: 300px;
  }
  #m1 .n0-i1 {
    margin-top: -3%;
  }
  #m1 .n0-i2 .inner {
    /* transform: scale(0.65); */
    zoom: 0.6;
  }
  #m1 .n0-i1 {
    --sm: 1%;
  }
  #custom-alert img{
    width: 150px;
  }
}

/* tablet screen*/
@media only screen and (max-width: 768px) and (orientation: portrait){
  .pageGrid {
    display: none;
  }
  .mobile p{
    display: flex;
    font-size: 3rem;
  }
  .mobile img {
    width: 8%;
    display: flex;
    position: fixed; 
    left: 45%;
  }
}


/* mobile screen*/
@media (max-width: 577px)  and (orientation: portrait) {
  body{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .pageGrid {
    display: none;
  }
  .mobile p{
    display: flex;
    font-size: 2rem;
  }
  .mobile img {
    width: 10%;
    display: flex;
    position: fixed; 
    left: 42%;
  }
}



/*** 
====================================================================
   Responsive - END
====================================================================
***/




.ans-image {
    display: inline-block;
    padding: 0;
    margin: 0;
    background: transparent;
}

.ans-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Highlight background ON image only when selected */
.ans-image.selected img {
    background: #d0e9ff; /* light blue or whatever you prefer */

}

/* 

.measure-boxes {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.measure-boxes .box {
  width: 49px;
  height: 48px;
  border: 2px solid #a0e5a0;
  border-radius: 4px;
  background-color: #eaffea;
  cursor: pointer;
}

.measure-boxes .box.filled {
  background-color: #67d67b;
}
 */

/* .measure-boxes {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.measure-boxes .box {
  width: 49px;
  height: 48px;
  border: 2px solid #a0e5a0;
  border-radius: 4px;
  background-color: #eaffea;
  cursor: pointer;
  transition: background-color 0.3s;
}

.measure-boxes .box.filled {
  background-color: #5d0606;
} */
/* Arrange items vertically */
.measure-container.column-layout {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 20px;
  margin-top: 20px;
  margin-left: 150px;
}

/* Boxes layout */
.measure-boxes {
  display: flex;
  gap: 8px;
}

.measure-boxes .box {
  width: 49px;
  height: 48px;
  border: 2px solid #a0e5a0;
  border-radius: 4px;
  background-color: #eaffea;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 20px;
  margin-bottom: 80px;
}

.measure-boxes .box.filled {
  background-color: #5d0606;
}













/* <div class="simpleGrid question q1 active"  data-question="Arrange-order">   
                    <div class="inner n1-i1 center pb-sm-single instection">
                    <p>Arrange from shortest to tallest</p>
                  </div>    
                  <div class="inner-flex n0-i1 sort-containers  center-x-flex gp-md pb-sm-single">
                    <div class="inner n1-i1 pencil1 sort-item" data-action="2">
                        <div class="inner pencil sort-card  inner-flex n2-i1 card">
                            <div class="inner n3-i1 center-y-single arrow center arrow-prev">
                                 <img src="img/prev.png" alt="image">
                            </div>
                            <div class="inner n3-i2">
                                <img src="img/math-l1.png" alt="image">
                            </div>
                            <div class="inner n3-i3  center-y-single arrow1 center arrow-next">
                                 <img src="img/next.png" alt="image">
                            </div>

                        </div>
                        <div class="inner n2-i2 number  center mt-lg-single center-x-single">
                            <h1>1</h1>
                        </div>
                    </div>
                    <div class="inner n1-i2 pencil2 sort-item" data-action="1">
                        <div class="inner pencil inner-flex  sort-card n2-i1 card">
                            <div class="inner n3-i1 center-y-single arrow center  arrow-prev">
                                 <img src="img/prev.png" alt="image">
                            </div>
                            <div class="inner n3-i2">
                                <img src="img/math-l2.png" alt="image">
                            </div>
                            <div class="inner n3-i3  center-y-single arrow1 center arrow-next">
                                 <img src="img/next.png" alt="image">
                            </div>

                        </div>
                        <div class="inner n2-i2 number  center mt-lg-single center-x-single">
                            <h1>2</h1>
                        </div>
                    </div>
                    <div class="inner n1-i3 pencil3 sort-item" data-action="4">
                        <div class="inner pencil inner-flex n2-i1  sort-card card">
                            <div class="inner n3-i1 center-y-single arrow center arrow-prev">
                                 <img src="img/prev.png" alt="image  ">
                            </div>
                            <div class="inner n3-i2">
                                <img src="img/math-l3.png" alt="image">
                            </div>
                            <div class="inner n3-i3  center-y-single arrow1 center arrow-next">
                                 <img src="img/next.png" alt="image">
                            </div>

                        </div>
                        <div class="inner n2-i2 number  center mt-lg-single center-x-single">
                            <h1>3</h1>
                        </div>
                    </div>
                    <div class="inner n1-i4 pencil4 sort-item" data-action="3">
                        <div class="inner pencil inner-flex n2-i1  sort-card card">
                            <div class="inner n3-i1 center-y-single arrow center  arrow-prev">
                                 <img src="img/prev.png" alt="image">
                            </div>
                            <div class="inner n3-i2">
                                <img src="img/math-l4.png" alt="image">
                            </div>
                            <div class="inner n3-i3  center-y-single arrow1 center arrow-next ">
                                 <img src="img/next.png" alt="image">
                            </div>

                        </div>
                        <div class="inner n2-i2 number  center mt-lg-single center-x-single">
                            <h1>4</h1>
                        </div>
                    </div>
                  </div>
                  
                </div> 
                   $(document).ready(function () {
      const $container = $('.sort-containers');

  // Initialize dialog (hidden initially)
  $("#congrats-popup").dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    draggable: false,
    closeOnEscape: true,
    dialogClass: "custom-overlay",
    open: function () {
      $(".ui-dialog-titlebar").hide();
      $(this).parent().css({
        position: 'fixed',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        width: '100%',
        height: '100%'
      });
      $(this).css({
        width: '100%',
        height: '100%',
        overflow: 'hidden'
      });
    }
  }).click(function () {
    $(this).dialog("close");
  });

  // NEXT click handler
  $('.arrow-next img').on('click', function () {
    const $clickedPencil = $(this).closest('.sort-item');
    const pencils = $container.children('.sort-item');
    const index = pencils.index($clickedPencil);
    const nextIndex = (index + 1) % pencils.length;
    const $nextPencil = pencils.eq(nextIndex);

    // Swap with next
    if (index < nextIndex) {
      $clickedPencil.insertAfter($nextPencil);
    } else {
      $clickedPencil.insertBefore($nextPencil);
    }

    showOrderHighlights();
  });

  // PREV click handler
  $('.arrow-prev img').on('click', function () {
    const $clickedPencil = $(this).closest('.sort-item');
    const pencils = $container.children('.sort-item');
    const index = pencils.index($clickedPencil);
    const prevIndex = (index - 1 + pencils.length) % pencils.length;
    const $prevPencil = pencils.eq(prevIndex);

    // Swap with previous
    if (index > prevIndex) {
      $clickedPencil.insertBefore($prevPencil);
    } else {
      $clickedPencil.insertAfter($prevPencil);
    }

    showOrderHighlights();
  });

  // Function to highlight correct order pencils on move (optional)
  function showOrderHighlights() {
    const $pencilItems = $container.children('.sort-item');

    $pencilItems.each(function (index) {
      const expected = index + 1;
      const actual = $(this).data('action');
      const $card = $(this).find('.sort-card');

      if (actual === expected) {
        $card.addClass('correct-order');
      } else {
        $card.removeClass('correct-order');
      }
    });
  }

  // Main function to check order and show popup on submit
 function updateNumbers() {
  $container.children('.sort-item').each(function (index) {
    $(this).find('.number h1').text(index + 1);
  });
}

function showOrderHighlights() {
  const $pencilItems = $container.children('.sort-item');

  $pencilItems.each(function (index) {
    const expected = index + 1;
    const actual = $(this).data('action');
    const $card = $(this).find('.sort-card');

    if (actual === expected) {
      $card.addClass('correct-order');
    } else {
      $card.removeClass('correct-order');
    }
  });

  updateNumbers(); // 🟢 Re-number after every move
}

// function showOrder() {
//   const $pencilItems = $container.children('.sort-item');
//   let isAllCorrect = true;

//   $pencilItems.each(function (index) {
//     const expected = index + 1;
//     const actual = $(this).data('action');
//     const $card = $(this).find('.sort-card');

//     if (actual === expected) {
//       $card.addClass('correct-order');
//     } else {
//       $card.removeClass('correct-order');
//       isAllCorrect = false;
//     }
//   });

//   if (isAllCorrect) {
//     $("#congrats-popup")
//       .html('<img src="img/correct.png" class="result-image" />')
//       .dialog("open");
//   } else {
//     $("#congrats-popup")
//       .html('<img src="img/wrong.png" class="result-image" />')
//       .dialog("open");
//   }
// }
function showOrder() {
  const $pencilItems = $container.children('.sort-item');
  let isAllCorrect = true;

  $pencilItems.each(function (index) {
    const expected = index + 1;
    const actual = $(this).data('action');
    const $card = $(this).find('.sort-card');

    if (actual === expected) {
      // Temporarily remove and restart animation
      $card.removeClass('correct-order');
      void $card[0].offsetWidth; // force reflow
    } else {
      $card.removeClass('correct-order');
      isAllCorrect = false;
    }
  });

  if (isAllCorrect) {
    // Add animation after delay (optional 2s)
    setTimeout(() => {
      $pencilItems.each(function (index) {
        const expected = index + 1;
        const actual = $(this).data('action');
        const $card = $(this).find('.sort-card');
        if (actual === expected) {
          $card.addClass('correct-order');
        }
      });
    }, 200); // You can change 200 to 2000 if you want to delay by 2s

    $("#congrats-popup")
      .html('<img src="img/correct.png" class="result-image" />')
      .dialog("open");
  } else {
    $("#congrats-popup")
      .html('<img src="img/wrong.png" class="result-image" />')
      .dialog("open");
  }
}

  // Submit button click handler
  $('#submit').on('click', function (e) {
    e.preventDefault();
    showOrder();
  });
}); */


.ruler-container {
  position: relative;
}

.ruler-image {
  display: block;
  width: 100%;
}

.drop-targets {
  position: absolute;
  top: -70px;
  left: 30px;
  width: 90%;
  height: 40px;
  display: flex;
  justify-content: space-around;
  pointer-events: none; 
}

.drop-slot {
  position: relative;
  width: 100%;
  border: 2px dashed transparent;
  pointer-events: auto; 
  transition: 0.3s;
  font-size: 12px;
  user-select: none;
}

.drop-slot.hover {
  border-color: #62F163;
}


.q3 .answer .option-red circle
 {
  fill: yellow;
}


.q3 .answer .option-green rect
 {
  fill: red;
}




.center-x-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);  /* only take as much space as needed */
  justify-content: center;                 /* center the whole grid horizontally */
  gap: 16px;                                /* spacing between columns and rows */
}


.drag-item {
  width: 120px;
  height: 120px;
  background-color: #eaffea;
  border: 2px solid #7be17b;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: grab;
}



.drag-item img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}