/* ============================================================
   DIGITAL DIVA — GOLDEN GRADIENT SYSTEM v1.0
   Every gold element uses the gradient, never flat color
   ============================================================ */

/* ── Gradient text utility class ── */
.dd-gold {
  background: var(--dd-grad, linear-gradient(135deg,#FFE082 0%,#D4A843 45%,#8B5E1A 100%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Override ALL flat gold heading colors ── */
.elementor-widget-heading .elementor-heading-title[style*="color: #d4a843"],
.elementor-widget-heading .elementor-heading-title[style*="color: #D4A843"],
.elementor-widget-heading .elementor-heading-title[style*="color: #e6a617"],
.elementor-widget-heading .elementor-heading-title[style*="color: #E6A617"],
.elementor-widget-heading .elementor-heading-title[style*="color: #f5a623"],
.elementor-widget-heading .elementor-heading-title[style*="color: #F5A623"],
.elementor-widget-heading .elementor-heading-title[style*="color: rgb(212, 168, 67)"],
.elementor-widget-heading .elementor-heading-title[style*="color: rgb(230, 166, 23)"],
.elementor-widget-heading .elementor-heading-title[style*="color: rgb(245, 166, 35)"] {
  background: linear-gradient(135deg,#FFE082 0%,#D4A843 45%,#8B5E1A 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ── Eyebrow / small label headings ── */
.elementor-widget-heading .elementor-heading-title.elementor-size-small,
.elementor-widget-heading .elementor-size-small {
  background: linear-gradient(135deg,#FFE082,#D4A843) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: 0.12em !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* ── Buttons — gradient fill ── */
.elementor-button,
.elementor-button-wrapper .elementor-button {
  background: linear-gradient(135deg,#FFE082 0%,#D4A843 45%,#8B5E1A 100%) !important;
  color: #0a0c28 !important;
  border: none !important;
  border-radius: 100px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 28px rgba(212,168,67,0.28) !important;
  transition:
    transform 0.25s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.25s ease !important;
}

.elementor-button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 44px rgba(212,168,67,0.48) !important;
  background: linear-gradient(135deg,#FFE082 0%,#F0C866 50%,#D4A843 100%) !important;
}

/* Keep sticky CTA buttons using their own colors */
.dd-sticky-cta a {
  background: inherit !important;
  color: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.dd-sticky-cta a:nth-child(1) { background: #1a1a2e !important; }
.dd-sticky-cta a:nth-child(2) { background: #25D366 !important; }
.dd-sticky-cta a:nth-child(3) { background: #E91E8C !important; }

/* ── Icon colors → gold ── */
.elementor-icon i,
.elementor-icon svg {
  color: var(--dd-gold-2, #D4A843) !important;
  fill: var(--dd-gold-2, #D4A843) !important;
  transition: filter 0.3s ease !important;
}

.elementor-widget-icon-box:hover .elementor-icon i,
.elementor-widget-icon-box:hover .elementor-icon svg {
  filter: drop-shadow(0 0 8px rgba(212,168,67,0.55)) !important;
}

/* Icon background wrapper */
.elementor-icon-box-icon .elementor-icon {
  background: linear-gradient(135deg,
    rgba(255,224,130,0.14) 0%,
    rgba(139,94,26,0.07) 100%) !important;
  border: 1px solid rgba(212,168,67,0.22) !important;
  border-radius: 14px !important;
}

/* ── Counter numbers ── */
.elementor-counter .elementor-counter-number-wrapper,
.elementor-counter .elementor-counter-number {
  background: linear-gradient(135deg,#FFE082 0%,#D4A843 45%,#8B5E1A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 300 !important;
}

/* ── Divider lines ── */
.elementor-divider-separator {
  background: linear-gradient(90deg,
    transparent 0%, #D4A843 20%, #FFE082 50%,
    #D4A843 80%, transparent 100%) !important;
  border: none !important;
  height: 1px !important;
  opacity: 0.5;
}

/* ── Nav links gold on hover ── */
.elementor-nav-menu a:hover {
  color: #D4A843 !important;
}

/* ── Mobile: gradient text can flicker on some devices ── */
@media (max-width: 480px) {
  .elementor-counter .elementor-counter-number-wrapper,
  .elementor-counter .elementor-counter-number {
    -webkit-text-fill-color: #D4A843 !important;
  }
}