/* Separate licensed photographs for each route; see docs/page-background-sources.md. */
body.op-page-background-super { --op-page-photo: url("stadium.webp"); }
body.op-page-background-accumulator { --op-page-photo: url("accumulator.webp?v=30651230"); }
body.op-page-background-tipsters { --op-page-photo: url("tipsters.webp"); }
body.op-page-background-profile { --op-page-photo: url("profile.webp"); }
body.op-page-background-ai { --op-page-photo: url("pitch.webp"); }
body.op-page-background-pricing { --op-page-photo: url("pricing.webp"); }
body.op-page-background-contact { --op-page-photo: url("support.webp"); }

body.op-page-background-super #content > .op-super-tips-page,
body.op-page-background-accumulator #content > .op-accumulator-page,
body.op-page-background-tipsters #content > .op-tipster-page,
body.op-page-background-profile #content > .op-tipster-page,
body.op-page-background-pricing #content > .op-pricing-page,
body.op-page-background-contact #content > .op-inner-page--contact,
body.op-page-background-ai .opta-ai-hero {
  --op-page-base: #0a1522;
  position: relative;
  isolation: isolate;
  background: var(--op-page-base);
}

body.op-page-background-super #content > .op-super-tips-page::before,
body.op-page-background-accumulator #content > .op-accumulator-page::before,
body.op-page-background-tipsters #content > .op-tipster-page::before,
body.op-page-background-profile #content > .op-tipster-page::before,
body.op-page-background-pricing #content > .op-pricing-page::before,
body.op-page-background-contact #content > .op-inner-page--contact::before,
body.op-page-background-ai .opta-ai-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 1120px;
  max-height: 100%;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(10, 21, 34, .15), rgba(10, 21, 34, .5) 55%, var(--op-page-base)),
    linear-gradient(90deg, rgba(10, 21, 34, .82), rgba(10, 21, 34, var(--op-page-shade, .5))),
    var(--op-page-photo);
  background-size: cover;
  background-position: center, center, var(--op-page-position, center);
  background-repeat: no-repeat;
}

body.op-page-background-super .op-super-hero { background: transparent; }
body.op-page-background-super .op-super-access-card {
  border-color: rgba(245, 96, 61, .32);
  background:
    linear-gradient(180deg, #14253a4a, #0813211f),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 12px);
  box-shadow: 0 24px 70px #db0d0d24;
}
body.op-page-background-accumulator #content > .op-accumulator-page { --op-page-base: #0c0f12; }
body.op-page-background-tipsters .op-tipster-page { --op-page-position: center 40%; }
body.op-page-background-profile .op-tipster-page { --op-page-position: center 35%; }
body.op-page-background-pricing .op-pricing-page { --op-page-position: center 57%; }
body.op-page-background-pricing .op-pricing-three-cards > .op-vip-level-box,
body.op-page-background-pricing .op-pricing-three-cards > .op-vip-level-box .pricing { background: transparent; box-shadow: none; }
body.op-page-background-contact .op-inner-page--contact { --op-page-position: center 45%; --op-page-shade: .75; }
body.op-page-background-contact .op-inner-page--contact input,
body.op-page-background-contact .op-inner-page--contact textarea { background-color: #1c2a3a; }
body.op-page-background-ai .opta-ai-hero { --op-page-base: #07111d; --op-page-position: center; }

/* Super Tips: solid header surfaces and steps matching the table's transparency. */
body.page-template-page-super-soccer-tips #content .op-super-content .op-super-board__head,
body.page-template-page-super-soccer-tips #content .op-super-content .op-super-table__head {
  background: #131b26 !important;
}
body.page-template-page-super-soccer-tips #content .op-super-content .op-super-flow > article {
  background: rgba(14, 19, 28, .3) !important;
}
body.page-template-page-super-soccer-tips #content .op-super-faq .op-inner-title h2 {
  color: #ffd259 !important;
}

@media (max-width: 680px) {
  body.op-page-background-super .op-super-tips-page { --op-page-position: 65% center; }
  body.op-page-background-contact .op-inner-page--contact { --op-page-position: 62% center; }
  body.op-page-background-profile .op-tipster-page { --op-page-position: 35% center; }
}

/* Keep the Accumulator stadium anchored to the viewport through every section. */
body.op-page-background-accumulator #content > .op-accumulator-page::before {
  position: fixed;
  inset: 0;
  height: 100vh;
  max-height: none;
  background-image:
    linear-gradient(180deg, rgba(10, 21, 34, .45), rgba(10, 21, 34, .68)),
    linear-gradient(90deg, rgba(10, 21, 34, .82), rgba(10, 21, 34, var(--op-page-shade, .5))),
    var(--op-page-photo);
}
/* Paint the footer above the fixed content photograph. */
body.op-page-background-accumulator .op-footer {
  position: relative;
  z-index: 1;
  isolation: isolate;
}