/*! * My Dine — Shared Page Styles (v1) * File: /frontend/css/md-pages.v1.css * Purpose: Shared, reusable layout + typography primitives for frontend pages. * * Conventions: * - Keep selectors prefixed with `md-` to avoid collisions with legacy CSS. * - Pages compose these primitives and keep page-specific rules local. * - Navbar height is injected via CSS var `--md-nav-h` (fallback 76px). */ :root{--md-nav-h:76px;--md-font-body:Arial, Helvetica, sans-serif;--md-font-display:"Bebas Neue Pro", "Bebas Neue", sans-serif;--md-type-caption:.75rem;--md-type-small:.875rem;--md-type-body:1rem;--md-type-card:1.0625rem;--md-type-price:1.25rem;--md-type-section:1.875rem;--md-type-hero:3rem;--md-accent-strong:#792a7a;--md-safe-top:env(safe-area-inset-top,0px);--md-safe-bottom:env(safe-area-inset-bottom,0px);--md-safe-left:env(safe-area-inset-left,0px);--md-safe-right:env(safe-area-inset-right,0px);--md-text:#111827;--md-muted:#6b7280;--md-border:#e5e7eb;--md-border-soft:#f1f5f9;--md-surface:#fff;--md-surface-subtle:#f3f4f6;--md-accent:#953d96;--md-accent-soft:#d39bd4;--md-accent-tint:#953d961a;--md-accent-ring:#953d962e;--md-radius-sm:10px;--md-radius-lg:14px;--md-radius-xl:16px;--md-shadow-sm:0 4px 10px #0000000d;--md-shadow-lg:0 10px 25px #00000014;--md-focus:0 0 0 .2rem var(--md-accent-ring);--md-voucher-media-ratio:3 / 2;--md-voucher-media-fallback:66.6667%;--md-voucher-logo-w:76px;--md-voucher-logo-h:28px;--md-z-offcanvas:3000;--md-z-offcanvas-backdrop:2990;--md-z-modal:3100;--md-z-modal-backdrop:3090;--md-z-toast:3200}.md-page{padding:calc(var(--md-nav-h,76px) + var(--md-safe-top,0px) + 1.5rem) 0 calc(2.25rem + var(--md-safe-bottom,0px))}@media (width<=991.98px){.md-page{padding-top:calc(var(--md-nav-h,76px) + var(--md-safe-top,0px) + 2rem)}}.md-link{color:inherit;text-decoration:none}.md-link:hover{text-decoration:underline}.md-link-accent{color:var(--md-accent);font-weight:900;text-decoration:none}.md-link-accent:hover{text-decoration:underline}.md-visually-hidden{clip:rect(0, 0, 0, 0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.md-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.25rem;display:flex}.md-title{letter-spacing:-.02em;color:var(--md-text);margin:0;font-size:clamp(1.8rem,2.6vw,2.4rem);font-weight:900}.md-subtitle{color:var(--md-muted);max-width:56ch;margin:.35rem 0 0;font-size:.98rem}.md-card{border-radius:var(--md-radius-xl);background:var(--md-surface);box-shadow:var(--md-shadow-sm);border:1px solid #00000012;height:100%;transition:transform .18s,box-shadow .18s;overflow:hidden}.md-card:hover{box-shadow:var(--md-shadow-lg);transform:translateY(-2px)}.md-card-media{background:var(--md-surface-subtle);overflow:hidden}.md-card-media>img{object-fit:cover;width:100%;height:100%;display:block}.md-pill{background:var(--md-surface-subtle);color:var(--md-text);border-radius:999px;align-items:center;gap:6px;width:fit-content;padding:6px 10px;font-size:.82rem;font-weight:800;display:inline-flex}.md-chip{border:1px solid var(--md-border);background:var(--md-surface);color:var(--md-text);border-radius:999px;align-items:center;gap:.5rem;padding:.55rem .85rem;font-weight:900;display:inline-flex;box-shadow:0 2px 10px #0000000a}.md-filterbar{-webkit-overflow-scrolling:touch;flex-wrap:nowrap;align-items:center;gap:.6rem;margin:.25rem 0 1rem;padding-bottom:.35rem;display:flex;overflow-x:auto}.md-filterbar::-webkit-scrollbar{height:8px}.md-filterbar::-webkit-scrollbar-thumb{background:#0000001a;border-radius:999px}.md-filter-pill{white-space:nowrap;user-select:none;background:#fff;border:1px solid #00000024;border-radius:14px;align-items:center;gap:.6rem;min-height:44px;padding:10px 14px;font-weight:900;transition:background .15s,border-color .15s,transform .15s;display:inline-flex;color:var(--md-text)!important;text-decoration:none!important}.md-filter-pill:hover{background:#fafafa;border-color:#0003}.md-filter-pill:focus-visible{box-shadow:0 0 0 .2rem var(--md-accent-ring);outline:none}.md-filter-pill.is-active{border-color:var(--md-accent);background:var(--md-accent-tint);color:var(--md-accent)!important}.md-filter-count{background:var(--md-surface-subtle);min-width:28px;height:22px;color:var(--md-text);border:1px solid #0000000f;border-radius:999px;justify-content:center;align-items:center;padding:0 8px;font-size:.85rem;font-weight:900;line-height:1;display:inline-flex}.md-filter-pill.is-active .md-filter-count{background:#953d9638;border-color:#953d9640}.md-input{border:1px solid #d1d5db;border-radius:999px;outline:none;padding:10px 14px}.md-input:focus{border-color:var(--md-accent);box-shadow:var(--md-focus)}.md-dropdown{position:relative}.md-dropdown-label{background:var(--md-surface);border-radius:var(--md-radius-sm);cursor:pointer;user-select:none;border:1px solid #d1d5db;justify-content:space-between;align-items:center;padding:10px 12px;display:flex}.md-dropdown-label:hover{background:#f9fafb}.md-dropdown-options{background:var(--md-surface);border-radius:var(--md-radius-sm);box-shadow:var(--md-shadow-lg);z-index:50;border:1px solid #d1d5db;margin:0;padding:6px;display:none;position:absolute;top:calc(100% + 6px);left:0;right:0}.md-dropdown.open .md-dropdown-options{display:block}.md-dropdown-options>li{cursor:pointer;border-radius:8px;padding:10px;list-style:none}.md-dropdown-options>li:hover{background:var(--md-surface-subtle)}.md-dropdown-options>li.md-selected{background:var(--md-accent-tint);font-weight:900}.md-voucher-card-link{border-radius:var(--md-radius-xl);width:100%;height:100%;color:var(--md-text);text-decoration:none;display:block}.md-voucher-card-link:hover{color:var(--md-text)}.md-voucher-card-link:focus-visible{outline:3px solid var(--md-accent-strong);outline-offset:4px}.md-voucher-card,.md-voucher-card *{box-sizing:border-box}.md-voucher-card{border:1px solid var(--md-border);border-radius:var(--md-radius-xl);background:var(--md-surface);width:100%;height:100%;box-shadow:var(--md-shadow-sm);font-family:var(--md-font-body);overflow-wrap:anywhere;flex-direction:column;transition:box-shadow .18s,border-color .18s;display:flex;overflow:hidden}.md-voucher-card-link:hover .md-voucher-card{border-color:#d4bdd5;box-shadow:0 6px 18px #11182714}.md-voucher-media{aspect-ratio:var(--md-voucher-media-ratio);background:var(--md-surface-subtle);flex:none;position:relative;overflow:hidden}.md-voucher-media>img,.md-voucher-media>picture,.md-voucher-media>picture>img{width:100%;height:100%;display:block}.md-voucher-media>img,.md-voucher-media>picture>img{object-fit:cover}.md-voucher-card--event .md-voucher-media>picture>img{object-fit:contain}.md-voucher-media-placeholder{width:100%;height:100%}@supports not (aspect-ratio:1 / 1){.md-voucher-media{height:0;padding-top:var(--md-voucher-media-fallback)}.md-voucher-media>img,.md-voucher-media>picture,.md-voucher-media-placeholder{position:absolute;inset:0}}.md-voucher-venue-logo{width:calc(var(--md-voucher-logo-w) + 12px);height:var(--md-voucher-logo-h);background:#00000080;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:12px;left:12px;overflow:hidden}.md-voucher-venue-logo img{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:100%;display:block}.md-voucher-body{flex-direction:column;flex:1;gap:8px;min-width:0;padding:14px;display:flex}.md-voucher-venue{font:700 var(--md-type-caption)/1.4 var(--md-font-body);letter-spacing:.04em;text-transform:none;color:#465064}.md-voucher-title{font:700 var(--md-type-card)/1.4 var(--md-font-body);color:var(--md-text);margin:0}.md-voucher-price{font:700 var(--md-type-price)/1.2 var(--md-font-body);color:var(--md-text)}.md-voucher-event-state{font:700 var(--md-type-caption)/1.4 var(--md-font-body);color:var(--md-accent-strong);background:#f8eef8;border:1px solid #e8cde8;border-radius:5px;align-self:flex-start;padding:4px 8px}.md-voucher-event-state.is-sold-out{color:var(--md-text);background:var(--md-surface-subtle);border-color:var(--md-border)}.md-voucher-event-details{color:#465064;font:400 var(--md-type-small)/1.4 var(--md-font-body);flex-wrap:wrap;gap:5px 12px;display:flex}.md-voucher-event-details i{color:var(--md-accent-strong);margin-right:5px}.md-voucher-tags{flex-wrap:wrap;gap:5px;display:flex}.md-voucher-tag{font:400 var(--md-type-caption)/1.4 var(--md-font-body);background:var(--md-surface-subtle);color:#424b5b;border-radius:5px;padding:4px 8px}.md-voucher-action{color:var(--md-accent);font:700 var(--md-type-small)/1.4 var(--md-font-body)}.md-voucher-action i{margin-left:5px}.md-voucher-card--retail{min-width:0;box-shadow:none;color:#2e2f32;border:0;border-radius:8px;transition:none;overflow:visible}.md-voucher-card-link:hover .md-voucher-card--retail{box-shadow:none;border:0}.md-voucher-card--retail .md-voucher-media{border-radius:8px}.md-voucher-card--retail .md-voucher-body{flex:0;gap:4px;padding:12px 0 0}.md-voucher-card--retail .md-voucher-venue{font:400 .8125rem/1.4 var(--md-font-body);letter-spacing:normal;text-transform:none;color:#595b60}.md-voucher-card--retail .md-voucher-title{font:600 1rem/1.3 var(--md-font-body);color:#2e2f32;-webkit-line-clamp:3;-webkit-box-orient:vertical;min-width:0;display:-webkit-box;overflow:hidden}.md-voucher-card-link:focus-visible .md-voucher-card--retail .md-voucher-title{-webkit-line-clamp:unset;display:block;overflow:visible}.md-voucher-card-link:hover .md-voucher-card--retail .md-voucher-title{text-decoration:underline;text-decoration-color:var(--md-accent);text-underline-offset:.2em}.md-voucher-card--retail .md-voucher-price{font:700 1.5rem/1.1 var(--md-font-body);color:#2e2f32;font-variant-numeric:tabular-nums;margin-top:4px}.md-voucher-card--retail .md-voucher-price-pence{vertical-align:super;font-size:.6em;line-height:0}.md-voucher-card--retail .md-voucher-meta{flex-direction:column;align-items:flex-start;gap:6px;padding-top:2px;display:flex}.md-voucher-card--retail .md-voucher-meta:empty{display:none}.md-voucher-card--retail .md-voucher-event-state{border:0;border-radius:4px;padding:3px 7px;font-weight:600}.md-voucher-card--retail .md-voucher-tag{color:#595b60;border-radius:4px;padding:2px 6px}.md-voucher-grid,.md-home-products-grid.md-voucher-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,max(9rem,50% - 6px)),1fr));gap:20px 12px;min-width:0;display:grid}.md-voucher-grid>*{min-width:0}.md-voucher-grid-empty{grid-column:1/-1;width:100%}@media (width>=768px){.md-voucher-grid,.md-home-products-grid.md-voucher-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,max(9rem,50% - 8px)),1fr));gap:24px 16px}}@media (width>=992px){.md-voucher-grid,.md-home-products-grid.md-voucher-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,max(9rem,25% - 12px)),1fr))}}@supports (grid-template-rows:subgrid){.md-voucher-grid,.md-home-products-grid.md-voucher-grid{row-gap:4px}.md-voucher-grid>.md-voucher-grid-item,.md-voucher-grid>.md-voucher-grid-item>.md-voucher-card-link,.md-voucher-grid .md-voucher-card--retail{grid-template-rows:subgrid;grid-row:span 5;display:grid}.md-voucher-grid .md-voucher-card--retail{padding-bottom:20px}.md-voucher-grid .md-voucher-card--retail .md-voucher-body{grid-template-rows:subgrid;grid-row:span 4;padding-top:8px;display:grid}.md-voucher-grid .md-voucher-card--retail .md-voucher-meta{align-self:start}}@media (width>=360px) and (width<=575.98px){.md-home-products-grid.md-home-products-grid--mixed{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}.md-home-products-grid--mixed>.md-home-event-item,.md-home-products-grid--mixed>.md-home-events-toggle{grid-column:1/-1}}@media (prefers-reduced-motion:reduce){.md-voucher-card{transition:none}}@media (forced-colors:active){.md-voucher-card-link:focus-visible{outline-color:highlight}}.md-pagination{flex-direction:column;align-items:center;gap:10px;margin-top:1.25rem;display:flex}.md-pagination-meta{color:var(--md-muted);text-align:center;font-size:.92rem;font-weight:850}.md-pagination-list{flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none;display:flex}.md-page-link{border:1px solid var(--md-border);min-width:42px;height:42px;color:var(--md-text);background:#fff;border-radius:12px;justify-content:center;align-items:center;font-weight:950;text-decoration:none;display:inline-flex;box-shadow:0 2px 10px #00000008}.md-page-link:hover{color:var(--md-text);border-color:#0000002e}.md-page-link:focus{outline:none}.md-page-link:focus-visible{box-shadow:0 0 0 .2rem #953d962e,0 10px 22px #0000001a}.md-page-link.is-active{color:#fff;background:#111827;border-color:#00000014}.md-page-link.is-disabled{opacity:.55;pointer-events:none}.md-page-ellipsis{min-width:42px;height:42px;color:var(--md-muted);border-radius:12px;justify-content:center;align-items:center;font-weight:950;display:inline-flex}.md-offcanvas{background:#fff}.md-offcanvas .offcanvas-header{padding-top:calc(1rem + var(--md-safe-top));padding-left:calc(1rem + var(--md-safe-left));padding-right:calc(1rem + var(--md-safe-right));border-bottom:1px solid var(--md-border-soft);padding-bottom:.9rem}.md-offcanvas .offcanvas-body{padding-top:1rem;padding-left:calc(1rem + var(--md-safe-left));padding-right:calc(1rem + var(--md-safe-right));padding-bottom:calc(1rem + var(--md-safe-bottom))}.md-offcanvas-title{letter-spacing:-.02em;color:var(--md-text);margin:0;font-size:1.15rem;font-weight:950}.md-offcanvas-nav{gap:6px;display:grid}.md-offcanvas-link{min-height:52px;color:var(--md-text);user-select:none;background:0 0;border-radius:14px;align-items:center;padding:12px;font-size:1.08rem;font-weight:900;text-decoration:none;display:flex}.md-offcanvas-link:hover{color:var(--md-text);background:#f9fafb}.md-offcanvas-link:focus-visible{box-shadow:var(--md-focus);outline:none}.md-offcanvas-link.active{background:var(--md-accent-tint);color:var(--md-accent)}.md-offcanvas-link-secondary{font-size:1.02rem;font-weight:850}.md-offcanvas-divider{border-top:1px solid var(--md-border-soft);margin:14px 0}.md-offcanvas-meta{color:var(--md-muted);letter-spacing:.01em;font-size:.92rem;font-weight:800}.md-offcanvas-legal{border-top:1px solid var(--md-border-soft);flex-wrap:wrap;gap:14px;margin-top:14px;padding-top:10px;display:flex}.md-offcanvas-legal a{color:var(--md-muted);font-weight:800;text-decoration:none}.md-offcanvas-legal a:hover{color:var(--md-text);text-decoration:underline}.offcanvas{z-index:var(--md-z-offcanvas)}.offcanvas-backdrop{z-index:var(--md-z-offcanvas-backdrop)}.modal{z-index:var(--md-z-modal)}.modal-backdrop{z-index:var(--md-z-modal-backdrop)}.md-modal{z-index:calc(var(--md-z-modal) + 50)}html.md-modal-open .md-page .md-card,html.md-modal-open .md-account-shell,html.md-modal-open .md-account-content-card,html.md-modal-open .md-account-nav-card{filter:none!important;perspective:none!important;transform:none!important}.md-account-shell .md-card:hover,.md-account-nav-card:hover,.md-account-content-card:hover,.md-vouchers-list .md-card:hover{transform:none!important}.md-skip-link{z-index:5000;color:#111827;border:3px solid var(--md-accent);font-family:var(--md-font-body);background:#fff;border-radius:8px;padding:12px 18px;position:fixed;top:8px;left:12px;transform:translateY(-160%)}.md-skip-link:focus{transform:translateY(0)}#md-main-content:focus{outline:none}