/* Every rule is scoped under .p68gr-wrap so it outranks a host theme's bare
   `button` / `input[type=text]` styling. Flatsome's `.button, button {...}`
   sets line-height, min-height, text-transform and letter-spacing, so those are
   reset here rather than left to chance. */
.p68gr-wrap {
	--p68gr-a: var(--p68gr-accent, var(--primary-color, #e11d48));
	--p68gr-line: var(--p68gr-border, rgba(255, 255, 255, .09));
	--p68gr-surface: var(--p68gr-bg, rgba(255, 255, 255, .025));
	--p68gr-sunk: var(--p68gr-input-bg, rgba(0, 0, 0, .25));

	max-width: 720px;
	margin-inline: auto;
	color: inherit;
}

.p68gr-wrap button,
.p68gr-wrap input,
.p68gr-wrap textarea {
	min-height: 0;
	max-width: none;
	margin: 0;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	box-shadow: none;
	font-family: inherit;
	font-weight: 400;
}

/* ---------- hero ---------- */
.p68gr-wrap .p68gr-hero {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 30px;
}

.p68gr-wrap .p68gr-hero__badge,
.p68gr-wrap .p68gr__head-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	border-radius: 15px;
	background: color-mix(in srgb, var(--p68gr-a) 15%, transparent);
	color: var(--p68gr-a);
	border: 1px solid color-mix(in srgb, var(--p68gr-a) 26%, transparent);
}

.p68gr-wrap .p68gr-hero__badge { width: 54px; height: 54px; }
.p68gr-wrap .p68gr-hero__badge svg { width: 25px; height: 25px; }

.p68gr-wrap .p68gr-hero__title {
	margin: 0;
	font-size: clamp(19px, 2.3vw, 26px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.p68gr-wrap .p68gr-hero__title span { color: var(--p68gr-a); }

.p68gr-wrap .p68gr-hero__sub {
	margin: 6px 0 0;
	font-size: 13.5px;
	opacity: .6;
	line-height: 1.4;
}

/* ---------- card ---------- */
.p68gr-wrap .p68gr {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 26px;
	border-radius: 20px;
	background: var(--p68gr-surface);
	border: 1px solid var(--p68gr-line);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.p68gr-wrap .p68gr__head { display: flex; align-items: center; gap: 18px; }
.p68gr-wrap .p68gr__head-icon { width: 46px; height: 46px; }
.p68gr-wrap .p68gr__head-icon svg { width: 22px; height: 22px; }

.p68gr-wrap .p68gr__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.2; }
.p68gr-wrap .p68gr__desc { margin: 4px 0 0; font-size: 13px; opacity: .55; line-height: 1.4; }

.p68gr-wrap .p68gr__sep { margin: 0; border: 0; border-top: 1px solid var(--p68gr-line); }

.p68gr-wrap .p68gr__field { display: flex; flex-direction: column; gap: 13px; }

.p68gr-wrap .p68gr__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
}

.p68gr-wrap .p68gr__label-ico { display: inline-flex; }
.p68gr-wrap .p68gr__label-ico svg { width: 16px; height: 16px; }
.p68gr-wrap .p68gr__label-ico--rocket { color: #a78bfa; }
.p68gr-wrap .p68gr__label-ico--edit   { color: var(--p68gr-a); }
.p68gr-wrap .p68gr__label-ico--chat   { color: #60a5fa; }

/* ---------- chips ---------- */
.p68gr-wrap .p68gr__chips { display: flex; flex-wrap: wrap; gap: 12px; }

.p68gr-wrap .p68gr__chip {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 7px 16px 7px 7px;
	border-radius: 999px;
	border: 1px solid var(--p68gr-line);
	background: var(--p68gr-sunk);
	color: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.p68gr-wrap .p68gr__chip:hover {
	border-color: color-mix(in srgb, var(--p68gr-a) 55%, transparent);
	transform: translateY(-1px);
}

.p68gr-wrap .p68gr__chip-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--p68gr-a) 17%, transparent);
	color: var(--p68gr-a);
}

.p68gr-wrap .p68gr__chip-ico svg { width: 15px; height: 15px; }

.p68gr-wrap .p68gr__chip.is-on {
	border-color: var(--p68gr-a);
	background: color-mix(in srgb, var(--p68gr-a) 14%, transparent);
}

.p68gr-wrap .p68gr__chip.is-on .p68gr__chip-ico { background: var(--p68gr-a); color: #fff; }

/* ---------- inputs ---------- */
.p68gr-wrap .p68gr__control { position: relative; display: block; }

.p68gr-wrap .p68gr__control-ico {
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	opacity: .28;
	pointer-events: none;
}

.p68gr-wrap .p68gr__control-ico svg { width: 21px; height: 21px; }

.p68gr-wrap input.p68gr__input,
.p68gr-wrap textarea.p68gr__input {
	width: 100%;
	padding: 12px 15px;
	border-radius: 12px;
	border: 1px solid var(--p68gr-line);
	background: var(--p68gr-sunk);
	color: inherit;
	font-size: 14px;
	line-height: 1.6;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.p68gr-wrap .p68gr__control input.p68gr__input { padding-right: 54px; }

.p68gr-wrap input.p68gr__input::placeholder,
.p68gr-wrap textarea.p68gr__input::placeholder { color: inherit; opacity: .38; }

.p68gr-wrap input.p68gr__input:focus,
.p68gr-wrap textarea.p68gr__input:focus {
	outline: none;
	border-color: var(--p68gr-a);
	background: var(--p68gr-sunk);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--p68gr-a) 18%, transparent);
}

.p68gr-wrap textarea.p68gr__area { resize: vertical; min-height: 82px; }

/* Reachable to a form filler, invisible and unreachable to a person.
   Not display:none — some bots skip fields hidden that obviously. */
.p68gr-wrap .p68gr__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- submit ---------- */
.p68gr-wrap .p68gr__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	width: 100%;
	padding: 14px 22px;
	border: 0;
	border-radius: 12px;
	/* Second stop defaults to the same accent, so the button reads as solid theme
	   colour unless a site opts into a gradient via --p68gr-accent-2. */
	background: linear-gradient(90deg, var(--p68gr-a), var(--p68gr-accent-2, var(--p68gr-a)));
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter .18s ease, transform .18s ease;
}

.p68gr-wrap .p68gr__submit svg { width: 17px; height: 17px; }
.p68gr-wrap .p68gr__submit:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.p68gr-wrap .p68gr__submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- feedback ---------- */
.p68gr-wrap .p68gr__msg { margin: 0; font-size: 13px; text-align: center; line-height: 1.4; }
.p68gr-wrap .p68gr__msg:empty { display: none; }
.p68gr-wrap .p68gr__msg.is-ok { color: #34d399; }
.p68gr-wrap .p68gr__msg.is-error { color: #f87171; }

.p68gr-wrap .p68gr__secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	font-size: 12px;
	opacity: .45;
	line-height: 1.3;
}

.p68gr-wrap .p68gr__secure svg { width: 15px; height: 15px; }

@media (max-width: 620px) {
	.p68gr-wrap .p68gr { padding: 22px; gap: 20px; }
	.p68gr-wrap .p68gr-hero { flex-direction: column; text-align: center; gap: 14px; }
	.p68gr-wrap .p68gr__chips { gap: 9px; }
	.p68gr-wrap .p68gr__chip { padding: 8px 16px 8px 8px; font-size: 14px; gap: 9px; }
	.p68gr-wrap .p68gr__chip-ico { width: 28px; height: 28px; border-radius: 9px; }
}

/* one game per line */
.p68gr-wrap textarea.p68gr__names { resize: vertical; min-height: 104px; }

.p68gr-wrap .p68gr__hint {
	font-style: normal;
	font-size: 12px;
	font-weight: 400;
	opacity: .45;
}

.p68gr-wrap .p68gr__field--quick { gap: 10px; }
.p68gr-wrap .p68gr__msg.is-warn { color: #fbbf24; }

/* Suggestions are an aid, not the point of the form — keep the list to one row
   until asked for the rest. */
.p68gr-wrap .p68gr__chips:not(.is-open) .p68gr__chip.is-extra { display: none; }

.p68gr-wrap .p68gr__more {
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px dashed var(--p68gr-line);
	background: transparent;
	color: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	opacity: .62;
	cursor: pointer;
	transition: opacity .18s ease, border-color .18s ease;
}

.p68gr-wrap .p68gr__more:hover {
	opacity: 1;
	border-color: color-mix(in srgb, var(--p68gr-a) 55%, transparent);
}