/**
 * Ideas Batch 1 — shared surface styles.
 * Uses the Design System tokens when the RN theme provides them,
 * with literal fallbacks so the surfaces stay coherent on any frame.
 */

/* --- Review participation (FEED-011 / FEED-093) --- */
.rn-review-prompt {
	border: 1px solid var(--rn-line, #dce5e8);
	border-radius: var(--rn-radius, 12px);
	padding: 16px;
	margin: 20px 0;
	background: var(--rn-brand-bg, #f0f7f8);
}
.rn-review-prompt-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}
.rn-review-prompt-dismiss { font-size: 13px; }
.rn-review-prompt-sub { color: var(--rn-ink-2, #4a5a60); font-size: 14px; }
.rn-review-prompt-form {
	border-top: 1px dashed var(--rn-line, #dce5e8);
	padding-top: 12px;
	margin-top: 12px;
}
.rn-review-prompt-product { font-weight: 700; margin-bottom: 6px; }
.rn-review-prompt-stars { border: 0; padding: 0; margin: 0 0 8px; }
.rn-review-prompt-stars label {
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	color: #c8d2d6;
	padding: 2px;
	display: inline-block;
	min-width: 34px;
	min-height: 34px;
	text-align: center;
}
.rn-review-prompt-stars input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.rn-review-prompt-stars label:has(input:checked),
.rn-review-prompt-stars label:has(input:focus-visible) {
	color: var(--rn-star, #d97706);
}
.rn-review-prompt-text { width: 100%; margin-bottom: 8px; }
.rn-review-prompt-msg { color: var(--rn-danger, #b3261e); min-height: 1.2em; }
.rn-review-prompt-done { color: var(--rn-brand-strong, #005f73); font-weight: 700; }
.rn-review-prompt-google { margin-top: 12px; font-size: 14px; }
.rn-review-nudge {
	border: 1px solid var(--rn-line, #dce5e8);
	border-inline-start: 4px solid var(--rn-star, #d97706);
	border-radius: var(--rn-radius, 12px);
	padding: 10px 14px;
	margin: 14px 0;
	background: #fff;
}
.rn-reviews-awaiting ul { list-style: none; padding: 0; }
.rn-reviews-awaiting li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--rn-line, #dce5e8);
}

/* --- Guest tracking (FEED-023) --- */
.rn-track-order { max-width: 720px; margin: 0 auto; padding: 16px; }
.rn-track-form input { width: 100%; }
.rn-track-error { color: var(--rn-danger, #b3261e); font-weight: 700; }
.rn-track-timeline {
	display: flex;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: 14px 0;
	flex-wrap: wrap;
}
.rn-track-timeline li {
	flex: 1 1 40%;
	border: 1px solid var(--rn-line, #dce5e8);
	border-radius: 999px;
	padding: 6px 10px;
	text-align: center;
	font-size: 13px;
	color: var(--rn-ink-2, #4a5a60);
}
.rn-track-timeline li.is-done {
	background: var(--rn-brand, #00708f);
	border-color: var(--rn-brand, #00708f);
	color: #fff;
	font-weight: 700;
}
.rn-track-note { font-size: 13px; color: var(--rn-ink-2, #4a5a60); }
.rn-track-login-link { margin-top: 10px; font-size: 14px; }

/* --- Basket expansion --- */
.rn-idea-companions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
}
.rn-idea-companion-reason { font-size: 13px; color: var(--rn-brand-strong, #005f73); }
.rn-idea-companions-sub { color: var(--rn-ink-2, #4a5a60); font-size: 14px; }
.rn-idea-bundle {
	border: 1px solid var(--rn-brand, #00708f);
	border-radius: var(--rn-radius, 12px);
	padding: 14px 16px;
	margin: 16px 0;
	background: var(--rn-brand-bg, #f0f7f8);
}
.rn-idea-bundle-title { font-weight: 700; }
.rn-idea-cart-setup { margin: 20px 0; }
.rn-idea-search-families {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 10px 0;
	font-size: 14px;
}
.rn-idea-search-families a {
	border: 1px solid var(--rn-line, #dce5e8);
	border-radius: 999px;
	padding: 4px 12px;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
}

/* --- Points strip (X-17) --- */
.rn-idea-points-strip {
	border: 1px solid var(--rn-line, #dce5e8);
	border-radius: var(--rn-radius, 12px);
	padding: 10px 14px;
	margin: 0 0 16px;
	background: var(--rn-brand-bg, #f0f7f8);
}
.rn-idea-points-note { color: var(--rn-ink-2, #4a5a60); font-size: 13px; }

/* --- Delivery preview (FEED-025) --- */
.rn-idea-delivery-preview {
	border: 1px dashed var(--rn-brand, #00708f);
	border-radius: var(--rn-radius, 12px);
	padding: 12px 14px;
	margin-top: 12px;
}
.rn-idea-delivery-preview-title { font-weight: 700; }
.rn-idea-delivery-preview-card {
	font-size: 18px;
	letter-spacing: 1px;
	text-align: center;
	background: var(--rn-brand-deep, #0b2b33);
	color: #fff;
	border-radius: 8px;
	padding: 10px;
}
.rn-idea-delivery-preview-note { font-size: 12px; color: var(--rn-ink-2, #4a5a60); }