/* Modern registration embed */
:root{
    --registrationRadiusSm: 11px;
    --registrationRadiusMd: 16px;
    --registrationRadiusLg: 23px;
    --registrationBorder: rgba(20, 30, 55, 0.09);
    --registrationMutedSurface: rgba(248, 250, 253, 0.62);
    --registrationShadowSm: 0 7px 20px rgba(20, 30, 55, 0.08);
    --registrationShadowMd: 0 16px 41px rgba(20, 30, 55, 0.12);
    --registrationShadowLg: 0 22px 63px rgba(20, 30, 55, 0.18);
}

.mainContent{
    min-height: 100%;
    background-color: var(--backgroundColor);
}

.mainContent > h3,
.mainContent > p,
.mainContent #bookedCourseOfferContainer > h3,
.mainContent #bookedCourseOfferContainer > p,
.mainContent #additonalCourseOfferContainer > h3,
.mainContent #additonalCourseOfferContainer > p,
.mainContent #personInputContainerInner > h3,
.mainContent #personInputContainerInner > p{
    width: min(100%, 882px);
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    box-sizing: border-box;
}

.mainContent.registrationView--button{
    width: auto;
    max-width: 100%;
    min-height: 0;
    display: inline-flex;
    background: transparent;
}

body.vivlico-embed .mainContent {
    min-height: 0;
    width: 100%;
    max-width: 100%;
}

body.vivlico-embed .mainContent .offerContainer {
    margin: 0;
}

body.vivlico-embed .mainContent .offerContainer.listView {
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.vivlico-embed .mainContent .offerContainer.listView table {
    width: max-content;
    min-width: 0;
    table-layout: auto;
}

body.vivlico-embed .mainContent .offerContainer.listView table tr {
    height: 1px;
}

body.vivlico-embed .mainContent .offerContainer.listView table td,
body.vivlico-embed .mainContent .offerContainer.listView table th {
    white-space: nowrap;
    vertical-align: middle;
    height: 100%;
}

body.vivlico-embed .mainContent .offerContainer.listView table td.sizeFlex {
    white-space: nowrap;
}

body.vivlico-embed .mainContent .offerContainer.listView table td.sizeFlex:empty {
    min-height: 29px;
}

body.vivlico-embed .mainContent .offerContainer.listView table td.size1,
body.vivlico-embed .mainContent .offerContainer.listView table td.size2,
body.vivlico-embed .mainContent .offerContainer.listView table td.size3,
body.vivlico-embed .mainContent .offerContainer.listView table th.size1,
body.vivlico-embed .mainContent .offerContainer.listView table th.size2,
body.vivlico-embed .mainContent .offerContainer.listView table th.size3 {
    min-width: 0;
    width: auto;
}

body.vivlico-embed {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body.vivlico-embed .backgroundModal {
    width: 100%;
    height: 100%;
}

body.vivlico-modal-open .mainContent {
    display: none !important;
    pointer-events: none;
}

body.vivlico-embed .backgroundModal:not(.closing) {
    animation: none;
    opacity: 1;
}

body.vivlico-embed .contentModal__surface {
    max-width: 100%;
}

@media only screen and (min-width: 1000px) and (min-height: 650px) {
    body.vivlico-embed .contentModal__surface {
        width: min(630px, calc(100% - 50px));
        height: min(calc(100dvh - 65px), 792px);
        max-height: min(calc(100dvh - 65px), 792px);
    }

    body.vivlico-embed .contentModal.login .contentModal__surface,
    body.vivlico-embed .contentModal.password .contentModal__surface {
        width: min(360px, calc(100% - 43px));
        max-height: min(calc(90dvh - 43px), 738px);
    }
}

.mainContent.registrationView--single{
    min-height: 0;
}

.logoContainer{
    width: min(100%, 882px);
    margin: 0 auto 22px auto;
    padding: 16px;
    border: 1px solid var(--registrationBorder);
    border-radius: var(--registrationRadiusLg);
    background: color-mix(in srgb, var(--cardColor) 94%, transparent);
    box-shadow: var(--registrationShadowSm);
}

.logoContainer img{
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 11px 25px rgba(20, 30, 55, 0.12);
}

.logoContainer .textContainer h3{
    font-size: clamp(22px, 4.8vw, 34px);
    line-height: 1.1;
}

.logoContainer .textContainer p{
    max-width: 684px;
    line-height: 1.58;
    color: var(--writeColorParagraph3);
}

.mainContent > p,
.mainContent #bookedCourseOfferContainer > p,
.mainContent #additonalCourseOfferContainer > p,
.mainContent #personInputContainerInner > p{
    line-height: 1.58;
    color: var(--writeColorParagraph3);
}

.memberButtonContainer{
    width: min(100%, 882px);
    margin: 20px auto 25px auto;
}

.memberCard{
    border: 1px solid var(--registrationBorder);
    border-radius: var(--registrationRadiusLg);
    background: var(--cardColor);
    box-shadow: var(--registrationShadowSm);
    overflow: hidden;
}

.memberCard .image{
    border-radius: 0;
    background-color: color-mix(in srgb, var(--secondaryColor) 35%, var(--cardColor));
    border-bottom: 1px solid var(--registrationBorder);
}

.memberCard .image .memberTag{
    border: 1px solid color-mix(in srgb, var(--highlightColor) 42%, var(--registrationBorder));
    background: color-mix(in srgb, var(--highlightColor) 8%, var(--cardColor));
    color: var(--highlightColor);
    font-weight: 700;
}

.memberCard .image .memberTag.disabled{
    border-color: color-mix(in srgb, var(--deniedColor) 42%, var(--registrationBorder));
    background: color-mix(in srgb, var(--deniedColor) 8%, var(--cardColor));
    color: var(--deniedColor);
}

.memberButton,
.shoppingButton,
.mainContent table td button,
.contentModal .mobileShoppingCart .contactData button:not(.bookingOfferModalChip):not(.registrationPersonPickerChip),
.flexButtonContainer button:not(.bookingOfferModalChip):not(.registrationPersonPickerChip),
.contentModal .mobileFooter .footerButton{
    min-height: 30px;
    font-size: 14.5px;
    border-radius: 899px;
    font-weight: 550;
    letter-spacing: 0.009em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.memberButton,
.shoppingButton,
.mainContent table td button{
    --_btn-accent: var(--primaryColor, var(--highlightColor));
    border: 1px solid color-mix(in srgb, var(--registrationBorder) 72%, var(--_btn-accent));
    background: var(--cardColor);
    color: var(--_btn-accent);
    box-shadow:
        0 1px 1.8px rgba(20, 30, 55, 0.04),
        inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent);
}

.contentModal .mobileShoppingCart .contactData button:not(.bookingOfferModalChip):not(.registrationPersonPickerChip),
.flexButtonContainer button:not(.bookingOfferModalChip):not(.registrationPersonPickerChip),
.contentModal .mobileFooter .footerButton:not(.prize),
.contentModal .mobileShoppingCart .contactData table td button{
    --_btn-accent: var(--primaryColor, var(--highlightColor));
    border: 1px solid color-mix(in srgb, var(--registrationBorder) 72%, var(--_btn-accent));
    background: var(--cardColor);
    box-shadow:
        0 1px 1.8px rgba(20, 30, 55, 0.04),
        inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent);
}

.contentModal .mobileShoppingCart .contactData button:not(.bookingOfferModalChip):not(.registrationPersonPickerChip):hover,
.flexButtonContainer button:not(.bookingOfferModalChip):not(.registrationPersonPickerChip):hover,
.contentModal .mobileFooter .footerButton:not(.prize):hover,
.contentModal .mobileShoppingCart .contactData table td button:hover{
    background: color-mix(in srgb, var(--_btn-accent) 4%, var(--cardColor));
    border-color: color-mix(in srgb, var(--_btn-accent) 45%, var(--registrationBorder));
    color: var(--_btn-accent);
    box-shadow:
        0 7px 18px rgba(20, 30, 55, 0.08),
        inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent);
}

.contentModal .mobileShoppingCart .contactData button.highlight:not(.bookingOfferModalChip):not(.registrationPersonPickerChip),
.flexButtonContainer button.highlight:not(.bookingOfferModalChip):not(.registrationPersonPickerChip),
.contentModal .mobileFooter .footerButton.valid,
.contentModal .mobileShoppingCart .contactData table td button.light2{
    --_btn-accent: var(--primaryColor, var(--highlightColor));
    border-color: color-mix(in srgb, var(--_btn-accent) 64%, var(--registrationBorder));
    background: color-mix(in srgb, var(--_btn-accent) 6%, var(--cardColor));
    color: var(--_btn-accent);
}

.contentModal .mobileShoppingCart .contactData button.disabled,
.contentModal .mobileShoppingCart .contactData button.disabled:hover{
    border-color: color-mix(in srgb, var(--writeColorParagraph2) 28%, var(--cardColor));
    background: color-mix(in srgb, var(--writeColorParagraph2) 5%, var(--cardColor));
    color: color-mix(in srgb, var(--writeColorParagraph2) 74%, var(--cardColor));
    box-shadow: none;
}

.memberButton.primary,
.shoppingButton,
.mainContent table td button,
.contentModal .mobileShoppingCart .contactData button.highlight:not(.bookingOfferModalChip):not(.registrationPersonPickerChip),
.flexButtonContainer button.highlight:not(.bookingOfferModalChip):not(.registrationPersonPickerChip),
.contentModal .mobileFooter .footerButton.valid,
.contentModal .mobileShoppingCart .contactData table td button.light2{
    --_btn-accent: var(--primaryColor, var(--highlightColor));
    border-color: color-mix(in srgb, var(--_btn-accent) 64%, var(--registrationBorder));
    background: color-mix(in srgb, var(--_btn-accent) 6%, var(--cardColor));
    color: var(--_btn-accent);
    box-shadow:
        0 1px 1.8px rgba(20, 30, 55, 0.05),
        0 7px 16px rgba(20, 30, 55, 0.08),
        inset 0 1px 0 color-mix(in srgb, #fff 36%, transparent);
}

.memberButton:hover,
.memberButton.primary:hover,
.shoppingButton:hover,
.mainContent table td button:hover{
    background: color-mix(in srgb, var(--_btn-accent) 9%, var(--cardColor));
    border-color: color-mix(in srgb, var(--_btn-accent) 45%, var(--registrationBorder));
    color: var(--_btn-accent);
}

.contentModal .mobileShoppingCart .contactData button.highlight:not(.bookingOfferModalChip):not(.registrationPersonPickerChip):hover,
.flexButtonContainer button.highlight:not(.bookingOfferModalChip):not(.registrationPersonPickerChip):hover,
.contentModal .mobileFooter .footerButton.valid:hover,
.contentModal .mobileShoppingCart .contactData table td button.light2:hover{
    background: color-mix(in srgb, var(--_btn-accent) 9%, var(--cardColor));
    box-shadow:
        0 1px 1.8px rgba(20, 30, 55, 0.04),
        0 7px 16px rgba(20, 30, 55, 0.08),
        inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent);
}

.shoppingButton{
    width: max-content;
    min-width: 171px;
    padding: 0 23px;
    line-height: 30px;
}

.mainContent.registrationView--button .shoppingButton{
    width: 100%;
    min-width: 0;
}

.mainContent .offerContainer{
    width: min(100%, 1062px);
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

/* Karten-Layout: Vanilla-JS-Masonry (Shortest-Column, gap/min-col per CSS-Variablen).
   Nur aktiv, wenn der Container die Klasse .offerMasonry traegt (offer/courseCategory).
   Single-Karten / Buttons bleiben im normalen Fluss. */
.mainContent .offerContainer.offerMasonry{
    position: relative;
    --offer-masonry-gap: 27px;
    --offer-masonry-min-col: 270px;
}

.mainContent .offerContainer.offerMasonry > .outerCardContainer{
    position: absolute;
    top: 0;
    left: 0;
    width: var(--offer-masonry-col-width, 100%);
    max-width: none;
    min-width: 0;
    margin: 0;
    will-change: transform;
}

.mainContent .offerContainer.offerMasonry--pending > .outerCardContainer{
    visibility: hidden;
    pointer-events: none;
}

.mainContent .offerContainer.offerMasonry--ready > .outerCardContainer{
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.15s ease;
}

.mainContent .offerContainer.offerMasonry--ready:not(.offerMasonry--revealed) > .outerCardContainer{
    opacity: 0;
}

.mainContent .offerContainer.offerMasonry--ready.offerMasonry--revealed > .outerCardContainer{
    opacity: 1;
}

.mainContent .offerGridSkeleton{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: 27px;
    width: min(100%, 1062px);
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

.mainContent .offerGridSkeleton .offerCardSkeleton{
    border: 1px solid var(--registrationBorder);
    border-radius: var(--registrationRadiusLg);
    overflow: hidden;
    background: var(--cardColor);
    box-shadow: var(--registrationShadowSm);
}

.mainContent .offerGridSkeleton .offerCardSkeleton__image{
    width: 100%;
    aspect-ratio: 4 / 3;
    border-bottom: 1px solid color-mix(in srgb, var(--registrationBorder) 70%, var(--cardColor));
}

.mainContent .offerGridSkeleton .offerCardSkeleton__body{
    padding: 12px 13px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mainContent .offerGridSkeleton .skeletonBlock{
    border-radius: 9px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--secondaryColor) 22%, var(--cardColor)) 0%,
        color-mix(in srgb, var(--secondaryColor) 38%, var(--cardColor)) 50%,
        color-mix(in srgb, var(--secondaryColor) 22%, var(--cardColor)) 100%
    );
    background-size: 200% 100%;
    animation: registrationSkeletonShimmer 1.15s ease-in-out infinite;
}

.mainContent .offerGridSkeleton .skeletonBlock--title{
    height: 18px;
    width: 78%;
}

.mainContent .offerGridSkeleton .skeletonBlock--line{
    height: 13px;
    width: 62%;
}

.mainContent .offerGridSkeleton .skeletonBlock--prize{
    height: 32px;
    width: 44%;
    margin-top: 4px;
}

.mainContent .offerContainer.offerMasonry--pending > .offerGridSkeleton{
    position: relative;
    z-index: 2;
    pointer-events: none;
    width: 100%;
}

/* Einzelkarte (single): normaler Fluss, horizontal zentriert. */
.mainContent .offerContainer:not(.offerMasonry):not(.listView):not(.hutBookingOuter) > .outerCardContainer{
    margin-left: auto;
    margin-right: auto;
}

.mainContent .offerContainer.noMargin{
    margin-left: auto;
    margin-right: auto;
}

.mainContent .offerContainer.listView{
    width: min(100%, 1062px);
    margin-inline: auto;
    padding: 9px;
    border: 1px solid var(--registrationBorder);
    border-radius: var(--registrationRadiusLg);
    background: color-mix(in srgb, var(--cardColor) 92%, transparent);
    box-shadow: var(--registrationShadowSm);
}

.mainContent table{
    min-width: 828px;
    border-collapse: separate;
    border-spacing: 0 9px;
}

.mainContent table th{
    padding: 7px 11px 9px 11px;
    font-size: 12px;
    letter-spacing: 0.027em;
    text-transform: uppercase;
    color: var(--writeColorParagraph3);
}

.mainContent table td{
    padding: 13px 11px;
    background: var(--cardColor);
    border-top: 1px solid var(--registrationBorder);
    border-bottom: 1px solid var(--registrationBorder);
    vertical-align: middle;
}

.mainContent table tr.alt{
    background: transparent;
}

.mainContent table tr.alt td{
    background: color-mix(in srgb, var(--cardColor) 97%, var(--secondaryColor));
}

.mainContent table tr td:first-child{
    border-left: 1px solid var(--registrationBorder);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    font-weight: 700;
}

.mainContent table tr td:last-child{
    border-right: 1px solid var(--registrationBorder);
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.mainContent .offerContainer.listView table tr {
    height: 1px;
}

.mainContent .offerContainer.listView table td {
    vertical-align: middle;
    height: 100%;
}

.mainContent .offerContainer.listView table td.sizeFlex:empty {
    min-height: 29px;
}

.mainContent table td button,
.mainContent table td button.infos,
.mainContent table td button.infos2,
.mainContent table td button.infos3,
.outerCardContainer .infoElement div{
    min-height: 29px;
    height: auto;
    line-height: 28px;
    border-radius: 899px;
    font-size: 12px;
}

.mainContent table td button.infos,
.outerCardContainer .infoElement div{
    background: color-mix(in srgb, var(--highlightColor) 14%, var(--cardColor));
    color: var(--highlightColor);
}

.mainContent table td button.infos2{
    background: color-mix(in srgb, var(--highlightColor) 8%, var(--cardColor));
    color: var(--writeColorParagraph);
}

.mainContent table td button.infos3,
.outerCardContainer .infoElement div.warn{
    background: color-mix(in srgb, var(--deniedColor) 14%, var(--cardColor));
    color: var(--deniedColor);
}

.outerCardContainer{
    width: min(100%, 315px);
    box-sizing: border-box;
    border: 1px solid var(--registrationBorder);
    border-radius: var(--registrationRadiusLg);
    box-shadow: var(--registrationShadowSm);
    overflow: hidden;
}

.innerCardContainer{
    height: auto;
    border-radius: inherit;
    background: var(--cardColor);
}

.innerCardContainer .imageContainer{
    position: relative;
    overflow: hidden;
    line-height: 0;
    aspect-ratio: 4 / 3;
}

.innerCardContainer .imageContainer img{
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 0;
    transition: transform 0.35s ease;
}

.outerCardContainer:hover .innerCardContainer .imageContainer img{
    transform: scale(1.035);
}

.innerCardContainer .textContainer,
.contentModal .mobileShoppingCart .shoppingElementOne .shoppingTextContainer{
    padding: 16px;
}

.innerCardContainer .textContainer h5,
.contentModal .mobileShoppingCart .shoppingElementOne .shoppingTextContainer h5{
    font-size: 18px;
    line-height: 1.22;
}

.innerCardContainer .textContainer p.date,
.contentModal .mobileShoppingCart .shoppingElementOne .shoppingTextContainer p.date{
    color: var(--highlightColor);
    font-size: 12px;
    letter-spacing: 0.009em;
}

.innerCardContainer .textContainer p.intro{
    line-height: 1.55;
    color: var(--writeColorParagraph3);
}

.innerCardContainer .textContainer .costContainer,
.contentModal .mobileShoppingCart .shoppingElementOne .shoppingTextContainer .shoppingCostElement{
    gap: 11px;
    align-items: center;
    padding: 0 0 1.8px 0;
}

.innerCardContainer .textContainer .costContainer p.prize,
.contentModal .mobileShoppingCart .shoppingElementOne .shoppingTextContainer .shoppingCostElement p.prize{
    color: var(--highlightColor);
    font-weight: 800;
}

.outerCardContainer .infoElement{
    position: absolute;
    top: 11px;
    left: 11px;
    right: 11px;
    width: auto;
    margin: 0;
    padding-bottom: 0;
}

.outerCardContainer .infoElement div{
    padding: 0 13px;
}

.backgroundModal{
    background: rgba(10, 16, 30, 0.42);
    backdrop-filter: blur(7px);
}

.contentModal__aligner{
    padding: max(11px, env(safe-area-inset-top, 0px)) max(11px, env(safe-area-inset-right, 0px)) max(11px, env(safe-area-inset-bottom, 0px)) max(11px, env(safe-area-inset-left, 0px));
}

.contentModal__surface{
    border: 1px solid var(--registrationBorder);
    border-radius: var(--registrationRadiusLg);
    box-shadow: var(--registrationShadowLg);
}

.contentModal .mobileHeader{
    height: 54px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--registrationBorder);
    box-shadow: none;
}

.contentModal .mobileHeader .headerInfo{
    font-size: 16px;
}

.contentModal .mobileHeader .backButton{
    border-radius: 899px;
    text-align: center;
}

.contentModal .mobileHeader .backButton:hover{
    background: var(--secondaryColor);
}

.contentModal .mobileShoppingCart{
    background: var(--backgroundColor);
}

.contentModal .mobileShoppingCart .contactData{
    gap: 1.8px;
    padding: 5px 16px;
}

.contentModal.login .mobileShoppingCart .contactData,
.contentModal.account .mobileShoppingCart .contactData{
    padding-top: 23px;
}

.contentModal .mobileShoppingCart .contactData h4{
    margin-bottom: 9px;
    font-size: 16px;
}

.contentModal .mobileShoppingCart .contactData label{
    margin-bottom: 6px;
    color: var(--writeColorParagraph3);
}

.contentModal .mobileShoppingCart .contactData .inputContainer textarea,
.contentModal .mobileShoppingCart .contactData .inputContainer input,
.contentModal .mobileShoppingCart .contactData input{
    min-height: 41px;
    border: 1.4px solid transparent;
    border-radius: 14px;
    background: color-mix(in srgb, var(--secondaryColor) 46%, var(--cardColor));
    line-height: 20px;
}

.contentModal .custom-select{
    position: relative;
    width: 100%;
}

.contentModal .custom-select .select-selected{
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 38px;
    height: auto;
    padding: 8px 34px 8px 11px;
    border: 1px solid var(--registrationBorder);
    border-radius: 13px;
    background: var(--cardColor);
    font-family: var(--fontFamilyParagraph);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--writeColorParagraph);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.contentModal .custom-select .select-selected:hover{
    border-color: color-mix(in srgb, var(--primaryColor, var(--highlightColor)) 45%, var(--registrationBorder));
    background: color-mix(in srgb, var(--primaryColor, var(--highlightColor)) 4%, var(--cardColor));
}

.contentModal .custom-select .select-selected.select-arrow-active{
    border-color: color-mix(in srgb, var(--primaryColor, var(--highlightColor)) 64%, var(--registrationBorder));
    background: color-mix(in srgb, var(--primaryColor, var(--highlightColor)) 6%, var(--cardColor));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--highlightColor) 6%, transparent);
}

.contentModal .custom-select .select-selected:after{
    top: 50%;
    right: 12px;
    transform: translateY(-22%);
    border-width: 5px;
    border-color: color-mix(in srgb, var(--writeColorParagraph2) 78%, var(--cardColor)) transparent transparent transparent;
}

.contentModal .custom-select .select-selected.select-arrow-active:after{
    top: 50%;
    transform: translateY(-78%);
    border-color: transparent transparent color-mix(in srgb, var(--writeColorParagraph2) 78%, var(--cardColor)) transparent;
}

.contentModal .custom-select .select-items{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    margin-top: 4px;
    padding: 5px;
    border: 1px solid var(--registrationBorder);
    border-radius: 13px;
    background: color-mix(in srgb, var(--cardColor) 96%, var(--secondaryColor));
    box-shadow: none;
    width: 100%;
    box-sizing: border-box;
}

.contentModal .custom-select .select-items div{
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 7px 9px;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--registrationBorder) 72%, transparent);
    border-radius: 9px;
    font-family: var(--fontFamilyParagraph);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--writeColorParagraph);
    cursor: pointer;
}

.contentModal .custom-select .select-items div:last-child{
    border-bottom: none;
}

.contentModal .custom-select .select-items div:hover,
.contentModal .custom-select .select-items div.same-as-selected{
    color: var(--highlightColor);
    background: color-mix(in srgb, var(--highlightColor) 6%, var(--cardColor));
}

.contentModal .mobileShoppingCart .contactData .inputContainer textarea:hover,
.contentModal .mobileShoppingCart .contactData input:hover,
.contentModal .mobileShoppingCart .contactData .inputContainer textarea:focus,
.contentModal .mobileShoppingCart .contactData input:focus{
    background: var(--cardColor);
    border-color: var(--highlightColor);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--highlightColor) 6%, transparent);
}

.contentModal .mobileShoppingCart .contactData .attendeInnerContainer{
    margin-bottom: 0px;
    padding: 0;
    background: color-mix(in srgb, var(--cardColor) 97%, var(--secondaryColor));
    overflow: hidden;
}

.contentModal .mobileShoppingCart .contactData .attendeInnerContainer.noBorder{
    padding: 18px;
}

.contentModal .mobileShoppingCart .contactData .attendeInnerContainer.accountDataPlain{
    margin-bottom: 0;
    padding: 0;
    border: none;
    border-top: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.contentModal .mobileShoppingCart .contactData .attendeHeaderContainer{
    display: block;
    margin: 0;
}

.contentModal .mobileShoppingCart .contactData .attendeAccordionToggle{
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 11px;
    padding: 13px 0px;
    border: none;
    border-radius: 0;
    background: var(--cardColor);
    color: var(--writeColorHeader);
    text-align: left;
    cursor: pointer;
}

.attendeTitleGroup{
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
}

.attendeIndex{
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 14px;
    width: fit-content;
    padding: 3px 25px;
    border: 1px solid color-mix(in srgb, var(--highlightColor) 38%, var(--cardColor));
    border-radius: 899px;
    background: color-mix(in srgb, var(--highlightColor) 8%, var(--cardColor));
    color: var(--highlightColor);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.018em;
}

.attendeIndex .attendeAccordionIcon{
    font-size: 12px;
    color: color-mix(in srgb, var(--highlightColor) 70%, var(--writeColorParagraph3));
}

.contentModal .mobileShoppingCart .contactData .attendeRemoveText{
    margin-left: auto;
    box-sizing: border-box;
    min-height: 33px;
    height: 33px;
    padding: 0 20px;
    border: 1px solid color-mix(in srgb, var(--writeColorParagraph2) 35%, var(--registrationBorder));
    border-radius: 899px;
    background: color-mix(in srgb, var(--writeColorParagraph2) 6%, var(--cardColor));
    color: var(--writeColorParagraph2);
    font-size: 12px;
    font-weight: 550;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.contentModal .mobileShoppingCart .contactData .attendeRemoveText:hover,
.contentModal .mobileShoppingCart .contactData .attendeRemoveText:focus-visible{
    background: color-mix(in srgb, var(--writeColorParagraph2) 11%, var(--cardColor));
    color: var(--writeColorParagraph3);
    border-color: color-mix(in srgb, var(--writeColorParagraph2) 45%, var(--registrationBorder));
    outline: none;
}

.attendeName{
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--writeColorHeader);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendeStatus{
    flex: 0 0 auto;
    width: fit-content;
    padding: 3px 8px;
    border-radius: 899px;
    background: color-mix(in srgb, var(--writeColorParagraph2) 8%, var(--cardColor));
    color: var(--writeColorParagraph3);
    font-size: 11px;
    font-weight: 750;
}

.attendeStatus.success{
    background: color-mix(in srgb, var(--highlightColor) 9%, var(--cardColor));
    color: var(--highlightColor);
}

.attendeStatus.danger{
    background: color-mix(in srgb, var(--deniedColor) 9%, var(--cardColor));
    color: var(--deniedColor);
}

.attendeStatus.warning{
    background: color-mix(in srgb, var(--highlightColor) 7%, var(--cardColor));
    color: var(--highlightColor);
}

.attendeHeaderActions{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.contentModal .mobileShoppingCart .contactData .attendeIconButton,
.contentModal .mobileShoppingCart .contactData .attendeActionButton{
    width: auto;
    min-width: 0;
    min-height: 31px;
    height: auto;
    line-height: 1;
    padding: 7px 11px;
    border: 1.4px solid color-mix(in srgb, var(--highlightColor) 55%, var(--cardColor));
    border-radius: 899px;
    background: color-mix(in srgb, var(--highlightColor) 7%, var(--cardColor));
    color: var(--highlightColor);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.contentModal .mobileShoppingCart .contactData .attendeIconButton{
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
}

.contentModal .mobileShoppingCart .contactData .attendeIconButton.danger,
.contentModal .mobileShoppingCart .contactData .attendeActionButton.danger{
    border-color: color-mix(in srgb, var(--deniedColor) 62%, var(--cardColor));
    background: color-mix(in srgb, var(--deniedColor) 8%, var(--cardColor));
    color: var(--deniedColor);
}

.contentModal .mobileShoppingCart .contactData .attendeActionButton.muted{
    border-color: color-mix(in srgb, var(--writeColorParagraph2) 22%, var(--cardColor));
    background: color-mix(in srgb, var(--writeColorParagraph2) 5%, var(--cardColor));
    color: var(--writeColorParagraph3);
}

.attendeAccordionIcon{
    flex: 0 0 auto;
    color: var(--writeColorParagraph3);
    transform: rotate(180deg);
    transition: transform 0.22s ease;
    pointer-events: none;
}

.attendeAccordionIcon.open{
    transform: rotate(0deg);
}

.attendeActionContainer{
    padding: 0;
}

.attendeRemoveConfirm{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 11px;
    margin: 9px 0 11px 0;
    padding: 11px;
    border: 1px solid color-mix(in srgb, var(--deniedColor) 20%, var(--registrationBorder));
    border-radius: 16px;
    background: color-mix(in srgb, var(--deniedColor) 5%, var(--cardColor));
}

.attendeRemoveConfirm strong{
    color: var(--writeColorHeader);
    font-size: 13px;
}

.attendeRemoveConfirm p{
    margin-top: 1.8px;
    color: var(--writeColorParagraph3);
    font-size: 12px;
    line-height: 1.35;
}

.attendeRemoveActions{
    display: flex;
    gap: 7px;
    flex: 0 0 auto;
}

.attendeAccordionBody{
    padding: 13px 0px;
    box-sizing: border-box;
    overflow: hidden;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    contain: layout paint;
}

.attendeAccordionBody.storno{
    padding-top: 1.8px;
}

.attendeAccordionBody.collapsed{
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -3.6px, 0);
    pointer-events: none;
}

.dividertop{
    border-top: 1px solid var(--registrationBorder);
}

.dividerbottom{
    border-bottom: 1px solid var(--registrationBorder);
}

.dividertop.strong{
    border-top: 7px solid color-mix(in srgb, var(--highlightColor) 5%, var(--cardColor));
}

.contentModal .mobileShoppingCart .contactData .inputContainer .flexBox,
.contentModal .mobileShoppingCart .contactData .paymentMethodsFlex{
    gap: 9px;
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
}

.contentModal .mobileShoppingCart .contactData .inputContainer .flexBox .flexElement,
.contentModal .mobileShoppingCart .contactData .paymentMethodsFlex .paymentElement{
    --_btn-accent: var(--primaryColor, var(--highlightColor));
    width: auto;
    min-width: fit-content;
    min-height: 32px;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    margin-right: 0;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--registrationBorder) 76%, var(--_btn-accent));
    border-radius: 899px;
    font-size: 14px;
    font-weight: 500;
    background: var(--cardColor);
    box-shadow:
        0 1px 1.8px rgba(20, 30, 55, 0.04),
        inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
}

.contentModal .mobileShoppingCart .contactData .inputContainer .flexBox .flexElement:hover,
.contentModal .mobileShoppingCart .contactData .paymentMethodsFlex .paymentElement:hover{
    background: color-mix(in srgb, var(--_btn-accent) 4%, var(--cardColor));
    border-color: color-mix(in srgb, var(--_btn-accent) 45%, var(--registrationBorder));
    color: var(--_btn-accent);
    /* box-shadow:
        0 7px 18px rgba(20, 30, 55, 0.08),
        inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent); */
}

.contentModal .mobileShoppingCart .contactData .inputContainer .flexBox .flexElement.selected,
.contentModal .mobileShoppingCart .contactData .paymentMethodsFlex .paymentElement.selected{
    --_btn-accent: var(--primaryColor, var(--highlightColor));
    border-color: color-mix(in srgb, var(--_btn-accent) 64%, var(--registrationBorder));
    background: color-mix(in srgb, var(--_btn-accent) 6%, var(--cardColor));
    color: var(--_btn-accent);
    box-shadow:
        0 1px 1.8px rgba(20, 30, 55, 0.05),
        0 10px 16px rgba(20, 30, 55, 0.08),
        inset 0 1px 0 color-mix(in srgb, #fff 46%, transparent);
}

.contentModal .mobileShoppingCart .contactData .inputContainer .flexBox .flexElement.selected:hover,
.contentModal .mobileShoppingCart .contactData .paymentMethodsFlex .paymentElement.selected:hover{
    background: color-mix(in srgb, var(--_btn-accent) 9%, var(--cardColor));
    box-shadow:
        0 1px 1.8px rgba(20, 30, 55, 0.04),
        0 7px 16px rgba(20, 30, 55, 0.08),
        inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent);
}

.singleCheckBoxContainer,
.doubleCheckBoxContainer{
    padding: 11px;
    border: 1px solid var(--registrationBorder);
    border-radius: 16px;
    background: color-mix(in srgb, var(--cardColor) 96%, var(--secondaryColor));
}

.singleCheckBoxContainer i,
.doubleCheckBoxContainer .innerDoubleContainer .innerSingleContainer i{
    color: color-mix(in srgb, var(--writeColorParagraph2) 72%, var(--cardColor));
}

.contentModal .mobileShoppingCart .contactData .tableContainer{
    padding: 5px;
    border: 1px solid var(--registrationBorder);
    border-radius: 16px;
    background: var(--cardColor);
}

.contentModal .mobileShoppingCart .contactData table{
    border-collapse: separate;
    border-spacing: 0 5px;
}

.contentModal .mobileShoppingCart .contactData table td{
    padding: 8px 9px;
}


.contentModal .mobileShoppingCart .shoppingElementOne{
    margin: 0;
    border-bottom: none;
}

.contentModal .registrationSummaryCard{
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    margin: 13px 16px 5px 16px;
    border: 1px solid var(--registrationBorder);
    border-radius: var(--registrationRadiusLg);
    background: var(--cardColor);
    box-shadow: var(--registrationShadowSm);
    overflow: hidden;
    isolation: isolate;
}

.contentModal .mobileShoppingCart .shoppingElementOne.registrationSummaryCard{
    display: grid;
    justify-content: stretch;
}

.contentModal .mobileShoppingCart .shoppingElementOne:not(.registrationSummaryCard) img{
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.contentModal .registrationSummaryCard .registrationSummaryImageWrap{
    position: relative;
    min-height: 0;
    align-self: stretch;
    display: block;
    overflow: hidden;
    background: color-mix(in srgb, var(--secondaryColor) 28%, var(--cardColor));
    border-bottom: 1px solid color-mix(in srgb, var(--registrationBorder) 70%, var(--cardColor));
    border-radius: calc(var(--registrationRadiusLg) - 1px) calc(var(--registrationRadiusLg) - 1px) 0 0;
}

.contentModal .registrationSummaryCard .registrationSummaryImageWrap img{
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    object-fit: initial;
    object-position: center;
}

@keyframes registrationSkeletonShimmer{
    0%{ background-position: 200% 0; }
    100%{ background-position: -200% 0; }
}

.contentModal .registrationModalSkeleton .skeletonBlock{
    border-radius: 9px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--secondaryColor) 22%, var(--cardColor)) 0%,
        color-mix(in srgb, var(--secondaryColor) 38%, var(--cardColor)) 50%,
        color-mix(in srgb, var(--secondaryColor) 22%, var(--cardColor)) 100%
    );
    background-size: 200% 100%;
    animation: registrationSkeletonShimmer 1.15s ease-in-out infinite;
}

.contentModal .registrationSummaryCard--skeleton .registrationSummaryImageWrap.skeletonBlock--image{
    width: 100%;
    min-height: clamp(108px, 38vw, 198px);
    border-bottom: none;
}

.contentModal .registrationModalSkeleton .skeletonBlock--title{
    height: 22px;
    width: 78%;
    margin-bottom: 10px;
}

.contentModal .registrationModalSkeleton .skeletonBlock--line{
    height: 14px;
    width: 62%;
    margin-bottom: 14px;
}

.contentModal .registrationModalSkeleton .skeletonBlock--prize{
    height: 36px;
    width: 44%;
}

.contentModal .registrationModalSkeleton .skeletonBlock--heading{
    height: 18px;
    width: 36%;
    margin-bottom: 16px;
}

.contentModal .registrationModalSkeleton .skeletonBlock--attende{
    height: 88px;
    width: 100%;
    margin-bottom: 12px;
}

.contentModal .registrationModalSkeleton .skeletonBlock--attende.skeletonBlock--short{
    height: 52px;
    width: 72%;
}

.contentModal .registrationModalSkeleton .skeletonBlock--button{
    height: 34px;
    width: min(100%, 220px);
    border-radius: 17px;
}

.contentModal .registrationSummaryCard .shoppingTextContainer{
    min-width: 0;
    padding: 12px 13px;
    display: flex;
    flex-direction: column;
}

.contentModal .registrationSummaryCard .shoppingTextContainer h4,
.contentModal .registrationSummaryCard .shoppingTextContainer h5{
    font-size: clamp(15px, 4.2vw, 21px);
    line-height: 1.16;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.contentModal .registrationSummaryCard .shoppingTextContainer p.date{
    width: fit-content;
    max-width: 100%;
    margin-bottom: 8px;
    padding: 5px 9px;
    border-radius: 899px;
    background: color-mix(in srgb, var(--highlightColor) 11%, var(--cardColor));
    color: var(--highlightColor);
    font-weight: 700;
}

.contentModal .registrationSummaryCard .registrationSummaryPrizeStack{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 5px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    margin-top: 1.8px;
    flex: 1 1 auto;
}

.contentModal .registrationSummaryCard .shoppingPrizeBlock{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 5px 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cardColor) 86%, var(--secondaryColor));
    border: 1px solid color-mix(in srgb, var(--registrationBorder) 90%, var(--cardColor));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
}

.contentModal .registrationSummaryCard .shoppingPrizeBlock .shoppingCostElement{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.contentModal .registrationSummaryCard .shoppingPrizeBlock .shoppingCostElement p{
    font-size: 12px;
    line-height: 1.22;
    margin: 0;
}

.contentModal .registrationSummaryCard .shoppingPrizeBlock .shoppingCostElement .shoppingCostGroup{
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    font-weight: 650;
    color: var(--writeColorHeader);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    padding-right: 4px;
}

.contentModal .registrationSummaryCard .shoppingPrizeBlock .shoppingCostElement p.prize{
    flex: 0 0 auto;
    align-self: center;
    min-width: 0;
    margin-left: auto;
    text-align: right;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--highlightColor);
    white-space: nowrap;
}

.contentModal .registrationSummaryCard .shoppingPrizeBlock .shoppingCostDate{
    width: 100%;
    margin: 0;
    padding: 0 0 0 0;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.009em;
    color: var(--writeColorParagraph2);
    border-top: 1px solid color-mix(in srgb, var(--registrationBorder) 80%, var(--cardColor));
    padding-top: 4px;
}

.contentModal .registrationSummaryCard + .contactData,
.contentModal .registrationSummaryCard + .mobileShoppingCart .contactData:first-child{
    padding-top: 16px;
}

.contentModal .mobileFooter{
    min-height: 68px;
    height: auto;
    gap: 11px;
    align-items: center;
    padding: 11px 16px max(11px, env(safe-area-inset-bottom, 0px)) 16px;
    border-top: 1px solid var(--registrationBorder);
    box-shadow: 0 -12.6px 29px rgba(20, 30, 55, 0.08);
}

.contentModal .mobileFooter .footerButton{
    margin: 0;
    line-height: 40px;
}

.contentModal .mobileFooter .footerButton.light{
    border: 1.4px solid color-mix(in srgb, var(--highlightColor) 58%, var(--cardColor));
    background: color-mix(in srgb, var(--highlightColor) 6%, var(--cardColor));
    color: var(--highlightColor);
}

.contentModal .mobileFooter .footerButton.prize{
    min-height: 0;
}

.contentModal .mobileFooter:has(.footerButton.prize) .footerButton:not(.prize):not(.small):not(.secondary){
    flex: 0 0 158px;
    width: 158px;
    min-width: 158px;
    max-width: 158px;
    min-height: 40px;
    height: 40px;
    line-height: 38px;
    padding: 0 12px;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: center;
}