/* VIP site-wide retro dressing — loaded on every front-end page by the VIP Draws plugin. */
:root {
  --vip-ink: #14112A;
  --vip-ink-deep: #0D0B1E;
  --vip-glow: #2A2160;
  --vip-pink: #FF2E7E;
  --vip-orange: #FF8A3D;
  --vip-yellow: #FFD447;
  --vip-teal: #3EC6E0;
  --vip-stripes: linear-gradient(to bottom,
      var(--vip-pink) 0 25%, var(--vip-orange) 25% 50%,
      var(--vip-yellow) 50% 75%, var(--vip-teal) 75% 100%);
}

/* Tell browsers the site is already dark, so phone 'force dark' / Night modes don't recolour it */
:root { color-scheme: dark; }

/* 0. Footer always sits at the bottom of the screen, even on short pages */
html { background: var(--vip-ink-deep) !important; }
#wrapper {
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}
#wrapper > #main { flex: 1 0 auto; }
#wrapper > .fusion-footer { flex: none; }

/* 1. Retro stripe band under the header (moves with the sticky header too) */
.fusion-header { position: relative; }
.fusion-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background: var(--vip-stripes); pointer-events: none; z-index: 2;
}
.fusion-is-sticky .fusion-header::after { height: 6px; bottom: -6px; }

/* 2. Inner pages: glow + setting sun with horizon slats behind the page heading */
body:not(.home) #main {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 520px at 85% 0%, var(--vip-glow) 0%, rgba(42, 33, 96, 0) 70%), var(--vip-ink);
}
body:not(.home) #main::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 34px; right: max(-70px, calc((100vw - 1100px) / 2 - 150px));
  width: clamp(190px, 46vw, 360px); aspect-ratio: 1 / 1; border-radius: 50%;
  opacity: .5;
  background: linear-gradient(var(--vip-yellow) 0%, var(--vip-orange) 45%, var(--vip-pink) 100%);
  -webkit-mask-image: linear-gradient(#000 0 52%, transparent 52% 57%, #000 57% 66%, transparent 66% 71%, #000 71% 78%, transparent 78% 83%, #000 83% 88%, transparent 88% 93%, #000 93%);
  mask-image: linear-gradient(#000 0 52%, transparent 52% 57%, #000 57% 66%, transparent 66% 71%, #000 71% 78%, transparent 78% 83%, #000 83% 88%, transparent 88% 93%, #000 93%);
}
body:not(.home) #main > * { position: relative; z-index: 1; }
/* let the glow show through the draw/seed/results wrapper (cards keep their own surface) */
.vipd { background: transparent !important; }

/* 3. Footer: darker base with the stripes on top so it reads as its own band */
.fusion-footer { position: relative; }
.fusion-footer::before {
  content: ""; display: block; height: 10px; background: var(--vip-stripes);
}
.fusion-footer .fusion-footer-copyright-area,
.fusion-footer .fusion-footer-widget-area { background-color: var(--vip-ink-deep) !important; }

/* 4. Link cards (home, Pan Pacs hub, results archives) read as tappable buttons:
      coloured edge, outline, and a round arrow on the right */
.vip-links a {
  position: relative; justify-content: center; min-height: 76px;
  padding: 18px 70px 18px 22px !important;
  border: 1px solid rgba(62, 198, 224, .28);
  border-left: 6px solid var(--vip-pink);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.vip-links a:nth-child(4n+2) { border-left-color: var(--vip-orange); }
.vip-links a:nth-child(4n+3) { border-left-color: var(--vip-yellow); }
.vip-links a:nth-child(4n+4) { border-left-color: var(--vip-teal); }
.vip-links a strong { font-size: 19px !important; color: #fff; }
.vip-links a span { color: #C9C3E6 !important; }
.vip-links a::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 36px; height: 36px; margin-top: -18px; border-radius: 50%;
  background: var(--vip-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition: transform .12s ease;
}
.vip-links a:hover, .vip-links a:focus-visible {
  background: #2A2358 !important; border-color: rgba(62, 198, 224, .6);
  transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, .35);
}
.vip-links a:hover::after, .vip-links a:focus-visible::after { transform: translateX(3px); }
.vip-links a:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.vip-links a:focus-visible { outline: 3px solid var(--vip-yellow); outline-offset: 2px; }

/* 5. Shop (WooCommerce) — same retro dressing, built for reading on a phone */
.woocommerce-page #main::before { display: none; }            /* no sun behind product options / checkout */
.woocommerce .product_meta .sku_wrapper { display: none; }    /* internal product codes */
.woocommerce ul.products li.product .fusion-product-wrapper {
  background: #1E1A3F !important; border: 1px solid rgba(62, 198, 224, .22) !important; border-radius: 18px;
  overflow: hidden; height: 100%;
}
.woocommerce ul.products li.product .fusion-product-content,
.woocommerce ul.products li.product .product-details-container,
.woocommerce ul.products li.product .product-buttons { background: transparent !important; }
.woocommerce ul.products li.product .product-title,
.woocommerce ul.products li.product .product-title a {
  font-size: 20px !important; line-height: 1.2 !important; letter-spacing: 0 !important; color: #fff !important;
}
.woocommerce ul.products li.product .price { color: var(--vip-yellow) !important; font-weight: 700; font-size: 17px; }
.woocommerce ul.products li.product .product-buttons-container { display: flex; gap: 8px; flex-wrap: wrap; }
.woocommerce ul.products li.product .product-buttons a.button,
.woocommerce ul.products li.product .product-buttons a.add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
  padding: 8px 16px !important; border-radius: 999px; background: var(--vip-pink) !important;
  color: #fff !important; font-weight: 700; font-size: 14px !important; text-decoration: none; white-space: nowrap;
}
.woocommerce ul.products li.product .product-buttons a.show_details_button {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 4px !important;
  color: var(--vip-teal) !important; font-weight: 600; font-size: 14px !important;
}
.woocommerce ul.products li.product .product-buttons a::before { display: none !important; }
.woocommerce span.onsale { background: var(--vip-yellow) !important; color: var(--vip-ink) !important; font-weight: 800; }
.woocommerce div.product .summary .price { color: var(--vip-yellow) !important; font-size: 22px; font-weight: 700; }
.woocommerce div.product form.cart .variations select { min-height: 46px; font-size: 16px; }
.woocommerce div.product form.cart .single_add_to_cart_button { min-height: 48px; padding: 0 28px !important; font-size: 16px !important; }

@media (max-width: 640px) {
  .fusion-header::after { height: 8px; bottom: -8px; }
  body:not(.home) #main::before { top: 18px; right: -60px; opacity: .4; }
}

@media (prefers-reduced-transparency: reduce) {
  body:not(.home) #main::before { opacity: .25; }
}

/* Menu: year headings (not links) with their items indented below */
.fusion-main-menu .sub-menu li.vip-mh > a, .fusion-mobile-nav-holder li.vip-mh > a { pointer-events: none; cursor: default; }
.fusion-main-menu .sub-menu li.vip-mh > a span, .fusion-mobile-nav-holder li.vip-mh > a span { font-size: 12px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vip-yellow, #FFD447) !important; }
.fusion-main-menu .sub-menu li.vip-mh:not(:first-child), .fusion-mobile-nav-holder li.vip-mh { border-top: 1px solid rgba(255, 255, 255, .14); }
.fusion-main-menu .sub-menu li.vip-mi > a { padding-left: 34px !important; }
.fusion-mobile-nav-holder li.vip-mi > a { padding-left: 52px !important; }
/* Bigger menu text for easier reading (was 16px top, 14px dropdown, 16px mobile) */
.fusion-main-menu > ul > li > a { font-size: 20px !important; }
.fusion-main-menu .sub-menu li a { font-size: 18px !important; }
.fusion-mobile-nav-holder li.fusion-mobile-nav-item > a { font-size: 20px !important; }
.fusion-main-menu .sub-menu li.vip-mh > a span, .fusion-mobile-nav-holder li.vip-mh > a span { font-size: 14px !important; }

/* Pan Pacs badge [vip_pp_logos]: on the sun beside the heading; a small row above it on phones */
.vip-pp-logos { position: absolute; z-index: 2; top: -8px; right: 0; display: flex; align-items: center; gap: 18px; pointer-events: none; }
.vip-pp-logos img { display: block; height: auto; filter: drop-shadow(0 2px 8px rgba(16, 12, 40, .75)); }
.vip-pp-logos .vip-pp-sport { width: 118px; }
.vip-pp-logos .vip-pp-legends { width: 236px; }
@media (max-width: 1000px) {
  .vip-pp-logos { position: static; margin: 0 0 14px; gap: 14px; }
  .vip-pp-logos .vip-pp-sport { width: 64px; }
  .vip-pp-logos .vip-pp-legends { width: 150px; }
}

/* First games [vip_first_games]: one table per day; rows become cards on phones */
.vip-fg { display: grid; gap: 36px; }
.vip-fg-title { margin: 0 0 12px !important; font-size: 26px !important; }
.vip-fg-day { display: grid; gap: 10px; }
.vip-fg-title { margin: 0 0 2px !important; }
.vip-fg-event-title { margin: 10px 0 0 !important; color: var(--vip-yellow, #FFD447) !important; font-size: 15px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vip-fg-event { font-weight: 700; }
.vip-fg-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #1E1A3F; border: 1px solid rgba(62, 198, 224, .22); border-radius: 14px; overflow: hidden; font-variant-numeric: tabular-nums; }
.vip-fg-table th { background: #2A2358; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 10px 14px; }
.vip-fg-table td { padding: 11px 14px; border-top: 1px solid rgba(255, 255, 255, .08); color: #F3F0FF; vertical-align: top; }
.vip-fg-time { font-weight: 700; color: var(--vip-yellow, #FFD447) !important; white-space: nowrap; }
.vip-fg-court, .vip-fg-event { white-space: nowrap; }
.vip-fg-teams { font-weight: 700; }
.vip-fg-v { color: #B9B2DA; font-weight: 400; margin: 0 2px; }
.vip-fg-dl { display: none; }
.vip-fg-search { display: flex; align-items: center; gap: 10px; max-width: 520px; min-height: 52px; padding: 0 14px; border-radius: 14px; background: #1F1B3A; border: 1px solid #3A3466; color: #B9B2DA; }
.vip-fg .vip-fg-input { flex: 1; min-width: 0; height: 50px; margin: 0; padding: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none; color: #FFF4E6 !important; font: inherit; font-size: 17px; }
.vip-fg .vip-fg-input::placeholder { color: #B9B2DA; opacity: 1; }
.vip-fg-search:focus-within { border-color: #3EC6E0; }
.vip-fg-note { margin: -24px 0 0 !important; font-size: 15px; font-weight: 700; color: var(--vip-yellow, #FFD447) !important; }
.vip-fg.is-searching tr[data-names]:not(.is-hit) { opacity: .4; }
.vip-fg tr.is-hit td { background: #3A2F2A; }
.vip-fg tr.is-hit { box-shadow: inset 4px 0 0 var(--vip-yellow, #FFD447); }
.vip-fg mark { background: var(--vip-yellow, #FFD447); color: #14112A; padding: 0 2px; border-radius: 3px; }
@media (max-width: 760px) {
  .vip-fg tr.is-hit { background: #3A2F2A; }
  .vip-fg-table thead { display: none; }
  .vip-fg-table, .vip-fg-table tbody, .vip-fg-table tr, .vip-fg-table td { display: block; }
  .vip-fg-table tr { padding: 12px 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
  .vip-fg-table tr:first-child { border-top: 0; }
  .vip-fg-table td { padding: 0; border: 0; }
  .vip-fg-time, .vip-fg-court, .vip-fg-event { display: inline !important; font-size: 14px; }
  .vip-fg-time::before, .vip-fg-court::before { content: " · "; color: #B9B2DA; }
  .vip-fg-teams { margin-top: 4px; font-size: 16px; }
  .vip-fg-duty { margin-top: 2px; color: #B9B2DA !important; font-size: 14px; }
  .vip-fg-dl { display: inline; }
}

/* Court map [vip_court_map]: map + key beside it; key drops below on phones */
.vip-cm { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 28px; align-items: start; }
.vip-cm-map { min-width: 0; }
.vip-cm-svg { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(62, 198, 224, .22); }
.vip-cm-key { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 10px; }
.vip-cm-key li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; margin: 0 !important; padding: 12px 14px; background: #1E1A3F; border: 1px solid rgba(62, 198, 224, .22); border-radius: 12px; }
.vip-cm-key li::before { display: none !important; }
.vip-cm-ico { width: 34px; height: 34px; }
.vip-cm-key strong { display: block; color: #fff; font-size: 16px; }
.vip-cm-key span { display: block; color: #B9B2DA; font-size: 14px; line-height: 1.45; }
@media (max-width: 900px) {
  .vip-cm { grid-template-columns: minmax(0, 1fr); }
  .vip-cm-key { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* QBVT badge [vip_vq_logo]: VQ Beach logo (white text, transparent) on the sun */
.vip-vq-logos .vip-vq { width: 196px; }
@media (max-width: 1000px) {
  .vip-vq-logos .vip-vq { width: 130px; }
}

/* Court map variants: Pan Pacs-only bits (.cm-pp) vs QBVT-only text (.cm-qb) */
.vip-cm .cm-qb { display: none; }
.vip-cm.is-qbvt .cm-pp { display: none !important; }
.vip-cm.is-qbvt .cm-qb { display: block; }

/* Homepage cards: Avada's column hover swaps the background for an unset hover colour (turns see-through) */
.fusion-layout-column.vip-card > .fusion-column-wrapper:hover { background-color: var(--awb-color2); border-color: var(--awb-color3); }