/* =========================================================
   RADIO PARTY MIX - HITS REQUEST / NIGHT PULSE
   VISUAL LAYER ONLY
   ========================================================= */

:root {
    --hr-bg: #08070b;
    --hr-panel: #100c12;
    --hr-panel-2: #161018;
    --hr-panel-3: #1d1420;
    --hr-border: rgba(255, 36, 138, .20);
    --hr-border-strong: rgba(255, 36, 138, .55);
    --hr-pink: #ff248a;
    --hr-pink-2: #d90073;
    --hr-pink-soft: #ff75b8;
    --hr-text: #ffffff;
    --hr-soft: #d3ccd6;
    --hr-muted: #8b838f;
}

/* ---------- PAGE ---------- */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100%;
    background:
        radial-gradient(circle at 10% 0%, rgba(255,36,138,.11), transparent 32%),
        radial-gradient(circle at 92% 30%, rgba(120,0,70,.08), transparent 34%),
        var(--hr-bg) !important;
    color: var(--hr-text) !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

body {
    padding: 20px !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ---------- SEARCH ---------- */

.search-align-right {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 0 22px !important;
}

#search-form {
    width: 100% !important;
    max-width: 1050px !important;
    margin: 0 auto !important;
}

.search-group {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
}

.search-tabs {
    display: flex !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}

.search-tabs .tab {
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 14px !important;

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

    background: rgba(255,255,255,.025) !important;
    color: #99919e !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    cursor: pointer !important;

    transition:
        color .17s ease,
        border-color .17s ease,
        background .17s ease,
        transform .17s ease !important;
}

.search-tabs .tab:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(255,36,138,.30) !important;
    background: rgba(255,36,138,.055) !important;
    color: #fff !important;
}

.search-tabs .tab.active {
    border-color: rgba(255,36,138,.58) !important;
    background:
        linear-gradient(
            135deg,
            rgba(255,36,138,.17),
            rgba(255,36,138,.055)
        ) !important;

    color: #fff !important;

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

.search-form-box {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;

    display: flex !important;
    gap: 10px !important;
    align-items: center !important;

    position: relative !important;

    border: 1px solid var(--hr-border) !important;
    border-radius: 15px !important;

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

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

#search-input {
    flex: 1 !important;
    min-width: 0 !important;

    height: 48px !important;
    margin: 0 !important;
    padding: 0 16px !important;

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

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

    font-size: 14px !important;

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

#search-input::placeholder {
    color: #77707c !important;
}

#search-input:focus {
    border-color: rgba(255,36,138,.68) !important;
    background: rgba(255,36,138,.035) !important;

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

.search-form-box button[type="submit"] {
    height: 48px !important;
    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 22px !important;

    border: 1px solid rgba(255,85,165,.65) !important;
    border-radius: 11px !important;

    background:
        linear-gradient(135deg, var(--hr-pink), var(--hr-pink-2)) !important;

    color: white !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    box-shadow:
        0 6px 24px rgba(255,36,138,.17),
        inset 0 1px 0 rgba(255,255,255,.15) !important;

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

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

    box-shadow:
        0 9px 30px rgba(255,36,138,.25) !important;
}

/* ---------- AUTOCOMPLETE ---------- */

.suggestions {
    top: calc(100% - 2px) !important;
    left: 10px !important;
    right: 10px !important;

    max-height: 280px !important;

    overflow-y: auto !important;

    border: 1px solid rgba(255,36,138,.28) !important;
    border-radius: 0 0 13px 13px !important;

    background: rgba(14,10,16,.99) !important;
    color: #d9d2dc !important;

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

    backdrop-filter: blur(12px) !important;
}

.suggestions:empty {
    display: none !important;
}

.suggestions div {
    padding: 11px 14px !important;

    border-bottom: 1px solid rgba(255,255,255,.045) !important;

    background: transparent !important;
    color: #d2cbd5 !important;

    font-size: 13px !important;

    transition:
        color .14s ease,
        background .14s ease,
        padding-left .14s ease !important;
}

.suggestions div:last-child {
    border-bottom: 0 !important;
}

.suggestions div:hover {
    padding-left: 18px !important;
    background: rgba(255,36,138,.10) !important;
    color: white !important;
}

/* ---------- RESULTS TABLE ---------- */

.table-wrapper {
    width: 100% !important;
    max-width: 1050px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    overflow: visible !important;
}

table {
    width: 100% !important;

    margin: 0 !important;

    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 9px !important;

    background: transparent !important;

    table-layout: fixed !important;
}

table tr:first-child {
    background: transparent !important;
}

table th {
    padding: 0 15px 7px !important;

    border: 0 !important;

    background: transparent !important;
    color: #716a76 !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

table th:nth-child(1) {
    width: 38%;
}

table th:nth-child(2) {
    width: 43%;
}

table th:nth-child(3) {
    width: 19%;
    text-align: right !important;
}

table tr:not(:first-child) {
    background:
        radial-gradient(circle at 100% 0%, rgba(255,36,138,.055), transparent 28%),
        linear-gradient(145deg, rgba(23,17,24,.97), rgba(13,10,15,.98)) !important;

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

table tr:not(:first-child):hover {
    transform: translateY(-1px) !important;

    background:
        radial-gradient(circle at 100% 0%, rgba(255,36,138,.09), transparent 32%),
        linear-gradient(145deg, rgba(27,19,28,.98), rgba(14,11,16,.98)) !important;

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

table td {
    position: static !important;

    padding: 14px 15px !important;

    border-top: 1px solid rgba(255,255,255,.06) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    border-left: 0 !important;
    border-right: 0 !important;

    background: transparent !important;
    color: #d8d1db !important;

    font-size: 13px !important;
    line-height: 1.35 !important;
}

table td:first-child {
    border-left: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 13px 0 0 13px !important;

    color: #fff !important;
    font-weight: 750 !important;
}

table td:nth-child(2) {
    color: #bdb5c1 !important;
}

table td:last-child {
    border-right: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 0 13px 13px 0 !important;

    text-align: right !important;
}

/* ---------- NEW LABEL ---------- */

.label-new-vert {
    position: static !important;

    display: inline-flex !important;
    align-items: center !important;

    width: auto !important;
    height: auto !important;

    margin: 0 8px 0 0 !important;
    padding: 3px 6px !important;

    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;

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

    background: rgba(255,36,138,.10) !important;
    color: var(--hr-pink-soft) !important;

    font-size: 8px !important;
    font-weight: 850 !important;
    letter-spacing: .08em !important;

    vertical-align: 1px !important;
}

/* ---------- REQUEST BUTTON ---------- */

.request-btn,
.btn-orange {
    min-height: 38px !important;

    padding: 8px 14px !important;

    border: 1px solid rgba(255,63,153,.55) !important;
    border-radius: 9px !important;

    background:
        linear-gradient(135deg, #ff248a, #cf076b) !important;

    color: white !important;

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

    cursor: pointer !important;

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

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

.request-btn:not(:disabled):hover,
.btn-orange:not(:disabled):hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.08) !important;

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

.request-btn:disabled {
    border-color: rgba(255,255,255,.07) !important;

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

    box-shadow: none !important;

    cursor: not-allowed !important;
}

/* ---------- DISABLED TOOLTIP ---------- */

.request-btn[disabled]::after {
    top: auto !important;
    bottom: calc(100% + 8px) !important;

    padding: 8px 10px !important;

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

    background: #171019 !important;
    color: #e7dfe9 !important;

    font-size: 11px !important;

    box-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
}

/* ---------- PAGINATION ---------- */

.pagination {
    max-width: 1050px !important;

    margin: 18px auto 0 !important;

    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
}

.pagination a {
    min-width: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 8px 10px !important;

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

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

    background: rgba(255,255,255,.025) !important;
    color: #aaa2ad !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    transition:
        color .15s ease,
        border-color .15s ease,
        background .15s ease !important;
}

.pagination a:hover {
    border-color: rgba(255,36,138,.30) !important;
    background: rgba(255,36,138,.07) !important;
    color: white !important;
}

.pagination a.active {
    border-color: rgba(255,36,138,.62) !important;
    background: rgba(255,36,138,.15) !important;
    color: white !important;

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

/* ---------- REQUEST MODAL ---------- */

.modal-bg {
    position: fixed !important;
    inset: 0 !important;

    background: rgba(3,2,4,.82) !important;

    backdrop-filter: blur(9px) !important;

    z-index: 9999 !important;
}

.modal {
    width: min(92vw, 480px) !important;

    padding: 24px !important;

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

    background:
        radial-gradient(circle at 100% 0%, rgba(255,36,138,.11), transparent 37%),
        linear-gradient(145deg, #151017, #0b090d) !important;

    color: white !important;

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

.modal h3 {
    margin: 0 40px 18px 0 !important;

    color: #fff !important;

    font-size: 20px !important;
    font-weight: 800 !important;
}

.close-btn {
    top: 14px !important;
    right: 14px !important;

    display: grid !important;
    place-items: center !important;

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

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

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

    font-size: 13px !important;

    transition:
        color .15s ease,
        border-color .15s ease,
        background .15s ease !important;
}

.close-btn:hover {
    border-color: rgba(255,36,138,.45) !important;
    background: rgba(255,36,138,.08) !important;
    color: #fff !important;
}

.cc_request_form label {
    display: block !important;

    margin: 12px 0 4px !important;

    color: #837c88 !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
}

.modal .form-control {
    height: 46px !important;

    margin: 0 !important;
    padding: 0 13px !important;

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

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

    font-size: 13px !important;
}

.modal input[readonly] {
    color: #d8d1db !important;
}

.modal input[data-type="submit"] {
    width: 100% !important;

    min-height: 48px !important;

    margin-top: 18px !important;
}

/* Centova result area */
.cc_request_form [data-type="result"] {
    margin-bottom: 10px !important;

    color: var(--hr-pink-soft) !important;

    font-size: 12px !important;
}

/* ---------- MOBILE ---------- */

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

    .search-tabs {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .search-tabs .tab {
        width: 100% !important;
    }

    .search-form-box {
        flex-direction: column !important;
    }

    #search-input,
    .search-form-box button[type="submit"] {
        width: 100% !important;
    }

    .suggestions {
        left: 10px !important;
        right: 10px !important;
    }

    table,
    table tbody,
    table tr,
    table td {
        display: block !important;
        width: 100% !important;
    }

    table tr:first-child {
        display: none !important;
    }

    table {
        border-spacing: 0 !important;
    }

    table tr:not(:first-child) {
        margin-bottom: 10px !important;

        overflow: hidden !important;

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

    table td {
        padding: 10px 12px !important;

        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.045) !important;
        border-radius: 0 !important;

        text-align: left !important;
    }

    table td:first-child,
    table td:last-child {
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    table td:last-child {
        border-bottom: 0 !important;

        text-align: right !important;
    }

    table td:nth-child(1)::before {
        content: "ИЗПЪЛНИТЕЛ";
    }

    table td:nth-child(2)::before {
        content: "ПЕСЕН";
    }

    table td:nth-child(1)::before,
    table td:nth-child(2)::before {
        display: block;

        margin-bottom: 4px;

        color: #655e69;

        font-size: 8px;
        font-weight: 850;
        letter-spacing: .12em;
    }

    .request-btn {
        width: 100% !important;
    }

    .pagination {
        margin-top: 14px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   NIGHT PULSE - REQUEST CONTRAST HARDENING
   No legacy dark text on dark skin
   ========================================================= */

body,
.table-wrapper,
table,
table tbody,
table tr,
table td,
#search-form,
.search-group,
.search-form-box,
.pagination,
.modal,
.cc_request_form {
    color: #f4eff5 !important;
}

table td:first-child {
    color: #ffffff !important;
}

table td:nth-child(2) {
    color: #cfc7d2 !important;
}

table th {
    color: #9d94a1 !important;
}

.search-tabs .tab {
    color: #b0a7b4 !important;
}

.search-tabs .tab.active,
.search-tabs .tab:hover {
    color: #ffffff !important;
}

#search-input {
    color: #ffffff !important;
}

#search-input::placeholder {
    color: #8d8491 !important;
}

.pagination a {
    color: #bcb3bf !important;
}

.pagination a:hover,
.pagination a.active {
    color: #ffffff !important;
}

.modal h3,
.modal label,
.cc_request_form label {
    color: #ffffff !important;
}

.modal .form-control {
    color: #ffffff !important;
}

.suggestions,
.suggestions div {
    color: #dcd4df !important;
}

.suggestions div:hover {
    color: #ffffff !important;
}

a {
    text-decoration-color: rgba(255,36,138,.45);
}