/*
 * FindBestBet Ladder panel effects.
 * Content panels only: header, footer and global navigation excluded.
 */

body main.wrap {
  --ladder-panel-bg: rgba(28, 32, 35, 0.97);
  --ladder-panel-border: rgba(255, 255, 255, 0.105);
  --ladder-panel-blue: rgba(0, 177, 255, 0.34);
  --ladder-panel-green: rgba(0, 255, 135, 0.28);
  --ladder-panel-shadow: rgba(0, 0, 0, 0.30);
}

/*
 * Large main sections.
 */

body main.wrap > .hero,
body main.wrap > .fbb-daily-slot-section,
body main.wrap > section.card,
body main.wrap > article.card,
body main.wrap > .card {
  position: relative !important;
  overflow: hidden !important;

  background-color: var(--ladder-panel-bg) !important;

  background-image:
    radial-gradient(
      circle at 100% 0%,
      rgba(0, 255, 135, 0.105),
      transparent 34%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(0, 177, 255, 0.07),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.025),
      rgba(0, 0, 0, 0.02)
    ) !important;

  border: 1px solid var(--ladder-panel-border) !important;
  border-radius: 18px !important;

  box-shadow:
    0 18px 42px var(--ladder-panel-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 0 1px rgba(0, 177, 255, 0.025) !important;
}

/*
 * Thin blue/green highlight at the top of major panels.
 */

body main.wrap > .hero::after,
body main.wrap > .fbb-daily-slot-section::after,
body main.wrap > section.card::after,
body main.wrap > article.card::after,
body main.wrap > .card::after {
  content: "" !important;

  position: absolute !important;
  z-index: 1 !important;

  top: 0 !important;
  right: 12% !important;
  left: 12% !important;

  height: 1px !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0, 177, 255, 0.72),
      rgba(0, 255, 135, 0.58),
      transparent
    ) !important;

  box-shadow:
    0 0 14px rgba(0, 177, 255, 0.20) !important;

  pointer-events: none !important;
}

/*
 * Hero receives a slightly stronger branded glow.
 */

body main.wrap > .hero {
  border-color: rgba(0, 177, 255, 0.38) !important;

  background-image:
    radial-gradient(
      circle at 96% 5%,
      rgba(0, 255, 135, 0.18),
      transparent 31%
    ),
    radial-gradient(
      circle at 4% 100%,
      rgba(0, 177, 255, 0.10),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(16, 39, 45, 0.98),
      rgba(20, 24, 27, 0.99)
    ) !important;

  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.34),
    0 0 28px rgba(0, 177, 255, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

/*
 * Prediction cards and smaller information cards.
 */

body main.wrap .fbb-daily-slot-card,
body main.wrap .prediction-card,
body main.wrap .signal-card,
body main.wrap .market-card,
body main.wrap .info-card,
body main.wrap .step-card,
body main.wrap .telegram-card,
body main.wrap .risk-note,
body main.wrap .grid > .card,
body main.wrap .grid > section,
body main.wrap .grid > article {
  position: relative !important;
  overflow: hidden !important;

  background-color: rgba(30, 33, 36, 0.98) !important;

  background-image:
    radial-gradient(
      circle at 100% 0%,
      rgba(0, 255, 135, 0.055),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.018),
      rgba(0, 0, 0, 0.025)
    ) !important;

  border: 1px solid rgba(255, 255, 255, 0.105) !important;
  border-radius: 15px !important;

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;

  transition:
    transform 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease,
    background-color 170ms ease !important;
}

body main.wrap .fbb-daily-slot-card:hover,
body main.wrap .prediction-card:hover,
body main.wrap .signal-card:hover,
body main.wrap .market-card:hover,
body main.wrap .info-card:hover,
body main.wrap .step-card:hover,
body main.wrap .telegram-card:hover,
body main.wrap .grid > .card:hover,
body main.wrap .grid > section:hover,
body main.wrap .grid > article:hover {
  transform: translateY(-2px) !important;

  border-color: rgba(0, 255, 135, 0.34) !important;

  box-shadow:
    0 17px 34px rgba(0, 0, 0, 0.30),
    0 0 22px rgba(0, 255, 135, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

/*
 * Pick boxes retain the green betting accent.
 */

body main.wrap .pick-box,
body main.wrap .prediction-box,
body main.wrap .fbb-daily-slot-pick {
  background:
    linear-gradient(
      145deg,
      rgba(20, 66, 50, 0.74),
      rgba(19, 51, 43, 0.88)
    ) !important;

  border-color: rgba(0, 255, 135, 0.46) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 0 18px rgba(0, 255, 135, 0.035) !important;
}

/*
 * Risk panel keeps a distinct warning effect.
 */

body main.wrap .risk-note {
  background-image:
    radial-gradient(
      circle at 100% 0%,
      rgba(255, 92, 108, 0.09),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(54, 31, 34, 0.64),
      rgba(28, 29, 31, 0.98)
    ) !important;

  border-color: rgba(255, 106, 120, 0.25) !important;
}

/*
 * Do not animate panels for users requesting reduced motion.
 */

@media (prefers-reduced-motion: reduce) {
  body main.wrap .fbb-daily-slot-card,
  body main.wrap .prediction-card,
  body main.wrap .signal-card,
  body main.wrap .market-card,
  body main.wrap .info-card,
  body main.wrap .step-card,
  body main.wrap .telegram-card,
  body main.wrap .grid > .card,
  body main.wrap .grid > section,
  body main.wrap .grid > article {
    transition: none !important;
  }
}

@media (max-width: 760px) {
  body main.wrap > .hero,
  body main.wrap > .fbb-daily-slot-section,
  body main.wrap > section.card,
  body main.wrap > article.card,
  body main.wrap > .card {
    border-radius: 15px !important;

    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  }

  body main.wrap .fbb-daily-slot-card,
  body main.wrap .prediction-card,
  body main.wrap .signal-card,
  body main.wrap .market-card,
  body main.wrap .info-card,
  body main.wrap .step-card,
  body main.wrap .telegram-card,
  body main.wrap .risk-note,
  body main.wrap .grid > .card,
  body main.wrap .grid > section,
  body main.wrap .grid > article {
    border-radius: 13px !important;
  }
}