/* ============================================================================
   LA DOLCE VITA — PRETIX CUSTOM THEME
   Monochrome Dark/Glassmorphism adapted from la-dolce-vita-website
   Font-family is NOT set here — configure it in the pretix backend instead.
   ============================================================================ */


/* ============================================================================
   1. DESIGN TOKENS
   ============================================================================ */
:root {
  /* Override pretix brand variables */
  --pretix-brand-primary:        #ffffff;
  --pretix-brand-primary-darker: #e6e6e6;
  --pretix-brand-primary-lighter:#ffffff;

  /* Base */
  --ldv-black:        #000000;
  --ldv-black-soft:   #111111;
  --ldv-white:        #ffffff;
  --ldv-white-dim:    #f0f0f0;

  /* Glass surface fills */
  --ldv-glass-01:     rgba(255,255,255,0.04);
  --ldv-glass-02:     rgba(255,255,255,0.06);
  --ldv-glass-04:     rgba(255,255,255,0.08);
  --ldv-glass-06:     rgba(255,255,255,0.10);
  --ldv-glass-08:     rgba(255,255,255,0.15);

  /* Borders */
  --ldv-border-faint:   rgba(255,255,255,0.06);
  --ldv-border-subtle:  rgba(255,255,255,0.10);
  --ldv-border-medium:  rgba(255,255,255,0.20);
  --ldv-border-strong:  rgba(255,255,255,0.30);
  --ldv-border-focus:   rgba(255,255,255,0.50);

  /* Text */
  --ldv-text:         #ffffff;
  --ldv-text-muted:   rgba(255,255,255,0.60);
  --ldv-text-dim:     rgba(255,255,255,0.40);
  --ldv-text-faint:   rgba(255,255,255,0.30);

  /* Overlays */
  --ldv-overlay-40:   rgba(0,0,0,0.40);
  --ldv-overlay-60:   rgba(0,0,0,0.60);
  --ldv-overlay-80:   rgba(0,0,0,0.80);
  --ldv-overlay-95:   rgba(0,0,0,0.95);

  /* Semantic (subtle — no loud colors in this design) */
  --ldv-success:      #4a9060;
  --ldv-success-bg:   rgba(74,144,96,0.12);
  --ldv-success-bd:   rgba(74,144,96,0.35);
  --ldv-danger:       #d77272;
  --ldv-danger-bg:    rgba(215,114,114,0.12);
  --ldv-danger-bd:    rgba(215,114,114,0.35);
  --ldv-warning:      #e6b549;
  --ldv-warning-bg:   rgba(230,181,73,0.12);
  --ldv-warning-bd:   rgba(230,181,73,0.35);

  /* Radii */
  --ldv-r-xs:  4px;
  --ldv-r-sm:  8px;
  --ldv-r-md:  16px;
  --ldv-r-lg:  20px;
  --ldv-r-xl:  32px;
  --ldv-r-pill: 9999px;

  /* Shadows */
  --ldv-shadow-card:     0 20px 50px rgba(0,0,0,0.50);
  --ldv-shadow-floating: 0 15px 35px rgba(0,0,0,0.40);
  --ldv-shadow-focus:    0 0 20px rgba(255,255,255,0.10);
  --ldv-shadow-active:   0 5px 20px rgba(255,255,255,0.20);

  /* Motion */
  --ldv-ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ldv-trans:      0.3s var(--ldv-ease);
  --ldv-trans-fast: 0.2s var(--ldv-ease);
}


/* ============================================================================
   2. BASE / BODY / LINKS
   ============================================================================ */
html,
body {
  background: var(--ldv-black);
  color: var(--ldv-text);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--ldv-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--ldv-trans-fast);
}
a:hover,
a:focus {
  opacity: 0.65;
  color: var(--ldv-white);
}
a.no-underline,
.no-underline,
.no-underline:hover {
  text-decoration: none;
}

hr {
  border: 0;
  border-top: 1px solid var(--ldv-border-subtle);
  margin: 40px 0;
}

::selection {
  background: var(--ldv-white);
  color: var(--ldv-black);
}


/* ============================================================================
   3. TYPOGRAPHY
   ============================================================================ */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  color: var(--ldv-text);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 0;
}

h1, .h1 {
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-size: clamp(2rem, 6vw, 3.125rem); /* max 50px */
  margin-bottom: 0.4em;
}

h2, .h2 {
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 0.6em;
}

h3, .h3 {
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin-bottom: 0.5em;
  letter-spacing: 0;
}

h4, .h4 {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
}

h5, h6 {
  color: var(--ldv-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
}

p {
  line-height: 1.65;
  color: var(--ldv-text);
}

.lead {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ldv-text);
  line-height: 1.6;
}

strong, b {
  font-weight: 700;
  color: var(--ldv-text);
}

small, .small {
  font-size: 0.875em;
  color: var(--ldv-text-muted);
}

.text-muted,
.text-muted time {
  color: var(--ldv-text-muted) !important;
}

.text-right  { text-align: right; }
.text-left   { text-align: left; }
.text-center { text-align: center; }


/* ============================================================================
   4. LAYOUT / CONTAINERS
   ============================================================================ */
.container,
.container-fluid {
  background: transparent;
}

.main-box {
  padding-top: 30px;
  padding-bottom: 60px;
}

.page-header {
  border-bottom: 1px solid var(--ldv-border-subtle);
  padding-bottom: 20px;
  margin: 0 0 40px;
}

.page-header > h1,
.page-header > h2 {
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.04em;
}

/* Page-header left column: centre the content, drop the Bootstrap float */
.page-header > .pull-left,
.page-header > .pull-left.flip {
  float: none !important;
  text-align: center;
}

.organizer-logo {
  max-width: 300px;
  margin-bottom: 20px;
}

.page-header-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.clearfix::after { content: ""; display: table; clear: both; }


/* ============================================================================
   5. BUTTONS
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--ldv-r-pill);
  border: 1px solid transparent;
  padding: 12px 28px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--ldv-trans-fast);
  box-shadow: none;
  white-space: nowrap;
}

.btn:hover,
.btn:focus {
  text-decoration: none;
  transform: translateY(-2px);
  outline: none;
}

.btn:active { transform: translateY(0); }

.btn:disabled,
.btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* Primary — solid white on black, the main CTA */
.btn-primary,
.btn-primary:focus {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
}
.btn-primary:hover {
  background: var(--ldv-white-dim);
  color: var(--ldv-black);
  border-color: var(--ldv-white-dim);
}

/* Default / Secondary — glass */
.btn-default,
.btn-secondary {
  background: var(--ldv-glass-04);
  color: var(--ldv-white);
  border-color: var(--ldv-border-subtle);
  backdrop-filter: blur(10px);
}
.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--ldv-glass-08);
  color: var(--ldv-white);
  border-color: var(--ldv-border-medium);
  box-shadow: none;
}
.btn-default.active,
.btn-default[aria-current="page"] {
  background: var(--ldv-glass-08);
  color: var(--ldv-white);
  border-color: var(--ldv-border-strong);
  box-shadow: none;
}

/* Success */
.btn-success,
.btn-success:focus {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
}
.btn-success:hover {
  background: var(--ldv-success);
  color: var(--ldv-white);
  border-color: var(--ldv-success);
}

/* Danger */
.btn-danger {
  background: var(--ldv-danger-bg);
  color: var(--ldv-danger);
  border-color: var(--ldv-danger-bd);
}
.btn-danger:hover,
.btn-danger:focus {
  background: var(--ldv-danger);
  color: var(--ldv-white);
  border-color: var(--ldv-danger);
}

/* Warning */
.btn-warning {
  background: var(--ldv-warning-bg);
  color: var(--ldv-warning);
  border-color: var(--ldv-warning-bd);
}
.btn-warning:hover {
  background: var(--ldv-warning);
  color: var(--ldv-black);
  border-color: var(--ldv-warning);
}

/* Link-style */
.btn-link,
.btn-mini.btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--ldv-white);
  padding: 6px 10px;
}
.btn-link:hover,
.btn-link:focus {
  opacity: 0.65;
  transform: none;
  text-decoration: underline;
  background: transparent;
}

/* Sizes */
.btn-lg {
  padding: 18px 40px;
  font-size: 13px;
}
.btn-sm {
  padding: 8px 18px;
  font-size: 11px;
}
.btn-xs,
.btn-mini {
  padding: 5px 12px;
  font-size: 10px;
}
.btn-block {
  display: flex;
  width: 100%;
}

/* Button groups */
.btn-group {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-group > .btn {
  border-radius: var(--ldv-r-pill) !important;
}

.input-group .input-group-btn .btn {
  border-radius: 0 var(--ldv-r-pill) var(--ldv-r-pill) 0;
  padding-left: 18px;
  padding-right: 24px;
}


/* ============================================================================
   6. FORMS
   ============================================================================ */
.form-control {
  background: var(--ldv-glass-06);
  backdrop-filter: blur(10px);
  border: 1px solid var(--ldv-border-medium);
  border-radius: var(--ldv-r-pill);
  color: var(--ldv-white);
  padding: 13px 22px;
  font-size: 0.95rem;
  height: auto;
  box-shadow: none;
  transition: all var(--ldv-trans);
}
.form-control::placeholder {
  color: var(--ldv-text-dim);
}
.form-control:focus {
  background: var(--ldv-glass-08);
  border-color: var(--ldv-border-focus);
  box-shadow: var(--ldv-shadow-focus);
  outline: none;
  color: var(--ldv-white);
}
.form-control[readonly],
.form-control:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

textarea.form-control {
  border-radius: var(--ldv-r-md);
  resize: vertical;
  padding: 16px 20px;
  min-height: 5em;
}

select.form-control,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23ffffff' stroke-opacity='0.7' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 22px center;
  padding-right: 50px;
}
select.form-control option {
  background: var(--ldv-black-soft);
  color: var(--ldv-white);
}

.control-label,
.form-group > label {
  color: var(--ldv-text);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-top: 15px;
}
.control-label.label-empty { padding-top: 15px; }

.help-block {
  color: var(--ldv-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-top: 8px;
}

.form-group { margin-bottom: 20px; }

.radio,
.checkbox {
  padding-left: 0;
  margin: 8px 0;
}
.radio label,
.checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-left: 0;
  cursor: pointer;
  color: var(--ldv-text);
  font-weight: 500;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
  accent-color: var(--ldv-white);
  width: 18px;
  height: 18px;
  margin: 0;
  position: static;
  cursor: pointer;
}

.input-group {
  display: flex;
  align-items: stretch;
}
.input-group .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group .form-control:last-child {
  border-radius: var(--ldv-r-pill);
}

.has-error .form-control,
.form-control.has-error,
.form-control[aria-invalid="true"] {
  border-color: var(--ldv-danger);
}
.has-error .help-block,
.has-error .control-label {
  color: var(--ldv-danger);
}


/* ============================================================================
   7. QUANTITY SPINNER
   ============================================================================ */
.input-item-count-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
}
.input-item-count {
  width: 64px;
  height: 42px;
  text-align: center !important;
  padding: 0 8px !important;
  border-radius: var(--ldv-r-pill) !important;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  -moz-appearance: textfield;
  appearance: textfield;
}
/* Hide native spin-buttons that would push the number off-centre */
.input-item-count::-webkit-outer-spin-button,
.input-item-count::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.input-item-count-dec,
.input-item-count-inc {
  width: 42px;
  height: 42px;
  border-radius: 50% !important;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Override btn inline-flex gap */
  gap: 0;
  letter-spacing: 0;
}


/* ============================================================================
   8. PANELS / CARDS / DETAILS
   ============================================================================ */
.panel,
.panel.panel-default,
.panel.panel-primary {
  background: var(--ldv-glass-01);
  backdrop-filter: blur(15px);
  border: 1px solid var(--ldv-border-subtle);
  border-radius: var(--ldv-r-xl);
  box-shadow: none;
  margin-bottom: 30px;
  overflow: hidden;
}

.panel-heading,
details.panel > summary.panel-heading {
  background: transparent;
  color: var(--ldv-white);
  border-bottom: 1px solid var(--ldv-border-subtle);
  padding: 22px 30px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.panel-heading::-webkit-details-marker,
summary.panel-heading::-webkit-details-marker {
  display: none;
}
.panel-heading h2,
.panel-heading h3,
.panel-heading .panel-title {
  margin: 0;
  font-size: inherit;
  color: inherit;
}

details.panel > summary.panel-heading::after {
  content: "";
  position: absolute;
  right: 30px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ldv-text-muted);
  border-bottom: 2px solid var(--ldv-text-muted);
  transform: translateY(-75%) rotate(45deg);
  transition: transform var(--ldv-trans-fast);
}
details.panel[open] > summary.panel-heading::after {
  transform: translateY(-25%) rotate(-135deg);
}

.panel-body {
  padding: 20px 30px !important;
  color: var(--ldv-text);
  background: transparent;
}

.firstchild-in-panel {
  padding-top: 0;
}


/* ============================================================================
   9. CART
   ============================================================================ */
.cart,
aside .panel.cart,
details.panel.cart {
  background: var(--ldv-glass-02);
}

.cart-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 18px 0;
  border-bottom: 1px solid var(--ldv-border-faint);
  margin: 0;
}
.cart-row:last-child { border-bottom: none; }

.cart-row .product {
  color: var(--ldv-text);
  font-weight: 600;
}
.cart-row .item-description {
  color: var(--ldv-text);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.cart-row .singleprice,
.cart-row .totalprice,
.cart-row .price {
  color: var(--ldv-text);
  font-weight: 600;
  text-align: right;
}

.cart-rowgroup-total .cart-row,
.cart-row.total {
  border-top: 2px solid var(--ldv-border-medium);
  border-bottom: none;
  padding-top: 24px;
  padding-bottom: 10px;
  font-size: 1.1em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.collapse-lines {
  color: var(--ldv-text-muted);
  font-size: 0.9rem;
  margin-top: 4px;
}
.cart-icon-details { color: var(--ldv-text-muted); }


/* ============================================================================
   10. PRODUCT LISTS / ITEM CATEGORIES
   ============================================================================ */
.item-category {
  margin-bottom: 40px;
}
.item-category > h3 {
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: var(--ldv-text-muted);
  text-transform: uppercase;
  font-weight: 800;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ldv-border-subtle);
}

.product-row {
  padding: 24px 0;
  border-bottom: 1px solid var(--ldv-border-faint);
  margin: 0;
  transition: background var(--ldv-trans-fast);
}
.product-row:last-child { border-bottom: none; }
.product-row > div { padding-top: 4px; }

.product-row h3,
.product-row .item-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 8px;
  text-transform: none;
}
.product-row .item-description {
  color: var(--ldv-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 12px;
}


/* ============================================================================
   11. EVENT LISTS (organizer page, calendar)
   ============================================================================ */
.event-list.full-width-list article.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 22px 24px;
  margin: 0 0 14px;
  background: var(--ldv-glass-02);
  border: 1px solid var(--ldv-border-subtle);
  border-radius: var(--ldv-r-md);
  transition: all var(--ldv-trans-fast);
}
.event-list.full-width-list article.row:hover,
.event-list.full-width-list article.row:focus-within {
  background: var(--ldv-glass-06);
  border-color: var(--ldv-border-medium);
  transform: translateY(-2px);
  box-shadow: var(--ldv-shadow-floating);
}
.event-list.full-width-list article.row:last-child { margin-bottom: 0; }

.event-list.full-width-list article > h3 {
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}
.event-list.full-width-list article > h3 a {
  color: var(--ldv-white);
  text-decoration: none;
}
.event-list.full-width-list article > h3 a:hover {
  opacity: 0.85;
}

/* Date/time column inside event list row */
.event-list.full-width-list article.row > p,
.event-list.full-width-list article.row > time {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ldv-text-muted);
}
.event-list.full-width-list article.row > p time {
  color: var(--ldv-text);
  font-weight: 600;
}

/* Disable alternating-rows shading — we now have card rows */
.event-list.alternating-rows article.row:nth-of-type(even) {
  background: var(--ldv-glass-02);
}


/* ============================================================================
   12. CHECKOUT STEPS — progress-bar style
   Structure (pretix):
     <ol class="checkout-flow">
       <li class="checkout-step [step-current|step-done|]">
         <div class="checkout-step-icon"><span class="fa fa-*"></span></div>
         <div class="checkout-step-label">…</div>
       </li>…
     </ol>
   Design: icon circles sit on a horizontal progress line. Labels go below.
   ============================================================================ */
ol.checkout-flow,
ul:has(> li.checkout-step),
ol:has(> li.checkout-step) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 30px 0 50px;
  gap: 0;
  position: relative;
  counter-reset: checkout-step;
}

/* Single step = vertical stack (icon on top, label below),
   distributed evenly across the row. */
.checkout-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  margin: 0;
  min-width: 0;
  color: var(--ldv-text-muted);
  position: relative;
  text-align: center;
  transition: color var(--ldv-trans-fast);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  white-space: normal;
}

/* Horizontal progress line between icon circles ----------------------------- */
.checkout-step::before,
.checkout-step::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 22px;                       /* vertical center of the 44px icon circle */
  height: 2px;
  background: var(--ldv-border-subtle) !important;
  z-index: 0;
  border: 0 !important;
}
/* Left half of the connector: from step start to the icon centre. */
.checkout-step::before {
  left: 0;
  width: calc(50% - 26px);         /* half the step, minus half the icon */
}
/* Right half. */
.checkout-step::after {
  right: 0;
  width: calc(50% - 26px);
}
/* No connector on the outer edges (first-left, last-right). */
.checkout-step:first-child::before,
.checkout-step:last-child::after {
  display: none !important;
}
/* "done" steps fill their connectors solid white. */
.checkout-step.step-done::before,
.checkout-step.step-done::after,
.checkout-step.step-current::before {
  background: var(--ldv-white) !important;
}

/* Icon disc — always visible, always centred on the line ------------------- */
.checkout-step-icon {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ldv-glass-04);
  border: 1px solid var(--ldv-border-medium);
  color: var(--ldv-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all var(--ldv-trans-fast);
}
.checkout-step-icon .fa {
  font-size: 15px;
  line-height: 1;
}

/* Label below the icon ----------------------------------------------------- */
.checkout-step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  line-height: 1.3;
  max-width: 14ch;
  margin: 0 auto;
}
.checkout-step-label .sr-only { display: none; }

/* --- States --------------------------------------------------------------- */
/* CURRENT: solid white circle, black icon, white label underneath */
.checkout-step.step-current {
  color: var(--ldv-white);
}
.checkout-step.step-current .checkout-step-icon {
  background: var(--ldv-white);
  border-color: var(--ldv-white);
  color: var(--ldv-black);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
}
.checkout-step.step-current .checkout-step-icon .fa {
  color: var(--ldv-black);
}
.checkout-step.step-current .checkout-step-label {
  color: var(--ldv-white);
}

/* DONE: filled circle with a subtler tone, line behind is white */
.checkout-step.step-done {
  color: var(--ldv-text);
}
.checkout-step.step-done .checkout-step-icon {
  background: var(--ldv-white);
  border-color: var(--ldv-white);
  color: var(--ldv-black);
}
.checkout-step.step-done .checkout-step-icon .fa {
  color: var(--ldv-black);
}

/* PENDING (default): dim circle, muted text */
.checkout-step:not(.step-current):not(.step-done) {
  color: var(--ldv-text-dim);
}
.checkout-step:not(.step-current):not(.step-done) .checkout-step-icon {
  background: var(--ldv-glass-02);
  border-color: var(--ldv-border-subtle);
  color: var(--ldv-text-muted);
}
.checkout-step:not(.step-current):not(.step-done) .checkout-step-label {
  color: var(--ldv-text-dim);
}

/* Mobile: stack vertically with a vertical line ---------------------------- */
@media (max-width: 640px) {
  ol.checkout-flow,
  ul:has(> li.checkout-step),
  ol:has(> li.checkout-step) {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin: 20px 0 30px;
  }
  .checkout-step {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 0 0 0 8px;
    text-align: left;
  }
  .checkout-step::before,
  .checkout-step::after { display: none !important; }
  .checkout-step-label {
    max-width: none;
    margin: 0;
    text-align: left;
  }
}


/* ============================================================================
   13. ALERTS, BUBBLES, PROGRESS
   ============================================================================ */
.alert {
  padding: 18px 24px;
  border-radius: var(--ldv-r-md);
  border: 1px solid var(--ldv-border-subtle);
  background: var(--ldv-glass-04);
  color: var(--ldv-text);
  backdrop-filter: blur(10px);
  margin-bottom: 20px;
}
.alert-success {
  background: var(--ldv-success-bg);
  border-color: var(--ldv-success-bd);
  color: var(--ldv-white);
}
.alert-danger {
  background: var(--ldv-danger-bg);
  border-color: var(--ldv-danger-bd);
  color: var(--ldv-white);
}
.alert-warning {
  background: var(--ldv-warning-bg);
  border-color: var(--ldv-warning-bd);
  color: var(--ldv-white);
}
.alert-info {
  background: var(--ldv-glass-04);
  border-color: var(--ldv-border-subtle);
}

/* Hide pretix' built-in alert icons (::before pseudo-elements) */
.alert-success::before,
.alert-danger::before,
.alert-info::before,
.alert-warning::before,
.alert-legal::before {
  display: none;
}

.textbubble-success,
.textbubble-info,
.textbubble-warning,
.textbubble-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px !important;
  border-radius: var(--ldv-r-pill);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  vertical-align: middle;
  margin-right: 6px;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* Monochrome palette — BUY NOW / available and similar availability hints
   should feel like part of the design, not scream with green. */
.textbubble-success {
  background: var(--ldv-glass-06);
  color: var(--ldv-white);
  border-color: var(--ldv-border-medium);
}
.textbubble-info    { background: var(--ldv-glass-06);    color: var(--ldv-white);   border-color: var(--ldv-border-subtle); }
.textbubble-warning { background: var(--ldv-warning-bg);  color: var(--ldv-warning); border-color: var(--ldv-warning-bd); }
.textbubble-danger  { background: var(--ldv-danger-bg);   color: var(--ldv-danger);  border-color: var(--ldv-danger-bd); }

.progress {
  background: var(--ldv-glass-02);
  border-radius: var(--ldv-r-pill);
  height: 6px;
  overflow: hidden;
  box-shadow: none;
}
.progress-bar {
  background: var(--ldv-white);
  border-radius: var(--ldv-r-pill);
  box-shadow: none;
}
.progress-bar-success { background: var(--ldv-success); }
.progress-bar-danger  { background: var(--ldv-danger); }
.progress-bar-warning { background: var(--ldv-warning); }


/* ============================================================================
   14. CALENDAR
   Grid-based layout (not table defaults), with clear state distinction
   between empty days, days-with-events and hover.
   Scopes to <table class="table-calendar"> to avoid hitting the
   <div id="selected-day" class="table-calendar"> wrapper below it.
   ============================================================================ */
nav[aria-label="calendar navigation"] ul.calendar-nav,
.calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex-wrap: wrap;
  gap: 10px;
}
.calendar-nav > li {
  list-style: none;
}

table.table-calendar {
  width: 100%;
  border-collapse: separate;
  border-spacing: 6px;
  background: transparent;
  margin: 0 0 30px;
  table-layout: fixed;
}

table.table-calendar thead th {
  color: var(--ldv-text-dim);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  padding: 6px 4px 14px;
  border: none;
  text-align: center;
  background: transparent;
}

table.table-calendar tbody td {
  border: 1px solid var(--ldv-border-faint);
  border-radius: var(--ldv-r-md);
  background: var(--ldv-glass-01);
  padding: 10px 8px;
  vertical-align: top;
  height: 96px;
  transition: all var(--ldv-trans-fast);
  position: relative;
  color: var(--ldv-text);
}

/* Day number badge */
table.table-calendar tbody td.day b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--ldv-r-pill);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0;
  margin-bottom: 8px;
  color: inherit;
}

/* Empty / outside-month days — dim, not interactive */
table.table-calendar tbody td.day.no-events,
table.table-calendar tbody td.day:empty,
table.table-calendar tbody td:not(.day) {
  opacity: 0.25;
  background: transparent;
  border-color: var(--ldv-border-faint);
  cursor: default;
}

/* Active / bookable day */
table.table-calendar tbody td.day.has-events {
  background: var(--ldv-glass-04);
  border-color: var(--ldv-border-medium);
  cursor: pointer;
}
table.table-calendar tbody td.day.has-events b {
  background: var(--ldv-glass-08);
  color: var(--ldv-white);
}
table.table-calendar tbody td.day.has-events:hover,
table.table-calendar tbody td.day.has-events:focus-within {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
table.table-calendar tbody td.day.has-events:hover b {
  background: var(--ldv-black);
  color: var(--ldv-white);
}
table.table-calendar tbody td.day.has-events:hover .event-time {
  background: var(--ldv-black);
  color: var(--ldv-white);
  border-color: var(--ldv-black);
}

/* Today marker */
table.table-calendar tbody td.day.today b,
table.table-calendar tbody td.day[data-today] b {
  background: var(--ldv-white);
  color: var(--ldv-black);
}

/* Event-time pill inside a day cell */
.event-time {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ldv-text-muted);
  padding: 3px 10px;
  border-radius: var(--ldv-r-pill);
  background: var(--ldv-glass-02);
  border: 1px solid var(--ldv-border-faint);
  margin-top: 2px;
  white-space: nowrap;
  text-transform: uppercase;
  transition: all var(--ldv-trans-fast);
}

/* The selected-day panel (same .table-calendar class but a <div>) */
div.table-calendar,
#selected-day.table-calendar {
  display: block;
  padding: 20px 24px;
  background: var(--ldv-glass-02);
  border: 1px solid var(--ldv-border-subtle);
  border-radius: var(--ldv-r-lg);
  margin-bottom: 30px;
  table-layout: auto;
  border-spacing: 0;
  border-collapse: collapse;
  height: auto;
}
#selected-day.table-calendar .event-time {
  font-size: 11px;
  padding: 4px 12px;
}

/* Month-calendar TD content: day-label header + events list */
table.table-calendar tbody td .day-label {
  display: block;
  font-weight: 800;
  font-size: 0.95rem;
  color: inherit;
  margin-bottom: 6px;
}
table.table-calendar tbody td.no-day {
  background: transparent;
  border-color: transparent;
  opacity: 0.15;
}
table.table-calendar tbody td .events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
table.table-calendar tbody td .events li {
  margin: 0;
  padding: 0;
}
table.table-calendar tbody td .events .event-name {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ldv-text);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.table-calendar tbody td .events .event-status {
  font-size: 10px;
  color: var(--ldv-text-muted);
}


/* ============================================================================
   14B. WEEK CALENDAR  (fragment_week_calendar.html)
   Structure: div.week-calendar > details.weekday > summary + ul.events > li.a.event
   ============================================================================ */
.week-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin: 0 0 30px;
}
.week-calendar .weekday {
  background: var(--ldv-glass-01);
  border: 1px solid var(--ldv-border-faint);
  border-radius: var(--ldv-r-lg);
  padding: 14px 12px;
  min-height: 160px;
  transition: all var(--ldv-trans-fast);
}
.week-calendar .weekday.no-events {
  opacity: 0.4;
}
.week-calendar .weekday.has-events {
  background: var(--ldv-glass-04);
  border-color: var(--ldv-border-subtle);
}
.week-calendar .weekday.today {
  border-color: var(--ldv-white);
  background: var(--ldv-glass-06);
}
.week-calendar .weekday > summary {
  list-style: none;
  cursor: default;
  margin-bottom: 10px;
}
.week-calendar .weekday > summary::-webkit-details-marker { display: none; }
.week-calendar .weekday > summary h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ldv-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.week-calendar .weekday.today > summary h3 {
  color: var(--ldv-white);
}
.week-calendar .weekday > summary h3 time {
  font-weight: 800;
  color: var(--ldv-text);
  font-size: 1rem;
  letter-spacing: 0;
}
.week-calendar .weekday.today > summary h3 time {
  color: var(--ldv-white);
}
.week-calendar .events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.week-calendar .events li { margin: 0; }


/* ============================================================================
   14C. DAY CALENDAR  (fragment_day_calendar.html)
   Structure: div.day-calendar > h3.day-row-name + ul.day-timeline[.ticks]
   Events positioned on timeline via data-offset / data-duration (JS-driven).
   ============================================================================ */
.day-calendar {
  display: block;
  background: var(--ldv-glass-01);
  border: 1px solid var(--ldv-border-subtle);
  border-radius: var(--ldv-r-lg);
  padding: 20px 24px;
  margin: 0 0 30px;
}
.day-calendar.no-headlines .day-row-name {
  display: none;
}
.day-calendar .day-row-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ldv-text-muted);
  margin: 16px 0 10px;
}
.day-calendar .day-row-name a {
  color: var(--ldv-white);
  text-decoration: none;
}
.day-calendar .day-row-name a:hover {
  opacity: 0.7;
}
.day-calendar .day-timeline {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.day-calendar .day-timeline.ticks {
  border-bottom: 1px solid var(--ldv-border-faint);
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.day-calendar .day-timeline.ticks > li {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--ldv-text-dim);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--ldv-r-pill);
  background: var(--ldv-glass-02);
}
.day-calendar .day-timeline > li.tick {
  width: 2px;
  height: 16px;
  padding: 0;
  background: var(--ldv-border-faint);
  border-radius: 0;
}
.day-calendar .day-timeline > li:not(.tick) { flex: 0 1 auto; }


/* ============================================================================
   14D. EVENT STATE MODIFIERS  (shared by week, day, calendar views)
   Each .event anchor carries availability state classes.
   ============================================================================ */
a.event,
li > a.event {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--ldv-glass-04);
  border: 1px solid var(--ldv-border-subtle);
  border-radius: var(--ldv-r-md);
  color: var(--ldv-white);
  text-decoration: none;
  transition: all var(--ldv-trans-fast);
  line-height: 1.3;
}
a.event:hover {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
  transform: translateY(-1px);
  opacity: 1;
}
a.event .event-name {
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
}
a.event .event-name-continued {
  font-style: italic;
  color: var(--ldv-text-muted);
  font-weight: 500;
  font-size: 0.85em;
}
a.event .event-time {
  /* Inline time info inside event link — flatter than stand-alone pill */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: none;
  font-weight: 600;
}
a.event .event-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ldv-text-muted);
}
a.event:hover .event-status { color: var(--ldv-black); }

/* State: available (normal stock) */
a.event.available {
  border-color: var(--ldv-border-medium);
}
/* State: available + low stock */
a.event.available.low .event-status {
  color: var(--ldv-warning);
}
a.event.available.low:hover .event-status { color: var(--ldv-black); }
/* State: waiting list */
a.event.waitinglist {
  border-style: dashed;
  border-color: var(--ldv-border-medium);
}
a.event.waitinglist .event-status { color: var(--ldv-warning); }
/* State: reserved */
a.event.reserved {
  opacity: 0.7;
}
/* State: sold out / over */
a.event.soldout,
a.event.over {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}
a.event.soldout .event-status,
a.event.over .event-status {
  color: var(--ldv-danger);
}
/* State: soon / not yet on sale */
a.event.soon {
  opacity: 0.65;
}
a.event.soon .event-status { color: var(--ldv-text-muted); }
/* State: continued from previous day */
a.event.continued {
  background: var(--ldv-glass-02);
  border-style: dashed;
}
/* Running = general presale running */
a.event.running {
  border-color: var(--ldv-border-medium);
}


/* ============================================================================
   14E. EVENT LIST FILTER (fragment_event_list_filter.html)
   ============================================================================ */
.event-list-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
  padding: 16px 20px;
  background: var(--ldv-glass-01);
  border: 1px solid var(--ldv-border-faint);
  border-radius: var(--ldv-r-md);
  align-items: end;
}
.event-list-filter-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  flex: 1 1 auto;
}
.event-list-filter-form .form-group {
  margin-bottom: 0;
  flex: 1 1 180px;
  min-width: 0;
}
.event-list-filter-form label {
  display: block;
  padding-top: 0;
  margin-bottom: 6px;
}


/* ============================================================================
   14F. ORGANIZER INDEX EXTRAS
   (.panel-subhead, .blank-after, .event-is-remote)
   ============================================================================ */
.panel-subhead {
  color: var(--ldv-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 6px;
}
.blank-after { margin-bottom: 30px; }
.blank-after + * { margin-top: 0; }

.event-is-remote::after {
  content: "•";
  display: inline-block;
  margin-left: 8px;
  color: var(--ldv-text-dim);
}


/* ============================================================================
   15. MODALS (legacy .modal-wrapper + native <dialog>)
   ============================================================================ */
.modal-wrapper {
  position: fixed;
  inset: 0;
  background: var(--ldv-overlay-80);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900000;
  padding: 20px;
}
.modal-wrapper[hidden] { display: none; }

.modal-card,
dialog.modal-card {
  background: var(--ldv-black-soft);
  border: 1px solid var(--ldv-border-medium);
  border-radius: var(--ldv-r-xl);
  padding: 36px 32px;
  max-width: 500px;
  width: 100%;
  box-shadow: var(--ldv-shadow-card);
  color: var(--ldv-text);
  text-align: center;
}
dialog.modal-card { margin: auto; }
dialog.modal-card::backdrop {
  background: var(--ldv-overlay-80);
  backdrop-filter: blur(12px);
}
dialog.modal-card[open] {
  animation: ldv-modal-in 0.3s var(--ldv-ease);
}
@keyframes ldv-modal-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reset Bootstrap's form-horizontal side-effects inside modals.
   pretix uses <form class="modal-card-inner form-horizontal"> as the
   outer wrapper of its dialogs, which otherwise inherits column/label
   layout rules that make the icon column appear as a vertical white bar. */
.modal-card-inner,
.modal-card-inner.form-horizontal,
.modal-card .form-horizontal,
dialog.modal-card > form {
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  background: none;
}
.modal-card .form-horizontal .form-group,
.modal-card-inner .form-group {
  margin-left: 0;
  margin-right: 0;
}
.modal-card .form-horizontal .control-label,
.modal-card-inner .control-label {
  text-align: center;
  padding-top: 0;
}

.modal-card-icon {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 2.6em;
  color: var(--ldv-white);
  margin: 0 auto 20px;
  line-height: 1;
}
dialog.modal-card .modal-card-icon,
.dialog.modal-card .modal-card-icon {
  background: transparent;
}
.modal-card-icon .fa,
.modal-card-icon .big-icon {
  display: inline-block;
  font-size: 1em;
  width: auto;
  height: auto;
  line-height: 1;
  background: none !important;
}

/* Override the ::before pseudo-element if Font Awesome didn't load */
.modal-card-icon .fa-cog::before,
.modal-card-icon .fa::before {
  display: inline-block;
}

.modal-card-content { text-align: center; }

.modal-card-title,
.modal-card h2,
.modal-card h3 {
  text-align: center;
  font-size: 1.35rem;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--ldv-white);
}
.modal-card-description,
.modal-card p.text,
.modal-card p {
  color: var(--ldv-text-muted);
  margin-bottom: 18px;
  text-transform: none;
  line-height: 1.55;
}

.modal-card-confirm {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 25px 0 0;
}

dialog.inline-dialog {
  position: static;
  display: block;
  background: var(--ldv-success-bg);
  border: 1px solid var(--ldv-success-bd);
  border-radius: var(--ldv-r-md);
  padding: 14px 20px;
  margin: 15px 0;
  color: var(--ldv-white);
  box-shadow: none;
}
dialog.inline-dialog::backdrop { display: none; }
#cart-extend-confirmation-dialog > form > p {
  margin-bottom: 0 !important;
}

#cookie-consent-modal {
  background: var(--ldv-black-soft);
  border: 1px solid var(--ldv-border-medium);
  border-radius: var(--ldv-r-xl);
  color: var(--ldv-text);
}
#cookie-consent-modal::backdrop {
  background: var(--ldv-overlay-95);
  backdrop-filter: blur(20px);
}


/* ============================================================================
   16. EVENT INFO ROWS
   ============================================================================ */
.info-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ldv-border-faint);
}
.info-row:last-child { border-bottom: none; }
.info-row-icon {
  color: var(--ldv-text-muted);
  font-size: 1.2em !important;
  min-width: 32px !important;
  padding-top: 2px !important;
  position: relative !important;
  top: unset !important;
  left: unset !important;
}
.info-row-content {
  flex: 1;
  color: var(--ldv-text);
}
.info-row-content p { margin: 0; }
.info-row p { margin-left: 0; }


/* ============================================================================
   17. ORDER DETAILS / DOWNLOAD
   ============================================================================ */
.order-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 20px 0 30px;
}
.order-details dt {
  color: var(--ldv-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.78rem;
  align-self: center;
}
.order-details dd {
  margin: 0;
  color: var(--ldv-text);
}

.info-download {
  margin: 30px 0;
  padding: 24px;
  background: var(--ldv-glass-02);
  border: 1px solid var(--ldv-border-subtle);
  border-radius: var(--ldv-r-lg);
  text-align: center;
}
.download-btn-form .btn { margin: 5px; }


/* ============================================================================
   18. LOADING / SPINNER
   ============================================================================ */
.rotating,
.fa-spin {
  animation: ldv-spin 1.2s linear infinite;
  display: inline-block;
}
@keyframes ldv-spin {
  to { transform: rotate(360deg); }
}


/* ============================================================================
   19. FOOTER
   ============================================================================ */
footer,
body > footer {
  background: var(--ldv-black);
  border-top: 1px solid var(--ldv-border-subtle);
  padding: 60px 20px 30px;
  margin-top: 80px;
  color: var(--ldv-text-muted);
}
footer a { color: var(--ldv-white); }
footer a:hover {
  color: var(--ldv-text-muted);
  opacity: 1;
}
footer nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ============================================================================
   20. TABLES
   ============================================================================ */
table { width: 100%; color: var(--ldv-text); }
table.table { background: transparent; }
table.table th,
table.table td {
  padding: 14px 16px;
  border-top: 1px solid var(--ldv-border-faint);
  background: transparent;
}
table.table th {
  color: var(--ldv-text-muted);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border-top: none;
  border-bottom: 1px solid var(--ldv-border-subtle);
}
table.table-striped tbody tr:nth-of-type(odd) td {
  background: var(--ldv-glass-01);
}
table.table-hover tbody tr:hover td {
  background: var(--ldv-glass-04);
}


/* ============================================================================
   21. UTILITY / MISC
   ============================================================================ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.on-focus-visible:focus,
.on-focus-visible:focus-visible {
  position: static !important;
  width: auto; height: auto;
  clip: auto;
  overflow: visible;
  margin: 10px 0;
}

.pull-left, .pull-left.flip { float: left; }
.pull-right, .pull-right.flip { float: right; }

.helper-display-block { display: block; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ldv-white);
  outline-offset: 3px;
  border-radius: var(--ldv-r-sm);
}
.btn:focus-visible {
  outline-offset: 4px;
  border-radius: var(--ldv-r-pill);
}


/* ============================================================================
   22. SCROLLBAR
   ============================================================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ldv-border-strong) var(--ldv-black);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--ldv-black);
}
::-webkit-scrollbar-thumb {
  background: var(--ldv-border-medium);
  border-radius: var(--ldv-r-pill);
  border: 2px solid var(--ldv-black);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ldv-border-strong);
}


/* ============================================================================
   23. RESPONSIVE
   ============================================================================ */
@media (max-width: 991px) {
  .main-box    { padding-top: 20px; padding-bottom: 40px; }
  .panel-heading { padding: 18px 22px; }
  .panel-body    { padding: 22px !important; }
}/* ============================================================================
   LA DOLCE VITA — PRETIX CUSTOM THEME
   Monochrome Dark/Glassmorphism adapted from la-dolce-vita-website
   Font-family is NOT set here — configure it in the pretix backend instead.
   ============================================================================ */


/* ============================================================================
   1. DESIGN TOKENS
   ============================================================================ */
:root {
  /* Override pretix brand variables */
  --pretix-brand-primary:        #ffffff;
  --pretix-brand-primary-darker: #e6e6e6;
  --pretix-brand-primary-lighter:#ffffff;

  /* Base */
  --ldv-black:        #000000;
  --ldv-black-soft:   #111111;
  --ldv-white:        #ffffff;
  --ldv-white-dim:    #f0f0f0;

  /* Glass surface fills */
  --ldv-glass-01:     rgba(255,255,255,0.04);
  --ldv-glass-02:     rgba(255,255,255,0.06);
  --ldv-glass-04:     rgba(255,255,255,0.08);
  --ldv-glass-06:     rgba(255,255,255,0.10);
  --ldv-glass-08:     rgba(255,255,255,0.15);

  /* Borders */
  --ldv-border-faint:   rgba(255,255,255,0.06);
  --ldv-border-subtle:  rgba(255,255,255,0.10);
  --ldv-border-medium:  rgba(255,255,255,0.20);
  --ldv-border-strong:  rgba(255,255,255,0.30);
  --ldv-border-focus:   rgba(255,255,255,0.50);

  /* Text */
  --ldv-text:         #ffffff;
  --ldv-text-muted:   rgba(255,255,255,0.60);
  --ldv-text-dim:     rgba(255,255,255,0.40);
  --ldv-text-faint:   rgba(255,255,255,0.30);

  /* Overlays */
  --ldv-overlay-40:   rgba(0,0,0,0.40);
  --ldv-overlay-60:   rgba(0,0,0,0.60);
  --ldv-overlay-80:   rgba(0,0,0,0.80);
  --ldv-overlay-95:   rgba(0,0,0,0.95);

  /* Semantic (subtle — no loud colors in this design) */
  --ldv-success:      #4a9060;
  --ldv-success-bg:   rgba(74,144,96,0.12);
  --ldv-success-bd:   rgba(74,144,96,0.35);
  --ldv-danger:       #d77272;
  --ldv-danger-bg:    rgba(215,114,114,0.12);
  --ldv-danger-bd:    rgba(215,114,114,0.35);
  --ldv-warning:      #e6b549;
  --ldv-warning-bg:   rgba(230,181,73,0.12);
  --ldv-warning-bd:   rgba(230,181,73,0.35);

  /* Radii */
  --ldv-r-xs:  4px;
  --ldv-r-sm:  8px;
  --ldv-r-md:  16px;
  --ldv-r-lg:  20px;
  --ldv-r-xl:  32px;
  --ldv-r-pill: 9999px;

  /* Shadows */
  --ldv-shadow-card:     0 20px 50px rgba(0,0,0,0.50);
  --ldv-shadow-floating: 0 15px 35px rgba(0,0,0,0.40);
  --ldv-shadow-focus:    0 0 20px rgba(255,255,255,0.10);
  --ldv-shadow-active:   0 5px 20px rgba(255,255,255,0.20);

  /* Motion */
  --ldv-ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ldv-trans:      0.3s var(--ldv-ease);
  --ldv-trans-fast: 0.2s var(--ldv-ease);
}


/* ============================================================================
   2. BASE / BODY / LINKS
   ============================================================================ */
html,
body {
  background: var(--ldv-black);
  color: var(--ldv-text);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--ldv-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--ldv-trans-fast);
}
a:hover,
a:focus {
  opacity: 0.65;
  color: var(--ldv-white);
}
a.no-underline,
.no-underline,
.no-underline:hover {
  text-decoration: none;
}

hr {
  border: 0;
  border-top: 1px solid var(--ldv-border-subtle);
  margin: 40px 0;
}

::selection {
  background: var(--ldv-white);
  color: var(--ldv-black);
}


/* ============================================================================
   3. TYPOGRAPHY
   ============================================================================ */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  color: var(--ldv-text);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 0;
}

h1, .h1 {
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-size: clamp(2rem, 6vw, 3.125rem); /* max 50px */
  margin-bottom: 0.4em;
}

h2, .h2 {
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 0.6em;
}

h3, .h3 {
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin-bottom: 0.5em;
  letter-spacing: 0;
}

h4, .h4 {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
}

h5, h6 {
  color: var(--ldv-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
}

p {
  line-height: 1.65;
  color: var(--ldv-text);
}

.lead {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ldv-text);
  line-height: 1.6;
}

strong, b {
  font-weight: 700;
  color: var(--ldv-text);
}

small, .small {
  font-size: 0.875em;
  color: var(--ldv-text-muted);
}

.text-muted,
.text-muted time {
  color: var(--ldv-text-muted) !important;
}

.text-right  { text-align: right; }
.text-left   { text-align: left; }
.text-center { text-align: center; }


/* ============================================================================
   4. LAYOUT / CONTAINERS
   ============================================================================ */
.container,
.container-fluid {
  background: transparent;
}

.main-box {
  padding-top: 30px;
  padding-bottom: 60px;
}

.page-header {
  border-bottom: 1px solid var(--ldv-border-subtle);
  padding-bottom: 20px;
  margin: 0 0 40px;
}

.page-header > h1,
.page-header > h2 {
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.04em;
}

/* Page-header left column: centre the content, drop the Bootstrap float */
.page-header > .pull-left,
.page-header > .pull-left.flip {
  float: none !important;
  text-align: center;
}

.organizer-logo {
  max-width: 300px;
  margin-bottom: 20px;
}

.page-header-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.clearfix::after { content: ""; display: table; clear: both; }


/* ============================================================================
   5. BUTTONS
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--ldv-r-pill);
  border: 1px solid transparent;
  padding: 12px 28px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--ldv-trans-fast);
  box-shadow: none;
  white-space: nowrap;
}

.btn:hover,
.btn:focus {
  text-decoration: none;
  transform: translateY(-2px);
  outline: none;
}

.btn:active { transform: translateY(0); }

.btn:disabled,
.btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* Primary — solid white on black, the main CTA */
.btn-primary,
.btn-primary:focus {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
}
.btn-primary:hover {
  background: var(--ldv-white-dim);
  color: var(--ldv-black);
  border-color: var(--ldv-white-dim);
}

/* Default / Secondary — glass */
.btn-default,
.btn-secondary {
  background: var(--ldv-glass-04);
  color: var(--ldv-white);
  border-color: var(--ldv-border-subtle);
  backdrop-filter: blur(10px);
}
.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--ldv-glass-08);
  color: var(--ldv-white);
  border-color: var(--ldv-border-medium);
  box-shadow: none;
}
.btn-default.active,
.btn-default[aria-current="page"] {
  background: var(--ldv-glass-08);
  color: var(--ldv-white);
  border-color: var(--ldv-border-strong);
  box-shadow: none;
}

/* Success */
.btn-success,
.btn-success:focus {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
}
.btn-success:hover {
  background: var(--ldv-success);
  color: var(--ldv-white);
  border-color: var(--ldv-success);
}

/* Danger */
.btn-danger {
  background: var(--ldv-danger-bg);
  color: var(--ldv-danger);
  border-color: var(--ldv-danger-bd);
}
.btn-danger:hover,
.btn-danger:focus {
  background: var(--ldv-danger);
  color: var(--ldv-white);
  border-color: var(--ldv-danger);
}

/* Warning */
.btn-warning {
  background: var(--ldv-warning-bg);
  color: var(--ldv-warning);
  border-color: var(--ldv-warning-bd);
}
.btn-warning:hover {
  background: var(--ldv-warning);
  color: var(--ldv-black);
  border-color: var(--ldv-warning);
}

/* Link-style */
.btn-link,
.btn-mini.btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--ldv-white);
  padding: 6px 10px;
}
.btn-link:hover,
.btn-link:focus {
  opacity: 0.65;
  transform: none;
  text-decoration: underline;
  background: transparent;
}

/* Sizes */
.btn-lg {
  padding: 18px 40px;
  font-size: 13px;
}
.btn-sm {
  padding: 8px 18px;
  font-size: 11px;
}
.btn-xs,
.btn-mini {
  padding: 5px 12px;
  font-size: 10px;
}
.btn-block {
  display: flex;
  width: 100%;
}

/* Button groups */
.btn-group {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-group > .btn {
  border-radius: var(--ldv-r-pill) !important;
}

.input-group .input-group-btn .btn {
  border-radius: 0 var(--ldv-r-pill) var(--ldv-r-pill) 0;
  padding-left: 18px;
  padding-right: 24px;
}


/* ============================================================================
   6. FORMS
   ============================================================================ */
.form-control {
  background: var(--ldv-glass-06);
  backdrop-filter: blur(10px);
  border: 1px solid var(--ldv-border-medium);
  border-radius: var(--ldv-r-pill);
  color: var(--ldv-white);
  padding: 13px 22px;
  font-size: 0.95rem;
  height: auto;
  box-shadow: none;
  transition: all var(--ldv-trans);
}
.form-control::placeholder {
  color: var(--ldv-text-dim);
}
.form-control:focus {
  background: var(--ldv-glass-08);
  border-color: var(--ldv-border-focus);
  box-shadow: var(--ldv-shadow-focus);
  outline: none;
  color: var(--ldv-white);
}
.form-control[readonly],
.form-control:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

textarea.form-control {
  border-radius: var(--ldv-r-md);
  resize: vertical;
  padding: 16px 20px;
  min-height: 5em;
}

select.form-control,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23ffffff' stroke-opacity='0.7' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 22px center;
  padding-right: 50px;
}
select.form-control option {
  background: var(--ldv-black-soft);
  color: var(--ldv-white);
}

.control-label,
.form-group > label {
  color: var(--ldv-text);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-top: 15px;
}
.control-label.label-empty { padding-top: 15px; }

.help-block {
  color: var(--ldv-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-top: 8px;
}

.form-group { margin-bottom: 20px; }

.radio,
.checkbox {
  padding-left: 0;
  margin: 8px 0;
}
.radio label,
.checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-left: 0;
  cursor: pointer;
  color: var(--ldv-text);
  font-weight: 500;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
  accent-color: var(--ldv-white);
  width: 18px;
  height: 18px;
  margin: 0;
  position: static;
  cursor: pointer;
}

.input-group {
  display: flex;
  align-items: stretch;
}
.input-group .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group .form-control:last-child {
  border-radius: var(--ldv-r-pill);
}

.has-error .form-control,
.form-control.has-error,
.form-control[aria-invalid="true"] {
  border-color: var(--ldv-danger);
}
.has-error .help-block,
.has-error .control-label {
  color: var(--ldv-danger);
}


/* ============================================================================
   7. QUANTITY SPINNER
   ============================================================================ */
.input-item-count-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
}
.input-item-count {
  width: 64px;
  height: 42px;
  text-align: center !important;
  padding: 0 8px !important;
  border-radius: var(--ldv-r-pill) !important;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  -moz-appearance: textfield;
  appearance: textfield;
}
/* Hide native spin-buttons that would push the number off-centre */
.input-item-count::-webkit-outer-spin-button,
.input-item-count::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.input-item-count-dec,
.input-item-count-inc {
  width: 42px;
  height: 42px;
  border-radius: 50% !important;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Override btn inline-flex gap */
  gap: 0;
  letter-spacing: 0;
}


/* ============================================================================
   8. PANELS / CARDS / DETAILS
   ============================================================================ */
.panel,
.panel.panel-default,
.panel.panel-primary {
  background: var(--ldv-glass-01);
  backdrop-filter: blur(15px);
  border: 1px solid var(--ldv-border-subtle);
  border-radius: var(--ldv-r-xl);
  box-shadow: none;
  margin-bottom: 30px;
  overflow: hidden;
}

.panel-heading,
details.panel > summary.panel-heading {
  background: transparent;
  color: var(--ldv-white);
  border-bottom: 1px solid var(--ldv-border-subtle);
  padding: 22px 30px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.panel-heading::-webkit-details-marker,
summary.panel-heading::-webkit-details-marker {
  display: none;
}
.panel-heading h2,
.panel-heading h3,
.panel-heading .panel-title {
  margin: 0;
  font-size: inherit;
  color: inherit;
}

details.panel > summary.panel-heading::after {
  content: "";
  position: absolute;
  right: 30px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ldv-text-muted);
  border-bottom: 2px solid var(--ldv-text-muted);
  transform: translateY(-75%) rotate(45deg);
  transition: transform var(--ldv-trans-fast);
}
details.panel[open] > summary.panel-heading::after {
  transform: translateY(-25%) rotate(-135deg);
}

.panel-body {
  padding: 20px 30px !important;
  color: var(--ldv-text);
  background: transparent;
}

.firstchild-in-panel {
  padding-top: 0;
}


/* ============================================================================
   9. CART
   ============================================================================ */
.cart,
aside .panel.cart,
details.panel.cart {
  background: var(--ldv-glass-02);
}

.cart-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 18px 0;
  border-bottom: 1px solid var(--ldv-border-faint);
  margin: 0;
}
.cart-row:last-child { border-bottom: none; }

.cart-row .product {
  color: var(--ldv-text);
  font-weight: 600;
}
.cart-row .item-description {
  color: var(--ldv-text);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.cart-row .singleprice,
.cart-row .totalprice,
.cart-row .price {
  color: var(--ldv-text);
  font-weight: 600;
  text-align: right;
}

.cart-rowgroup-total .cart-row,
.cart-row.total {
  border-top: 2px solid var(--ldv-border-medium);
  border-bottom: none;
  padding-top: 24px;
  padding-bottom: 10px;
  font-size: 1.1em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.collapse-lines {
  color: var(--ldv-text-muted);
  font-size: 0.9rem;
  margin-top: 4px;
}
.cart-icon-details { color: var(--ldv-text-muted); }


/* ============================================================================
   10. PRODUCT LISTS / ITEM CATEGORIES
   ============================================================================ */
.item-category {
  margin-bottom: 40px;
}
.item-category > h3 {
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: var(--ldv-text-muted);
  text-transform: uppercase;
  font-weight: 800;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ldv-border-subtle);
}

.product-row {
  padding: 24px 0;
  border-bottom: 1px solid var(--ldv-border-faint);
  margin: 0;
  transition: background var(--ldv-trans-fast);
}
.product-row:last-child { border-bottom: none; }
.product-row > div { padding-top: 4px; }

.product-row h3,
.product-row .item-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 8px;
  text-transform: none;
}
.product-row .item-description {
  color: var(--ldv-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 12px;
}


/* ============================================================================
   11. EVENT LISTS (organizer page, calendar)
   ============================================================================ */
.event-list.full-width-list article.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 22px 24px;
  margin: 0 0 14px;
  background: var(--ldv-glass-02);
  border: 1px solid var(--ldv-border-subtle);
  border-radius: var(--ldv-r-md);
  transition: all var(--ldv-trans-fast);
}
.event-list.full-width-list article.row:hover,
.event-list.full-width-list article.row:focus-within {
  background: var(--ldv-glass-06);
  border-color: var(--ldv-border-medium);
  transform: translateY(-2px);
  box-shadow: var(--ldv-shadow-floating);
}
.event-list.full-width-list article.row:last-child { margin-bottom: 0; }

.event-list.full-width-list article > h3 {
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}
.event-list.full-width-list article > h3 a {
  color: var(--ldv-white);
  text-decoration: none;
}
.event-list.full-width-list article > h3 a:hover {
  opacity: 0.85;
}

/* Date/time column inside event list row */
.event-list.full-width-list article.row > p,
.event-list.full-width-list article.row > time {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ldv-text-muted);
}
.event-list.full-width-list article.row > p time {
  color: var(--ldv-text);
  font-weight: 600;
}

/* Disable alternating-rows shading — we now have card rows */
.event-list.alternating-rows article.row:nth-of-type(even) {
  background: var(--ldv-glass-02);
}


/* ============================================================================
   12. CHECKOUT STEPS — progress-bar style
   Structure (pretix):
     <ol class="checkout-flow">
       <li class="checkout-step [step-current|step-done|]">
         <div class="checkout-step-icon"><span class="fa fa-*"></span></div>
         <div class="checkout-step-label">…</div>
       </li>…
     </ol>
   Design: icon circles sit on a horizontal progress line. Labels go below.
   ============================================================================ */
ol.checkout-flow,
ul:has(> li.checkout-step),
ol:has(> li.checkout-step) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 30px 0 50px;
  gap: 0;
  position: relative;
  counter-reset: checkout-step;
}

/* Single step = vertical stack (icon on top, label below),
   distributed evenly across the row. */
.checkout-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  margin: 0;
  min-width: 0;
  color: var(--ldv-text-muted);
  position: relative;
  text-align: center;
  transition: color var(--ldv-trans-fast);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  white-space: normal;
}

/* Horizontal progress line between icon circles ----------------------------- */
.checkout-step::before,
.checkout-step::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 22px;                       /* vertical center of the 44px icon circle */
  height: 2px;
  background: var(--ldv-border-subtle) !important;
  z-index: 0;
  border: 0 !important;
}
/* Left half of the connector: from step start to the icon centre. */
.checkout-step::before {
  left: 0;
  width: calc(50% - 26px);         /* half the step, minus half the icon */
}
/* Right half. */
.checkout-step::after {
  right: 0;
  width: calc(50% - 26px);
}
/* No connector on the outer edges (first-left, last-right). */
.checkout-step:first-child::before,
.checkout-step:last-child::after {
  display: none !important;
}
/* "done" steps fill their connectors solid white. */
.checkout-step.step-done::before,
.checkout-step.step-done::after,
.checkout-step.step-current::before {
  background: var(--ldv-white) !important;
}

/* Icon disc — always visible, always centred on the line ------------------- */
.checkout-step-icon {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ldv-glass-04);
  border: 1px solid var(--ldv-border-medium);
  color: var(--ldv-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all var(--ldv-trans-fast);
}
.checkout-step-icon .fa {
  font-size: 15px;
  line-height: 1;
}

/* Label below the icon ----------------------------------------------------- */
.checkout-step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  line-height: 1.3;
  max-width: 14ch;
  margin: 0 auto;
}
.checkout-step-label .sr-only { display: none; }

/* --- States --------------------------------------------------------------- */
/* CURRENT: solid white circle, black icon, white label underneath */
.checkout-step.step-current {
  color: var(--ldv-white);
}
.checkout-step.step-current .checkout-step-icon {
  background: var(--ldv-white);
  border-color: var(--ldv-white);
  color: var(--ldv-black);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
}
.checkout-step.step-current .checkout-step-icon .fa {
  color: var(--ldv-black);
}
.checkout-step.step-current .checkout-step-label {
  color: var(--ldv-white);
}

/* DONE: filled circle with a subtler tone, line behind is white */
.checkout-step.step-done {
  color: var(--ldv-text);
}
.checkout-step.step-done .checkout-step-icon {
  background: var(--ldv-white);
  border-color: var(--ldv-white);
  color: var(--ldv-black);
}
.checkout-step.step-done .checkout-step-icon .fa {
  color: var(--ldv-black);
}

/* PENDING (default): dim circle, muted text */
.checkout-step:not(.step-current):not(.step-done) {
  color: var(--ldv-text-dim);
}
.checkout-step:not(.step-current):not(.step-done) .checkout-step-icon {
  background: var(--ldv-glass-02);
  border-color: var(--ldv-border-subtle);
  color: var(--ldv-text-muted);
}
.checkout-step:not(.step-current):not(.step-done) .checkout-step-label {
  color: var(--ldv-text-dim);
}

/* Mobile: stack vertically with a vertical line ---------------------------- */
@media (max-width: 640px) {
  ol.checkout-flow,
  ul:has(> li.checkout-step),
  ol:has(> li.checkout-step) {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin: 20px 0 30px;
  }
  .checkout-step {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 0 0 0 8px;
    text-align: left;
  }
  .checkout-step::before,
  .checkout-step::after { display: none !important; }
  .checkout-step-label {
    max-width: none;
    margin: 0;
    text-align: left;
  }
}


/* ============================================================================
   13. ALERTS, BUBBLES, PROGRESS
   ============================================================================ */
.alert {
  padding: 18px 24px;
  border-radius: var(--ldv-r-md);
  border: 1px solid var(--ldv-border-subtle);
  background: var(--ldv-glass-04);
  color: var(--ldv-text);
  backdrop-filter: blur(10px);
  margin-bottom: 20px;
}
.alert-success {
  background: var(--ldv-success-bg);
  border-color: var(--ldv-success-bd);
  color: var(--ldv-white);
  overflow: hidden;
}
.alert-danger {
  background: var(--ldv-danger-bg);
  border-color: var(--ldv-danger-bd);
  color: var(--ldv-white);
}
.alert-warning {
  background: var(--ldv-warning-bg);
  border-color: var(--ldv-warning-bd);
  color: var(--ldv-white);
}
.alert-info {
  background: var(--ldv-glass-04);
  border-color: var(--ldv-border-subtle);
}

/* Hide pretix' built-in alert icons (::before pseudo-elements) */
.alert-success::before,
.alert-danger::before,
.alert-info::before,
.alert-warning::before,
.alert-legal::before {
  display: none;
}

.textbubble-success,
.textbubble-info,
.textbubble-warning,
.textbubble-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px !important;
  border-radius: var(--ldv-r-pill);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  vertical-align: middle;
  margin-right: 6px;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* Monochrome palette — BUY NOW / available and similar availability hints
   should feel like part of the design, not scream with green. */
.textbubble-success {
  background: var(--ldv-glass-06);
  color: var(--ldv-white);
  border-color: var(--ldv-border-medium);
}
.textbubble-info    { background: var(--ldv-glass-06);    color: var(--ldv-white);   border-color: var(--ldv-border-subtle); }
.textbubble-warning { background: var(--ldv-warning-bg);  color: var(--ldv-warning); border-color: var(--ldv-warning-bd); }
.textbubble-danger  { background: var(--ldv-danger-bg);   color: var(--ldv-danger);  border-color: var(--ldv-danger-bd); }

.progress {
  background: var(--ldv-glass-02);
  border-radius: var(--ldv-r-pill);
  height: 6px;
  overflow: hidden;
  box-shadow: none;
}
.progress-bar {
  background: var(--ldv-white);
  border-radius: var(--ldv-r-pill);
  box-shadow: none;
}
.progress-bar-success { background: var(--ldv-success); }
.progress-bar-danger  { background: var(--ldv-danger); }
.progress-bar-warning { background: var(--ldv-warning); }


/* ============================================================================
   14. CALENDAR
   Grid-based layout (not table defaults), with clear state distinction
   between empty days, days-with-events and hover.
   Scopes to <table class="table-calendar"> to avoid hitting the
   <div id="selected-day" class="table-calendar"> wrapper below it.
   ============================================================================ */
nav[aria-label="calendar navigation"] ul.calendar-nav,
.calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex-wrap: wrap;
  gap: 10px;
}
.calendar-nav > li {
  list-style: none;
}

table.table-calendar {
  width: 100%;
  border-collapse: separate;
  border-spacing: 6px;
  background: transparent;
  margin: 0 0 30px;
  table-layout: fixed;
}

table.table-calendar thead th {
  color: var(--ldv-text-dim);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  padding: 6px 4px 14px;
  border: none;
  text-align: center;
  background: transparent;
}

table.table-calendar tbody td {
  border: 1px solid var(--ldv-border-faint);
  border-radius: var(--ldv-r-md);
  background: var(--ldv-glass-01);
  padding: 10px 8px;
  vertical-align: top;
  height: 96px;
  transition: all var(--ldv-trans-fast);
  position: relative;
  color: var(--ldv-text);
}

/* Day number badge */
table.table-calendar tbody td.day b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--ldv-r-pill);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0;
  margin-bottom: 8px;
  color: inherit;
}

/* Empty / outside-month days — dim, not interactive */
table.table-calendar tbody td.day.no-events,
table.table-calendar tbody td.day:empty,
table.table-calendar tbody td:not(.day) {
  opacity: 0.25;
  background: transparent;
  border-color: var(--ldv-border-faint);
  cursor: default;
}

/* Active / bookable day */
table.table-calendar tbody td.day.has-events {
  background: var(--ldv-glass-04);
  border-color: var(--ldv-border-medium);
  cursor: pointer;
}
table.table-calendar tbody td.day.has-events b {
  background: var(--ldv-glass-08);
  color: var(--ldv-white);
}
table.table-calendar tbody td.day.has-events:hover,
table.table-calendar tbody td.day.has-events:focus-within {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
table.table-calendar tbody td.day.has-events:hover b {
  background: var(--ldv-black);
  color: var(--ldv-white);
}
table.table-calendar tbody td.day.has-events:hover .event-time {
  background: var(--ldv-black);
  color: var(--ldv-white);
  border-color: var(--ldv-black);
}

/* Today marker */
table.table-calendar tbody td.day.today b,
table.table-calendar tbody td.day[data-today] b {
  background: var(--ldv-white);
  color: var(--ldv-black);
}

/* Event-time pill inside a day cell */
.event-time {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ldv-text-muted);
  padding: 3px 10px;
  border-radius: var(--ldv-r-pill);
  background: var(--ldv-glass-02);
  border: 1px solid var(--ldv-border-faint);
  margin-top: 2px;
  white-space: nowrap;
  text-transform: uppercase;
  transition: all var(--ldv-trans-fast);
}

/* The selected-day panel (same .table-calendar class but a <div>) */
div.table-calendar,
#selected-day.table-calendar {
  display: block;
  padding: 20px 24px;
  background: var(--ldv-glass-02);
  border: 1px solid var(--ldv-border-subtle);
  border-radius: var(--ldv-r-lg);
  margin-bottom: 30px;
  table-layout: auto;
  border-spacing: 0;
  border-collapse: collapse;
  height: auto;
}
#selected-day.table-calendar .event-time {
  font-size: 11px;
  padding: 4px 12px;
}

/* Month-calendar TD content: day-label header + events list */
table.table-calendar tbody td .day-label {
  display: block;
  font-weight: 800;
  font-size: 0.95rem;
  color: inherit;
  margin-bottom: 6px;
}
table.table-calendar tbody td.no-day {
  background: transparent;
  border-color: transparent;
  opacity: 0.15;
}
table.table-calendar tbody td .events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
table.table-calendar tbody td .events li {
  margin: 0;
  padding: 0;
}
table.table-calendar tbody td .events .event-name {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ldv-text);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.table-calendar tbody td .events .event-status {
  font-size: 10px;
  color: var(--ldv-text-muted);
}


/* ============================================================================
   14B. WEEK CALENDAR  (fragment_week_calendar.html)
   Structure: div.week-calendar > details.weekday > summary + ul.events > li.a.event
   ============================================================================ */
.week-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin: 0 0 30px;
}
.week-calendar .weekday {
  background: var(--ldv-glass-01);
  border: 1px solid var(--ldv-border-faint);
  border-radius: var(--ldv-r-lg);
  padding: 14px 12px;
  min-height: 160px;
  transition: all var(--ldv-trans-fast);
}
.week-calendar .weekday.no-events {
  opacity: 0.4;
}
.week-calendar .weekday.has-events {
  background: var(--ldv-glass-04);
  border-color: var(--ldv-border-subtle);
}
.week-calendar .weekday.today {
  border-color: var(--ldv-white);
  background: var(--ldv-glass-06);
}
.week-calendar .weekday > summary {
  list-style: none;
  cursor: default;
  margin-bottom: 10px;
}
.week-calendar .weekday > summary::-webkit-details-marker { display: none; }
.week-calendar .weekday > summary h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ldv-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.week-calendar .weekday.today > summary h3 {
  color: var(--ldv-white);
}
.week-calendar .weekday > summary h3 time {
  font-weight: 800;
  color: var(--ldv-text);
  font-size: 1rem;
  letter-spacing: 0;
}
.week-calendar .weekday.today > summary h3 time {
  color: var(--ldv-white);
}
.week-calendar .events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.week-calendar .events li { margin: 0; }


/* ============================================================================
   14C. DAY CALENDAR  (fragment_day_calendar.html)
   Structure: div.day-calendar > h3.day-row-name + ul.day-timeline[.ticks]
   Events positioned on timeline via data-offset / data-duration (JS-driven).
   ============================================================================ */
.day-calendar {
  display: block;
  background: var(--ldv-glass-01);
  border: 1px solid var(--ldv-border-subtle);
  border-radius: var(--ldv-r-lg);
  padding: 20px 24px;
  margin: 0 0 30px;
}
.day-calendar.no-headlines .day-row-name {
  display: none;
}
.day-calendar .day-row-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ldv-text-muted);
  margin: 16px 0 10px;
}
.day-calendar .day-row-name a {
  color: var(--ldv-white);
  text-decoration: none;
}
.day-calendar .day-row-name a:hover {
  opacity: 0.7;
}
.day-calendar .day-timeline {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.day-calendar .day-timeline.ticks {
  border-bottom: 1px solid var(--ldv-border-faint);
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.day-calendar .day-timeline.ticks > li {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--ldv-text-dim);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--ldv-r-pill);
  background: var(--ldv-glass-02);
}
.day-calendar .day-timeline > li.tick {
  width: 2px;
  height: 16px;
  padding: 0;
  background: var(--ldv-border-faint);
  border-radius: 0;
}
.day-calendar .day-timeline > li:not(.tick) { flex: 0 1 auto; }


/* ============================================================================
   14D. EVENT STATE MODIFIERS  (shared by week, day, calendar views)
   Each .event anchor carries availability state classes.
   ============================================================================ */
a.event,
li > a.event {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--ldv-glass-04);
  border: 1px solid var(--ldv-border-subtle);
  border-radius: var(--ldv-r-md);
  color: var(--ldv-white);
  text-decoration: none;
  transition: all var(--ldv-trans-fast);
  line-height: 1.3;
}
a.event:hover {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
  transform: translateY(-1px);
  opacity: 1;
}
a.event .event-name {
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
}
a.event .event-name-continued {
  font-style: italic;
  color: var(--ldv-text-muted);
  font-weight: 500;
  font-size: 0.85em;
}
a.event .event-time {
  /* Inline time info inside event link — flatter than stand-alone pill */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: none;
  font-weight: 600;
}
a.event .event-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ldv-text-muted);
}
a.event:hover .event-status { color: var(--ldv-black); }

/* State: available (normal stock) */
a.event.available {
  border-color: var(--ldv-border-medium);
}
/* State: available + low stock */
a.event.available.low .event-status {
  color: var(--ldv-warning);
}
a.event.available.low:hover .event-status { color: var(--ldv-black); }
/* State: waiting list */
a.event.waitinglist {
  border-style: dashed;
  border-color: var(--ldv-border-medium);
}
a.event.waitinglist .event-status { color: var(--ldv-warning); }
/* State: reserved */
a.event.reserved {
  opacity: 0.7;
}
/* State: sold out / over */
a.event.soldout,
a.event.over {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}
a.event.soldout .event-status,
a.event.over .event-status {
  color: var(--ldv-danger);
}
/* State: soon / not yet on sale */
a.event.soon {
  opacity: 0.65;
}
a.event.soon .event-status { color: var(--ldv-text-muted); }
/* State: continued from previous day */
a.event.continued {
  background: var(--ldv-glass-02);
  border-style: dashed;
}
/* Running = general presale running */
a.event.running {
  border-color: var(--ldv-border-medium);
}


/* ============================================================================
   14E. EVENT LIST FILTER (fragment_event_list_filter.html)
   ============================================================================ */
.event-list-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
  padding: 16px 20px;
  background: var(--ldv-glass-01);
  border: 1px solid var(--ldv-border-faint);
  border-radius: var(--ldv-r-md);
  align-items: end;
}
.event-list-filter-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  flex: 1 1 auto;
}
.event-list-filter-form .form-group {
  margin-bottom: 0;
  flex: 1 1 180px;
  min-width: 0;
}
.event-list-filter-form label {
  display: block;
  padding-top: 0;
  margin-bottom: 6px;
}


/* ============================================================================
   14F. ORGANIZER INDEX EXTRAS
   (.panel-subhead, .blank-after, .event-is-remote)
   ============================================================================ */
.panel-subhead {
  color: var(--ldv-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 6px;
}
.blank-after { margin-bottom: 30px; }
.blank-after + * { margin-top: 0; }

.event-is-remote::after {
  content: "•";
  display: inline-block;
  margin-left: 8px;
  color: var(--ldv-text-dim);
}


/* ============================================================================
   15. MODALS (legacy .modal-wrapper + native <dialog>)
   ============================================================================ */
.modal-wrapper {
  position: fixed;
  inset: 0;
  background: var(--ldv-overlay-80);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900000;
  padding: 20px;
}
.modal-wrapper[hidden] { display: none; }

.modal-card,
dialog.modal-card {
  background: var(--ldv-black-soft);
  border: 1px solid var(--ldv-border-medium);
  border-radius: var(--ldv-r-xl);
  padding: 36px 32px;
  max-width: 500px;
  width: 100%;
  box-shadow: var(--ldv-shadow-card);
  color: var(--ldv-text);
  text-align: center;
}
dialog.modal-card { margin: auto; }
dialog.modal-card::backdrop {
  background: var(--ldv-overlay-80);
  backdrop-filter: blur(12px);
}
dialog.modal-card[open] {
  animation: ldv-modal-in 0.3s var(--ldv-ease);
}
@keyframes ldv-modal-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reset Bootstrap's form-horizontal side-effects inside modals.
   pretix uses <form class="modal-card-inner form-horizontal"> as the
   outer wrapper of its dialogs, which otherwise inherits column/label
   layout rules that make the icon column appear as a vertical white bar. */
.modal-card-inner,
.modal-card-inner.form-horizontal,
.modal-card .form-horizontal,
dialog.modal-card > form {
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  background: none;
}
.modal-card .form-horizontal .form-group,
.modal-card-inner .form-group {
  margin-left: 0;
  margin-right: 0;
}
.modal-card .form-horizontal .control-label,
.modal-card-inner .control-label {
  text-align: center;
  padding-top: 0;
}

.modal-card-icon {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 2.6em;
  color: var(--ldv-white);
  margin: 0 auto 20px;
  line-height: 1;
}
dialog.modal-card .modal-card-icon,
.dialog.modal-card .modal-card-icon {
  background: transparent;
}
.modal-card-icon .fa,
.modal-card-icon .big-icon {
  display: inline-block;
  font-size: 1em;
  width: auto;
  height: auto;
  line-height: 1;
  background: none !important;
}

/* Override the ::before pseudo-element if Font Awesome didn't load */
.modal-card-icon .fa-cog::before,
.modal-card-icon .fa::before {
  display: inline-block;
}

.modal-card-content { text-align: center; }

.modal-card-title,
.modal-card h2,
.modal-card h3 {
  text-align: center;
  font-size: 1.35rem;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--ldv-white);
}
.modal-card-description,
.modal-card p.text,
.modal-card p {
  color: var(--ldv-text-muted);
  margin-bottom: 18px;
  text-transform: none;
  line-height: 1.55;
}

.modal-card-confirm {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 25px 0 0;
}

dialog.inline-dialog {
  position: static;
  display: block;
  background: var(--ldv-success-bg);
  border: 1px solid var(--ldv-success-bd);
  border-radius: var(--ldv-r-md);
  padding: 14px 20px;
  margin: 15px 0;
  color: var(--ldv-white);
  box-shadow: none;
}
dialog.inline-dialog::backdrop { display: none; }
#cart-extend-confirmation-dialog > form > p {
  margin-bottom: 0 !important;
}

#cookie-consent-modal {
  background: var(--ldv-black-soft);
  border: 1px solid var(--ldv-border-medium);
  border-radius: var(--ldv-r-xl);
  color: var(--ldv-text);
}
#cookie-consent-modal::backdrop {
  background: var(--ldv-overlay-95);
  backdrop-filter: blur(20px);
}


/* ============================================================================
   16. EVENT INFO ROWS
   ============================================================================ */
.info-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ldv-border-faint);
}
.info-row:last-child { border-bottom: none; }
.info-row-icon {
  color: var(--ldv-text-muted);
  font-size: 1.2em;
  min-width: 32px;
  padding-top: 2px;
  position: relative;
  top: unset;
  left: unset;
}
.info-row-content {
  flex: 1;
  color: var(--ldv-text);
}
.info-row-content p { margin: 0; }
.info-row p { margin-left: 0; }


/* ============================================================================
   17. ORDER DETAILS / DOWNLOAD
   ============================================================================ */
.order-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 20px 0 30px;
}
.order-details dt {
  color: var(--ldv-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.78rem;
  align-self: center;
}
.order-details dd {
  margin: 0;
  color: var(--ldv-text);
}

.info-download {
  margin: 30px 0;
  padding: 24px;
  background: var(--ldv-glass-02);
  border: 1px solid var(--ldv-border-subtle);
  border-radius: var(--ldv-r-lg);
  text-align: center;
}
.download-btn-form .btn { margin: 5px; }


/* ============================================================================
   18. LOADING / SPINNER
   ============================================================================ */
.rotating,
.fa-spin {
  animation: ldv-spin 1.2s linear infinite;
  display: inline-block;
}
@keyframes ldv-spin {
  to { transform: rotate(360deg); }
}


/* ============================================================================
   19. FOOTER
   ============================================================================ */
footer,
body > footer {
  background: var(--ldv-black);
  border-top: 1px solid var(--ldv-border-subtle);
  padding: 60px 20px 30px;
  margin-top: 80px;
  color: var(--ldv-text-muted);
}
footer a { color: var(--ldv-white); }
footer a:hover {
  color: var(--ldv-text-muted);
  opacity: 1;
}
footer nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ============================================================================
   20. TABLES
   ============================================================================ */
table { width: 100%; color: var(--ldv-text); }
table.table { background: transparent; }
table.table th,
table.table td {
  padding: 14px 16px;
  border-top: 1px solid var(--ldv-border-faint);
  background: transparent;
}
table.table th {
  color: var(--ldv-text-muted);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border-top: none;
  border-bottom: 1px solid var(--ldv-border-subtle);
}
table.table-striped tbody tr:nth-of-type(odd) td {
  background: var(--ldv-glass-01);
}
table.table-hover tbody tr:hover td {
  background: var(--ldv-glass-04);
}


/* ============================================================================
   21. UTILITY / MISC
   ============================================================================ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.on-focus-visible:focus,
.on-focus-visible:focus-visible {
  position: static !important;
  width: auto; height: auto;
  clip: auto;
  overflow: visible;
  margin: 10px 0;
}

.pull-left, .pull-left.flip { float: left; }
.pull-right, .pull-right.flip { float: right; }

.helper-display-block { display: block; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ldv-white);
  outline-offset: 3px;
  border-radius: var(--ldv-r-sm);
}
.btn:focus-visible {
  outline-offset: 4px;
  border-radius: var(--ldv-r-pill);
}


/* ============================================================================
   22. SCROLLBAR
   ============================================================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ldv-border-strong) var(--ldv-black);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--ldv-black);
}
::-webkit-scrollbar-thumb {
  background: var(--ldv-border-medium);
  border-radius: var(--ldv-r-pill);
  border: 2px solid var(--ldv-black);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ldv-border-strong);
}


/* ============================================================================
   23. RESPONSIVE
   ============================================================================ */
@media (max-width: 991px) {
  .main-box    { padding-top: 20px; padding-bottom: 40px; }
  .panel-heading { padding: 18px 22px; }
  .panel-body    { padding: 22px !important; }
}

@media (max-width: 767px) {
  .btn-lg { padding: 14px 28px; font-size: 12px; }
  .btn    { padding: 11px 22px; }

  h1, .h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  h2, .h2 { font-size: 1.5rem; }

  ul:has(> li.checkout-step),
  ol:has(> li.checkout-step) {
    flex-direction: column;
    gap: 6px;
  }
  .checkout-step {
    width: 100%;
    justify-content: center;
  }

  .event-list.full-width-list article.row {
    padding: 18px 12px;
    margin: 0 -12px;
  }

  .modal-card,
  dialog.modal-card {
    padding: 28px 22px;
    border-radius: var(--ldv-r-lg);
  }

  /* Calendar: smaller cells, keep grid readable on mobile */
  table.table-calendar {
    border-spacing: 3px;
  }
  table.table-calendar tbody td {
    height: 64px;
    padding: 6px 4px;
    border-radius: var(--ldv-r-sm);
  }
  table.table-calendar tbody td.day b {
    min-width: 22px;
    height: 22px;
    font-size: 0.8rem;
    margin-bottom: 4px;
  }
  .event-time {
    font-size: 9px;
    padding: 2px 6px;
    letter-spacing: 0.05em;
  }

  /* Week-calendar: stack days vertically on mobile */
  .week-calendar {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .week-calendar .weekday {
    min-height: 0;
    padding: 12px 14px;
  }
  .week-calendar .weekday.no-events {
    padding: 10px 14px;
  }

  /* Day-calendar: compact */
  .day-calendar {
    padding: 16px 14px;
  }
  .day-calendar .day-timeline {
    gap: 4px;
  }
  .day-calendar .day-timeline.ticks > li {
    font-size: 9px;
    padding: 2px 6px;
    letter-spacing: 0.08em;
  }

  /* Event-list filter: stack on mobile */
  .event-list-filter-form,
  .event-list-filter-form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  footer { padding: 40px 20px 24px; margin-top: 50px; }
}


/* ============================================================================
   26. TOP-PRIORITY FIXES FROM REVIEW ROUND
   ============================================================================ */

/* --- Safari-prefix for backdrop-filter (all existing usages) ------------- */
.btn-default,
.btn-secondary,
.form-control,
.panel,
.panel.panel-default,
.panel.panel-primary,
.alert,
.modal-wrapper,
dialog.modal-card::backdrop,
.sneak-peek-trigger {
  -webkit-backdrop-filter: blur(10px);
}
.panel {
  -webkit-backdrop-filter: blur(15px);
}

/* --- Add backdrop-filter where it was missing ---------------------------- */
.week-calendar .weekday,
.day-calendar,
.table-calendar td.day.has-events {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.event-time {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* --- Weekday-Hover-Lift -------------------------------------------------- */
.week-calendar .weekday.has-events:hover {
  transform: translateY(-2px);
  border-color: var(--ldv-border-medium);
  background-color: var(--ldv-glass-06) !important;
  box-shadow: var(--ldv-shadow-floating);
}

/* --- Primary-button hover: subtle white glow ---------------------------- */
.btn-primary:hover {
  box-shadow: 0 10px 28px rgba(255, 255, 255, 0.12);
}

/* --- Eyebrow utility (for small uppercase labels above sections) -------- */
.eyebrow,
.section-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ldv-text-muted);
  margin-bottom: 14px;
}

/* --- Missing hover/focus states ----------------------------------------- */
.form-control:hover {
  border-color: var(--ldv-border-strong);
}
a.event:focus-visible {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
  outline-offset: 4px;
}
details.panel > summary:hover {
  background: var(--ldv-glass-02);
}
.product-row:hover {
  background: var(--ldv-glass-01);
}

/* --- Pagination (Bootstrap-3 based) ------------------------------------- */
.pagination {
  display: inline-flex;
  gap: 6px;
  padding: 0;
  margin: 20px 0;
  list-style: none;
  border-radius: var(--ldv-r-pill);
}
.pagination > li {
  list-style: none;
  display: inline-flex;
}
.pagination > li > a,
.pagination > li > span,
.pagination .page-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--ldv-r-pill);
  background: var(--ldv-glass-04);
  border: 1px solid var(--ldv-border-subtle);
  color: var(--ldv-white);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--ldv-trans-fast);
}
.pagination > li > a:hover,
.pagination > li > a:focus {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
  opacity: 1;
}
.pagination > li.active > a,
.pagination > li.active > span,
.pagination .page-current {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
}
.pagination > li.disabled > a,
.pagination > li.disabled > span {
  opacity: 0.35;
  pointer-events: none;
}

/* --- List-Group (Bootstrap-3 based) ------------------------------------- */
.list-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0 0 20px;
  list-style: none;
  border-radius: var(--ldv-r-md);
  overflow: hidden;
  border: 1px solid var(--ldv-border-subtle);
}
.list-group-item {
  padding: 14px 18px;
  background: var(--ldv-glass-01);
  color: var(--ldv-text);
  border: 0;
  border-bottom: 1px solid var(--ldv-border-faint);
  list-style: none;
}
.list-group-item:last-child {
  border-bottom: 0;
}
.list-group-item:hover {
  background: var(--ldv-glass-04);
}
.list-group-item.active,
.list-group-item[aria-current="true"] {
  background: var(--ldv-white);
  color: var(--ldv-black);
}

/* --- Accordion / Fieldset-panels (checkout payment/addons) -------------- */
.accordion-panel,
fieldset.accordion-panel {
  background: var(--ldv-glass-01);
  border: 1px solid var(--ldv-border-subtle);
  border-radius: var(--ldv-r-md);
  padding: 18px 22px;
  margin: 10px 0;
  transition: all var(--ldv-trans-fast);
}
.accordion-panel:hover {
  border-color: var(--ldv-border-medium);
  background: var(--ldv-glass-02);
}
.accordion-panel > legend,
.accordion-radio {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ldv-white);
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  border: 0;
}
.accordion-label-text {
  font-size: 1rem;
  color: var(--ldv-white);
}

/* --- Full-width-list layout (customer portal lists) --------------------- */
.full-width-list {
  width: 100%;
  padding: 0;
  margin: 0 0 30px;
  list-style: none;
}
.full-width-list > li,
.full-width-list > .row {
  padding: 18px 16px;
  border-bottom: 1px solid var(--ldv-border-faint);
  list-style: none;
}
.full-width-list > *:last-child {
  border-bottom: 0;
}

/* --- Cross-selling (checkout addons) ------------------------------------ */
.cross-selling {
  background: var(--ldv-glass-02);
  border: 1px dashed var(--ldv-border-medium);
  border-radius: var(--ldv-r-lg);
  padding: 24px;
  margin: 20px 0;
}

/* --- Quotabox (memberships) --------------------------------------------- */
.quotabox {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
}
.quotabox .progress {
  width: 100%;
}
.quotabox .numbers {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ldv-text-muted);
  letter-spacing: 0.05em;
}

/* --- Progress-bar dynamic widths (0..100%) ------------------------------ */
/* pretix injects .progress-bar-<int> based on quota usage */
.progress-bar-0   { width: 0 !important; }
.progress-bar-5   { width: 5% !important; }
.progress-bar-10  { width: 10% !important; }
.progress-bar-15  { width: 15% !important; }
.progress-bar-20  { width: 20% !important; }
.progress-bar-25  { width: 25% !important; }
.progress-bar-30  { width: 30% !important; }
.progress-bar-33  { width: 33% !important; }
.progress-bar-35  { width: 35% !important; }
.progress-bar-40  { width: 40% !important; }
.progress-bar-45  { width: 45% !important; }
.progress-bar-50  { width: 50% !important; }
.progress-bar-55  { width: 55% !important; }
.progress-bar-60  { width: 60% !important; }
.progress-bar-65  { width: 65% !important; }
.progress-bar-66  { width: 66% !important; }
.progress-bar-70  { width: 70% !important; }
.progress-bar-75  { width: 75% !important; }
.progress-bar-80  { width: 80% !important; }
.progress-bar-85  { width: 85% !important; }
.progress-bar-90  { width: 90% !important; }
.progress-bar-95  { width: 95% !important; }
.progress-bar-100 { width: 100% !important; }

/* --- Modal-card-confirm-spread (cookie consent) ------------------------- */
.modal-card-confirm-spread {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 25px 0 0;
}

/* --- Account-addresses grid --------------------------------------------- */
.account-addresses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.account-addresses > * {
  background: var(--ldv-glass-02);
  border: 1px solid var(--ldv-border-subtle);
  border-radius: var(--ldv-r-md);
  padding: 18px 20px;
}

/* --- Alert testmode ----------------------------------------------------- */
.alert-testmode {
  background: var(--ldv-warning-bg);
  border-color: var(--ldv-warning-bd);
  color: var(--ldv-white);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
}


/* ============================================================================
   24. REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .btn:focus,
  .event-list article:hover,
  .table-calendar td.day.has-events:hover {
    transform: none;
  }
}


/* ============================================================================
   25. SPECIFICITY OVERRIDES
   pretix ships Bootstrap 3 defaults that use compound selectors like
   ".panel-default > .panel-heading". A single-class selector in our CSS
   (even loaded later) loses the specificity battle. We match their
   specificity here or go one higher, scoped to .pretixpresale body so we
   don't bleed into the control panel.
   ============================================================================ */

/* --- Panels: all Bootstrap colour variants → transparent glass ------------ */
.panel-default > .panel-heading,
.panel-default > legend > .panel-heading,
.panel-primary > .panel-heading,
.panel-primary > legend > .panel-heading,
.panel-success > .panel-heading,
.panel-success > legend > .panel-heading,
.panel-info > .panel-heading,
.panel-info > legend > .panel-heading,
.panel-warning > .panel-heading,
.panel-warning > legend > .panel-heading,
.panel-danger > .panel-heading,
.panel-danger > legend > .panel-heading {
  background: transparent;
  color: var(--ldv-white);
  border-color: var(--ldv-border-subtle);
}
.panel-default > .panel-heading .badge,
.panel-primary > .panel-heading .badge,
.panel-success > .panel-heading .badge,
.panel-info > .panel-heading .badge,
.panel-warning > .panel-heading .badge,
.panel-danger > .panel-heading .badge {
  background: var(--ldv-glass-08);
  color: var(--ldv-white);
}
.panel-primary,
.panel-success,
.panel-info,
.panel-warning,
.panel-danger {
  background: var(--ldv-glass-01);
  border-color: var(--ldv-border-subtle);
}

/* Force transparent on every heading element inside any panel/summary.
   pretix gives h1..h4 a white background somewhere in its SCSS. */
.panel .panel-heading h1,
.panel .panel-heading h2,
.panel .panel-heading h3,
.panel .panel-heading h4,
.panel-heading h1,
.panel-heading h2,
.panel-heading h3,
.panel-heading h4,
details.panel > summary h1,
details.panel > summary h2,
details.panel > summary h3,
details.panel > summary h4,
.weekday > summary h1,
.weekday > summary h2,
.weekday > summary h3,
.weekday > summary h4,
.day-calendar h3.day-row-name {
  background: transparent !important;
  color: inherit;
}

/* --- Event state colours for all calendar views --------------------------- */
.table-calendar a.event,
.week-calendar a.event,
.day-calendar a.event {
  background: var(--ldv-glass-04);
  color: var(--ldv-white);
  border: 1px solid var(--ldv-border-subtle);
}
.table-calendar a.event:hover,
.week-calendar a.event:hover,
.day-calendar a.event:hover {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
}

/* Available */
.table-calendar a.event.available,
.week-calendar a.event.available,
.day-calendar a.event.available {
  background: var(--ldv-glass-06);
  color: var(--ldv-white);
  border-color: var(--ldv-border-medium);
}
.table-calendar a.event.available:hover,
.week-calendar a.event.available:hover,
.day-calendar a.event.available:hover {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
}

/* Low */
.table-calendar a.event.available.low,
.week-calendar a.event.available.low,
.day-calendar a.event.available.low {
  background: var(--ldv-warning-bg);
  color: var(--ldv-white);
  border-color: var(--ldv-warning-bd);
}

/* Waiting list */
.table-calendar a.event.waitinglist,
.week-calendar a.event.waitinglist,
.day-calendar a.event.waitinglist {
  background: var(--ldv-glass-02);
  border-color: var(--ldv-border-medium);
  border-style: dashed;
  color: var(--ldv-white);
}

/* Reserved */
.table-calendar a.event.reserved,
.week-calendar a.event.reserved,
.day-calendar a.event.reserved {
  background: var(--ldv-glass-02);
  color: var(--ldv-text-muted);
  opacity: 0.7;
}

/* Sold out / Over */
.table-calendar a.event.soldout,
.week-calendar a.event.soldout,
.day-calendar a.event.soldout,
.table-calendar a.event.over,
.week-calendar a.event.over,
.day-calendar a.event.over {
  background: var(--ldv-glass-01);
  color: var(--ldv-text-dim);
  border-color: var(--ldv-border-faint);
  opacity: 0.6;
}

/* Running / Soon */
.table-calendar a.event.running,
.week-calendar a.event.running,
.day-calendar a.event.running,
.table-calendar a.event.soon,
.week-calendar a.event.soon,
.day-calendar a.event.soon {
  background: var(--ldv-glass-04);
  color: var(--ldv-white);
  border-color: var(--ldv-border-subtle);
}

/* Remove the pretix gradient ::before on low/etc. — conflicts with flat design */
.table-calendar a.event::before,
.week-calendar a.event::before,
.day-calendar a.event::before {
  display: none !important;
}

/* --- Bootstrap primary helpers that carry the legacy primary color -------- */
.label-primary,
.bg-primary {
  background-color: var(--ldv-glass-08) !important;
  color: var(--ldv-white) !important;
}
.text-primary { color: var(--ldv-white) !important; }

/* --- Force all headings onto transparent (catch-all for scss defaults) ---- */
body .container h1,
body .container h2,
body .container h3,
body .container h4,
body .main-box h1,
body .main-box h2,
body .main-box h3,
body .main-box h4 {
  background: transparent;
}

/* --- Details/summary marker cleanup on our dark theme -------------------- */
details > summary {
  background: transparent;
}

/* --- Sneak-peek cart: replace white gradient overlay with dark ----------- */
.sneak-peek-trigger,
details.sneak-peek-container .sneak-peek-trigger {
  background-image: linear-gradient(
          0deg,
          var(--ldv-black-soft) 40%,
          rgba(17, 17, 17, 0.6) 70%,
          rgba(17, 17, 17, 0) 100%
  ) !important;
  color: var(--ldv-white);
}
.sneak-peek-trigger a,
.sneak-peek-trigger button {
  color: var(--ldv-white);
}

/* Checkout-flow: pretix' own pseudo-element styling is replaced by the
   progress-bar design in section 12. We don't kill the pseudo-elements
   here any more — section 12 sets them to absolute-positioned connectors. */

/* --- Panel-title chevron ::before (pretix' details caret) ---------------- */
/* The auto-generated caret uses background gradients; make sure it reads
   as a simple chevron on dark. Colour only, no position changes. */
.panel-title::before,
.panel-heading h2::before,
summary.panel-heading h2::before {
  color: var(--ldv-text-muted) !important;
  background: transparent !important;
}

/* --- Cart panel + status bars: specific dark fallbacks ------------------- */
.panel.cart,
.panel.sneak-peek-container {
  background: var(--ldv-glass-02);
}
.panel.cart .panel-body,
.sneak-peek-container .panel-body {
  background: transparent;
}

/* --- More specific btn overrides: pretix sometimes wraps buttons -------- */
button.btn-default,
a.btn.btn-default,
input.btn.btn-default {
  background: var(--ldv-glass-04);
  color: var(--ldv-white);
  border-color: var(--ldv-border-subtle);
}
button.btn-default:hover,
a.btn.btn-default:hover,
input.btn.btn-default:hover {
  background: var(--ldv-glass-08);
  color: var(--ldv-white);
  border-color: var(--ldv-border-medium);
}

/* --- Force dark background on day-calendar timeline ticks container ----- */
.day-calendar ul.day-timeline.ticks,
.day-calendar ul.day-timeline {
  background: transparent !important;
}

/* --- Override pretix alternating-row backgrounds ------------------------- */
/* pretix has nth-child rules with higher specificity that paint rgb(249,249,249)
   (light grey) on every other row/day/weekday. Kill them. */
.week-calendar .weekday:nth-child(2n),
.week-calendar .weekday:nth-child(2n+1) {
  background-color: var(--ldv-glass-01) !important;
}
.week-calendar .weekday.has-events:nth-child(2n),
.week-calendar .weekday.has-events:nth-child(2n+1) {
  background-color: var(--ldv-glass-04) !important;
}
.week-calendar .weekday.today:nth-child(2n),
.week-calendar .weekday.today:nth-child(2n+1) {
  background-color: var(--ldv-glass-06) !important;
}

/* Month-calendar alternating days */
.table-calendar .day:nth-child(2n),
.table-calendar .day:nth-child(2n+1) {
  background-color: var(--ldv-glass-01) !important;
}
.table-calendar td.day.has-events:nth-child(2n),
.table-calendar td.day.has-events:nth-child(2n+1) {
  background-color: var(--ldv-glass-04) !important;
}
.table-calendar td.day.no-events:nth-child(2n),
.table-calendar td.day.no-events:nth-child(2n+1) {
  background-color: transparent !important;
  opacity: 0.3;
}

/* Event-list alternating rows */
.alternating-rows .row:nth-child(2n),
.alternating-rows .row:nth-child(2n+1) {
  background-color: transparent !important;
}

/* Striped tables — monochrome version */
.table-striped > tbody > tr:nth-of-type(2n+1) > td,
.table-striped > tbody > tr:nth-of-type(2n+1) > th {
  background-color: var(--ldv-glass-01) !important;
  color: var(--ldv-text);
}

/* --- Make no-events weekdays better readable (was opacity 0.4) ---------- */
.week-calendar .weekday.no-events {
  opacity: 0.55;
}
.week-calendar .weekday.no-events > summary h3 {
  color: var(--ldv-text-muted);
}

/* --- Checkout-step icon/label overrides for pretix default colours ------- */
/* pretix forces .checkout-step-icon .fa and label span to white, which our
   section 12 has already handled via explicit rules per state. These
   extras only ensure the label never inherits a bad colour from an
   ancestor rule. */
.checkout-step.step-current .checkout-step-label,
.checkout-step.step-current .checkout-step-label * {
  color: var(--ldv-white) !important;
}
.checkout-step.step-current .checkout-step-icon,
.checkout-step.step-current .checkout-step-icon .fa,
.checkout-step.step-current .checkout-step-icon * {
  color: var(--ldv-black) !important;
}
.checkout-step.step-done .checkout-step-icon,
.checkout-step.step-done .checkout-step-icon .fa,
.checkout-step.step-done .checkout-step-icon * {
  color: var(--ldv-black) !important;
}

/* --- Calendar navigation (Week/Month/Day select + prev/next) ------------ */
/* Structure:
   <nav><ul class="row calendar-nav">
     <li.text-left.flip>[prev link]</li>
     <li.text-center><form.form-inline>[label+select+chevron]</form></li>
     <li.text-right.flip>[next link]</li>
   </ul></nav>
*/
nav[aria-label="calendar navigation"] {
  margin: 0 0 30px;
}

/* Kill bootstrap .row gutter, go pure flex. */
ul.calendar-nav,
ul.row.calendar-nav {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0 0 24px !important;
  padding: 0 !important;
  width: 100%;
  flex-wrap: wrap;
}
ul.calendar-nav > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  display: flex;
  align-items: center;
  float: none !important;
  width: auto !important;
  min-height: 42px;
}
ul.calendar-nav > li.text-left,
ul.calendar-nav > li.text-left.flip {
  flex: 0 0 auto;
  justify-content: flex-start;
  margin-right: auto !important;
}
ul.calendar-nav > li.text-center {
  flex: 1 1 auto;
  justify-content: center;
  order: 0;
}
ul.calendar-nav > li.text-right,
ul.calendar-nav > li.text-right.flip {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: auto !important;
}
/* Empty li placeholders are invisible spacers that preserve column balance */
ul.calendar-nav > li:empty {
  flex: 0 0 auto;
  visibility: hidden;
  min-width: 140px;
}

/* Inline form inside the center li: label above or beside the select */
ul.calendar-nav form.form-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0;
  padding: 0;
}
ul.calendar-nav form.form-inline fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
ul.calendar-nav form.form-inline > fieldset > div:first-child {
  display: flex;
  align-items: center;
}
ul.calendar-nav form.form-inline label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ldv-text-muted);
  margin: 0;
  padding: 0;
}
/* The combo: select + submit button as a single pill-shaped input-group */
ul.calendar-nav form.form-inline .input-group {
  display: flex;
  align-items: stretch;
  background: var(--ldv-glass-04);
  border: 1px solid var(--ldv-border-medium);
  border-radius: var(--ldv-r-pill);
  overflow: hidden;
  height: 44px;
}
ul.calendar-nav form.form-inline .input-group .form-control {
  background: transparent !important;
  border: 0;
  border-radius: 0;
  color: var(--ldv-white);
  padding: 0 40px 0 22px;
  height: 100%;
  line-height: 1;
  min-width: 200px;
  box-shadow: none;
  /* native chevron is replaced by the submit button, hide built-in */
  background-position: right 14px center;
}
ul.calendar-nav form.form-inline .input-group .form-control:focus {
  background: transparent !important;
  box-shadow: none;
  border: 0;
  outline: none;
}
ul.calendar-nav form.form-inline .input-group-btn {
  display: flex;
  align-items: stretch;
}
ul.calendar-nav form.form-inline .input-group-btn .btn {
  background: transparent !important;
  border: 0;
  border-left: 1px solid var(--ldv-border-subtle);
  border-radius: 0;
  padding: 0 18px;
  color: var(--ldv-text);
  height: 100%;
  letter-spacing: 0;
  transform: none !important;
}
ul.calendar-nav form.form-inline .input-group-btn .btn:hover {
  background: var(--ldv-white) !important;
  color: var(--ldv-black);
}

/* Prev/Next links are already styled as .btn.btn-default, just keep tight */
ul.calendar-nav > li.text-left > a.btn,
ul.calendar-nav > li.text-right > a.btn {
  margin: 0;
}

@media (max-width: 767px) {
  ul.calendar-nav,
  ul.row.calendar-nav {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  ul.calendar-nav > li:empty { min-height: 0; display: none; }
  ul.calendar-nav > li.text-left,
  ul.calendar-nav > li.text-right,
  ul.calendar-nav > li.text-center {
    justify-content: center;
  }
  ul.calendar-nav form.form-inline {
    width: 100%;
    justify-content: center;
  }
  ul.calendar-nav form.form-inline fieldset {
    width: 100%;
    align-items: center;
  }
  ul.calendar-nav form.form-inline .input-group {
    width: 100%;
  }
  ul.calendar-nav form.form-inline .input-group .form-control {
    flex: 1;
    min-width: 0;
  }
}

/* --- Catch-all: pretix SCSS applies h1..h6 { background: white } somewhere
   Make absolutely sure no heading ever shows a white box in the storefront. */
.container h1, .container h2, .container h3, .container h4, .container h5, .container h6,
.main-box h1, .main-box h2, .main-box h3, .main-box h4, .main-box h5, .main-box h6,
.panel h1, .panel h2, .panel h3, .panel h4,
.weekday h1, .weekday h2, .weekday h3, .weekday h4,
.day-calendar h1, .day-calendar h2, .day-calendar h3,
.modal-card h1, .modal-card h2, .modal-card h3,
summary h1, summary h2, summary h3 {
  background: transparent !important;
}


@media (max-width: 767px) {
  .btn-lg { padding: 14px 28px; font-size: 12px; }
  .btn    { padding: 11px 22px; }

  h1, .h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  h2, .h2 { font-size: 1.5rem; }

  ul:has(> li.checkout-step),
  ol:has(> li.checkout-step) {
    flex-direction: column;
    gap: 6px;
  }
  .checkout-step {
    width: 100%;
    justify-content: center;
  }

  .event-list.full-width-list article.row {
    padding: 18px 12px;
    margin: 0 -12px;
  }

  .modal-card,
  dialog.modal-card {
    padding: 28px 22px;
    border-radius: var(--ldv-r-lg);
  }

  /* Calendar: smaller cells, keep grid readable on mobile */
  table.table-calendar {
    border-spacing: 3px;
  }
  table.table-calendar tbody td {
    height: 64px;
    padding: 6px 4px;
    border-radius: var(--ldv-r-sm);
  }
  table.table-calendar tbody td.day b {
    min-width: 22px;
    height: 22px;
    font-size: 0.8rem;
    margin-bottom: 4px;
  }
  .event-time {
    font-size: 9px;
    padding: 2px 6px;
    letter-spacing: 0.05em;
  }

  /* Week-calendar: stack days vertically on mobile */
  .week-calendar {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .week-calendar .weekday {
    min-height: 0;
    padding: 12px 14px;
  }
  .week-calendar .weekday.no-events {
    padding: 10px 14px;
  }

  /* Day-calendar: compact */
  .day-calendar {
    padding: 16px 14px;
  }
  .day-calendar .day-timeline {
    gap: 4px;
  }
  .day-calendar .day-timeline.ticks > li {
    font-size: 9px;
    padding: 2px 6px;
    letter-spacing: 0.08em;
  }

  /* Event-list filter: stack on mobile */
  .event-list-filter-form,
  .event-list-filter-form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  footer { padding: 40px 20px 24px; margin-top: 50px; }
}


/* ============================================================================
   26. TOP-PRIORITY FIXES FROM REVIEW ROUND
   ============================================================================ */

/* --- Safari-prefix for backdrop-filter (all existing usages) ------------- */
.btn-default,
.btn-secondary,
.form-control,
.panel,
.panel.panel-default,
.panel.panel-primary,
.alert,
.modal-wrapper,
dialog.modal-card::backdrop,
.sneak-peek-trigger {
  -webkit-backdrop-filter: blur(10px);
}
.panel {
  -webkit-backdrop-filter: blur(15px);
}

/* --- Add backdrop-filter where it was missing ---------------------------- */
.week-calendar .weekday,
.day-calendar,
.table-calendar td.day.has-events {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.event-time {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* --- Weekday-Hover-Lift -------------------------------------------------- */
.week-calendar .weekday.has-events:hover {
  transform: translateY(-2px);
  border-color: var(--ldv-border-medium);
  background-color: var(--ldv-glass-06) !important;
  box-shadow: var(--ldv-shadow-floating);
}

/* --- Primary-button hover: subtle white glow ---------------------------- */
.btn-primary:hover {
  box-shadow: 0 10px 28px rgba(255, 255, 255, 0.12);
}

/* --- Eyebrow utility (for small uppercase labels above sections) -------- */
.eyebrow,
.section-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ldv-text-muted);
  margin-bottom: 14px;
}

/* --- Missing hover/focus states ----------------------------------------- */
.form-control:hover {
  border-color: var(--ldv-border-strong);
}
a.event:focus-visible {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
  outline-offset: 4px;
}
details.panel > summary:hover {
  background: var(--ldv-glass-02);
}
.product-row:hover {
  background: var(--ldv-glass-01);
}

/* --- Pagination (Bootstrap-3 based) ------------------------------------- */
.pagination {
  display: inline-flex;
  gap: 6px;
  padding: 0;
  margin: 20px 0;
  list-style: none;
  border-radius: var(--ldv-r-pill);
}
.pagination > li {
  list-style: none;
  display: inline-flex;
}
.pagination > li > a,
.pagination > li > span,
.pagination .page-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--ldv-r-pill);
  background: var(--ldv-glass-04);
  border: 1px solid var(--ldv-border-subtle);
  color: var(--ldv-white);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--ldv-trans-fast);
}
.pagination > li > a:hover,
.pagination > li > a:focus {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
  opacity: 1;
}
.pagination > li.active > a,
.pagination > li.active > span,
.pagination .page-current {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
}
.pagination > li.disabled > a,
.pagination > li.disabled > span {
  opacity: 0.35;
  pointer-events: none;
}

/* --- List-Group (Bootstrap-3 based) ------------------------------------- */
.list-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0 0 20px;
  list-style: none;
  border-radius: var(--ldv-r-md);
  overflow: hidden;
  border: 1px solid var(--ldv-border-subtle);
}
.list-group-item {
  padding: 14px 18px;
  background: var(--ldv-glass-01);
  color: var(--ldv-text);
  border: 0;
  border-bottom: 1px solid var(--ldv-border-faint);
  list-style: none;
}
.list-group-item:last-child {
  border-bottom: 0;
}
.list-group-item:hover {
  background: var(--ldv-glass-04);
}
.list-group-item.active,
.list-group-item[aria-current="true"] {
  background: var(--ldv-white);
  color: var(--ldv-black);
}

/* --- Accordion / Fieldset-panels (checkout payment/addons) -------------- */
.accordion-panel,
fieldset.accordion-panel {
  background: var(--ldv-glass-01);
  border: 1px solid var(--ldv-border-subtle);
  border-radius: var(--ldv-r-md);
  padding: 18px 22px;
  margin: 10px 0;
  transition: all var(--ldv-trans-fast);
}
.accordion-panel:hover {
  border-color: var(--ldv-border-medium);
  background: var(--ldv-glass-02);
}
.accordion-panel > legend,
.accordion-radio {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ldv-white);
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  border: 0;
}
.accordion-label-text {
  font-size: 1rem;
  color: var(--ldv-white);
}

/* --- Full-width-list layout (customer portal lists) --------------------- */
.full-width-list {
  width: 100%;
  padding: 0;
  margin: 0 0 30px;
  list-style: none;
}
.full-width-list > li,
.full-width-list > .row {
  padding: 18px 16px;
  border-bottom: 1px solid var(--ldv-border-faint);
  list-style: none;
}
.full-width-list > *:last-child {
  border-bottom: 0;
}

/* --- Cross-selling (checkout addons) ------------------------------------ */
.cross-selling {
  background: var(--ldv-glass-02);
  border: 1px dashed var(--ldv-border-medium);
  border-radius: var(--ldv-r-lg);
  padding: 24px;
  margin: 20px 0;
}

/* --- Quotabox (memberships) --------------------------------------------- */
.quotabox {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
}
.quotabox .progress {
  width: 100%;
}
.quotabox .numbers {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ldv-text-muted);
  letter-spacing: 0.05em;
}

/* --- Progress-bar dynamic widths (0..100%) ------------------------------ */
/* pretix injects .progress-bar-<int> based on quota usage */
.progress-bar-0   { width: 0 !important; }
.progress-bar-5   { width: 5% !important; }
.progress-bar-10  { width: 10% !important; }
.progress-bar-15  { width: 15% !important; }
.progress-bar-20  { width: 20% !important; }
.progress-bar-25  { width: 25% !important; }
.progress-bar-30  { width: 30% !important; }
.progress-bar-33  { width: 33% !important; }
.progress-bar-35  { width: 35% !important; }
.progress-bar-40  { width: 40% !important; }
.progress-bar-45  { width: 45% !important; }
.progress-bar-50  { width: 50% !important; }
.progress-bar-55  { width: 55% !important; }
.progress-bar-60  { width: 60% !important; }
.progress-bar-65  { width: 65% !important; }
.progress-bar-66  { width: 66% !important; }
.progress-bar-70  { width: 70% !important; }
.progress-bar-75  { width: 75% !important; }
.progress-bar-80  { width: 80% !important; }
.progress-bar-85  { width: 85% !important; }
.progress-bar-90  { width: 90% !important; }
.progress-bar-95  { width: 95% !important; }
.progress-bar-100 { width: 100% !important; }

/* --- Modal-card-confirm-spread (cookie consent) ------------------------- */
.modal-card-confirm-spread {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 25px 0 0;
}

/* --- Account-addresses grid --------------------------------------------- */
.account-addresses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.account-addresses > * {
  background: var(--ldv-glass-02);
  border: 1px solid var(--ldv-border-subtle);
  border-radius: var(--ldv-r-md);
  padding: 18px 20px;
}

/* --- Alert testmode ----------------------------------------------------- */
.alert-testmode {
  background: var(--ldv-warning-bg);
  border-color: var(--ldv-warning-bd);
  color: var(--ldv-white);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
}


/* ============================================================================
   24. REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .btn:focus,
  .event-list article:hover,
  .table-calendar td.day.has-events:hover {
    transform: none;
  }
}


/* ============================================================================
   25. SPECIFICITY OVERRIDES
   pretix ships Bootstrap 3 defaults that use compound selectors like
   ".panel-default > .panel-heading". A single-class selector in our CSS
   (even loaded later) loses the specificity battle. We match their
   specificity here or go one higher, scoped to .pretixpresale body so we
   don't bleed into the control panel.
   ============================================================================ */

/* --- Panels: all Bootstrap colour variants → transparent glass ------------ */
.panel-default > .panel-heading,
.panel-default > legend > .panel-heading,
.panel-primary > .panel-heading,
.panel-primary > legend > .panel-heading,
.panel-success > .panel-heading,
.panel-success > legend > .panel-heading,
.panel-info > .panel-heading,
.panel-info > legend > .panel-heading,
.panel-warning > .panel-heading,
.panel-warning > legend > .panel-heading,
.panel-danger > .panel-heading,
.panel-danger > legend > .panel-heading {
  background: transparent;
  color: var(--ldv-white);
  border-color: var(--ldv-border-subtle);
}
.panel-default > .panel-heading .badge,
.panel-primary > .panel-heading .badge,
.panel-success > .panel-heading .badge,
.panel-info > .panel-heading .badge,
.panel-warning > .panel-heading .badge,
.panel-danger > .panel-heading .badge {
  background: var(--ldv-glass-08);
  color: var(--ldv-white);
}
.panel-primary,
.panel-success,
.panel-info,
.panel-warning,
.panel-danger {
  background: var(--ldv-glass-01);
  border-color: var(--ldv-border-subtle);
}

/* Force transparent on every heading element inside any panel/summary.
   pretix gives h1..h4 a white background somewhere in its SCSS. */
.panel .panel-heading h1,
.panel .panel-heading h2,
.panel .panel-heading h3,
.panel .panel-heading h4,
.panel-heading h1,
.panel-heading h2,
.panel-heading h3,
.panel-heading h4,
details.panel > summary h1,
details.panel > summary h2,
details.panel > summary h3,
details.panel > summary h4,
.weekday > summary h1,
.weekday > summary h2,
.weekday > summary h3,
.weekday > summary h4,
.day-calendar h3.day-row-name {
  background: transparent !important;
  color: inherit;
}

/* --- Event state colours for all calendar views --------------------------- */
.table-calendar a.event,
.week-calendar a.event,
.day-calendar a.event {
  background: var(--ldv-glass-04);
  color: var(--ldv-white);
  border: 1px solid var(--ldv-border-subtle);
}
.table-calendar a.event:hover,
.week-calendar a.event:hover,
.day-calendar a.event:hover {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
}

/* Available */
.table-calendar a.event.available,
.week-calendar a.event.available,
.day-calendar a.event.available {
  background: var(--ldv-glass-06);
  color: var(--ldv-white);
  border-color: var(--ldv-border-medium);
}
.table-calendar a.event.available:hover,
.week-calendar a.event.available:hover,
.day-calendar a.event.available:hover {
  background: var(--ldv-white);
  color: var(--ldv-black);
  border-color: var(--ldv-white);
}

/* Low */
.table-calendar a.event.available.low,
.week-calendar a.event.available.low,
.day-calendar a.event.available.low {
  background: var(--ldv-warning-bg);
  color: var(--ldv-white);
  border-color: var(--ldv-warning-bd);
}

/* Waiting list */
.table-calendar a.event.waitinglist,
.week-calendar a.event.waitinglist,
.day-calendar a.event.waitinglist {
  background: var(--ldv-glass-02);
  border-color: var(--ldv-border-medium);
  border-style: dashed;
  color: var(--ldv-white);
}

/* Reserved */
.table-calendar a.event.reserved,
.week-calendar a.event.reserved,
.day-calendar a.event.reserved {
  background: var(--ldv-glass-02);
  color: var(--ldv-text-muted);
  opacity: 0.7;
}

/* Sold out / Over */
.table-calendar a.event.soldout,
.week-calendar a.event.soldout,
.day-calendar a.event.soldout,
.table-calendar a.event.over,
.week-calendar a.event.over,
.day-calendar a.event.over {
  background: var(--ldv-glass-01);
  color: var(--ldv-text-dim);
  border-color: var(--ldv-border-faint);
  opacity: 0.6;
}

/* Running / Soon */
.table-calendar a.event.running,
.week-calendar a.event.running,
.day-calendar a.event.running,
.table-calendar a.event.soon,
.week-calendar a.event.soon,
.day-calendar a.event.soon {
  background: var(--ldv-glass-04);
  color: var(--ldv-white);
  border-color: var(--ldv-border-subtle);
}

/* Remove the pretix gradient ::before on low/etc. — conflicts with flat design */
.table-calendar a.event::before,
.week-calendar a.event::before,
.day-calendar a.event::before {
  display: none !important;
}

/* --- Bootstrap primary helpers that carry the legacy primary color -------- */
.label-primary,
.bg-primary {
  background-color: var(--ldv-glass-08) !important;
  color: var(--ldv-white) !important;
}
.text-primary { color: var(--ldv-white) !important; }

/* --- Force all headings onto transparent (catch-all for scss defaults) ---- */
body .container h1,
body .container h2,
body .container h3,
body .container h4,
body .main-box h1,
body .main-box h2,
body .main-box h3,
body .main-box h4 {
  background: transparent;
}

/* --- Details/summary marker cleanup on our dark theme -------------------- */
details > summary {
  background: transparent;
}

/* --- Sneak-peek cart: replace white gradient overlay with dark ----------- */
.sneak-peek-trigger,
details.sneak-peek-container .sneak-peek-trigger {
  background-image: linear-gradient(
    0deg,
    var(--ldv-black-soft) 40%,
    rgba(17, 17, 17, 0.6) 70%,
    rgba(17, 17, 17, 0) 100%
  ) !important;
  color: var(--ldv-white);
}
.sneak-peek-trigger a,
.sneak-peek-trigger button {
  color: var(--ldv-white);
}

/* Checkout-flow: pretix' own pseudo-element styling is replaced by the
   progress-bar design in section 12. We don't kill the pseudo-elements
   here any more — section 12 sets them to absolute-positioned connectors. */

/* --- Panel-title chevron ::before (pretix' details caret) ---------------- */
/* The auto-generated caret uses background gradients; make sure it reads
   as a simple chevron on dark. Colour only, no position changes. */
.panel-title::before,
.panel-heading h2::before,
summary.panel-heading h2::before {
  color: var(--ldv-text-muted) !important;
  background: transparent !important;
}

/* --- Cart panel + status bars: specific dark fallbacks ------------------- */
.panel.cart,
.panel.sneak-peek-container {
  background: var(--ldv-glass-02);
}
.panel.cart .panel-body,
.sneak-peek-container .panel-body {
  background: transparent;
}

/* --- More specific btn overrides: pretix sometimes wraps buttons -------- */
button.btn-default,
a.btn.btn-default,
input.btn.btn-default {
  background: var(--ldv-glass-04);
  color: var(--ldv-white);
  border-color: var(--ldv-border-subtle);
}
button.btn-default:hover,
a.btn.btn-default:hover,
input.btn.btn-default:hover {
  background: var(--ldv-glass-08);
  color: var(--ldv-white);
  border-color: var(--ldv-border-medium);
}

/* --- Force dark background on day-calendar timeline ticks container ----- */
.day-calendar ul.day-timeline.ticks,
.day-calendar ul.day-timeline {
  background: transparent !important;
}

/* --- Override pretix alternating-row backgrounds ------------------------- */
/* pretix has nth-child rules with higher specificity that paint rgb(249,249,249)
   (light grey) on every other row/day/weekday. Kill them. */
.week-calendar .weekday:nth-child(2n),
.week-calendar .weekday:nth-child(2n+1) {
  background-color: var(--ldv-glass-01) !important;
}
.week-calendar .weekday.has-events:nth-child(2n),
.week-calendar .weekday.has-events:nth-child(2n+1) {
  background-color: var(--ldv-glass-04) !important;
}
.week-calendar .weekday.today:nth-child(2n),
.week-calendar .weekday.today:nth-child(2n+1) {
  background-color: var(--ldv-glass-06) !important;
}

/* Month-calendar alternating days */
.table-calendar .day:nth-child(2n),
.table-calendar .day:nth-child(2n+1) {
  background-color: var(--ldv-glass-01) !important;
}
.table-calendar td.day.has-events:nth-child(2n),
.table-calendar td.day.has-events:nth-child(2n+1) {
  background-color: var(--ldv-glass-04) !important;
}
.table-calendar td.day.no-events:nth-child(2n),
.table-calendar td.day.no-events:nth-child(2n+1) {
  background-color: transparent !important;
  opacity: 0.3;
}

/* Event-list alternating rows */
.alternating-rows .row:nth-child(2n),
.alternating-rows .row:nth-child(2n+1) {
  background-color: transparent !important;
}

/* Striped tables — monochrome version */
.table-striped > tbody > tr:nth-of-type(2n+1) > td,
.table-striped > tbody > tr:nth-of-type(2n+1) > th {
  background-color: var(--ldv-glass-01) !important;
  color: var(--ldv-text);
}

/* --- Make no-events weekdays better readable (was opacity 0.4) ---------- */
.week-calendar .weekday.no-events {
  opacity: 0.55;
}
.week-calendar .weekday.no-events > summary h3 {
  color: var(--ldv-text-muted);
}

/* --- Checkout-step icon/label overrides for pretix default colours ------- */
/* pretix forces .checkout-step-icon .fa and label span to white, which our
   section 12 has already handled via explicit rules per state. These
   extras only ensure the label never inherits a bad colour from an
   ancestor rule. */
.checkout-step.step-current .checkout-step-label,
.checkout-step.step-current .checkout-step-label * {
  color: var(--ldv-white) !important;
}
.checkout-step.step-current .checkout-step-icon,
.checkout-step.step-current .checkout-step-icon .fa,
.checkout-step.step-current .checkout-step-icon * {
  color: var(--ldv-black) !important;
}
.checkout-step.step-done .checkout-step-icon,
.checkout-step.step-done .checkout-step-icon .fa,
.checkout-step.step-done .checkout-step-icon * {
  color: var(--ldv-black) !important;
}

/* --- Calendar navigation (Week/Month/Day select + prev/next) ------------ */
/* Structure:
   <nav><ul class="row calendar-nav">
     <li.text-left.flip>[prev link]</li>
     <li.text-center><form.form-inline>[label+select+chevron]</form></li>
     <li.text-right.flip>[next link]</li>
   </ul></nav>
*/
nav[aria-label="calendar navigation"] {
  margin: 0 0 30px;
}

/* Kill bootstrap .row gutter, go pure flex. */
ul.calendar-nav,
ul.row.calendar-nav {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0 0 24px !important;
  padding: 0 !important;
  width: 100%;
  flex-wrap: wrap;
}
ul.calendar-nav > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  display: flex;
  align-items: center;
  float: none !important;
  width: auto !important;
  min-height: 42px;
}
ul.calendar-nav > li.text-left,
ul.calendar-nav > li.text-left.flip {
  flex: 0 0 auto;
  justify-content: flex-start;
  margin-right: auto !important;
}
ul.calendar-nav > li.text-center {
  flex: 1 1 auto;
  justify-content: center;
  order: 0;
}
ul.calendar-nav > li.text-right,
ul.calendar-nav > li.text-right.flip {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: auto !important;
}
/* Empty li placeholders are invisible spacers that preserve column balance */
ul.calendar-nav > li:empty {
  flex: 0 0 auto;
  visibility: hidden;
  min-width: 140px;
}

/* Inline form inside the center li: label above or beside the select */
ul.calendar-nav form.form-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0;
  padding: 0;
}
ul.calendar-nav form.form-inline fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
ul.calendar-nav form.form-inline > fieldset > div:first-child {
  display: flex;
  align-items: center;
}
ul.calendar-nav form.form-inline label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ldv-text-muted);
  margin: 0;
  padding: 0;
}
/* The combo: select + submit button as a single pill-shaped input-group */
ul.calendar-nav form.form-inline .input-group {
  display: flex;
  align-items: stretch;
  background: var(--ldv-glass-04);
  border: 1px solid var(--ldv-border-medium);
  border-radius: var(--ldv-r-pill);
  overflow: hidden;
  height: 44px;
}
ul.calendar-nav form.form-inline .input-group .form-control {
  background: transparent !important;
  border: 0;
  border-radius: 0;
  color: var(--ldv-white);
  padding: 0 40px 0 22px;
  height: 100%;
  line-height: 1;
  min-width: 200px;
  box-shadow: none;
  /* native chevron is replaced by the submit button, hide built-in */
  background-position: right 14px center;
}
ul.calendar-nav form.form-inline .input-group .form-control:focus {
  background: transparent !important;
  box-shadow: none;
  border: 0;
  outline: none;
}
ul.calendar-nav form.form-inline .input-group-btn {
  display: flex;
  align-items: stretch;
}
ul.calendar-nav form.form-inline .input-group-btn .btn {
  background: transparent !important;
  border: 0;
  border-left: 1px solid var(--ldv-border-subtle);
  border-radius: 0;
  padding: 0 18px;
  color: var(--ldv-text);
  height: 100%;
  letter-spacing: 0;
  transform: none !important;
}
ul.calendar-nav form.form-inline .input-group-btn .btn:hover {
  background: var(--ldv-white) !important;
  color: var(--ldv-black);
}

/* Prev/Next links are already styled as .btn.btn-default, just keep tight */
ul.calendar-nav > li.text-left > a.btn,
ul.calendar-nav > li.text-right > a.btn {
  margin: 0;
}

@media (max-width: 767px) {
  ul.calendar-nav,
  ul.row.calendar-nav {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  ul.calendar-nav > li:empty { min-height: 0; display: none; }
  ul.calendar-nav > li.text-left,
  ul.calendar-nav > li.text-right,
  ul.calendar-nav > li.text-center {
    justify-content: center;
  }
  ul.calendar-nav form.form-inline {
    width: 100%;
    justify-content: center;
  }
  ul.calendar-nav form.form-inline fieldset {
    width: 100%;
    align-items: center;
  }
  ul.calendar-nav form.form-inline .input-group {
    width: 100%;
  }
  ul.calendar-nav form.form-inline .input-group .form-control {
    flex: 1;
    min-width: 0;
  }
}

/* --- Catch-all: pretix SCSS applies h1..h6 { background: white } somewhere
   Make absolutely sure no heading ever shows a white box in the storefront. */
.container h1, .container h2, .container h3, .container h4, .container h5, .container h6,
.main-box h1, .main-box h2, .main-box h3, .main-box h4, .main-box h5, .main-box h6,
.panel h1, .panel h2, .panel h3, .panel h4,
.weekday h1, .weekday h2, .weekday h3, .weekday h4,
.day-calendar h1, .day-calendar h2, .day-calendar h3,
.modal-card h1, .modal-card h2, .modal-card h3,
summary h1, summary h2, summary h3 {
  background: transparent !important;
}


/* ============================================================================
   27. MOBILE CHECKOUT & CART REFINEMENTS
   ============================================================================ */
@media (max-width: 767px) {

  /* --- Checkout-flow on mobile: icon-only, horizontally distributed ----- */
  .checkout-step-label {
    display: none !important;
  }
  ol.checkout-flow,
  ul:has(> li.checkout-step),
  ol:has(> li.checkout-step) {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 14px 0 28px !important;
    padding: 0 4px !important;
    width: 100%;
  }
  .checkout-step {
    flex: 1 1 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    min-width: 0;
    position: relative;
  }
  .checkout-step-icon {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }
  .checkout-step-icon .fa { font-size: 14px; }
  /* Connector line between icons */
  .checkout-step::before,
  .checkout-step::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 19px;
    height: 2px;
    z-index: 1;
    background: var(--ldv-border-subtle) !important;
    border: 0 !important;
  }
  .checkout-step::before {
    left: 0;
    width: calc(50% - 19px);
  }
  .checkout-step::after {
    right: 0;
    width: calc(50% - 19px);
  }
  .checkout-step:first-child::before,
  .checkout-step:last-child::after {
    display: none !important;
  }
  .checkout-step.step-done::before,
  .checkout-step.step-done::after,
  .checkout-step.step-current::before {
    background: var(--ldv-white) !important;
  }

  /* --- Sneak-peek cart on mobile: unfold completely --------------------- */
  /* The gradient overlay + "Show full cart" button waste too much vertical
     space on phones — just show the cart expanded. */
  details.sneak-peek-container .sneak-peek-trigger,
  .sneak-peek-trigger {
    display: none !important;
  }
  details.sneak-peek-container .sneak-peek-content,
  .sneak-peek-content {
    max-height: none !important;
    position: static !important;
    overflow: visible !important;
  }

  /* --- Cart rows: stack product / price vertically ---------------------- */
  .cart-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 0;
  }
  .cart-row > .product,
  .cart-row > [role="cell"].product {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .cart-row > .singleprice,
  .cart-row > .totalprice,
  .cart-row > [role="cell"].singleprice,
  .cart-row > [role="cell"].totalprice,
  .cart-row > [role="cell"].price {
    flex: 0 0 auto;
    text-align: left !important;
    width: auto;
    font-size: 0.95rem;
  }
  .cart-row > .totalprice,
  .cart-row > [role="cell"].totalprice {
    font-weight: 800;
    margin-left: auto;
  }
  /* Total row: keep label left, amount right */
  .cart-rowgroup-total .cart-row,
  .cart-row.total {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  /* --- Cart panel body: slightly tighter on mobile --------------------- */
  details.cart .panel-body,
  details.sneak-peek-container .panel-body {
    padding: 16px 18px !important;
  }
  details.cart summary.panel-heading,
  details.sneak-peek-container summary.panel-heading {
    padding: 14px 18px;
  }

  /* --- Quantity inside cart row: center horizontally ------------------- */
  .cart-row .input-item-count-group {
    margin: 6px 0;
    justify-content: flex-start;
  }

  /* --- Big CTAs full width on mobile ----------------------------------- */
  .main-box .btn-lg,
  form .btn-lg {
    width: 100%;
  }

  /* --- Checkout action bar: stack go-back + continue vertically -------- */
  form .btn-block + .btn-block,
  .checkout-actions .btn {
    margin-top: 10px;
  }
}


/* ============================================================================
   28. MOBILE CHECKOUT — REVIEW-ROUND FIXES
   (Conversion-Blocker + WCAG-Fails aus dem 3-fach-Review)
   ============================================================================ */

/* --- 1) iOS Auto-Zoom-Fix: Inputs MÜSSEN >= 16px sein --------------------- */
@media (max-width: 767px) {
  .form-control,
  select.form-control,
  textarea.form-control,
  .input-item-count,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px;
  }
  textarea.form-control { min-height: 88px; }
}

/* --- 2) Checkout-Step-Label: sr-only statt display:none ------------------ */
/* A11y-Blocker: display:none versteckt auch <span class="sr-only">Current:</span>
   für Screen-Reader. Wir nutzen die visually-hidden-Technik, damit AT
   weiterhin den aktuellen Step-Namen vorliest. */
@media (max-width: 767px) {
  .checkout-step-label {
    display: block !important;
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
    visibility: visible !important;
    clip-path: inset(50%);
  }
}

/* --- 3) Step-Icons auf 44×44 (Touch-Target AAA + Apple HIG) -------------- */
@media (max-width: 767px) {
  .checkout-step-icon {
    width: 44px !important;
    height: 44px !important;
  }
  /* Connector line re-centred for the bigger icon */
  .checkout-step::before,
  .checkout-step::after {
    top: 22px !important;
  }
  .checkout-step::before { width: calc(50% - 22px) !important; }
  .checkout-step::after  { width: calc(50% - 22px) !important; }

  /* Connector contrast: default rgba(...,0.10) fails 1.4.11 (1.09:1 on black) */
  .checkout-step::before,
  .checkout-step::after {
    background: rgba(255,255,255,0.30) !important;
  }
  .checkout-step.step-done::before,
  .checkout-step.step-done::after,
  .checkout-step.step-current::before {
    background: var(--ldv-white) !important;
  }
  /* Let taps go to the step, not the connector */
  .checkout-step::before,
  .checkout-step::after {
    pointer-events: none !important;
  }

  /* Distinguish current vs. done clearly */
  .checkout-step.step-current .checkout-step-icon {
    box-shadow: 0 0 0 4px rgba(255,255,255,0.15) !important;
    transform: scale(1.05);
  }
  .checkout-step.step-done .checkout-step-icon {
    background: transparent !important;
    border: 2px solid var(--ldv-white) !important;
    color: var(--ldv-white) !important;
  }
  .checkout-step.step-done .checkout-step-icon .fa,
  .checkout-step.step-done .checkout-step-icon * {
    color: var(--ldv-white) !important;
  }
}

/* --- 4) Global: sichtbarer Focus-Ring auf Dark-Theme --------------------- */
/* Vorher war nur ein 0 0 20px rgba(...,0.10) Glow → ~1.1:1 unsichtbar. */
.btn:focus-visible,
a:focus-visible,
summary:focus-visible,
.form-control:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.checkout-step:focus-visible,
.checkout-step > a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ldv-white) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.8) !important;
}
.btn-primary:focus-visible {
  outline-offset: 4px !important;
}

/* --- 5) Sticky Continue-Button auf Mobile ------------------------------- */
/* pretix rendert die Checkout-Actions typischerweise als letzte .btn-block
   im <form>. Wir stickyn den primären CTA unten, Go-Back bleibt darüber. */
@media (max-width: 767px) {
  form .btn-primary.btn-block.btn-lg,
  .checkout-actions .btn-primary.btn-lg,
  .checkout-buttons .btn-primary.btn-lg {
    position: sticky;
    bottom: max(10px, env(safe-area-inset-bottom, 10px));
    z-index: 20;
    box-shadow: 0 6px 24px rgba(0,0,0,0.55);
  }
  /* Guarantee some space above the sticky CTA */
  main#content, .main-box {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }
}

/* --- 6) Cart-Preis-Hierarchie auf Mobile -------------------------------- */
@media (max-width: 767px) {
  .cart-row > .singleprice,
  .cart-row > [role="cell"].singleprice {
    color: var(--ldv-text-muted);
    font-size: 0.85rem;
  }
  .cart-rowgroup-total .cart-row,
  .cart-row.total {
    background: var(--ldv-glass-04);
    border-radius: var(--ldv-r-sm);
    padding: 14px 14px !important;
    margin-top: 12px;
    font-size: 1.05rem;
  }
  .cart-rowgroup-total .cart-row .totalprice,
  .cart-row.total .totalprice,
  .cart-row.total [role="cell"].totalprice {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ldv-white) !important;
  }
  .cart-row small,
  .cart-row.tax {
    color: var(--ldv-text-dim);
    font-size: 0.78rem;
  }
}

/* --- 7) Cart-Row Overflow-Schutz ---------------------------------------- */
@media (max-width: 767px) {
  .cart-row > .product,
  .cart-row > [role="cell"].product {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .cart-row .item-description {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* --- 8) Quantity-Spinner: 44px Tap-Targets, 16px Font (iOS) ------------- */
@media (max-width: 767px) {
  .input-item-count-dec,
  .input-item-count-inc {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.15rem;
  }
  .input-item-count-group {
    gap: 10px;
  }
}

/* --- 9) Reduced-Transparency: Glass-Effekte killen ---------------------- */
@media (prefers-reduced-transparency: reduce) {
  .panel, .panel.panel-default, .panel.panel-primary,
  .form-control, .btn-secondary, .btn-default,
  .modal-card, dialog.modal-card,
  details.cart, details.sneak-peek-container,
  .week-calendar .weekday, .day-calendar,
  .event-time {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--ldv-black-soft) !important;
  }
}

/* =======================================================================
   29) MOBILE CHECKOUT — REVISION v3
   Konkrete Fixes nach visueller Prüfung des mobilen Warenkorbs:
   • Cart-Row: CSS-Grid statt Flex-Spalte → Produkt oben, Menge·Einzelpreis
     links, Gesamtpreis rechts, alles baseline-aligned
   • TOTAL-Box: Grid mit Label links, Betrag rechts, richtige Hierarchie
   • Cart-Header: Timer & Titel kompakter, Chevron nicht mehr überlappend
   • Reservation-Button & -Hinweis: weniger Padding, kleinere Typo
   • Checkout-Step-Icons: Linien optisch zentrieren
   ======================================================================= */

/* --- 29.1) Cart-Row: Grid-Layout auf Mobile + Tablet ------------------ */
@media (max-width: 991px) {
  .cart .cart-row,
  .cart div[role="row"].cart-row {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "product  product     product"
      "count    singleprice totalprice" !important;
    column-gap: 8px !important;
    row-gap: 10px !important;
    align-items: baseline !important;
    padding: 14px 0 !important;
  }
  .cart .cart-row > [role="cell"].product,
  .cart .cart-row > .product {
    grid-area: product !important;
    width: auto !important;
    flex: unset !important;
  }
  .cart .cart-row > [role="cell"].count,
  .cart .cart-row > .count {
    grid-area: count !important;
    width: auto !important;
    flex: unset !important;
    text-align: left !important;
    color: var(--ldv-text-muted) !important;
    font-size: 0.92rem !important;
    white-space: nowrap !important;
  }
  .cart .cart-row > .count::after {
    content: " \00D7"; /* × */
    margin-left: 2px;
    opacity: 0.7;
  }
  .cart .cart-row > [role="cell"].singleprice,
  .cart .cart-row > .singleprice {
    grid-area: singleprice !important;
    width: auto !important;
    flex: unset !important;
    text-align: left !important;
    color: var(--ldv-text-muted) !important;
    font-size: 0.92rem !important;
    white-space: nowrap !important;
  }
  .cart .cart-row > [role="cell"].totalprice,
  .cart .cart-row > .totalprice {
    grid-area: totalprice !important;
    width: auto !important;
    flex: unset !important;
    text-align: right !important;
    justify-self: end !important;
    white-space: nowrap !important;
  }
  .cart .cart-row > .totalprice strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ldv-text);
  }
  .cart .cart-row > .totalprice small {
    display: block;
    font-size: 0.82rem;
    color: var(--ldv-text-muted) !important;
    margin-top: 2px;
  }
  .cart .cart-row > .clearfix {
    display: none !important;
  }
  /* Produkt-Block: tighteres Icon-Meta-Layout */
  .cart .cart-row .cart-icon-details {
    margin-top: 4px;
  }
  .cart .cart-row .cart-icon-details dd {
    font-size: 0.88rem;
    line-height: 1.4;
  }
}

/* --- 29.2) TOTAL-Box: saubere zweispaltige Darstellung (Mobile+Tablet) */
@media (max-width: 991px) {
  .cart .cart-row.total,
  .cart div[role="row"].cart-row.total {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto !important;
    grid-template-areas: none !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    padding: 14px 16px !important;
    margin-top: 14px !important;
    background: var(--ldv-glass-06, rgba(255,255,255,0.10)) !important;
    border: 1px solid var(--ldv-border-medium, rgba(255,255,255,0.20)) !important;
    border-radius: 14px !important;
  }
  /* Pretix nutzt div[role="cell"] Kinder für TOTAL – wir ordnen per Pos. */
  .cart .cart-row.total > * {
    width: auto !important;
    grid-area: auto !important;
  }
  .cart .cart-row.total > .count { display: none !important; }
  .cart .cart-row.total > .singleprice { display: none !important; }
  /* Label links: Produkt-Zelle in Zeile 1, Spalte 1 */
  .cart .cart-row.total > .product,
  .cart .cart-row.total > [role="cell"].product {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    text-align: left !important;
  }
  /* Gesamt rechts: totalprice in Zeile 1, Spalte 2 */
  .cart .cart-row.total > .totalprice,
  .cart .cart-row.total > [role="cell"].totalprice {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    text-align: right !important;
  }
  .cart .cart-row.total > .clearfix { display: none !important; }
  .cart .cart-row.total strong {
    font-size: 1.15rem !important;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .cart .cart-row.total small {
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ldv-text-muted) !important;
  }
}

/* --- 29.3) Cart-Header: Titel & Timer kompakt, Chevron separiert ------- */
@media (max-width: 767px) {
  details.cart > summary.panel-heading {
    padding: 14px 16px !important;
  }
  details.cart > summary .panel-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.04em;
  }
  details.cart > summary .panel-title > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  #cart-deadline-short {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ldv-text-muted) !important;
    white-space: nowrap;
    margin-right: 30px;
  }
}

/* --- 29.4) Reservation-Hinweis & -Button kompakter -------------------- */
@media (max-width: 767px) {
  .cart #cart-deadline {
    font-size: 0.8rem !important;
    color: var(--ldv-text-muted) !important;
    margin: 12px 4px 8px !important;
    line-height: 1.4;
  }
  #cart-extend-button {
    padding: 10px 16px !important;
    font-size: 0.82rem !important;
    font-weight: 600;
    letter-spacing: 0.06em;
    background: var(--ldv-glass-04, rgba(255,255,255,0.08)) !important;
    color: var(--ldv-text) !important;
    border: 1px solid var(--ldv-border-medium, rgba(255,255,255,0.20)) !important;
    border-radius: var(--ldv-r-pill, 9999px) !important;
    min-height: 40px !important;
    width: auto !important;
    margin: 0 4px !important;
  }
}

/* --- 29.5) Checkout-Step-Connector-Linien visuell zentrieren ----------- */
@media (max-width: 767px) {
  ol.checkout-flow {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 8px 0 4px !important;
    margin-bottom: 18px !important;
  }
  ol.checkout-flow > li.checkout-step {
    flex: 1 1 0 !important;
    min-width: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }
  /* Verbindungslinien zwischen den Schritten: mobil komplett entfernen */
  .checkout-step::before,
  .checkout-step::after,
  .checkout-flow .checkout-step::before,
  .checkout-flow .checkout-step::after {
    display: none !important;
  }
  /* Alle Step-Icons als runde Kreise mit korrekter Line-Height */
  .checkout-flow .checkout-step .checkout-step-icon {
    border-radius: 100% !important;
    line-height: 40px !important;
  }
}

/* --- 29.6) H1 auf Mobile: weniger Top-Margin ------------------------- */
@media (max-width: 767px) {
  main h1:first-child,
  #content h1:first-child {
    margin-top: 12px !important;
    margin-bottom: 8px !important;
  }
}

/* --- 29.7) Cart-Panel: Bottom-Padding reduzieren ---------------------- */
@media (max-width: 767px) {
  details.cart .panel-body,
  details.cart #cart-foldable-container {
    padding-bottom: 14px !important;
  }
}

/* --- 29.8) Name-Parts (Given/Family Name): mobil trennen & pill-Radius - */
@media (max-width: 767px) {
  .nameparts-form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .nameparts-form-group > .form-control,
  .nameparts-form-group > input[type="text"] {
    border-radius: var(--ldv-r-pill) !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
}

/* --- 29.9) Sneak-Peek-Cart: mobil initial voll zeigen, Animation erhalten */
/* Pretix hält .sneak-peek-content initial bei 8em Höhe + overflow:hidden,
   bis der User den Trigger klickt. Mobil wollen wir den Cart direkt voll
   sehen. WICHTIG: nur wirken wenn .details-open am Container ist. jQuery
   entfernt .details-open BEVOR slideUp läuft, damit greift unser Override
   während der Animation NICHT und jQuery kann die inline-height animieren.
   Nicht das direkte <div>-Kind überschreiben — darauf animiert jQuery. */
@media (max-width: 767px) {
  details.sneak-peek-container.details-open .sneak-peek-content,
  details.sneak-peek-container[open] .sneak-peek-content#cart-foldable-container {
    height: auto !important;
    overflow: visible !important;
  }
  /* Gradient-Fade-Trigger abschalten */
  .sneak-peek-content::after,
  details.sneak-peek-container::after {
    display: none !important;
    content: none !important;
  }
}

/* =======================================================================
   30) BADGES & LABELS — monochrom statt Bootstrap-Bunt
   Event-Liste zeigt "EVENT SERIES" etc. in Default-Bootstrap-Blau.
   Wir mappen alle farbigen Badge-/Label-Varianten auf die Glass-Palette.
   ======================================================================= */
.btn-info,
.label-info,
.badge-info,
.btn-warning,
.label-warning,
.badge-warning,
.btn-success,
.label-success.event-status-running,
.label-primary {
  background: var(--ldv-glass-04) !important;
  color: var(--ldv-text) !important;
  border: 1px solid var(--ldv-border-subtle) !important;
  box-shadow: none !important;
}
.label-info:hover,
.btn-info:hover {
  background: var(--ldv-glass-08) !important;
  border-color: var(--ldv-border-medium) !important;
}

.in-iframe body{
  background: #000 !important;
}