/* Quorlyx: global icon color + gradient rules
 * Primary: #B521D1 -> Detail: black
 * - Font icons get a top-to-bottom gradient (where supported)
 * - Inline SVGs and icons that use currentColor get the primary color
 *   plus a subtle drop shadow to show darker details.
 */
:root{
  --qlx-icon-primary: #B521D1;
  --qlx-icon-detail: #000000;
}

/* Ensure inline SVGs that look like icons inherit primary color (tailwind size classes, icon wrappers) */
svg[class*="h-"], svg[class*="w-"], svg[class*="icon"], svg[class*="qlx-icon"], .qlx-icon-shape svg, a svg {
  color: var(--qlx-icon-primary) !important;
  fill: currentColor;
  stroke: currentColor;
}

/* Apply primary color to common icon selectors and make SVGs use currentColor */
.fa, .fas, .far, .fal, .fab, [class*=" icon-"], .icon, .iconify, .qlx-icon-shape, .qlx-icon, .qlx-icon * {
  color: var(--qlx-icon-primary) !important;
  fill: currentColor;
  stroke: currentColor;
}

/* Subtle black detail for inline SVG strokes (adds depth) */
.qlx-icon-shape svg, svg[fill="none"], svg[stroke], svg {
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.45));
}

/* Gradient for font-based icons (fallback to solid color if not supported) */
.fa, .fas, .fab, .icon-font, .qlx-icon-font {
  background: linear-gradient(180deg, var(--qlx-icon-primary) 0%, var(--qlx-icon-detail) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

/* Ensure SVG sizing and alignment is consistent */
svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

/* Footer newsletter subscribe button: purple -> black gradient */
footer form.max-w-md button[type="submit"],
footer .max-w-md form button[type="submit"],
.qlx-subscribe-btn {
  background: linear-gradient(90deg, var(--qlx-icon-primary) 0%, var(--qlx-icon-detail) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

footer form.max-w-md button[type="submit"] svg,
.qlx-subscribe-btn svg {
  fill: currentColor;
  stroke: currentColor;
}

footer form.max-w-md button[type="submit"]:hover,
.qlx-subscribe-btn:hover {
  transform: translateY(-1px) scale(1.01) !important;
  box-shadow: 0 14px 22px -6px rgba(0,0,0,0.5) !important;
}