/*!
 * Copyright Exit Games GmbH, http://www.exitgames.com/
 * All rights reserved.
 */

/* ---------------------------------------------------------------- overlay */

.egModal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4000; /* below the loading overlay (.modal-overlay, 4223) */
    opacity: 0;
    transition: opacity .15s linear;
}

.egModal--open {
    opacity: 1;
}

.egModal--closing {
    opacity: 0;
    pointer-events: none;
}

.egModal__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(223, 227, 229, .97);
}

/* -------------------------------------------------------------------- box */

.egModal__box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    box-sizing: border-box;
    width: 96%;
    max-width: 560px;
    max-height: calc(100% - 2 * var(--spaceS, 10px));
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--colorWhite, #fff);
    box-shadow: 4px 6px 20px 0 rgba(20, 40, 90, .25);
    color: var(--colorG40, #646466);
    font: var(--fontCopyM, 300 1.125rem/1.6 "Roboto", sans-serif);
    letter-spacing: var(--spacingCopyM, .2px);
    text-align: left;
    overflow: hidden;
    transform: scale(.85);
    opacity: 0;
    transition: transform .3s cubic-bezier(.3, 0, 0, 1.4), opacity .3s linear;
}

.egModal__box[data-size="L"] {
    max-width: 850px;
}

.egModal--open .egModal__box {
    transform: none;
    opacity: 1;
}

.egModal--closing .egModal__box {
    transform: scale(.96);
    opacity: 0;
    transition-duration: .15s;
}

.egModal__box:focus {
    outline: none;
}

.egModal__box:focus-visible {
    outline: 1px dotted var(--colorG10, #dcdee0);
    outline-offset: -1px;
}

.egModal__box * {
    box-sizing: border-box;
}

.egModal__body {
    display: grid;
    row-gap: var(--vSpaceM, 30px);
    padding: var(--spaceL, 30px) var(--spaceL, 30px) var(--spaceS, 10px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.egModal__head {
    display: grid;
    row-gap: var(--vSpaceXS, 10px);
}

.egModal__preTitle {
    color: var(--colorPhotonBlue, #004480);
    font-weight: var(--fontWeightBold, 700);
}

.egModal .egModal__title {
    margin: 0;
    padding: 0;
    color: var(--colorPhotonBlue, #004480);
    font: var(--fontHeadlineS2, 400 2rem/1.125 "Roboto", sans-serif);
    font-weight: var(--fontWeightBold, 700);
    letter-spacing: var(--spacingHeadlineS2, .1px);
    text-transform: none;
}

.egModal__message {
    color: var(--colorG40, #646466);
    overflow-wrap: anywhere;
}

.egModal__message p,
.egModal__message div,
.egModal__message span,
.egModal__message li {
    color: inherit;
}

.egModal__message p {
    margin: 0 0 .75em;
}

.egModal__message > :last-child {
    margin-bottom: 0;
}

.egModal__message b,
.egModal__message strong {
    font-weight: var(--fontWeightBold, 700);
}

.egModal__message a {
    color: var(--colorPhotonBlue, #004480);
    text-decoration: underline;
}

/* --------------------------------------------- alert box (islands' AlertMsg) */

.egModal .alertMsg {
    margin: 0;
}

.egModal .alertMsg--success {
    --colorAlert: var(--colorSignalGreen, #519600);
    --colorAlertDark: #3e7300;
    --colorAlertLight: #e9f5da;
}

.egModal .alertMsg__title {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    font-weight: var(--fontWeightBold, 700);
    letter-spacing: inherit;
}

.egModal .alertMsg__text p {
    margin: 0;
}

.egModal .boxedIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.egModal .icon {
    fill: currentColor;
}

/* ----------------------------------------------------------------- footer */

.egModal__footer {
    display: grid;
    row-gap: var(--vSpaceS, 20px);
    padding: var(--spaceL, 30px);
    box-shadow: 0 -4px 10px rgba(20, 40, 90, .075);
}

.egModal__buttons {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--spaceM, 20px);
    align-items: stretch;
    justify-content: flex-end;
}

.egModal__footerInfo {
    font: var(--fontCopyS, 300 1rem/1.6 "Roboto", sans-serif);
}

/* ------------------------------- buttons (islands' dashBtn on .ctaLinkSimple) */

.egModal .egModal__btn {
    --ctaLinkColor: var(--colorWhite, #fff);
    --ctaLinkBg: var(--colorPhotonBlue, #004480);
    --ctaLinkBgHover: var(--colorPhotonCyan, #72cbff);
    --ctaLinkColorHover: var(--ctaLinkColor);
    --ctaLinkColorActive: var(--colorWhite, #fff);
    --ctaLinkBgActive: var(--colorPhotonCyan, #72cbff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 1px;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: .135em 1.8em;
    border: 0;
    border-radius: 0;
    background: var(--ctaLinkBg);
    color: var(--ctaLinkColor);
    font: var(--fontCopyL, 400 1.375rem/1.4 "Roboto Condensed", sans-serif);
    font-family: var(--ffSecondary, "Roboto Condensed", sans-serif);
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .1s linear, color 75ms linear;
    -webkit-user-select: none;
    user-select: none;
}

.egModal .egModal__btn:hover {
    background: var(--ctaLinkBgHover);
    color: var(--ctaLinkColorHover);
}

.egModal .egModal__btn:active {
    background: var(--ctaLinkBgActive);
    color: var(--ctaLinkColorActive);
}

.egModal .egModal__btn:focus {
    outline: none;
}

.egModal .egModal__btn:focus-visible {
    outline: 2px solid var(--colorPhotonCyan, #72cbff);
    outline-offset: 2px;
}

.egModal .egModal__btn--secondary {
    --ctaLinkColor: var(--colorPhotonBlue, #004480);
    --ctaLinkBg: var(--colorG5, #ebeced);
    --ctaLinkBgHover: var(--colorG15, #c8cacc);
    --ctaLinkColorHover: var(--colorWhite, #fff);
}

.egModal .egModal__btn:disabled,
.egModal .egModal__btn.disabled {
    --ctaLinkColor: var(--colorG15, #c8cacc);
    --ctaLinkBg: var(--colorG2, #f5f5f5);
    cursor: default;
    pointer-events: none;
}

.egModal .egModal__btn > * {
    pointer-events: none;
}

/* ------------------------------------- link with chevron (islands' CTALink) */

.egModal .egModal__link {
    --ctaLinkIconColor: var(--colorPhotonCyan, #72cbff);
    width: 100%;
    justify-content: space-between;
    box-shadow: none;
    font: var(--fontCopyL, 400 1.375rem/1.4 "Roboto Condensed", sans-serif);
    font-family: var(--ffSecondary, "Roboto Condensed", sans-serif);
    padding-top: .09em;
    padding-bottom: .085em;
    text-decoration: none;
}

.egModal .egModal__link.disabled {
    pointer-events: none;
    opacity: .5;
}

/* ------------------------------------------------------------- responsive */

@media (min-width: 37.5em) {
    .egModal__buttons {
        flex-direction: row;
    }

    .egModal .egModal__btn,
    .egModal .egModal__link {
        width: auto;
        min-width: 200px;
    }

    .egModal__footer {
        box-shadow: none;
        row-gap: var(--vSpaceM, 30px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .egModal,
    .egModal__box {
        transition: none;
    }
}