/* ===================================================================
   StrikePoint Water Wars – Mobile Water Tag tier comparison.
   Rendered by the water-tag-tiers block (src/render-offerings.mjs) on the
   Water Tag page, the homepage Packages & Pricing section and the
   Experiences page. Self-contained, so it does not depend on the
   attractions or service-page stylesheets. Colors come from the shared
   custom properties every page defines.
   =================================================================== */

.wt-pricing { margin-top: 8px; }
.wt-pricing .wt-heading {
  margin: 34px 0 10px; font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.wt-pricing .wt-heading:first-child { margin-top: 0; }
.wt-pricing .wt-lead { margin: 0 0 18px; max-width: 60rem; color: var(--ink-dim); font-size: 16px; line-height: 1.7; }

/* ----- Private-party tier cards ----- */
.wt-tier-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wt-tier {
  display: flex; flex-direction: column; min-width: 0; padding: 22px 20px;
  background: rgba(5,7,13,0.55); border: 1px solid var(--line-bright); border-top: 3px solid var(--blue);
}
.wt-tier--scored { border-color: rgba(30,136,255,0.6); box-shadow: 0 0 32px rgba(30,136,255,0.14); }
.wt-pricing .wt-tier-name {
  margin: 0; font-family: 'Black Ops One', sans-serif; font-size: 19px; line-height: 1.2;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink);
}
.wt-tier-price { margin: 12px 0 4px; font-family: 'Black Ops One', sans-serif; font-size: 34px; line-height: 1; color: var(--blue-glow); }
.wt-pricing .wt-tier-meta {
  margin: 0 0 14px; font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute);
}
.wt-pricing .wt-tier-list { list-style: none; margin: 0 0 20px; padding: 0; }
.wt-pricing .wt-tier-list li {
  position: relative; margin: 0; padding: 7px 0 7px 16px; border-bottom: 1px solid var(--line);
  color: var(--ink-dim); font-size: 15px; line-height: 1.5;
}
.wt-pricing .wt-tier-list li:first-child { color: var(--ink); font-weight: 600; }
.wt-pricing .wt-tier-list li:last-child { border-bottom: 0; }
.wt-pricing .wt-tier-list li::before {
  content: ">"; position: absolute; left: 0; top: 7px; width: auto; height: auto; background: none;
  color: var(--ink-mute); font-family: 'JetBrains Mono', monospace; font-weight: 700;
}
.wt-pricing .wt-tier-cta {
  margin-top: auto; display: block; text-align: center; font-size: 13px;
  padding: 14px 14px; letter-spacing: 0.1em;
}

.wt-pricing .wt-addon {
  margin: 18px 0 0; padding: 14px 18px; max-width: 60rem;
  border-left: 3px solid var(--blue); background: rgba(30,136,255,0.08);
  color: var(--ink); font-size: 15px; line-height: 1.65;
}

/* ----- Comparison tables (stacked rows on phones) ----- */
.wt-table-wrap { max-width: 960px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wt-table-wrap:focus-visible { outline: 3px solid var(--blue-glow); outline-offset: 3px; }
.wt-table { width: 100%; border-collapse: collapse; background: var(--bg-1, #0a0f1c); border: 1px solid var(--line-bright); }
.wt-table caption {
  caption-side: top; text-align: left; padding: 0 0 10px;
  color: var(--ink-mute); font-size: 14px; line-height: 1.5;
}
.wt-table th, .wt-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.wt-table thead th {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--blue-glow); border-bottom-color: var(--line-bright);
}
.wt-table tbody th { color: var(--ink); font-weight: 700; }
.wt-table td { color: var(--ink-dim); }
.wt-table tbody tr:last-child > * { border-bottom: 0; }
.wt-yes { color: var(--good); font-weight: 700; }
.wt-no { color: var(--ink-mute); }

.wt-pricing .wt-requirements { margin: 0; padding-left: 20px; max-width: 60rem; }
.wt-pricing .wt-requirements li { margin: 0 0 8px; color: var(--ink-dim); font-size: 15px; line-height: 1.6; }
.wt-pricing .wt-public-cta { margin: 18px 0 0; }

@media (max-width: 1100px) {
  .wt-tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wt-tier-grid { grid-template-columns: minmax(0, 1fr); }
  .wt-table, .wt-table tbody, .wt-table tr, .wt-table th, .wt-table td { display: block; width: 100%; }
  .wt-table { border: 0; background: none; }
  .wt-table caption { display: block; width: 100%; }
  .wt-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wt-table tbody tr { margin-bottom: 10px; padding: 12px 14px; background: var(--bg-1, #0a0f1c); border: 1px solid var(--line); border-left: 3px solid var(--blue); }
  .wt-table th, .wt-table td { padding: 3px 0; border: 0; }
  .wt-table td::before { content: attr(data-label) ": "; color: var(--ink-mute); font-size: 13px; }
  .wt-pricing .wt-public-cta .btn-secondary { display: block; text-align: center; }
}