.searchFilterText{
    font-size: 12px;
    color: white;
}
.supportMessageInput{
    color: white;
}

.bg-moderator{
    background-color: rgba(122, 131, 212, 0.5);
}

.text-moderator{
    color: #7a83d4 !important;
}

.mt-12{
    margin-top: 12px;
}

.mr-8{
    margin-right: 8px;
}

.cursor-pointer{
    cursor: pointer;
}

.card {
    background-color: #151515;
    transition: all 0.3s ease;
    position: relative;
    /* backdrop-filter: blur(12px);  -> Product order kısmında filtrelerin arkada kalmasına neden oluyor */
}


.card:hover {
    background-color: #191919;

}

.z-10 my-10 bg-gray-700 rounded-lg p-4 w-max block {
    position: relative;
    z-index: 9999;
}

#gameFilterDropdown,
#filterDropdown {
    position:static;
    z-index: 99999 !important;
}

#productList {
    z-index: -1 !important;
}


.popupsdfsd {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    visibility: hidden;
  }

  .popupsdfsd.start-animation {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  .cursor2 {
    position: absolute;
    z-index: 9;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transform: translate(200px, 530px);
  }

  @keyframes cursor-move21 {
    from {
      transform: translate(200px, 530px);
      opacity: 0;
    }
    to {
      transform: translate(240px, 480px);
      opacity: 1;
    }
  }

  @keyframes cursor-move22 {
    from {
      transform: translate(240px, 480px);
    }
    to {
      transform: translate(475px, 480px);
    }
  }

  @keyframes cursor-move23 {
    from {
      transform: translate(475px, 480px);
    }
    to {
      transform: translate(240px, 480px);
    }
  }

  @keyframes cursor-move24 {
    from {
      transform: translate(240px, 480px);
    }
    to {
      transform: translate(475px, 480px);
    }
  }

  .cursor2.start-animation {
    animation: cursor-move21 0.5s ease-in-out 0s forwards,
               cursor-move22 1s ease-in-out 4.6s forwards,
               cursor-move23 1s ease-in-out 10.6s forwards,
               cursor-move24 1s ease-in-out 13.6s forwards;
  }

  .cursor2.start-animation img {
    animation: cursor-click 0.6s ease-in-out 0.5s forwards,
               cursor-click 0.6s ease-in-out 5.5s forwards,
               cursor-click 0.6s ease-in-out 11.3s forwards,
               cursor-click 0.6s ease-in-out 14.3s forwards;
  }

  @keyframes cursor-click {
    0% {
      scale: 1.2;
    }
    50% {
      scale: 0.9;
    }
    100% {
      scale: 1.1;
    }
  }

  .cursor2 img {
    scale: 1.2;
  }

  .cursor2 h3 {
    background-image: linear-gradient(to left, #212121 100%, #101010 0%);
    color: white;
    border-radius: 6px;
    padding: 5px 10px 3px;
    scale: 1.2;
    margin-top: 50px;
  }

  .space-y-2.popupsdfsd {
    animation: movelive 0.6s ease-in-out 6.1s forwards;
    opacity: 0;
  }

  .popupsdfsd:not(.start-animation) {
    animation: none !important;
  }

  @keyframes movelive {
    from {
      transform: translateX(-500px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .icon-tick-2.animation {
    opacity: 0;
    animation: tickanimationc 0.6s ease-in-out 7.3s forwards;
  }

  .icon-tick-2.animation:not(.start-animation) {
    animation: none !important;
  }

  @keyframes tickanimationc {
    from {
      color: rgb(92 92 92 / var(--tw-text-opacity));
      opacity: 0;
    }
    to {
      color: rgb(11 183 131 / var(--tw-text-opacity));
      opacity: 1;
    }
  }

  /* Cards animation improvements */
  .card.keys {
    transition: transform 0.3s ease;
  }

  .card.keys:hover {
    transform: translateY(-5px);
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .cursor2 {
      display: none !important;
    }
    
    .card.keys {
      transform: none !important;
    }
    
    .card.keys:nth-child(n+4) {
      display: none;
    }
  }

  /* Note: .priceng.animate, .succs.animate, .colorbg.animate animations 
     are defined in style.css - do not override them here */

  .success-animation {
    animation: successPulse 0.6s ease-in-out;
  }

  @keyframes successPulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Note: .colorbg.animate animation is defined in style.css - do not override here */

  /* Radio button styling for pricing section */
  input[name="day"]:checked + label {
    background-color: #e4ba1c !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(228, 186, 28, 0.5);
  }

  input[name="day"] + label {
    transition: all 0.3s ease;
  }

  input[name="day"] + label:hover {
    background-color: rgba(228, 186, 28, 0.1);
  }

  /* Special styling for lifetime option */


  input[value="day1x"]:checked + label.colorbg {
    background: linear-gradient(45deg, #e4ba1c, #ffd700) !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(228, 186, 28, 0.8);
  }

  /* Note: .priceng and .succs opacity and animation are defined in style.css */

  /* Product card styling */
  .card.product {
    max-width: 300px;
    min-height: 400px;
  }



  /* Fix for mobile responsiveness in buying keys section */
  @media (max-width: 768px) {
    .flex.gap-6.items-start {
      flex-direction: column !important;
      align-items: center !important;
      gap: 2rem !important;
    }
    
    .w-\[360px\], .w-\[320px\] {
      width: 100% !important;
      max-width: 350px !important;
    }
    
    .card.product {
      max-width: 280px !important;
    }
  }

  @media (max-width: 1024px) {
    .flex.gap-6.items-start {
      flex-direction: column !important;
      align-items: center !important;
      gap: 2rem !important;
    }
    
    .w-\[360px\], .w-\[320px\] {
      width: 100% !important;
      max-width: 400px !important;
    }
  }

  .dataTables_filter {
    display: none !important;
  }