/* ═════════════════════════════════════════════════════════════════════
   PRATEEK JEWELLERS — LUXURY ROTATING GRADIENT BUTTONS & PILLS
   Built faithfully from Hyperiux Vault: https://vault.hyperiux.com
   Theme 1: Royal 24K Gold & Champagne Diamond (Main CTAs)
   Theme 2: Dark Matte Gray, Brushed Titanium & Slate Platinum (Navbar)
   ═════════════════════════════════════════════════════════════════════ */

@property --r {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotateGradient {
  0% {
    --r: 0deg;
  }
  100% {
    --r: 360deg;
  }
}

/* ── Base Rotating Gradient Button ── */
.rotatingGradient,
.gradient-btn {
  --color-background: #090B0E;
  --color-background-hover: #12151D;
  --color-text: #FAF6EE;
  --color-text-hover: #FFFFFF;
  --btn-gold-1: #D4AF37;
  --btn-gold-2: #FFF4BC;
  --btn-gold-3: #9E7422;
  --btn-gold-4: #FFDF73;
  --btn-border-width: 2px;
  
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px; /* rounded-[50px] */
  cursor: pointer;
  background: conic-gradient(
    from var(--r, 0deg),
    var(--btn-gold-1) 0deg,
    var(--btn-gold-2) 65deg,
    var(--btn-gold-3) 130deg,
    rgba(255, 244, 188, 0.25) 180deg,
    var(--btn-gold-3) 230deg,
    var(--btn-gold-2) 295deg,
    var(--btn-gold-1) 360deg
  );
  animation: rotateGradient 4s linear infinite;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65), 0 0 16px rgba(212, 175, 55, 0.22);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease;
  overflow: visible;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
  border: none;
  outline: none;
}

/* Inset Dark Luxury Background Layer */
.rotatingGradient::after,
.gradient-btn::after {
  content: "";
  display: block;
  position: absolute;
  inset: var(--btn-border-width, 2px);
  border-radius: 9999px;
  background: var(--color-background, #090B0E);
  z-index: 1;
  transition: background 0.3s ease, opacity 0.3s ease;
}

/* Inner Label & Font */
.rotatingGradient .label,
.rotatingGradient > span.label,
.gradient-btn .label,
.gradient-btn > span.label {
  position: relative;
  z-index: 10;
  color: var(--color-text, #FAF6EE);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.2s ease;
  white-space: nowrap;
}

/* SVG Icons inside Button */
.rotatingGradient svg,
.gradient-btn svg {
  position: relative;
  z-index: 10;
  color: var(--btn-gold-2, #FFF4BC);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

/* Hover State: Glowing Aura & Faster Rotation */
.rotatingGradient:hover,
.gradient-btn:hover {
  transform: translateY(-2px) scale(1.025);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.75), 0 0 25px rgba(212, 175, 55, 0.55), 0 0 12px rgba(255, 244, 188, 0.3);
  animation-duration: 2s;
}

.rotatingGradient:hover::after,
.gradient-btn:hover::after {
  background: var(--color-background-hover, #12151D);
}

.rotatingGradient:hover .label,
.gradient-btn:hover .label {
  color: var(--color-text-hover, #FFFFFF);
  text-shadow: 0 0 15px rgba(255, 244, 188, 0.65);
}

.rotatingGradient:hover svg,
.gradient-btn:hover svg {
  transform: translateX(3px);
  color: #FFFFFF;
}

/* Active / Pressed State */
.rotatingGradient:active,
.gradient-btn:active {
  transform: translateY(0) scale(0.98);
}

/* Disabled State */
.rotatingGradient[disabled],
.rotatingGradient[aria-disabled="true"],
.gradient-btn[disabled],
.gradient-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═════════════════════════════════════════════════════════════════════
   DARK MATTE GRAY ROTATING GRADIENT VARIANT (STEALTH NOIR)
   Requested: "dark mattly gray esi source code ka use kerke"
   ═════════════════════════════════════════════════════════════════════ */

.rotatingGradient--matte-gray,
.gradient-btn--matte-gray {
  --color-background: #0B0D12;
  --color-background-hover: #13161F;
  --color-text: #D2D9E3;
  --color-text-hover: #FFFFFF;
  --matt-gray-1: #1C2028;
  --matt-gray-2: #323A47;
  --matt-gray-3: #586375;
  --matt-gray-4: #242933;
  --matt-gray-5: #14171E;
  --btn-border-width: 1.5px;

  background: conic-gradient(
    from var(--r, 0deg),
    var(--matt-gray-1) 0deg,
    var(--matt-gray-2) 60deg,
    var(--matt-gray-3) 120deg,
    rgba(88, 99, 117, 0.25) 180deg,
    var(--matt-gray-4) 240deg,
    var(--matt-gray-2) 300deg,
    var(--matt-gray-1) 360deg
  ) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 6px rgba(88, 99, 117, 0.1) !important;
}

.rotatingGradient--matte-gray::after,
.gradient-btn--matte-gray::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: var(--btn-border-width, 1.5px) !important;
  border-radius: 9999px !important;
  background: var(--color-background, #0B0D12) !important;
  z-index: 1 !important;
  opacity: 1 !important;
  transform: none !important;
}

.rotatingGradient--matte-gray:hover,
.gradient-btn--matte-gray:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75), 0 0 12px rgba(88, 99, 117, 0.3) !important;
  animation-duration: 2.2s;
}

.rotatingGradient--matte-gray:hover::after,
.gradient-btn--matte-gray:hover::after {
  background: var(--color-background-hover, #13161F) !important;
}

/* ═════════════════════════════════════════════════════════════════════
   NAVBAR: TIER 2 CATEGORY PILL BUTTONS (DARK MATTE GRAY)
   ═════════════════════════════════════════════════════════════════════ */

.nav-bottom-tier {
  overflow-y: visible !important;
  padding: 8px clamp(1rem, 3.5vw, 2.5rem) 9px !important;
}

.nav-categories-list {
  gap: clamp(0.45rem, 0.85vw, 0.75rem) !important;
}

.nav-category-link.rotatingGradient,
.nav-category-link.gradient-btn {
  height: 33px;
  padding: 0 14px;
  gap: 7px;
  border-radius: 9999px;
  text-decoration: none;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #D2D9E3 !important;
  box-sizing: border-box;
  transition: all 0.25s ease;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
}

/* Ensure ::after forms inner dark cutout, overriding navbar underline */
.nav-category-link.rotatingGradient::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 1.5px !important;
  border-radius: 9999px !important;
  background: var(--color-background, #0B0D12) !important;
  opacity: 1 !important;
  transform: none !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.nav-category-link.rotatingGradient .nav-category-icon {
  width: 15px;
  height: 15px;
  stroke: #9CA8B8;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  pointer-events: none !important;
  transition: stroke 0.25s ease, transform 0.25s ease;
}

.nav-category-link.rotatingGradient span {
  position: relative;
  z-index: 10;
  color: inherit;
  white-space: nowrap;
  pointer-events: none !important;
}

.nav-category-link.rotatingGradient:hover,
.nav-category-link.rotatingGradient.mega-nav-active {
  color: #FFFFFF !important;
}

.nav-category-link.rotatingGradient:hover .nav-category-icon,
.nav-category-link.rotatingGradient.mega-nav-active .nav-category-icon {
  stroke: #FFFFFF;
  transform: translateY(-1px) scale(1.08);
}

.nav-category-link.rotatingGradient.mega-nav-active {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75), 0 0 14px rgba(88, 99, 117, 0.4) !important;
}

.nav-category-link.rotatingGradient.mega-nav-active::after {
  background: #151821 !important;
}

/* ═════════════════════════════════════════════════════════════════════
   NAVBAR: TOP TIER SEARCH BAR (DARK MATTE GRAY)
   ═════════════════════════════════════════════════════════════════════ */

.nav-search-bar.rotatingGradient {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 44px;
  padding: 0 16px;
  gap: 10px !important;
  border-radius: 9999px;
  border: none !important;
  cursor: text !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.3) !important;
  box-sizing: border-box;
}

.nav-search-bar.rotatingGradient::after {
  background: #0F1219 !important;
}

.nav-search-bar.rotatingGradient .nav-search-icon,
.nav-search-bar.rotatingGradient .nav-search-input,
.nav-search-bar.rotatingGradient .nav-search-actions,
.nav-search-bar.rotatingGradient .nav-search-tool-btn {
  position: relative;
  z-index: 10;
}

.nav-search-bar.rotatingGradient:focus-within {
  box-shadow: 0 0 22px rgba(146, 157, 172, 0.38), 0 4px 18px rgba(0, 0, 0, 0.75) !important;
  animation-duration: 2s;
}

.nav-search-bar.rotatingGradient:focus-within::after {
  background: #141822 !important;
}

/* ═════════════════════════════════════════════════════════════════════
   NAVBAR: TOP TIER UTILITY ACTION ICONS (DARK MATTE GRAY)
   ═════════════════════════════════════════════════════════════════════ */

.nav-icon-btn.rotatingGradient {
  width: 38px;
  height: 38px;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
}

.nav-icon-btn.rotatingGradient::after {
  border-radius: 50% !important;
  background: #0C0E14 !important;
}

.nav-icon-btn.rotatingGradient svg {
  width: 20px;
  height: 20px;
  stroke: #C5CBD3;
  position: relative;
  z-index: 10;
  transition: stroke 0.25s ease, transform 0.25s ease;
}

.nav-icon-btn.rotatingGradient:hover svg {
  stroke: #FFFFFF;
  transform: translateY(-1px) scale(1.08);
}

.nav-icon-btn.rotatingGradient .nav-cart-badge,
.nav-icon-btn.rotatingGradient .nav-wishlist-count {
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 25 !important;
}

.nav-icon-btn.rotatingGradient .nav-rate-live-dot {
  position: absolute;
  top: 3.5px;
  right: 3.5px;
  z-index: 20;
}

/* ═════════════════════════════════════════════════════════════════════
   NAVBAR: SEARCH CHIPS (DARK MATTE GRAY)
   ═════════════════════════════════════════════════════════════════════ */

.nav-search-chip.rotatingGradient {
  height: 32px;
  padding: 0 14px;
  border-radius: 9999px;
  border: none !important;
}

.nav-search-chip.rotatingGradient::after {
  background: #141720 !important;
}

.nav-search-chip.rotatingGradient .label {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  color: #D2D9E3;
  text-transform: none;
}

/* ═════════════════════════════════════════════════════════════════════
   SPECIFIC BUTTON OVERRIDES ACROSS ACTIVE SECTIONS (ROYAL GOLD)
   ═════════════════════════════════════════════════════════════════════ */

/* 1. 3D Poem Showroom CTA */
.poem-cta-btn.rotatingGradient,
.poem-cta-btn.gradient-btn {
  height: 44px;
  padding: 0 24px;
  background: conic-gradient(
    from var(--r, 0deg),
    var(--btn-gold-1) 0deg,
    var(--btn-gold-2) 65deg,
    var(--btn-gold-3) 130deg,
    rgba(255, 244, 188, 0.25) 180deg,
    var(--btn-gold-3) 230deg,
    var(--btn-gold-2) 295deg,
    var(--btn-gold-1) 360deg
  ) !important;
  color: inherit !important;
}

.poem-cta-btn.rotatingGradient .label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
}

/* 2. Concierge Service Card CTAs */
.service-card-cta.rotatingGradient,
.service-card-cta.gradient-btn {
  height: 42px;
  padding: 0 22px;
  margin-top: auto;
  align-self: flex-start;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(212, 175, 55, 0.25);
  background: conic-gradient(
    from var(--r, 0deg),
    var(--btn-gold-1) 0deg,
    var(--btn-gold-2) 65deg,
    var(--btn-gold-3) 130deg,
    rgba(255, 244, 188, 0.25) 180deg,
    var(--btn-gold-3) 230deg,
    var(--btn-gold-2) 295deg,
    var(--btn-gold-1) 360deg
  ) !important;
}

.service-card-cta.rotatingGradient .label {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
}

.service-card-cta.rotatingGradient .service-card-arrow-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  position: relative;
  z-index: 10;
}

/* 3. Curated Gender Action CTAs */
.curated-link.rotatingGradient,
.curated-link.gradient-btn {
  height: 38px;
  padding: 0 20px;
  margin-top: 10px;
  border-bottom: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 12px rgba(212, 175, 55, 0.2);
  background: conic-gradient(
    from var(--r, 0deg),
    var(--btn-gold-1) 0deg,
    var(--btn-gold-2) 65deg,
    var(--btn-gold-3) 130deg,
    rgba(255, 244, 188, 0.25) 180deg,
    var(--btn-gold-3) 230deg,
    var(--btn-gold-2) 295deg,
    var(--btn-gold-1) 360deg
  ) !important;
}

.curated-link.rotatingGradient .label {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
}

/* 4. Footer Back to Top Button */
.footer-back-to-top.rotatingGradient,
.footer-back-to-top.gradient-btn {
  height: 42px;
  padding: 0 22px;
  border: none !important;
  background: conic-gradient(
    from var(--r, 0deg),
    var(--btn-gold-1) 0deg,
    var(--btn-gold-2) 65deg,
    var(--btn-gold-3) 130deg,
    rgba(255, 244, 188, 0.25) 180deg,
    var(--btn-gold-3) 230deg,
    var(--btn-gold-2) 295deg,
    var(--btn-gold-1) 360deg
  ) !important;
}

.footer-back-to-top.rotatingGradient .label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
}

/* ═════════════════════════════════════════════════════════════════════
   MOBILE & PERFORMANCE OPTIMIZATIONS (ZERO JITTER / 120 FPS STABILITY)
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px), (hover: none) {
  .rotatingGradient,
  .gradient-btn {
    animation: none !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.45), rgba(197, 203, 211, 0.25)) !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    transform: none !important;
  }

  .rotatingGradient:hover,
  .gradient-btn:hover {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  }

  .rotatingGradient:active,
  .gradient-btn:active {
    transform: scale(0.98) !important;
    opacity: 0.9 !important;
  }

  .rotatingGradient--matte-gray,
  .gradient-btn--matte-gray {
    background: rgba(22, 26, 33, 0.92) !important;
    border: 1px solid rgba(197, 203, 211, 0.2) !important;
  }
}