/* =========================================================
   RADIO PARTY MIX - GREET NIGHT PULSE SKIN
   Presentation only - no functional logic
   ========================================================= */

:root {
    --g-bg: #08070b;
    --g-panel: #0e0b11;
    --g-panel-2: #151018;
    --g-border: rgba(255, 36, 138, .25);
    --g-border-strong: rgba(255, 36, 138, .58);
    --g-pink: #ff248a;
    --g-pink-light: #ff71b4;
    --g-text: #ffffff;
    --g-muted: #8e8793;
    --g-soft: #c8c1cc;
}

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100%;
    background:
        radial-gradient(circle at 15% 0%, rgba(255,36,138,.10), transparent 34%),
        radial-gradient(circle at 90% 35%, rgba(118,0,74,.08), transparent 32%),
        #08070b !important;
    color: var(--g-text) !important;
    font-family: "Poppins", Arial, sans-serif !important;
}

body {
    box-sizing: border-box;
    padding: 18px 18px 24px !important;
}

* {
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   TEXT GREETING FORM
   --------------------------------------------------------- */

form.pozdravi {
    width: 100% !important;
    max-width: none !important;
    margin: 14px auto 18px !important;
    padding: 20px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 13px !important;

    border: 1px solid var(--g-border) !important;
    border-radius: 18px !important;

    background:
        radial-gradient(circle at 100% 0%, rgba(255,36,138,.08), transparent 35%),
        linear-gradient(145deg, rgba(22,16,24,.98), rgba(11,9,13,.98)) !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}

form.pozdravi input {
    width: 100% !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 15px !important;

    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 12px !important;
    outline: none !important;

    background: rgba(255,255,255,.035) !important;
    color: #fff !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease !important;
}

form.pozdravi input[name="text"] {
    grid-column: 1 / -1 !important;
}

form.pozdravi input::placeholder {
    color: #78717d !important;
    opacity: 1 !important;
}

form.pozdravi input:hover {
    border-color: rgba(255,36,138,.22) !important;
}

form.pozdravi input:focus {
    border-color: rgba(255,36,138,.72) !important;
    background: rgba(255,36,138,.035) !important;

    box-shadow:
        0 0 0 3px rgba(255,36,138,.08),
        0 0 24px rgba(255,36,138,.06) !important;
}

form.pozdravi button[type="submit"] {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    min-height: 50px !important;
    margin: 2px 0 0 !important;
    padding: 12px 18px !important;

    border: 1px solid rgba(255,74,160,.72) !important;
    border-radius: 12px !important;

    background:
        linear-gradient(135deg, #ff248a 0%, #d80970 100%) !important;

    color: white !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;

    cursor: pointer !important;

    box-shadow:
        0 0 25px rgba(255,36,138,.18),
        inset 0 1px 0 rgba(255,255,255,.16) !important;

    transition:
        transform .17s ease,
        box-shadow .17s ease,
        filter .17s ease !important;
}

form.pozdravi button[type="submit"]:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.08) !important;

    box-shadow:
        0 8px 28px rgba(255,36,138,.24),
        inset 0 1px 0 rgba(255,255,255,.18) !important;
}

form.pozdravi button[type="submit"]:active {
    transform: translateY(0) scale(.995) !important;
}


/* ---------------------------------------------------------
   VOICE GREETING BUTTON
   --------------------------------------------------------- */

#openVoiceModal {
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 11px 16px !important;

    border: 1px solid rgba(255,36,138,.38) !important;
    border-radius: 12px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,36,138,.15),
            rgba(255,36,138,.055)
        ) !important;

    color: #fff !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 750 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 22px rgba(255,36,138,.07) !important;

    animation: none !important;
}

#openVoiceModal:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(255,36,138,.7) !important;
    box-shadow: 0 8px 28px rgba(255,36,138,.13) !important;
}


/* ---------------------------------------------------------
   ACTIVE HOST
   --------------------------------------------------------- */

.user-img-animated {
    width: 48px !important;
    height: 48px !important;

    margin-left: 8px !important;

    object-fit: cover !important;

    border: 2px solid rgba(255,36,138,.7) !important;
    border-radius: 50% !important;

    padding: 0 !important;

    background: #111 !important;

    box-shadow:
        0 0 0 4px rgba(255,36,138,.06),
        0 0 22px rgba(255,36,138,.14) !important;

    animation: npHostPulse 2.5s ease-in-out infinite !important;
}

@keyframes npHostPulse {
    0%, 100% {
        box-shadow:
            0 0 0 4px rgba(255,36,138,.05),
            0 0 16px rgba(255,36,138,.10);
    }

    50% {
        box-shadow:
            0 0 0 6px rgba(255,36,138,.09),
            0 0 26px rgba(255,36,138,.18);
    }
}

/* Existing host h1 */
body center h1 {
    color: #fff !important;
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}


/* ---------------------------------------------------------
   OLD WAITING GREETINGS INFO BLOCK
   Converts inline purple gradient into Night Pulse card
   --------------------------------------------------------- */

body center > div[style*="linear-gradient"] {
    padding: 11px 16px !important;

    border: 1px solid rgba(255,36,138,.25) !important;
    border-radius: 12px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,36,138,.11),
            rgba(255,36,138,.035)
        ) !important;

    color: #d9d3dc !important;

    font-family: inherit !important;
    font-size: 12px !important;

    animation: none !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}


/* ---------------------------------------------------------
   AUTOMATIC PROGRAM / GREETINGS CLOSED
   --------------------------------------------------------- */

.content {
    width: 100% !important;
    min-height: 310px !important;
    margin: 0 !important;
    padding: 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(255,36,138,.20) !important;
    border-radius: 18px !important;

    background:
        radial-gradient(circle at 50% 20%, rgba(255,36,138,.09), transparent 43%),
        linear-gradient(145deg, #141016, #0b090d) !important;

    background-image: none !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 18px 45px rgba(0,0,0,.20) !important;
}

.content .title,
.content h1.title {
    margin: 0 !important;
    padding: 0 !important;

    color: #dad4dd !important;

    font-family: inherit !important;
    font-size: clamp(20px, 3.2vw, 32px) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;

    text-align: center !important;
}

.title::before,
.title::after {
    display: none !important;
}


/* ---------------------------------------------------------
   PAYPAL / SUPPORT AREA
   --------------------------------------------------------- */

body > p {
    margin: 22px 0 0 !important;
}

body > p center > div {
    margin: 0 !important;
    padding: 18px !important;

    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 16px !important;

    background: rgba(255,255,255,.018) !important;

    color: #9f98a4 !important;

    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
}

body > p form {
    margin-top: 12px !important;
}

body > p input[type="image"] {
    max-width: 180px !important;
    height: auto !important;

    border-radius: 10px !important;

    opacity: .86 !important;

    transition: opacity .15s ease, transform .15s ease !important;
}

body > p input[type="image"]:hover {
    opacity: 1 !important;
    transform: translateY(-1px) !important;
}

body > p table {
    margin: 10px auto 0 !important;
}

body > p table td {
    padding: 2px 8px !important;
    color: #68616c !important;
}

body > p .fa {
    color: #8d8491 !important;
    font-size: 25px !important;
    animation: none !important;
}


/* ---------------------------------------------------------
   ALERTS
   --------------------------------------------------------- */

.alert-top {
    top: 14px !important;

    width: calc(100% - 28px) !important;
    max-width: 620px !important;

    padding: 13px 16px !important;

    border-radius: 12px !important;

    font-family: inherit !important;
    font-size: 13px !important;

    box-shadow: 0 16px 42px rgba(0,0,0,.34) !important;
}

.alert-success {
    border: 1px solid rgba(65,220,150,.28) !important;
    background: rgba(20,70,50,.96) !important;
    color: #bff8dd !important;
}

.alert-danger {
    border: 1px solid rgba(255,70,110,.30) !important;
    background: rgba(72,15,30,.97) !important;
    color: #ffd4de !important;
}


/* ---------------------------------------------------------
   INTERNAL JS MODAL
   --------------------------------------------------------- */

.modal {
    background: rgba(0,0,0,.72) !important;
    backdrop-filter: blur(5px);
}

.modal-content {
    width: calc(100% - 30px) !important;
    max-width: 520px !important;

    margin: 15vh auto !important;
    padding: 22px !important;

    border: 1px solid var(--g-border-strong) !important;
    border-radius: 16px !important;

    background: #100d12 !important;
    color: white !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.58),
        0 0 35px rgba(255,36,138,.08) !important;
}

.close {
    color: #aaa3ad !important;
}

.close:hover {
    color: #fff !important;
}


/* ---------------------------------------------------------
   VOICE MODAL - outer shell only
   Voice iframe functionality stays untouched
   --------------------------------------------------------- */

#voiceModal {
    background: rgba(3,2,5,.86) !important;
    backdrop-filter: blur(8px) !important;
}

#voiceModal > div {
    width: min(94%, 620px) !important;
    height: min(84vh, 650px) !important;
    max-width: 620px !important;

    padding: 14px !important;

    border: 1px solid rgba(255,36,138,.42) !important;
    border-radius: 20px !important;

    background:
        radial-gradient(circle at 100% 0%, rgba(255,36,138,.10), transparent 35%),
        #0c090e !important;

    box-shadow:
        0 35px 90px rgba(0,0,0,.64),
        0 0 35px rgba(255,36,138,.10) !important;
}

#voiceModal > div > button {
    z-index: 20 !important;

    top: 8px !important;
    right: 9px !important;

    width: 34px !important;
    height: 34px !important;

    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 50% !important;

    background: #151117 !important;
    color: #fff !important;

    font-size: 0 !important;
}

#voiceModal > div > button::after {
    content: "×";
    font-size: 24px;
    line-height: 1;
}

#voiceFrame {
    background: #09070b !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 620px) {
    body {
        padding: 12px !important;
    }

    form.pozdravi {
        grid-template-columns: 1fr !important;
        padding: 15px !important;
    }

    form.pozdravi input[name="text"],
    form.pozdravi button[type="submit"] {
        grid-column: 1 !important;
    }

    .content {
        min-height: 260px !important;
        padding: 20px !important;
    }

    body center h1 {
        font-size: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}