/* ============================================================================
 * ELAB — Lavastuse header'i hindamise UI
 *
 * Sõltuvused: elab-ui (modal baasstiilid + tokens, sh --elab-blue).
 * Komponendid:
 *   - Header'i nupp `button.elab-rating.elab-rating--user` (sinine tärn kui kasutaja on hinnanud) —
 *     baasstiil UI Kit'is (`.elab-rating` perekond + `button.elab-rating` reset + hover-transform)
 *   - Modal .elab-rate-modal (tume IMDb-stiilis hindamise dialoog)
 * ============================================================================ */


/* ─── Modal — tume taust ────────────────────────────────────── */
/* NB: Nupu-stiil (button.elab-rating) + hover-transition on nüüd UI Kit'is
 * (elab-ui.css, sektsioon 8.5 Domain primitiivid).
 * Värvi kontrollib parent'i värvi-mod (.elab-rating--user → --elab-blue),
 * SVG sees fill="currentColor". */

.elab-rate-modal .elab-modal__dialog {
	width: 460px;
	max-width: 100%;
	background: #1a1a1a;
	color: #fff;
	border-radius: 8px;
	overflow: visible; /* hero-tärn ulatub veidi üles */
	position: relative;
	padding: 0;
}

.elab-rate-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.14s ease, color 0.14s ease;
	z-index: 2;
}
.elab-rate-modal__close:hover,
.elab-rate-modal__close:focus {
	background: rgba(255, 255, 255, 0.12);
	outline: none;
}
.elab-rate-modal__close svg { width: 18px; height: 18px; }


/* ─── Hero — suur sinine tärn küsimärgi/numbri taustaks ─────── */

.elab-rate-modal__hero {
	position: relative;
	display: flex;
	justify-content: center;
	padding: 0;
	margin-top: -60px; /* tärn ulatub modali kasti üles välja (overflow: visible) */
	margin-bottom: 12px;
}

.elab-rate-modal__bigstar {
	width: 110px;
	height: 110px;
	fill: var(--elab-blue, #009ce2);
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

.elab-rate-modal__bigstar-value {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -45%);
	font-size: 30px;
	font-weight: 700;
	color: #fff;
	pointer-events: none;
	line-height: 1;
	font-family: var(--elab-font-display, 'Fraunces', Georgia, serif);
}


/* ─── Body — eyebrow, pealkiri, tärnid, nupp ────────────────── */

.elab-rate-modal__body {
	padding: 6px 32px 28px;
	text-align: center;
}

.elab-rate-modal__eyebrow {
	color: var(--elab-green, #4a9f04);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.elab-rate-modal__title {
	color: #fff;
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 18px;
	line-height: 1.25;
	font-family: var(--elab-font-display, 'Fraunces', Georgia, serif);
}
.elab-rate-modal__year {
	color: rgba(255, 255, 255, 0.6);
	font-weight: 400;
}

/* Tuleviku lavastus — hindamine pole veel avatud */
.elab-rate-modal__locked {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 4px 0 8px;
	padding: 16px 18px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
	line-height: 1.45;
}
.elab-rate-modal__locked svg {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	color: var(--elab-green, #4a9f04);
}
.elab-rate-modal__locked strong {
	color: #fff;
	white-space: nowrap;
}

.elab-rate-modal__stars {
	display: flex;
	gap: 4px;
	justify-content: center;
	margin: 0 0 20px;
}

.elab-rate-modal__star {
	background: transparent;
	border: none;
	padding: 4px;
	cursor: pointer;
	line-height: 0;
	border-radius: 4px;
}
/* BeTheme'i globaalse button:hover stiilid välistame eksplitsiitselt — */
/* hover-tagasiside tuleb ainult tärnide täidetud-värvi muutusest (JS). */
.elab-rate-modal__star:hover,
.elab-rate-modal__star:focus,
.elab-rate-modal__star:active {
	background: transparent !important;
	box-shadow: none !important;
	outline: none;
}
.elab-rate-modal__star:focus-visible {
	outline: 2px solid var(--elab-blue, #009ce2);
	outline-offset: 1px;
}
.elab-rate-modal__star svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: rgba(255, 255, 255, 0.5);
	stroke-width: 1.6;
	transition: fill 0.12s ease, stroke 0.12s ease;
}
.elab-rate-modal__star.is-active svg {
	fill: var(--elab-blue, #009ce2);
	stroke: var(--elab-blue, #009ce2);
}


.elab-rate-modal__submit {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 12px 32px;
	width: 100%;
	max-width: 360px;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.14s ease, color 0.14s ease;
	font-family: inherit;
}
/* color !important — BeTheme global button:hover muudab muidu teksti rohelisemaks. */
.elab-rate-modal__submit:hover:not(:disabled),
.elab-rate-modal__submit:focus:not(:disabled),
.elab-rate-modal__submit:active:not(:disabled) {
	background: var(--elab-blue, #009ce2) !important;
	color: #fff !important;
	outline: none;
}
.elab-rate-modal__submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Külalise (väljalogitud) selgitus — anonüümne hinnang */
.elab-rate-modal__guest-note {
	margin: 14px auto 0;
	max-width: 360px;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
}
.elab-rate-modal__guest-note strong {
	color: rgba(255, 255, 255, 0.82);
	font-weight: 600;
}


/* ─── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.elab-rate-modal .elab-modal__dialog {
		width: 100%;
		border-radius: 12px 12px 0 0;
	}
	.elab-rate-modal__bigstar { width: 80px; height: 80px; }
	.elab-rate-modal__bigstar-value { font-size: 22px; }
	.elab-rate-modal__title { font-size: 19px; }
	.elab-rate-modal__star svg { width: 26px; height: 26px; }
}