@import "tailwindcss";
@import "tailwindcss";
@plugin "daisyui";


.swirl-line-top-right {
  position: absolute;
  top: 15%; /* Adjusted position */
  right: 8%; /* Adjusted position */
  width: 90px; /* Size */
  height: 90px;
  border-radius: 50%; /* Start with a circle */
  border: 1px solid theme('colors.gray.300'); /* Light gray border */
  opacity: 0.5;
  transform: rotate(-15deg); /* Slight rotation */
  pointer-events: none; /* Make sure it doesn't interfere with clicks */
  display: none; /* Hidden by default for responsiveness */
}

.swirl-line-top-right::before {
  content: '';
  position: absolute;
  top: 10px; /* Offset the inner circle */
  left: 10px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px solid theme('colors.gray.300');
  opacity: 0.5;
  transform: rotate(20deg); /* Counter-rotate slightly */
}

/* Adding some lines to mimic the internal structure */
.swirl-line-top-right::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: theme('colors.gray.300');
  opacity: 0.3;
  transform: rotate(30deg); /* Line rotation */
  transform-origin: center;
}


.swirl-line-bottom-left {
  position: absolute;
  bottom: 15%; /* Adjusted position */
  left: 8%; /* Adjusted position */
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1px solid theme('colors.gray.300');
  opacity: 0.5;
  transform: rotate(30deg);
  pointer-events: none;
  display: none;
}

.swirl-line-bottom-left::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px solid theme('colors.gray.300');
  opacity: 0.5;
  transform: rotate(-10deg);
}

.swirl-line-bottom-left::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: theme('colors.gray.300');
  opacity: 0.3;
  transform: rotate(-20deg);
  transform-origin: center;
}

/* Responsive display for swirls */
@media (min-width: 768px) { /* md breakpoint */
  .swirl-line-top-right,
  .swirl-line-bottom-left {
    display: block;
  }
}

/* Custom shadow to match the card shadow more closely if DaisyUI's default 'shadow-xl' isn't exact */
/* You might not need this if DaisyUI's shadow-xl is close enough */
.custom-card-shadow {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}