/* ─── LASC Page Skins ───────────────────────────────────────────────────── */
/* Targets the la-sound-collective-theme's exact markup on /mixes & /upload  */

/* ══════════════════════════════════════════════════════════════════════════
   SPINNING RING LOGO  —  injected on mixes page into .jsst-logo
   ══════════════════════════════════════════════════════════════════════════ */

/* Hide the static img + text in the site header logo link on mixes,
   but NOT our injected spinning-ring wrapper */
.lasc-mixes-page .jsst-logo > img,
.lasc-mixes-page .jsst-logo > span:not(.lasc-spin-wrap) {
    display: none !important;
}

/* Make sure our ring wrapper is visible */
.lasc-mixes-page .jsst-logo > span.lasc-spin-wrap {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Tight padding so the ring fits snugly */
.lasc-mixes-page .jsst-logo {
    gap:     0 !important;
    padding: 6px 0 !important;
}

/* The injected SVG */
.lasc-site-spin-svg {
    width:          48px;
    height:         48px;
    display:        block;
    overflow:       visible;
    flex-shrink:    0;
}

/* Rotating group — text ring spins, center image stays still */
.lasc-ring-spin-g {
    transform-origin: 32px 32px;
    animation: lasc-ring-rotate 22s linear infinite;
}

@keyframes lasc-ring-rotate {
    to { transform: rotate(360deg); }
}

/* ── Hamburger button ── */
.lasc-mixes-page .jsst-header-cta,
.lasc-mixes-page .jsst-nav { display: none !important; }

.lasc-hamburger {
    background:     none;
    border:         none;
    cursor:         pointer;
    padding:        10px 8px;
    display:        flex;
    flex-direction: column;
    gap:            5px;
    margin-left:    auto;
    flex-shrink:    0;
}
.lasc-hamburger span {
    display:       block;
    width:         22px;
    height:        2px;
    background:    #10dccd;
    border-radius: 2px;
    transition:    transform .22s, opacity .22s;
}
.lasc-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lasc-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.lasc-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Side menu overlay ── */
.lasc-side-menu-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.55);
    z-index:         99998;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity .28s;
    backdrop-filter: blur(3px);
}
.lasc-side-menu-overlay.is-open { opacity: 1; pointer-events: all; }

/* ── Side menu panel ── */
.lasc-side-menu {
    position:       fixed;
    top:            0;
    right:          0;
    width:          min(320px, 88vw);
    height:         100dvh;
    background:     #0b0f11;
    border-left:    1px solid rgba(16,220,205,.15);
    z-index:        99999;
    transform:      translateX(100%);
    transition:     transform .3s cubic-bezier(.4,0,.2,1);
    display:        flex;
    flex-direction: column;
    padding:        28px 28px 40px;
    box-shadow:     -8px 0 40px rgba(0,0,0,.55);
}
.lasc-side-menu.is-open { transform: translateX(0); }

body.lasc-menu-open { overflow: hidden; }

.lasc-side-close {
    background:    none;
    border:        none;
    color:         rgba(255,255,255,.4);
    cursor:        pointer;
    align-self:    flex-end;
    padding:       4px;
    margin-bottom: 40px;
    transition:    color .15s;
}
.lasc-side-close:hover { color: #10dccd; }
.lasc-side-close svg   { width: 24px; height: 24px; display: block; }

.lasc-side-links {
    list-style: none;
    margin:     0;
    padding:    0;
    flex:       1;
}
.lasc-side-links li { border-bottom: 1px solid rgba(255,255,255,.06); }
.lasc-side-links a {
    display:         block;
    padding:         18px 0;
    color:           rgba(255,255,255,.82);
    text-decoration: none;
    font-size:       18px;
    font-weight:     600;
    letter-spacing:  0.02em;
    transition:      color .15s, padding-left .15s;
}
.lasc-side-links a:hover {
    color:        #10dccd;
    padding-left: 6px;
}

.lasc-side-brand {
    margin-top:     auto;
    padding-top:    24px;
    border-top:     1px solid rgba(16,220,205,.1);
    color:          rgba(16,220,205,.35);
    font-size:      11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ── Player header: strip old brand redundancy, expose single heading ── */

/* Hide the player's own circular logo (spinning site logo is the brand now) */
.lasc-mixes-page .jswp-jsplayer-logo { display: none !important; }

/* Hide the "Welcome to…" kicker and the subtitle line */
.lasc-mixes-page .jswp-jsplayer-title .kicker,
.lasc-mixes-page .jswp-jsplayer-title .sub  { display: none !important; }

/* Single clean heading */
.lasc-mixes-page .jswp-jsplayer-title h1 {
    font-size:      20px          !important;
    font-weight:    600           !important;
    letter-spacing: 0.04em       !important;
    color:          var(--jsst-text, #eef4ff) !important;
    margin:         0            !important;
    line-height:    1.2          !important;
}

/* ── Pill / action button polish ── */

/* Remove the gap left by the deleted "Client Portal" pill */
.lasc-mixes-page .jswp-jsplayer-actions {
    gap: 8px !important;
}

/* Make the single remaining pill match LASC cyan */
.lasc-mixes-page .jswp-jsplayer-actions .jswp-jsplayer-pill {
    background:  rgba(16,220,205,.10) !important;
    border:      1px solid rgba(16,220,205,.35) !important;
    color:       #10dccd !important;
    font-weight: 600 !important;
    transition:  background .18s, border-color .18s !important;
}
.lasc-mixes-page .jswp-jsplayer-actions .jswp-jsplayer-pill:hover {
    background:  rgba(16,220,205,.20) !important;
    border-color: rgba(16,220,205,.65) !important;
    color:        #fff !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MIXES PAGE  —  .lasc-mixes-page
   Let the LASC player fill the full viewport. Strip every wrapper.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. Theme body is already dark (#101820). Remove any leftover padding on main. */
.lasc-mixes-page #content.site-content {
    padding:    0 !important;
    margin:     0 !important;
}

/* 2. Kill the jsst-wrap centered container */
.lasc-mixes-page .jsst-single-wrap,
.lasc-mixes-page .jsst-wrap {
    max-width:  none    !important;
    width:      100%    !important;
    padding:    0       !important;
    margin:     0       !important;
}

/* 3. Strip the card from the article wrapper */
.lasc-mixes-page article.jsst-card,
.lasc-mixes-page article.jsst-prose,
.lasc-mixes-page article {
    max-width:     none        !important;
    width:         100%        !important;
    padding:       0           !important;
    margin:        0           !important;
    border:        none        !important;
    border-radius: 0           !important;
    box-shadow:    none        !important;
    background:    transparent !important;
}

/* 4. Hide duplicate H1 page title (player has its own header) */
.lasc-mixes-page article > h1:first-child,
.lasc-mixes-page .jsst-single-wrap > h1 {
    display: none !important;
}

/* 5. Player outer div — fill space between header and footer player */
.lasc-mixes-page .jswp-jsplayer {
    min-height: calc(100vh - 64px) !important; /* header height */
    padding:    0 !important;
    background: var(--jsst-bg) !important;
}

/* 6. Player shell — full-width, no card chrome */
.lasc-mixes-page .jswp-jsplayer-shell {
    max-width:     none !important;
    width:         100% !important;
    border-radius: 0    !important;
    border-left:   none !important;
    border-right:  none !important;
    border-top:    none !important;
    box-shadow:    none !important;
    background:    linear-gradient(180deg, #111518, #0d1012) !important;
}

/* 7. Sonaar's built-in transport bar — HIDDEN on mixes page.
      Our custom persistent footer player (#lasc-footer-player) replaces it. */
.lasc-mixes-page #jswp-jsplayer-transport,
.lasc-mixes-page .jswp-jsplayer-transport {
    display: none !important;
}

/* 8. Upload Track pill — matches LASC cyan */
.lasc-mixes-page .jswp-jsplayer-pill {
    background: rgba(16,220,205,.08) !important;
    border:     1px solid rgba(16,220,205,.28) !important;
    color:      var(--jsst-cyan) !important;
}
.lasc-mixes-page .jswp-jsplayer-pill:hover {
    background: rgba(16,220,205,.18) !important;
    color:      #fff !important;
}

/* 10. Search input inherits theme dark */
.lasc-mixes-page #jswp-jsplayer-q {
    background:   rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
    color:        var(--jsst-text) !important;
}
.lasc-mixes-page #jswp-jsplayer-q:focus {
    border-color: var(--jsst-cyan) !important;
    box-shadow:   0 0 0 3px rgba(16,220,205,.14) !important;
}

/* 11. Active/playing row highlight */
.lasc-mixes-page .jswp-jsplayer-rows .row.is-active,
.lasc-mixes-page .jswp-jsplayer-rows .row.playing {
    background: rgba(16,220,205,.07) !important;
}

/* 12. Scrollbar — LASC cyan */
.lasc-mixes-page ::-webkit-scrollbar       { width: 5px; height: 5px; }
.lasc-mixes-page ::-webkit-scrollbar-track { background: #0d1012; }
.lasc-mixes-page ::-webkit-scrollbar-thumb { background: rgba(16,220,205,.35); border-radius: 3px; }
.lasc-mixes-page ::-webkit-scrollbar-thumb:hover { background: rgba(16,220,205,.6); }


/* ══════════════════════════════════════════════════════════════════════════
   UPLOAD PAGE  —  .lasc-upload-skin
   The LASC theme is already dark. Wire the upload card to its CSS vars.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. Override upload form CSS variables to use the LASC theme tokens */
.lasc-upload-skin {
    --ltu-bg:        #111518;
    --ltu-surface:   rgba(255,255,255,.04);
    --ltu-border:    var(--jsst-line, rgba(255,255,255,.14));
    --ltu-text:      var(--jsst-text, #eef4ff);
    --ltu-muted:     var(--jsst-muted, #9fb7c0);
    --ltu-error-bg:  rgba(220,38,38,.12);
    --ltu-error:     #f87171;
    --ltu-shadow:    0 8px 48px rgba(0,0,0,.55);
    --ltu-radius:    16px;
}

/* 2. Card — glows faintly cyan on the border, blends into dark bg */
.lasc-upload-skin .ltu-card {
    background:   var(--ltu-bg)   !important;
    border-color: rgba(16,220,205,.18) !important;
    box-shadow:   0 8px 48px rgba(0,0,0,.5),
                  0 0 0 1px rgba(16,220,205,.05) !important;
}

/* 3. Section dividers */
.lasc-upload-skin .ltu-section,
.lasc-upload-skin .ltu-form-header {
    border-color: rgba(255,255,255,.07) !important;
}
.lasc-upload-skin .ltu-form-header {
    background: rgba(16,220,205,.03) !important;
}

/* 4. Inputs */
.lasc-upload-skin .ltu-input {
    background:   rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
    color:        var(--jsst-text, #eef4ff) !important;
}
.lasc-upload-skin .ltu-input:focus {
    border-color: var(--jsst-cyan, #10dccd) !important;
    box-shadow:   0 0 0 3px rgba(16,220,205,.15) !important;
    background:   rgba(16,220,205,.05) !important;
}
.lasc-upload-skin .ltu-input::placeholder {
    color: rgba(255,255,255,.28) !important;
}
.lasc-upload-skin .ltu-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='rgba(255,255,255,.4)' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") !important;
}
.lasc-upload-skin option {
    background: #111518;
    color: #eef4ff;
}

/* 5. Drop zones */
.lasc-upload-skin .ltu-drop-zone {
    background:   rgba(255,255,255,.03) !important;
    border-color: rgba(255,255,255,.1)  !important;
}
.lasc-upload-skin .ltu-drop-zone.is-dragover {
    background:   rgba(16,220,205,.07) !important;
    border-color: var(--jsst-cyan, #10dccd) !important;
}
.lasc-upload-skin .ltu-drop-icon {
    background: rgba(16,220,205,.1) !important;
    color:      var(--jsst-cyan, #10dccd) !important;
}

/* 6. File chosen & remove button */
.lasc-upload-skin .ltu-file-remove {
    border-color: rgba(255,255,255,.15) !important;
    color:        rgba(255,255,255,.45) !important;
    background:   transparent !important;
}
.lasc-upload-skin .ltu-file-remove:hover {
    border-color: #f87171 !important;
    color:        #f87171 !important;
    background:   rgba(220,38,38,.1) !important;
}

/* 7. Progress */
.lasc-upload-skin .ltu-progress-bar-bg {
    background:   rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.1)  !important;
}

/* 8. Ghost button dark */
.lasc-upload-skin .ltu-btn-ghost {
    color:        rgba(255,255,255,.75) !important;
    border-color: rgba(255,255,255,.2)  !important;
}
.lasc-upload-skin .ltu-btn-ghost:hover {
    border-color: rgba(255,255,255,.45) !important;
    background:   rgba(255,255,255,.06) !important;
    color:        #fff !important;
}

/* 9. Subtle text */
.lasc-upload-skin .ltu-submit-note,
.lasc-upload-skin .ltu-hint {
    color: rgba(255,255,255,.38) !important;
}

/* 10. Error */
.lasc-upload-skin .ltu-error {
    background:   rgba(220,38,38,.12) !important;
    border-color: rgba(248,113,113,.2) !important;
    color:        #f87171 !important;
}

/* 11. Success / login gate on dark */
.lasc-upload-skin .ltu-login-gate h2,
.lasc-upload-skin .ltu-success h2 {
    color: var(--jsst-text, #eef4ff) !important;
}
.lasc-upload-skin .ltu-login-gate p,
.lasc-upload-skin .ltu-success p {
    color: var(--jsst-muted, #9fb7c0) !important;
}

/* 12. Remove the jsst-card/jsst-prose constraints on the upload article too */
.lasc-upload-skin article.jsst-card,
.lasc-upload-skin article.jsst-prose {
    background:    transparent !important;
    border:        none        !important;
    box-shadow:    none        !important;
    max-width:     none        !important;
    padding:       0           !important;
}

/* Hide the H1 "Upload" title (form has its own header) */
.lasc-upload-skin article > h1:first-child {
    display: none !important;
}

/* 13. Scrollbar */
.lasc-upload-skin ::-webkit-scrollbar       { width: 5px; }
.lasc-upload-skin ::-webkit-scrollbar-track { background: #0d1012; }
.lasc-upload-skin ::-webkit-scrollbar-thumb { background: rgba(16,220,205,.3); border-radius: 3px; }