.ssrmp-overlay,
.ssrmp-overlay * { box-sizing: border-box; }

.ssrmp-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background:
        radial-gradient(circle at 12% 52%, rgba(224, 0, 132, .19), transparent 34%),
        radial-gradient(circle at 48% 34%, rgba(17, 45, 255, .22), transparent 38%),
        radial-gradient(circle at 88% 48%, rgba(255, 35, 24, .16), transparent 34%),
        rgba(5, 5, 12, .78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
}

.ssrmp-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.ssrmp-dialog {
    position: relative;
    width: min(640px, 100%);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;
    background: #090a18;
    color: #fff;
    box-shadow:
        0 28px 90px rgba(0,0,0,.58),
        0 0 0 1px rgba(255,255,255,.03) inset,
        0 0 44px rgba(33, 48, 255, .12);
    transform: translateY(18px) scale(.985);
    transition: transform .32s cubic-bezier(.2,.75,.25,1);
}

/* Vibrant pink -> electric blue -> red wash inspired by the site's hero section. */
.ssrmp-dialog::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 8% 56%, rgba(255, 0, 154, .82) 0%, rgba(168, 0, 128, .58) 25%, transparent 53%),
        radial-gradient(circle at 48% 36%, rgba(9, 41, 255, .96) 0%, rgba(20, 25, 186, .72) 35%, transparent 64%),
        radial-gradient(circle at 92% 48%, rgba(255, 44, 22, .86) 0%, rgba(188, 18, 31, .62) 30%, transparent 58%),
        linear-gradient(112deg, #7d065d 0%, #1019b6 49%, #84141c 100%);
    transform: scale(1.08);
    filter: saturate(1.1);
}

.ssrmp-dialog::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(4, 5, 18, .13), rgba(3, 3, 10, .54)),
        linear-gradient(90deg, rgba(9, 0, 14, .22), rgba(0, 0, 0, .04) 45%, rgba(20, 0, 0, .18));
}

.ssrmp-overlay.is-visible .ssrmp-dialog {
    transform: translateY(0) scale(1);
}

.ssrmp-accent {
    height: 5px;
    background: linear-gradient(90deg, #d9bd67, #fff0b3, #d9bd67);
    box-shadow: 0 0 22px rgba(240, 220, 157, .28);
}

.ssrmp-content {
    position: relative;
    z-index: 1;
    padding: 42px 44px 40px;
    text-align: center;
}

.ssrmp-kicker {
    margin-bottom: 12px;
    color: #f1db85;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .18em;
    text-shadow: 0 1px 12px rgba(0,0,0,.35);
}

.ssrmp-title {
    margin: 0 0 16px !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: inherit;
    font-size: var(--ssrmp-title-size, 39px) !important;
    line-height: 1.08 !important;
    font-weight: 750 !important;
    letter-spacing: -.025em;
    text-shadow: 0 3px 18px rgba(0,0,0,.34);
}

.ssrmp-message,
.ssrmp-message p {
    color: rgba(255,255,255,.88) !important;
    font-family: inherit;
    font-size: var(--ssrmp-message-size, 16px) !important;
    line-height: 1.7 !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.30);
}

.ssrmp-message p { margin: 0 0 12px; }
.ssrmp-message p:last-child { margin-bottom: 0; }

.ssrmp-button {
    min-width: 140px;
    margin-top: 26px;
    padding: 13px 25px;
    border: 1px solid #ead78e;
    border-radius: 2px;
    background: linear-gradient(180deg, #f0dc95, #dec478);
    color: #11131b;
    box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 0 20px rgba(234, 215, 142, .12);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.ssrmp-button:hover,
.ssrmp-button:focus-visible {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,.22), 0 0 24px rgba(234, 215, 142, .18);
    outline: none;
}

.ssrmp-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 50%;
    background: rgba(7, 8, 22, .28);
    color: #fff;
    box-shadow: 0 5px 18px rgba(0,0,0,.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.ssrmp-close:hover,
.ssrmp-close:focus-visible {
    background: rgba(255,255,255,.15);
    transform: rotate(5deg);
    outline: none;
}

body.ssrmp-lock { overflow: hidden !important; }

@media (max-width: 600px) {
    .ssrmp-overlay { padding: 14px; }
    .ssrmp-dialog { border-radius: 16px; }
    .ssrmp-content { padding: 38px 22px 31px; }
    .ssrmp-title { font-size: min(var(--ssrmp-title-size, 39px), 34px) !important; }
    .ssrmp-message, .ssrmp-message p { font-size: min(var(--ssrmp-message-size, 16px), 20px) !important; line-height: 1.62 !important; }
    .ssrmp-close { top: 10px; right: 10px; width: 33px; height: 33px; }
}

@media (prefers-reduced-motion: reduce) {
    .ssrmp-overlay,
    .ssrmp-dialog,
    .ssrmp-button,
    .ssrmp-close { transition: none !important; }
}
