/* ===========================================================
   RewardRace — Contact / Get in Touch (rrContact)
   Centered head (chat-icon eyebrow chip + two-line headline +
   paragraph) above a two-column body: a narrower left "contact
   info" card (icon/title/description rows split by hairline
   rules) and a wider right "Send us a message" form card.
   Color tokens, typography, radii and shadows mirror the "How
   It Works", "Pricing" and "Powerful Features" widgets so the
   Contact page reads as part of the same system.
   =========================================================== */

.rrContact {
	--rrct-bg:             #FFFFFF;
	--rrct-section-bg:     #FFFFFF;
	--rrct-heading:        var(--rr-heading);
	--rrct-text:           var(--rr-text);
	--rrct-muted:          var(--rr-muted);
	--rrct-subtle:         var(--rr-subtle);
	--rrct-accent:         var(--rr-brand);
	--rrct-accent-hover:   var(--rr-brand-hover);

	/* Eyebrow chip — 1:1 with the Hero "#1 Rewards & Loyalty App for
	   Shopify" badge: white→lavender wash, hairline purple border,
	   faint shadow, soft blur. */
	--rrct-eyebrow-bg:     linear-gradient(135deg, rgba(255, 255, 255, .85) 0%, rgba(238, 234, 251, .85) 100%);
	--rrct-eyebrow-border: rgba(87, 63, 211, .15);
	--rrct-eyebrow-color:  #2D2A3D;
	--rrct-eyebrow-icon:   var(--rr-brand);
	--rrct-eyebrow-shadow: 0 1px 2px rgba(11, 10, 20, .04);

	/* Card surface — white panels with a hairline border and a
	   soft, evenly-spread shadow (mirrors How It Works cards). */
	--rrct-card-bg:        #FFFFFF;
	--rrct-card-border:    var(--rr-border);
	--rrct-card-radius:    var(--rr-radius-xl);
	--rrct-card-shadow:    0 1px 2px rgba(11, 10, 20, .04), 0 8px 28px rgba(11, 10, 20, .05);

	--rrct-divider:        rgba(11, 10, 20, .08);

	/* Info icon tile — soft lavender square with a brand-purple
	   glyph, matching the Hero / About brand chips. */
	--rrct-icon-bg:        #EEEAFB;
	--rrct-icon-color:     var(--rr-brand);

	/* Form inputs — faint lavender-grey fill, hairline border that
	   sharpens to brand purple on focus. */
	--rrct-input-bg:       #F7F6FC;
	--rrct-input-border:   var(--rr-border);
	--rrct-input-text:     var(--rr-text);
	--rrct-input-ph:       var(--rr-subtle);

	--rrct-btn-bg:         var(--rr-brand-gradient);
	--rrct-btn-color:      #FFFFFF;
	--rrct-btn-shadow:     0 8px 22px rgba(87, 63, 211, .28);

	--rrct-dot-color:      var(--rr-brand);

	position: relative;
	font-family: var(--rr-font-sans);
	color: var(--rrct-text);
	background: var(--rrct-section-bg);
	box-sizing: border-box;
	border-top: 0 !important;
	overflow: hidden;
}
.rrContact *, .rrContact *::before, .rrContact *::after { box-sizing: border-box; }

/* Dark-mode theming — mirrors hero / how-it-works / pricing tokens. */
.rrContact--dark,
html[data-theme="dark"] .rrContact--auto {
	--rrct-bg:             #0A0912;
	--rrct-section-bg:     #0A0912;

	--rrct-accent:         #8B73FF;
	--rrct-accent-hover:   #A894FF;

	--rrct-eyebrow-bg:     linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(139, 115, 255, .14) 100%);
	--rrct-eyebrow-border: rgba(255, 255, 255, .12);
	--rrct-eyebrow-color:  #FFFFFF;
	--rrct-eyebrow-icon:   #B8A6FF;
	--rrct-eyebrow-shadow: 0 1px 2px rgba(0, 0, 0, .35);

	--rrct-card-bg:        #14122A;
	--rrct-card-border:    rgba(255, 255, 255, .08);
	--rrct-card-shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .4);

	--rrct-divider:        rgba(255, 255, 255, .08);

	--rrct-icon-bg:        rgba(139, 115, 255, .16);
	--rrct-icon-color:     #B8A6FF;

	--rrct-input-bg:       #0F0D22;
	--rrct-input-border:   rgba(255, 255, 255, .12);
	--rrct-input-text:     var(--rr-text);
	--rrct-input-ph:       var(--rr-subtle);

	--rrct-btn-shadow:     0 10px 28px rgba(139, 115, 255, .34);

	--rrct-dot-color:      #8B73FF;
}

/* ===========================================================
   Layout
   =========================================================== */
.rrContact__wrap {
	max-width: var(--rr-container);
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 3vw, 2.5rem);
	position: relative;
	z-index: 1;
}

/* ----- Decorative side dot clusters -----
   Inline-SVG diamond fields placed beside the heading. Dots grow
   larger / more saturated toward the centre and shrink + fade to
   faint specks at the four diamond tips. The two clusters are a
   matched pair but not identical — the left diamond is a little
   larger and fuller than the right. Shape, per-dot radius and
   opacity are baked into the SVG (see dots_svg() in the widget
   class); CSS only sizes, positions and colours each cluster. */
.rrContact__dots {
	position: absolute;
	/* Sit beside the heading block, vertically centred on it. */
	top: clamp(8rem, 13vw, 11.5rem);
	transform: translateY(-50%);
	color: var(--rrct-dot-color);
	pointer-events: none;
	z-index: 0;
	line-height: 0;
}
/* Pull each cluster outward so the diamond's outer tip reaches the
   viewport edge, as in the reference. */
.rrContact__dots--tl {
	left: clamp(-1.5rem, -0.6vw, 0rem);
	width: clamp(150px, 13.5vw, 196px);
}
.rrContact__dots--tr {
	right: clamp(-1.5rem, -0.6vw, 0rem);
	/* ~81% of the left cluster — the smaller sibling of the pair. */
	width: clamp(122px, 11vw, 159px);
}

.rrContact__dotsSvg {
	display: block;
	width: 100%;
	height: auto;
}

/* Drop the edge decoration once the layout narrows and the centred
   heading would start to overlap it. */
@media (max-width: 860px) {
	.rrContact__dots { display: none; }
}

/* ===========================================================
   Heading block
   =========================================================== */
.rrContact__head {
	margin: 0 auto var(--rr-space-12);
	max-width: 680px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Eyebrow chip — 1:1 with the Hero "#1 Rewards & Loyalty App for
   Shopify" badge: white→lavender wash, hairline purple border, faint
   shadow, soft blur, 13px / 600 text with no uppercase or tracking. */
.rrContact .rrContact__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px 8px 14px;
	background: var(--rrct-eyebrow-bg);
	border: 1px solid var(--rrct-eyebrow-border);
	border-radius: var(--rr-radius-pill);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--rrct-eyebrow-color);
	margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
	box-shadow: var(--rrct-eyebrow-shadow);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	line-height: 1;
}

.rrContact__eyebrowIcon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	align-items: center;
	justify-content: center;
	color: var(--rrct-eyebrow-icon);
	flex-shrink: 0;
	line-height: 0;
}
.rrContact__eyebrowIcon svg { width: 16px; height: 16px; display: block; }

.rrContact .rrContact__eyebrowText {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
	line-height: 1;
}

.rrContact .rrContact__title {
	font-size: var(--rr-fs-h2);
	font-weight: 800;
	letter-spacing: -.022em;
	line-height: var(--rr-lh-snug);
	margin: 0;
	color: var(--rrct-heading);
	text-wrap: balance;
}
.rrContact__titleLead { color: inherit; }
/* Accent line breaks onto its own row, like the reference. */
.rrContact__titleLead,
.rrContact__titleAccent { display: block; }

.rrContact .rrContact__titleAccent {
	color: var(--rrct-accent) !important;
	font-weight: 800;
	font-style: normal !important;
}

.rrContact .rrContact__subtitle {
	margin: var(--rr-space-5) 0 0;
	color: var(--rrct-muted);
	font-size: var(--rr-fs-md);
	line-height: var(--rr-lh-relaxed);
	font-weight: 400;
	max-width: 480px;
	text-wrap: balance;
}

/* ===========================================================
   Two-column body
   =========================================================== */
.rrContact__body {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	/* Narrower info card, wider form card — matches the reference. */
	grid-template-columns: minmax(0, 0.64fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 2.4vw, 2rem);
	align-items: stretch;
}

/* ----- Shared card surface ----- */
.rrContact__card {
	background: var(--rrct-card-bg);
	border: 1px solid var(--rrct-card-border);
	border-radius: var(--rrct-card-radius);
	box-shadow: var(--rrct-card-shadow);
}

/* ===========================================================
   Left — contact info card
   =========================================================== */
.rrContact__card--info {
	padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2.2vw, 1.875rem);
}

.rrContact__infoList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.rrContact__infoItem {
	display: flex;
	align-items: flex-start;
	gap: clamp(.875rem, 1.4vw, 1.125rem);
	padding: clamp(1.125rem, 1.8vw, 1.5rem) 0;
}
.rrContact__infoItem + .rrContact__infoItem {
	border-top: 1px solid var(--rrct-divider);
}
.rrContact__infoItem:first-child { padding-top: 0; }
.rrContact__infoItem:last-child  { padding-bottom: 0; }

.rrContact__infoIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--rr-radius-md);
	background: var(--rrct-icon-bg);
	color: var(--rrct-icon-color);
	flex-shrink: 0;
	transition: transform var(--rr-dur-base) var(--rr-ease-spring);
}
.rrContact__infoIcon svg { width: 24px; height: 24px; display: block; }
.rrContact__infoItem:hover .rrContact__infoIcon {
	transform: scale(1.05) rotate(-3deg);
}

.rrContact__infoBody {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 2px;
}

.rrContact .rrContact__infoTitle {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
	margin: 0;
	color: var(--rrct-heading);
}

.rrContact .rrContact__infoDesc {
	font-size: var(--rr-fs-sm);
	line-height: var(--rr-lh-normal);
	margin: 0;
	color: var(--rrct-muted);
	font-weight: 400;
}

.rrContact .rrContact__infoLink {
	margin-top: 4px;
	font-size: var(--rr-fs-sm);
	font-weight: 600;
	color: var(--rrct-accent);
	text-decoration: none;
	width: fit-content;
	transition: color var(--rr-dur-fast) var(--rr-ease-out);
}
a.rrContact__infoLink:hover {
	color: var(--rrct-accent-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ===========================================================
   Right — message form card
   =========================================================== */
.rrContact__card--form {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
}

.rrContact .rrContact__formTitle {
	font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
	margin: 0;
	color: var(--rrct-heading);
}

.rrContact .rrContact__formSubtitle {
	margin: var(--rr-space-2) 0 0;
	font-size: var(--rr-fs-sm);
	line-height: var(--rr-lh-normal);
	color: var(--rrct-muted);
	font-weight: 400;
}

.rrContact__form {
	margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: clamp(.75rem, 1.4vw, 1rem);
}

.rrContact__field { display: block; }

.rrContact__field--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(.75rem, 1.4vw, 1rem);
}

/* Inputs — own class carries enough specificity to override the
   site-wide base.css form styling. */
.rrContact .rrContact__input {
	width: 100%;
	display: block;
	font-family: var(--rr-font-sans);
	font-size: var(--rr-fs-sm);
	font-weight: 400;
	line-height: 1.5;
	color: var(--rrct-input-text);
	background-color: var(--rrct-input-bg);
	border: 1px solid var(--rrct-input-border);
	border-radius: var(--rr-radius-md);
	padding: 13px 15px;
	transition:
		border-color var(--rr-dur-fast) var(--rr-ease-out),
		box-shadow var(--rr-dur-fast) var(--rr-ease-out),
		background-color var(--rr-dur-fast) var(--rr-ease-out);
	-webkit-appearance: none;
	appearance: none;
}

.rrContact .rrContact__input::placeholder {
	color: var(--rrct-input-ph);
	opacity: 1;
}

.rrContact .rrContact__input:focus,
.rrContact .rrContact__input:focus-visible {
	outline: none;
	border-color: var(--rrct-accent);
	box-shadow: 0 0 0 3px rgba(87, 63, 211, .12);
	background-color: var(--rrct-card-bg);
}

.rrContact .rrContact__input--textarea {
	resize: vertical;
	min-height: 132px;
}

/* Invalid state — only after a submit attempt (see contact.js). */
.rrContact__form.is-validated .rrContact__input:invalid {
	border-color: var(--rr-danger);
}

/* ----- Submit button ----- */
.rrContact .rrContact__submit {
	margin-top: clamp(.25rem, 1vw, .5rem);
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 15px 22px;
	font-family: var(--rr-font-sans);
	font-size: var(--rr-fs-sm);
	font-weight: 700;
	letter-spacing: -.005em;
	line-height: 1;
	color: var(--rrct-btn-color);
	background: var(--rrct-btn-bg);
	border: 0;
	border-radius: var(--rr-radius-md);
	box-shadow: var(--rrct-btn-shadow);
	cursor: pointer;
	transition:
		transform var(--rr-dur-fast) var(--rr-ease-out),
		box-shadow var(--rr-dur-fast) var(--rr-ease-out),
		opacity var(--rr-dur-fast) var(--rr-ease-out);
}
.rrContact .rrContact__submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(87, 63, 211, .34);
}
.rrContact .rrContact__submit:active { transform: translateY(0); }
.rrContact .rrContact__submit:focus-visible {
	outline: none;
	box-shadow: var(--rrct-btn-shadow), 0 0 0 3px rgba(87, 63, 211, .28);
}
.rrContact__submitIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.rrContact__submitIcon svg { width: 18px; height: 18px; display: block; }

/* ----- Inline status note (no-action mode) ----- */
.rrContact__formNote {
	margin: 0;
	font-size: var(--rr-fs-sm);
	line-height: var(--rr-lh-normal);
	font-weight: 600;
	color: var(--rr-success);
	text-align: center;
	display: none;
}
.rrContact__form.is-sent .rrContact__formNote { display: block; }

/* ===========================================================
   Responsive
   =========================================================== */

/* Tablet — stack the two cards. */
@media (max-width: 860px) {
	.rrContact__body {
		grid-template-columns: 1fr;
		max-width: 600px;
	}
}

/* Phone — tighten paddings and the heading. */
@media (max-width: 600px) {
	.rrContact__wrap {
		padding: clamp(2.5rem, 8vw, 4rem) clamp(1rem, 5vw, 1.5rem);
	}
	.rrContact__head { margin-bottom: var(--rr-space-8); }

	.rrContact .rrContact__title {
		font-size: clamp(1.625rem, 6.5vw, 2.25rem);
	}

	.rrContact__field--split {
		grid-template-columns: 1fr;
	}

	.rrContact__infoIcon {
		width: 46px;
		height: 46px;
	}
	.rrContact__infoIcon svg { width: 22px; height: 22px; }
}

/* Reduced-motion — drop hover transforms. */
@media (prefers-reduced-motion: reduce) {
	.rrContact__infoItem:hover .rrContact__infoIcon { transform: none; }
	.rrContact .rrContact__submit:hover { transform: none; }
}