/* ==================================================================
 * ESN Uni Wien – pretix restyle
 * Override for the ticket shop on tickets.esnuniwien.com.
 *
 *  1. Base: page, type, links
 *  2. Layout: header, main card, footer
 *  3. Buttons
 *  4. Forms
 *  5. Panels, alerts, status bubbles
 *  6. Organizer page: event list, calendars
 *  7. Event page: info, products, quantities
 *  8. Cart and checkout
 *  9. Order page
 * 10. Dialogs
 * 11. Small screens, reduced motion
 * ================================================================== */


/* 1. Base: page, type, links ----------------------------------------- */
body {
  border-top: 0;
  background:
    radial-gradient(60rem 40rem at 0% -10%, rgba(0, 174, 239, 0.12), transparent 60%),
    var(--esn-surface-muted);
  background-attachment: fixed;
  color: var(--esn-ink);
  font-family: var(--esn-font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* The ESN colour stripe across the top of every page. */
body::before {
  content: "";
  display: block;
  height: var(--esn-stripe-height);
  background: var(--esn-stripe);
}

::selection {
  background: var(--esn-cyan-tint);
  color: var(--esn-ink);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--esn-dark-blue);
  font-family: var(--esn-font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
}
h1, .h1, h2, .h2 {
  font-weight: 700;
  text-transform: uppercase;
}
h1 small, h2 small, h3 small, .h1 small, .h2 small, .h3 small {
  color: var(--esn-muted);
  font-family: var(--esn-font-body);
  font-weight: 400;
  text-transform: none;
}

a {
  color: var(--esn-dark-blue);
}
a:hover, a:focus {
  color: var(--esn-magenta-strong);
}

.text-muted, .help-block {
  color: var(--esn-muted);
}
.text-success { color: var(--pretix-brand-success-shade-42); }
.text-info { color: var(--pretix-brand-info-shade-42); }
.text-warning { color: var(--pretix-brand-warning-shade-42); }
.text-danger { color: var(--esn-magenta-strong); }

hr {
  border-top-color: var(--esn-line);
}

code {
  border-radius: 6px;
  background: var(--esn-magenta-tint);
  color: var(--esn-magenta-strong);
}

/* pretix outlines focused elements in a dark shade of the primary colour. */
button:focus, a:focus, .btn:focus, summary:focus, div:focus,
button:active:focus, a:active:focus, .btn:active:focus, summary:active:focus, div:active:focus,
button.active:focus, a.active:focus, .btn.active:focus,
input:focus, .form-control:focus, .btn-checkbox:has(input:focus),
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus,
.input-item-count-group:has(input:focus), .input-group-price:has(input:focus) {
  outline: 3px solid var(--esn-cyan);
  outline-offset: 2px;
}
.btn-checkbox input:focus, .input-item-count-group input:focus, .input-group-price input:focus {
  outline: none;
}

#skip-to-main a {
  border-radius: var(--esn-radius-pill);
  background: var(--esn-dark-blue);
  color: #fff;
  font-weight: 700;
}


/* 2. Layout: header, main card, footer ------------------------------- */
.page-header-links a {
  font-weight: 700;
}
.locales a, .loginstatus a {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--esn-radius-pill);
  text-decoration: none;
}
.locales a.active, .locales a:hover, .loginstatus a:hover {
  background: #fff;
  box-shadow: var(--esn-shadow-sm);
  text-decoration: none;
}

@media (min-width: 768px) {
  .main-box {
    margin-top: 28px;
    margin-bottom: 28px;
    padding: 8px 40px 24px;
    border-radius: var(--esn-radius-2xl);
    box-shadow: var(--esn-shadow-lg);
  }
}
.main-box {
  background: #fff;
}

.page-header {
  margin-top: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--esn-line);
}
.page-header h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}
.page-header .event-logo,
.page-header .organizer-logo {
  max-height: 96px;
  width: auto;
}

/* The organizer page has no logo set, only its name: show the ESN Uni Wien
 * logo instead and keep the name for screen readers. */
.page-header h1 a[href$="/uw/"] {
  display: block;
  width: 176px;
  height: 96px;
  overflow: hidden;
  background: url("img/esn-logo.png") left center / contain no-repeat;
  color: transparent;
  white-space: nowrap;
  text-indent: 100%;
}

h2.content-header {
  margin-bottom: 20px;
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  line-height: 1.1;
}

footer {
  padding: 8px 0 24px;
}
footer nav {
  color: var(--esn-muted);
  font-size: 0.8125rem;
}
footer nav a:link, footer nav a:visited {
  color: var(--esn-ink-soft);
}
footer nav a:hover {
  color: var(--esn-magenta-strong);
}
footer nav li:not(:first-child)::before {
  color: var(--esn-line);
}


/* 3. Buttons ---------------------------------------------------------- */
.btn {
  border: 0;
  border-radius: var(--esn-radius-pill);
  font-family: var(--esn-font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 22px;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s var(--esn-ease-out);
}
.btn-lg {
  padding: 14px 30px;
  font-size: 1.0625rem;
}
.btn-sm {
  padding: 6px 14px;
  letter-spacing: 0.04em;
}
.btn-xs {
  padding: 2px 10px;
  letter-spacing: 0.04em;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary.active {
  background: var(--esn-dark-blue);
  box-shadow: var(--esn-shadow-md);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:active:hover {
  background: var(--esn-dark-blue-strong);
  box-shadow: var(--esn-shadow-lg);
  color: #fff;
}

.btn-default,
.btn-default:focus,
.btn-default:active,
.btn-default:active:focus {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--esn-line);
  color: var(--esn-dark-blue);
}
.btn-default:hover,
.btn-default:active:hover {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--esn-dark-blue);
  color: var(--esn-dark-blue);
}
.btn-default.active,
.btn-default.active:hover,
.btn-default.active:focus {
  background: var(--esn-dark-blue);
  box-shadow: none;
  color: #fff;
}

.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:active:hover {
  background: var(--pretix-brand-success-shade-42);
  box-shadow: none;
  color: #fff;
}
.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger:active:hover {
  background: var(--esn-magenta-strong);
  box-shadow: none;
  color: #fff;
}
.btn-link {
  color: var(--esn-dark-blue);
  letter-spacing: 0.02em;
}

/* Lift on hover only where a real pointer can hover. */
@media (hover: hover) {
  .btn-primary:hover, .btn-lg:hover {
    transform: translateY(-2px);
  }
}

.btn[disabled], .btn.disabled {
  opacity: 0.45;
  box-shadow: none;
  transform: none;
}

/* Segmented controls (List / Week / Month / Day, calendar paging). */
.btn-group {
  padding: 4px;
  border-radius: var(--esn-radius-pill);
  background: var(--esn-surface-sunken);
}
.btn-group > .btn,
.btn-group > .btn:first-child:not(:last-child),
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .btn:not(:first-child):not(:last-child) {
  border-radius: var(--esn-radius-pill);
}
.btn-group > .btn-default,
.btn-group > .btn-default:focus {
  background: transparent;
  box-shadow: none;
  color: var(--esn-ink-soft);
}
.btn-group > .btn-default:hover {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: none;
  color: var(--esn-dark-blue);
}
.btn-group > .btn-default.active,
.btn-group > .btn-default.active:hover,
.btn-group > .btn-default.active:focus {
  background: #fff;
  box-shadow: var(--esn-shadow-sm);
  color: var(--esn-dark-blue);
}
.btn-group + .btn {
  margin-left: 8px;
}


/* 4. Forms ------------------------------------------------------------ */
.form-control {
  height: auto;
  min-height: 42px;
  padding: 9px 14px;
  border: 1.5px solid var(--esn-line);
  border-radius: var(--esn-radius-md);
  box-shadow: none;
  color: var(--esn-ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus,
.form-control.is-focused {
  border-color: var(--esn-cyan);
  box-shadow: 0 0 0 4px var(--esn-cyan-tint);
  outline: none;
}
.form-control::placeholder {
  color: var(--esn-muted);
  font-style: normal;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  background: var(--esn-surface-muted);
}
textarea.form-control {
  min-height: 84px;
}

label, .control-label {
  color: var(--esn-ink);
  font-weight: 700;
}
.label-required {
  color: var(--esn-magenta-strong);
}

.radio label, .checkbox label {
  font-weight: 400;
}
input[type="radio"], input[type="checkbox"] {
  accent-color: var(--esn-dark-blue);
}

.has-error .form-control,
.form-control.has-error {
  border-color: var(--esn-magenta);
}
.has-error .form-control:focus,
.form-control.has-error:focus {
  border-color: var(--esn-magenta);
  box-shadow: 0 0 0 4px var(--esn-magenta-tint);
}
.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox {
  color: var(--esn-magenta-strong);
}

.input-group-addon {
  border: 1.5px solid var(--esn-line);
  border-radius: var(--esn-radius-md);
  background: var(--esn-surface-muted);
  color: var(--esn-ink-soft);
}
/* Buttons glued to inputs keep square inner corners. */
.input-group-btn > .btn {
  border-radius: var(--esn-radius-md);
  box-shadow: none;
}
.input-group .form-control:first-child,
.input-group-btn:last-child > .btn {
  min-height: 42px;
}

.nameparts-form-group {
  gap: 8px;
}


/* 5. Panels, alerts, status bubbles ---------------------------------- */
.panel {
  border: 1px solid var(--esn-line);
  border-radius: var(--esn-radius-lg);
  box-shadow: none;
  overflow: clip;
}
.panel-default > .panel-heading {
  border-bottom: 1px solid var(--esn-line);
  background: var(--esn-surface-muted);
  color: var(--esn-ink);
}
.panel-primary {
  border-color: var(--esn-dark-blue);
}
.panel-primary > .panel-heading {
  border-color: var(--esn-dark-blue);
  background: var(--esn-dark-blue);
  color: #fff;
}
.panel-heading {
  padding: 14px 20px;
}
.panel-body {
  padding: 20px;
}
.panel-title {
  color: inherit;
  font-family: var(--esn-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.panel-title strong {
  font-weight: 600;
}
.panel-primary .panel-title {
  color: #fff;
}
.panel-footer {
  border-top-color: var(--esn-line);
  background: var(--esn-surface-muted);
}
.panel-default .panel-title a[data-toggle="collapse"]:hover {
  background: var(--esn-line-soft);
}
details > summary.panel-heading {
  cursor: pointer;
}
.list-group-item {
  border-color: var(--esn-line);
}
.list-group-item:first-child {
  border-top-left-radius: var(--esn-radius-lg);
  border-top-right-radius: var(--esn-radius-lg);
}
.list-group-item:last-child {
  border-bottom-left-radius: var(--esn-radius-lg);
  border-bottom-right-radius: var(--esn-radius-lg);
}

.alert {
  border: 0;
  border-radius: var(--esn-radius-lg);
  overflow: hidden;
}
.alert > :last-child {
  margin-bottom: 0;
}

.textbubble-success, .textbubble-success-warning, .textbubble-info, .textbubble-warning, .textbubble-danger,
.textbubble-success:has(> .fa:first-child), .textbubble-success-warning:has(> .fa:first-child),
.textbubble-info:has(> .fa:first-child), .textbubble-warning:has(> .fa:first-child),
.textbubble-danger:has(> .fa:first-child) {
  padding: 3px 12px;
  border-radius: var(--esn-radius-pill);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}
.textbubble-success {
  background: var(--esn-green-tint);
  color: #3f6e1c;
}
.textbubble-success .fa { color: var(--esn-green-strong); }
.textbubble-warning {
  background: var(--esn-orange-tint);
  color: #a4480b;
}
.textbubble-warning .fa { color: var(--esn-orange); }
.textbubble-danger {
  background: var(--esn-magenta-tint);
  color: var(--esn-magenta-strong);
}
.textbubble-danger .fa { color: var(--esn-magenta); }
.textbubble-info {
  background: var(--esn-cyan-tint);
  color: #00668c;
}
.textbubble-info .fa { color: var(--esn-cyan); }

/* Order status labels ("Paid", "Pending" …): tinted pills like the
 * status bubbles, because white text on ESN green or orange is unreadable. */
.label {
  padding: 3px 12px;
  border-radius: var(--esn-radius-pill);
  font-family: var(--esn-font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}
.label-default { background: var(--esn-surface-sunken); color: var(--esn-ink-soft); }
.label-primary { background: var(--esn-dark-blue-tint); color: var(--esn-dark-blue); }
.label-success { background: var(--esn-green-tint); color: #3f6e1c; }
.label-info { background: var(--esn-cyan-tint); color: #00668c; }
.label-warning { background: var(--esn-orange-tint); color: #a4480b; }
.label-danger { background: var(--esn-magenta-tint); color: var(--esn-magenta-strong); }
.badge {
  font-family: var(--esn-font-body);
}

.table > thead > tr > th {
  border-bottom: 2px solid var(--esn-line);
  color: var(--esn-ink-soft);
}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td {
  border-top-color: var(--esn-line);
}

.progress {
  border-radius: var(--esn-radius-pill);
  background: var(--esn-surface-sunken);
  box-shadow: none;
}


/* 6. Organizer page: event list, calendars --------------------------- */
.blank-after {
  margin: 24px 0;
}

/* The events below the view switcher (List / Week / Month / Day): a plain
 * section with a big heading instead of a boxed panel. */
.blank-after + .panel {
  border: 0;
  overflow: visible;
}
.blank-after + .panel > .panel-heading {
  padding: 0 0 16px;
  border: 0;
  background: none;
}
.blank-after + .panel > .panel-heading .panel-title {
  color: var(--esn-dark-blue);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0;
}
.blank-after + .panel > .panel-body {
  padding: 0;
}
.blank-after + .panel > hr {
  display: none;
}

/* "Show past events" / "Show upcoming events" below the list. */
.panel-body > p > em:has(> a[href*="old="]) {
  font-style: normal;
}
.panel-body > p > em > a[href*="old="] {
  display: inline-block;
  margin-top: 20px;
  padding: 9px 20px;
  border-radius: var(--esn-radius-pill);
  box-shadow: inset 0 0 0 2px var(--esn-line);
  color: var(--esn-dark-blue);
  font-family: var(--esn-font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: box-shadow 0.2s;
}
.panel-body > p > em > a[href*="old="]:hover {
  box-shadow: inset 0 0 0 2px var(--esn-dark-blue);
}

/* List view: every event a card. */
.event-list.full-width-list {
  display: grid;
  gap: 12px;
}
.event-list.full-width-list > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 18px 8px;
  border: 1px solid var(--esn-line);
  border-radius: var(--esn-radius-lg);
  background: #fff;
  transition: transform 0.25s var(--esn-ease-out), box-shadow 0.25s var(--esn-ease-out), border-color 0.25s;
}
.event-list.full-width-list > .row + .row {
  border-top: 1px solid var(--esn-line);
}
.alternating-rows .row:nth-child(even) {
  background: #fff;
}
.event-list.full-width-list > .row::before,
.event-list.full-width-list > .row::after {
  display: none;
}
@media (hover: hover) {
  .event-list.full-width-list > .row:hover {
    border-color: transparent;
    box-shadow: var(--esn-shadow-lg);
    transform: translateY(-2px);
  }
}
.event-list.full-width-list h3,
.event-list.full-width-list h4 {
  font-family: var(--esn-font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.25;
}
.event-list.full-width-list h3 a,
.event-list.full-width-list h4 a {
  color: var(--esn-dark-blue);
}
.event-list.full-width-list h3 a:hover,
.event-list.full-width-list h4 a:hover {
  color: var(--esn-magenta-strong);
  text-decoration: none;
}
.event-list.full-width-list article p {
  color: var(--esn-ink-soft);
}
.event-list.full-width-list article p > time {
  color: var(--esn-ink);
  font-weight: 700;
}
.event-list .fa-clock-o {
  color: var(--esn-cyan);
}

/* Month, week and day calendars. */
.table-calendar h3, .week-calendar h3, .day-calendar h3 {
  border-bottom-color: var(--esn-line);
  color: var(--esn-ink-soft);
  font-family: var(--esn-font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.table-calendar a.event, .week-calendar a.event, .day-calendar a.event {
  --status-bg-color: var(--esn-dark-blue-tint);
  --status-text-color: var(--esn-dark-blue);
  --status-border-color: var(--esn-dark-blue);
  padding: 5px 8px 5px 14px;
  border: 0;
  border-radius: var(--esn-radius-md);
  font-size: 0.8125rem;
  line-height: 1.35;
}
.table-calendar a.event::before, .week-calendar a.event::before, .day-calendar a.event::before {
  width: 5px;
}
.table-calendar a.event:hover, .week-calendar a.event:hover, .day-calendar a.event:hover {
  outline: 0;
  box-shadow: var(--esn-shadow-md);
}
.table-calendar a.event.available, .week-calendar a.event.available, .day-calendar a.event.available {
  --status-bg-color: var(--esn-green-tint);
  --status-text-color: #2f5413;
  --status-border-color: var(--esn-green);
}
.table-calendar a.event.waitinglist, .week-calendar a.event.waitinglist, .day-calendar a.event.waitinglist {
  --status-bg-color: var(--esn-orange-tint);
  --status-text-color: #8e4107;
  --status-border-color: var(--esn-orange);
}
.table-calendar a.event.reserved, .week-calendar a.event.reserved, .day-calendar a.event.reserved,
.table-calendar a.event.soldout, .week-calendar a.event.soldout, .day-calendar a.event.soldout {
  --status-bg-color: var(--esn-magenta-tint);
  --status-text-color: #8f0055;
  --status-border-color: var(--esn-magenta);
}
.table-calendar a.event.continued, .week-calendar a.event.continued, .day-calendar a.event.continued,
.table-calendar a.event.over, .week-calendar a.event.over, .day-calendar a.event.over {
  --status-bg-color: var(--esn-surface-muted);
  --status-text-color: var(--esn-muted);
  --status-border-color: var(--esn-line);
}
.table-calendar {
  border-collapse: separate;
  border-spacing: 0;
}
.table-calendar > thead > tr > th {
  border-bottom: 0;
  color: var(--esn-muted);
  font-family: var(--esn-font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.table-calendar > tbody > tr > td {
  border-top: 1px solid var(--esn-line);
}
.table-calendar .day:nth-child(even) {
  background: none;
}
.calendar-nav h2, .calendar-nav h3 {
  margin: 0;
}
.calendar-container:has(.calendar-empty) .calendar-empty,
.event-list:has(.calendar-empty) .calendar-empty {
  border-radius: var(--esn-radius-lg);
  color: var(--esn-ink-soft);
}
.event-list-filter-form {
  margin-bottom: 20px;
  padding: 16px 20px;
  border-radius: var(--esn-radius-lg);
  background: var(--esn-surface-muted);
}


/* 7. Event page: info, products, quantities -------------------------- */
.info-row {
  min-height: 34px;
  margin-bottom: 14px;
}
.info-row .info-row-icon,
.info-row > img {
  display: grid;
  place-items: center;
  top: -4px;
  left: 0;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 50%;
  background: var(--esn-cyan-tint);
  color: var(--esn-cyan-strong);
  font-size: 16px;
}
.info-row .info-row-icon .fa {
  vertical-align: middle;
}
.info-row p {
  margin-left: 48px;
}
.info-row:nth-of-type(2) .info-row-icon {
  background: var(--esn-magenta-tint);
  color: var(--esn-magenta-strong);
}

.item-category {
  margin-top: 8px;
}
.item-category > h3 {
  font-size: 1.5rem;
}
.product-row {
  padding: 18px 0;
}
.product-row::before,
.product-row.headline::before,
.product-row.simple::before,
article.item-with-variations:last-child::after,
.product-row:last-child::after {
  border-color: var(--esn-line);
}
.product-row h4, .product-row .h4 {
  color: var(--esn-dark-blue);
  font-family: var(--esn-font-display);
  font-size: 1.125rem;
  font-weight: 600;
}
.product-row .price {
  color: var(--esn-ink);
  font-family: var(--esn-font-display);
  font-size: 1.125rem;
  font-weight: 600;
}
.product-row .price small,
.product-row .price .text-uppercase {
  font-family: var(--esn-font-display);
}
.product-row .price ins {
  color: var(--esn-magenta-strong);
}
.product-row .availability-box.gone,
.product-row .availability-box .gone {
  color: var(--esn-magenta-strong);
}
.product-row .availability-box.unavailable,
.product-row .availability-box .unavailable {
  color: #a4480b;
}
.productpicture img {
  border-radius: var(--esn-radius-md);
}
.variation-description {
  color: var(--esn-muted);
}

/* Quantity stepper: one pill with − and + at the ends. */
.input-item-count-group {
  border-radius: var(--esn-radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--esn-line);
}
.input-item-count-group .btn,
.input-item-count-group .btn:hover,
.input-item-count-group .btn:focus {
  min-height: 40px;
  padding: 6px 0;
  background: transparent;
  box-shadow: none;
  color: var(--esn-dark-blue);
  font-family: var(--esn-font-body);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  transform: none;
}
.input-item-count-group .btn:hover {
  background: var(--esn-dark-blue-tint);
}
.input-item-count-dec {
  border-radius: var(--esn-radius-pill) 0 0 var(--esn-radius-pill);
}
.input-item-count-inc {
  border-radius: 0 var(--esn-radius-pill) var(--esn-radius-pill) 0;
}
.input-item-count-dec[disabled],
.input-item-count-inc[disabled],
.input-item-count-dec[disabled]:hover,
.input-item-count-inc[disabled]:hover {
  background: transparent;
  box-shadow: none;
  color: var(--esn-muted);
}
.input-item-count-group input.input-item-count {
  min-height: 40px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 700;
}
.input-item-count-group input.input-item-count:focus {
  box-shadow: none;
}

/* Single-item checkboxes ("Select") and the price input of pay-what-you-want items. */
.btn-checkbox,
.btn-checkbox:hover,
.btn-checkbox:focus {
  font-family: var(--esn-font-body);
  letter-spacing: 0;
  text-transform: none;
}
.btn-checkbox.btn-checkbox-checked {
  background: var(--esn-dark-blue-tint);
  box-shadow: inset 0 0 0 2px var(--esn-dark-blue);
}

#btn-add-to-cart {
  margin-top: 8px;
}

aside.front-page {
  margin-top: 40px;
  padding: 24px;
  border-radius: var(--esn-radius-xl);
  background: var(--esn-surface-muted);
}
aside.front-page > h2:first-child,
aside.front-page > h3:first-child,
aside.front-page > .h3:first-child {
  margin-top: 0;
  font-size: 1.375rem;
}


/* 8. Cart and checkout ------------------------------------------------ */
.cart-row {
  border-color: var(--esn-line);
}
.cart .cart-rowgroup-total {
  border-top-color: var(--esn-line);
}
.cart .total strong,
.cart-row .totalprice strong {
  color: var(--esn-dark-blue);
  font-family: var(--esn-font-display);
  font-weight: 600;
}
.cart .total strong {
  font-size: 1.375rem;
}
.sneak-peek-trigger {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.95) 44%, rgba(255, 255, 255, 0) 100%);
}
#cart-deadline-short {
  padding: 2px 10px;
  border-radius: var(--esn-radius-pill);
  background: var(--esn-orange-tint);
  color: #a4480b;
}

/* Checkout steps: done in dark blue, the current one in magenta. */
.checkout-flow {
  margin: 24px 0 20px;
}
.checkout-flow .checkout-step::before,
.checkout-flow .checkout-step::after {
  top: 26px;
  height: 4px;
  border-radius: 2px;
  background: var(--esn-line);
}
.checkout-flow .checkout-step.step-done::before,
.checkout-flow .checkout-step.step-done::after,
.checkout-flow .checkout-step.step-current::before {
  background: var(--esn-dark-blue);
}
.checkout-flow .checkout-step .checkout-step-icon {
  width: 36px;
  height: 36px;
  border: 2px solid var(--esn-line);
  border-radius: 50%;
  color: var(--esn-muted);
  line-height: 32px;
}
.checkout-flow .checkout-step.step-done .checkout-step-icon {
  border-color: var(--esn-dark-blue);
  background: var(--esn-dark-blue);
  color: #fff;
}
.checkout-flow .checkout-step.step-current .checkout-step-icon {
  border-color: var(--esn-magenta);
  background: var(--esn-magenta);
  box-shadow: 0 0 0 5px var(--esn-magenta-tint);
  color: #fff;
}
.checkout-flow .checkout-step .checkout-step-label {
  color: var(--esn-muted);
  font-family: var(--esn-font-display);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.checkout-flow .checkout-step.step-done .checkout-step-label,
.checkout-flow .checkout-step a .checkout-step-label,
.checkout-flow .checkout-step.step-done .checkout-step-label a {
  color: var(--esn-dark-blue);
}
.checkout-flow .checkout-step.step-current .checkout-step-label {
  color: var(--esn-magenta-strong);
  font-weight: 600;
}

.checkout-button-row {
  padding-top: 24px;
}

/* Payment methods: radio cards. */
fieldset.accordion-panel {
  transition: border-color 0.2s, box-shadow 0.2s;
}
.panel-group fieldset.accordion-panel + fieldset.accordion-panel {
  margin-top: 10px;
}
fieldset.accordion-panel:has(input[type="radio"]:checked) {
  border-color: var(--esn-dark-blue);
  box-shadow: 0 0 0 3px var(--esn-dark-blue-tint);
}
fieldset.accordion-panel > legend.accordion-radio > .panel-heading.panel-heading {
  padding: 16px 20px;
  border-bottom: 0;
  background: #fff;
  cursor: pointer;
}
fieldset.accordion-panel > legend > .panel-heading .panel-title {
  font-family: var(--esn-font-body);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}
fieldset.accordion-panel:has(input[type="radio"]:checked) > legend > .panel-heading {
  background: var(--esn-dark-blue-tint);
}

.panel-contact dl, .panel-confirm dl {
  margin-bottom: 0;
}
.panel-heading a.h6,
.panel-title a.h6 {
  color: inherit;
  font-family: var(--esn-font-body);
  letter-spacing: 0;
  text-transform: none;
}
.panel-confirm a {
  color: var(--esn-dark-blue);
}
.panel-confirm .checkbox label {
  font-weight: 700;
}

.profile-select-container,
.profile-save-container,
.profile-pre-select {
  background: var(--esn-surface-muted);
}


/* 9. Order page ------------------------------------------------------ */
.thank-you .fa {
  color: var(--esn-green);
}
.thank-you h2 {
  color: var(--esn-dark-blue);
}
.order-details {
  color: var(--esn-ink-soft);
}
.order-details strong {
  color: var(--esn-ink);
}
.info-download {
  padding: 20px;
  border-radius: var(--esn-radius-lg);
}
.panel-body.text-center .btn-lg {
  margin: 4px;
}


/* 10. Dialogs --------------------------------------------------------- */
.modal-card,
#loadingmodal,
dialog.modal-card {
  border: 0;
  border-radius: var(--esn-radius-xl);
  box-shadow: var(--esn-shadow-lg);
}
.modal-card-icon .fa {
  color: var(--esn-magenta);
}
.modal-card-content h2, .modal-card-content .h3 {
  text-transform: none;
}
.progress-bar-success {
  background: var(--esn-green);
}


/* 11. Small screens, reduced motion ----------------------------------- */
@media (max-width: 767px) {
  .main-box {
    padding-bottom: 16px;
  }
  .page-header {
    margin-top: 16px;
  }
  .page-header h1 a[href$="/uw/"] {
    width: 140px;
    height: 76px;
  }
  .page-header .event-logo,
  .page-header .organizer-logo {
    max-height: 72px;
  }
  .event-list.full-width-list > .row {
    padding: 16px 4px;
  }
  .event-list.full-width-list > .row > p:last-child {
    margin-top: 10px;
  }
  aside.front-page {
    padding: 20px 16px;
  }
  .btn-group {
    display: flex;
    margin-bottom: 8px;
  }
  .btn-group > .btn {
    flex: 1;
    padding-left: 6px;
    padding-right: 6px;
  }
  .btn-group + .btn {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
  }
  .btn:hover, .event-list.full-width-list > .row:hover {
    transform: none;
  }
}