* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; overflow: hidden; /* app shell: page never scrolls — scroll lives on .price-table */ } /* Web / desktop variant: normal document scroll so the footer is reachable and the table flows full-length. The sticky then pins to the viewport. The source-* class is on BOTH and so this works without :has() (which older WebViews lack) — otherwise would stay overflow:hidden and the page couldn't scroll. */ html.source-web, body.source-web { height: auto; overflow: visible; } body.source-web .container { height: auto; min-height: 100%; } body.source-web .price-table-wrap { flex: none; max-height: none; /* visible so position:sticky on pins to the viewport during page scroll. The table's own corner cells are rounded (below) so square corners don't poke out of the wrapper's rounded border. */ overflow: visible; } body { font-family: 'Inter', sans-serif; background: #FFFFFF; -webkit-font-smoothing: antialiased; overscroll-behavior: none; } /* ── Content ─────────────────────────────────────── */ .container { max-width: 390px; width: 100%; height: 100%; margin: 0 auto; padding: 16px 14px 24px; display: flex; flex-direction: column; gap: 12px; } /* ── Brand header ─────────────────────────────────── */ .brand-header { display: flex; align-items: center; justify-content: center; padding-bottom: 12px; border-bottom: 1px solid #EFEFEF; flex-shrink: 0; } .brand-logo { height: 32px; width: auto; display: block; } /* Trigger wrapper — anchors the dropdown to the button */ .trigger-wrapper { position: relative; display: inline; } .page-heading { font-size: 14px; font-weight: 600; color: #363636; line-height: 150%; } .country-trigger { background: none; border: none; padding: 0; cursor: pointer; font-size: 14px; font-weight: 600; font-family: 'Inter', sans-serif; color: #363636; line-height: 150%; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; display: inline; } .description { font-size: 12px; font-weight: 400; color: #363636; line-height: 150%; } .meta-updated { margin-top: 4px; font-size: 11px; font-weight: 400; color: #9B9B9B; line-height: 150%; } /* ── Search / filter ──────────────────────────────── */ .filter-wrap { flex-shrink: 0; } .filter-input { width: 100%; box-sizing: border-box; padding: 10px 14px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; color: #1A1A1A; background: #F5F7FB; border: 1px solid #DFDFDF; border-radius: 10px; outline: none; transition: border-color 0.15s, background 0.15s; } .filter-input::placeholder { color: #9B9B9B; } .filter-input:focus { background: #FFFFFF; border-color: #B9C2D0; } .no-results { padding: 24px 16px; font-size: 12px; color: #9B9B9B; text-align: center; } /* ── Country dropdown ─────────────────────────────── */ .country-dropdown { visibility: hidden; opacity: 0; transform: translateY(-6px); position: absolute; top: calc(100% + 6px); left: 0; width: 194px; background: #FFFFFF; border-radius: 20px; padding: 16px; z-index: 30; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .country-dropdown.open { visibility: visible; opacity: 1; transform: translateY(0); } .country-item { display: flex; align-items: center; padding: 8px 0; cursor: pointer; text-decoration: none; } .country-name { font-size: 14px; font-weight: 500; color: #1A1A1A; line-height: 150%; } /* ── Price Table ─────────────────────────────────── */ /* Scroll container — owns the vertical scroll, rounded border, and hidden scrollbar. The inside renders flush with this wrapper's edges. */ .price-table-wrap { width: 100%; /* Size to content when small, cap at the container's remaining space so the scroll kicks in only when actually needed. flex: 0 1 auto = don't grow past content, shrink if content overflows. */ flex: 0 1 auto; min-height: 0; /* allow shrink so overflow-y scrolls when capped */ border: 1px solid #DFDFDF; border-radius: 12px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* momentum scroll on iOS / WebView */ overscroll-behavior: none; /* no rubber-band stretch at top/bottom */ scroll-behavior: smooth; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* legacy Edge / IE */ } .price-table-wrap::-webkit-scrollbar { width: 0; height: 0; display: none; /* Chrome / Safari / iOS WebView */ } /* table-layout: fixed locks column widths from the instead of inferring them from content, so the weekday/weekend split is identical on every row and never drifts. border-collapse: separate (not collapse) + border-spacing: 0: each cell paints its own border. Combined with applying borders on only one side (bottom + right), adjacent cells never double up — gives uniform 1px dividers on every device, including the mobile WebKit renderers where border-collapse: collapse + rowspan produced the thicker-line artifacts. */ .price-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: #FFFFFF; } .pt-col-course { width: 135px; } /* .pt-col-day has no width — table-layout: fixed splits the remaining width equally between the two day columns, automatically matching the header. */ /* Sticky header — supported on in iOS Safari 13+, Chrome 91+, Firefox 59+. The grey background is on each itself. */ .price-table thead { position: sticky; top: 0; z-index: 10; } .pt-th { padding: 10px 8px; background: #F5F7FB; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; color: #1A1A1A; letter-spacing: 0.12px; line-height: normal; text-align: left; vertical-align: middle; cursor: pointer; user-select: none; /* Use inset box-shadow instead of border. With border-collapse: collapse + position: sticky on , real borders detach from the cell and fail to render while scrolled. box-shadow lives on the cell itself, so it travels with the sticky header. */ box-shadow: inset -1px 0 0 #DFDFDF, inset 0 -1px 0 #DFDFDF; } .pt-th:last-child { box-shadow: inset 0 -1px 0 #DFDFDF; } .pt-th-inner { display: flex; align-items: center; justify-content: space-between; } /* State section header — one full-width row introducing each region group. */ .pt-state-cell { padding: 9px 12px; background: #EEF1F6; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #122C5A; border-bottom: 1px solid #DFDFDF; } .pt-state-count { font-weight: 500; color: #9B9B9B; letter-spacing: 0.4px; } .pt-course-cell { padding: 8px; vertical-align: middle; background: #FFFFFF; /* Only right + bottom borders. The wrapper provides the table's outer edges; cells on the right and below provide internal dividers via their own siblings — no border-top / border-left anywhere keeps it a single 1px line at every junction. */ border-right: 1px solid #DFDFDF; border-bottom: 1px solid #DFDFDF; } /* Club logo — logos vary wildly (square badges, wide wordmarks, transparent bgs), so frame each into a uniform white rounded tile and `contain` the art so nothing distorts or crops. */ .pt-course-img { width: 52px; height: 52px; display: block; margin-bottom: 10px; padding: 5px; border: 1px solid #F0F0F0; border-radius: 12px; background: #FFFFFF; object-fit: contain; box-shadow: 0 2px 6px rgba(18, 44, 90, 0.08); } .pt-course-name { display: inline-block; font-size: 12px; font-weight: 600; color: #1A1A1A; letter-spacing: 0.12px; text-decoration: underline; text-underline-offset: 2px; line-height: normal; } .pt-course-loc { display: block; margin-top: 8px; font-size: 12px; font-weight: 500; color: #9B9B9B; letter-spacing: 0.12px; line-height: normal; } .pt-course-rating { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; color: #F5A623; line-height: normal; } .pt-rating-count { font-weight: 500; color: #9B9B9B; } .pt-cell { padding: 8px; /* Min-height on price cells so a one-line entry ("All: MYR 66") settles to the same baseline as a label+AM+PM cell — keeps the table looking balanced. Addons keep their natural height (Ning's call). */ height: 56px; vertical-align: top; background: #FFFFFF; border-bottom: 1px solid #DFDFDF; } /* Vertical divider lives on the WEEKDAY column's right edge so the col-2 | col-3 separator is always drawn — even on rows that only have a weekday cell (because the weekend rowspans down from above and isn't re-rendered). The weekend column has no right border because the wrapper provides the table's outer edge. Position-based :last-child rules would misfire here because rowspans change which cell is :last-child per row. */ .pt-cell-wd { border-right: 1px solid #DFDFDF; } /* Cells that absorb an empty slot from the other side (rowspan > 1) get vertical-centered so the merged text sits in the middle of the merged area. Plain 1-to-1 cells stay top-aligned. */ .pt-cell[rowspan]:not([rowspan="1"]) { vertical-align: middle; } .pt-cell-empty { text-align: left; vertical-align: middle; } .pt-cell-empty .pt-no-price { color: #1A1A1A; } .pt-type-label { font-size: 10px; font-weight: 500; color: #1A1A1A; line-height: normal; margin-bottom: 2px; } .pt-price-row { font-size: 10px; display: flex; align-items: center; gap: 3px; line-height: normal; } .pt-period { font-size: 10px; font-weight: 400; color: #888888; line-height: normal; letter-spacing: 0.1px; } .pt-amount { font-size: 12px; font-weight: 600; color: #1A1A1A; line-height: normal; letter-spacing: 0.12px; } .pt-addons { padding: 8px; vertical-align: middle; background: #FFFFFF; /* Only border-bottom — the row above's cells already draw the line between them and us via their own border-bottom. With border-collapse: separate, adding border-top here would have rendered as a doubled 2px line. */ border-bottom: 1px solid #DFDFDF; } .pt-no-price { font-size: 12px; font-weight: 500; color: #9B9B9B; } .pt-addon-incl, .pt-addon-extra { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 400; color: #363636; line-height: normal; letter-spacing: 0.1px; } .pt-addon-incl + .pt-addon-extra { margin-top: 10px; } .pt-addon-seasonal { margin-top: 10px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 400; font-style: italic; color: #9B9B9B; line-height: normal; letter-spacing: 0.1px; } .pt-empty { padding: 24px 16px; font-size: 12px; color: #9B9B9B; text-align: center; } /* Only the very last row of the last course can collide with the wrapper's bottom border — drop the cell border-bottom there. Internal rows keep their full dividers. The rowspanned course cell also lands at this edge so it's covered by the same rule. */ .price-table tbody.pt-course:last-of-type tr:last-child td, .price-table tbody.pt-course:last-of-type td.pt-course-cell { border-bottom: none; } /* Round the table's own corner cells so they nest inside the wrapper's 12px rounded border even when overflow is visible (web sticky-header variant). 11px = wrapper radius minus its 1px border. */ .price-table thead th:first-child { border-top-left-radius: 11px; } .price-table thead th:last-child { border-top-right-radius: 11px; } .price-table tbody.pt-course:last-of-type td.pt-course-cell { border-bottom-left-radius: 11px; } .price-table tbody.pt-course:last-of-type tr:last-child td:last-child { border-bottom-right-radius: 11px; } /* ── Brand footer (web variant only) ─────────────── */ .pf-footer { flex-shrink: 0; margin-top: 24px; padding-top: 20px; border-top: 1px solid #EFEFEF; text-align: center; } .pf-logo { height: 28px; width: auto; display: inline-block; margin-bottom: 16px; } /* Three store badges on one row — each takes an equal third and scales down to fit narrow phones (no wrapping). */ .pf-apps { display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; margin-bottom: 18px; } .pf-apps a { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; } .pf-apps img { height: auto; width: auto; max-width: 100%; max-height: 32px; display: block; } .pf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-bottom: 14px; } .pf-links a { font-size: 12px; font-weight: 500; color: #363636; text-decoration: none; } .pf-links a:hover { text-decoration: underline; } .pf-social { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; } /* The shared social SVGs are white-filled (built for the dark site footer), so each sits in a navy brand chip to stay visible on this white footer. */ .pf-social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #122C5A; transition: opacity 0.15s; } .pf-social a:hover { opacity: 0.85; } .pf-social img { width: 15px; height: 15px; } .pf-copyright { font-size: 10px; color: #9B9B9B; line-height: 1.6; } /* ── Sort icon ───────────────────────────────────── */ .sort-icon { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; } .sort-arrow { display: flex; cursor: pointer; padding: 1px; } .sort-arrow svg path { fill: #DFDFDF; transition: fill 0.15s; } .sort-arrow.active svg path { fill: #1A1A1A; }

because Safari ignores background on