/* Shop-wide design language. The tokens the event / card page look was built from (css/event-page.css, 2026-09-11) lifted to
   :root so the rest of the buying path can use the same card, paper and chip. Loaded once from _Layout; only :root variables and
   new .ui-* classes live here, so nothing that exists today moves. */
:root {
    --ev-card-border: 1px solid rgba(0, 0, 0, 0.08);
    --ev-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.06);
    --ev-radius: 12px;
    /* Color, not ColorRgb: the triplet only exists so rgba() can add alpha, and on some clubs it has drifted from the real club
       colour (ob #005eff vs a stale 23,108,190 — also fcfredericia, gog, soenderjyskekh). Solid accents take the authority. */
    --ev-accent: var(--organiser-color);
    /* Darker than Bootstrap's #dc3545, which only reaches 3.9:1 on white and fails AA at the size these messages are set in. */
    --ev-danger: #b3261e;
}

/* Bootstrap has more specific pressed/open focus rules than the legacy club styles. */
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: none; }

/* Mouse hover stays clean; keyboard navigation retains a visible club-colour indicator.
   The legacy webshop resets every outline with !important. */
.btn:focus-visible, .btn-template:focus-visible, .btn-template-outlined:focus-visible {
    outline: 2px solid var(--ev-accent) !important;
    outline-offset: 3px;
}

/* Legacy pagination hover colours must follow the club, including the normal webshop. */
.page-link:hover, .page-link:focus { color: var(--ev-accent); }

/* The shared footer must not inherit the partner theme's different typography and list spacing. */
.footer-section { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 12px; font-weight: 400; line-height: 18px; }
.footer > .container { width: 100%; max-width: none; }
@media (min-width: 480px) { .footer > .container { max-width: 450px; } }
@media (min-width: 768px) { .footer > .container { max-width: 750px; } }
@media (min-width: 992px) { .footer > .container { max-width: 970px; } }
@media (min-width: 1200px) { .footer > .container { max-width: 1170px; } }
.footer .footerLink h5 { font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; }
.footer .footerLink > ul { margin: 0; padding: 0; font-weight: 300; text-align: center; }
.footer .footer-social-links > .row { margin: 0; }
.footer .footer-social-links > .row > .col-sm-12 { padding: 0; }
.footer .footerLink .footer-social-links li { padding: 0; }
.footer .footer-social-links a { display: flex; align-items: center; gap: 0.35rem; }
.footer .footer-social-links a > i, .footer .footer-social-links a > img { width: 18px; margin: 0; text-align: center; flex-shrink: 0; }
.footer .footer-social-links a > img { height: 18px; object-fit: contain; }

/* Clip horizontal overflow without creating a second vertical scrollbar on body while the page loads.
   The document owns page scrolling; Bootstrap dialogs keep their body scroll lock. */
body.loaded { overflow-x: clip; overflow-y: visible; }
body.loaded.modal-open { overflow: hidden; }
/* The document owns scrolling: lock it too, and let Bootstrap replace its scrollbar space with body padding.
   Keeping the partner page's stable gutter during the lock would reserve that space twice. */
html:has(body.loaded.modal-open) { overflow-y: hidden; scrollbar-gutter: auto; }

/* The sheet a page sits on: square, hairline border, a 4px club-colour top edge and a soft shadow that lifts it off the pattern. */
.ui-paper { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-top: 4px solid var(--ev-accent); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 24px 56px rgba(0, 0, 0, 0.18); }

/* One card treatment for everything that sits on the paper. */
.ui-card { background: #fff; border: var(--ev-card-border); border-radius: var(--ev-radius); box-shadow: var(--ev-card-shadow); }

/* Chips: grey for read-only facts, one filled club-colour chip for the primary action or the current step. */
.ui-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 999px; background: #f3f4f6; color: rgba(0, 0, 0, 0.72); font-size: 0.875rem; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.ui-chip .fa { color: var(--ev-accent); }
.ui-chip--accent { background: var(--ev-accent); color: #fff; font-weight: 600; }
.ui-chip--accent .fa { color: #fff; }

/* Empty state: a dashed box instead of a blank hole. */
.ui-empty { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 24px; border: 1px dashed rgba(0, 0, 0, 0.15); border-radius: var(--ev-radius); color: #6b7280; font-weight: 600; text-align: center; }

/* Field validation. One message for every control, in flow under the one that failed — never overlaid. The old popup was
   absolutely positioned, so on the consent list (rows 5px apart) each message landed on the next row's label and hid it; that is
   why checkboxes were sent back to the browser's own bubble. In flow there is nothing to cover, so every control can share it.
   The control carries the state as well, so the eye finds the field before it reads the message. */
/* flex-basis 100%: .input-group is a flex row, so a plain block child would line up BESIDE the input and squeeze it —
   the message takes the whole next line instead. Ignored where the container is not a flex box (.form-group, .form-check). */
.field-required-error { display: block; flex: 0 0 100%; margin-top: 5px; color: var(--ev-danger); font-size: 0.8rem; font-weight: 600; line-height: 1.35; }
.field-required-error::before { content: "\f06a"; font-family: 'FontAwesome'; margin-right: 6px; font-weight: 400; }
/* Any container that now holds a message must be allowed to wrap: flex boxes are nowrap by default, so the 100% basis above
   would otherwise squeeze the control instead of moving the message down — the consent label wrapped to two lines. */
.has-field-error { flex-wrap: wrap; }
/* A failed control keeps the shape it already has — the theme's inputs are a single bottom border (style.css ~12856 zeroes the
   other three) that the 10px radius sweeps up at both ends — and only turns that line red. !important because the same rule
   pins border-color with !important. A full box or a halo here read as a different control, not a state of this one. */
.has-field-error .form-control { border-bottom-color: var(--ev-danger) !important; }
/* Bootstrap flattens the far corners of a .form-control that is not :last-child in an .input-group — it assumes an addon butts
   against it. Appending the message makes the input not-last, so its underline lost the right-hand sweep. Put it back. */
.input-group.has-field-error > .form-control:not(:last-child) { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
/* Under an input the message centres on the field it belongs to. Not in a .form-check: there it would drift away from the
   checkbox it explains, which sits hard left of a much wider row. */
.input-group > .field-required-error { text-align: center; }
/* Under a checkbox the ! centres on the 20px box and the text starts where the label's does (box + 16px, below). */
.form-check > .field-required-error::before { display: inline-block; width: 20px; margin-right: 16px; text-align: center; }
/* The forms outside checkout (Register, Profile, the holder modals) speak through ASP.NET's unobtrusive validation spans
   instead of the script above. Same voice, so a customer meets one kind of error message in the shop. */
.field-validation-error { display: block; margin-top: 5px; color: var(--ev-danger); font-size: 0.8rem; font-weight: 600; line-height: 1.35; }
.field-validation-error::before { content: "\f06a"; font-family: 'FontAwesome'; margin-right: 6px; font-weight: 400; }
/* Air between the box and its label. The theme leaves 10px, which on a consent row reads as one word glued to the box.
   Only in a .form-check — inside an .input-group the theme deliberately closes the gap to 0 and that still holds. */
.form-check .checkbox-custom + .checkbox-custom-label::before, .form-check .radio-custom + .radio-custom-label::before { margin-right: 16px; }
/* Hanging indent: the box is an inline ::before, so a wrapped label ran back under it. As a flex row the box and the text are
   two columns and every line starts at the text edge. */
.form-check .checkbox-custom + .checkbox-custom-label, .form-check .radio-custom + .radio-custom-label { display: flex; align-items: flex-start; }
.form-check .checkbox-custom + .checkbox-custom-label::before, .form-check .radio-custom + .radio-custom-label::before { flex: none; }
/* The text's line is taller than the 20px box, so the first line sat low beside it. Lift the text by half the difference and
   put the box back where it was. top, not margin: the consent labels carry .no-margin. Browsers without lh skip both. */
.form-check .checkbox-custom + .checkbox-custom-label, .form-check .radio-custom + .radio-custom-label { position: relative; top: calc((20px - 1lh) / 2); }
.form-check .checkbox-custom + .checkbox-custom-label::before, .form-check .radio-custom + .radio-custom-label::before { position: relative; top: calc((1lh - 20px) / 2); }
/* More on a phone: the label is a link to the terms, so a thumb aiming at the box that lands a few px right opens the terms
   page instead of ticking the consent. */
@media (max-width: 767.98px) {
    .form-check .checkbox-custom + .checkbox-custom-label::before, .form-check .radio-custom + .radio-custom-label::before { margin-right: 24px; }
}
/* The custom checkbox is drawn by the label's ::before (style.css ~11575) and the real input is left where Bootstrap puts it,
   so mark both — whichever of the two the club's theme actually shows turns red. */
.has-field-error .checkbox-custom + .checkbox-custom-label::before { border-color: var(--ev-danger); border-width: 2px; background: #fdeceb; }
.has-field-error .form-check-input { outline: 2px solid var(--ev-danger); outline-offset: 1px; }

/* Birthday picker. The shop's birthday fields run on bootstrap-datepicker (plugins/bootstrap-datepicker, set up once in
   js/birthdate-picker.js): it opens on a year grid and drills into months and days, which the old jQuery UI picker could not do.
   This is the same look the jQuery UI one had in the shop's language — card radius and shadow, a quiet header, round-cornered
   cells, the club colour kept for the picked day. The plugin's own sheet paints its active cells with gradients through
   long selector chains, so those backgrounds are !important here; everything else wins on plain specificity (shop-ui.css loads
   after the plugin sheet). */
.datepicker.datepicker-dropdown { width: 19.5em; max-width: calc(100vw - 16px); padding: 0.5rem; border: var(--ev-card-border); border-radius: var(--ev-radius); background: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); color: #252525; font-family: inherit; font-size: 0.9rem; z-index: 1060 !important; }   /* !important: the plugin writes a z-index inline, and these fields sit in modals */
.datepicker.datepicker-dropdown::before, .datepicker.datepicker-dropdown::after { display: none; }   /* the plugin's speech-bubble arrow; the shop's panels are plain cards */
.datepicker.datepicker-dropdown table { width: 100%; margin: 0; font-size: 0.85rem; }
.datepicker.datepicker-dropdown th, .datepicker.datepicker-dropdown td { height: auto; border: 0; border-radius: 8px; }
/* The club colour is saved for the one day you picked; the chrome stays quiet, or a red club turns the panel into a warning. */
.datepicker.datepicker-dropdown th.prev, .datepicker.datepicker-dropdown th.next, .datepicker.datepicker-dropdown th.datepicker-switch { padding: 0.35rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0; background: none; color: #252525; font-weight: 700; }
.datepicker.datepicker-dropdown th.datepicker-switch { width: auto; }
.datepicker.datepicker-dropdown th.prev, .datepicker.datepicker-dropdown th.next { width: 2.2em; font-size: 0.85rem; color: var(--ev-accent); }
/* The title is the zoom-out button (day grid -> months -> years), so it answers the pointer like the cells do. */
.datepicker.datepicker-dropdown th.prev:hover, .datepicker.datepicker-dropdown th.next:hover, .datepicker.datepicker-dropdown th.datepicker-switch:hover { background: color-mix(in srgb, var(--organiser-color) 12%, transparent); }
.datepicker.datepicker-dropdown th.dow { width: 14.285%; padding: 0.35rem 0; font-size: 0.7rem; font-weight: 700; color: var(--ev-accent); text-transform: uppercase; }   /* weekday heads carry the club colour; the numbers stay black and readable */
/* Days sit on the panel, nothing is a button. The month and year grids are the same cells, four to a row. */
.datepicker.datepicker-dropdown table tr td.day { width: 14.285%; padding: 0.4rem 0; background: none; color: #252525; font-weight: 500; }
.datepicker.datepicker-dropdown table tr td span { height: auto; margin: 1%; padding: 0.7rem 0; background: none; border-radius: 8px; color: #252525; font-weight: 500; line-height: 1.2; }
/* color-mix on --organiser-color, not rgba() on --organiser-color-rgb: the triplet has drifted from the real colour on
   several clubs (see the token block at the top). .focused is the keyboard cursor. */
.datepicker.datepicker-dropdown table tr td.day:hover, .datepicker.datepicker-dropdown table tr td.day.focused, .datepicker.datepicker-dropdown table tr td span:hover, .datepicker.datepicker-dropdown table tr td span.focused { background: color-mix(in srgb, var(--organiser-color) 12%, transparent); color: var(--ev-accent); }
/* Neighbouring month / year: still pickable, so legible; days outside the allowed range are not, so fainter. */
.datepicker.datepicker-dropdown table tr td.old, .datepicker.datepicker-dropdown table tr td.new, .datepicker.datepicker-dropdown table tr td span.old, .datepicker.datepicker-dropdown table tr td span.new { color: #9ca3af; }
.datepicker.datepicker-dropdown table tr td.disabled, .datepicker.datepicker-dropdown table tr td.disabled:hover, .datepicker.datepicker-dropdown table tr td span.disabled, .datepicker.datepicker-dropdown table tr td span.disabled:hover { background: none; color: #c9ccd1; cursor: default; }
.datepicker.datepicker-dropdown table tr td.active, .datepicker.datepicker-dropdown table tr td.active:hover, .datepicker.datepicker-dropdown table tr td span.active, .datepicker.datepicker-dropdown table tr td span.active:hover { background: var(--ev-accent) !important; box-shadow: none; color: #fff; font-weight: 700; text-shadow: none; }

/* Modals (send ticket, send card, issue, release, upgrade, redeem …). The shop's card language inside the dialog: rounded
   corners, each selectable row a card instead of a grey band with a one-sided shadow, and the primary action a pill rather
   than a full-bleed square strip welded to the modal's edges. Backgrounds and text colours are deliberately left alone, so a
   club running the dark theme (ach) keeps winning here. */
.modal .modal-content { border: 0; border-radius: var(--ev-radius) !important; box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28); }   /* !important: the dialogs write border-radius: 5px inline */
.modal .modal-body { padding: 1.25rem; }
/* Club-colour header strips (login, glemt kodeord, checkout upgrade): the dialog clips to its 12px corners — a header
   rounded on its own left a white hairline of the content at the curve. These dialogs hold no dropdowns to cut off. */
.modal .modal-content:has(> .modal-header.btn-primary) { overflow: hidden; }
.modal .modal-header.btn-primary { position: relative; border-radius: 0 !important; }   /* !important: inline 5px corners */
/* Their ✕ stays the plain white glyph, but inside the strip and vertically centred (the theme parked it half outside the
   corner; #login … .close is id-scoped, hence !important). hvr-grow's scale would drop the centring on hover. */
.modal .modal-header.btn-primary .close { position: absolute !important; top: 50% !important; right: 1rem !important; margin: 0 !important; padding: 0.25rem !important; color: #fff !important; font-size: 1.9rem !important; line-height: 1 !important; text-shadow: none; opacity: 1 !important; transform: translateY(-50%); }
.modal .modal-header.btn-primary .close:hover, .modal .modal-header.btn-primary .close:focus-visible { opacity: 0.75 !important; transform: translateY(-50%) !important; }
/* These dialogs use .card-header for each row you can tick and .card-body for the form block below, both carrying inline
   borders and shadows of their own. */
.modal .modal-body .card-header, .modal .modal-body .card-body { border: var(--ev-card-border) !important; border-radius: var(--ev-radius); box-shadow: none !important; }
.modal .modal-body .card-header { margin-bottom: 0.5rem; }
/* The send dialogs' scrolling list (tickets, klippekort, products): the room for the scrollbar lies outside the column (negative
   margin, equal padding), so without a scrollbar the rows line up with the card below, and with one it sits beside them. */
.modal .modal-body .ui-modal-scroll { margin-right: -1rem; padding-right: 1rem; }

/* Basket voucher row: Tilføj only once a code is typed — shown on an empty field, buyers took it for "add the ticket to the
   basket". :placeholder-shown = empty, so it also covers lines the seat selector adds from script. Enter still submits. */
.seat-card__price:has(input[name="voucherCode"]:placeholder-shown) > .seat-card__price-tag { display: none; }
/* Voucher row as a grid: "Vælg en voucher" spans the row, Tilføj shares only the code field's line and at its own width (the
   theme's price-tag grew to half the row). The wrappers are flattened (display: contents) so both are grid items. !important:
   the pages' id-scoped display: flex on the row. */
.seat-card__price:has(input[name="voucherCode"]) { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.5rem; align-items: center; }
.seat-card__price:has(input[name="voucherCode"]) > .seat-card__price-options,
.seat-card__price:has(input[name="voucherCode"]) .form-item,
.seat-card__price:has(input[name="voucherCode"]) .form-item > form { display: contents; }
.seat-card__price:has(input[name="voucherCode"]) .form-item > :not(.input-group):not(form),
.seat-card__price:has(input[name="voucherCode"]) .form-item > form > :not(.input-group) { grid-column: 1 / -1; }
.seat-card__price:has(input[name="voucherCode"]) > .seat-card__price-tag { grid-column: 2; padding-left: 0 !important; }
/* Empty field, Tilføj hidden: one column, so the code field ends flush with "Vælg en rabatkode" above instead of short by the
   column gap the hidden button still kept. */
.seat-card__price:has(input[name="voucherCode"]:placeholder-shown) { grid-template-columns: minmax(0, 1fr); }
/* Tilføj slimmed to about the code field's height. !important: the theme sizes .btn by padding and min-height. */
.seat-card__price:has(input[name="voucherCode"]) > .seat-card__price-tag .btn { display: inline-flex; align-items: center; height: 32px !important; min-height: 0 !important; padding: 0 1rem !important; font-size: 0.85rem; line-height: 1; }
.modal .modal-body .btn-block { height: auto; margin-top: 1rem; padding: 0.7rem 1.5rem; border-radius: 999px; font-weight: 600; line-height: 1.3; }

/* Account menu (_TopMenuPartial): rounded like the cards, and Log ud an inset pill instead of a square slab on the edges. */
.navbar .dropdown-menu { overflow: hidden; border-radius: var(--ev-radius); }
/* Log ind (_TopMenuPartial): the basket button's 44px pill instead of style.css's 50px 4px-corner block. */
.navbar .btn.btn-login, .navbar .btn.btn-navbarLink { height: 44px; line-height: 44px; border-radius: 999px; font-weight: 600; }
.navbar .dropdown-menu form .btn-block { display: flex; align-items: center; justify-content: center; width: calc(100% - 24px); min-height: 44px; margin: 8px 12px 12px; padding-top: 0; padding-bottom: 0; border-radius: 999px; font-weight: 600; }

/* Zebra and hover stay on Bootstrap's neutral greys (plugins.css) on purpose: a club-colour tint turned ugly on several
   clubs' colours. Don't re-tint them. */

/* ---- Dropdown (select.ui-select, js/ui-select.js) ------------------------------------------------------------------- */
/* The native select stays in the form, invisible; the button takes the page's .form-control look, the list the datepicker's. */
.ui-select-wrap { position: relative; }
.ui-select-wrap .ui-select__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.ui-select__toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; background-color: #fff; color: #1f2937; font-weight: 400; text-align: left; cursor: pointer; }
.ui-select__toggle:focus { border-color: var(--ev-accent) !important; box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ev-accent) 25%, transparent) !important; }
.ui-select__toggle:disabled { background-color: #f5f5f5; opacity: 0.55; cursor: not-allowed; }
.ui-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select__value.is-placeholder { color: #6b7280; }
.ui-select__toggle .fa { flex: none; font-size: 0.75rem; color: var(--ev-accent); transition: transform 0.15s ease; }
.ui-select-wrap.is-open .ui-select__toggle .fa { transform: rotate(180deg); }
.ui-select__menu { display: none; position: absolute; z-index: 10000; max-height: 280px; margin: 0; padding: 0.35rem; overflow-y: auto; list-style: none; background: #fff; border: var(--ev-card-border); border-radius: var(--ev-radius); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); }
.ui-select__menu.is-open { display: block; }   /* on <body> while open (js/ui-select.js); above the upgrade dialogs' inline z-index 9999 */
.ui-select__option { padding: 0.55rem 0.8rem; border-radius: 8px; color: #1f2937; cursor: pointer; }
.ui-select__option.is-active { background: color-mix(in srgb, var(--organiser-color) 10%, transparent); }
.ui-select__option.is-selected { color: var(--ev-accent); font-weight: 600; }
.ui-select__option.is-disabled { color: #9ca3af; cursor: not-allowed; }
.ui-select__group { padding: 0.6rem 0.8rem 0.25rem; color: #6b7280; font-size: 0.8rem; font-weight: 700; }
/* Seat line: the ticket-subscription picker sits right under the price category one. */
.select-box .ui-select-wrap + .ui-select-wrap { margin-top: 0.5rem; }
/* ...and drops out when there is no subscription left to pick (Event.cshtml markEmptyProductSelection). */
select.productSelection.is-empty, .ui-select-wrap:has(> select.productSelection.is-empty) { display: none; }
/* Compact: an inline pill beside a label (MyAddons' amount), the DataTables length-menu size. */
.ui-select-wrap:has(> .ui-select--compact) { display: inline-block; margin-left: 12px; vertical-align: middle; }
.ui-select-wrap:has(> .ui-select--compact) .ui-select__toggle { min-width: 5rem; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.875rem; }
.ui-select__menu--compact { font-size: 0.875rem; }
/* Centered: a count picker (partner RegistrationEvent) — the list's numbers line up under the pill's centred one. */
.ui-select__menu--centered .ui-select__option { text-align: center; }

/* Phones: a table of more than three columns cannot fit, so .ui-stack-table stops being a table and stacks into one compact
   line-card per row — the basket's label/value vocabulary at a smaller scale. The first cell is the card's heading; every other
   cell prints its column head on the left and its value on the right. Labels come from each td's data-label, which js/stack-table.js
   copies out of <thead>, so no page has to repeat its column names. */
@media (max-width: 767.98px) {
    .ui-stack-table, .ui-stack-table tbody, .ui-stack-table tfoot, .ui-stack-table tr, .ui-stack-table td { display: block; }
    .ui-stack-table thead { display: none; }
    .ui-stack-table tbody tr { padding: 0.6rem 0.8rem; border: var(--ev-card-border); border-radius: var(--ev-radius); background: #fff !important; }   /* !important: .table-striped zebra */
    .ui-stack-table tbody tr + tr { margin-top: 0.5rem; }
    /* One line per field: label left, value right. align-items centre, not baseline — a cell whose value is a button has no text
       baseline to match. text-align right keeps a value that wraps to two lines aligned with the ones that do not. */
    /* overflow-wrap: anywhere, not break-word — only "anywhere" shrinks the flex item's min-content size, so a value with no
       spaces in it (a transaction id, a barcode) wraps instead of running past the card's edge. */
    .ui-stack-table tbody td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border: 0; font-size: 0.82rem; text-align: right; white-space: normal; overflow-wrap: anywhere; }
    .ui-stack-table tbody td::before { content: attr(data-label); flex: none; max-width: 45%; font-size: 0.72rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.02em; text-align: left; }
    .ui-stack-table tbody td .btn { flex: none; }
    .ui-stack-table tbody td:empty { display: none; }
    /* The first column is the card's heading, not a labelled field. */
    .ui-stack-table tbody td:first-child { display: block; padding-bottom: 0.45rem; margin-bottom: 0.4rem; border-bottom: 1px solid rgba(0, 0, 0, 0.06); font-size: 0.95rem; font-weight: 700; text-align: left; }
    .ui-stack-table tbody td:first-child::before { content: none; }
    /* Summary rows keep their own labels and stay on one line, clear of the cards. */
    .ui-stack-table tfoot { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid rgba(0, 0, 0, 0.08); }
    .ui-stack-table tfoot tr { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0.8rem; font-size: 0.85rem; }
    .ui-stack-table tfoot td { padding: 0; border: 0; }
    .ui-stack-table tfoot td::before { content: none; }
}

/* Front page (Views/Home/Index.cshtml .home-page): sales cards in the shop's card language — rounded corners (overflow clips
   the image and the hover zoom to them) and pill buttons. Scoped: Partner/Profile pages reuse .salesCard. */
.home-page .salesCard { border-radius: var(--ev-radius); overflow: hidden; }
.home-page .salesCard .card-img-top { border-radius: 0; }
.home-page .salesCard .btn { border-radius: 999px; }
/* One tile layout for every front-page partial (_EventsPartial, _CardPartial, _GiftCardPartial, _RenewPartial,
   _PromotionPartial): they all end their .card-body with the button(s), so a two-column grid puts the text left and the
   button bottom-right beside it instead of on a line of its own. The body stays transparent over the page pattern. */
.home-page .salesCard > .card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0; align-items: end; padding: 0.9rem 1.1rem 1rem; }
.home-page .salesCard > .card-body > * { grid-column: 1; margin: 0; }
.home-page .salesCard > .card-body > .btn, .home-page .salesCard > .card-body > .sales-card-buttons { grid-column: 2; grid-row: 1 / span 2; align-self: end; float: none; white-space: nowrap; }
.home-page .salesCard > .card-body > .btn.advertise { grid-column: 1 / -1; grid-row: auto; margin-top: 0.75rem; }   /* the full-width "kommer snart" bar */
.home-page .salesCard > .card-body > .sales-card-buttons { display: flex; gap: 0.5rem; width: auto; }   /* width: _EventsPartial's <style> sets 100% */
.home-page .salesCard > .card-body .row { margin: 0; }
.home-page .salesCard > .card-body .row > .col-12 { padding: 0; }
/* Title, then the facts as small muted lines close together. */
.home-page .salesCard .card-title, .home-page .salesCard .card-title-soldOut { margin: 0 0 0.3rem; padding: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.home-page .salesCard .card-text { margin: 0; font-size: 0.875rem; line-height: 1.5; color: #6b7280; }
.home-page .salesCard .card-text.sales-card-description { margin-top: 0.4rem; }
/* Event facts (_EventsPartial, _SoldOutEventsPartial): a club-colour icon in a fixed column so the text lines up, like the
   profile tiles (.userProfile .card-ticket .desc .fa). */
.home-page .salesCard .card-text > .fa:first-child { width: 1rem; margin-right: 0.5rem; text-align: center; color: var(--ev-accent); }
/* Promotion tiles (_PromotionPartial, the only ones opening in a new tab) colour their text via the link's inline colour. */
.home-page a[target="_blank"] .salesCard .card-text { color: inherit; }
/* Compact tiles (Index.cshtml adds .home-page--compact unless ?tiles=classic): no card box — a rounded image with the title
   and the facts straight under it on the page, grey line icons, no button (the whole tile is the link; Mere info stays).
   Sold-out tiles keep their grey. The icons are masks over the existing <i class="fa …">, so the markup is shared. */
.home-page--compact .salesCard, .home-page--compact .salesCard:hover { overflow: visible; border: 0; border-radius: 0; box-shadow: none !important; }
.home-page--compact .salesCard .card-img-top { border-radius: var(--ev-radius); box-shadow: var(--ev-card-shadow); }
/* A hairline under each tile separates it from the next without bringing the card box back. h-100 stretches the bodies,
   so the lines of tiles side by side sit level. */
.home-page--compact .salesCard > .card-body { display: block; padding: 0.75rem 0.1rem 0.9rem; position: relative; }
/* The divider and its soft shadow as ONE strip: the line is its top edge, the shadow fades below it (a separate border plus
   a strip read as a double line; box-shadow's blur also crept up both sides of the body). The mask fades both ends out. */
.home-page--compact .salesCard > .card-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; border-top: 1px solid rgba(0, 0, 0, 0.14); background: linear-gradient(rgba(0, 0, 0, 0.08), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); pointer-events: none; }
.home-page--compact .salesCard > .card-body > .btn:not(.advertise),
.home-page--compact .salesCard > .card-body .sales-card-buttons > .btn:last-child { display: none; }
.home-page--compact .salesCard > .card-body > .sales-card-buttons { margin-top: 0.5rem; }
.home-page--compact .salesCard .card-title, .home-page--compact .salesCard .card-title-soldOut { margin-bottom: 0.4rem; overflow: hidden; color: #111827; font-size: 1.1rem; text-overflow: ellipsis; white-space: nowrap; }
/* Ticket-subscription names are long sentences: wrap them in full instead of the compact tiles' one-line ellipsis. */
.home-page .salesCard .card-title.card-title--subscription { overflow: visible; font-size: 0.9rem; font-weight: 500; line-height: 1.4; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.home-page--compact .salesCard .card-text { display: flex; align-items: center; gap: 0.5rem; font-size: 0.925rem; line-height: 1.6; color: #374151; }
.home-page--compact .salesCard .card-text > .fa:first-child { flex: none; width: 1.05rem; height: 1.05rem; margin: 0; color: #4b5563; }
.home-page--compact .salesCard .card-text > .fa:first-child::before { content: ""; display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }   /* longhands: the shorthand would reset the icon image set below */
.home-page--compact .salesCard .card-text > .fa-calendar::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.home-page--compact .salesCard .card-text > .fa-map-marker::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.home-page--compact .salesCard .card-text > .fa-clock-o::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.home-page--compact .salesCard .card-text > .fa-flag-checkered::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cpath d='M4 22v-7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cpath d='M4 22v-7'/%3E%3C/svg%3E"); }
.home-page--compact .salesCard .card-text > .fa-sign-in::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='m10 17 5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='m10 17 5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E"); }
.home-page--compact .salesCard .card-text > .fa-gift::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E"); }
/* Gift card type line (_GiftCardPartial) carries .text-muted, whose !important grey beat the tiles' text colour. */
.home-page--compact .salesCard .card-text.text-muted { color: #374151 !important; }

/* Readable on any club background (light Lyngby, busy colourful gog): no panel — the text is darker and a touch heavier,
   with a soft white halo around the letters (icons: drop-shadow, they are masks) that only shows where the pattern
   would otherwise cut into them. */
.home-page--compact .salesCard .card-title, .home-page--compact .salesCard .card-text { text-shadow: 0 0 1px #fff, 0 0 4px rgba(255, 255, 255, 0.95), 0 0 10px rgba(255, 255, 255, 0.85); }
.home-page--compact .salesCard .card-text { font-weight: 500; }
.home-page--compact .salesCard .card-text > .fa:first-child { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px rgba(255, 255, 255, 0.95)); }

/* Tiles with nothing under the image (card type with an empty DisplayName) keep only the divider: the empty body
   stretches to the row, so its line sits level with a text tile beside it. Bare promotions keep their clipped corners. */
.home-page--compact .salesCard > .card-body:has(> .card-title:empty):not(:has(.card-text)) { padding: 0; }
.home-page--compact .salesCard > .card-body > .card-title:empty { display: none; }
.home-page--compact .salesCard.salesCard--bare { overflow: hidden; border-radius: var(--ev-radius); }

/* Advertised ("kommer snart") event tiles: _EventsPartial fades the whole link (inline opacity: 0.5), which without a card
   looked washed out — pattern through the image, pale text. Here only the image is dimmed; the text keeps its contrast and
   the advertise text is a small outlined label (it is not a button, nothing happens on click). !important: inline style. */
.home-page--compact a:has(.btn.advertise) { opacity: 1 !important; cursor: default; }
.home-page--compact a:has(.btn.advertise) .card-img-top { opacity: 0.55; filter: saturate(0.6); }
/* …and the text reads disabled too: title, facts and icons in a light grey; only the "åbner for salget" label keeps colour. */
.home-page--compact a:has(.btn.advertise) .salesCard .card-title, .home-page--compact a:has(.btn.advertise) .salesCard .card-text,
.home-page--compact a:has(.btn.advertise) .salesCard .card-text > .fa:first-child { color: #9ca3af; }
.home-page--compact .salesCard > .card-body > .btn.advertise { display: inline-flex; flex: none; width: auto; max-width: 100%; height: auto; margin-top: 0.6rem; padding: 0.3rem 0.85rem !important; border: 1px solid var(--ev-accent); border-radius: 999px; background: transparent; color: var(--ev-accent) !important; font-size: 0.85rem; font-weight: 600; line-height: 1.3; white-space: normal; }
.home-page--compact .salesCard > .card-body > .btn.advertise:is(:hover, :focus-visible, :active) { background: var(--ev-accent) !important; color: var(--ev-on-accent, #fff) !important; }

/* Compact hover: no whole-tile zoom (.zooming, style.css) now that there is no card to grow — the image lifts a little and
   the title takes the club colour with an underline. Same on keyboard focus. */
.home-page--compact .zooming:hover { transform: none; }
/* Image-only tiles (empty card title, bare promotions) have no title to react, so they keep the theme's slight zoom. */
.home-page--compact .zooming:has(.salesCard--bare):hover, .home-page--compact .zooming:has(> .salesCard > .card-body > .card-title:empty):hover { transform: scale(1.03); }
.home-page--compact a[href]:not([href^="javascript"]):focus-visible .zooming:has(.salesCard--bare) { transform: scale(1.03); }
.home-page--compact a[href]:not([href^="javascript"]):focus-visible .salesCard--bare { outline: 2px solid var(--ev-accent); outline-offset: 3px; }
/* Bare promotions' <img> has no .card-img-top and the card clips its corners, so the tile shadow (rest + hover) sits on the
   card itself. !important: the compact .salesCard rule above and _PromotionPartial's inline .salesCard--bare style both zero it. */
.home-page--compact .salesCard.salesCard--bare { box-shadow: var(--ev-card-shadow) !important; transition: box-shadow 0.2s ease; }
.home-page--compact a[href]:not([href^="javascript"]):is(:hover, :focus-visible) .salesCard.salesCard--bare { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important; }
.home-page--compact .salesCard .card-img-top { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.home-page--compact a[href]:not([href^="javascript"]):hover .salesCard .card-img-top, .home-page--compact a[href]:not([href^="javascript"]):focus-visible .salesCard .card-img-top { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); }
.home-page--compact a[href]:not([href^="javascript"]):hover .salesCard .card-title, .home-page--compact a[href]:not([href^="javascript"]):focus-visible .salesCard .card-title { color: var(--ev-accent); text-decoration: underline; text-underline-offset: 3px; }
.home-page--compact a[href]:not([href^="javascript"]):focus-visible { outline: none; }
.home-page--compact a[href]:not([href^="javascript"]):focus-visible .salesCard .card-img-top { outline: 2px solid var(--ev-accent); outline-offset: 3px; }

/* Narrow phones: the button drops under the text, right-aligned, instead of squeezing it. */
@media (max-width: 575.98px) {
    .home-page .salesCard > .card-body { grid-template-columns: minmax(0, 1fr); }
    .home-page .salesCard > .card-body > .btn, .home-page .salesCard > .card-body > .sales-card-buttons { grid-column: 1; grid-row: auto; justify-self: end; margin-top: 0.6rem; }
}

/* Login fields (login + glemt kodeord modals, Log ind page): the profile/checkout field instead of the theme's underline
   (!important: the theme forces border, radius, background, shadow). Autofill stays white, not Chrome's blue. */
.login-modal .form-control, .forgot-password-modal .form-control, .logIn .form-control { height: auto; padding: 0.65rem 0.9rem; border: 1px solid rgba(0, 0, 0, 0.14) !important; border-radius: 10px !important; background: #fff !important; box-shadow: none; }
.login-modal .form-control:focus, .forgot-password-modal .form-control:focus, .logIn .form-control:focus { border-color: color-mix(in srgb, var(--organiser-color) 15%, #fff) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--organiser-color) 15%, transparent) !important; }
.login-modal .form-control:-webkit-autofill, .forgot-password-modal .form-control:-webkit-autofill, .logIn .form-control:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset !important; box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: #1f2937; }
.login-modal .form-control:-webkit-autofill:focus, .forgot-password-modal .form-control:-webkit-autofill:focus, .logIn .form-control:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px color-mix(in srgb, var(--organiser-color) 15%, transparent) !important; box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px color-mix(in srgb, var(--organiser-color) 15%, transparent) !important; }

/* Log ind page (Views/Account/Login.cshtml section.logIn) and Opret konto (Register.cshtml section.signUp): shop cards and
   pill buttons like the login modal. The club-colour heading strip stays; the panel clips it to the card's corners. */
.logIn .card { border: var(--ev-card-border); border-radius: var(--ev-radius); box-shadow: var(--ev-card-shadow); }
.signUp .panel { overflow: hidden; border: var(--ev-card-border); border-radius: var(--ev-radius); box-shadow: var(--ev-card-shadow); }
.signUp .panel .panel-body { border: 0; }   /* the theme's 3px #f0f0f0 frame; the panel's hairline replaces it */
.logIn .btn-block, .signUp .btn-primary { border-radius: 999px; font-weight: 600; letter-spacing: normal; }
/* "Forbind med Facebook" (login page + modal): style.css drew the f as a PNG in a 34px box with a divider, made for a 34px square
   button, so on the taller pill it sat high and cut into the curve; .screen-fontsize-small then cut the text to "Facebo…" on
   phones, and its 0.2em side margins pushed the pill wider than the buttons above. Now glyph + text are centred together and
   the text may wrap rather than be cut. !important: .screen-fontsize-small's inline-block/nowrap/overflow. */
.loginBtn.loginBtn--facebook { display: flex !important; align-items: center; justify-content: center; gap: 0.5rem; margin-right: 0; margin-left: 0; padding: 0.35rem 1.25rem; overflow: visible !important; background-image: none; text-shadow: none; line-height: 1.25; white-space: normal !important; text-align: center; }
.loginBtn.loginBtn--facebook::before { content: "\f09a"; position: static; flex: none; width: auto; height: auto; border: 0; background: none; font-family: 'FontAwesome'; font-size: 1.15em; font-weight: 400; line-height: 1; }
.loginBtn.loginBtn--facebook:hover, .loginBtn.loginBtn--facebook:focus { background-image: none; filter: brightness(1.1); }

/* Front-page hero slider CTA (Views/Home/_BannerItemPartial.cshtml, above .home-page): a pill instead of style.css's square
   rs-caption-4 box. !important: the theme's padding is !important. Colours and border untouched. */
.bannerV1 .tp-caption .btn.primary-btn { border-radius: 999px; padding: 0 1.25rem !important; }

/* Front-page filter bar (Views/Home/_FrontPageFilterBar.cshtml). One white track (a segmented control) with a "Filtrér" label in front, so it reads as one filter and not as loose buttons:
   options have no box of their own, only the active one is filled in club colour. Phones: the track spans the width and
   wraps. scroll-margin: the #forside-filter jump leaves a little air above the bar. */
/* Same air above and below the bar: above is .mainContent's padding-top (style.css: 30px, 40px on phones), below is this
   margin plus the cards' inline margin: 10px 0 (_CardPartial / _GiftCardPartial / events). */
.home-filter-wrap { position: relative; width: fit-content; max-width: 100%; margin: 0 auto 20px; scroll-margin-top: 1rem; }
.home-filter { position: relative; display: flex; align-items: center; gap: 0.25rem; padding: 0.3rem; border: var(--ev-card-border); border-radius: 999px; background: #fff; box-shadow: var(--ev-card-shadow); scroll-margin-top: 1rem; }
/* Filtrér is an icon-only round button (magnifier) that opens the panel; filled club colour once anything is applied (.is-set). */
.home-filter__label { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 999px; background: transparent; font-size: 0.95rem; cursor: pointer; }
.home-filter__label:hover, .home-filter__label:focus-visible, .home-filter__label[aria-expanded="true"] { background: #f3f4f6; }
.home-filter__label .fa { color: var(--ev-accent); }
.home-filter__label.is-set { background: var(--ev-accent); }
.home-filter__label.is-set .fa { color: #fff; }
/* The sort panel: a card under the Filtrér button, heading, options with a check on the chosen one, Nulstil + Gem. */
.home-filter-panel { position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 1050; min-width: 260px; padding: 0.75rem; border: var(--ev-card-border); border-radius: var(--ev-radius); background: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); }
/* ✕ close: phones only (below), where the bottom sheet covers the Filtrér button. */
.home-filter-panel__close { display: none; }
.home-filter-panel__heading { padding: 0.25rem 0.5rem 0.5rem; color: #6b7280; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.home-filter-panel__option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: 0.65rem 0.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.06); color: #1f2937; font-weight: 600; cursor: pointer; }
.home-filter-panel__option:hover { background: color-mix(in srgb, var(--ev-accent) 6%, #fff); }
.home-filter-panel__option input { position: absolute; opacity: 0; pointer-events: none; }
.home-filter-panel__option .fa { visibility: hidden; color: var(--ev-accent); }
.home-filter-panel__option:has(input:checked) .fa { visibility: visible; }
.home-filter-panel__option:has(input:focus-visible) { outline: 2px solid var(--ev-accent); outline-offset: -2px; }
/* Taller now (Søg, Vis, Måned, Gavekort): the panel scrolls inside itself, Nulstil/Gem stay reachable at the bottom. */
.home-filter-panel { max-height: min(70vh, 560px); overflow-y: auto; }
.home-filter-panel__heading:not(:first-child) { margin-top: 0.75rem; }
/* Søg stays the top heading: the close button comes first in the markup, so :first-child alone gave it the section gap. */
.home-filter-panel__close + .home-filter-panel__heading { margin-top: 0; }
.home-filter-panel__search { width: 100%; padding: 0.55rem 0.9rem; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 999px; background: #f8f8f8; font-size: 0.9rem; }
.home-filter-panel__search:focus { border-color: var(--ev-accent); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--organiser-color) 15%, transparent); }
/* Month / gavekort type: one-choice chips (radios), the chosen one filled. */
.home-filter-panel__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 0.25rem; }
.home-filter-panel__chip { margin: 0; cursor: pointer; }
.home-filter-panel__chip input { position: absolute; opacity: 0; pointer-events: none; }
.home-filter-panel__chip span { display: inline-block; padding: 0.4rem 0.8rem; border-radius: 999px; background: #f3f4f6; color: #1f2937; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.home-filter-panel__chip:hover span { background: color-mix(in srgb, var(--ev-accent) 10%, #fff); }
.home-filter-panel__chip:has(input:checked) span { background: var(--ev-accent); color: #fff; }
.home-filter-panel__chip:has(input:focus-visible) span { outline: 2px solid var(--ev-accent); outline-offset: 2px; }
.home-filter-panel__actions { position: sticky; bottom: -0.75rem; margin-right: -0.75rem; margin-bottom: -0.75rem; margin-left: -0.75rem; padding: 0.75rem; background: #fff; }
/* Front-page empty states — filtered to nothing (.home-filter-empty) or nothing on sale at all: a solid card (the page
   pattern shows through a dashed box), a club-tinted round icon, title, hint and an optional pill action. */
.home-empty { display: flex; flex-direction: column; align-items: center; max-width: 520px; margin: 1.5rem auto 3rem; padding: 2.5rem 1.5rem; border: var(--ev-card-border); border-radius: var(--ev-radius); background: #fff; box-shadow: var(--ev-card-shadow); text-align: center; }
.home-empty[hidden] { display: none; }
.home-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 1rem; border-radius: 50%; background: color-mix(in srgb, var(--ev-accent) 10%, #fff); color: var(--ev-accent); font-size: 1.35rem; }
.home-empty__title { margin: 0 0 0.4rem; color: #1f2937; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.home-empty__hint { max-width: 360px; margin: 0; color: #6b7280; font-size: 0.9rem; line-height: 1.5; }
.home-empty__action { margin-top: 1.25rem; padding: 0.55rem 1.4rem; border: 0; border-radius: 999px; background: var(--ev-accent); color: #fff; font-size: 0.9rem; font-weight: 600; }
.home-empty__action:hover, .home-empty__action:focus-visible { filter: brightness(0.92); }
.home-filter-panel__actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.home-filter-panel__actions button { flex: 1; min-height: 40px; border: 0; border-radius: 999px; font-weight: 600; }
.home-filter-panel__reset { background: #f3f4f6; color: #1f2937; }
.home-filter-panel__apply { background: var(--ev-accent); color: #fff; }
.home-filter__tab { flex: none; padding: 0.45rem 1rem; border-radius: 999px; background: transparent; font-size: 0.9rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; }
.home-filter__tab:hover, .home-filter__tab:focus, .home-filter__tab:active { background: color-mix(in srgb, var(--ev-accent) 10%, #fff); text-decoration: none; }
/* !important: the theme paints links white on :focus/:active, which blanked the pressed pill (white on white). */
.home-filter__tab, .home-filter__tab:hover, .home-filter__tab:focus, .home-filter__tab:active, .home-filter__tab:visited { color: #1f2937 !important; }
.home-filter__tab.is-active, .home-filter__tab.is-active:hover, .home-filter__tab.is-active:focus, .home-filter__tab.is-active:active { background: var(--ev-accent); color: #fff !important; }
@media (max-width: 767.98px) {
    .home-filter-wrap { width: 100%; margin: 0 0 30px; }
    /* Phones: the panel is a bottom sheet over a dimmed page (the spread shadow is the dim). */
    .home-filter-panel { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 1060; min-width: 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35); }
    /* Phones: every tab visible, wrapping onto a second line instead of scrolling sideways (a hidden tab was easy to miss).
       Two lines of pills in a 999px track would pinch, so the track takes the card radius here. */
    .home-filter { flex-wrap: wrap; justify-content: center; row-gap: 0.35rem; border-radius: 22px; }
    .home-filter-panel__close { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -0.25rem -0.25rem -36px auto; padding: 0; border: 0; border-radius: 50%; background: #f3f4f6; color: #1f2937; font-size: 1rem; }
    .home-filter-panel__close:hover, .home-filter-panel__close:focus-visible { background: #e5e7eb; }
    .home-filter-panel__actions { bottom: calc(-1rem - env(safe-area-inset-bottom)); margin: 0.75rem -1rem calc(-1rem - env(safe-area-inset-bottom)); padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
}
/* Filter on: the Razor pair rows dissolve into .home-feed (one wrapping Bootstrap row), and each item's display: contents
   wrapper keeps its card column a direct flex item — hidden items leave no gap, the rest re-pair on their own. */
.home-feed > .featuredCollection, .home-filter-item { display: contents; }
.home-filter-item[hidden] { display: none; }

/* Unnumbered event page (Views/Event/UnnumberedEvent.cshtml, and the same template in GiftCard/GiftCard, Card/UnnumberedCard,
   Card/TicketSubscription): one rounded sheet with single-level cards on it — the markup
   nests card in card in card. The image drops its .salesCard box and the front-page tile hover (it is not a link here), the
   title block sits straight on the sheet, the description is the one card around the text, price rows are shop cards.
   !important: the inline box-shadows and .salesCard:hover. Colours and layout unchanged. */
/* The sheet is the seat selector's paper (event-page.css .stadiumCard / .ui-paper): square, hairline, 4px club-colour top edge. */
.unnumbered-event-page > .card { border: 1px solid rgba(0, 0, 0, 0.08); border-top: 4px solid var(--ev-accent); border-radius: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 24px 56px rgba(0, 0, 0, 0.18); }
.unnumbered-event-page > .card > .card.salesCard { overflow: hidden; border: 0; border-radius: var(--ev-radius); box-shadow: none !important; transition: none; }
.unnumbered-event-page > .card > .card.salesCard .card-img-top { border-radius: 0; }
.unnumbered-event-page > .card > .card:has(> h2) { padding-left: 0 !important; padding-right: 0 !important; border: 0; background: transparent !important; box-shadow: none !important; }   /* no side padding: the description card lines up with the image and the price rows */
.unnumbered-event-page > .card > .card:has(> h2) > .card { border: var(--ev-card-border); border-radius: var(--ev-radius); box-shadow: none !important; }
.unnumbered-event-page > .card > .card:has(.number-spinner) { border: var(--ev-card-border); border-radius: var(--ev-radius); box-shadow: var(--ev-card-shadow) !important; }
/* GiftCard.cshtml's balance form (amount, recipient, valid from): the same shop card as the price rows. */
.unnumbered-event-page > .card > .card:has(> .form-group) { border: var(--ev-card-border); border-radius: var(--ev-radius); box-shadow: var(--ev-card-shadow) !important; }
.unnumbered-event-page .btn { border-radius: 999px; }
/* Price rows fit their content: the inline height: 150px (content centred by a translate) left a mostly empty box. */
.unnumbered-event-page > .card > .card:has(.number-spinner) { height: auto !important; margin-bottom: 0.75rem; padding: 0.75rem 1.25rem !important; }
.unnumbered-event-page > .card > .card:has(.number-spinner) > .container-fluid { top: auto !important; transform: none !important; }
.unnumbered-event-page > .card > .card:has(.number-spinner) .control-label { margin: 0; }
/* The label and the −/+ group each sat in .mp-5 (style.css: padding 3rem !important) — 48px on every side inside the row. */
.unnumbered-event-page > .card > .card:has(.number-spinner) .mp-5 { padding: 0 !important; }
.unnumbered-event-page > .card > .card:has(.number-spinner) .row { justify-content: space-between; margin: 0; }
.unnumbered-event-page .number-spinner { flex-wrap: nowrap; align-items: center; width: auto; }
.unnumbered-event-page .number-spinner > .input-group-btn { flex: none; }
.unnumbered-event-page .number-spinner > .form-control { min-width: 3rem; flex: 0 1 4.5rem; }
.unnumbered-event-page .number-spinner .btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; font-size: 0.85rem; }
/* −/+ as two drawn bars instead of the Font Awesome glyph: a glyph sits by the font's own metrics, which at 0.85rem on a
   100%-scaled screen lands ~1px high and right of centre. 12×2px bars in the 36px button fall on whole pixels (12/17px in). */
.unnumbered-event-page .number-spinner .btn .fa-minus, .unnumbered-event-page .number-spinner .btn .fa-plus, .unnumbered-event-page .ticket-subscription-row .btn .fa-plus { width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat; }
.unnumbered-event-page .number-spinner .btn .fa-plus, .unnumbered-event-page .ticket-subscription-row .btn .fa-plus { background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat; }
.unnumbered-event-page .number-spinner .btn .fa-minus::before, .unnumbered-event-page .number-spinner .btn .fa-plus::before, .unnumbered-event-page .ticket-subscription-row .btn .fa-plus::before { content: none; }
/* The count dropdown between −/+ is a compact ui-select: no left margin (it sits in the stepper), centred number. */
.unnumbered-event-page .number-spinner .ui-select-wrap { flex: none; margin: 0 0.5rem; }
.unnumbered-event-page .number-spinner .ui-select__toggle { min-width: 4.5rem; justify-content: center; gap: 0.5rem; font-weight: 700; }
@media (max-width: 767.98px) {
    .unnumbered-event-page > .card { margin: 0.75rem 0 !important; padding: 1rem !important; }
    .unnumbered-event-page > .card > .card:has(.number-spinner) .justify-content-depended { gap: 0.75rem; }
    .unnumbered-event-page > .card > .card:has(.number-spinner) .mp-5 > .container-fluid { padding: 0; }
    .unnumbered-event-page #gotocheckout { height: auto; min-height: 44px; padding: 0.65rem 1rem; line-height: 1.4; white-space: normal; }
}
/* Ticket-subscription holders (basket carries ticket subscriptions): a heading on the sheet, then one shop card per holder,
   the same size as the price rows, with the steppers' 36px round +/✓ toggle. The whole row is the click target. */
.unnumbered-event-page .ticket-subscription-picker { margin-bottom: 1.25rem; }
.unnumbered-event-page .ticket-subscription-picker > .control-label, .unnumbered-event-page .ticket-subscription-picker__group { display: block; margin: 0 0 0.5rem; }
.unnumbered-event-page .ticket-subscription-picker__group { margin-top: 1rem; font-weight: 600; }
.unnumbered-event-page .ticket-subscription-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; padding: 0.75rem 1.25rem; border: var(--ev-card-border); border-radius: var(--ev-radius); background: #fff; box-shadow: var(--ev-card-shadow); cursor: pointer; }
.unnumbered-event-page .ticket-subscription-row .btn { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; font-size: 0.85rem; border: transparent; }

/* Language switcher (Views/Shared/_TopMenuPartial.cshtml): the flag at its own 4:3 with soft corners and a hairline ring
   (flags only; the code is screen-reader text) and a small chevron, all one borderless button that tints on hover; the other languages
   are rows (flag + code) in a rounded card. !important: the partial's inline margin on the chevron. */
.lang-wrapper .fi { width: 1.8rem; height: 1.35rem; font-size: 1.35rem; line-height: 1.35rem; border-radius: 4px; background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); }
.lang-wrapper > div { gap: 0.35rem; padding: 0.35rem 0.6rem; border-radius: 999px; transition: background-color 0.15s ease; }
.lang-wrapper > div:hover, .lang-wrapper > div:focus-within, .lang-wrapper > div:has(.show) { background: color-mix(in srgb, var(--organiser-color) 15%, transparent); }
.lang-wrapper > div > .fa-angle-down { margin-left: 0 !important; opacity: 0.6; font-size: 0.8rem; }
.lang-wrapper .lang-switcher, .lang-wrapper .lang-flag-item { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0; color: inherit; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1; text-decoration: none; }
.lang-wrapper .lang-switcher:hover, .lang-wrapper .lang-switcher:focus-visible { background: transparent; color: inherit; text-decoration: none; }
.lang-wrapper .lang-switcher:focus-visible { outline: 2px solid var(--ev-accent); outline-offset: 4px; border-radius: 4px; }
.lang-wrapper .lang-flag-menu { min-width: 0; margin-top: 0.45rem; padding: 0.3rem; border: var(--ev-card-border); border-radius: var(--ev-radius); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16); }
.lang-wrapper .lang-flag-item { width: 100%; padding: 0.5rem 0.65rem; color: #1f2937; border-radius: 8px; transition: background-color 0.15s ease; }
.lang-wrapper .lang-flag-item:hover, .lang-wrapper .lang-flag-item:focus-visible { background: #f3f4f6; color: #1f2937; outline: none; text-decoration: none; }
/* Keep the header height and language alignment consistent for Log ind and Profil. */
@media (min-width: 768px) {
    .header > .navbar-default { min-height: 100px; }
    .navbar-default .navbar-collapse > .navbar-nav > .lang-wrapper { top: 50%; transform: translateY(-50%); }
}
/* Phones (burger menu): the current language is one chip, alone on the right; tapping it folds the others out to its LEFT
   as a floating pill (absolute, over the menu), so no other menu item moves. !important: the partial's inline
   flex-direction: row-reverse, style.css's inline-menu layout, Bootstrap's inline dropdown offsets, and a theme link rule
   that clears the chip's fill. */
@media (max-width: 767.98px) {
    .lang-wrapper { display: flex !important; align-self: flex-end !important; justify-content: flex-end; width: auto; margin-left: auto !important; }   /* the collapsed nav centres its items */
    .lang-wrapper > div { position: relative; flex-direction: row !important; gap: 0; margin: 0 !important; padding: 0; background: transparent !important; }
    .lang-wrapper .lang-switcher, .lang-wrapper .lang-switcher:hover, .lang-wrapper .lang-switcher:focus { padding: 0.45rem 0.8rem; border-radius: 999px; background: var(--ev-accent) !important; color: #fff !important; }
    .lang-wrapper .lang-switcher .fi { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); }
    .lang-wrapper .lang-flag-menu { position: absolute !important; top: 50% !important; right: calc(100% + 0.4rem) !important; left: auto !important; z-index: 1050; display: none; flex-direction: row; gap: 0.2rem; min-width: 0; margin: 0; padding: 0.25rem; border: var(--ev-card-border); border-radius: 999px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); transform: translateY(-50%) !important; white-space: nowrap; }
    .lang-wrapper .lang-flag-menu.show { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; }   /* a theme dropdown rule stacked the options */
    .lang-wrapper .lang-flag-menu > li { display: block !important; flex: none; width: auto !important; margin: 0 !important; }
    .lang-wrapper .lang-flag-item { width: auto; padding: 0.4rem 0.7rem; border-radius: 999px; color: #1f2937 !important; }
    .lang-wrapper .lang-flag-item:hover, .lang-wrapper .lang-flag-item:focus-visible { background: #f3f4f6; color: #1f2937 !important; }
}

/* Basket button, desktop (#shoppingCart, _TopMenuPartial) and phone header (#collapsedShoppingCartButton, _Layout): a 44px
   club-colour pill with the count inside as a white chip, instead of a big block with an orange badge hanging off the corner
   (inline left: 66px). Still #cart-badge / #cart-badge-collapsed, so the basket script keeps filling the count. */
.navbar-default #shoppingCart, .navbar-default #collapsedShoppingCartButton { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; height: 44px; padding: 0 0.6rem 0 1.1rem; border-radius: 999px; font-size: 1.05rem; line-height: 1; }
.navbar-default #cart-badge, .navbar-default #cart-badge-collapsed { position: static !important; display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 1.6rem; height: 1.6rem; padding: 0 0.4rem; border-radius: 999px; background: #fff; color: var(--ev-accent); font-size: 0.8rem; font-weight: 700; line-height: 1; }
/* Desktop: centred on the menu links' line. Its <li> is not li-center like the others, and the button's inline margins
   (25% / 15% of the row width) were sized for the old 62px block, lifting the pill above the links. */
@media (min-width: 768px) {
    .navbar-default .navbar-nav > li:has(> #shoppingCart) { display: flex; align-items: center; }
    .navbar-default #shoppingCart { margin: 0 0 0 0.75rem !important; }
}

/* Phone header + burger menu (Views/Shared/_Layout.cshtml, _TopMenuPartial.cshtml). The burger was pinned top: 12px above
   the logo/cart line, the cart was a big block pushed in by margin-left: 22% with its badge at an inline left: 66px, and the
   open menu was an ml-auto column squeezed into the right half (the language chip poked past the edge). Here: logo, cart and
   burger on one centred line (the row reserves the burger's width; the burger sits at the row's centre — logo 70px + 15px
   brand padding each side = 100px tall), a 44px cart pill with the count inside, and a full-width, right-aligned menu
   (thumb reach) with hairline dividers. !important: the inline styles and style.css's ID rules. */
@media (max-width: 767.98px) {
    .navbar-default #navbarRow { flex-wrap: nowrap; align-items: center; margin: 0; padding-right: 56px; }
    .navbar-default #navbarBrand { flex: 0 1 auto; }
    .navbar-default #collapsedShoppingCart { flex: none; max-width: none; width: auto; margin-left: auto !important; padding: 0 0.5rem 0 0; }
    .navbar-default .navbar-toggler { top: 28px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: 12px; padding: 0; border-radius: 50%; background: transparent !important; font-size: 1.35rem; transition: background-color 0.15s ease; }
    .navbar-default .navbar-toggler:hover, .navbar-default .navbar-toggler[aria-expanded="true"] { background: #f3f4f6 !important; }
    /* The open menu: full width, one hairline between top-level items. */
    .navbar-default .navbar-collapse .navbar-nav { width: 100%; margin: 0 !important; padding: 0.25rem 1rem 1rem; float: none !important; border-top: 1px solid rgba(0, 0, 0, 0.08); }
    .navbar-default .navbar-collapse .navbar-nav > li, .navbar-default .navbar-collapse .navbar-nav > .lang-wrapper { width: 100%; }
    .navbar-default .navbar-collapse .navbar-nav > li { border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
    .navbar-default .navbar-collapse .navbar-nav > li:has(> form) { border-bottom: 0; }
    /* The desktop basket's item: the shared pill rule's display: inline-flex beat style.css's display: none, leaving an
       invisible (visibility: hidden) button + its inline % margins as an empty band above Log ud. The header has its own. */
    .navbar-default .navbar-collapse .navbar-nav > li:has(> #shoppingCart) { display: none !important; }
    .navbar-default .navbar-collapse .navbar-nav > li > a.nav-link, .navbar-default .navbar-collapse .navbar-nav > li > div > a.nav-link { display: block; padding: 0.8rem 0 !important; }
    .navbar-default .navbar-collapse li.dropdown .dropdown-menu { margin: 0 0 0.5rem; padding: 0 !important; }
    .navbar-default .navbar-collapse .navbar-nav > li > form .btn { border-radius: 999px; }
    /* Log ind: a right-aligned pill the size of the Profile menu's Log ud (40px), not style.css's 75%-wide bar with 10% margins.
       !important: those margins, and .size-limit's fixed 135×84 box on the item. */
    .navbar-default .navbar-collapse .navbar-nav > li.size-limit { display: flex; justify-content: flex-end; width: 100% !important; height: auto !important; padding: 0.75rem 0; border-bottom: 0; }
    .navbar-default .navbar-collapse .navbar-nav > li.size-limit .btn-login { width: auto; height: 40px; margin: 0 !important; padding: 0 1.5rem; font-size: 0.9rem; line-height: 40px; }
    /* Log ud (the phone-only item under the cart): the same right-aligned pill as Log ind, not a btn-block bar inset by its
       inline 15px padding. !important: that padding and the item's my-2. */
    .navbar-default .navbar-collapse .navbar-nav > li.d-md-none:has(> form) { margin: 0 !important; padding: 0.75rem 0 0 !important; }
    .navbar-default .navbar-collapse .navbar-nav > li.d-md-none > form .btn { display: inline-block; width: auto; height: 40px; padding: 0 1.5rem; font-size: 0.9rem; font-weight: 600; line-height: 40px; }
    .navbar-default .navbar-collapse .navbar-nav > .lang-wrapper { justify-content: flex-end !important; margin-top: 0.75rem !important; text-align: right; }
    .navbar-default .navbar-collapse .navbar-nav > .lang-wrapper > div { margin-left: auto !important; }
    /* Right-aligned for the thumb (one-handed on the right): top-level items, the Profil row and its sub-items share one
       right edge (an indent from the right read as the sub-items being misaligned, not nested). */
    .navbar-default .navbar-collapse .navbar-nav { text-align: right; }
    .navbar-default .navbar-collapse .navbar-nav > li > div { justify-content: flex-end; margin-right: 0 !important; }
    .navbar-default .navbar-collapse li.dropdown .dropdown-menu { text-align: right; }
    .navbar-default .navbar-collapse li.dropdown .dropdown-menu li a { padding: 0.5rem 0; }
    /* The burger menu is already the menu: the profile links show straight away, without a "Profil" row to open first. */
    .navbar-default .navbar-collapse li.profile-menu > div { display: none !important; }
    .navbar-default .navbar-collapse li.profile-menu > .dropdown-menu { display: block; }
}

/* Basket drawer (Views/Basket/_Cart.cshtml + _CartItem.cshtml in the pushy aside). Stays dark (pushy.css #191918); the fix is
   structure: a heading with a close, each line a rounded card, the subtotal + a full-width Betal pill pinned to the bottom
   (it floated at the top over an empty black column), and an empty state. !important: style.css's .pushy cart rules and the
   red inline colour on the ✕. */
.pushy .cart-content { display: flex; flex-direction: column; min-height: 100%; padding: 0 !important; }
.cart-drawer { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 100vh; }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1rem 0.9rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.cart-drawer__title { margin: 0; color: #fff; font-size: 1.15rem; font-weight: 700; }
.cart-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 1rem; }
.cart-drawer__close:hover, .cart-drawer__close:focus-visible { background: rgba(255, 255, 255, 0.16); }
.pushy .cart-content ul.cart-drawer__items { flex: 1 1 auto; margin: 0; padding: 0.75rem 0.75rem 0 !important; }
.pushy .cart-content ul.cart-drawer__items > li { position: relative; margin-bottom: 0.6rem; padding: 0.85rem 2.4rem 0.85rem 0.95rem !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: var(--ev-radius); background: rgba(255, 255, 255, 0.05); }
.pushy .cart-content ul.cart-drawer__items > li h4 { margin: 0 0 0.35rem !important; font-size: 0.95rem; line-height: 1.3; }
.pushy .cart-content ul.cart-drawer__items > li h4 a { color: #fff; font-weight: 700; }
.pushy .cart-content ul.cart-drawer__items > li p { margin: 0; font-size: 0.8rem; line-height: 1.5; }
.pushy .cart-content ul.cart-drawer__items > li p:last-child strong { color: #fff; font-size: 0.9rem; }
.pushy .cart-content ul.cart-drawer__items > li .seat-card__remove_new { position: absolute; top: 0.6rem; right: 0.6rem; }
.pushy .cart-content ul.cart-drawer__items > li .seat-card__remove_new a { display: inline-flex !important; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0 !important; border-radius: 50%; color: rgba(255, 255, 255, 0.55) !important; font-size: 0.8rem !important; }
.pushy .cart-content ul.cart-drawer__items > li .seat-card__remove_new a:hover { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; }
.pushy .cart-content ul.cart-drawer__items > li.cart-drawer__giftcards { padding-right: 0.95rem !important; }
/* Pinned to the bottom of the drawer, whatever the basket's length. */
.cart-drawer__foot { position: sticky; bottom: 0; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.1); background: #191918; }
.cart-drawer__total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.75rem; color: rgba(255, 255, 255, 0.75); font-size: 0.85rem; }
.cart-drawer__total strong { color: #fff; font-size: 1.15rem; }
.pushy a.btn-primary.cart-drawer__pay { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; padding: 0 !important; border-radius: 999px; font-weight: 600; }
/* Empty basket. */
.cart-drawer__empty { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 2.5rem 1.5rem 1rem; color: rgba(255, 255, 255, 0.65); font-size: 0.85rem; text-align: center; }
.cart-drawer__empty strong { color: #fff; font-size: 1rem; }
.cart-drawer__empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 0.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 1.2rem; }

/* Desktop profile dropdown (_TopMenuPartial "Profil"): the shop's card — hairline, radius, soft shadow, a small gap under
   the header — with tighter rounded rows that tint on hover, the loyalty block (name + points) as a light panel, and Log ud
   under a divider as a slimmer pill. !important: style.css's float/padding on the rows, the ul's py-0 and the button's
   inline margin-top. Phones keep their menu (the phone rules above). */
@media (min-width: 768px) {
    /* .show too: site.min.css zeroes radius/shadow/margin on li.dropdown.show .dropdown-menu, which outranks the plain selector. */
    .navbar-default .navbar-collapse li.dropdown .dropdown-menu, .navbar-default .navbar-collapse li.dropdown.show .dropdown-menu { min-width: 250px; margin-top: 0.5rem; padding: 0.4rem !important; border: var(--ev-card-border); border-radius: var(--ev-radius); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); }
    /* Hover-opened menu (custom.js closes it on mouseleave): the gap between the header text and the menu was a dead zone.
       An invisible bridge on the menu covers everything above it while open; overflow: visible so the bridge isn't clipped. */
    .navbar-default .navbar-collapse li.dropdown .dropdown-menu { overflow: visible; }
    /* The Profil menu hangs centred under "Profil ⌄" (not from its right edge, .dropdown-menu-right), rows centred to match.
       -0.25rem: half the toggle's mr-2, which sits inside the li. The flag menu keeps its own placement. */
    .navbar-default .navbar-collapse li.dropdown .dropdown-menu { text-align: center; }
    .navbar-default .navbar-collapse li.dropdown .dropdown-menu.dropdown-menu-right:not(.lang-flag-menu) { right: auto; left: calc(50% - 0.25rem); transform: translateX(-50%); }
    .navbar-default .navbar-collapse li.dropdown .dropdown-menu::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 4rem; }
    .navbar-default .navbar-collapse li.dropdown .dropdown-menu > li { float: none; }
    .navbar-default .navbar-collapse li.dropdown .dropdown-menu > li > a { display: block; float: none !important; padding: 0.55rem 0.8rem !important; border-radius: 8px; color: #1f2937; font-size: 0.9rem; font-weight: 400; line-height: 1.35; transition: background-color 0.15s ease, color 0.15s ease; }
    .navbar-default .navbar-collapse li.dropdown .dropdown-menu > li > a:hover, .navbar-default .navbar-collapse li.dropdown .dropdown-menu > li > a:focus-visible { background: color-mix(in srgb, var(--ev-accent) 8%, #fff); color: var(--ev-accent); text-decoration: none; }
    .navbar-default .navbar-collapse li.dropdown .dropdown-menu > li.loyalty { float: none; margin-bottom: 0.3rem; padding: 0.6rem 0.8rem; border-radius: 8px; background: #f3f4f6; font-size: 0.85rem; }
    .navbar-default .navbar-collapse li.dropdown .dropdown-menu > li:has(> form) { margin-top: 0.3rem; padding: 0.45rem 0.1rem 0.35rem; border-top: 1px solid rgba(0, 0, 0, 0.08); }
    .navbar-default .navbar-collapse li.dropdown .dropdown-menu > li > form .btn { height: 40px; margin-top: 0 !important; margin-bottom: 0; padding: 0; border-radius: 999px; font-size: 0.9rem; font-weight: 600; line-height: 40px; }
}

/* Static webshop background: viewport-sized like the partner image, independent of page height and scrollbars. */
.webshop-fixed-bg-image { position: fixed; top: 0; left: 0; z-index: -1; width: 100vw; height: 100vh; height: 100lvh; object-fit: cover; pointer-events: none; will-change: transform; }

/* EventManager's branded loading mark, shared by page actions, dialogs and seat maps. */
.eventii-loading { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--ev-text, #111827); }
.eventii-loading__badge { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; flex: none; border-radius: 50%; color: var(--ev-accent); background: color-mix(in srgb, var(--ev-accent) 10%, var(--ev-surface, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev-accent) 25%, transparent); }
.eventii-loading .eventii-mark { width: 40px; height: 40px; }
.eventii-loading__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.eventii-mark { animation: eventii-breathe 1.8s ease-in-out infinite; transform-origin: center; }
@keyframes eventii-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .eventii-mark { animation: none; } }