.scratch-super {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Poppins for English (LTR), Cairo for Arabic (RTL) */
  font-family: 'Poppins', sans-serif;
  background: #f9f9f9;
  /* margin-top: 20px;
  gap: 20px; Automatic space between child elements */

}

/* Arabic font support for scratch card */
body[dir="rtl"] .scratch-super,
html[lang="ar"] .scratch-super,
[dir="rtl"] .scratch-super {
  font-family: 'Cairo', 'Poppins', sans-serif;
}

.scratch-card {
  margin-top: 15px;
  position: relative;
  border: 4px solid #c7c6cf;
  border-radius: 18px;
  padding: 12px;
  width: 320px;
  height: 320px;
  background-color: #fff;
}

.scratch-card-cover-container {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  filter: url('#remove-black');
  transition: opacity 0.4s;

  &.clear {
    opacity: 0;
  }

  &.hidden {
    display: none;
  }
}

.scratch-card-canvas {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;

  &.hidden {
    opacity: 0;
  }

  &:active {
    cursor: grabbing;
  }
}

.scratch-card-canvas-render {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.2s;

  &.hidden {
    display: none;
  }
}

.scratch-card-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #cfced6;
  background-image: linear-gradient(to right, #cfced6, #e0dfe6, #efeef3, #e0dfe6, #cfced6);
  overflow: hidden;
  border-radius: inherit;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(135deg, transparent 40%, rgb(255 255 255 / 0.8) 50%, transparent 60%);
    background-position: bottom right;
    background-size: 300% 300%;
    background-repeat: no-repeat;

    @at-root .scratch-card-cover.shine::before {
      animation: shine 8s infinite;
    }
  }

  @keyframes shine {
    50% {
      background-position: 0% 0%;
    }
    100% {
      background-position: -50% -50%;
    }
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    filter: url('#noise');
  }
}

.scratch-card-cover-background {
  width: 100%;
  height: 100%;
  fill: #555;
  opacity: 0.1;
}

.scratch-card-image {
  border-radius: 4px;
  width: 100%;
  height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 0.16));
  user-select: none;
  will-change: transform;

  &.animate {
    animation: pop-out-in cubic-bezier(0.65, 1.35, 0.5, 1) 1s;
  }
}

@keyframes pop-out-in {
  36% {
    transform: scale(1.125);
  }
  100% {
    transform: scale(1);
  }
}

/* Claim Button */
.claim-button {
  display: block;
  background-color: #ff6f61;
  color: white;
  font-size: 18px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  /* Poppins for English (LTR), Cairo for Arabic (RTL) */
  font-family: 'Poppins', sans-serif;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.claim-button:hover {
  transform: translateY(-2px);
  background-color: #ff6f61;
  color: white;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Transparent overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup {
  background: #fff;
  padding: 55px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  text-align: center;
  /* Poppins for English (LTR), Cairo for Arabic (RTL) */
  font-family: 'Poppins', sans-serif;
}

button {
  cursor: pointer;
}
.popup h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 15px;
}

.popup p {
  font-size: 18px;
  color: #555;
  margin-bottom: 20px;
}

.popup-form {
  margin-bottom: 20px;
}

.popup-form input {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  /* Poppins for English (LTR), Cairo for Arabic (RTL) */
  font-family: 'Poppins', sans-serif;
  transition: border 0.3s;
}

.popup-form input:focus {
  border-color: #ff6f61;
  outline: none;
}

.popup-submit-btn {
  background-color: #ff6f61;
  color: white;
  font-size: 18px;
  padding: 8px 30px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-top: 15px;
  /* Poppins for English (LTR), Cairo for Arabic (RTL) */
  font-family: 'Poppins', sans-serif;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.popup-submit-btn:hover {
  background-color: #ff4a39;
  transform: translateY(-2px);
}

/* Close Button */
.close-popup-btn {
  background-color: #f0f0f0;
  color: #555;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  margin-top: 20px;
  /* Poppins for English (LTR), Cairo for Arabic (RTL) */
  font-family: 'Poppins', sans-serif;
  transition: background-color 0.3s ease;
}

.close-popup-btn:hover {
  background-color: #ddd;
}

/* Popup Styles */
.hidden {
  display: none;
}
/* Arabic font support for all scratch card elements */
body[dir="rtl"] .scratch-super *,
html[lang="ar"] .scratch-super *,
[dir="rtl"] .scratch-super *,
body[dir="rtl"] .claim-button,
html[lang="ar"] .claim-button,
[dir="rtl"] .claim-button,
body[dir="rtl"] .popup,
html[lang="ar"] .popup,
[dir="rtl"] .popup,
body[dir="rtl"] .popup-form input,
html[lang="ar"] .popup-form input,
[dir="rtl"] .popup-form input,
body[dir="rtl"] .popup-submit-btn,
html[lang="ar"] .popup-submit-btn,
[dir="rtl"] .popup-submit-btn,
body[dir="rtl"] .close-popup-btn,
html[lang="ar"] .close-popup-btn,
[dir="rtl"] .close-popup-btn {
  font-family: 'Cairo', 'Poppins', sans-serif;
}

/* Dark overlay for initial state */
.scratch-card-dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Darker overlay */
  z-index: 2; /* Higher than canvas to prevent scratching */
  transition: opacity 0.4s;
  border-radius: 18px
}

.scratch-card-dark-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}



/* add phone code country */
.input-group > .intl-tel-input.allow-dropdown {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
}

.input-group > .intl-tel-input.allow-dropdown > .flag-container {
	z-index: 4;
}

.iti-flag {
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/img/flags.png");
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .iti-flag {
      background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/img/flags@2x.png");
    }
}