/* ===========================================================
   RewardRace — Docs Search v2
   =========================================================== */

.rrDocsSearch {
	--rrds-bg:        var(--rr-bg);
	--rrds-text:      var(--rr-heading);
	--rrds-body:      var(--rr-text);
	--rrds-soft:      var(--rr-muted);
	--rrds-border:    var(--rr-border);
	--rrds-input-bg:  var(--rr-bg);
	--rrds-accent:    var(--rr-brand);

	background: var(--rrds-bg);
	color: var(--rrds-body);
	font-family: var(--rr-font-sans);
	box-sizing: border-box;
	padding: var(--rr-space-16) var(--rr-section-x);
}
.rrDocsSearch *, .rrDocsSearch *::before, .rrDocsSearch *::after { box-sizing: border-box; }

.rrDocsSearch--bg-gray        { --rrds-bg: var(--rr-surface); --rrds-input-bg: var(--rr-bg); }
.rrDocsSearch--bg-cream       { --rrds-bg: var(--rr-surface); --rrds-input-bg: var(--rr-bg); }
.rrDocsSearch--bg-white       { --rrds-bg: var(--rr-bg); --rrds-input-bg: var(--rr-surface); }
.rrDocsSearch--bg-transparent { background: transparent; }

.rrDocsSearch__wrap {
	max-width: var(--rr-container-narrow);
	margin: 0 auto;
}

.rrDocsSearch__form {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--rrds-input-bg);
	border: 1px solid var(--rrds-border);
	border-radius: var(--rr-radius-pill);
	padding: 6px 6px 6px 24px;
	box-shadow: var(--rr-shadow-md);
	transition: border-color var(--rr-dur-base) var(--rr-ease-out),
	            box-shadow var(--rr-dur-base) var(--rr-ease-out),
	            transform var(--rr-dur-base) var(--rr-ease-out);
}
.rrDocsSearch__form:hover {
	box-shadow: var(--rr-shadow-lg);
	border-color: var(--rr-border-strong);
}
.rrDocsSearch__form:focus-within {
	border-color: var(--rrds-accent);
	box-shadow: var(--rr-ring), var(--rr-shadow-lg);
	transform: scale(1.01);
}

.rrDocsSearch__icon {
	flex-shrink: 0;
	width: 20px; height: 20px;
	color: var(--rrds-soft);
	margin-right: var(--rr-space-3);
	transition: color var(--rr-dur-fast) var(--rr-ease-out);
}
.rrDocsSearch__form:focus-within .rrDocsSearch__icon { color: var(--rrds-accent); }

.rrDocsSearch__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	outline: 0;
	font-size: var(--rr-fs-md);
	color: var(--rrds-text);
	padding: 16px 0;
	font-family: inherit;
	font-weight: 500;
}
.rrDocsSearch__input::placeholder {
	color: var(--rrds-soft);
	opacity: 1;
}
.rrDocsSearch__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.rrDocsSearch .rrDocsSearch__btn,
.rrDocsSearch button.rrDocsSearch__btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rr-space-2);
	padding: 12px 26px;
	border: 0;
	border-radius: var(--rr-radius-pill);
	background: var(--rr-brand-gradient);
	color: #FFFFFF;
	font-size: var(--rr-fs-sm);
	font-weight: 700;
	letter-spacing: var(--rr-tracking-snug);
	cursor: pointer;
	box-shadow: var(--rr-shadow-brand-sm);
	transition: transform var(--rr-dur-fast) var(--rr-ease-out),
	            box-shadow var(--rr-dur-fast) var(--rr-ease-out);
	font-family: inherit;
}
.rrDocsSearch .rrDocsSearch__btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--rr-shadow-brand-md);
}

@media (max-width: 640px) {
	.rrDocsSearch { padding: var(--rr-space-10) var(--rr-space-4); }
	.rrDocsSearch__form { padding: 4px 4px 4px 20px; }
	.rrDocsSearch__input { font-size: var(--rr-fs-sm); padding: 14px 0; }
	.rrDocsSearch .rrDocsSearch__btn { padding: 10px 20px; font-size: var(--rr-fs-xs); }
}