@primary-blue: #007bff;
@light-bg: #16213e;
@accent-green: #21bf73;
@accent-purple: #6a2c70;
@text-light: #eaeaea;
@ItcAvantGarde: 'Ubuntu', sans-serif;


body {
  color: @text-light;
  font-family: @ItcAvantGarde;
  font-weight: 400;

}
//Supprimer les deux fleches pour monter ou descendre la somme a transferer
.no-display-arrow::-webkit-inner-spin-button,
.no-display-arrow::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Pour Firefox */
.no-display-arrow {
  -moz-appearance: textfield;
}
//////////////////////////////////////////////////

.password-circle.filled {
  background-color: #055FC2; /* Couleur bleue */
  border: solid 1px #055FC2; /* Bordure bleue */
  color: white; /* Pour que les chiffres soient blancs dans les cercles */
}

.password-circle {
  background-color: transparent; /* Par défaut, cercle vide */
  margin-right: 0.5rem;
}

.underline-hover{
  border-bottom: 2px solid #1F2937;
  transition: all 0.3s ease;
}
.underline-hover:hover{
  border-bottom: 2px solid #255DC5;
}
.form-container {
  background-color: @light-bg;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.login-div{

  button {
    transition: background-color 0.3s ease-in-out;

    &:hover {
      background-color: @accent-purple;
    }
  }
}






/////////////////////////////////////// Carte de crédit ///////////////////////////////////////
.copy-icon {
  cursor: pointer;
  margin-left: 10px;
  font-size: 20px;
  color: white;

  &:hover {
    color: #ddd;
  }
}

.credit-card-box {
  width: 400px;
  height: 265px;
  margin: 0 auto;
  @media (max-width: 480px) {
    width: 300px;
  }
  .flip {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;

    .front {
      transition: all ease-in-out 0.6s;
      width: 400px;
      height: 250px;
      border-radius: 15px;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      position: absolute;
      color: #fff;
      font-family: 'Ubuntu', sans-serif;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
      @media (max-width: 480px) {
        width: 300px;
      }
      &:hover {
        transform: rotateX(20deg) rotateZ(-4deg);;
        box-shadow: 0 15px 15px rgba(6, 6, 6, 1);
      }

      .chip {
        position: absolute;
        width: 60px;
        height: 45px;
        top: 20px;
        left: 20px;
        background: linear-gradient(135deg, #ddccf0 0%, #d1e9f5 44%, #f8ece7 100%);
        border-radius: 8px;
      }

      .logo {
        position: absolute;
        top: 9px;
        right: 20px;
        width: 60px;

        svg {
          width: 100%;
          height: auto;
          fill: #fff;
        }
      }

      .number {
        position: absolute;
        top: 103px;
        left: 19px;
        font-size: 30px;
      }

      .card-holder {
        position: absolute;
        top: 180px;
        left: 19px;
        font-size: 20px;
      }
    }
  }
}
.credit-card-box2 {
  width: 220px;
  height: 130px;

  .flip {
    position: relative;

    .front {
      width: 220px;
      height: 130px;
      border-radius: 15px;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      position: absolute;
      color: #fff;
      font-family: 'Ubuntu', sans-serif;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);


      .chip {
        position: absolute;
        width: 60px;
        height: 45px;
        top: 20px;
        left: 20px;
        background: linear-gradient(135deg, #ddccf0 0%, #d1e9f5 44%, #f8ece7 100%);
        border-radius: 8px;
      }

      .logo {
        position: absolute;
        top: 9px;
        right: 20px;
        width: 60px;

        svg {
          width: 100%;
          height: auto;
          fill: #fff;
        }
      }

      .number {
        position: absolute;
        top: 103px;
        left: 19px;
        font-size: 30px;
      }

      .card-holder {
        position: absolute;
        top: 180px;
        left: 19px;
        font-size: 20px;
      }
    }
  }
}



/////////////////////////////////////// ALERT EN THME SOMBRE ///////////////////////////////////////


.swal2-popup {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
}

.swal2-title {
  color: #f9fafb !important;
}

.swal2-content {
  color: #d1d5db !important;
}

.swal2-input {
  background-color: #374151 !important;
  color: #f9fafb !important;
  border: 1px solid #4b5563 !important;
}

.swal2-confirm {
  background-color: #3b82f6 !important;
  color: #f9fafb !important;
}

.swal2-confirm:hover {
  background-color: #2563eb !important;
}

.swal2-cancel {
  background-color: #6b7280 !important;
  color: #f9fafb !important;
}

.swal2-cancel:hover {
  background-color: #4b5563 !important;
}

.swal2-validation-message {
  color: #ef4444 !important;
}

@media (max-width: 768px) {
  .mt-mobile-200 {
    margin-top: 200px;
  }
}