@charset "UTF-8";
@import url("font-awesome/css/all.min.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Open+Sans:wght@300&family=Roboto:wght@300&family=Sacramento&display=swap");
/* Never write a raw hex for a themeable color — read the --oo-* custom property (or the
   --mud-palette-* slot driven from the same field). New colors go in OnlineOrderThemeContract,
   not here, and literal fallbacks must match that contract's defaults. */
html, body {
  color: var(--mud-palette-text-primary, #4a4a4a);
  font-family: "Inter", sans-serif;
  font-size: 0.95em;
  font-weight: 300;
  height: 100%;
  scroll-behavior: smooth !important;
  scroll-margin-top: 140px;
  scroll-padding-top: 140px;
}

/* The browser's UA `button { font-family: ... }` outranks MudBlazor's bare `*` reset, so without
   this every hand-rolled <button>/<input> renders in the system font. Type selectors only, so
   MudBlazor's class-based typography still wins on its own components. */
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.valid.modified:not([type=checkbox]) {
  outline: 1px solid var(--oo-success, #2e9e5b);
}

.invalid {
  outline: 1px solid var(--oo-danger, #d64545);
}

.validation-message {
  color: var(--oo-danger, #d64545);
}

.validate {
  color: var(--oo-danger, #d64545);
  font-weight: 800;
}

/* MudThemeProvider re-emits --mud-palette-* below us, so retargeting those vars wouldn't take.
   Redirect the utilities themselves — same specificity, later in the cascade. */
.mud-success-text {
  color: var(--oo-success, #2e9e5b) !important;
}

.mud-error-text {
  color: var(--oo-danger, #d64545) !important;
}

.mud-warning-text {
  color: var(--oo-warning, #b07d1a) !important;
}

.mud-info-text {
  color: var(--oo-info, #4a86c5) !important;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.oi-xl {
  font-size: 9em;
}

strong, .strong {
  font-weight: 800;
}

label.form-label {
  font-weight: 800;
  margin-bottom: 0.2rem;
}

/* ── Modal chrome ──
   Structural rules for the .modal / .modal-dialog / .modal-content / .modal-backdrop / .btn-close
   DOM that ModalView renders; without them a modal lays out inline in the page flow. Positioning
   and sizing only — colors come from the theme tokens. ModalView writes display + z-index inline. */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--oo-card-surface, #fff);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  outline: 0;
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  flex-shrink: 0;
  padding: 0.75rem 1rem 1rem;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0.5;
}

button.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: 0.5;
  cursor: pointer;
}

button.btn-close:hover {
  opacity: 0.75;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
  .modal-sm {
    max-width: 300px;
  }
  .modal-lg {
    max-width: 800px;
  }
  .modal-xl {
    max-width: 1140px;
  }
}
@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
}
.modal-title {
  border-bottom: none !important;
  width: 100% !important;
}

.modal-header {
  border-bottom: none !important;
  margin-bottom: -29px !important;
}

.modal-title > div {
  font-size: 0.9em;
  font-family: "Inter", sans-serif;
  color: var(--oo-text-secondary);
  font-weight: 500;
}

.modal-title > h4 {
  font-size: 1.3rem !important;
  color: var(--oo-text);
  font-weight: 600;
  font-size: 1.5em;
}

/* .oo-page-headline is the merchant-editable menu/checkout headline. It shares the h1 look so an
   unstyled headline (the stored default is plain text) still renders in the display font; markup
   that carries its own inline font/size — brands that saved the legacy Design page — overrides it. */
h1,
.oo-page-headline {
  font-family: "Sacramento", cursive;
  font-size: 2.7em;
  padding-bottom: 0.2em;
}

@media (min-width: 992px) {
  h1,
  .oo-page-headline {
    font-size: 4em;
  }
}
.display-if-md {
  display: block;
}

@media (min-width: 992px) {
  .display-if-md {
    display: none;
  }
}
h2 {
  font-family: "Inter", sans-serif;
  font-size: 2.5em;
  padding-top: 0.3em;
  padding-bottom: 0.2em;
}

/* Three distinct title roles, kept separate so tuning one doesn't move the others: bare h4 is a
   modal title, .oo-menu-title names a menu category, .oo-section-title is the small in-card label. */
h4, .oo-menu-title {
  color: var(--oo-section-title, #677bc1);
  border-bottom: solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)) 1px;
  font-size: 1.3em;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  padding-bottom: 5px;
  margin-bottom: 16px;
}

/* Section label inside a card (Contact, Payment, Rewards, modifier prompts) — an eyebrow, not a
   heading; the card's own border carries the structure. */
.oo-section-title {
  color: var(--oo-section-title, #677bc1);
  border-bottom: solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)) 1px;
  font-size: 11px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding-top: 0;
  padding-bottom: 8px;
  margin-bottom: 14px;
}

/* Inline status marker inside a section title — opts out of the eyebrow's case/spacing/color. */
.oo-section-title-status {
  color: var(--oo-text);
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  margin-top: -2px;
}

h5 {
  color: var(--oo-text);
  font-size: 1.1rem;
  font-family: "Inter", sans-serif;
  font-weight: 800;
}

/*a > div {
    color: #adadad !important;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
}

a:hover > div {
    color: #4a4a4a !important;
    font-weight: bold;
}*/
a:hover > div > h5 {
  color: var(--oo-link, #01497c);
}

.debugInfo {
  font-size: 0.6em;
  font-family: monospace;
  color: black;
  display: none;
}

.full-width {
  width: 100%;
}

/* Present to assistive tech, invisible on screen (aria-live regions). */
.oo-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Anchors here are overwhelmingly tap targets wrapping card/row content (menu items, cart lines,
   combos, past-order rows), not inline text links — a link color on them tints the whole row.
   Inherit by default; genuine text links opt in below. */
a {
  cursor: pointer !important;
  color: inherit;
  font-weight: 400;
  text-decoration: none;
}

.oo-link,
a[href^="tel:"],
a[href^="mailto:"] {
  color: var(--oo-link, #01497c);
}

.oo-link:hover,
a[href^="tel:"]:hover,
a[href^="mailto:"]:hover {
  text-decoration: underline;
}
/* SELECT */
select {
  padding: 1px 23px 0px 4px;
  border-radius: var(--oo-radius, 6px);
  border: solid 1.5px var(--mud-palette-lines-inputs, #e4e0d8);
  background-color: var(--oo-field-bg, #f6f7f8);
  outline: none;
  color: #676970;
  display: inline-block;
  margin: 1px 5px 0px 0px;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='rgb(187, 193, 225)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: -2px;
  appearance: none;
  cursor: pointer;
}

/* ── Form controls (MudBlazor outlined inputs + selects) ──
   House style is a small static label above the box with the hint as the placeholder inside it,
   instead of MudBlazor's label floating up onto the border notch. The input container is already a
   flex column, so the label only has to stop being absolutely positioned and move ahead of the box;
   the notch it used to sit in is then closed. */
.mud-input-control .mud-input-control-input-container > label.mud-input-label-inputcontrol {
  position: static;
  order: -1;
  /* MudBlazor's float transform also carries a 0.75 scale that would fight the font-size below. */
  transform: none !important;
  max-width: 100%;
  font-size: 0.9em;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.4;
  padding: 0 0 4px !important;
  color: var(--mud-palette-text-secondary);
}

.mud-input-outlined-border legend {
  display: none;
}

/* Reclaim the vertical space each variant reserves for the label that would have floated inside it
   (text pushes the box down 16px, filled pads 21px off the top). */
.mud-input-control-input-container > div.mud-input.mud-input-text.mud-input-text-with-label {
  margin-top: 0;
}

.mud-input-control .mud-input-root-filled {
  padding-top: 9px;
  padding-bottom: 9px;
}

.mud-input.mud-input-outlined {
  background-color: var(--oo-field-bg, #f6f7f8);
  border-radius: var(--oo-radius, 6px);
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
  border-radius: var(--oo-radius, 6px);
}

/* Mirrors the shape of MudBlazor's own `.mud-input > input.mud-input-root { font: inherit }` — that
   shorthand resets font-size, and at (0,2,1) it outranks a plain two-class rule. */
.mud-input-control .mud-input > input.mud-input-root,
.mud-input-control .mud-input > textarea.mud-input-root,
.mud-input-control div.mud-input-slot.mud-input-root {
  font-size: 13px;
}

.mud-input-control .mud-input-root-outlined {
  padding-top: 9px;
  padding-bottom: 9px;
}

.mud-input-control .mud-input-root-margin-dense {
  padding-top: 7px;
  padding-bottom: 7px;
}

/* Select dropdown: match the field's text size and tighten the row height. */
.mud-select .mud-input > input.mud-input-root,
.mud-select div.mud-input-slot.mud-input-root {
  font-size: 13px;
}

.mud-popover .mud-list-item {
  padding-top: 6px;
  padding-bottom: 6px;
  min-height: 0;
}

.mud-popover .mud-list-item .mud-typography {
  font-size: 13px;
}

/* Segmented pickers (order type, gratuity, ASAP/Schedule). Sentence case, not MudBlazor's uppercase
   — these are choices the customer reads, and uppercase makes long order-type names wrap. */
.mud-toggle-group .mud-toggle-item {
  text-transform: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  padding: 7px 14px;
}

.mud-toggle-group {
  border-radius: var(--oo-radius, 6px);
}

.categoryMenu {
  top: var(--mud-appbar-height);
  position: sticky;
  margin-left: -20px;
  margin-right: -20px;
}

.mud-appbar .mud-toolbar-appbar {
  height: var(--mud-appbar-height) !important;
}

.header-address {
  font-size: 12px;
}

.header-phone a {
  color: inherit;
  font-weight: bold;
}

.spinner-border-sm {
  border-width: 0px;
}

@media (max-width: 575.98px) {
  .header-logo {
    max-width: 200px;
  }
}
.spinner-border.spinner-border-sm {
  border-width: 0.2rem !important;
}

.mud-progress-circular-circle {
  stroke: white;
  stroke-width: 6px;
}

.mud-alert {
  border: rgba(0, 0, 0, 0.2196078431) solid 1px !important;
}

.receiptDisplay {
  font-family: Courier New, Courier, monospace;
  font-size: 12px;
  overflow: auto;
  overflow-wrap: break-word;
  background-color: var(--oo-card-surface);
  color: var(--oo-text);
  padding: 10px;
  line-height: 15px;
  font-family: monospace;
  overflow-y: scroll;
}

.receiptDisplay-fontsize-medium {
  font-weight: bold;
  font-size: 14px;
}

.receiptDisplay-fontsize-small {
  font-size: 12px;
  font-weight: normal;
}

.receiptDisplay-fontsize-large {
  font-size: 18px;
  font-weight: bold;
}

.receiptDisplay-fontsize-emphasized {
  font-weight: bold;
}

.receiptDisplay-underlineMode-on {
  text-decoration: underline;
}

.reward-option {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 8px;
  border: 2px solid transparent;
  border-radius: 8px;
  background-color: var(--oo-surface-alt);
  cursor: pointer;
  transition: all 0.15s ease;
}

.reward-option:hover {
  background-color: var(--oo-row-hover);
}

.reward-option.selected {
  border-color: var(--oo-btn-bg, #01497c);
  background-color: color-mix(in srgb, var(--oo-btn-bg) 12%, var(--oo-card-surface));
}

.reward-radio {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #adb5bd;
  border-radius: 50%;
  margin-right: 10px;
  position: relative;
  transition: border-color 0.15s;
}

.reward-option.selected .reward-radio {
  border-color: var(--oo-btn-bg, #01497c);
}

.reward-option.selected .reward-radio::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--oo-btn-bg, #01497c);
}

.reward-label {
  flex: 1;
  font-weight: 500;
}

.reward-option.selected .reward-label {
  font-weight: 600;
}

.reward-badge {
  font-size: 0.8em;
  padding: 2px 8px;
  border-radius: 10px;
  background-color: var(--oo-surface-alt);
  color: var(--oo-text-secondary);
  white-space: nowrap;
  margin-left: 10px;
}

.reward-option.selected .reward-badge {
  background-color: var(--oo-btn-bg, #01497c);
  color: var(--oo-btn-text, #fff);
}

.cart-line-unavailable .quantity,
.cart-line-unavailable .price {
  text-decoration: line-through;
  opacity: 0.55;
}

.cart-line-unavailable-pill {
  display: inline-block;
  font-size: 0.7em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--oo-danger);
  background-color: color-mix(in srgb, var(--oo-danger) 14%, var(--oo-card-surface));
  border: 1px solid color-mix(in srgb, var(--oo-danger) 35%, var(--oo-card-surface));
  border-radius: 10px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* Combo (OLO Shortcut) cart styling lives in OrderSummaryView.razor.css — the combo line reuses
   .row-outline so it reads as a normal cart item. */
/* ===================================================================
   Menu display themes (#3096) — .menu-theme-cards (Item Card) and
   .menu-theme-photo (Photo Card). The theme class is applied on the menu
   area (MenuView) and the item-detail modal root (OrderDetailItemView);
   List View renders the untouched legacy markup, so it needs no rules here.
   Card markup comes from MenuItemCardView (.menu-item > .item-info + .item-right).
   =================================================================== */
.menu-theme-cards .menu-item,
.menu-theme-photo .menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  background: var(--oo-card-surface, #ffffff);
  border: 1px solid var(--mud-palette-lines-inputs, #e4e0d8);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 14px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.menu-theme-cards .menu-item:hover,
.menu-theme-photo .menu-item:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.menu-theme-cards .item-info,
.menu-theme-photo .item-info {
  flex: 1;
  min-width: 0;
}

.menu-theme-cards .item-name,
.menu-theme-photo .item-name {
  font-weight: 600;
  margin-bottom: 4px;
}

/* Clamp long descriptions so cards in a row keep a uniform height. */
.menu-theme-cards .item-desc,
.menu-theme-photo .item-desc {
  font-size: 0.85em;
  color: #7a7a7a;
  line-height: 1.5;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.menu-theme-cards .item-price,
.menu-theme-photo .item-price {
  font-weight: 700;
  color: var(--mud-palette-primary);
}

.menu-theme-cards .item-right,
.menu-theme-photo .item-right {
  display: flex;
  flex-shrink: 0;
}

/* Item Card: the image bleeds to the card's top/right/bottom edges and fills the card's
   full height (the card's own radius clips it); only the text side keeps the inset.
   Content top-aligns (stretch overrides the shared center) per ticket-creator feedback.
   Fixed height (~75% of the natural 3-line render); overflow clips anything past it. */
.menu-theme-cards .menu-item {
  padding: 0;
  overflow: hidden;
  height: 140px;
  align-items: stretch;
}

/* Two description lines instead of three so the price row fits inside the fixed height. */
.menu-theme-cards .item-desc {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.menu-theme-cards .item-info {
  padding: 14px;
  display: flex;
  flex-direction: column;
}

/* Pin the price to the card bottom (item-info spans the full fixed height via stretch). */
.menu-theme-cards .item-price {
  margin-top: auto;
}

.menu-theme-cards .item-right {
  align-self: stretch;
  flex: 0 0 40%;
}

.menu-theme-cards .item-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Photo Card: the same markup becomes photo-on-top — the card turns into a
   flex column and the image block jumps above the text via order:-1. */
.menu-theme-photo .menu-item {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

.menu-theme-photo .item-info {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}

/* Pin the price to the card bottom so a mixed row (some cards imageless) keeps
   every price on the same line instead of stranding it mid-card. */
.menu-theme-photo .item-price {
  margin-top: auto;
}

.menu-theme-photo .item-right {
  order: -1;
  width: 100%;
}

.menu-theme-photo .item-thumb {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

/* Out of stock — card themes gray the whole card (List View keeps its own rules). */
.menu-theme-cards .menu-item.outOfStock,
.menu-theme-photo .menu-item.outOfStock {
  opacity: 0.55;
  cursor: default;
}

.menu-theme-cards .outOfStock .item-thumb,
.menu-theme-photo .outOfStock .item-thumb {
  filter: grayscale(100%);
}

/* Desktop: Item Card = two columns, Photo Card = three; cards equalized per row
   (List View stays its own two-column markup). */
@media (min-width: 900px) {
  .menu-theme-cards .menu-grid,
  .menu-theme-photo .menu-grid {
    display: grid;
    /* minmax(0,1fr) not bare 1fr — 1fr's auto minimum lets a card with long
       unbreakable content widen its whole column, making columns unequal.
       No grid-auto-rows:1fr — that sizes every row to the tallest card in the
       whole category, padding short rows with dead space; cards still equalize
       within their own row via the default stretch. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .menu-theme-cards .menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .menu-theme-cards .menu-item,
  .menu-theme-photo .menu-item {
    margin-bottom: 0;
  }
}
/* Phones: both card themes collapse to single-column rows with the image to the
   right of the text, stretched to the row height. */
@media (max-width: 699.98px) {
  .menu-theme-photo .menu-item {
    flex-direction: row;
    align-items: center;
    padding: 14px;
  }
  .menu-theme-photo .item-info {
    padding: 0;
  }
  .menu-theme-photo .item-right {
    order: 0;
    width: auto;
  }
  .menu-theme-photo .item-right {
    margin-left: 14px;
    align-self: stretch;
  }
  .menu-theme-photo .item-thumb {
    width: 124px;
    height: 100%;
    min-height: 88px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-inputs, #e4e0d8);
    object-fit: cover;
  }
}
/* Item detail modal — ItemCard: larger square image beside the details. */
.menu-theme-cards .item-detail-img {
  display: block;
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
}

/* Item detail modal — PhotoCard: hero band above the details. */
.menu-theme-photo .modal-title {
  width: 100%;
}

/* Matches UpsellModalView's image band: fixed-height zoom-crop inset within the
   modal padding, honey-gradient fallback showing through when the image 404s. */
.menu-theme-photo .item-detail-hero-band {
  height: 200px;
  overflow: hidden;
  background: linear-gradient(135deg, #fdf3dc, #f5dfa0);
  margin-bottom: 12px;
}

.menu-theme-photo .item-detail-hero {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card-theme item-detail modals: wider 700px dialog — modifiers keep their standard
   2-up grid, and the PhotoCard hero band crops less aggressively. */
@media (min-width: 576px) {
  .menu-theme-cards .modal-dialog,
  .menu-theme-photo .modal-dialog {
    max-width: 700px;
  }
}
/* Shorter hero band on phones so it doesn't dominate the small-screen modal. */
@media (max-width: 575.98px) {
  .menu-theme-photo .item-detail-hero-band {
    height: 150px;
  }
}
/* Keep the qty stepper on one line in the narrower photo modal. The buttons' own padding
   is handled by OrderDetailItemView's scoped .qty-btn rule; this trims the icon glyph. */
.menu-theme-photo .qtyTextSize {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.menu-theme-photo .qtyTextSize .qtyButtonSize {
  padding-left: 3px;
  padding-right: 3px;
}

/* "Order Details" / "Your Order" sidebar section headers — shown in all menu themes
   (List View included); same treatment as the order-history banner/accordion header. */
.section-header-bar {
  background-color: color-mix(in srgb, var(--mud-palette-appbar-background) 80%, transparent);
  color: var(--mud-palette-appbar-text);
  font-weight: 700;
  font-size: 0.95em;
  padding: 12px 20px;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* Sidebar section cards: header connected to its content panel as one bordered,
   rounded card (prototype look). Inside a card the header flattens to the top edge. */
.sidebar-section {
  background: var(--oo-card-surface, #ffffff);
  border: 1px solid var(--mud-palette-lines-inputs, #e4e0d8);
  border-radius: 10px;
  overflow: hidden;
}

.sidebar-section .section-header-bar {
  border-radius: 0;
  margin-bottom: 0;
}

.sidebar-section-body {
  padding: 12px;
}

/* The section's border replaces the empty-cart box's own outline. */
.sidebar-section .row-outline.emptyCart {
  border: none;
}

/* Cart card participates in the sticky panel's flex chain (#3432): section and body
   pass flex-grow + min-height down so .orderSummary-scroll can still shrink + scroll. */
.sidebar-section-cart {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.sidebar-section-cart .sidebar-section-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  /* Cart fills the card edge-to-edge — no inner box. Column padding on the row
     cells keeps the text inset; the card supplies the outer border. */
  padding: 0;
}

.sidebar-section-cart .orderSummary-scroll {
  margin-left: 0;
  margin-right: 0;
}

/* Row outlines become horizontal separators; side borders would double up
   against the card's own border. Same for the combo tint block. Side padding
   compensates for the removed body padding so content isn't tight to the edges.
   Cancelling the rows' negative side gutters, and dropping the last row's bottom
   border, is OrderSummaryView's scoped css — it owns .row-outline's box. */
.sidebar-section-cart .sidebar-section-body .row-outline {
  border-left: none;
  border-right: none;
  /* 20px aligns row content with the section header's text inset. */
  padding-left: 20px;
  padding-right: 20px;
}

.sidebar-section-cart .sidebar-section-body .combo-group {
  border-left: none;
  border-right: none;
}

/* No separator directly under the section header. */
.sidebar-section-cart .sidebar-section-body > .orderSummary > .row-outline:first-child {
  border-top: none;
}

/* Card themes: breathing room between category sections. */
.menu-theme-cards .menuCategory + .menuCategory,
.menu-theme-photo .menuCategory + .menuCategory {
  margin-top: 40px;
}

/* ───────────────────────── Online Ticketing ─────────────────────────
   Widths are constrained by MudContainer (MaxWidth.Large/Medium/Small) so
   ticketing lines up with the rest of OO instead of running full-bleed.

   Theme tokens: surfaces and text route through the --oo-* set the store emits, so branding and a
   dark palette flow through automatically. Read those rather than --mud-palette-*: only some
   palette slots are driven from the theme (surface, text, lines, primary), and the ones that
   aren't — background-gray, text-disabled — stay at MudBlazor's LIGHT defaults on a dark store,
   which is what left the sunken surfaces white under adapted text. Status colors (sold / held /
   selected / on-sale) are fixed semantic signals and deliberately NOT brand-driven. */
.ticket-browse, .event-detail, .seat-select, .ticket-checkout, .ticket-confirmation,
.ticket-onsale-panel, .ticket-empty, .ticket-browse-loading {
  --tkt-surface: var(--oo-card-surface, #fff);
  --tkt-sunken: var(--oo-surface-alt, #f6f7f8);
  --tkt-border: var(--mud-palette-lines-default, #e5e7eb);
  --tkt-divider: var(--mud-palette-divider, #f1f3f4);
  --tkt-text: var(--oo-text, #374151);
  --tkt-text-dim: var(--oo-text-secondary, #6b7280);
  --tkt-text-faint: color-mix(in srgb, var(--oo-text, #374151) 45%, transparent);
  --tkt-accent: var(--oo-btn-bg, #01497c);
  --tkt-accent-text: var(--oo-btn-text, #fff);
  --tkt-radius: 12px;
  --tkt-radius-sm: 8px;
  --tkt-shadow: 0 2px 10px rgba(0,0,0,.05);
  --tkt-shadow-lift: 0 10px 24px rgba(0,0,0,.14);
  /* status — fixed */
  --tkt-onsale-bg: #fff3e0;
  --tkt-onsale-fg: #b45309;
  --tkt-fast-fg: #b45309;
  --tkt-sold-fg: #9ca3af;
  --seat-selected: #2e7d32;
  --seat-selected-dark: #1b5e20;
  --seat-held: #ff9800;
  --seat-unpriced: #4e79a7; /* SeatTierPalette.Colors[0] — keep equal to UnassignedSeatColorHex */
}

.ticket-browse-loading {
  display: flex;
  justify-content: center;
  padding: 60px;
}

.ticket-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 80px 20px;
  color: var(--tkt-text-dim);
  text-align: center;
}

/* Badge / chip vocabulary (shared by browse + detail) */
.ticket-badge {
  display: inline-flex;
  align-items: center;
  background: var(--tkt-sunken);
  color: var(--tkt-text);
  border: 1px solid var(--tkt-border);
  border-radius: var(--tkt-radius-sm);
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.ticket-badge-onsale {
  background: var(--tkt-onsale-bg);
  color: var(--tkt-onsale-fg);
  border-color: transparent;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.ticket-badge-age {
  border-color: var(--tkt-onsale-fg);
  color: var(--tkt-onsale-fg);
  background: transparent;
}

/* Poster fallback tile (missing/404 poster — never a broken img) */
.ticket-poster-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--tkt-sunken);
  color: var(--tkt-text-dim);
  text-align: center;
}

.ticket-poster-fallback .mud-icon-root {
  opacity: 0.4;
  font-size: 2.4rem;
}

.ticket-poster-fallback span {
  font-size: 0.82rem;
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ── Browse ── */
.ticket-browse {
  padding: 8px 0 40px;
}

.ticket-section {
  margin-bottom: 36px;
}

.ticket-section-head {
  margin-bottom: 14px;
}

.ticket-section-desc {
  color: var(--tkt-text-dim);
}

/* Poster grid (Movie / Other) */
.ticket-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.ticket-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  border-radius: var(--tkt-radius);
  background: var(--tkt-surface);
  border: 1px solid var(--tkt-border);
  box-shadow: var(--tkt-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  color: inherit;
}

.ticket-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tkt-shadow-lift);
  text-decoration: none;
  color: inherit;
}

.ticket-card:focus-visible {
  outline: 2px solid var(--tkt-accent);
  outline-offset: 2px;
}

.ticket-card-poster {
  position: relative;
  aspect-ratio: 2/3;
  background: var(--tkt-sunken);
  overflow: hidden;
}

.ticket-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.ticket-card:hover .ticket-card-poster img {
  transform: scale(1.03);
}

.ticket-card-overlay-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.ticket-card-body {
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ticket-card-title {
  font-weight: 600;
  line-height: 1.25;
  color: var(--tkt-text);
}

.ticket-card-meta {
  color: var(--tkt-text-dim);
}

.ticket-card-next {
  color: var(--tkt-accent);
  font-weight: 500;
}

.ticket-card-count {
  color: var(--tkt-text-faint);
}

/* Browse skeletons */
.ticket-card-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ticket-card-skeleton-poster {
  aspect-ratio: 2/3;
  width: 100%;
  height: auto !important;
  border-radius: var(--tkt-radius);
}

/* Date-led rows (LiveMusic / Comedy) */
.ticket-daterow-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tkt-border);
  border-radius: var(--tkt-radius);
  background: var(--tkt-surface);
  overflow: hidden;
}

.ticket-daterow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}

.ticket-daterow + .ticket-daterow {
  border-top: 1px solid var(--tkt-divider);
}

.ticket-daterow:hover {
  background: var(--tkt-sunken);
  text-decoration: none;
  color: inherit;
}

.ticket-daterow:focus-visible {
  outline: 2px solid var(--tkt-accent);
  outline-offset: -2px;
}

.ticket-daterow-date {
  flex: 0 0 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.ticket-daterow-dow {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--tkt-text-dim);
}

.ticket-daterow-dom {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tkt-text);
}

.ticket-daterow-mon {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--tkt-text-dim);
}

.ticket-daterow-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 74px;
  border-radius: var(--tkt-radius-sm);
  overflow: hidden;
  background: var(--tkt-sunken);
}

.ticket-daterow-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ticket-daterow-thumb .ticket-poster-fallback span {
  display: none;
}

.ticket-daterow-main {
  flex: 1 1 auto;
  min-width: 0;
}

.ticket-daterow-name {
  font-weight: 600;
  line-height: 1.3;
  color: var(--tkt-text);
}

.ticket-daterow-sub {
  color: var(--tkt-text-dim);
}

.ticket-daterow-times {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-top: 2px;
}

.ticket-daterow-next {
  color: var(--tkt-accent);
  font-weight: 600;
  font-size: 0.9rem;
}

.ticket-daterow-count {
  color: var(--tkt-text-faint);
  font-size: 0.8rem;
}

.ticket-daterow-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.ticket-daterow-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--tkt-accent);
  color: var(--tkt-accent-text);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.ticket-daterow-cta .mud-icon-root {
  font-size: 1rem;
}

/* On-sale / presale gate (§10) */
.ticket-onsale-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 36px 20px;
  margin: 8px 0 24px;
  background: var(--tkt-surface);
  border: 1px solid var(--tkt-border);
  border-radius: var(--tkt-radius);
  box-shadow: var(--tkt-shadow);
}

.ticket-onsale-icon {
  color: var(--tkt-accent);
}

.ticket-onsale-sub {
  color: var(--tkt-text-dim);
}

.ticket-presale-entry {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ticket-presale-label {
  color: var(--tkt-text-dim);
}

.ticket-presale-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Event detail ── */
.event-detail {
  padding: 8px 0 40px;
}

.event-detail-hero {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.event-detail-poster {
  flex: 0 0 240px;
  max-width: 240px;
  aspect-ratio: 2/3;
  border-radius: var(--tkt-radius);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  background: var(--tkt-sunken);
}

.event-detail-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-detail-poster-skeleton {
  flex: 0 0 240px;
  max-width: 240px;
  aspect-ratio: 2/3;
  height: auto !important;
  border-radius: var(--tkt-radius);
}

.event-detail-info {
  flex: 1 1 320px;
  min-width: 0;
}

.event-detail-title {
  color: var(--tkt-text);
}

.event-detail-meta {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  flex-wrap: wrap;
  align-items: center;
}

.event-detail-headliner {
  color: var(--tkt-text);
  margin-top: 2px;
}

.event-detail-promoter {
  color: var(--tkt-text-faint);
  display: block;
  margin-top: 2px;
}

.event-detail-rating-reason {
  color: var(--tkt-text-faint);
  display: block;
}

.event-detail-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--tkt-radius-sm);
  background: var(--tkt-onsale-bg);
  color: var(--tkt-onsale-fg);
  font-size: 0.85rem;
}

.event-detail-warning .mud-icon-root {
  font-size: 1.1rem;
  flex: 0 0 auto;
}

.event-detail-desc {
  margin-top: 12px;
  line-height: 1.6;
  color: var(--tkt-text);
  overflow-wrap: anywhere;
}

.event-detail-desc p:last-child {
  margin-bottom: 0;
}

.event-detail-desc img {
  max-width: 100%;
  height: auto;
}

.event-detail-desc a {
  color: var(--tkt-accent);
}

.event-detail-desc table {
  max-width: 100%;
}

.event-detail-note {
  color: var(--tkt-text-dim);
  font-style: italic;
  margin-top: 8px;
  overflow-wrap: anywhere;
}

/* Trailer — thumbnail + play button opening a lightbox (replaces the old full-width inline iframe) */
.event-detail-trailer-thumb {
  margin-top: 16px;
}

.trailer-thumb {
  position: relative;
  display: block;
  width: 280px;
  max-width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  padding: 0;
  border-radius: var(--tkt-radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--tkt-sunken);
}

.trailer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.trailer-thumb-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  transition: background 0.15s ease;
}

.trailer-thumb:hover .trailer-thumb-scrim, .trailer-thumb:focus-visible .trailer-thumb-scrim {
  background: rgba(0, 0, 0, 0.42);
}

.trailer-thumb:focus-visible {
  outline: 2px solid var(--tkt-accent);
  outline-offset: 2px;
}

.trailer-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 3rem !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.trailer-thumb-label {
  position: absolute;
  left: 10px;
  bottom: 8px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.trailer-lightbox .mud-dialog-content {
  padding: 0;
}

.trailer-lightbox-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}

.trailer-lightbox-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Showtimes — grouped day list + custom chips */
.showtime-day {
  margin-bottom: 16px;
}

.showtime-day-head {
  margin-bottom: 8px;
}

.showtime-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.showtime-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 92px;
  min-height: 44px;
  justify-content: center;
  padding: 7px 14px;
  border-radius: var(--tkt-radius-sm);
  border: 1.5px solid var(--tkt-accent);
  background: var(--tkt-surface);
  color: var(--tkt-accent);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}

.showtime-chip:hover:not(:disabled) {
  background: var(--tkt-sunken);
  transform: translateY(-1px);
}

.showtime-chip:focus-visible {
  outline: 2px solid var(--tkt-accent);
  outline-offset: 2px;
}

.showtime-chip-sub {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--tkt-text-dim);
}

.showtime-chip.fast {
  border-color: var(--tkt-fast-fg);
}

.showtime-chip.fast .showtime-chip-sub.status {
  color: var(--tkt-fast-fg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.showtime-chip.soldout {
  border-color: var(--tkt-border);
  color: var(--tkt-sold-fg);
  background: var(--tkt-sunken);
  cursor: default;
}

.showtime-chip.soldout .showtime-chip-time {
  text-decoration: line-through;
}

.showtime-chip.soldout .showtime-chip-sub.status {
  color: var(--tkt-sold-fg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Date strip (many-date events) */
.showtime-strip {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 16px;
  position: relative;
}

.showtime-strip-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 2px;
  scrollbar-width: thin;
}

.showtime-strip-day {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1.15;
  min-width: 64px;
  padding: 8px 12px;
  border-radius: var(--tkt-radius-sm);
  border: 1.5px solid var(--tkt-border);
  background: var(--tkt-surface);
  color: var(--tkt-text);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.showtime-strip-day:hover {
  border-color: var(--tkt-accent);
}

.showtime-strip-day:focus-visible {
  outline: 2px solid var(--tkt-accent);
  outline-offset: 2px;
}

.showtime-strip-day.selected {
  border-color: var(--tkt-accent);
  background: var(--tkt-accent);
  color: var(--tkt-accent-text);
}

.showtime-strip-dow {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.85;
}

.showtime-strip-dom {
  font-size: 1.25rem;
  font-weight: 700;
}

.showtime-strip-mon {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.85;
}

.showtime-strip-cal {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.showtime-cal-popover {
  z-index: 1400;
}

/* ── Seat selection ── */
.seat-select {
  padding: 8px 0 40px;
}

.seat-select-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.seat-select-subhead {
  color: var(--tkt-text-dim);
}

.seat-select-body {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.seat-select-main {
  flex: 1 1 560px;
  min-width: 0;
}

.seat-select-toolbar {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.seat-select-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tkt-text-dim);
  font-size: 0.9rem;
}

.seat-pick-for-me {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--tkt-surface);
  border: 1px solid var(--tkt-border);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: var(--tkt-shadow);
}

.seat-pick-icon {
  color: var(--tkt-accent);
}

.seat-pick-label {
  font-size: 0.85rem;
  color: var(--tkt-text);
  font-weight: 500;
}

.seat-legend-area {
  margin-bottom: 8px;
}

.seat-legend, .seat-price-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
  font-size: 0.8rem;
  color: var(--tkt-text-dim);
  flex-wrap: wrap;
  align-items: center;
}

.seat-price-legend {
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px dashed var(--tkt-border);
}

.seat-legend .seat-swatch, .seat-price-legend .seat-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  box-sizing: border-box;
}

.seat-swatch.avail {
  background: var(--seat-unpriced);
}

.seat-swatch.selected {
  background: var(--seat-selected);
}

.seat-swatch.sold {
  background: var(--tkt-sunken);
  border: 1px solid var(--tkt-border);
}

.seat-swatch.held {
  background: var(--seat-held);
}

/* The stage is a fixed JS pan/zoom viewport; the canvas is transformed inside it.
   Gestures (drag/pinch/wheel) run entirely in seat-map-viewport.js — seat clicks still
   hit Blazor natively through the CSS transform. */
.seat-stage {
  position: relative;
  overflow: hidden;
  height: clamp(360px, 62vh, 720px);
  border: 1px solid var(--tkt-border);
  border-radius: var(--tkt-radius);
  background: var(--tkt-sunken);
  touch-action: none;
}

.seat-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.seat-canvas .seat {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--tkt-border);
  box-sizing: border-box;
}

.seat-canvas .seat.available {
  cursor: pointer;
}

.seat-canvas .seat.available:hover {
  outline: 2px solid var(--tkt-accent);
  outline-offset: 1px;
}

.seat-canvas .seat:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tkt-accent);
  z-index: 6;
}

.seat-canvas .seat.selected {
  background: var(--seat-selected) !important;
  border-color: var(--seat-selected-dark);
  cursor: pointer;
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 0 0 1.5px var(--tkt-surface), 0 0 0 3px var(--seat-selected);
  z-index: 5;
}

.seat-canvas .seat.sold {
  background: var(--tkt-sunken);
  border-color: var(--tkt-border);
  opacity: 0.5;
  cursor: default;
}

.seat-canvas .seat.held {
  background: var(--seat-held);
  opacity: 0.6;
  cursor: default;
}

.seat-canvas .seat.inactive {
  display: none;
}

/* Accessible seats: subtle inner ring always; ♿ glyph only when zoomed in enough to read it. */
.seat-canvas .seat-accessible {
  box-shadow: inset 0 0 0 1.5px var(--tkt-surface);
}

.seat-canvas.zoomed .seat-accessible::after {
  content: "♿";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.95);
  pointer-events: none;
}

.seat-canvas .seat-table {
  position: absolute;
  border: 1px dashed var(--tkt-text-faint);
  background: color-mix(in srgb, var(--oo-text) 4%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--tkt-text-faint);
}

.seat-canvas .seat-table.whole {
  border-color: var(--tkt-accent);
}

/* Non-sellable decorations (stage/screen/aisles/labels) — drawn behind the seats, no pointer events. */
.seat-canvas .seat-deco {
  position: absolute;
  box-sizing: border-box;
  border: 1.5px dashed currentColor;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.seat-canvas .seat-deco.kind-ellipse {
  border-radius: 50%;
}

.seat-canvas .seat-deco.kind-line {
  border: none;
}

.seat-canvas .seat-deco.kind-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 3px solid currentColor;
}

.seat-canvas .seat-deco.kind-text {
  border-color: transparent;
}

/* Zoom control cluster (overlay, bottom-right of the stage) */
.seat-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--tkt-surface);
  border: 1px solid var(--tkt-border);
  border-radius: 999px;
  padding: 4px;
  box-shadow: var(--tkt-shadow);
  z-index: 10;
}

/* Per-seat ticket-type / price popup (desktop: in-canvas popover above/below the seat).
   It lives inside the zoomed canvas, so it inherits the pan/zoom scale — at 4x that made it a
   ~800px card clipped by the stage. Counter-scale by the viewport's scale (published as
   --seat-scale in seat-map-viewport.js) so it stays one readable size at any zoom. The origin must
   be 0 0: it puts the anchor at the seat's own point, which makes the translate resolve in
   on-screen pixels rather than being scaled along with the card. */
.seat-popup {
  position: absolute;
  z-index: 50;
  transform-origin: 0 0;
  transform: scale(calc(1 / var(--seat-scale, 1))) translate(-50%, calc(-100% - 12px))
             translate(var(--seat-popup-shift-x, 0px), var(--seat-popup-shift-y, 0px));
  min-width: 190px;
  background: var(--tkt-surface);
  border: 1px solid var(--tkt-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  padding: 6px;
}

/* Counter the clamp shift so the arrow keeps pointing at the seat when the card is nudged inward. */
.seat-popup::after {
  content: "";
  position: absolute;
  left: calc(50% - var(--seat-popup-shift-x, 0px));
  bottom: -7px;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--tkt-surface);
}

.seat-popup.below {
  transform: scale(calc(1 / var(--seat-scale, 1))) translate(-50%, 14px)
             translate(var(--seat-popup-shift-x, 0px), var(--seat-popup-shift-y, 0px));
}

.seat-popup.below::after {
  top: -7px;
  bottom: auto;
  border-top: 0;
  border-bottom: 7px solid var(--tkt-surface);
}

.seat-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 4px 10px;
}

.seat-popup-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--tkt-text);
}

.seat-popup-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: var(--tkt-radius-sm);
  padding: 9px 10px;
  cursor: pointer;
  font-size: 0.9rem;
  text-align: left;
  color: var(--tkt-text);
}

.seat-popup-type:hover:not(:disabled) {
  background: var(--tkt-sunken);
}

.seat-popup-type:disabled {
  color: var(--tkt-text-faint);
  cursor: not-allowed;
}

.seat-popup-type-price {
  font-weight: 700;
}

.seat-popup-empty {
  padding: 8px 10px;
  color: var(--tkt-text-faint);
  font-size: 0.85rem;
}

/* Bottom sheets (mobile) — shared by the seat chooser and the cart review. Rendered outside the
   transformed canvas (position:fixed is broken inside a CSS transform). Hidden on desktop. */
.seat-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1290;
  display: none;
}

.seat-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1300;
  background: var(--tkt-surface);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.25);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  max-height: 70vh;
  overflow-y: auto;
  display: none;
  animation: seat-sheet-up 0.18s ease;
}

.seat-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

@keyframes seat-sheet-up {
  from {
    transform: translateY(24px);
    opacity: 0.6;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Mobile sticky selection bar (replaces the cart rail below 900px) */
.seat-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1280;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--tkt-surface);
  border-top: 1px solid var(--tkt-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}

.seat-bottom-bar-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.seat-bottom-bar-count {
  font-size: 0.8rem;
  color: var(--tkt-text-dim);
}

.seat-bottom-bar-total {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--tkt-text);
}

/* GA blocks — one card per section, every ticket type shown with price + qty + add */
.ga-blocks {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ga-block {
  border: 1px solid var(--tkt-border);
  border-radius: var(--tkt-radius);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--tkt-shadow);
  background: var(--tkt-surface);
}

.ga-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--tkt-sunken);
  border-bottom: 1px solid var(--tkt-divider);
}

.ga-block-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--tkt-text);
}

.ga-block-remaining {
  font-size: 0.8rem;
  color: var(--tkt-text-dim);
}

.ga-block-remaining.soldout {
  color: var(--tkt-sold-fg);
  font-weight: 700;
  text-transform: uppercase;
}

.ga-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
}

.ga-type-row + .ga-type-row {
  border-top: 1px solid var(--tkt-divider);
}

.ga-type-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ga-type-name {
  font-weight: 500;
  color: var(--tkt-text);
}

.ga-type-price {
  color: var(--tkt-text);
  font-weight: 600;
  font-size: 0.9rem;
}

.ga-type-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ga-type-empty {
  padding: 14px 16px;
  color: var(--tkt-text-faint);
  font-size: 0.9rem;
}

/* Cart rail (desktop) */
.seat-select-cart {
  flex: 0 0 300px;
  position: sticky;
  top: calc(var(--mud-appbar-height) + 12px);
  border: 1px solid var(--tkt-border);
  border-radius: var(--tkt-radius);
  padding: 18px;
  background: var(--tkt-surface);
  box-shadow: var(--tkt-shadow);
}

.ticket-cart-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.ticket-cart-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.ticket-cart-seat {
  font-size: 0.9rem;
}

.ticket-cart-type {
  font-size: 0.78rem;
  color: var(--tkt-text-dim);
}

.ticket-cart-line-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ticket-cart-total {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-top: 2px;
}

.ticket-cart-amount {
  font-size: 0.875rem;
}

/* All-in pricing: the total is the prominent number, its ticket + service-fee breakdown is secondary
   (the FTC prominence rule). See Docs/Conventions/all-in-pricing.md. */
.ticket-price {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
}

.ticket-price.align-end {
  align-items: flex-end;
  text-align: right;
}

.ticket-price.align-start {
  align-items: flex-start;
}

.ticket-price-detail,
.ticket-cart-fee-note {
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--tkt-text-dim);
}

.ticket-cart-fee-note {
  margin-top: 1px;
}

.ticket-cart-total.total {
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 6px;
}

.seat-hold-note {
  color: var(--tkt-text-faint);
  display: block;
  text-align: center;
  margin-top: 6px;
}

.seat-hold-note.warn {
  color: var(--seat-held);
  font-weight: 600;
}

.seat-hold-note.expired {
  color: var(--mud-palette-error, #d32f2f);
  font-weight: 600;
}

/* Checkout */
.ticket-checkout {
  padding: 16px 0 48px;
}

.ticket-checkout-title {
  font-size: 1.9rem;
  margin-bottom: 2px;
}

.ticket-checkout-event {
  color: var(--tkt-text-dim);
  margin-bottom: 16px;
}

.ticket-checkout-summary {
  border: 1px solid var(--tkt-border);
  border-radius: var(--tkt-radius);
  padding: 18px;
  background: var(--tkt-surface);
  box-shadow: var(--tkt-shadow);
  position: sticky;
  top: calc(var(--mud-appbar-height) + 12px);
}

.ticket-checkout-summary h4 {
  margin-bottom: 12px;
}

/* Confirmation */
.ticket-confirmation {
  padding: 64px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
  .ticket-checkout-summary {
    position: static;
    margin-top: 20px;
  }
}
@media (max-width: 899.98px) {
  /* Seat picker single-column: hide the rail, show the sticky bar + sheets. */
  .seat-select-cart {
    display: none;
  }
  .seat-bottom-bar {
    display: flex;
  }
  .seat-sheet {
    display: block;
  }
  .seat-sheet-backdrop {
    display: block;
  }
  .seat-select {
    padding-bottom: 88px;
  } /* keep GA cards clear of the sticky bar */
  .seat-stage {
    height: clamp(320px, 55vh, 560px);
  }
  .seat-select-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .seat-pick-for-me {
    flex-wrap: wrap;
  }
  /* The in-canvas popover is replaced by the bottom sheet. */
  .seat-canvas .seat-popup {
    display: none;
  }
  .seat-legend, .seat-price-legend {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .seat-legend span, .seat-price-legend span {
    white-space: nowrap;
  }
}
@media (min-width: 900px) {
  .seat-sheet, .seat-sheet-backdrop, .seat-bottom-bar {
    display: none !important;
  }
}
@media (max-width: 599.98px) {
  .ticket-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
  }
  .ticket-daterow {
    padding: 12px 12px;
    gap: 12px;
  }
  .ticket-daterow-thumb {
    display: none;
  }
  .ticket-daterow-cta {
    padding: 6px 12px;
  }
  .event-detail-poster {
    flex: 0 0 160px;
    max-width: 160px;
  }
  .event-detail-hero {
    gap: 16px;
  }
  .trailer-thumb {
    width: 100%;
  }
  .showtime-chip {
    flex: 1 1 40%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticket-card, .ticket-card-poster img, .showtime-chip, .ticket-daterow {
    transition: none;
  }
  .ticket-card:hover {
    transform: none;
  }
  .seat-sheet {
    animation: none;
  }
}
/* Bordered section card — Checkout and Order Confirmation content groups. */
.checkout-section {
  background: var(--oo-card-surface, #ffffff);
  border: 1px solid var(--mud-palette-lines-inputs, #e4e0d8);
  border-radius: calc(var(--oo-radius, 6px) + 4px);
  padding: 16px 16px 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Segmented picker (order type, gratuity). MudToggleGroup renders the buttons now, so this
   only supplies the centering wrapper — the selected/hover fills come from the theme palette
   MudBlazor already reads. */
.segmented-row {
  display: flex;
  justify-content: center;
}

.footer-inner {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 12px;
  text-align: center;
}