/* Lightning Pay Card - Premium Glass + Neon Style */
:root {
  --neon-lightning: #f7931a;
  /* Bitcoin Orange */
  --neon-blue: #00f3ff;
  --glass-bg: rgba(10, 10, 15, 0.85);
  --glass-border: rgba(255, 255, 255, 0.1);
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
}

/* Card Container - Credit Card Format (narrow, tall, auto-growing) */
.lightning-card {
  position: relative;
  width: 100%;
  min-height: 640px;
  height: auto;
  max-height: none;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(145deg, #0a0a0f, #121218);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  padding: 22px 22px;
  box-sizing: border-box;
  --mx: 50%;
  --my: 50%;
}

/* 6) Premium Grain Texture (CSS-only) */
.lightning-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.03) 0px,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px,
      transparent 4px);
  opacity: 0.2;
  pointer-events: none;
  z-index: 1;
}

/* 3) Spotlight Hover Effect */
.lightning-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(600px circle at var(--mx) var(--my),
      rgba(255, 255, 255, 0.08),
      transparent 40%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 2;
}

.lightning-card:hover::before {
  opacity: 1;
}

.lightning-card:hover {
  border-color: rgba(247, 147, 26, 0.4);
  box-shadow: 0 0 20px rgba(247, 147, 26, 0.15);
  transform: translateY(-3px);
}

/* Background Effect (Ambient) */
.lightning-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 30%, rgba(247, 147, 26, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.lightning-content {
  position: relative;
  z-index: 10;
  padding: 6px 0 2px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: hidden;
  overflow-y: visible;
}

/* Fade gradient at bottom when scrollable */

/* Header - Enhanced spacing for vertical format */
.lightning-header {
  text-align: center;
  margin-bottom: 24px;
}

.lightning-title {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  color: var(--neon-lightning);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(247, 147, 26, 0.3);
}

.lightning-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 300;
}

/* Logos & Chips - Optimized vertical spacing */
.lightning-visuals {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.lightning-logos {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.lightning-svg {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 0 8px rgba(247, 147, 26, 0.4));
  transition: transform 0.3s ease;
}

/* 2) Spark Animation on Lightning Icon */
.lightning-svg.bolt {
  color: var(--neon-lightning);
}

/* When hovering the MAIN CTA (target via JS or parent hover) - Let's use parent hover for simplicity or a specific class */
.lightning-card:hover .lightning-svg.bolt {
  animation: pulse-bolt 2s infinite ease-in-out;
}

@keyframes pulse-bolt {

  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 8px rgba(247, 147, 26, 0.4));
  }

  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(247, 147, 26, 0.8));
  }
}

.lightning-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* 5) Chips Micro-flip / Shimmer */
.lightning-chip {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.lightning-chip::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.lightning-chip:hover {
  transform: perspective(500px) rotateX(10deg);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.lightning-chip:hover::before {
  left: 100%;
}

/* Stepper - Enhanced for vertical layout */
.lightning-stepper {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.stepper-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  position: relative;
}

/* 4) Stepper Progress Line */
.stepper-steps::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 0;
  transform: translateY(-50%);
}

/* We can use a pseudo-element on the active step to simulate the progress bar filling up to it, 
   or just style the active steps. Given the structure, simple active highlighting is safer without complex JS math. 
   Let's enhance the active dot idea. */

.step-item {
  position: relative;
  z-index: 1;
  background: #1a1a20;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 5px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #888;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.step-item.active {
  background: rgba(247, 147, 26, 0.1);
  border-color: var(--neon-lightning);
  color: #fff;
  box-shadow: 0 0 10px rgba(247, 147, 26, 0.3);
}

.step-helper-text {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: #ccc;
  min-height: 1.2em;
  transition: opacity 0.3s ease;
}

/* CTAs */
.lightning-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-bottom: 8px;
  flex-shrink: 0;
}

/* 1) Electric Pulse on Primary CTA */
.btn-lightning-primary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  background: linear-gradient(90deg, #ff8c00, #ffba00);
  color: #000;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  border-radius: 4px;
  /* Slightly nicer radius */
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: all 0.3s ease;
  text-decoration: none;
  overflow: hidden;
  /* For shimmer inside if needed, but we use pulse outside */
  isolation: isolate;
}

/* Sparkle/Pulse Effect Wrapper could be needed if we want it *outside* the button, 
   but we can use ::before/::after on the button itself if we handle z-index carefully. */
.btn-lightning-primary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(transparent,
      rgba(255, 255, 255, 0.8),
      transparent 30%);
  animation: rotate-pulse 2s linear infinite;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: -1;
  border-radius: 40%;
  /* imperfect circle for organic feel */
}

/* Inner Background to cover the center of the conic gradient */
.btn-lightning-primary::after {
  content: '';
  position: absolute;
  inset: 2px;
  /* Border width */
  background: linear-gradient(90deg, #ff8c00, #ffba00);
  border-radius: 2px;
  z-index: -1;
}

.btn-lightning-primary:hover,
.btn-lightning-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(255, 186, 0, 0.5);
  outline: none;
}

.btn-lightning-primary:hover::before,
.btn-lightning-primary:focus-visible::before {
  opacity: 1;
}

@keyframes rotate-pulse {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.lightning-secondary-group {
  display: flex;
  gap: 10px;
}

.btn-lightning-secondary {
  flex: 1;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #aaa;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-lightning-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}


/* How it works link */
.lightning-info-link {
  text-align: center;
  margin-top: 10px;
}

.info-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #666;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.3s;
}

.info-link:hover {
  color: var(--neon-lightning);
}

/* Modal */
.lightning-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.lightning-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lightning-modal {
  background: #121215;
  border: 1px solid var(--neon-lightning);
  border-radius: 12px;
  padding: 30px;
  max-width: 450px;
  width: 90%;
  position: relative;
  box-shadow: 0 0 40px rgba(247, 147, 26, 0.2);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.lightning-modal-overlay.active .lightning-modal {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  color: #666;
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.3s;
}

.modal-close:hover {
  color: #fff;
}

.modal-content h3 {
  font-family: 'Cinzel', serif;
  color: var(--neon-lightning);
  margin-bottom: 20px;
  text-align: center;
}

.modal-steps-list {
  list-style: none;
  padding: 0;
  margin-bottom: 25px;
}

.modal-steps-list li {
  font-family: 'Inter', sans-serif;
  color: #ccc;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-icon {
  font-size: 1.2rem;
}

.modal-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  background: var(--neon-lightning);
  color: #000;
  border: none;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.3s ease;
}

.modal-btn:hover {
  background: #ffba00;
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {

  .lightning-svg,
  .btn-lightning-primary::before,
  .lightning-chip,
  .lightning-card,
  .lightning-card::before,
  .step-item {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .lightning-card::before,
  .btn-lightning-primary::before {
    display: none;
    /* Hide moving gradient effects */
  }

  .lightning-chip:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.3);
  }

  .btn-lightning-primary:hover {
    transform: none;
    box-shadow: 0 0 0 2px rgba(255, 186, 0, 0.5);
    /* Static focus ring instead */
  }
}

/* =========================================================================
   METALLIC PREMIUM SKIN (Gold/Platinum Card)
   ========================================================================= */

/* Metal Variables */
.lightning-card--metal {
  --metal-gold: #d4af37;
  --metal-platinum: #e5e4e2;
  --metal-dark: #2a2520;
  --metal-highlight: #f7f5e8;
  --shine-color: rgba(255, 255, 255, 0.4);
}

/* A) Base Metallic Background with Brushed Texture */
.lightning-card--metal {
  background:
    /* Top highlight */
    radial-gradient(ellipse 100% 40% at 50% 0%, rgba(247, 245, 232, 0.08), transparent 70%),
    /* Center specular highlight */
    radial-gradient(circle at 40% 30%, rgba(212, 175, 55, 0.15), transparent 50%),
    /* Metal base gradient (gold to darker gold) */
    linear-gradient(135deg,
      #1a1510 0%,
      #2a2520 20%,
      #3a3020 40%,
      #2a2520 60%,
      #1a1510 100%),
    /* Brushed metal lines (vertical) */
    repeating-linear-gradient(90deg,
      rgba(212, 175, 55, 0.03) 0px,
      rgba(212, 175, 55, 0.03) 1px,
      transparent 1px,
      transparent 3px);
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.1),
    inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}

/* B) Premium Bevel Border (Double Border Effect) */
.lightning-card--metal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(135deg,
      rgba(212, 175, 55, 0.6) 0%,
      rgba(229, 228, 226, 0.8) 25%,
      rgba(212, 175, 55, 0.6) 50%,
      rgba(229, 228, 226, 0.8) 75%,
      rgba(212, 175, 55, 0.6) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
  pointer-events: none;
  z-index: 3;
}

/* C) Shine Sweep Effect (Diagonal Light Sweep on Hover) */
.lightning-card--metal::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg,
      transparent 30%,
      rgba(255, 255, 255, 0.1) 45%,
      rgba(212, 175, 55, 0.3) 50%,
      rgba(255, 255, 255, 0.1) 55%,
      transparent 70%);
  opacity: 0;
  transform: translate(-100%, -100%);
  pointer-events: none;
  z-index: 4;
  transition: none;
}

.lightning-card--metal:hover::after,
.lightning-card--metal:focus-within::after {
  opacity: 1;
  animation: shine-sweep 1.4s ease-out;
}

@keyframes shine-sweep {
  0% {
    transform: translate(-100%, -100%);
  }

  100% {
    transform: translate(50%, 50%);
  }
}

/* D) Enhanced Hover State */
.lightning-card--metal:hover {
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow:
    0 15px 50px rgba(212, 175, 55, 0.25),
    0 0 30px rgba(212, 175, 55, 0.15),
    inset 0 1px 3px rgba(255, 255, 255, 0.15),
    inset 0 -1px 3px rgba(0, 0, 0, 0.4);
  transform: translateY(-4px);
}

/* E) Premium Icons with Gold Glow */
.lightning-card--metal .lightning-svg.btc {
  stroke: var(--metal-gold);
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.6));
}

.lightning-card--metal .lightning-svg.bolt {
  color: var(--metal-gold);
  filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.7));
}

/* Enhanced bolt pulse on hover */
.lightning-card--metal:hover .lightning-svg.bolt {
  animation: pulse-bolt-metal 2s infinite ease-in-out;
}

@keyframes pulse-bolt-metal {

  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.7));
  }

  50% {
    transform: scale(1.15);
    filter: drop-shadow(0 0 25px rgba(212, 175, 55, 1)) drop-shadow(0 0 35px rgba(255, 255, 0, 0.4));
  }
}

/* F) Metal Title with Embossed Effect */
.lightning-card--metal .lightning-title {
  color: var(--metal-gold);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(212, 175, 55, 0.4),
    0 -1px 1px rgba(255, 255, 255, 0.2);
  font-weight: 700;
}

.lightning-card--metal .lightning-subtitle {
  color: rgba(229, 228, 226, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* G) Premium Chips */
.lightning-card--metal .lightning-chip {
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: var(--metal-platinum);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.lightning-card--metal .lightning-chip:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.5);
  color: #fff;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* H) Gold Metallic CTA Button */
.lightning-card--metal .btn-lightning-primary {
  background: linear-gradient(135deg,
      #c9a050 0%,
      #d4af37 25%,
      #f0d878 50%,
      #d4af37 75%,
      #c9a050 100%);
  color: #1a1510;
  font-weight: 800;
  border: 2px solid rgba(212, 175, 55, 0.4);
  box-shadow:
    0 4px 15px rgba(212, 175, 55, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* Electric Pulse Effect (conic gradient border) */
.lightning-card--metal .btn-lightning-primary::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: conic-gradient(from 0deg,
      transparent,
      rgba(212, 175, 55, 0.8),
      rgba(255, 255, 0, 0.6),
      rgba(212, 175, 55, 0.8),
      transparent 30%);
  border-radius: 6px;
  opacity: 0;
  animation: none;
  z-index: -2;
}

.lightning-card--metal .btn-lightning-primary:hover::before,
.lightning-card--metal .btn-lightning-primary:focus-visible::before {
  opacity: 1;
  animation: electric-pulse 1.6s linear infinite;
}

@keyframes electric-pulse {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.lightning-card--metal .btn-lightning-primary::after {
  background: linear-gradient(135deg,
      #c9a050 0%,
      #d4af37 25%,
      #f0d878 50%,
      #d4af37 75%,
      #c9a050 100%);
  inset: 0;
  border-radius: 4px;
}

.lightning-card--metal .btn-lightning-primary:hover,
.lightning-card--metal .btn-lightning-primary:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 6px 25px rgba(212, 175, 55, 0.5),
    0 0 30px rgba(212, 175, 55, 0.3),
    inset 0 1px 3px rgba(255, 255, 255, 0.4),
    inset 0 -1px 3px rgba(0, 0, 0, 0.3);
}


/* =========================================================================
   LAYOUT FIXES (USER REQUEST)
   ========================================================================= */
/* Override height and spacing for better distribution (Compact Mode) */
.lightning-card.nyx-card--bitcoin {
  min-height: unset !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding-bottom: 24px !important;
  justify-content: flex-start !important;
}

.nyx-card--bitcoin .lightning-header {
  margin-bottom: 12px !important;
}

.nyx-card--bitcoin .lightning-visuals {
  margin-bottom: 16px !important;
  gap: 12px !important;
}

.nyx-card--bitcoin .lightning-stepper {
  margin-bottom: 16px !important;
  padding: 12px 16px !important;
  flex-grow: 1;
  /* Allow it to fill space if needed, but not force expansion */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nyx-card--bitcoin .lightning-actions {
  margin-top: 0 !important;
  /* Remove auto bracket */
  gap: 12px !important;
}

.nyx-card--bitcoin .lightning-info-link {
  margin-top: 8px !important;
}

/* I) Electric Spark on CTA Hover (micro-interaction on bolt icon) */
.lightning-card--metal:hover .lightning-svg.bolt,
.lightning-card--metal .btn-lightning-primary:hover~.lightning-header .lightning-svg.bolt,
.lightning-card--metal .btn-lightning-primary:focus-visible~.lightning-header .lightning-svg.bolt {
  animation: electric-spark 0.5s ease-out;
}

@keyframes electric-spark {

  0%,
  100% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.08) rotate(-5deg);
  }

  75% {
    transform: scale(1.08) rotate(5deg);
  }
}

/* J) Stepper Enhancement */
.lightning-card--metal .lightning-stepper {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.lightning-card--metal .step-item.active {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--metal-gold);
  box-shadow:
    0 0 15px rgba(212, 175, 55, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

/* K) Secondary Buttons */
.lightning-card--metal .btn-lightning-secondary {
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: var(--metal-platinum);
}

.lightning-card--metal .btn-lightning-secondary:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.2);
}

/* L) Reduced Motion - Disable Metal Animations */
@media (prefers-reduced-motion: reduce) {
  .lightning-card--metal::after {
    display: none;
  }

  .lightning-card--metal .btn-lightning-primary::before {
    display: none;
  }

  .lightning-card--metal .lightning-svg.bolt {
    animation: none !important;
  }

  .lightning-card--metal:hover {
    transform: none;
  }

  .lightning-card--metal .btn-lightning-primary:hover {
    transform: none;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5);
  }
}

/* Mobile & Low Height Viewports */
@media (max-height: 800px) {
  .lightning-card {
    min-height: 600px;
  }

  .lightning-content {
    padding: 4px 0 2px;
  }

  .lightning-header {
    margin-bottom: 18px;
  }

  .lightning-visuals {
    gap: 14px;
    margin-bottom: 18px;
  }

  .lightning-svg {
    width: 42px;
    height: 42px;
  }

  .lightning-stepper {
    padding: 14px;
    margin-bottom: 18px;
  }
}

@media (max-height: 700px) {
  .lightning-card {
    min-height: 580px;
  }

  .lightning-content {
    padding: 4px 0 2px;
  }

  .lightning-title {
    font-size: 1.2rem;
    margin-bottom: 6px;
  }

  .lightning-subtitle {
    font-size: 0.85rem;
  }

  .lightning-header {
    margin-bottom: 14px;
  }

  .lightning-visuals {
    gap: 12px;
    margin-bottom: 14px;
  }

  .lightning-svg {
    width: 38px;
    height: 38px;
  }

  .lightning-chip {
    font-size: 0.65rem;
    padding: 3px 8px;
  }

  .lightning-stepper {
    padding: 12px;
    margin-bottom: 14px;
  }

  .step-item {
    padding: 4px 10px;
    font-size: 0.7rem;
  }

  .step-helper-text {
    font-size: 0.75rem;
  }

  .btn-lightning-primary {
    padding: 10px;
    font-size: 0.9rem;
  }

  .btn-lightning-secondary {
    padding: 7px;
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .lightning-card {
    min-height: 600px;
  }

  .lightning-content {
    padding: 4px 0 2px;
  }

  .lightning-logos {
    gap: 15px;
  }

  .lightning-svg {
    width: 36px;
    height: 36px;
  }

  .lightning-secondary-group {
    flex-direction: column;
    gap: 8px;
  }

  .btn-lightning-secondary {
    flex: none;
  }
}

/* =========================================================================
   NYX PORTAL — WIDE PANEL CENTERED LAYOUT (fix v3)
   Scoped under .nyx-portal so nothing outside is affected.
   ========================================================================= */

/* Section padding & centering */
#wallpapers-external {
  padding: 100px 5%;
  text-align: center;
}

/* Root centering wrapper — replaces .wallpaper-grid for portal */
.nyx-portal {
  width: min(1020px, calc(100vw - 40px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nyx-portal__header {
  width: 100%;
  margin-bottom: 28px;
}

/* Method tabs bar */
.nyx-portal__tabs {
  max-width: 460px;
  margin: 0 auto 20px;
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 0;
}

/* Wide panel — override narrow card defaults
   (beats .nyx-btc-card--cyber-v2 and .nyx-btc-card--v2 !important rules
    that were setting width:clamp/max-width:480px and align-self:start,
    which pushed the card to the left edge of the flex-column .nyx-portal) */
.nyx-portal__panel.lightning-card {
  width: 100% !important;       /* override cyber-v2: width:clamp(360px,32vw,480px)!important */
  max-width: none !important;   /* override cyber-v2: max-width:480px!important */
  min-height: unset !important;
  border-radius: 16px;
  padding: 0;
  box-sizing: border-box;
  align-self: auto !important;  /* ROOT FIX: override cyber-v2's align-self:start
                                   so parent .nyx-portal { align-items:center } takes effect */
}

/* Neon carmine/purple accent for card mode (overrides orange) */
.nyx-portal__panel.pay-mode-card {
  border-color: rgba(255, 46, 99, 0.25);
}

.nyx-portal__panel.pay-mode-card:hover {
  border-color: rgba(255, 46, 99, 0.5);
  box-shadow: 0 0 30px rgba(255, 46, 99, 0.12);
}

.nyx-portal__panel.pay-mode-card .lightning-bg {
  background: radial-gradient(circle at 30% 30%, rgba(255, 46, 99, 0.06), transparent 65%);
}

/* 2-column grid inside panel */
.nyx-portal__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  flex-direction: unset;
  gap: 0;
  padding: 36px 40px;
  height: auto;
  align-items: start;
  justify-content: unset;
}

.nyx-portal__left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 36px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  text-align: left;
}

.nyx-portal__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 36px;
}

/* Left column overrides */
.nyx-portal__panel .lightning-header {
  text-align: left;
  margin-bottom: 0;
}

.nyx-portal__panel .lightning-title {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.nyx-portal__panel .lightning-chips {
  justify-content: flex-start;
}

.nyx-portal__panel .lightning-visuals {
  align-items: flex-start;
  margin-bottom: 0;
}

/* Right column overrides */
.nyx-portal__panel .lightning-stepper {
  margin-bottom: 0;
}

.nyx-portal__panel .lightning-actions {
  margin-top: 0;
}

/* Card mode: neon carmine/purple primary CTA */
.nyx-portal__panel.pay-mode-card .btn-lightning-primary {
  background: linear-gradient(90deg, #ff2e63, #9d4edd);
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 46, 99, 0.4);
  letter-spacing: 2px;
}

.nyx-portal__panel.pay-mode-card .btn-lightning-primary::after {
  background: linear-gradient(90deg, #ff2e63, #9d4edd);
}

.nyx-portal__panel.pay-mode-card .btn-lightning-primary:hover,
.nyx-portal__panel.pay-mode-card .btn-lightning-primary:focus-visible {
  box-shadow: 0 0 28px rgba(255, 46, 99, 0.5), 0 0 55px rgba(157, 78, 221, 0.2);
  transform: translateY(-2px);
}

.nyx-portal__panel.pay-mode-card .btn-lightning-primary::before {
  background: conic-gradient(transparent,
    rgba(255, 46, 99, 0.8),
    rgba(157, 78, 221, 0.6),
    transparent 30%);
}

/* Tabs: active state in card mode uses carmine */
.nyx-portal__tabs .method-tab.active[data-method="card"] {
  background: rgba(255, 46, 99, 0.18);
  border-color: #ff2e63;
  box-shadow: 0 0 12px rgba(255, 46, 99, 0.2);
}

/* Tabs: active state in bitcoin mode uses orange */
.nyx-portal__tabs .method-tab.active[data-method="bitcoin"] {
  background: rgba(247, 147, 26, 0.18);
  border-color: #f7931a;
  box-shadow: 0 0 12px rgba(247, 147, 26, 0.2);
}

/* Secondary buttons — always visible in right column */
.nyx-portal__panel .lightning-secondary-group {
  display: flex;
  gap: 10px;
}

/* Focus ring for accessibility */
.nyx-portal__panel .btn-lightning-primary:focus-visible,
.nyx-portal__panel .btn-lightning-secondary:focus-visible,
.nyx-portal__tabs .method-tab:focus-visible {
  outline: 2px solid rgba(255, 46, 99, 0.7);
  outline-offset: 3px;
}

.info-link:focus-visible {
  outline: 2px solid rgba(255, 46, 99, 0.7);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─── Tablet (900px) ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .nyx-portal__grid {
    padding: 28px 28px;
  }

  .nyx-portal__left {
    padding-right: 28px;
  }

  .nyx-portal__right {
    padding-left: 28px;
  }
}

/* ─── Mobile (≤640px): single column stack ───────────────────── */
@media (max-width: 640px) {
  #wallpapers-external {
    padding: 60px 0;
  }

  .nyx-portal {
    width: calc(100vw - 32px);
  }

  .nyx-portal__grid {
    grid-template-columns: 1fr !important;
    padding: 24px 20px;
  }

  .nyx-portal__left {
    padding-right: 0;
    padding-bottom: 24px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    text-align: center;
  }

  .nyx-portal__right {
    padding-left: 0;
  }

  .nyx-portal__panel .lightning-header {
    text-align: center;
  }

  .nyx-portal__panel .lightning-chips {
    justify-content: center;
  }

  .nyx-portal__panel .lightning-visuals {
    align-items: center;
  }

  .nyx-portal__panel .lightning-secondary-group {
    flex-direction: column;
  }
}