/* ==========================================================================
   Contact questionnaire  (contact.php  +  js/contact-wizard.js)
   Everything is scoped under .cw so it cannot leak into the rest of the site.
   Change the accent colour here to match your preset:
   ========================================================================== */

.cw {
	--cw-accent: #00cc00;          /* highlight / primary button */
	--cw-accent-ink: #04200a;      /* text on top of the accent colour */
	--cw-text: #f4f6f4;
	--cw-muted: rgba(244, 246, 244, .72);
	--cw-border: rgba(255, 255, 255, .10);
	--cw-field: rgba(255, 255, 255, .09);
	--cw-radius: 7px;
	--cw-ease: cubic-bezier(.22, .8, .3, 1);
	--cw-slide-ms: 450ms;

	text-align: left;
	color: var(--cw-text);
}

.contact-number
{
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- Frosted glass card ------------------------------------------------- */
.cw-card {
	padding: 28px 28px 24px;
	border: 1px solid var(--cw-border);
	border-radius: var(--cw-radius);
	background: rgba(16, 22, 17, .42);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* Browsers without backdrop-filter get a more solid panel so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.cw-card { background: rgba(16, 22, 17, .9); }
}

/* ---- Progress ----------------------------------------------------------- */
.cw-meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 8px;
	font-size: 13px;
	letter-spacing: .03em;
	color: var(--cw-muted);
}
.cw-meta b { color: var(--cw-text); }

.cw-progress {
	height: 4px;
	margin: 0 0 22px;
	overflow: hidden;
	border-radius: 4px;
	background: rgba(255, 255, 255, .16);
}
.cw-progress-bar {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 4px;
	background: var(--cw-accent);
	transition: width var(--cw-slide-ms) var(--cw-ease);
}

/* ---- Slides -------------------------------------------------------------
   Without JS (or if the script fails to load) every question simply stacks
   as a normal long form. .cw-js is added by the script and switches on the
   sliding behaviour.                                                        */
.cw-viewport { margin: 0 -6px; }
.cw-slide { padding: 6px; margin: 0; }

.cw-js .cw-viewport {
	position: relative;
	overflow: hidden;
	transition: height .4s var(--cw-ease);
}
.cw-js .cw-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateX(56px);           /* waiting on the right  */
	transition:
		transform var(--cw-slide-ms) var(--cw-ease),
		opacity calc(var(--cw-slide-ms) * .8) ease,
		visibility 0s linear var(--cw-slide-ms);
}
.cw-js .cw-slide.is-before { transform: translateX(-56px); }   /* already answered, parked on the left */
.cw-js .cw-slide.is-active {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}

/* Reduced motion: no sideways travel, just a quick cross-fade */
@media (prefers-reduced-motion: reduce) {
	.cw-js .cw-slide,
	.cw-js .cw-slide.is-before { transform: none; transition: opacity .2s ease, visibility 0s linear .2s; }
	.cw-js .cw-slide.is-active { transition-delay: 0s; }
	.cw-js .cw-viewport,
	.cw-progress-bar { transition: none; }
}

/* ---- Typography --------------------------------------------------------- */
.cw .cw-title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	color: #fff;
}
.cw .cw-sub {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cw-muted);
}

/* ---- Fields ------------------------------------------------------------- */
.cw .cw-field { margin: 0 0 16px; }
.cw .cw-label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--cw-muted);
}
.cw .cw-input {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--cw-border);
	border-radius: 12px;
	background: var(--cw-field);
	box-shadow: none;
	color: var(--cw-text);
	font: inherit;
	font-size: max(1rem, 16px);            /* 16px+ stops iOS zooming into the field */
	line-height: 1.4;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.cw textarea.cw-input { min-height: 120px; resize: vertical; font-weight: 700; }
.cw .cw-input::placeholder { color: rgba(244, 246, 244, .45); opacity: 1; }
.cw .cw-input:focus {
	outline: none;
	border-color: var(--cw-accent);
	background: rgba(255, 255, 255, .13);	
}
.cw .cw-input[aria-invalid="true"] { border-color: #ff8a8a; box-shadow: 0 0 0 3px rgba(255, 90, 90, .22); }

/* Browser autofill paints fields white - keep them dark */
.cw .cw-input:-webkit-autofill,
.cw .cw-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--cw-text);
	caret-color: var(--cw-text);
	-webkit-box-shadow: 0 0 0 1000px rgba(28, 38, 30, .96) inset;
	transition: background-color 9999s ease-out 0s;
}

.cw .cw-error {
	margin: 4px 0 0;
	padding: 9px 12px;
	border: 1px solid rgba(255, 130, 130, .55);
	border-radius: 10px;
	background: rgba(255, 70, 70, .16);
	color: #ffdede;
	font-size: 14px;
	line-height: 1.4;
}

/* ---- Package tiles (radio buttons that look like cards) ------------------ */
.cw .cw-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}
.cw .cw-tile { position: relative; display: block; margin: 0; font-weight: 400; cursor: pointer; }
.cw .cw-tile input {                       /* visually hidden but still focusable */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.cw .cw-tile-body {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 10px 14px;
	border: 1px solid var(--cw-border);
	border-radius: 12px;
	background: rgba(255, 255, 255, .07);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.cw .cw-tile-body i { flex: none; width: 22px; text-align: center; font-size: 17px; color: var(--cw-accent); }
.cw .cw-tile:hover .cw-tile-body { background: rgba(255, 255, 255, .13); }
.cw .cw-tile:active .cw-tile-body { transform: scale(.985); }
.cw .cw-tile input:checked + .cw-tile-body {
	border-color: var(--cw-accent);
	background: rgba(0, 204, 0, .18);
	box-shadow: inset 0 0 0 1px var(--cw-accent);
}
.cw .cw-tile input:focus-visible + .cw-tile-body { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- Captcha (keeps your existing #CodePic / #Captcha / #NA hooks) -------- */
.cw .CastImgFrame { max-width: 100%; height: auto; border-radius: 10px; }
.cw .cw-refresh {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 6px 4px;
	border: 0;
	background: none;
	color: var(--cw-muted);
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cw .cw-refresh:hover { color: var(--cw-text); }
.cw .cw-refresh:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }

/* ---- Buttons ------------------------------------------------------------ */
.cw-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
}
.cw .cw-btn {
	min-height: 48px;
	padding: 12px 28px;
	border: 1px solid transparent;
	border-radius: 7px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: transform .15s ease, filter .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.cw .cw-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cw .cw-btn-primary {
	margin-left: auto;
	background: var(--cw-accent);
	color: var(--cw-accent-ink);
	box-shadow: 0 8px 22px rgba(0, 204, 0, .28);
}
.cw .cw-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.cw .cw-btn-primary:active { transform: translateY(0); }
.cw .cw-btn-ghost {
	background: rgba(255, 255, 255, .09);
	border-color: var(--cw-border);
	color: var(--cw-text);
}
.cw .cw-btn-ghost:hover { background: rgba(255, 255, 255, .17); }
.cw .cw-btn[disabled] { opacity: .65; cursor: progress; transform: none; filter: none; }

.cw [hidden] { display: none !important; }

/* Without JS: no Back/Next/progress, just the Submit button */
.cw:not(.cw-js) .cw-back,
.cw:not(.cw-js) .cw-next,
.cw:not(.cw-js) .cw-meta,
.cw:not(.cw-js) .cw-progress,
.cw:not(.cw-js) .cw-refresh { display: none; }

/* ---- Small screens ------------------------------------------------------ */
@media (max-width: 480px) {
	.cw-card { padding: 20px 16px 18px; }
	.cw .cw-title { font-size: 20px; }
	.cw .cw-tiles { grid-template-columns: 1fr; }
	.cw .cw-btn { padding-inline: 22px; }
}