/* Event availability + Notify-me. Pro Stylez Cinema tokens: gold #c9a84c,
   purple #4b0082, dark ground. Nothing here touches theme CSS. */

/* Status tag / badge for a title we list but cannot supply yet */
.psc-tag-unavailable,
.psc-avail-tag {
	background: rgba(201, 168, 76, 0.16) !important;
	color: #f0d98a !important;
	border-color: rgba(201, 168, 76, 0.55) !important;
}

.psc-avail-badge {
	position: absolute;
	left: 8px;
	bottom: 8px;
	z-index: 3;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
	color: #11110b;
	background: var(--psc-gold, #c9a84c);
	border-radius: 999px;
	pointer-events: none;
	max-width: calc(100% - 16px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.psc-avail-badge--inline { bottom: auto; top: 8px; }
.psc-related-card[data-psc-avail] { position: relative; }

/* The note under a movie's tags */
.psc-avail-note {
	margin: 12px 0 20px;
	padding: 10px 14px;
	max-width: 620px;
	font-size: 15px;
	line-height: 1.55;
	color: #e6e2d6;
	background: rgba(201, 168, 76, 0.1);
	border-left: 3px solid var(--psc-gold, #c9a84c);
	border-radius: 2px;
}
.psc-avail-note strong { color: #fff; }

/* Notify-me form */
.psc-notify-form { margin: 14px 0 0; max-width: 560px; }
.psc-notify-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .psc-notify-row { grid-template-columns: 1fr; } }

.psc-notify-field { display: block; margin: 0 0 12px; }
.psc-notify-field > span {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 600;
	color: #d8d4c8;
}
.psc-notify-field em { font-weight: 400; opacity: 0.7; }
.psc-notify-field input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font-size: 16px; /* 16px stops iOS zooming in on focus */
	color: #fff;
	background: #14141c;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 6px;
}
.psc-notify-field input:focus {
	outline: 2px solid var(--psc-gold, #c9a84c);
	outline-offset: 1px;
}

/* Honeypot: invisible to people, obvious to bots. */
.psc-notify-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.psc-notify-fine { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: #b9b5a8; }
.psc-notify-fine a,
.psc-notify-fine a:hover,
.psc-notify-fine a:focus { color: var(--psc-gold, #c9a84c) !important; }

.psc-notify-status { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; }
.psc-notify-status.is-error { color: #ff9b9b; }
.psc-notify-status.is-ok { color: #cfe8c9; }
.psc-notify-done {
	margin: 0;
	padding: 14px 16px;
	font-size: 16px;
	color: #fff;
	background: rgba(75, 0, 130, 0.35);
	border-left: 3px solid var(--psc-gold, #c9a84c);
	border-radius: 2px;
}

.psc-notify-alt { margin: 18px 0 0; font-size: 14px; color: #d8d4c8; }
/* The parent theme's global a:hover (a muddy blue) ties in specificity with a plain
   ".psc-notify-alt a" rule, so on hover it can win depending on stylesheet load order
   — confirmed live 2026-09-22 (Marc: the "Browse titles" link went dark on hover).
   Named :hover/:focus states here, at the same !important weight the rest of this
   codebase already uses to beat the parent theme, close that off for good. */
.psc-notify-alt a,
.psc-notify-alt a:hover,
.psc-notify-alt a:focus { color: var(--psc-gold, #c9a84c) !important; }
.psc-notify-alt a:hover,
.psc-notify-alt a:focus { text-decoration: underline; }

/* "Can't find it? Tell us the title" on a search with no results */
.psc-notify-panel {
	margin: 24px 0;
	padding: 20px 22px;
	max-width: 620px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(201, 168, 76, 0.35);
	border-radius: 8px;
}
.psc-notify-panel h3 { margin: 0 0 6px; font-size: 20px; color: #fff; }
.psc-notify-panel p { color: #d8d4c8; }

/* Availability label inside the search dropdown */
.psc-search-item-avail {
	display: inline-block;
	margin-top: 3px;
	padding: 1px 8px;
	font-size: 11px;
	font-weight: 700;
	color: #11110b;
	background: var(--psc-gold, #c9a84c);
	border-radius: 999px;
}