/* Studio Platform — front-end (musician) styles · dark cinematic */

:root {
	--sp-c-bg: #08090d;
	--sp-c-surface: rgba(255,255,255,0.04);
	--sp-c-surface2: rgba(255,255,255,0.07);
	--sp-c-border: rgba(255,255,255,0.10);
	--sp-c-border2: rgba(255,255,255,0.16);
	--sp-c-text: #eef0f5;
	--sp-c-muted: #9aa0ae;
	--sp-c-gold: #f0b429;
	--sp-c-gold2: #ffd15c;
	--sp-c-green: #34d399;
	--sp-c-navy: #1b2a4a;
	--sp-c-radius: 16px;
	--sp-c-font-d: 'Space Grotesk', system-ui, sans-serif;
}

.sp-muted { color: var(--sp-c-muted); font-size: 0.9em; }

.sp-order-panel { margin-top: 2.5rem; display: grid; gap: 1.25rem; }
.sp-block {
	background: var(--sp-c-surface);
	border: 1px solid var(--sp-c-border);
	border-radius: var(--sp-c-radius);
	padding: 1.5rem 1.6rem;
	color: var(--sp-c-text);
	backdrop-filter: blur(6px);
}
.sp-block h3 { margin: 0 0 1rem; font-family: var(--sp-c-font-d); font-size: 1.15rem; letter-spacing: -0.01em; }

.sp-file-list { list-style: none; margin: 0; padding: 0; }
.sp-file-list li { padding: 0.6rem 0; border-bottom: 1px solid var(--sp-c-border); display: flex; align-items: center; gap: .5rem; }
.sp-file-list li:last-child { border-bottom: 0; }
.sp-file-list li a { color: var(--sp-c-gold2); text-decoration: none; font-weight: 500; }
.sp-file-list li a:hover { text-decoration: underline; }
.sp-file-list li::before {
	content: "♪"; color: var(--sp-c-gold); font-size: .9rem; opacity: .8;
}

/* Status timeline */
.sp-timeline { list-style: none; display: flex; gap: 0; margin: 0; padding: .5rem 0 0; }
.sp-step {
	flex: 1; position: relative; text-align: center; padding-top: 34px;
	font-size: 0.92rem; color: var(--sp-c-muted); font-family: var(--sp-c-font-d);
}
.sp-step .sp-dot {
	position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 18px; height: 18px; border-radius: 50%;
	background: #2a2d38; border: 3px solid var(--sp-c-bg); box-shadow: 0 0 0 1px #2a2d38;
	transition: all .3s ease;
}
.sp-step::before {
	content: ""; position: absolute; top: 8px; left: -50%; width: 100%;
	height: 3px; background: #2a2d38; z-index: 0;
}
.sp-step:first-child::before { display: none; }
.sp-step--done { color: var(--sp-c-text); }
.sp-step--done .sp-dot { background: var(--sp-c-green); box-shadow: 0 0 0 1px var(--sp-c-green), 0 0 14px rgba(52,211,153,.5); }
.sp-step--done::before { background: var(--sp-c-green); }
.sp-step--current { color: #fff; font-weight: 600; }
.sp-step--current .sp-dot {
	background: var(--sp-c-gold); box-shadow: 0 0 0 1px var(--sp-c-gold), 0 0 16px rgba(240,180,41,.6);
	animation: sp-pulse 1.8s ease-in-out infinite;
}
@keyframes sp-pulse { 0%,100% { box-shadow: 0 0 0 1px var(--sp-c-gold), 0 0 8px rgba(240,180,41,.4); } 50% { box-shadow: 0 0 0 1px var(--sp-c-gold), 0 0 20px rgba(240,180,41,.8); } }

/* Buttons inside the app */
.sp-order-panel .button, .sp-upload-portal .button {
	display: inline-flex; align-items: center; gap: .5rem;
	background: linear-gradient(135deg, var(--sp-c-gold), var(--sp-c-gold2));
	color: #1a1400 !important; border: 0; border-radius: 999px;
	padding: .7rem 1.3rem; font-weight: 600; font-family: var(--sp-c-font-d); text-decoration: none;
	transition: transform .18s ease, box-shadow .25s ease;
}
.sp-order-panel .button:hover, .sp-upload-portal .button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(240,180,41,.5); }
.sp-order-panel .button.alt { background: var(--sp-c-surface2); color: var(--sp-c-text) !important; border: 1px solid var(--sp-c-border2); }

/* Upload portal */
.sp-upload-portal { color: var(--sp-c-text); }
.sp-upload-portal h3 { font-family: var(--sp-c-font-d); }
.sp-upload-form textarea, .sp-upload-form input[type="file"] {
	width: 100%; background: var(--sp-c-bg); border: 1px solid var(--sp-c-border2);
	border-radius: 10px; color: var(--sp-c-text); padding: .8rem; margin-top: .3rem;
}
.sp-upload-form label { color: var(--sp-c-muted); font-weight: 600; }

/* Chat */
.sp-chat-log {
	max-height: 340px; overflow-y: auto; padding: .75rem;
	background: var(--sp-c-bg); border: 1px solid var(--sp-c-border); border-radius: 12px; margin-bottom: 0.75rem;
}
.sp-chat-log:empty::after { content: "No messages yet — say hello 👋"; color: var(--sp-c-muted); font-size: .9rem; }
.sp-msg { margin: 0.5rem 0; max-width: 82%; padding: 0.6rem 0.85rem; border-radius: 14px; }
.sp-msg-meta { font-size: 0.72rem; color: var(--sp-c-muted); margin-bottom: 3px; }
.sp-msg-body p { margin: 0; color: inherit; }
.sp-msg--mine { margin-left: auto; background: linear-gradient(135deg, var(--sp-c-gold), var(--sp-c-gold2)); color: #1a1400; border-bottom-right-radius: 4px; }
.sp-msg--mine .sp-msg-meta { color: #6b5500; }
.sp-msg--theirs { background: var(--sp-c-surface2); border: 1px solid var(--sp-c-border); color: var(--sp-c-text); border-bottom-left-radius: 4px; }
.sp-chat-form { display: flex; gap: 0.5rem; align-items: flex-start; }
.sp-chat-input { flex: 1; resize: vertical; background: var(--sp-c-bg); border: 1px solid var(--sp-c-border2); border-radius: 10px; color: var(--sp-c-text); padding: .6rem .75rem; }
.sp-chat-form .button {
	background: linear-gradient(135deg, var(--sp-c-gold), var(--sp-c-gold2)); color: #1a1400; border: 0;
	border-radius: 10px; padding: .6rem 1.1rem; font-weight: 600; cursor: pointer;
}

/* Video block */
.sp-video .button { text-decoration: none; }

/* Thank-you CTA */
.sp-thankyou-cta {
	background: linear-gradient(135deg, rgba(240,180,41,.12), rgba(124,92,255,.10));
	border: 1px solid var(--sp-c-border2); border-radius: var(--sp-c-radius);
	padding: 1.75rem; margin: 1.5rem 0; color: var(--sp-c-text);
}
.sp-thankyou-cta h2 { font-family: var(--sp-c-font-d); margin-top: 0; }

/* Package cards fallback (child theme owns the rich version) */
.sp-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; }

@media (max-width: 900px) {
	.sp-packages { grid-template-columns: 1fr; }
	.sp-timeline { font-size: 0.78rem; }
}