/*-------------------------------------------
* Wishlist popup login
*------------------------------------------*/
dialog {
    border: none;
    padding: 32px;
}

dialog::backdrop {
    background: rgba(0, 0, 0, .4);
}

.ooo-wl-popup__content {
    position: relative;
    display: grid;
    text-align: center;
    background-color: rgb(255, 255, 255);
}

.ooo-wl-popup__title,
.ooo-wl-popup__description {
    margin: 0;
    margin-block-end: 12px;
    text-align: center;
}

.ooo-wl-popup__title {
    font-family: var(--ooo-wl-popup-title-font-family, inherit);
    font-size: var(--ooo-wl-popup-title-font-size, 18px);
    font-weight: var(--ooo-wl-popup-title-font-weight, initial);
    line-height: var(--ooo-wl-popup-title-line-height, 1.4);
    text-transform: var(--ooo-wl-popup-title-text-transform, initial);
    color: var(--ooo-wl-popup-title-color);
}

.ooo-wl-popup__description {
    font-family: var(--ooo-wl-popup-description-font-family, inherit);
    font-size: var(--ooo-wl-popup-description-font-size, 14px);
    font-weight: var(--ooo-wl-popup-description-font-weight, initial);
    line-height: var(--ooo-wl-popup-description-line-height, 1.6);
}

.ooo-wl-popup__button {
    position: relative;
    display: grid;
    padding: var(--ooo-wl-popup-button-padding, 10px 10px);
    align-items: center;
    justify-content: center;
    color: var(--ooo-wl-popup-button-color, #ffffff);
    border-width: var(--ooo-wl-popup-button-border-width, 0);
    border-radius: var(--ooo-wl-popup-button-border-radius, 0);
    border-style: solid;
    min-height: var(--ooo-wl-popup-button-min-height);
    background: var(--ooo-wl-popup-button-background, #000000);
    text-transform: var(--ooo-wl-popup-button-text-transform, initial);
    font-family: var(--ooo-wl-popup-button-font-family);
    font-size: var(--ooo-wl-popup-button-font-size, 14px);
    font-weight: var(--ooo-wl-popup-button-font-weight);
    letter-spacing: var(--ooo-wl-popup-button-letter-spacing, initial);
    line-height: var(--ooo-wl-popup-button-line-height);
    apparance: none;
    text-decoration: none;
}

.ooo-wl-popup__button::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    border-radius: var(--ooo-wl-popup-button-border-radius, 0);
    box-shadow: var(--ooo-wl-popup-button-shadow-horizontal-offset) var(--ooo-wl-popup-button-shadow-vertical-offset) var(--ooo-wl-popup-button-shadow-blur-radius) rgba(var(--ooo-wl-popup-button-shadow-color), var(--ooo-wl-popup-button-shadow-opacity));
}

.ooo-wl-popup__close {
    position: absolute;
    inset: -15px -15px auto auto;
    cursor: pointer;
    border: none;
    background: none;
    color: initial;
}

@media screen and (min-width: 700px) {

    dialog {
        padding: 48px;
    }

    .ooo-wl-popup__close {
        inset: -35px -35px auto auto;
    }

    .ooo-wl-popup__title {
        font-size: var(--ooo-wl-popup-title-font-size, 24px);
    }

    .ooo-wl-popup__description {
        font-size: var(--ooo-wl-popup-description-font-size, 16px);
    }
}