/* ==========================================================================
   Decorative Corner Flourishes - Simple variant for cards
   ========================================================================== */

/* Top corners using pseudo-elements */
.decorative-corners-simple::before,
.decorative-corners-simple::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.decorative-corners-simple::before {
  top: 6px;
  left: 6px;
  border-top: 2px solid var(--color-accent);
  border-left: 2px solid var(--color-accent);
}

.decorative-corners-simple::after {
  top: 6px;
  right: 6px;
  border-top: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
}

.decorative-corners-simple:hover::before,
.decorative-corners-simple:hover::after {
  opacity: 0.7;
}

/* Bottom corners using child elements */
.decorative-corners-simple-bl,
.decorative-corners-simple-br {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.decorative-corners-simple-bl {
  bottom: 6px;
  left: 6px;
  border-bottom: 2px solid var(--color-accent);
  border-left: 2px solid var(--color-accent);
}

.decorative-corners-simple-br {
  bottom: 6px;
  right: 6px;
  border-bottom: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
}

.decorative-corners-simple:hover .decorative-corners-simple-bl,
.decorative-corners-simple:hover .decorative-corners-simple-br {
  opacity: 0.7;
}

/* Decorative corners work with background images now (using wrapper div, no conflicts) */