/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
 * Dynamic menu theme (ported from iOS AppTheme). Defaults below equal the
 * previously-hardcoded values, so a venue that sets no color fields renders
 * unchanged. ThemeService overrides these at runtime from clientData. Each
 * admin color also has an `-rgb` channel triplet for `rgba(var(--x-rgb), a)`
 * opacity variants.
 */
:root {
  --menu-background: #191919;
  --menu-background-rgb: 25, 25, 25;
  --menu-item-background: #252525;
  --menu-item-background-rgb: 37, 37, 37;
  --menu-text: #FFFFFF;
  --menu-text-rgb: 255, 255, 255;
  --menu-description: #CFCFCF;
  --menu-description-rgb: 207, 207, 207;
  --menu-secondary-text: #A2A2A2;
  --menu-secondary-text-rgb: 162, 162, 162;
  --menu-price: #FF6064;
  --menu-price-rgb: 255, 96, 100;
  --menu-accent: #FF6064;
  --menu-accent-rgb: 255, 96, 100;
  --menu-accent-text: #FFFFFF;
  --menu-accent-text-rgb: 255, 255, 255;
  --menu-image-border: #2B2B2B;
  --menu-image-border-rgb: 43, 43, 43;
  /* luminance-derived (defaults match today's dark theme; set by ThemeService) */
  --menu-elevated-fill: rgba(255, 255, 255, 0.08);
  --menu-elevated-stroke: rgba(255, 255, 255, 0.12);
  --menu-item-border: #2B2B2B;
  --menu-shadow: rgba(0, 0, 0, 0.42);
  --menu-shimmer-tint: rgba(255, 255, 255, 0.08);
  --menu-on-surface: #FFFFFF;
}

body {
  margin: 0;
  background: var(--menu-background, #191919);
}

body.pd-sheet-open {
  overflow: hidden;
  touch-action: none;
}

@keyframes mediaShimmer {
  0%, 100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
/* ===== Tourist attractions (FE2-T168) — fixed platform palette =====
 * GetYourGuide brand colours, ported from Android `AttractionsColors`. Deliberately NOT `--menu-*`
 * (ThemeService overwrites those per venue at runtime): attractions are platform/location content,
 * identical on every venue, WCAG-audited once. Only CSS variables here — each component sets its own
 * background/color so floating elements (banner) don't get an opaque fill. Contrast ratios on white
 * are noted for the audit. */
.attractions-scope {
  --attr-bg: #FFFFFF;
  --attr-surface: #FFFFFF;
  --attr-surface-variant: #F1F3F5;
  --attr-on-surface: #1A2B49; /* 14.13:1 on white */
  --attr-on-surface-variant: #5A6B84; /* 5.42:1 */
  --attr-accent: #0071EB; /* 4.60:1 UI */
  --attr-on-accent: #FFFFFF;
  --attr-price: #D6193C; /* 5.17:1 */
  --attr-highlight: #FF5533; /* 3.18:1 — ICONS ONLY, never text */
  --attr-border: #E4E7EC;
  --attr-shadow: rgba(0, 0, 0, 0.18);
  --attr-shimmer-tint: #B4BECB;
}

/* ===== Events — fixed dark palette =====
 * Ported from the iOS Events & Deals screens, which are hardcoded dark regardless of venue. Like
 * `.attractions-scope` this deliberately does NOT use `--menu-*`: ThemeService overwrites those per
 * venue at runtime, and a venue that themes its menu light would otherwise render white text on
 * white event cards. Events are the same surface at every venue, so the palette is audited once
 * here. Contrast ratios are against `--ev-bg` unless noted. */
.events-scope {
  --ev-bg: #191919;
  --ev-surface: #232323; /* the card fill */
  --ev-surface-raised: #252525; /* details header + business block */
  --ev-on-surface: #FFFFFF; /* 16.10:1 on --ev-surface */
  --ev-on-surface-variant: #CFCFCF; /* 10.03:1 */
  --ev-on-surface-muted: #A2A2A2; /*  5.63:1 — smallest text still passes AA */
  --ev-accent: #FEC94C; /* calendar pill + "read more"; 11.87:1 */
  --ev-on-accent: #191919;
  --ev-date-badge: #FF6064; /* the date-badge month strip; ICON/FILL, dark text on it */
  --ev-on-date-badge: #0C0C0C;
  --ev-border: #2B2B2B;
  --ev-shadow: rgba(0, 0, 0, 0.42);
  --ev-shimmer-tint: rgba(255, 255, 255, 0.08);
  --ev-price-surface: #FFFFFF; /* the price pill is a white chip, per iOS */
  --ev-on-price-surface: #0C0C0C;
}

body.attr-sheet-open {
  overflow: hidden;
  touch-action: none;
}

body.lang-sheet-open {
  overflow: hidden;
  touch-action: none;
}

body.reel-open {
  overflow: hidden;
  touch-action: none;
}

body.reel-open main {
  visibility: hidden !important;
}

/* White dots for the two platform-content galleries (attraction details, media promotion).
 *
 * Swiper Element renders its pagination inside a shadow root, so a descendant selector like
 * `.attr-gallery .swiper-pagination-bullet` can no longer reach it — not a specificity problem,
 * a boundary one. Custom properties DO inherit through the boundary, so they are now the whole
 * mechanism, set per carousel host rather than by an ancestor class.
 *
 * These live here rather than in the component stylesheets because the two carousels are styled
 * identically and neither host is the component's own root element. */
.attr-gallery-swiper,
.pm-gallery-swiper {
  --swiper-pagination-bullet-inactive-color: #FFFFFF;
  --swiper-pagination-bullet-inactive-opacity: 0.55;
  --swiper-pagination-color: #FFFFFF;
}

html,
body {
  color-scheme: only light !important;
}

/* Import Poppins font */
@font-face {
  font-family: "Poppins";
  src: url('Poppins-Thin.ttf') format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url('Poppins-ThinItalic.ttf') format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: "Poppins";
  src: url('Poppins-ExtraLight.ttf') format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url('Poppins-ExtraLightItalic.ttf') format("truetype");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "Poppins";
  src: url('Poppins-Light.ttf') format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url('Poppins-LightItalic.ttf') format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Poppins";
  src: url('Poppins-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url('Poppins-Italic.ttf') format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Poppins";
  src: url('Poppins-Medium.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url('Poppins-MediumItalic.ttf') format("truetype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Poppins";
  src: url('Poppins-SemiBold.ttf') format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url('Poppins-SemiBoldItalic.ttf') format("truetype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Poppins";
  src: url('Poppins-Bold.ttf') format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url('Poppins-BoldItalic.ttf') format("truetype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Poppins";
  src: url('Poppins-ExtraBold.ttf') format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url('Poppins-ExtraBoldItalic.ttf') format("truetype");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "Poppins";
  src: url('Poppins-Black.ttf') format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url('Poppins-BlackItalic.ttf') format("truetype");
  font-weight: 900;
  font-style: italic;
}
/* Reset and base styles */
* {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.container {
  width: 90%;
  margin: 0 auto;
}

/* Desktop: the whole app as a centred, fixed-width column. Last, so its overrides
   land after everything above. */
/* =============================================================================
 * Desktop frame
 *
 * This is a phone app that happens to run in a browser: one column, bottom
 * sheets, bars pinned to the display edges, a hero SVG drawn on a 376-wide
 * viewBox. Stretched across a 1440px window every one of those reads as broken.
 * So from 768px up — the breakpoint the reel already frames itself at — the
 * whole app renders as a centred, fixed-width column on a dark backdrop. The
 * layout inside the column is byte-for-byte the mobile one; nothing below the
 * breakpoint is touched by this file.
 *
 * There are two halves to it:
 *
 *  1. `body` becomes the column. Everything in normal flow follows for free.
 *
 *  2. Every `position: fixed` element has to be told separately, because its
 *     containing block is the viewport, not the column. There is no way to
 *     re-parent them wholesale: the one trick that would (a `transform` /
 *     `contain: paint` on an ancestor) only holds if that ancestor is also the
 *     scroll container, and this app scrolls the *window* — menu.component.ts's
 *     scroll spy and scroll-to-category, the events and attractions infinite
 *     scroll, and the router's `scrollPositionRestoration` all read
 *     `window.scrollY`. Moving the scroll to an inner element to save this file
 *     would rewrite all of that and put the phone build at risk to fix desktop.
 *     So they are enumerated below — every `position: fixed` in the app is in
 *     here, grouped by how it is anchored.
 *
 * `--frame-gutter` is the space between a viewport edge and the column. The
 * `50%` in it resolves at each use site against that element's containing block
 * — for a fixed element, the initial containing block, which is the viewport
 * minus the scrollbar, i.e. exactly the box `body` is centred in. `100vw` would
 * NOT do: it counts the scrollbar, and would sit everything half a scrollbar
 * to the right of the column it is supposed to line up with.
 *
 * The overrides are `!important` because they deliberately reach into
 * components from outside. Angular's emulated encapsulation adds an attribute
 * to every component selector (`.pd-backdrop[_ngcontent-x]`), so a global rule
 * naming the same class always loses on specificity without it.
 * ============================================================================= */
:root {
  /* The one number this file is about. ~iPhone Pro Max logical width. */
  --app-frame-width: 430px;
}

@media (min-width: 768px) {
  :root {
    --frame-gutter: max(0px, calc(50% - var(--app-frame-width) / 2));
    /* For the handful of elements laid out as `width: 90%` + a 5% side inset:
       on mobile those percentages are of the viewport, which here would be the
       whole window rather than the column. */
    --frame-inset-5: calc(var(--frame-gutter) + var(--app-frame-width) * 0.05);
    --frame-width-90: calc(var(--app-frame-width) * 0.9);
  }
  html {
    /* Always reserved, so the column doesn't shift sideways when moving from a
       route that scrolls to one that doesn't. */
    scrollbar-gutter: stable;
    /* The surface the venue's app sits ON. It has to stay clearly "not the app",
       but a flat neutral is the wrong kind of not-the-app: this screen is themed
       per venue down to the shimmer tint, and a fixed near-black frames a white
       or brand-coloured menu like a letterbox.
       So it's the venue's own background pushed most of the way to black — one
       `color-mix` that lands correctly at both ends of the range: #191919 stays
       near-black (a dark menu wants the surround darker than it is, and reads
       against the shadow), while a white menu gets a mid grey to sit on and a
       brand-coloured one keeps its hue. Setting a background here is also what
       stops `body`'s propagating to the canvas.
       The wash is a single soft light from behind the top of the column, so the
       surround has somewhere to fall off to; `fixed` keeps it anchored to the
       viewport instead of stretching over a long menu. */
    background-color: #0C0C0C;
    background-image: radial-gradient(80% 55% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 70%);
    background-attachment: fixed;
  }
  @supports (background: color-mix(in srgb, red 50%, blue)) {
    html {
      background-color: color-mix(in srgb, var(--menu-background, #191919) 30%, #050505);
    }
  }
  body {
    width: var(--app-frame-width);
    min-height: 100vh;
    margin: 0 auto;
    /* The menu reserves room for the attractions banner as a bottom MARGIN on
       `.menu-bottom-spacer` (banner + gap + cart + margin, ~298px with the mosaic
       up). A bottom margin collapses out through `main` and out of `body`, so
       `body`'s box has always ended at the last card with that band living
       outside it — invisible on a phone, where `body`'s background propagates to
       the canvas and paints the whole viewport anyway. `html` having its own
       background here stops that propagation, which is what turned the reserved
       band into a strip of backdrop between the last card and the banner.
       `flow-root` keeps the margin inside `body`, so the venue background runs
       down to the banner as it does on a phone. */
    display: flow-root;
    /* Hairline + drop shadow, so the column reads as a device and not as a page
       that failed to fill its window. The hairline is the venue's own elevated
       stroke — ThemeService already flips it white-on-dark / black-on-light by
       background luminance, which is exactly the question an edge between the
       column and its surround asks. */
    box-shadow: 0 0 0 1px var(--menu-elevated-stroke, rgba(255, 255, 255, 0.12)), 0 24px 80px rgba(0, 0, 0, 0.55);
  }
  /* ---- Full-bleed: anything spanning edge to edge, or `inset: 0` ------------
     Scrims, full-screen overlays, top bars, bottom sheets and bottom bars. They
     differ in the vertical, which is left alone; horizontally they all want the
     same thing — the column's edges. `width: auto` undoes the `width: 100%` /
     `width: 90%` several of them use to span. */
  .loading-overlay,
  .backdrop,
  .modal-backdrop,
  .pd-backdrop,
  .product-details-container,
  .ls-backdrop,
  .ls-sheet,
  .attr-backdrop,
  .attr-sheet,
  .attr-banner,
  .attr-mosaic,
  .attr-drop-scrim,
  .push-prompt-overlay,
  .splash-container,
  .sticky-nav,
  .search-container.active,
  .search-header,
  .header-category-detail,
  .payment-sheet,
  .unavailable-alert,
  .unavailable-alert-modal,
  .ordering-unavailable-modal,
  .note-modal,
  .note-modal .modal-overlay,
  .success-modal,
  .order-details-drawer,
  .order-details-drawer .drawer-content .drawer-header,
  .promo-scrim,
  .promo-sheet,
  .delivery-form-modal,
  .delivery-form-modal .modal-overlay,
  .delivery-form-modal .form-content,
  .country-selector-modal,
  .country-selector-modal .country-selector-content,
  app-reel-overlay {
    left: var(--frame-gutter) !important;
    right: var(--frame-gutter) !important;
    width: auto !important;
  }
  /* The search header is inset 5% a side rather than full-bleed, and its hidden
     state animates `transform` — so it is placed with left/width only, never by
     re-centring it with a translate. */
  .search-header {
    left: var(--frame-inset-5) !important;
    right: auto !important;
    width: var(--frame-width-90) !important;
    margin-left: 0 !important;
  }
  /* Same shape: 90%-wide bottom buttons. */
  .floating-cart,
  .order-now {
    left: var(--frame-inset-5) !important;
    right: auto !important;
    width: var(--frame-width-90) !important;
    margin-left: 0 !important;
  }
  /* ---- Already centred on the viewport ------------------------------------
     `.toast-container`, `.attr-drop-target` and `.ev-toast` use
     `left: 50%; transform: translateX(-50%)`, and the column is centred on that
     same 50%, so they need nothing. The events chrome is centred the same way
     but spans a 720px column of its own — capped here to the frame. */
  .ev-nav,
  .ev-close-bar,
  .ev-footer {
    max-width: var(--app-frame-width) !important;
  }
  /* ---- Anchored to one edge ------------------------------------------------ */
  .attr-back-btn {
    left: calc(var(--frame-gutter) + 16px) !important;
  }
  /* The draggable attractions puck. Its x-space is the element's own left edge
     out to `W` in the component, and `W` is measured from `body` — so moving the
     element's origin to the column edge moves the whole gesture with it
     (see attractions-fab.component.ts `measure`). */
  .attr-fab-pos {
    left: var(--frame-gutter) !important;
  }
}
html.samsung-dark-fix {
  filter: invert(1) hue-rotate(180deg);
  background: white !important;
}

/*# sourceMappingURL=styles.css.map*/