/* SHC Radio 0.6.28 — private Resident DJ Portal. */
.shcDjPortal {
    --shcdj-blue: #168dff;
    --shcdj-blue-soft: #66bdff;
    --shcdj-orange: #ff7200;
    --shcdj-bg: #020a12;
    --shcdj-panel: #061522;
    --shcdj-border: #173e5b;
    --shcdj-text: #edf7ff;
    --shcdj-soft: #91aac0;
    width: min(100%, 1540px);
    margin: 0 auto;
    padding: 10px 0 42px;
    color: var(--shcdj-text);
}

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

.shcDjPortal__hero,
.shcDjPortal__panel,
.shcDjPortal__notice {
    overflow: hidden;
    border: 1px solid rgb(39 166 255 / 20%);
    border-radius: 11px;
    background:
        radial-gradient(circle at 10% 0%, rgb(22 141 255 / 10%), transparent 36%),
        radial-gradient(circle at 95% 100%, rgb(255 114 0 / 7%), transparent 34%),
        linear-gradient(120deg, rgb(2 10 18 / 99%), rgb(5 19 32 / 98%) 58%, rgb(6 14 23 / 99%));
}

.shcDjPortal__hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 142px;
    padding: 24px 28px;
    margin-bottom: 18px;
}
.shcDjPortal__hero::before,
.shcDjPortal__panel::before,
.shcDjPortal__notice::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--shcdj-blue), var(--shcdj-orange));
}
.shcDjPortal__hero > div:first-child { min-width: 0; }
.shcDjPortal__hero small,
.shcDjPortal__panel header > div > small {
    color: var(--shcdj-blue-soft);
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.shcDjPortal__hero small i { margin-right: 7px; color: var(--shcdj-orange); }
.shcDjPortal__hero h1 {
    margin: 5px 0 6px;
    color: #fff;
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    font-weight: 950;
    letter-spacing: -.035em;
}
.shcDjPortal__hero p { margin: 0; color: #a9c2d8; font-size: .83rem; line-height: 1.55; }
.shcDjPortal__hero p strong { color: #fff; }
.shcDjPortal__heroActions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.shcDjPortal__accountState,
.shcDjPortal__radioLink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .045em;
    text-decoration: none !important;
}
.shcDjPortal__accountState.is-enabled { color: #8affba; border: 1px solid rgb(45 213 124 / 28%); background: rgb(9 67 42 / 52%); }
.shcDjPortal__accountState.is-disabled { color: #ffc38d; border: 1px solid rgb(255 114 0 / 30%); background: rgb(70 32 6 / 46%); }
.shcDjPortal__radioLink { color: #eaf6ff !important; border: 1px solid #205780; background: #061a2a; }
.shcDjPortal__radioLink:hover { border-color: var(--shcdj-blue); background: #0a3152; }

.shcDjPortal__notice {
    position: relative;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 20px;
    margin-bottom: 18px;
}
.shcDjPortal__notice > i { margin-top: 3px; color: var(--shcdj-blue-soft); font-size: 1.35rem; }
.shcDjPortal__notice.is-warning > i { color: #ff9b4b; }
.shcDjPortal__notice h2 { margin: 0; color: #fff; font-size: 1rem; }
.shcDjPortal__notice p { margin: 5px 0 0; color: var(--shcdj-soft); font-size: .74rem; line-height: 1.55; }

.shcDjPortal__grid,
.shcDjPortal__workGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}
.shcDjPortal__workGrid { margin-top: 18px; }

.shcDjPortal__panel { position: relative; min-width: 0; }
.shcDjPortal__panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 65px;
    padding: 15px 18px;
    border-bottom: 1px solid rgb(39 166 255 / 13%);
    background: rgb(2 12 21 / 64%);
}
.shcDjPortal__panel header h2 { margin: 3px 0 0; color: #fff; font-size: 1rem; font-weight: 900; }
.shcDjPortal__panel header h2 i { width: 20px; margin-right: 5px; color: var(--shcdj-orange); text-align: center; }
.shcDjPortal__panelIntro { margin: 0; padding: 15px 18px 2px; color: var(--shcdj-soft); font-size: .72rem; line-height: 1.55; }

.shcDjPortal__liveBadge,
.shcDjPortal__secure,
.shcDjPortal__count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: .55rem;
    font-weight: 950;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}
.shcDjPortal__liveBadge.is-online { color: #75ffad; background: rgb(11 77 47 / 58%); border: 1px solid rgb(54 229 130 / 26%); }
.shcDjPortal__liveBadge.is-offline { color: #ffb086; background: rgb(83 29 8 / 55%); border: 1px solid rgb(255 114 0 / 25%); }
.shcDjPortal__secure { color: #a9d8ff; background: rgb(8 44 72 / 64%); border: 1px solid rgb(39 166 255 / 22%); }
.shcDjPortal__count { color: #d0e8fc; background: #071a29; border: 1px solid #1a4564; }

.shcDjPortal__nowPlaying { padding: 23px 20px 19px; }
.shcDjPortal__nowPlaying small { display: block; color: var(--shcdj-blue-soft); font-size: .57rem; font-weight: 900; letter-spacing: .1em; }
.shcDjPortal__nowPlaying strong { display: block; margin-top: 6px; color: #fff; font-size: clamp(1.45rem, 2.4vw, 2.15rem); line-height: 1.08; overflow-wrap: anywhere; }
.shcDjPortal__nowPlaying span { display: block; margin-top: 7px; color: #ffac66; font-size: .82rem; font-weight: 800; }
.shcDjPortal__liveMeta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 18px 18px; }
.shcDjPortal__liveMeta div { min-width: 0; padding: 11px 12px; border: 1px solid #153953; border-radius: 7px; background: rgb(2 10 18 / 78%); }
.shcDjPortal__liveMeta small { display: block; color: #7e98ae; font-size: .52rem; font-weight: 900; letter-spacing: .08em; }
.shcDjPortal__liveMeta strong { display: block; margin-top: 4px; color: #eaf5ff; font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shcDjPortal__onAirYou { margin: 0 18px 18px; padding: 10px 12px; color: #99ffd1; background: rgb(6 61 40 / 52%); border: 1px solid rgb(50 220 130 / 20%); border-radius: 7px; font-size: .68rem; font-weight: 800; }

.shcDjPortal__connectionGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 15px 18px 10px; }
.shcDjPortal__field,
.shcDjPortal__bookingForm label,
.shcDjPortal__socialForm label { min-width: 0; }
.shcDjPortal__field > span:first-child,
.shcDjPortal__bookingForm label > span,
.shcDjPortal__socialForm label > span { display: block; margin-bottom: 5px; color: #8faac0; font-size: .57rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.shcDjPortal__fieldValue { display: flex; min-width: 0; }
.shcDjPortal__fieldValue input,
.shcDjPortal__bookingForm input,
.shcDjPortal__bookingForm textarea,
.shcDjPortal__socialForm input {
    width: 100%;
    min-width: 0;
    color: #edf8ff;
    background: #020a12;
    border: 1px solid #1b4666;
    border-radius: 7px;
    outline: none;
    font: inherit;
}
.shcDjPortal__fieldValue input { min-height: 39px; padding: 0 10px; border-radius: 7px 0 0 7px; }
.shcDjPortal__fieldValue button {
    flex: 0 0 39px;
    width: 39px;
    min-height: 39px;
    color: #a9d7fa;
    background: #082038;
    border: 1px solid #1b4666;
    border-left: 0;
    cursor: pointer;
}
.shcDjPortal__fieldValue button:last-child { border-radius: 0 7px 7px 0; }
.shcDjPortal__fieldValue button:only-of-type { border-radius: 0 7px 7px 0; }
.shcDjPortal__fieldValue button:hover { color: #fff; background: #0d3e68; }
.shcDjPortal__securityNote { margin: 0 18px 18px; padding: 9px 11px; color: #a7d9ff; background: rgb(8 39 63 / 54%); border-radius: 7px; font-size: .62rem; line-height: 1.45; }
.shcDjPortal__securityNote i { margin-right: 6px; color: #54b7ff; }
.shcDjPortal__securityNote.is-muted { color: #8da2b4; }

.shcDjPortal__bookingForm,
.shcDjPortal__socialForm { display: grid; gap: 11px; padding: 17px 18px 18px; }
.shcDjPortal__bookingForm input,
.shcDjPortal__bookingForm textarea,
.shcDjPortal__socialForm input { padding: 10px 11px; font-size: .72rem; }
.shcDjPortal__bookingForm textarea { resize: vertical; min-height: 76px; }
.shcDjPortal__dateGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shcDjPortal__formFoot { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.shcDjPortal__formFoot > small { color: #7891a7; font-size: .58rem; line-height: 1.45; }
.shcDjPortal__formFoot button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 13px;
    color: #fff;
    background: linear-gradient(135deg, #0877dd, #0a9bff);
    border: 1px solid #2c9aff;
    border-radius: 7px;
    font-size: .64rem;
    font-weight: 900;
    cursor: pointer;
}
.shcDjPortal__formFoot button:hover { filter: brightness(1.1); }

.shcDjPortal__bookingList { border-top: 1px solid rgb(39 166 255 / 12%); }
.shcDjPortal__booking { display: grid; grid-template-columns: minmax(170px, .72fr) minmax(0, 1.2fr) auto; gap: 13px; align-items: center; padding: 13px 18px; border-bottom: 1px solid rgb(39 166 255 / 9%); }
.shcDjPortal__booking:last-child { border-bottom: 0; }
.shcDjPortal__bookingDate { min-width: 0; color: #a9d6f7; font-size: .64rem; font-weight: 800; }
.shcDjPortal__bookingDate > i { margin-right: 6px; color: var(--shcdj-orange); }
.shcDjPortal__bookingDate small { display: block; margin: 4px 0 0 20px; color: #758fa5; font-size: .56rem; }
.shcDjPortal__bookingInfo { min-width: 0; }
.shcDjPortal__bookingInfo strong { color: #fff; font-size: .72rem; }
.shcDjPortal__bookingInfo p { margin: 4px 0 0; color: #859eb3; font-size: .61rem; line-height: 1.4; }
.shcDjPortal__cancel { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; color: #ffb18e !important; border: 1px solid rgb(255 114 0 / 24%); border-radius: 7px; background: rgb(63 25 7 / 45%); text-decoration: none !important; font-size: .57rem; font-weight: 900; }
.shcDjPortal__cancel:hover { color: #fff !important; border-color: #ff7200; }
.shcDjPortal__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 130px; padding: 25px; color: #6f879b; text-align: center; }
.shcDjPortal__empty i { margin-bottom: 4px; color: #477594; font-size: 1.35rem; }
.shcDjPortal__empty strong { color: #bfd4e4; font-size: .72rem; }
.shcDjPortal__empty span { font-size: .61rem; }
.shcDjPortal__bookings--full { margin-top: 18px; }

.shcDjPortal__socialForm { grid-template-columns: 1fr 1fr; }
.shcDjPortal__socialForm .shcDjPortal__formFoot { grid-column: 1 / -1; }
.shcDjPortal__socialForm label > span i { width: 17px; color: var(--shcdj-blue-soft); text-align: center; }

.shcDjPortal [data-shcradio-copy].is-copied { color: #7dffb1; background: #0a5031; }

@media (max-width: 980px) {
    .shcDjPortal__grid,
    .shcDjPortal__workGrid { grid-template-columns: 1fr; }
    .shcDjPortal__hero { align-items: flex-start; flex-direction: column; }
    .shcDjPortal__heroActions { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .shcDjPortal { padding-top: 4px; }
    .shcDjPortal__hero { padding: 19px 16px; }
    .shcDjPortal__connectionGrid,
    .shcDjPortal__dateGrid,
    .shcDjPortal__socialForm { grid-template-columns: 1fr; }
    .shcDjPortal__socialForm .shcDjPortal__formFoot { grid-column: auto; }
    .shcDjPortal__liveMeta { grid-template-columns: 1fr; }
    .shcDjPortal__formFoot { align-items: stretch; flex-direction: column; }
    .shcDjPortal__formFoot button { width: 100%; }
    .shcDjPortal__booking { grid-template-columns: 1fr; }
    .shcDjPortal__cancel { justify-self: start; }
}