.elementor-1531 .elementor-element.elementor-element-c32c7f3{--display:flex;--gap:11px 11px;--row-gap:11px;--column-gap:11px;--border-radius:0px 0px 0px 0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-1531 .elementor-element.elementor-element-978d0c2.elementor-element{--align-self:center;}@media(min-width:768px){.elementor-1531 .elementor-element.elementor-element-c32c7f3{--content-width:500px;}}/* Start custom CSS for shortcode, class: .elementor-element-978d0c2 *//* ==========================================================
   SAR SIGNUP CARD — ALL-IN-ONE CSS (desktop + mobile)
   Replaces your whole old signup CSS. Your own tweaks are kept:
   heading sizes/fonts, the 87% popup width rule, etc.
   ========================================================== */

/* ----- Card ----- */
.signup-card {
	--sar-text: rgba(255, 255, 255, 0.82);        /* main text */
	--sar-text-soft: rgba(255, 255, 255, 0.65);   /* small / secondary text */

	max-width: 560px;
	margin: 0 auto;
	padding: 32px 28px 34px;
	box-sizing: border-box;
	background: #000;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 10px;
	color: var(--sar-text);
	text-align: center;
	text-transform: uppercase;
	font-family: Inter, sans-serif;
}

.signup-card h5 {
	margin: 0 0 15px;
	color: var(--sar-text) !important;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 3px !important;
	text-align: center;
}

.signup-card h2 {
	margin: 0 0 24px;
	color: #fff !important;
	font-family: "Inter", serif;
	font-size: 28px;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1.2em;
	text-align: center;
}

/* ----- Input boxes (text centred in the box) ----- */
.signup-card .input-group {
	display: flex;
	align-items: center;
	height: 52px;
	min-height: 52px;
	max-height: 52px;
	margin: 0 0 18px;
	padding: 0 16px;
	box-sizing: border-box;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 8px;
}

.signup-card .input-group.error-field {
	border-color: #ff4444;
}

/* CF7 wraps fields in <p> and adds <br>; make them fill the box so text centres */
.signup-card .input-group br {
	display: none;
}

.signup-card .input-group p {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.signup-card .input-group .wpcf7-form-control-wrap {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	margin: 0;
}

.signup-card .input-group input {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--sar-text) !important;
	font-size: 14px;
	line-height: normal !important;
	text-align: left;
}

.signup-card .input-group input::placeholder {
	color: var(--sar-text);
	opacity: 1;
	text-transform: uppercase;
}

/* Autofill: keep it black with soft white text */
.signup-card input:-webkit-autofill,
.signup-card input:-webkit-autofill:hover,
.signup-card input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #000 inset !important;
	box-shadow: 0 0 0 1000px #000 inset !important;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important;
	caret-color: #fff;
}

/* ----- WhatsApp checkbox ----- */
.signup-card .checkbox-group {
	margin: 6px 0 26px;                 /* gap above the button */
	text-align: left;
}

.signup-card .checkbox-group .wpcf7-list-item {
	display: block;
	margin: 0;
}

.signup-card .checkbox-group label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	color: var(--sar-text) !important;
}

.signup-card .checkbox-group input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: #fff;
}

.signup-card .checkbox-group .wpcf7-list-item-label {
	color: var(--sar-text) !important;
	font-size: 13px !important;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
}

/* ----- Contact Form 7 submit button (the only button) ----- */
.signup-card input.wpcf7-submit,
.signup-card .sar-btn {
	display: block !important;
	visibility: visible !important;
	width: 100%;
	height: 48px;
	margin: 0 !important;
	padding: 0 16px;
	background: #000 !important;
	border: 1px solid #fff !important;
	border-radius: 8px;
	color: #fff !important;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

@media (hover: hover) {
	.signup-card input.wpcf7-submit:hover,
	.signup-card .sar-btn:hover {
		background: #fff !important;
		color: #000 !important;
	}
}

/* while submitting */
.wpcf7 form.submitting .wpcf7-submit {
	opacity: 0.5;
	pointer-events: none;
}

span.wpcf7-spinner {
	display: none !important;
}

/* ----- Footer text ----- */
.signup-card .bottom-text {
	margin: 22px 0 0 !important;        /* gap below the button */
	color: var(--sar-text-soft) !important;
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
}

/* ----- CF7 messages ----- */
.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #ff5c5c;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
}

/* hide CF7's message box except for real failures */
.wpcf7 form .wpcf7-response-output {
	display: none !important;
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	display: block !important;
	margin: 12px 0 0;
	padding: 0;
	border: none;
	color: #ff5c5c !important;
	font-size: 13px;
	text-align: center;
}

/* ----- Thank-you message ----- */
.signup-card .sar-success {
	padding: 10px 0 8px;
	text-align: center;
}
.signup-card .sar-success h2 {
	margin-bottom: 14px;
}
.signup-card .sar-success p {
	margin: 0 0 18px;
	color: var(--sar-text) !important;
	font-size: 14px;
	line-height: 1.5;
}

/* personal coupon code */
.signup-card .sar-success .sar-coupon {
	margin: 6px 0 12px;
	font-size: 14px;
	line-height: 2;
}
.signup-card .sar-success .sar-coupon-code {
	display: inline-block;
	margin-left: 4px;
	padding: 4px 14px;
	border: 1px dashed #eba73a;
	border-radius: 6px;
	color: #eba73a;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 2px;
	-webkit-user-select: all;
	user-select: all;
}
.signup-card .sar-success .sar-coupon-note {
	margin: 0;
	color: var(--sar-text-soft) !important;
	font-size: 11px;
	line-height: 1.4;
}

/* ==========================================================
   MOBILE (screens 767px wide and smaller) — desktop unchanged
   ========================================================== */
@media (max-width: 767px) {

	.signup-card {
		max-width: 100%;
		padding: 18px 14px 18px !important;
	}

	.signup-card h5 {
		margin: 0 0 4px;
		font-size: 10px;
		letter-spacing: 2px !important;
	}

	.signup-card h2 {
		margin: 0 0 14px;
		font-size: 16px;
		letter-spacing: 0.5px;
	}

	/* the three fields */
	.signup-card .input-group {
		height: 42px;
		min-height: 42px;
		max-height: 42px;
		margin-bottom: 10px;
		padding: 0 12px;
		border-radius: 6px;
	}

	.signup-card .input-group input {
		font-size: 12px;
	}

	/* WhatsApp checkbox */
	.signup-card .checkbox-group {
		margin: 2px 0 14px;
	}

	.signup-card .checkbox-group label {
		gap: 8px;
	}

	.signup-card .checkbox-group input[type="checkbox"] {
		width: 16px;
		height: 16px;
	}

	.signup-card .checkbox-group .wpcf7-list-item-label {
		font-size: 11px !important;
		line-height: 1.35;
	}

	/* submit button */
	.signup-card input.wpcf7-submit,
	.signup-card .sar-btn {
		height: 42px;
		font-size: 12px;
		letter-spacing: 0.5px;
		border-radius: 6px;
	}

	/* footer line */
	.signup-card .bottom-text {
		margin: 12px 0 0 !important;
		font-size: 10px;
		line-height: 1.4;
	}

	/* thank-you screen */
	.signup-card .sar-success h2 {
		font-size: 18px;
		margin-bottom: 10px;
	}
	.signup-card .sar-success p {
		font-size: 12px;
		margin-bottom: 12px;
	}
	.signup-card .sar-success .sar-coupon {
		font-size: 12px;
	}
	.signup-card .sar-success .sar-coupon-code {
		font-size: 13px;
		padding: 3px 10px;
	}
	.signup-card .sar-success .sar-coupon-note {
		font-size: 10px;
	}
}

/* ----- Your popup width rule (kept as you had it) ----- */
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
    width: 87%;
    cursor: auto;
}/* End custom CSS */