/* Support CRM — public-facing pages (ticket form + customer portal) */

:root {
	--scrm-ink: #1a2432;
	--scrm-muted: #667085;
	--scrm-border: #e4e7ec;
	--scrm-accent: #0a84ff;
	--scrm-accent-2: #00c6ff;
	--scrm-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 6px rgba(16, 24, 40, 0.04);
}

/* Sleeker, consistent headings across every public screen this plugin
 * renders — left otherwise at whatever oversized default the active theme
 * applies to a bare <h1>/<h2>, which read as jarring next to the
 * deliberately-styled card layouts below. */
.scrm-new-ticket h2,
.scrm-portal h2,
.scrm-portal--auth h2 {
	margin: 0 0 6px;
	font-size: 21px;
	font-weight: 700;
	color: var(--scrm-ink);
	letter-spacing: -0.01em;
}

.scrm-notice {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
}

.scrm-notice--error {
	background: #fdecea;
	border: 1px solid #f5c2c0;
	color: #7a1f1a;
}

.scrm-notice--success {
	background: #eaf7ea;
	border: 1px solid #bfe3bf;
	color: #1c4a1c;
}

.scrm-notice--info {
	background: #eaf5ff;
	border: 1px solid #bcdfff;
	color: #0a4a80;
	font-size: 13px;
}

/* The "put meaningful info in the title/message" + portal-only-correspondence
 * + closure-email guidance block on step 2 — a distinct, softly-tinted card
 * rather than plain paragraphs, so it reads as a deliberate callout instead
 * of blending into the form fields around it. */
.scrm-form-clarification {
	background: linear-gradient(180deg, #f5fafe 0%, #eef7ff 100%);
	border: 1px solid #d8ecff;
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 20px;
}

.scrm-form-clarification p {
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.5;
	color: #2a4a63;
}

.scrm-form-clarification p:last-child {
	margin-bottom: 0;
}

/* Ticket-created confirmation screen — a calmer, more deliberate "receipt"
 * layout instead of the raw default heading size the theme would otherwise
 * apply to a plain <h2> inside the notice box. */
.scrm-confirmation {
	max-width: 520px;
	margin: 0 auto;
	padding: 36px 32px;
	text-align: center;
}

.scrm-confirmation__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #2e7d32;
	color: #fff;
	font-size: 26px;
	line-height: 1;
}

.scrm-confirmation h2 {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	color: #1c4a1c;
}

.scrm-confirmation__ref {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #3d6b3d;
	margin: 0 0 18px;
}

.scrm-confirmation__eta {
	font-size: 15px;
	font-weight: 600;
	color: #1c4a1c;
	background: #fff;
	border: 1px solid #bfe3bf;
	border-radius: 6px;
	padding: 10px 14px;
	margin: 0 0 18px;
}

.scrm-confirmation p {
	text-align: left;
	font-size: 14px;
	line-height: 1.6;
}

.scrm-confirmation__actions {
	text-align: center;
	margin: 22px 0 10px;
}

.scrm-confirmation .scrm-field-hint {
	display: block;
	text-align: center;
	margin-top: 4px;
}

.scrm-privacy-notice {
	font-size: 12px;
	color: #666;
	margin-top: 16px;
}

.scrm-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.scrm-name-fields {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.scrm-name-fields p {
	flex: 1 1 200px;
}

.scrm-field-hint {
	display: block;
	font-size: 12px;
	font-weight: normal;
	color: #666;
	margin-top: 4px;
}

.scrm-portal-links {
	font-size: 14px;
}

.scrm-guest-banner {
	background: #f7f8fa;
	border: 1px solid var(--scrm-border);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
	color: var(--scrm-muted);
	margin-bottom: 16px;
}

.scrm-form select {
	width: 100%;
	max-width: 480px;
	padding: 9px 10px;
	border: 1px solid #cfd4dc;
	border-radius: 6px;
	box-sizing: border-box;
	font-size: 15px;
	background: #fff;
	transition: border-color 0.15s ease;
}

.scrm-form input[type="text"],
.scrm-form input[type="email"],
.scrm-form input[type="password"],
.scrm-form textarea {
	width: 100%;
	max-width: 480px;
	padding: 9px 10px;
	border: 1px solid #cfd4dc;
	border-radius: 6px;
	box-sizing: border-box;
	font-size: 15px;
	transition: border-color 0.15s ease;
}

.scrm-form select:focus,
.scrm-form input[type="text"]:focus,
.scrm-form input[type="email"]:focus,
.scrm-form input[type="password"]:focus,
.scrm-form textarea:focus {
	border-color: var(--scrm-accent);
	outline: none;
}

.scrm-form textarea {
	max-width: 100%;
	width: 100%;
}

.scrm-button {
	display: inline-block;
	background: #111;
	color: #fff;
	border: none;
	padding: 11px 22px;
	border-radius: 7px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.05s ease;
}

.scrm-button:hover {
	background: #2c2c2c;
	color: #fff;
}

.scrm-button:active {
	transform: translateY(1px);
}

.scrm-button--small {
	padding: 7px 14px;
	font-size: 13px;
}

.scrm-button--outline {
	background: #fff;
	color: #111;
	border: 1px solid #111;
}

.scrm-button--outline:hover {
	background: #f0f0f0;
	color: #111;
}

/* The "Didn't get it? Send a new code" resend control on the email-code
 * steps (see SCRM_Shortcodes::render_email_code_form() /
 * SCRM_Portal_Auth::render_guest_code_form()) — a plain <button> made to
 * read as a text link, sitting in its own minimal-margin inline form so it
 * doesn't look like a second, competing primary action next to "Verify". */
.scrm-form--inline {
	margin-top: -4px;
}

.scrm-button-link {
	background: none;
	border: none;
	padding: 0;
	color: #111;
	text-decoration: underline;
	font-size: 13px;
	cursor: pointer;
}

.scrm-button-link:hover {
	color: #555;
}

.scrm-choose-options {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 20px 0;
}

.scrm-ticket-link-button {
	display: inline-block;
	background: #111;
	color: #fff !important;
	padding: 10px 20px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
}

.scrm-ticket-link-button:hover {
	background: #333;
	color: #fff !important;
}

/* Auth screens (login / forgot / reset / force-change) */
.scrm-portal--auth {
	max-width: 440px;
	margin: 0 auto;
	padding: 32px 28px;
	background: #fff;
	border: 1px solid var(--scrm-border);
	border-radius: 12px;
	box-shadow: var(--scrm-card-shadow);
}

.scrm-portal-logo {
	margin-bottom: 18px;
}

/* New-ticket form — a single centred card with a glossy "aero" accent bar
 * instead of bare headings/fields sitting directly on the page background,
 * matching the aero-glass treatment used for chat bubbles elsewhere in the
 * plugin (see the .scrm-message rules below and admin.css). */
.scrm-new-ticket {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
	background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
	border: 1px solid var(--scrm-border);
	border-radius: 16px;
	padding: 38px 40px 34px;
	box-shadow: 0 2px 4px rgba(16, 24, 40, 0.05), 0 12px 32px rgba(10, 132, 255, 0.08);
	overflow: hidden;
}

.scrm-new-ticket::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--scrm-accent) 0%, var(--scrm-accent-2) 100%);
}

.scrm-new-ticket h2 {
	display: flex;
	align-items: center;
	gap: 8px;
}

.scrm-new-ticket > p:first-of-type {
	color: var(--scrm-muted);
	margin-top: 0;
}

.scrm-product-select {
	border: 1px solid var(--scrm-border);
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 16px;
	background: #fafbfc;
}

.scrm-product-select legend {
	font-weight: 600;
	padding: 0 6px;
}

.scrm-product-option {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: normal;
	padding: 10px 10px;
	border-radius: 8px;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

.scrm-product-option:hover {
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(10, 132, 255, 0.08);
}

.scrm-product-option:has(input:checked) {
	background: #eaf5ff;
	box-shadow: inset 0 0 0 1px #bcdfff;
}

.scrm-product-option img {
	width: 56px;
	height: 56px;
	border-radius: 6px;
	object-fit: cover;
	border: 1px solid var(--scrm-border);
	flex-shrink: 0;
}

/* A slightly glossier "aero" button just for the new-ticket form, rather
 * than restyling .scrm-button everywhere it's reused (portal dashboard,
 * login screen, etc.), which the swankier-form request wasn't about. */
.scrm-new-ticket .scrm-button {
	background: linear-gradient(180deg, #2b2b2b 0%, #000 100%);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 8px 20px rgba(10, 132, 255, 0.18);
	transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}

.scrm-new-ticket .scrm-button:hover {
	background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
	box-shadow: 0 2px 4px rgba(16, 24, 40, 0.1), 0 10px 24px rgba(10, 132, 255, 0.24);
	transform: translateY(-1px);
}

.scrm-portal-link {
	margin-top: 12px;
	font-size: 14px;
}

/* Dashboard */
.scrm-portal--dashboard {
	max-width: 980px;
	margin: 0 auto;
}

.scrm-portal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 10px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--scrm-border);
}

.scrm-portal-header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.scrm-portal-layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.scrm-portal-list {
	flex: 0 0 260px;
}

.scrm-portal-ticket-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.scrm-portal-ticket-list li {
	margin-bottom: 6px;
}

.scrm-portal-ticket-list a {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--scrm-border);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.scrm-portal-ticket-list a:hover {
	border-color: #c7ccd4;
	background: #fafbfc;
}

.scrm-portal-ticket-list li.is-active a {
	border-color: var(--scrm-accent);
	background: #eef6ff;
}

.scrm-portal-ticket-subject {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--scrm-ink);
}

.scrm-portal-ticket-id {
	font-weight: 700;
	color: var(--scrm-muted);
	margin-right: 2px;
}

.scrm-portal-thread {
	flex: 1 1 auto;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--scrm-border);
	border-radius: 12px;
	padding: 24px;
	box-shadow: var(--scrm-card-shadow);
}

.scrm-portal-thread-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--scrm-border);
	flex-wrap: wrap;
	gap: 8px;
}

.scrm-status-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.scrm-thread {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
	padding-right: 2px;
}

.scrm-message-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	max-width: 100%;
	animation: scrm-message-in 0.2s ease-out;
}

@keyframes scrm-message-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

.scrm-message-row--customer {
	flex-direction: row-reverse;
	align-self: flex-end;
}

.scrm-message-row--agent {
	align-self: flex-start;
}

.scrm-avatar {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: #97a3b3;
}

.scrm-message-row--customer .scrm-avatar {
	background: linear-gradient(135deg, #0a84ff, #0066e0);
}

.scrm-message-row--agent .scrm-avatar {
	background: linear-gradient(135deg, #1a2432, #34445c);
}

.scrm-message {
	position: relative;
	max-width: 78%;
	padding: 11px 15px;
	border-radius: 16px;
	background: #f0f1f3;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* A subtle top-of-bubble gloss highlight — the "swanky" polish on both
 * bubble colours, not just the customer's blue one. Clipped to the
 * bubble's own rounded corners via the overflow:hidden above. */
.scrm-message::before {
	content: "";
	position: absolute;
	inset: 0 0 50% 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.scrm-message-row:hover .scrm-message {
	transform: translateY(-1px);
}

.scrm-message--customer {
	background: linear-gradient(135deg, #2b9bff 0%, #0a84ff 55%, #0058c2 100%);
	/* Pure white, per explicit repeated request — #FFFFFF exactly, no
	 * off-white/grey tint. */
	color: #ffffff;
	border-bottom-right-radius: 4px;
	box-shadow: 0 3px 10px rgba(10, 88, 194, 0.32);
}

.scrm-message-row:hover .scrm-message--customer {
	box-shadow: 0 5px 14px rgba(10, 88, 194, 0.4);
}

.scrm-message--agent {
	background: linear-gradient(160deg, #fafbfc, #eef0f3);
	color: #1a2432;
	border: 1px solid #e4e7ec;
	border-bottom-left-radius: 4px;
}

.scrm-message-row:hover .scrm-message--agent {
	box-shadow: 0 4px 10px rgba(16, 24, 40, 0.1);
}

.scrm-message__meta {
	display: flex;
	gap: 8px;
	align-items: baseline;
	font-size: 11px;
	opacity: 0.75;
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.scrm-message__body {
	font-size: 14.5px;
	line-height: 1.5;
}

.scrm-message__body p:first-child {
	margin-top: 0;
}

.scrm-message__body p:last-child {
	margin-bottom: 0;
}

/* The actual message text is rendered as <p> tags inside .scrm-message__body
 * (via wpautop). Those <p> elements are a direct match for the active
 * theme's own global paragraph colour rule (e.g. its .entry-content p
 * styling), and a direct rule on an element always wins over a colour the
 * element would otherwise have *inherited* from .scrm-message--customer/
 * --agent above, no matter how that ancestor rule's specificity compares —
 * which is exactly why the bubble text kept rendering in the theme's dark
 * body-text colour instead of the colour set here. Targeting the <p> (and
 * any other nested text) directly, with !important, is what actually wins
 * that fight. */
.scrm-message--customer .scrm-message__body,
.scrm-message--customer .scrm-message__body p,
.scrm-message--customer .scrm-message__body * {
	color: #ffffff !important;
}

.scrm-message--agent .scrm-message__body,
.scrm-message--agent .scrm-message__body p,
.scrm-message--agent .scrm-message__body * {
	color: #1a2432 !important;
}

.scrm-message__attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.scrm-message__attachments img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	cursor: zoom-in;
}

.scrm-message__video {
	max-width: 220px;
	max-height: 160px;
	border-radius: 8px;
	display: block;
	background: #000;
}

.scrm-reply-box {
	position: relative;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--scrm-border);
}

.scrm-reply-box h2 {
	font-size: 15px;
	margin: 0 0 10px;
	color: var(--scrm-ink);
}

.scrm-reply-box textarea {
	width: 100%;
	min-height: 110px;
	padding: 12px;
	border-radius: 10px;
	border: 1px solid #cfd4dc;
	box-sizing: border-box;
	font-size: 15px;
	font-family: inherit;
	resize: vertical;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.scrm-reply-box textarea:focus {
	outline: none;
	border-color: var(--scrm-accent);
	box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
}

/* Attachment "dropzone" widget — shared by the new-ticket form and the
 * reply box. The native <input type=file> fully covers the dropzone at
 * opacity:0, so ordinary browser drag-and-drop and click-to-browse both
 * work without reimplementing either; portal.js only adds the
 * thumbnail/chip rendering and per-file remove button on top. */
.scrm-uploader {
	margin: 14px 0;
}

.scrm-uploader__label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 6px;
	color: var(--scrm-ink);
}

.scrm-dropzone {
	position: relative;
	border: 1.5px dashed #cfd4dc;
	border-radius: 10px;
	background: #fafbfc;
	padding: 22px 16px;
	text-align: center;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.scrm-dropzone.is-dragover {
	border-color: var(--scrm-accent);
	background: #eef6ff;
}

.scrm-dropzone__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.scrm-dropzone__prompt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	pointer-events: none;
	color: var(--scrm-muted);
}

.scrm-dropzone__icon {
	color: #98a2b3;
	margin-bottom: 2px;
}

.scrm-dropzone__text {
	font-size: 13.5px;
	color: var(--scrm-ink);
}

.scrm-dropzone__text strong {
	color: var(--scrm-accent);
}

.scrm-dropzone__hint {
	font-size: 12px;
	color: var(--scrm-muted);
}

.scrm-uploader__error {
	color: #b3261e;
	font-size: 12.5px;
	margin: 6px 0 0;
}

.scrm-file-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.scrm-file-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--scrm-border);
	border-radius: 8px;
	padding: 6px 8px;
	max-width: 220px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.scrm-file-chip__thumb {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	overflow: hidden;
	background: #eef0f3;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #667085;
}

.scrm-file-chip__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.scrm-file-chip__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.scrm-file-chip__name {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--scrm-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 130px;
}

.scrm-file-chip__size {
	font-size: 11px;
	color: var(--scrm-muted);
}

.scrm-file-chip__remove {
	flex: 0 0 auto;
	background: none;
	border: none;
	color: #98a2b3;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 4px;
	border-radius: 4px;
	transition: background 0.15s ease, color 0.15s ease;
}

.scrm-file-chip__remove:hover {
	background: #fdecea;
	color: #b3261e;
}

.scrm-ticket-locked-note {
	color: #666;
	font-style: italic;
	background: #f5f6f8;
	border: 1px solid #e4e7ec;
	border-radius: 8px;
	padding: 12px 14px;
}

/* Post-closure survey — deliberately its OWN look, not the generic
 * blue/cyan card treatment shared by the rest of the portal above. This is
 * the one screen a customer sees after the theme's own black/white/orange
 * "Hardset" brand chrome, so it borrows that palette + type system
 * (Oswald headings, Jost body — see the conditional font enqueue in
 * scrm_maybe_enqueue_public_assets()) directly, scoped locally via these
 * custom properties so nothing else in the portal is affected. */
.scrm-survey {
	--scrm-survey-black: #0a0a0a;
	--scrm-survey-charcoal: #1f1f1f;
	--scrm-survey-grey-700: #565656;
	--scrm-survey-grey-300: #c9c9c9;
	--scrm-survey-grey-100: #f2f2f2;
	--scrm-survey-accent: #f4791f;
	--scrm-survey-accent-dark: #d9650f;
	position: relative;
	max-width: 600px;
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid var(--scrm-survey-grey-100);
	border-radius: 16px;
	padding: 40px 44px 36px;
	box-shadow: 0 2px 10px rgba(10, 10, 10, 0.06), 0 14px 32px rgba(10, 10, 10, 0.1);
	overflow: hidden;
	text-align: center;
	font-family: 'Jost', Arial, Helvetica, sans-serif;
	color: var(--scrm-survey-black);
}

.scrm-survey::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--scrm-survey-accent) 0%, var(--scrm-survey-accent-dark) 100%);
}

.scrm-survey__logo {
	display: flex;
	justify-content: center;
	margin-bottom: 18px;
}

.scrm-survey__eyebrow {
	display: inline-block;
	font-family: 'Oswald', Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--scrm-survey-accent-dark);
	margin-bottom: 8px;
}

.scrm-survey h2 {
	margin: 0 0 10px;
	font-family: 'Oswald', Arial, Helvetica, sans-serif;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--scrm-survey-black);
}

.scrm-survey__ticket-ref {
	color: var(--scrm-survey-grey-700);
	font-size: 13px;
	margin: 0 0 20px;
}

.scrm-survey p {
	text-align: left;
	color: var(--scrm-survey-grey-700);
}

.scrm-survey .scrm-notice {
	text-align: left;
}

.scrm-survey-form label {
	text-align: left;
	font-weight: 500;
	color: var(--scrm-survey-black);
}

/* Five-star picker — pure CSS, no JS required. Markup is emitted 5..1 and
 * laid out row-reverse so the sibling combinator below can light up every
 * star from the far left up to whichever one is hovered/checked. Each
 * label carries a title + data-label with its meaning ("Very Unsatisfied"
 * … "Extremely Satisfied", see SCRM_Survey::rating_labels()) — the title
 * gives every browser a native tooltip for free, and portal.js mirrors
 * data-label into the caption below on hover/focus/change so the meaning
 * is visible without having to hover at all. */
.scrm-star-rating {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	gap: 8px;
	margin: 4px 0 6px;
}

.scrm-star-rating input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.scrm-star-rating label {
	font-size: 40px;
	line-height: 1;
	color: var(--scrm-survey-grey-300);
	cursor: pointer;
	transition: color 0.15s ease, transform 0.12s ease;
}

.scrm-star-rating input:checked ~ label,
.scrm-star-rating label:hover,
.scrm-star-rating label:hover ~ label {
	color: var(--scrm-survey-accent);
	transform: scale(1.08);
}

.scrm-star-rating input:focus-visible + label {
	outline: 2px solid var(--scrm-survey-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.scrm-star-rating__caption {
	text-align: center !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--scrm-survey-grey-700);
	margin: 0 0 22px;
	min-height: 1.4em;
}

.scrm-survey-rating {
	font-size: 30px;
	letter-spacing: 4px;
	margin: 0 0 6px;
}

.scrm-survey-rating__word {
	display: block;
	font-family: 'Oswald', Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--scrm-survey-accent-dark);
	margin: 2px 0 16px;
}

.scrm-star {
	color: var(--scrm-survey-grey-300, #c9c9c9);
}

.scrm-star.is-filled {
	color: var(--scrm-survey-accent, #f4791f);
}

.scrm-survey-feedback {
	margin: 0 0 16px;
	padding: 14px 16px;
	background: var(--scrm-survey-grey-100);
	border-left: 3px solid var(--scrm-survey-accent);
	border-radius: 0 8px 8px 0;
	font-size: 14px;
	line-height: 1.6;
	font-style: italic;
	text-align: left;
	color: var(--scrm-survey-charcoal);
}

.scrm-survey__done {
	text-align: center;
}

.scrm-survey__done .scrm-confirmation__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--scrm-survey-black, #0a0a0a);
	color: #fff;
	font-size: 26px;
}

.scrm-survey__done p {
	text-align: center;
}

/* Prize teaser — pulls the chosen WooCommerce product's own image + short
 * description live (see SCRM_Survey::prize_product()), so "features and
 * benefits" always reflect the product page rather than being duplicated
 * and going stale here. Image intentionally small (40px) — a supporting
 * detail, not competing with the star rating for attention. */
.scrm-survey-prize {
	display: flex;
	align-items: center;
	gap: 14px;
	text-align: left;
	background: var(--scrm-survey-grey-100, #f2f2f2);
	border: 1px solid #e4e4e4;
	border-radius: 10px;
	padding: 12px 16px;
	margin: 0 0 22px;
}

.scrm-survey-prize img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid #e4e4e4;
	flex-shrink: 0;
}

.scrm-survey-prize__label {
	display: block;
	font-family: 'Oswald', Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--scrm-survey-accent-dark);
	margin-bottom: 2px;
}

.scrm-survey-prize__body strong {
	display: block;
	font-size: 14px;
	color: var(--scrm-survey-black);
	margin-bottom: 2px;
}

.scrm-survey-prize__desc {
	font-size: 12px;
	color: var(--scrm-survey-grey-700);
	line-height: 1.5;
}

/* Post-submission variant on the "thanks for your feedback" screen —
 * confirms entry into the draw rather than just advertising the prize,
 * so it gets a green "you're in" accent instead of the neutral grey. */
.scrm-survey-prize--entered {
	background: #eef8f0;
	border-color: #bfe3c8;
	margin-top: 18px;
}

.scrm-survey-prize--entered .scrm-survey-prize__label {
	color: #1a7a3c;
}

.scrm-survey .scrm-button {
	background: var(--scrm-survey-black, #0a0a0a);
	border-color: var(--scrm-survey-black, #0a0a0a);
	font-family: 'Oswald', Arial, Helvetica, sans-serif;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.scrm-survey .scrm-button:hover {
	background: var(--scrm-survey-accent, #f4791f);
	border-color: var(--scrm-survey-accent, #f4791f);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(244, 121, 31, 0.3);
}

@media ( max-width: 780px ) {
	.scrm-portal-layout {
		flex-direction: column;
	}
	.scrm-portal-list {
		flex-basis: auto;
		width: 100%;
	}
	.scrm-message {
		max-width: calc(100% - 36px);
	}

	/* The card layouts below were sized for a desktop-width column — that
	 * much horizontal padding eats a big chunk of a phone's actual width,
	 * squeezing form fields and message text into a narrow strip. Trim it
	 * back so the content itself gets the room instead of the padding. */
	.scrm-new-ticket,
	.scrm-confirmation,
	.scrm-survey {
		padding: 22px 18px;
	}

	.scrm-portal--auth {
		padding: 24px 20px;
	}

	.scrm-star-rating label {
		font-size: 34px;
	}

	.scrm-survey-prize {
		flex-direction: column;
		text-align: center;
	}

	.scrm-survey-prize__desc {
		text-align: left;
	}

	.scrm-portal-thread {
		padding: 16px;
	}

	.scrm-portal-header {
		gap: 12px;
	}

	.scrm-portal-header-actions {
		gap: 12px;
		flex-wrap: wrap;
	}

	.scrm-name-fields {
		gap: 0 12px;
	}

	/* Two side-by-side name fields at 200px minimum each just about fit a
	 * tablet, but on a phone-width column that forces each field down to
	 * an uncomfortably narrow strip — stack them full-width instead. */
	.scrm-name-fields p {
		flex-basis: 100%;
	}

	.scrm-message__attachments img {
		width: 76px;
		height: 76px;
	}

	.scrm-message__video {
		max-width: 100%;
	}

	.scrm-file-chip {
		max-width: 100%;
	}

	/* Bigger tap targets throughout — comfortably above the ~44px minimum
	 * generally recommended for touch, versus the tighter desktop sizing. */
	.scrm-button {
		padding: 13px 20px;
	}

	.scrm-button--small {
		padding: 10px 16px;
	}

	.scrm-dropzone {
		padding: 18px 12px;
	}
}

/* Smaller phones (most iPhones in portrait, small Android devices) get one
 * more pass — the 780px tier above assumes a bit more width than these
 * actually have. */
@media ( max-width: 420px ) {
	.scrm-new-ticket,
	.scrm-confirmation,
	.scrm-portal--auth {
		padding: 18px 14px;
		border-radius: 10px;
	}

	.scrm-portal-thread {
		padding: 14px;
		border-radius: 10px;
	}

	.scrm-new-ticket h2,
	.scrm-portal h2,
	.scrm-portal--auth h2 {
		font-size: 19px;
	}

	.scrm-confirmation {
		padding-left: 18px;
		padding-right: 18px;
	}

	.scrm-message {
		max-width: calc(100% - 30px);
		padding: 10px 12px;
	}

	.scrm-avatar {
		width: 24px;
		height: 24px;
		font-size: 11px;
	}

	.scrm-message__attachments img {
		width: 64px;
		height: 64px;
	}

	/* The two "how do you want to track this ticket" buttons on the portal
	 * chooser screen are naturally wide (their label text alone runs
	 * ~200px+) — below 420px that leaves barely any wrap room, so stack
	 * them full-width instead of relying on flex-wrap to do it gracefully. */
	.scrm-choose-options {
		flex-direction: column;
	}

	.scrm-choose-options .scrm-button {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
}