@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .btn {
    @apply px-4 py-2 rounded border border-transparent transition-all duration-200 hover:border hover:bg-gray-100 font-light;
  }

  .btn-primary {
    @apply text-blue-600 hover:border-blue-600 hover:bg-blue-600 hover:text-white;
  }

  .btn-primary-border {
    @apply text-blue-600 border-blue-600 hover:bg-blue-600 hover:text-white;
  }

  .btn-ers-primary-border {
    @apply text-[#295a60] border-[#295a60] hover:bg-[#295a60] hover:text-white;
  }

  .btn-secondary {
    @apply flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
  }

  .btn-ers-secondary {
    @apply text-[#b4965e] border-[#b4965e] hover:bg-[#b4965e] hover:text-white;
  }

  .btn-danger {
    @apply text-red-600 hover:border-red-600 hover:bg-red-600 hover:text-white;
  }

  .btn-form-submit {
    @apply btn w-full inline-flex justify-center rounded-md py-2 px-4 font-medium text-white bg-blue-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 hover:bg-blue-600 hover:border-blue-600;
  }
}

.trix-button-group {
  background-color: #fff;
}

/* Flip Card Styles */
.flip-card {
  background-color: transparent;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flip-card-back {
  transform: rotateY(180deg);
}