/* IW Player for Suno — compact custom card.
   Every rule is scoped under .iwsp-card and the cover/controls are hard-reset
   with !important so host themes (which always style img / button / a) can't
   blow up the layout. */

.iwsp-card, .iwsp-card * { box-sizing: border-box; }

.iwsp-card {
	--iwsp-primary: #7c3aed;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	max-width: 460px;
	margin: 1.5em 0;
	color: #1f2937;
	line-height: 1.35;
	background: #fff;
	border: 1px solid #ece9f6;
	border-radius: 14px;
	padding: 14px;
	box-shadow: 0 1px 4px rgba( 17, 12, 46, .06 );
}

/* Header: small square cover (left) + stacked meta (right) */
.iwsp-card .iwsp-card-head { display: flex !important; align-items: center; gap: 12px; margin: 0 0 12px; }
.iwsp-card .iwsp-card-cover {
	width: 72px !important;
	height: 72px !important;
	min-width: 72px !important;
	max-width: 72px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 10px !important;
	object-fit: cover !important;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ede9fe;
	color: #a78bfa;
	font-size: 26px;
}
.iwsp-card .iwsp-card-meta { display: flex !important; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.iwsp-card .iwsp-card-title { font-weight: 700; font-size: 1.04em; color: #111827; line-height: 1.25; }
.iwsp-card .iwsp-card-artist { font-size: .9em; color: #6b7280; }
.iwsp-card .iwsp-card-style {
	font-size: .78em;
	color: #9ca3af;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* Player bar */
.iwsp-card .iwsp-player-bar {
	display: flex !important;
	align-items: center;
	gap: 10px;
	background: #f6f5fb;
	border: 1px solid #eceaf6;
	border-radius: 10px;
	padding: 8px 10px;
}
.iwsp-card .iwsp-btn {
	-webkit-appearance: none; appearance: none;
	display: inline-flex !important; align-items: center; justify-content: center;
	width: 40px !important; height: 40px !important; min-width: 0 !important; max-width: 40px !important;
	padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important;
	background: var(--iwsp-primary) !important; color: #fff !important;
	font-size: 14px; line-height: 1; cursor: pointer; box-shadow: none !important; flex: 0 0 auto;
}
.iwsp-card .iwsp-btn:hover { filter: brightness( .92 ); }
.iwsp-card .iwsp-seek { flex: 1 1 auto; min-width: 0; accent-color: var(--iwsp-primary); height: 4px; cursor: pointer; margin: 0; }
.iwsp-card .iwsp-time { font-variant-numeric: tabular-nums; font-size: .82em; color: #6b7280; min-width: 3.1em; text-align: right; }

/* Footer */
.iwsp-card .iwsp-card-footer { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5em .7em; }
.iwsp-card .iwsp-card-suno {
	display: inline-block;
	font-size: 12px !important;
	line-height: 1;
	font-weight: 600;
	text-decoration: none !important;
	color: var(--iwsp-primary) !important;
	background: rgba( 124, 58, 237, .08 );
	border: 1px solid rgba( 124, 58, 237, .22 );
	border-radius: 999px;
	padding: .38em .75em;
}
.iwsp-card .iwsp-card-suno:hover { background: rgba( 124, 58, 237, .14 ); text-decoration: none !important; }
.iwsp-card .iwsp-disclaimer-note { font-size: 11px; color: #9ca3af; }

.iwsp-notice, .iwsp-error { color: #6b7280; }

/* Front-end add-by-URL form */
.iwsp-upload-form { max-width: 460px; }
.iwsp-upload-form p { margin: 0 0 .8em; display: flex; flex-direction: column; gap: .25em; }
.iwsp-upload-form input[type="url"] { width: 100%; }
.iwsp-upload-form .iwsp-upload-submit {
	-webkit-appearance: none; appearance: none; border: 0; border-radius: 8px;
	background: #7c3aed; color: #fff; padding: .55em 1.1em; font-size: 14px; font-weight: 600; cursor: pointer;
}
.iwsp-upload-status { margin-left: .6em; font-size: .9em; color: #6b7280; }