@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,700&family=DM+Sans:wght@400;500;700&display=swap');

    /* OVERLAY */

    .sd-overlay {

        position: fixed;
        inset: 0;

        background: rgba(0, 0, 0, .55);
        backdrop-filter: blur(4px);

        z-index: 999998;

        opacity: 0;
        visibility: hidden;

        transition: .35s ease;

    }

    /* MODAL */

    .sd-modal {

        position: fixed !important;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%) scale(.85);

        z-index: 999999;

        width: 560px;
        max-width: calc(100vw - 30px);

        background: #fff;

        border-radius: 24px;

        overflow: hidden;

        box-shadow:
            0 30px 80px rgba(0, 0, 0, .35),
            0 10px 30px rgba(0, 0, 0, .15);

        font-family: 'DM Sans', sans-serif;

        opacity: 0;
        visibility: hidden;

        transition:
            transform .45s cubic-bezier(.22, 1, .36, 1),
            opacity .35s ease,
            visibility .35s ease;

        will-change: transform, opacity;

    }

    /* visible */

    .sd-modal.visible {

        opacity: 1;
        visibility: visible;

        transform: translate(-50%, -50%) scale(1);

    }

    .sd-overlay.visible {

        opacity: 1;
        visibility: visible;

    }

    /* CLOSE */

    .sd-modal-close {

        position: absolute;

        top: 18px;
        right: 18px;

        width: 38px;
        height: 38px;

        border-radius: 50%;

        border: none;

        background: rgba(255, 255, 255, .18);

        color: #fff;

        font-size: 22px;

        cursor: pointer;

        transition: .25s;

        z-index: 10;

    }

    .sd-modal-close:hover {

        background: rgba(255, 255, 255, .28);

        transform: rotate(90deg);

    }

    /* TOP */

    .sd-modal-top {

        background: linear-gradient(135deg, #545454, #2d2d2d);

        padding: 40px 35px 32px;

        text-align: center;

    }

    .sd-modal-badge {

        display: inline-flex;

        align-items: center;
        justify-content: center;

        background: #fff;

        color: #000;

        border-radius: 999px;

        padding: 7px 16px;

        font-size: 12px;

        font-weight: 700;

        margin-bottom: 18px;

    }

    .sd-modal-title {

        font-family: 'Playfair Display', serif;

        font-size: 2rem;

        line-height: 1.3;

        color: #fff;

        margin: 0;

    }

    .sd-modal-title em {

        font-style: italic;

    }

    /* BODY */

    .sd-modal-body {

        padding: 35px;

        text-align: center;

    }

    .sd-modal-desc {

        font-size: 15px;

        line-height: 1.9;

        color: #666;

        margin-bottom: 28px;

    }

    /* BUTTONS */

    .sd-modal-btns {

        display: flex;

        gap: 14px;

        justify-content: center;

        flex-wrap: wrap;

    }

    .sd-mbtn {

        min-width: 210px;

        display: flex;

        align-items: center;
        justify-content: center;

        gap: 8px;

        padding: 15px 20px;

        border-radius: 14px;

        font-size: 14px;

        font-weight: 700;

        text-decoration: none;

        transition: .25s;

    }

    .sd-mbtn:hover {

        transform: translateY(-3px);

    }

    .sd-mbtn-primary {

        background: #c2b280;

        color: #fff;

    }

    .sd-mbtn-secondary {

        background: #f7f7f7;

        color: #222;

        border: 1px solid #e5e5e5;

    }

    /* SKIP */

    .sd-modal-skip {

        margin-top: 22px;

        font-size: 13px;

        color: #999;

        cursor: pointer;

        transition: .25s;

    }

    .sd-modal-skip:hover {

        color: #555;

    }

    /* MOBILE */

    @media(max-width:576px) {

        .sd-modal {

            width: calc(100vw - 20px);

        }

        .sd-modal-title {

            font-size: 1.55rem;

        }

        .sd-modal-body {

            padding: 25px;

        }

        .sd-mbtn {

            width: 100%;

            min-width: unset;

        }

    }