body {
    background-color: var(--pl-surface-page);
    color: var(--pl-text);
    font-family: "tt-commons-pro", sans-serif;
    /*font-size: 1.0em;*/
    font-weight: 400;
    min-height: 100vh;
    overflow-y: auto;
}

.container-md {
    min-height: calc(100vh - 125px);
}

/* Convention section nav (CMS pages + Events tab bar) */
.convention-nav-tab {
    border-radius: 999px;
    font-weight: 700;
    padding: 0.6em 1.5em;
    border: 2px solid var(--pl-action-primary);
    color: var(--pl-action-primary);
    background-color: transparent;
    transition: background-color 0.15s, color 0.15s;
}

.convention-nav-tab:hover {
    background-color: var(--pl-action-primary-subtle);
    border-color: var(--pl-action-primary);
    color: var(--pl-text);
}

.convention-nav-tab.active {
    background-color: var(--pl-action-primary);
    border-color: var(--pl-action-primary);
    color: var(--pl-on-primary);
}

/* Event category filter chips - secondary to the convention nav above it */
.event-category-chip {
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85em;
    padding: 0.35em 1em;
    border: 1px solid var(--pl-action-secondary);
    color: var(--pl-text);
    background-color: var(--pl-surface-subtle);
    transition: background-color 0.15s, border-color 0.15s;
}

.event-category-chip:hover {
    background-color: var(--pl-action-secondary);
    color: var(--pl-on-secondary);
}

.event-category-chip.active {
    background-color: var(--pl-action-secondary);
    border-color: var(--pl-action-secondary);
    color: var(--pl-on-secondary);
    font-weight: 700;
}

:root {
    /* Palette inputs: tenant theme files replace these values only. */
    --pl-palette-neutral-0: #ffffff;
    --pl-palette-neutral-0-rgb: 255, 255, 255;
    --pl-palette-neutral-50: #f3f0e7;
    --pl-palette-neutral-900: #212121;
    --pl-palette-neutral-900-rgb: 33, 33, 33;
    --pl-palette-primary: #00a06e;
    --pl-palette-primary-rgb: 0, 160, 110;
    --pl-palette-secondary: #212121;
    --pl-palette-secondary-rgb: 33, 33, 33;
    --pl-palette-emphasis: #dad4f6;
    --pl-palette-emphasis-rgb: 218, 212, 246;
    --pl-palette-info: #dad4f6;
    --pl-palette-info-rgb: 218, 212, 246;
    --pl-palette-accent: #f4f66e;
    --pl-palette-accent-rgb: 244, 246, 110;
    --pl-palette-warm: #fed595;
    --pl-palette-warm-rgb: 254, 213, 149;
    --pl-palette-highlight: #e5f4b3;
    --pl-palette-highlight-rgb: 229, 244, 179;
    --pl-palette-danger: #b42318;
    --pl-palette-danger-rgb: 180, 35, 24;
    --pl-on-primary: #ffffff;
    --pl-on-secondary: #f3f0e7;
    --pl-on-info: #212121;
    --pl-on-warning: #212121;
    --pl-on-accent: #202020;
    --pl-on-danger: #ffffff;

    /* Semantic roles: public templates and application CSS use these. */
    --pl-surface-page: var(--pl-palette-neutral-50);
    --pl-surface: var(--pl-palette-neutral-0);
    --pl-surface-subtle: color-mix(in srgb, var(--pl-surface-page) 76%, var(--pl-surface));
    --pl-surface-highlight: var(--pl-palette-highlight);
    --pl-surface-emphasis: var(--pl-palette-emphasis);
    --pl-surface-tools: var(--pl-surface-emphasis);
    --pl-surface-warm: var(--pl-palette-warm);
    --pl-text: var(--pl-palette-neutral-900);
    --pl-text-muted: color-mix(in srgb, var(--pl-text) 62%, var(--pl-surface));
    --pl-border: color-mix(in srgb, var(--pl-text) 16%, var(--pl-surface));
    --pl-border-subtle: color-mix(in srgb, var(--pl-text) 8%, var(--pl-surface));
    --pl-action-primary: var(--pl-palette-primary);
    --pl-action-primary-hover: color-mix(in srgb, var(--pl-action-primary) 84%, var(--pl-text));
    --pl-action-primary-subtle: color-mix(in srgb, var(--pl-action-primary) 20%, var(--pl-surface));
    /* Optional decorative fills for primary buttons. Keep the primary action
       colour solid: Bootstrap utilities, focus rings, and color-mix() need a
       real colour value rather than a CSS gradient. */
    --pl-action-primary-fill: none;
    --pl-action-primary-fill-hover: none;
    --pl-action-secondary: var(--pl-palette-secondary);
    --pl-action-secondary-hover: color-mix(in srgb, var(--pl-action-secondary) 82%, var(--pl-text));
    --pl-accent: var(--pl-palette-accent);
    --pl-action-info: var(--pl-palette-info);
    --pl-action-info-hover: color-mix(in srgb, var(--pl-action-info) 84%, var(--pl-text));
    --pl-status-success: var(--pl-palette-primary);
    --pl-status-warning: var(--pl-palette-warm);
    --pl-status-danger: var(--pl-palette-danger);

    /*
     * Bootstrap bridge.
     *
     * `body` is the application canvas and is styled above with
     * --pl-surface-page. Bootstrap also reuses --bs-body-bg as the default
     * surface for controls, cards, menus, and panels, so it deliberately maps
     * to the white content surface instead of the Latte page canvas.
     */
    --bs-body-bg: var(--pl-surface);
    --bs-body-bg-rgb: var(--pl-palette-neutral-0-rgb);
    --bs-body-color: var(--pl-text);
    --bs-body-color-rgb: var(--pl-palette-neutral-900-rgb);
    --bs-emphasis-color: var(--pl-text);
    --bs-emphasis-color-rgb: var(--pl-palette-neutral-900-rgb);
    --bs-secondary-color: var(--pl-text-muted);
    --bs-secondary-bg: var(--pl-surface-subtle);
    --bs-tertiary-bg: color-mix(in srgb, var(--pl-surface-page) 88%, var(--pl-text));
    --bs-border-color: var(--pl-border);
    --bs-primary: var(--pl-action-primary);
    --bs-primary-rgb: var(--pl-palette-primary-rgb);
    --bs-secondary: var(--pl-action-secondary);
    --bs-secondary-rgb: var(--pl-palette-secondary-rgb);
    --bs-success: var(--pl-status-success);
    --bs-success-rgb: var(--pl-palette-primary-rgb);
    --bs-info: var(--pl-action-info);
    --bs-info-rgb: var(--pl-palette-info-rgb);
    --bs-warning: var(--pl-status-warning);
    --bs-warning-rgb: var(--pl-palette-warm-rgb);
    --bs-danger: var(--pl-status-danger);
    --bs-danger-rgb: var(--pl-palette-danger-rgb);
    --bs-link-color: var(--pl-action-primary);
    --bs-link-color-rgb: var(--pl-palette-primary-rgb);
    --bs-link-hover-color: var(--pl-action-primary-hover);
    --bs-link-hover-color-rgb: var(--pl-palette-primary-rgb);
    --bs-focus-ring-color: color-mix(in srgb, var(--pl-action-primary) 25%, transparent);
    --bs-primary-text-emphasis: color-mix(in srgb, var(--pl-action-primary) 84%, var(--pl-text));
    --bs-primary-bg-subtle: var(--pl-action-primary-subtle);
    --bs-primary-border-subtle: color-mix(in srgb, var(--pl-action-primary) 38%, var(--pl-surface));
    --bs-secondary-text-emphasis: var(--pl-text);
    --bs-secondary-bg-subtle: color-mix(in srgb, var(--pl-action-secondary) 10%, var(--pl-surface));
    --bs-secondary-border-subtle: color-mix(in srgb, var(--pl-action-secondary) 26%, var(--pl-surface));
    --bs-success-text-emphasis: color-mix(in srgb, var(--pl-status-success) 84%, var(--pl-text));
    --bs-success-bg-subtle: var(--pl-action-primary-subtle);
    --bs-success-border-subtle: color-mix(in srgb, var(--pl-status-success) 38%, var(--pl-surface));
    --bs-info-text-emphasis: color-mix(in srgb, var(--pl-action-info) 84%, var(--pl-text));
    --bs-info-bg-subtle: color-mix(in srgb, var(--pl-action-info) 20%, var(--pl-surface));
    --bs-info-border-subtle: color-mix(in srgb, var(--pl-action-info) 38%, var(--pl-surface));
    --bs-warning-text-emphasis: color-mix(in srgb, var(--pl-status-warning) 84%, var(--pl-text));
    --bs-warning-bg-subtle: color-mix(in srgb, var(--pl-status-warning) 20%, var(--pl-surface));
    --bs-warning-border-subtle: color-mix(in srgb, var(--pl-status-warning) 38%, var(--pl-surface));
    --bs-danger-text-emphasis: color-mix(in srgb, var(--pl-status-danger) 84%, var(--pl-text));
    --bs-danger-bg-subtle: color-mix(in srgb, var(--pl-status-danger) 12%, var(--pl-surface));
    --bs-danger-border-subtle: color-mix(in srgb, var(--pl-status-danger) 35%, var(--pl-surface));
    --bs-form-valid-color: var(--pl-status-success);
    --bs-form-valid-border-color: var(--pl-status-success);
    --bs-form-invalid-color: var(--pl-status-danger);
    --bs-form-invalid-border-color: var(--pl-status-danger);

    /* Legacy aliases retain compatibility while internal templates migrate. */
    --latte: var(--pl-surface-page);
    --black: var(--pl-text);
    --dolly: var(--pl-accent);
    --spring-kiss: var(--pl-surface-highlight);
    --japan-blush: var(--pl-surface-emphasis);
    --sun-splashed: var(--pl-surface-warm);
    --greenfields: var(--pl-action-primary);

    --clip-path-16: polygon( 0% 5.166%,0% 98.616%,0% 98.616%,0.006% 98.839%,0.022% 99.051%,0.048% 99.249%,0.083% 99.43%,0.126% 99.592%,0.176% 99.731%,0.231% 99.844%,0.292% 99.929%,0.358% 99.982%,0.426% 100%,97.301% 100%,97.301% 100%,97.37% 99.982%,97.435% 99.929%,97.496% 99.844%,97.552% 99.731%,97.602% 99.592%,97.644% 99.43%,97.679% 99.249%,97.705% 99.051%,97.722% 98.839%,97.727% 98.616%,97.727% 94.004%,97.727% 94.004%,97.733% 93.781%,97.749% 93.569%,97.775% 93.371%,97.81% 93.19%,97.853% 93.028%,97.903% 92.889%,97.959% 92.776%,98.02% 92.691%,98.085% 92.638%,98.153% 92.62%,98.153% 92.62%,99.574% 92.62%,99.574% 92.62%,99.642% 92.602%,99.708% 92.549%,99.769% 92.464%,99.825% 92.351%,99.874% 92.212%,99.917% 92.05%,99.952% 91.869%,99.978% 91.671%,99.994% 91.459%,100% 91.236%,100% 91.236%,100% 1.384%,100% 1.384%,99.994% 1.161%,99.978% 0.949%,99.952% 0.751%,99.917% 0.57%,99.874% 0.408%,99.825% 0.269%,99.769% 0.156%,99.708% 0.071%,99.642% 0.018%,99.574% 0%,2.699% 0%,2.699% 0%,2.63% 0.018%,2.565% 0.071%,2.504% 0.156%,2.448% 0.269%,2.398% 0.408%,2.356% 0.57%,2.321% 0.751%,2.295% 0.949%,2.278% 1.161%,2.273% 1.384%,2.273% 5.996%,2.273% 5.996%,2.267% 6.219%,2.251% 6.431%,2.225% 6.629%,2.19% 6.81%,2.147% 6.972%,2.097% 7.111%,2.041% 7.224%,1.98% 7.309%,1.915% 7.362%,1.847% 7.38%,1.847% 7.38%,0.426% 7.38%,0.426% 7.38%,0.358% 7.398%,0.292% 7.451%,0.231% 7.536%,0.176% 7.649%,0.126% 7.788%,0.083% 7.95%,0.048% 8.131%,0.022% 8.329%,0.006% 8.541%,0% 8.764%,0% 8.764%,0% 8.764%,0% 8.764%,0% 8.764%,0% 8.764%,0% 8.764%,0% 8.764%,0% 8.764%,0% 8.764%,0% 8.764%,0% 8.764% );
    --clip-path-8: polygon( 0% 14.844%,0% 97.656%,0% 97.656%,0.035% 98.036%,0.137% 98.397%,0.299% 98.733%,0.517% 99.04%,0.785% 99.313%,1.097% 99.548%,1.448% 99.738%,1.832% 99.88%,2.244% 99.969%,2.679% 100%,83.036% 100%,83.036% 100%,83.47% 99.969%,83.882% 99.88%,84.266% 99.738%,84.617% 99.548%,84.929% 99.313%,85.197% 99.04%,85.415% 98.733%,85.578% 98.397%,85.679% 98.036%,85.714% 97.656%,85.714% 97.656%,85.714% 89.844%,85.714% 89.844%,85.749% 89.464%,85.851% 89.103%,86.013% 88.767%,86.231% 88.46%,86.499% 88.187%,86.811% 87.952%,87.162% 87.762%,87.547% 87.62%,87.959% 87.531%,88.393% 87.5%,97.321% 87.5%,97.321% 87.5%,97.756% 87.469%,98.168% 87.38%,98.552% 87.238%,98.903% 87.048%,99.215% 86.813%,99.483% 86.54%,99.701% 86.233%,99.863% 85.897%,99.965% 85.536%,100% 85.156%,100% 2.344%,100% 2.344%,99.965% 1.964%,99.863% 1.603%,99.701% 1.267%,99.483% 0.96%,99.215% 0.687%,98.903% 0.452%,98.552% 0.262%,98.168% 0.12%,97.756% 0.031%,97.321% 0%,16.964% 0%,16.964% 0%,16.53% 0.031%,16.118% 0.12%,15.734% 0.262%,15.383% 0.452%,15.071% 0.687%,14.803% 0.96%,14.585% 1.267%,14.422% 1.603%,14.321% 1.964%,14.286% 2.344%,14.286% 2.344%,14.286% 10.156%,14.286% 10.156%,14.251% 10.536%,14.149% 10.897%,13.987% 11.233%,13.769% 11.54%,13.501% 11.813%,13.189% 12.048%,12.838% 12.238%,12.453% 12.38%,12.041% 12.469%,11.607% 12.5%,2.679% 12.5%,2.679% 12.5%,2.244% 12.531%,1.832% 12.62%,1.448% 12.762%,1.097% 12.952%,0.785% 13.187%,0.517% 13.46%,0.299% 13.767%,0.137% 14.103%,0.035% 14.464%,0% 14.844%,0% 14.844% );

    --clip-path-16-corner: path('M0 64 Q0 48 16 48 H32 Q48 48 48 32 V16 Q48 0 64 0 H10000 V100000 H0 Z');
    --clip-path-8-corner: path('M0 32Q0 24 8 24H16Q24 24 24 16V8Q24 0 32 0H10000V100000H0Z');
    --clip-path-4-corner: path('M0 16 Q0 12 4 12 H8 Q12 12 12 8 V4 Q12 0 16 0 H10000 V100000 H0 Z');


}

/*
 * Raised Bootstrap components live on the white content surface. These
 * variables are declared on the components because Bootstrap assigns its
 * defaults there, which takes precedence over a root-level custom property.
 */
.dropdown-menu {
    --bs-dropdown-bg: var(--pl-surface);
    --bs-dropdown-border-color: var(--pl-border);
    --bs-dropdown-divider-bg: var(--pl-border-subtle);
    --bs-dropdown-link-hover-bg: var(--pl-surface-subtle);
    --bs-dropdown-link-active-bg: var(--pl-action-primary);
    --bs-dropdown-link-active-color: var(--pl-on-primary);
}

.accordion {
    --bs-accordion-bg: var(--pl-surface);
    --bs-accordion-border-color: var(--pl-border);
    --bs-accordion-active-bg: var(--pl-surface-subtle);
    --bs-accordion-active-color: var(--pl-text);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--pl-action-primary) 25%, transparent);
}

.list-group {
    --bs-list-group-bg: var(--pl-surface);
    --bs-list-group-border-color: var(--pl-border);
    --bs-list-group-action-hover-bg: var(--pl-surface-subtle);
    --bs-list-group-action-active-bg: var(--pl-surface-subtle);
    --bs-list-group-active-bg: var(--pl-action-primary);
    --bs-list-group-active-border-color: var(--pl-action-primary);
    --bs-list-group-active-color: var(--pl-on-primary);
}

/* Bootstrap compiles text-bg foregrounds into its vendor CSS, so remap both
   foreground and background to semantic roles for the active tenant palette. */
.text-bg-primary {
    color: var(--pl-on-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-secondary {
    color: var(--pl-on-secondary) !important;
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-success {
    color: var(--pl-on-primary) !important;
    background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-info {
    color: var(--pl-on-info) !important;
    background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-warning {
    color: var(--pl-on-warning) !important;
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-danger {
    color: var(--pl-on-danger) !important;
    background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important;
}

.pl-tab-nav .nav-link {
    background-color: var(--pl-surface);
    color: var(--pl-text);
}

.pl-tab-nav .nav-link:hover,
.pl-tab-nav .nav-link:focus-visible {
    background-color: var(--pl-surface-subtle);
    color: var(--pl-text);
}

.pl-tab-nav .nav-link.active {
    background-color: var(--pl-action-primary);
    color: var(--pl-on-primary);
}

.pl-section-header__title--surface {
    background-color: var(--pl-surface);
}

.pl-section-header__title--page {
    background-color: var(--pl-surface-page);
}

.pl-section-header__title--highlight {
    background-color: var(--pl-surface-highlight);
}

.pl-section-header__title--emphasis {
    background-color: var(--pl-surface-emphasis);
}

.pl-section-header__title--warm {
    background-color: var(--pl-surface-warm);
}

/* Global shell: loaded once instead of being emitted in every base page. */
body.pwa-mode {
    padding-bottom: 64px;
}

#navigationDrawer .offcanvas-header {
    background: linear-gradient(135deg, var(--pl-action-primary) 0%, var(--pl-action-primary-hover) 100%);
    color: var(--pl-on-primary);
}

#navigationDrawer .offcanvas-header .btn-close {
    filter: brightness(0) invert(1);
}

#navigationDrawer .list-group-item {
    border: none;
    border-bottom: 1px solid var(--pl-border-subtle);
    padding: 1rem 1.25rem;
    transition: all 0.2s ease;
}

#navigationDrawer .list-group-item:hover {
    background-color: var(--pl-surface-subtle);
    padding-left: 1.5rem;
}

#navigationDrawer .list-group-item:active {
    background-color: var(--pl-action-primary-subtle);
}

#navigationDrawer .list-group-item i {
    width: 1.5rem;
    text-align: center;
}

#pwa-modal-bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    height: 64px;
}

#pwa-modal-bottom-menu .col [role="button"] {
    cursor: pointer;
    transition: transform 0.2s ease;
}

/* Convention card component. */
.convention-frame {
    background-color: var(--pl-surface);
    border-radius: 16px;
}

.convention-background {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-size: cover;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.convention-logo {
    background-color: var(--pl-surface-page);
    border-radius: 500px;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.convention-logo img {
    max-width: 100px;
    max-height: 100px;
}

.convention-title {
    background-color: var(--pl-surface-highlight);
    width: 100%;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: bold;
    line-height: 1.2;
}

.convention-title-name {
    font-size: 1.2em;
}

.convention-title-info {
    font-size: 0.8em;
}

.convention-options {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.6em;
    gap: 10px;
}

.convention-options .btn {
    font-weight: bold;
    flex: 1;
    padding: 0.6em 1em;
}

/* Profile ticket and dashboard components. */
.nav-tabs-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.nav-tabs-wrapper .nav-tabs {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

.nav-tabs-wrapper .nav-item {
    float: none;
    display: inline-block;
}

.object-element {
    background: var(--pl-surface-emphasis);
    border-radius: 8px;
}

.dashboard-event-element {
    background-color: var(--pl-surface);
    border-radius: 0 0 16px 16px;
}

.dashboard-page .offcanvas {
    z-index: 1050 !important;
}

.object-element-alt {
    background-color: var(--pl-surface-highlight);
    border-radius: 8px;
    box-shadow: 0 2px 4px color-mix(in srgb, var(--pl-text) 10%, transparent);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.object-element-alt:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px color-mix(in srgb, var(--pl-text) 15%, transparent);
}

.event-icon-wrapper {
    width: 40px;
    height: 40px;
    background-color: color-mix(in srgb, var(--pl-text) 10%, transparent);
    border-radius: 50%;
}

.event-name {
    font-size: 1.1rem;
    font-weight: 500;
}

.ticket-quantity,
.ticket-element-quantity-value {
    color: var(--pl-action-primary);
}

.ticket-quantity {
    width: 60px;
}

.ticket-element {
    margin: 0.5em 0;
}

.ticket-element-frame {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--pl-border);
}

.ticket-element-background {
    background-position: center;
    background-size: cover;
    min-height: 100px;
}

.ticket-element-inner {
    min-height: 100px;
}

.ticket-element-logo-col,
.ticket-element-quantity-col {
    flex-shrink: 0;
}

.ticket-element-logo-bg {
    width: 110px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75em;
}

.ticket-element-logo-img {
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
}

.ticket-element-title-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 1em;
}

.ticket-element-title,
.ticket-element-quantity {
    background-color: var(--pl-surface-highlight);
    border-radius: 8px;
    padding: 0.4em 0.75em;
}

.ticket-element-title {
    display: inline-block;
}

.ticket-element-name {
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.2;
}

.ticket-element-options {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.6em;
    gap: 10px;
    background-color: var(--pl-surface-page);
}

.ticket-element-options .btn {
    font-weight: bold;
    flex: 1;
    padding: 0.6em 1em;
}

.ticket-element-quantity-col {
    padding: 0.5em 1em;
}

.ticket-element-quantity {
    text-align: center;
}

.ticket-element-quantity-value {
    font-size: 1.2em;
    font-weight: bold;
}

@media (max-width: 768px) {
    .object-element-alt {
        padding: 1rem !important;
    }

    .event-name {
        font-size: 1rem;
    }
}

/* Prize wall layout components. */
.prize-wall-grid .event-element .flex-row {
    min-height: 130px;
}

.prize-wall-grid .event-description-tags,
.prize-wall-list .event-description-tags-small {
    background-color: color-mix(in srgb, var(--pl-surface) 40%, transparent);
    border-radius: 0 0 16px 16px;
    margin-top: auto;
    padding: 8px 0;
}

.prize-wall-list .event-logo-list {
    max-width: 120px;
    max-height: 80px;
}

.prize-wall-list .more-info-button {
    min-width: 120px;
}

/* Checkout-success component. */
.registration-success .event-list-element {
    display: flex;
    flex-direction: row;
    min-height: 100px;
    margin: 0.5em 0;
    background-color: var(--pl-surface-emphasis);
    border-radius: 16px;
    clip-path: var(--clip-path-8-corner);
    box-shadow: 0 2px 2px color-mix(in srgb, var(--pl-text) 10%, transparent);
    border: 1px solid var(--pl-border);
}

.registration-success .event-list .col-12:nth-child(2n) .event-list-element {
    background-color: var(--pl-surface-highlight);
}

.registration-success .event-list-element .event-element-background {
    width: 120px;
    background-position: center;
    background-size: cover;
    clip-path: var(--clip-path-8-corner);
    border-radius: 8px 0 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.registration-success .event-list-element .event-element-button {
    border-radius: 0 8px 8px 0;
    color: var(--pl-on-primary);
    padding: 0.5em 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    min-width: 120px;
    font-size: 0.8em;
}

.registration-success .event-list-element .event-element-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-weight: bold;
    color: var(--pl-text);
    line-height: 1.2;
    padding: 0.5em 1em;
    min-height: 80px;
    width: 100%;
}

.registration-success .event-list-element .event-element-name {
    font-size: 1.2em;
    text-align: center;
}

.registration-success .event-list-element .event-logo-logo {
    max-width: 60px;
    max-height: 60px;
}

.registration-success .event-list-element .event-element-date {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.7em;
    font-weight: bold;
}

.registration-success .event-list-element .event-element-date-value {
    padding-left: 0.5em;
}

.registration-success .event-element-description {
    font-weight: bold;
    font-size: 0.8em;
}

.registration-success .event-element-description .fa-solid {
    padding-right: 1em;
}

.registration-success a:not(.btn),
.registration-success a:not(.btn) * {
    color: inherit;
}

/* Bootstrap's button variants are compiled with fixed color values, so bridge
   them back to the semantic palette after the vendor stylesheet has loaded. */
.btn-primary {
    --bs-btn-color: var(--pl-on-primary);
    --bs-btn-bg: var(--pl-action-primary);
    --bs-btn-border-color: var(--pl-action-primary);
    --bs-btn-hover-color: var(--pl-on-primary);
    --bs-btn-hover-bg: var(--pl-action-primary-hover);
    --bs-btn-hover-border-color: var(--pl-action-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--pl-palette-primary-rgb);
    --bs-btn-active-color: var(--pl-on-primary);
    --bs-btn-active-bg: var(--pl-action-primary-hover);
    --bs-btn-active-border-color: var(--pl-action-primary-hover);
    --bs-btn-disabled-color: var(--pl-on-primary);
    --bs-btn-disabled-bg: var(--pl-action-primary);
    --bs-btn-disabled-border-color: var(--pl-action-primary);
    background-image: var(--pl-action-primary-fill);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-image: var(--pl-action-primary-fill-hover);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-image: none;
}

.btn-secondary {
    --bs-btn-color: var(--pl-on-secondary);
    --bs-btn-bg: var(--pl-action-secondary);
    --bs-btn-border-color: var(--pl-action-secondary);
    --bs-btn-hover-color: var(--pl-on-secondary);
    --bs-btn-hover-bg: var(--pl-action-secondary-hover);
    --bs-btn-hover-border-color: var(--pl-action-secondary-hover);
    --bs-btn-focus-shadow-rgb: var(--pl-palette-secondary-rgb);
    --bs-btn-active-color: var(--pl-on-secondary);
    --bs-btn-active-bg: var(--pl-action-secondary-hover);
    --bs-btn-active-border-color: var(--pl-action-secondary-hover);
}

.btn-info {
    --bs-btn-color: var(--pl-on-info);
    --bs-btn-bg: var(--pl-action-info);
    --bs-btn-border-color: var(--pl-text);
    --bs-btn-hover-color: var(--pl-on-info);
    --bs-btn-hover-bg: var(--pl-action-info-hover);
    --bs-btn-hover-border-color: var(--pl-text);
    --bs-btn-focus-shadow-rgb: var(--pl-palette-info-rgb);
    --bs-btn-active-color: var(--pl-on-info);
    --bs-btn-active-bg: var(--pl-action-info-hover);
    --bs-btn-active-border-color: var(--pl-action-info-hover);
}

.btn-success {
    --bs-btn-color: var(--pl-on-primary);
    --bs-btn-bg: var(--pl-status-success);
    --bs-btn-border-color: var(--pl-status-success);
    --bs-btn-hover-color: var(--pl-on-primary);
    --bs-btn-hover-bg: var(--pl-action-primary-hover);
    --bs-btn-hover-border-color: var(--pl-action-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--pl-palette-primary-rgb);
}

.btn-warning {
    --bs-btn-color: var(--pl-on-warning);
    --bs-btn-bg: var(--pl-status-warning);
    --bs-btn-border-color: var(--pl-status-warning);
    --bs-btn-hover-color: var(--pl-on-warning);
    --bs-btn-hover-bg: color-mix(in srgb, var(--pl-status-warning) 82%, var(--pl-text));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--pl-status-warning) 82%, var(--pl-text));
    --bs-btn-focus-shadow-rgb: var(--pl-palette-warm-rgb);
}

.btn-danger {
    --bs-btn-color: var(--pl-on-danger);
    --bs-btn-bg: var(--pl-status-danger);
    --bs-btn-border-color: var(--pl-status-danger);
    --bs-btn-hover-color: var(--pl-on-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--pl-status-danger) 82%, var(--pl-text));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--pl-status-danger) 82%, var(--pl-text));
    --bs-btn-focus-shadow-rgb: var(--pl-palette-danger-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--pl-action-primary);
    --bs-btn-border-color: var(--pl-action-primary);
    --bs-btn-hover-color: var(--pl-on-primary);
    --bs-btn-hover-bg: var(--pl-action-primary);
    --bs-btn-hover-border-color: var(--pl-action-primary);
    --bs-btn-focus-shadow-rgb: var(--pl-palette-primary-rgb);
    --bs-btn-active-color: var(--pl-on-primary);
    --bs-btn-active-bg: var(--pl-action-primary);
    --bs-btn-active-border-color: var(--pl-action-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--pl-action-secondary);
    --bs-btn-border-color: var(--pl-action-secondary);
    --bs-btn-hover-color: var(--pl-on-secondary);
    --bs-btn-hover-bg: var(--pl-action-secondary);
    --bs-btn-hover-border-color: var(--pl-action-secondary);
    --bs-btn-focus-shadow-rgb: var(--pl-palette-secondary-rgb);
    --bs-btn-active-color: var(--pl-on-secondary);
    --bs-btn-active-bg: var(--pl-action-secondary);
    --bs-btn-active-border-color: var(--pl-action-secondary);
}

.btn-outline-info {
    --bs-btn-color: var(--pl-text);
    --bs-btn-border-color: var(--pl-text);
    --bs-btn-hover-color: var(--pl-on-info);
    --bs-btn-hover-bg: var(--pl-action-info);
    --bs-btn-hover-border-color: var(--pl-text);
    --bs-btn-focus-shadow-rgb: var(--pl-palette-info-rgb);
    --bs-btn-active-color: var(--pl-on-info);
    --bs-btn-active-bg: var(--pl-action-info);
    --bs-btn-active-border-color: var(--pl-text);
}

.btn-outline-success {
    --bs-btn-color: var(--pl-status-success);
    --bs-btn-border-color: var(--pl-status-success);
    --bs-btn-hover-color: var(--pl-on-primary);
    --bs-btn-hover-bg: var(--pl-status-success);
    --bs-btn-hover-border-color: var(--pl-status-success);
    --bs-btn-focus-shadow-rgb: var(--pl-palette-primary-rgb);
}

.btn-outline-warning {
    --bs-btn-color: var(--pl-text);
    --bs-btn-border-color: var(--pl-status-warning);
    --bs-btn-hover-color: var(--pl-on-warning);
    --bs-btn-hover-bg: var(--pl-status-warning);
    --bs-btn-hover-border-color: var(--pl-status-warning);
    --bs-btn-focus-shadow-rgb: var(--pl-palette-warm-rgb);
}

.btn-outline-danger {
    --bs-btn-color: var(--pl-status-danger);
    --bs-btn-border-color: var(--pl-status-danger);
    --bs-btn-hover-color: var(--pl-on-danger);
    --bs-btn-hover-bg: var(--pl-status-danger);
    --bs-btn-hover-border-color: var(--pl-status-danger);
    --bs-btn-focus-shadow-rgb: var(--pl-palette-danger-rgb);
}

.wrapper-design-full-width {
    clip-path: var(--clip-path-16);
}

.wrapper-design-baseline {
    clip-path: var(--clip-path-8);
}

.wrapper-design-clip-path-16 {
    clip-path: path('M0 64Q0 48 16 48H32Q48 48 48 32V16Q48 0 64 0H10000V100000H0Z');
}

.wrapper-design-clip-path-8 {
    clip-path: path('M0 32Q0 24 8 24H16Q24 24 24 16V8Q24 0 32 0H10000V100000H0Z');
    border-radius: 16px;
}

/*h1 {*/
/*    margin-top: 0;*/
/*    margin-bottom: 0;*/
/*    font-size: 7.29em;*/
/*    font-weight: 600;*/
/*    line-height: .85;*/
/*}*/

/*h2 {*/
/*    margin-top: 0;*/
/*    margin-bottom: 0;*/
/*    font-size: 5.21em;*/
/*    font-weight: 600;*/
/*    line-height: .90;*/
/*}*/

/*h3 {*/
/*    margin-top: 0;*/
/*    margin-bottom: 0;*/
/*    font-size: 3.65em;*/
/*    font-weight: 600;*/
/*    line-height: .95;*/
/*}*/

/*h4 {*/
/*    margin-top: 0;*/
/*    margin-bottom: 0;*/
/*    font-size: 2.6em;*/
/*    font-weight: 600;*/
/*    line-height: .95;*/
/*}*/

/*h5 {*/
/*    margin-top: 0;*/
/*    margin-bottom: 0;*/
/*    font-size: 1.82em;*/
/*    font-weight: 700;*/
/*    line-height: 1;*/
/*}*/

/*h6 {*/
/*    margin-top: 0;*/
/*    margin-bottom: 0;*/
/*    font-size: 1.56em;*/
/*    font-weight: 700;*/
/*    line-height: 1;*/
/*}*/

p {
    margin-bottom: 0;
}

a {
    text-decoration: underline;
}

.navbar-nav .nav-link {
    font-size: 1.4em;
}

.event-element {
    background-color: var(--pl-surface);
    border-radius: 16px;
}

.event-element-header {
    border-radius: 16px 16px 0 0;
}

ul {
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 40px;
    /*font-size: 1.3em;*/
}

ol {
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 40px;
}

.form-label {
    font-size: 16px;
}

.nav-brand-img {
    width: 160px;
}

header .dropdown-menu .dropdown-item {
    padding: .5rem 1rem;
}


header .dropdown-menu .dropdown-item i {
    min-width: 20px;
    text-align: center;
}


/* Sticky navigation bar */
header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    width: 100%;
    background-color: var(--pl-surface-page);
}

header .navbar {
    margin-bottom: 0;
}

html {
    scroll-behavior: smooth;
}

/* PWA prompts styling */
#pwa-modal-install-app,
#pwa-modal-enable-notifications {
    animation: slideUp 0.3s ease-out;
}

#pwa-modal-bottom-menu .dropdown-toggle::after {
    content: none;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.element-background {
    background-color: var(--pl-surface);
    border-radius: 16px;
}



/*** Large Banner - End ***/


/*** Text Banner ***/

.banner-text {
    background-color: var(--pl-text);
    clip-path: path('M0 32Q0 24 8 24H16Q24 24 24 16V8Q24 0 32 0H10000V100000H0Z');
    min-height: 2.5em;
    width: 100%;
    color: var(--pl-surface-page);
    display: flex;
    align-items: center;
    justify-content: start;
    font-size: 1.6em;
    border-radius: 8px;
    padding: .2em 0 0 1.8em;
}

/*** Text Banner - End ***/

/*** Footer ***/

.footer {
    background-color: var(--pl-text);
    color: var(--pl-surface-page);
    font-weight: bold;
}

.footer a:link {
    color: inherit;
    text-decoration: none;
}

.bg-dev {
    background-color: #22333b;
}

.xsmall {
    font-size: 0.75em;
}

/* RegistrationElement component */

.reg-element {
    margin: 0.5em 0;
}

.reg-element-frame {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--pl-border);
    box-shadow: 0 2px 2px color-mix(in srgb, var(--pl-text) 10%, transparent);
}

.reg-element-background {
    background-position: center;
    background-size: cover;
    min-height: 120px;
}

.reg-element-inner {
    min-height: 120px;
}

.reg-element-logo-col {
    flex-shrink: 0;
}

.reg-element-logo-bg {
    width: 110px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75em;
}

.reg-element-logo-img {
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
}

.reg-element-content {
    padding: 0.75em 1em;
    gap: 0.5em;
}

.reg-element-title {
    background-color: var(--pl-surface-highlight);
    border-radius: 8px;
    padding: 0.4em 0.75em;
    display: inline-block;
}

.reg-element-name {
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.2;
}

.reg-element-name a {
    text-decoration: none;
    color: inherit;
}

.reg-element-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25em;
}

.reg-element-status-item {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.8em;
    font-weight: bold;
    background-color: var(--pl-surface-page);
    border-radius: 6px;
    padding: 0.3em 0.6em;
    white-space: nowrap;
}

.reg-element-date {
    font-size: 0.85em;
    font-weight: bold;
    background-color: var(--pl-surface-page);
    border-radius: 8px;
    padding: 0.4em 0.75em;
    display: inline-block;
    width: fit-content;
}

.reg-element-options {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.6em;
    gap: 10px;
    background-color: var(--pl-surface-page);
}

.reg-element-options .btn {
    font-weight: bold;
    flex: 1;
    padding: 0.6em 1em;
}

.reg-element-options .reg-element-info-btn {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.reg-element-info {
    padding: 0.75em 1em;
    background-color: var(--pl-surface-subtle);
    border-top: 1px solid var(--pl-border-subtle);
}

.reg-element-info-pills .nav-link {
    background-color: transparent;
    color: var(--pl-text);
    font-weight: bold;
    font-size: 0.85em;
    padding: 0.35em 0.85em;
}

.reg-element-info-pills .nav-link.active {
    background-color: var(--pl-action-secondary);
    color: var(--pl-on-secondary);
}

.reg-element-info-content {
    padding-top: 0.75em;
}

.reg-element-info-text {
    font-size: 0.9em;
}