/* ==========================================================================
   1. GLOBAL DAISYUI SYSTEM OVERRIDES (FIXES LINK COLORS)
   ========================================================================== */
.base-styles {
  /* --- Global System Color Mapping --- */
  --b1: var(--bg_color_primary) !important;       /* Main canvas background */
  --b2: var(--bg_color_secondary) !important;     /* Secondary container box background */
  --bc: var(--page_text_color) !important;        /* Main text font color */
  
  /* Map buttons to use the custom link values explicitly */
  --n: var(--button_color) !important;            /* Default neutral button fill */
  --nc: var(--button_text_color) !important;      /* Text inside default neutral buttons */
  
  --p: var(--button_text_color) !important;       /* Primary accent highlights */
  --pc: var(--button_color) !important;           /* Text color inside primary buttons */

  color: var(--page_text_color);
  font-family: var(--profile_font, "Arial", sans-serif);

  --color-primary: var(--button_color);
  --color-primary-content: var(--button_text_color);

  --color-secondary: var(--button_text_color);
  --color-secondary-content: var(--button_color);
}

.bio-link {
  background-color: var(--button_color);
  color: var(--button_text_color);
}

[data-button-fill="button-outline"] .bio-link {
  background-color: transparent;
  color: var(--button_text_color);
  border: 2px solid var(--button_color);
}

[data-shadow-style="shadow-none"] .bio-link {
  box-shadow: none;
}

[data-shadow-style="shadow-soft"] .bio-link {
  box-shadow: 0 10px 15px -3px var(--button_shadow_color);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

[data-shadow-style="shadow-soft"] .bio-link:hover {
  box-shadow: 0 20px 25px -5px var(--button_shadow_color);
  transform: translateY(-2px);
}

[data-shadow-style="shadow-hard"] .bio-link {
  box-shadow: 4px 4px 0px 0px var(--button_shadow_color);
  border: 2px solid var(--button_shadow_color);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

[data-shadow-style="shadow-hard"] .bio-link:hover {
  border: 2px solid var(--button_shadow_color);
  box-shadow: 0px 0px 0px 0px var(--button_shadow_color);
  transform: translate(4px, 4px);
}

.bio-link:hover {
  background-color: var(--button_text_color);
  color: var(--button_color);
}

[data-button-fill="button-outline"] .bio-link:hover {
  background-color: var(--button_color);
  color: var(--button_text_color);
  border: 2px solid var(--button_color);
}



.bio-cta {
  background-color: var(--button_color);
  color: var(--button_text_color);
  overflow: visible;
}

[data-button-fill="button-outline"] .bio-cta {
  background-color: transparent;
  color: var(--button_text_color);
  border: 2px solid var(--button_color);
}

.bio-cta-btn {
  background-color: var(--button_text_color);
  color: var(--button_color);
  border: transparent;
}

.bio-cta-btn:hover {
  background-color: var(--button_color);
  color: var(--button_text_color);
  border: 2px solid var(--button_text_color);
}

[data-shadow-style="shadow-none"] .bio-cta {
  box-shadow: none;
}

[data-shadow-style="shadow-none"] .bio-cta-btn {
  box-shadow: none;
}

[data-shadow-style="shadow-soft"] .bio-cta {
  box-shadow: 0 10px 15px -3px var(--button_shadow_color);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

[data-shadow-style="shadow-soft"] .bio-cta-btn {
  box-shadow: 0 10px 15px -3px var(--button_shadow_color);
  transition: box-shadow 0.2s ease, transform 0.2s ease;

  will-change: transform, box-shadow;
  transform: translateZ(0); 

}

[data-shadow-style="shadow-hard"] .bio-cta {
  box-shadow: 4px 4px 0px 0px var(--button_shadow_color);
  border: 2px solid var(--button_shadow_color);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

[data-shadow-style="shadow-hard"] .bio-cta-btn {
  box-shadow: 4px 4px 0px 0px var(--button_shadow_color);
  border: 2px solid var(--button_shadow_color);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
} 

[data-shadow-style="shadow-soft"] .bio-cta-btn:hover {
  box-shadow: 0 20px 25px -5px var(--button_shadow_color);
  transform: translateY(-2px);
}


[data-shadow-style="shadow-hard"] .bio-cta-btn:hover {
  border: 2px solid var(--button_shadow_color);
  box-shadow: 0px 0px 0px 0px var(--button_shadow_color);
  transform: translate(4px, 4px);
}

[data-button-shape="rounded-none"]{
  --radius-box: 0rem;
  --rounded-box: 0rem;
  --rounded-btn: 0rem;
}

[data-button-shape="rounded-lg"] {
  --radius-box: 0.5rem;
  --rounded-box: 0.5rem;
  --rounded-btn: 0.5rem;
}

[data-button-shape="rounded-4xl"]  {
  --radius-box: 2rem;
  --rounded-box: 2rem;
  --rounded-btn: 2rem;
}

.input, .avatar > .page-link-image, .bio-cta-btn{
  border-radius: var(--radius-box);
}

.avatar img, 
.page-link-image img, 
.hero-image img {
  transform: translateZ(0);
  will-change: transform;
}

.avatar .w-32, 
.avatar .w-12 {
  display: block !important;
  min-width: 100%;
  min-height: 100%;
}

.hero-image {
  mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 90%, transparent);
}

.solid-bg-style {
    background-color: var(--bg_color_primary);
}

.gradient-bg-style {
  background-image: linear-gradient(180deg, var(--bg_color_primary) 25%, var(--bg_color_secondary));
}

.zigzag-bg-style {
  background-image: linear-gradient(135deg, var(--bg_color_secondary) 25%, transparent 25%),
    linear-gradient(225deg, var(--bg_color_secondary) 25%, transparent 25%),
    linear-gradient(45deg, var(--bg_color_secondary) 25%, transparent 25%),
    linear-gradient(315deg, var(--bg_color_secondary) 25%, var(--bg_color_primary) 25%);
  background-position:
    64px 0,
    64px 0,
    0 0,
    0 0;
  background-size: 128px 128px;
  background-repeat: repeat;
}

.polkadots-bg-style {
  background-image: radial-gradient(var(--bg_color_secondary) 20%, transparent 20%),
    radial-gradient(var(--bg_color_secondary) 20%, transparent 20%);
  background-color: var(--bg_color_primary);
  background-position:
    0 0,
    50px 50px;
  background-size: 100px 100px;
  background-repeat: repeat;
}

.checkerboard-bg-style {
  background-color: var(--bg_color_primary);
  background-image: repeating-linear-gradient(
      45deg,
      var(--bg_color_secondary) 25%,
      transparent 25%,
      transparent 75%,
      var(--bg_color_secondary) 75%,
      var(--bg_color_secondary)
    ),
    repeating-linear-gradient(
      45deg,
      var(--bg_color_secondary) 25%,
      var(--bg_color_primary) 25%,
      var(--bg_color_primary) 75%,
      var(--bg_color_secondary) 75%,
      var(--bg_color_secondary)
    );
  background-position:
    0 0,
    48px 48px;
  background-size: 96px 96px;
}

.wobble-attention { animation: wobble 2.8s both infinite; }
@keyframes wobble {
  0%, 40%, 100% { transform: translateX(0%) rotate(0deg); }
  7.5% { transform: rotate(-6deg); }
  15% { transform: rotate(6deg); }
  22.5% { transform: rotate(-3.6deg); }
  30% { transform: rotate(2.4deg); }
  37.5% { transform: rotate(-1.2deg); }
}