:root {
    --jello-color-accent-strong-01: #666666;
    --jello-width-compact: 28.625rem;
}

html,
body {
    margin: 0;
    min-width: 20rem;

    /* local workaround to override default success color :'( */
    --jello-color-feedback-success-intense: #00875a;
    --jello-color-feedback-success-base: #e6f3ef;
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

@keyframes js-loading-fallback {
    to {
        opacity: 1;
        pointer-events: auto;
    }
}

.js-loading {
    opacity: 0;
    pointer-events: none;
    will-change: opacity;

    /* stylelint-disable-next-line unit-allowed-list */
    animation: js-loading-fallback 0s 3s forwards;
}

.js-ready {
    opacity: 1;
    pointer-events: auto;

    /* stylelint-disable-next-line unit-allowed-list */
    transition: opacity 0.15s ease-in;
    will-change: auto;
}

.reset-button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-align: unset;
}

.sub-footer {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: center;
    gap: var(--jello-spacing-small);
}

.sub-footer jello-text {
    text-align: center;
    color: var(--jello-color-foreground-secondary);
}

/* css */
.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;

    /* fix for iOS devices to cover the full viewport height */
    /* stylelint-disable-next-line unit-allowed-list */
    min-height: 100dvh;
}

.box {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    width: 100%;
    height: 100vh;
    padding: var(--jello-spacing-small);
    view-transition-name: main-box;
    word-wrap: break-word;
}

.box-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-block: var(--jello-spacing-large) 0;
    padding-inline: var(--jello-spacing-small);
    color: var(--jello-color-foreground-base);
    view-transition-name: box-content;
}

.logo-bar > jello-tooltip {
    margin-inline-start: auto;
}

.logo-bar {
    padding-block: var(--jello-spacing-extra-large) var(--jello-spacing-medium);
    padding-inline: var(--jello-spacing-small);
    display: flex;
    align-items: center;
    view-transition-name: logo-bar;
}

.wrapper-back-button {
    display: flex;
    align-items: center;
    gap: var(--jello-spacing-small);
}

.logo-bar .icon-help {
    padding: var(--jello-spacing-small);
}

.wrapper-consent-link jello-icon,
.wrapper-csc-consent-list jello-icon {
    display: block;
    color: var(--jello-color-interactive-base);
    margin: var(--jello-spacing-small);
}

.wrapper-consent-list [disabled] jello-icon,
.wrapper-csc-consent-list [disabled] jello-icon {
    color: var(--jello-color-foreground-interactive-disabled);
}

.logo-bar .icon-help jello-icon {
    color: var(--jello-color-foreground-button-tertiary-base);

    /* workaround to remove extra height */
    display: flex;
}

.logo-bar .icon-help[disabled] jello-icon {
    color: inherit;
}

.logo-bar .preserve-logo-bar-space {
    padding-bottom: var(--jello-size-medium);
}

.column-content {
    display: flex;
    flex-direction: column;
    gap: var(--jello-spacing-huge);
}

.column-content-grow {
    flex-grow: 1;
}

.row-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--jello-spacing-small);
}

.consent-info-icon {
    color: var(--jello-color-feedback-info-intense);
}

.consent-heading {
    margin-top: var(--jello-spacing-extra-large);
    margin-bottom: var(--jello-spacing-medium);
}

.gap-tiny {
    gap: var(--jello-spacing-tiny);
}

.code-verification-expiry-text {
    color: var(--jello-color-foreground-secondary);
}

jello-input-number[show-error-message] ~ .code-verification-expiry-text {
    display: none;
}

.gap-large {
    gap: var(--jello-spacing-large);
}

.gap-extra-large {
    gap: var(--jello-spacing-extra-large);
}

.gap-huge {
    gap: var(--jello-spacing-huge);
}

.header-illustration {
    width: var(--jello-size-image-medium);
    height: var(--jello-size-image-medium);
    display: block;
    margin: 0 auto;
}

.cta-wrapper {
    inline-size: fit-content;
    margin: 0 auto;
    text-align: center;
    padding-block: var(--jello-spacing-extra-large) 0;
    padding-inline: var(--jello-spacing-extra-large);
    border-top: var(--jello-border-width-absolute-small) solid
        var(--jello-color-border-neutral);
}

.checkbox-note {
    display: block;
    padding-inline-start: var(--jello-spacing-huge);
}

.icon-link {
    display: inline-flex;
    align-items: center;
    gap: var(--jello-spacing-small);
    color: var(--jello-color-interactive-base);
}

.icon-link:hover {
    color: var(--jello-color-interactive-hover);
}

.wrapper-consent-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--jello-spacing-tiny);
    padding-block: var(--jello-spacing-medium);
    padding-inline: var(--jello-spacing-large) 0;
    background-color: var(--jello-color-background-neutral);
    border: var(--jello-border-width-absolute-small) solid
        var(--jello-color-border-neutral);
    border-radius: var(--jello-border-radius-medium);
    color: var(--jello-color-foreground-base);
    text-decoration: none;
}

.wrapper-consent-link:focus-visible,
.csc-consent-item-link:focus-visible {
    outline-color: var(--jello-color-interactive-focus);
}

.wrapper-consent-list {
    display: flex;
    flex-direction: column;
    gap: var(--jello-spacing-large);
}

.wrapper-csc-consent-list {
    padding-inline-start: var(--jello-spacing-huge);
    display: flex;
    flex-direction: column;
}

.wrapper-csc-consent-item {
    padding: var(--jello-spacing-large) 0;
}

.wrapper-csc-consent-item:not(:last-child) {
    border-bottom: 1px solid var(--jello-color-border-base);
}

.wrapper-csc-consent-item-with-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--jello-spacing-large) 0;
}

.wrapper-consent-list [disabled],
.wrapper-csc-consent-list [disabled] {
    color: var(--jello-color-foreground-interactive-disabled);
    cursor: not-allowed;
}

.csc-consent-error-message {
    padding-inline-start: var(--jello-spacing-huge);
    color: var(--jello-color-interactive-error);
}

.footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--jello-spacing-huge) var(--jello-spacing-large);
    padding-block: var(--jello-spacing-huge);
    justify-content: end;
}

.footer > jello-button {
    flex-grow: 1;
}

.responsive-direction {
    flex-direction: column;
}

.review-modal-screen {
    --jello-modal-width: max-content;
    --jello-modal-height: auto;
}

.review-modal-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--jello-spacing-extra-large);
}

.review-modal-button {
    display: flex;
}

.consents-dialog-modal-component {
    padding: var(--jello-size-medium);
}

.consents-dialog-modal-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--jello-spacing-large);
    text-align: center;
}

.consent-description-secondary {
    color: var(--jello-color-accent-strong-01);
}

.registration-confirm-next-text {
    color: var(--jello-color-accent-strong-01);
}

.pagination-page {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.word-overflow {
    overflow-wrap: anywhere;
}

.wrapper-alert {
    --_SPACING: var(--jello-spacing-large);

    position: fixed;
    bottom: var(--_SPACING);
    inset-inline-start: var(--_SPACING);
    inset-inline-end: var(--_SPACING);
    max-height: calc(100dvh - (var(--_SPACING) * 2));
}

/* registration */

.step-counter {
    color: var(--jello-color-foreground-secondary);
}

.password-rules ul {
    padding: 0;
    margin: 0;
}

.password-rules ul li {
    display: flex;
    align-items: center;
    gap: var(--jello-spacing-small);
    margin-bottom: var(--jello-spacing-tiny);
    color: var(--jello-color-foreground-base);
}

.password-rules .valid {
    color: var(--jello-color-feedback-success-intense);
}

.custom-fieldset {
    margin: 0;
    padding: 0;
    border: none;
    min-inline-size: auto;
}

.custom-fieldset label {
    display: block;
    margin-bottom: var(--jello-spacing-small);
}

.custom-fieldset .error-message {
    color: var(--jello-color-interactive-error);
}

.identification-type-options {
    display: flex;
    flex-direction: column;
    gap: var(--jello-spacing-medium);
}

.identification-type-option {
    display: flex;
    align-items: center;
    gap: var(--jello-spacing-small);
    cursor: pointer;
}

.date-of-birth {
    display: flex;
    flex-wrap: wrap;
    gap: var(--jello-spacing-large);
}

.date-of-birth > * {
    flex-grow: 1;
    flex-basis: 6.5rem;
}

.kc-loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--jello-spacing-large);
    min-height: 100vh;
}

.jello-loading {
    color: var(--jello-color-feedback-info-intense);
}

.kc-loading jello-text {
    color: var(--jello-color-foreground-base);
    text-align: center;
}

/* username-input */

.input-container {
    margin: var(--jello-spacing-huge) 0;
}

.email-input-container {
    padding-inline-start: var(--jello-spacing-huge);
    margin-top: var(--jello-spacing-large);
}

.phone-input-container {
    padding-inline-start: var(--jello-spacing-huge);
    margin-top: var(--jello-spacing-large);
}

.phone-fieldset {
    display: flex;
    gap: var(--jello-spacing-large);
}

.phone-radio {
    margin-top: var(--jello-spacing-huge);
}

.phone-prefix-select {
    width: 107px;
}

.phone-number-input {
    flex-grow: 1;
}

.phone-field-error-message-container {
    height: var(--jello-size-tiny);
}

.phone-field-error-message {
    color: var(--jello-color-interactive-error);
}

.phone-field-hint-message {
    color: var(--jello-color-foreground-secondary);
}

.privacy-policy-text {
    color: var(--jello-color-foreground-secondary);
}

/* utils */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hidden {
    display: none;
}

.display-flex {
    display: flex;
}

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

.db {
    display: block !important;
}

.mb-4 {
    margin-bottom: var(--jello-spacing-tiny) !important;
}

.mb-8 {
    margin-bottom: var(--jello-spacing-small) !important;
}

.mb-12 {
    margin-bottom: var(--jello-spacing-medium) !important;
}

.mb-16 {
    margin-bottom: var(--jello-spacing-large) !important;
}

.mb-24 {
    margin-bottom: var(--jello-spacing-extra-large) !important;
}

.mb-32 {
    margin-bottom: var(--jello-spacing-huge) !important;
}

.color-gray {
    color: var(--jello-color-foreground-secondary) !important;
}

.flex-column-child-width-auto {
    align-self: flex-start;
}

@media only screen and (width >= 42rem) {
    .logo-bar {
        padding-inline: var(--box-padding);
    }

    .wrapper {
        padding: var(--jello-spacing-huge) 0;
        gap: var(--jello-spacing-large);
        align-items: center;
        justify-content: center;
    }

    .box {
        --box-padding: calc(
            var(--jello-spacing-small) + var(--jello-spacing-medium)
        );

        padding: var(--jello-spacing-small);
        flex-grow: 0;
        border: var(--jello-border-width-absolute-small) solid
            var(--jello-color-border-neutral);
        border-radius: var(--jello-border-radius-medium);
        width: var(--jello-width-compact);
    }

    .box:only-child {
        flex-grow: 0;
    }

    .kc-layout-wrapper:has(.kc-end-side) .box {
        flex: 0 1 100%;
        max-width: none;
    }

    .box-content {
        padding-inline: var(--box-padding);
        flex-grow: 0;
    }

    .footer {
        justify-content: end;
    }

    .footer > jello-button {
        flex-basis: auto;
        flex-grow: 0;
    }

    .account-ready .footer,
    .password-updated .footer {
        justify-content: center;
    }

    .responsive-direction {
        flex-direction: row;
    }

    .responsive-direction > :last-child {
        margin-inline-start: auto;
    }

    .review-modal-button {
        align-self: center;
    }

    .reset-next-button {
        margin-inline-start: auto;
    }

    .wrapper-alert {
        width: 25rem;
        margin-inline: auto;
    }
}

/* inline-message component */
.inline-message {
    display: flex;
    gap: var(--jello-spacing-large);
    text-align: start;
    align-items: flex-start;
    background-color: var(--jello-color-feedback-warning-base);
    border-radius: var(--jello-border-radius-medium);
    padding: var(--jello-spacing-large);
}

.inline-message-content {
    display: flex;
    flex-direction: column;
    gap: var(--jello-spacing-tiny);
}

.inline-message-success {
    background-color: var(--jello-color-feedback-success-base);
}

.inline-message-success .inline-message-icon {
    color: var(--jello-color-feedback-success-intense);
}

.inline-message-info {
    background-color: var(--jello-color-feedback-info-base);
}

.inline-message-info .inline-message-icon {
    color: var(--jello-color-feedback-info-intense);
}

.inline-message-warning {
    background-color: var(--jello-color-feedback-warning-base);
}

.inline-message-warning .inline-message-icon {
    color: var(--jello-color-feedback-warning-intense);
}

.inline-message-error {
    background-color: var(--jello-color-feedback-danger-base);
}

.inline-message-error .inline-message-icon {
    color: var(--jello-color-feedback-danger-intense);
}

/* avatar-row component */
.avatar-row {
    display: flex;
}

.avatar-text {
    padding-inline-start: var(--jello-spacing-small);
    overflow-wrap: anywhere;
}

::view-transition-old(main-box),
::view-transition-old(logo-bar),
::view-transition-old(step-bar) {
    animation: none;
    opacity: 0;
}

::view-transition-new(main-box),
::view-transition-new(logo-bar),
::view-transition-new(step-bar) {
    animation: none;
    opacity: 1;
}

::view-transition-group(box-content) {
    animation: none;
}

::view-transition-old(box-content) {
    animation: none;
    opacity: 0;
}

::view-transition-new(box-content) {
    /* stylelint-disable-next-line unit-allowed-list */
    animation: vt-fade-in 200ms ease-in forwards;
    opacity: 0;
}

@keyframes vt-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}