/* ==========================================================================
   OpZone - About page pane carousel + Pricing + profile tab
   Role: the /About full-height scroll-snap pane carousel (.opz-pane* family),
         the /pricing layout helpers, and the account profile tab (.opz-pt-*).
   Load position: 3 of 8 in the website opz-*.css chain.
   Light-mode only: "dark = screens only" — these pages/cards are not screens,
   so every surface is light paper via OpzPanel/MudPaper.
   ========================================================================== */

/* ==========================================================================
   About / Pricing shared page shell
   ========================================================================== */

.opz-min-page {
  height: calc(100dvh - 68px);
  min-height: 0;
}

.opz-about-hero {
  position: relative;
  min-height: calc(100dvh - 68px);
  background: var(--opz-paper);
  overflow: auto;
  scrollbar-width: thin;
}

/* Scroll-snap stage: horizontal, edge-faded, scrollbar hidden.
   Padding 12vw on each side lets the first/last pane reach true center
   at the scroll ends (scrollWidth math stays exactly reachable). */
.opz-about-stage {
  display: flex;
  align-items: center;
  gap: 2vw;
  height: 100%;
  padding: 0 12vw;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* legacy Edge / IE */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.opz-about-stage::-webkit-scrollbar {
  display: none; /* Chrome / Safari / Edge */
}

/* Pane shells — dimmed and slightly scaled unless active/centered.
   The light card surface lives on the inner OpzPanel (MudPaper). */
.opz-pane {
  flex: 0 0 76vw;
  width: 76vw;
  height: 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
  opacity: 0.45;
  transform: scale(0.96);
  filter: saturate(0.6);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    filter 0.4s ease;
  outline: none;
}

.opz-pane-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Centered pane (toggled by opzoneCarouselInit) or keyboard-focused pane */
.opz-pane-active,
.opz-pane:focus-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

.opz-pane:focus-visible {
  outline: 2px solid var(--opz-signal-deep);
  outline-offset: 3px;
}

@media (hover: hover) {
  .opz-pane:hover {
    opacity: 0.8;
    transform: scale(0.97);
  }

  .opz-pane-active:hover {
    opacity: 1;
    transform: none;
  }
}

/* Pinned header — chapter title + accent rule */
.opz-pane-header {
  flex: 0 0 auto;
  padding: clamp(20px, 3vw, 40px) clamp(24px, 4vw, 56px) 4px;
}

.opz-pane-title {
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 2.4vw, 2.5rem);
  line-height: 1.1;
  color: var(--opz-ink) !important; /* beats .mud-typography-h4 colour */
}

.opz-pane-rule {
  width: 64px;
  height: 2px;
  border-radius: 1px;
  margin-bottom: 6px;
  background: linear-gradient(90deg, var(--opz-signal-deep), transparent);
}

/* Scrollable body — long panes (e.g. Custom Game Formats) scroll internally */
.opz-pane-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 12px clamp(24px, 4vw, 56px) 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--opz-ink-4) var(--opz-hair);
}

.opz-pane-body::-webkit-scrollbar {
  width: 6px;
}

.opz-pane-body::-webkit-scrollbar-track {
  background: var(--opz-hair);
  border-radius: 3px;
}

.opz-pane-body::-webkit-scrollbar-thumb {
  background: var(--opz-ink-4);
  border-radius: 3px;
}

.opz-pane-para {
  color: var(--opz-ink-2);
  line-height: 1.7;
}

/* Section heads inside panes (e.g. "What Players Get...") */
.opz-pane-section {
  margin: 26px 0 12px;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--opz-ink) !important; /* beats .mud-typography-h5 colour */
}

/* Sub-section heads inside panes (Counter-Strike / Shrinking Zone / Tournament) */
.opz-pane-subsection {
  margin: 20px 0 8px;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--opz-ink-2) !important; /* beats .mud-typography-h6 colour */
}

/* Tactical chevron list bullets */
.opz-pane-body ul {
  list-style: none;
  margin: 4px 0 8px;
  padding: 0;
}

.opz-pane-body ul li {
  position: relative;
  margin-left: 0;
  margin-bottom: 8px;
  padding-left: 24px;
  line-height: 1.6;
}

.opz-pane-body ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-left: 2px solid var(--opz-signal-deep);
  border-bottom: 2px solid var(--opz-signal-deep);
  transform: rotate(-45deg);
}

/* Real links inside panes keep the signal accent; MudBlazor buttons are
   excluded so filled-button labels resolve to palette contrast text
   (fixes #81CAFF-on-#0DB0FC, ~1.6:1). */
.opz-pane a:not(.mud-button-root) {
  color: var(--opz-signal-deep) !important; /* beats .mud-link typography; buttons excluded */
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--opz-signal-deep) 40%, transparent);
  text-underline-offset: 3px;
}

.opz-pane a:not(.mud-button-root):hover {
  color: var(--opz-signal);
}

/* Pinned footer — brand + pane position */
.opz-pane-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px clamp(24px, 4vw, 56px);
  border-top: 1px solid var(--opz-hair);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--opz-ink-4);
}

.opz-pane-brand {
  color: var(--opz-signal-deep);
  font-weight: 700;
  letter-spacing: 0.3em;
}

.opz-pane-count {
  font-family: var(--opz-font-mono);
  color: var(--opz-ink-4);
  letter-spacing: 0.06em;
}

/* Final-pane call-to-action wrapper */
.opz-pane-cta {
  margin-top: 50px;
  text-align: center;
}

/* Mobile (<768px): stacked vertical flow — no horizontal scroll, no mask,
   panes are full width and content-sized. */
@media (max-width: 768px) {
  .opz-about-hero {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 28px 0 40px;
  }

    .opz-panel{
        max-width: 99vw;
    }

    .opz-about-stage {
        flex-direction: column;
        gap: 20px;
        height: auto;
        padding: 0 16px;
        overflow: visible;
        overscroll-behavior: auto;
        scroll-snap-type: none;
        scrollbar-width: auto;
        -ms-overflow-style: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

  .opz-pane {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    scroll-snap-align: none;
    opacity: 1;
    transform: none;
    filter: none;
    cursor: default;
    overflow: visible;
  }

  .opz-pane-card {
    min-height: 0;
  }

  .opz-pane-body {
    overflow: visible;
    padding-bottom: 20px;
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  .opz-pane-title {
    font-size: 1.9rem !important; /* beats opz-base.css bare h1 size */
  }
}

/* ==========================================================================
   Pricing page layout helpers
   ========================================================================== */

.opz-pricing-timeline-wrap {
  margin: 50px 0;
}

.opz-pricing-timeline {
  margin-bottom: 100px;
}

.opz-pricing-alert--min {
  min-width: 120px;
}

.opz-pricing-alert--narrow {
  max-width: 120px;
}

.opz-pricing-alert--wide {
  min-width: 180px;
}

.opz-pricing-heading--pushed {
  margin-top: 150px !important; /* beats .mud-typography-h5 top margin */
}

.opz-pricing-table {
  overflow-x: auto;
}

.opz-pricing-fineprint {
  display: block;
}

.opz-price-body ul {
  list-style: none;
  margin: 4px 0 8px;
  padding: 0;
}

.opz-price-body ul li {
  position: relative;
  margin-left: 0;
  margin-bottom: 8px;
  padding-left: 24px;
  line-height: 1.6;
}

.opz-price-body ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-left: 2px solid var(--opz-signal-deep);
  border-bottom: 2px solid var(--opz-signal-deep);
  transform: rotate(-45deg);
}

/* Centred pricing lists (e.g. the "OpZone Event Day" card). The li is a
   full-width block, so the absolute marker above pins to the card edge
   while the text sits centred in the middle. Let the marker flow inline
   with the text instead, so the two centre together as one unit — and so
   it still tracks the first line when a long item wraps. Left-aligned
   cards keep the absolute hanging-indent marker. */
.opz-price-body .text-center ul li {
  padding-left: 0;
}

.opz-price-body .text-center ul li::before {
  position: static;
  display: inline-block;
  margin-right: 10px;
  vertical-align: baseline;
}

/* ==========================================================================
   Profile tab (dashboard)
   ========================================================================== */

.opz-pt-heading {
  color: var(--opz-ink);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.opz-pt-sub,
.opz-pt-hint {
  color: var(--opz-ink-3);
}

.opz-pt-hint-error {
  color: var(--opz-alert-error);
}

.opz-pt-switch-label {
  color: var(--opz-ink);
}

.opz-pt-card {
  height: 100%;
}

.opz-pt-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--opz-paper-2);
  border: 2px solid var(--opz-hair-2);
}

.opz-pt-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.opz-pt-avatar-icon {
  font-size: 40px;
  color: var(--opz-ink-3);
}

.opz-pt-file-input {
  display: none;
}

.opz-pt-platform {
  min-width: 160px;
  max-width: 220px;
}

.opz-pt-url {
  flex: 1 1 auto;
  min-width: 220px;
}

.opz-pt-url-invalid .mud-input-helper-text {
  color: var(--mud-palette-error) !important; /* beats .mud-input-helper-text colour */
}

.opz-pt-remove {
  align-self: center;
  margin-top: 4px;
}

.opz-pt-privacy-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--opz-hair);
}

.opz-pt-privacy-row:last-child {
  border-bottom: none;
}

.opz-pt-privacy-status {
  min-width: 56px;
  text-align: right;
}