/* ============================================================
   Opio Artists Panel — CSS
   ============================================================ */

/* ── Scroll lock ──────────────────────────────────────────── */
body.oap-no-scroll {
    overflow: hidden;
}

/* ── Overlay ──────────────────────────────────────────────── */
.oap-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0, 0, 0, 0.55);
    z-index:    99990;
    cursor:     pointer;
    transition: opacity 0.35s ease;
    opacity:    0;
}
.oap-overlay.is-visible {
    display: block;
    opacity: 1;
}

/* ── Trigger button ───────────────────────────────────────── */
.oap-trigger-btn {
    position:      fixed;
    right:         0;
    top:           50%;
    transform:     translateY(-50%);
    display:       flex;
    align-items:   center;
    gap:           8px;
    background:    #ffffff;
    border:        none;
    border-radius: 30px 0 0 30px;
    padding:       10px 14px 10px 10px;
    cursor:        pointer;
    z-index:       99992;
    box-shadow:    -3px 0 14px rgba(0,0,0,0.25);
    transition:    box-shadow 0.3s ease, transform 0.3s ease;
    outline:       none;
}
.oap-trigger-btn:hover {
    box-shadow: -4px 0 20px rgba(0,0,0,0.35);
}
/* hide when panel is open */
.oap-trigger-btn.is-open {
    pointer-events: none;
    opacity:        0;
    transform:      translateY(-50%) translateX(20px);
}

.oap-arrow-icon {
    width:           34px;
    height:          34px;
    background:      #1a1a1a;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #ffffff;
    flex-shrink:     0;
    transition:      transform 0.35s ease;
}

.oap-btn-label {
    font-family:    'Montserrat', Arial, sans-serif;
    font-weight:    800;
    font-size:      12px;
    letter-spacing: 2px;
    color:          #1a1a1a;
    text-transform: uppercase;
    white-space:    nowrap;
}

/* ── Panel ────────────────────────────────────────────────── */
.oap-panel {
    position:   fixed;
    top:        0;
    right:      0;
    width:      320px;
    max-width:  90vw;
    height:     100vh;
    z-index:    99991;
    transform:  translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
    display:    flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.oap-panel::-webkit-scrollbar       { width: 4px; }
.oap-panel::-webkit-scrollbar-track { background: transparent; }
.oap-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.oap-panel.is-open {
    transform: translateX(0);
}

/* ── Studio section ───────────────────────────────────────── */
.oap-studio-section {
    position:           relative;
    display:            flex;
    flex-direction:     column;
    justify-content:    center;
    min-height:         200px;
    padding:            28px 28px 28px 28px;
    background-size:    cover;
    background-position: center;
    text-decoration:    none;
    overflow:           hidden;
    flex-shrink:        0;
}
.oap-studio-section::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--oap-overlay, rgba(80,30,100,0.65));
    transition: background 0.3s ease;
}
a.oap-studio-section:hover::after {
    background: rgba(60,20,80,0.75);
}

.oap-studio-small,
.oap-studio-big {
    position:       relative;
    z-index:        1;
    display:        block;
    font-family:    'Montserrat', Arial, sans-serif;
    font-weight:    800;
    color:          #ffffff;
    text-transform: uppercase;
    line-height:    1;
}
.oap-studio-small {
    font-size:      14px;
    letter-spacing: 5px;
    margin-bottom:  6px;
    opacity:        0.9;
}
.oap-studio-big {
    font-size:      42px;
    letter-spacing: 3px;
}

/* ── Close button ─────────────────────────────────────────── */
.oap-close-btn {
    position:        absolute;
    top:             188px;           /* near bottom edge of studio section */
    left:            -1px;
    transform:       translateX(-50%);
    width:           38px;
    height:          38px;
    border:          none;
    border-radius:   50%;
    color:           #ffffff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    z-index:         10;
    transition:      transform 0.2s ease, filter 0.2s ease;
    outline:         none;
    flex-shrink:     0;
    box-shadow:      0 2px 10px rgba(0,0,0,0.4);
}
.oap-close-btn:hover {
    transform: translateX(-50%) scale(1.1);
    filter:    brightness(1.15);
}

/* ── Artists section ──────────────────────────────────────── */
.oap-artists-section {
    padding: 28px 24px 32px;
    flex:    1;
}

.oap-artists-label {
    font-family:    'Montserrat', Arial, sans-serif;
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin:         0 0 4px;
    line-height:    1;
}

.oap-artists-title {
    font-family:    'Montserrat', Arial, sans-serif;
    font-size:      30px;
    font-weight:    800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin:         0 0 24px;
    line-height:    1;
}

/* ── Artist cards ─────────────────────────────────────────── */
.oap-artists-list {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.oap-artist-card {
    display:         flex;
    align-items:     center;
    gap:             16px;
    padding:         10px;
    border-radius:   10px;
    text-decoration: none;
    transition:      background 0.2s ease;
    cursor:          default;
}
a.oap-artist-card {
    cursor: pointer;
}
a.oap-artist-card:hover {
    background: rgba(255, 255, 255, 0.07);
}

.oap-artist-photo {
    width:         72px;
    height:        72px;
    border-radius: 8px;
    object-fit:    cover;
    flex-shrink:   0;
    display:       block;
}
.oap-artist-photo--placeholder {
    background: rgba(255,255,255,0.1);
}

.oap-artist-info {
    flex: 1;
    min-width: 0;
}

.oap-artist-name {
    font-family:    'Montserrat', Arial, sans-serif;
    font-weight:    700;
    font-size:      16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:          #ffffff;
    line-height:    1.2;
    margin-bottom:  3px;
}

.oap-artist-subtitle {
    font-family:    'Montserrat', Arial, sans-serif;
    font-size:      11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          rgba(255, 255, 255, 0.45);
    line-height:    1;
}

/* ── Editor preview placeholder ───────────────────────────── */
.oap-editor-preview {
    background:    #2a2a2a;
    border:        2px dashed rgba(192,132,252,0.4);
    border-radius: 8px;
    padding:       20px;
    text-align:    center;
    color:         #c084fc;
    font-family:   'Montserrat', Arial, sans-serif;
    font-weight:   700;
    font-size:     13px;
    letter-spacing: 2px;
}
.oap-editor-preview svg {
    display:      block;
    margin:       0 auto 10px;
    opacity:      0.6;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .oap-panel {
        width: 100vw;
    }
}