/*
  Custom Silktide Cookie Banner Styles
  Override default Silktide styles to match LinqShop design
*/

#silktide-wrapper {
  /* Brand colors - clean, modern design */
  --primaryColor: #18181b;        /* zinc-900 for light mode */
  --backgroundColor: #ffffff;
  --textColor: #3f3f46;           /* zinc-700 */
  --fontFamily: 'Plus Jakarta Sans', 'Geist', system-ui, sans-serif;

  /* Shadows - subtle and modern */
  --boxShadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  /* Cookie icon */
  --cookieIconColor: #18181b;
  --cookieIconBackgroundColor: #ffffff;
}

/* Dark mode support - using your app's .dark class */
.dark #silktide-wrapper {
  --primaryColor: #f4f4f5;      /* zinc-100 for dark mode */
  --backgroundColor: #18181b;   /* zinc-900 */
  --textColor: #d4d4d8;         /* zinc-300 */
  --cookieIconColor: #f4f4f5;
  --cookieIconBackgroundColor: #27272a; /* zinc-800 */
  --backdropBackgroundColor: rgba(0, 0, 0, 0.7);
}

/* Dark mode button styles */
.dark #silktide-wrapper .st-button {
  color: #18181b;
  background-color: #f4f4f5;
  border-color: #f4f4f5;
}

.dark #silktide-wrapper .st-button--primary:hover {
  background-color: #e4e4e7; /* zinc-200 */
  border-color: #e4e4e7;
}

/* Dark mode links */
.dark #silktide-wrapper a {
  color: #e4e4e7;
}

.dark #silktide-wrapper a:hover {
  color: #f4f4f5;
}

/* Dark mode cookie text link */
.dark #silktide-wrapper #silktide-cookie-icon:has(.cookie-text) {
  color: #a1a1aa; /* zinc-400 - more visible */
}

/* Hide "Get this banner for free" link */
#silktide-modal footer a {
  display: none !important;
}

/* Hide Silktide logo in banner */
#silktide-banner a.silktide-logo {
  display: none !important;
}

/* Adjust modal footer spacing without the credit link */
#silktide-modal footer {
  justify-content: flex-start;
  gap: 12px;
}

@media (min-width: 600px) {
  #silktide-modal footer {
    justify-content: flex-start;
  }
}

/* Button improvements */
#silktide-wrapper .st-button {
  font-weight: 500;
  transition: all 0.2s ease;
}

#silktide-wrapper .st-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.1);
}

/* Banner rounded corners */
#silktide-banner {
  border-radius: 12px;
}

#silktide-modal {
  border-radius: 12px;
}

/* Preferences button styling */
#silktide-banner button.preferences {
  color: var(--textColor);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

#silktide-banner button.preferences:hover {
  color: var(--primaryColor);
}