/* ==========================================================================
   CG Team Contact Form — front-end styles
   All selectors are scoped under .cg-contact-section / cg-contact- prefixed
   classes to avoid clashing with the active theme.
   ========================================================================== */

.cg-contact-section,
.cg-contact-section *,
.cg-contact-section *::before,
.cg-contact-section *::after {
	box-sizing: border-box;
}

.cg-contact-section {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	min-height: 900px;
	margin: 0;
	overflow: hidden;
	background: #000; /* black canvas — image column and red panel float on it */
	font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	color: #fff;
}

/* --------------------------------------------------------------------
   LEFT COLUMN — black background, hero mockup image, vertical label
   -------------------------------------------------------------------- */

.cg-contact-left {
	position: relative;
	flex: 0 0 50%;
	width: 50%;
	min-height: 100%;
	background: #000;
	overflow: hidden;
}

.cg-contact-vertical-label {
	position: absolute;
	z-index: 2;
	left: 22px;
	top: 50%;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-lr;
	text-orientation: mixed;
	font-size: 14px;
	letter-spacing: 6px;
	text-transform: lowercase;
	color: rgba(255, 255, 255, 0.35);
	white-space: nowrap;
}

.cg-contact-hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
}

.cg-contact-hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* --------------------------------------------------------------------
   RIGHT COLUMN — diagonal red -> white gradient, heading + form
   -------------------------------------------------------------------- */

.cg-contact-right {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	/* Panel meets all edges of the black canvas (top / right / bottom); only the
	   left edge meets the image column. No black frame around it. */
	margin: 0;
	/* Off-white base + rotated red radial glow + white top-right corner glow,
	   reproduced 1:1 from the source design (SVG background scales crisply). */
	background: #faf9f6 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22645%22%20height%3D%22700%22%20viewBox%3D%220%200%20645%20700%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%22645%22%20height%3D%22700%22%20fill%3D%22%23FAF9F6%22%2F%3E%3Crect%20width%3D%22645%22%20height%3D%22700%22%20fill%3D%22url%28%23r%29%22%2F%3E%3Crect%20width%3D%22645%22%20height%3D%22700%22%20fill%3D%22url%28%23w%29%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22r%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate%28245.1%20322.0%29%20rotate%2829%29%20scale%28967.5%20420.0%29%22%3E%3Cstop%20stop-color%3D%22%23ED2727%22%2F%3E%3Cstop%20offset%3D%220.30%22%20stop-color%3D%22%23ED2727%22%2F%3E%3Cstop%20offset%3D%220.62%22%20stop-color%3D%22%23ED2727%22%20stop-opacity%3D%220.6%22%2F%3E%3Cstop%20offset%3D%220.98%22%20stop-color%3D%22%23ED2727%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22w%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate%28645%200%29%20scale%28774.0%20774.0%29%22%3E%3Cstop%20stop-color%3D%22%23FAF9F6%22%20stop-opacity%3D%220.92%22%2F%3E%3Cstop%20offset%3D%220.45%22%20stop-color%3D%22%23FAF9F6%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") center / cover no-repeat;
	padding: 56px 60px 60px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.cg-contact-right-inner {
	width: 100%;
	max-width: 640px;
}

.cg-contact-heading {
	margin: 0 0 56px;
	font-size: clamp(26px, 2.6vw, 38px);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: 0.2px;
	color: #ffffff;
}

/* --------------------------------------------------------------------
   Form layout & generic field styles
   -------------------------------------------------------------------- */

.cg-contact-form {
	width: 100%;
}

.cg-contact-form-error {
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	padding: 14px 18px;
	border-radius: 8px;
	margin-bottom: 28px;
	font-size: 14px;
	line-height: 1.5;
}

.cg-contact-field {
	margin-bottom: 40px;
}

/* Honeypot: pull it out of view and out of the a11y tree without using
   display:none / visibility:hidden (which many bots skip). */
.cg-contact-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cg-contact-field-turnstile {
	margin-bottom: 32px;
}

.cg-contact-label {
	display: block;
	margin-bottom: 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
}

.cg-contact-input,
.cg-contact-textarea {
	display: block;
	width: 100%;
	margin: 0;
	/* Transparent, underline-only in every state. !important so a theme that
	   styles bare <input>/<textarea> (filled background, full border, dark text)
	   can't win. Only the bottom line is ever visible. */
	background: transparent !important;
	background-color: transparent !important;
	border: 0 none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.55) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 6px 2px 12px !important;
	text-indent: 0 !important;
	font-family: inherit;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.4;
	min-height: 40px;
	color: #fff !important;
	outline: none;
	/* Strip native field chrome (inner shadow, rounded corners on iOS, etc.) */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease;
}

/* Keep it a single bottom line — and white text — through hover / focus /
   active too, so the inputs stay identical to the "Zakres projektu" textarea. */
.cg-contact-input:hover,
.cg-contact-input:focus,
.cg-contact-input:active,
.cg-contact-textarea:hover,
.cg-contact-textarea:focus,
.cg-contact-textarea:active {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.55) !important;
	box-shadow: none !important;
	color: #fff !important;
	padding: 6px 2px 12px !important;
	text-indent: 0 !important;
}

/* Brighten the bottom line on focus (still just the one line). */
.cg-contact-input:focus,
.cg-contact-textarea:focus {
	border-bottom-color: #fff !important;
}

/* Browser autofill paints its own (white/pale) background and text colour.
   There is no property that sets the autofill background to transparent, so we
   use the standard trick: keep the typed text white and delay the background
   transition effectively forever, so the fill colour never actually paints. */
.cg-contact-input:-webkit-autofill,
.cg-contact-input:-webkit-autofill:hover,
.cg-contact-input:-webkit-autofill:focus,
.cg-contact-input:-webkit-autofill:active,
.cg-contact-textarea:-webkit-autofill,
.cg-contact-textarea:-webkit-autofill:hover,
.cg-contact-textarea:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff !important;
	caret-color: #fff;
	border: 0 none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.55) !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	transition: background-color 100000s ease-in-out 0s, border-color 0.2s ease;
}

.cg-contact-input:autofill,
.cg-contact-textarea:autofill {
	-webkit-text-fill-color: #fff !important;
	box-shadow: none !important;
	transition: background-color 100000s ease-in-out 0s, border-color 0.2s ease;
}

.cg-contact-textarea {
	resize: vertical;
}

.cg-contact-input::placeholder,
.cg-contact-textarea::placeholder {
	color: rgba(255, 255, 255, 0.6);
	font-weight: 300;
}

.cg-contact-input:focus,
.cg-contact-textarea:focus {
	border-bottom-color: #fff;
}

/* Field-level inline error message */
.cg-contact-error {
	display: none;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
	color: #fff5f0;
	background: rgba(20, 0, 0, 0.35);
	padding: 6px 10px;
	border-radius: 4px;
}

.cg-contact-field.has-error .cg-contact-error {
	display: inline-block;
}

.cg-contact-field.has-error .cg-contact-input,
.cg-contact-field.has-error .cg-contact-textarea {
	border-bottom-color: #fff5f0 !important;
	box-shadow: 0 1px 0 #fff5f0 !important;
}

/* --------------------------------------------------------------------
   Custom radio buttons — "Czy strona już istnieje?"
   -------------------------------------------------------------------- */

.cg-contact-radio-group {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-top: 6px;
}

.cg-contact-radio {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 300;
	color: #fff;
}

.cg-contact-radio input[type='radio'] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.cg-contact-radio-dot {
	position: relative;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.85);
	transition: border-color 0.15s ease;
}

.cg-contact-radio-dot::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: #fff;
	transform: scale(0);
	transition: transform 0.15s ease;
}

.cg-contact-radio input[type='radio']:checked + .cg-contact-radio-dot::after {
	transform: scale(1);
}

.cg-contact-radio input[type='radio']:focus-visible + .cg-contact-radio-dot {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------
   "Zakres projektu" label row + ZOBACZ CENNIK trigger
   -------------------------------------------------------------------- */

.cg-contact-label-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-bottom: 14px;
}

.cg-contact-label-row .cg-contact-label {
	margin-bottom: 0;
}

.cg-contact-pricing-trigger {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font-family: inherit;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

.cg-contact-pricing-trigger:hover,
.cg-contact-pricing-trigger:focus-visible {
	color: rgba(255, 255, 255, 0.8);
}

/* Anchor point for the popover */
.cg-contact-field[data-cg-field='project_scope'] {
	position: relative;
}

/* --------------------------------------------------------------------
   Pricing popover ("ZOBACZ CENNIK")
   -------------------------------------------------------------------- */

.cg-contact-popover {
	/* Fixed to the viewport: JS computes top/left next to whichever trigger
	   was clicked (built-in "ZOBACZ CENNIK" link, or any external element
	   anywhere on the page carrying data-cg-contact-pricing-trigger), and
	   clamps it so it never overflows the viewport. A high z-index keeps it
	   above typical theme headers/sticky bars. */
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	width: 320px;
	max-width: 90vw;
	background: #ffffff;
	color: #1a1a1a;
	border-radius: 14px;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
	padding: 22px 24px;
}

.cg-contact-popover[hidden] {
	display: none;
}

.cg-contact-popover-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border: none;
	background: none;
	font-size: 20px;
	line-height: 1;
	color: #999;
	cursor: pointer;
	border-radius: 50%;
}

.cg-contact-popover-close:hover {
	background: #f2f2f2;
	color: #333;
}

.cg-contact-popover-title {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #111;
}

.cg-contact-popover-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cg-contact-popover-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	border-bottom: 1px solid #eeeeee;
	font-size: 14px;
}

.cg-contact-popover-item:last-child {
	border-bottom: none;
}

.cg-contact-popover-item-label {
	color: #333;
}

.cg-contact-popover-item-price {
	font-weight: 700;
	color: #ed2727;
	white-space: nowrap;
}

.cg-contact-popover-empty {
	margin: 0;
	font-size: 13px;
	color: #777;
}

.cg-contact-popover-notes {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid #eeeeee;
	font-size: 10px; /* disclaimer — max 10px, muted gray */
	line-height: 1.6;
	color: #8a8a8a;
}

.cg-contact-popover-notes p {
	margin: 0 0 6px;
}

.cg-contact-popover-notes p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------
   Submit button
   -------------------------------------------------------------------- */

.cg-contact-field-submit {
	margin-bottom: 0;
	margin-top: 48px;
}

/* Brand button — identical spec to .cgs-btn from the CG Team / AI LAB site. */
.cg-contact-submit {
	display: inline-block;
	border: none;
	border-radius: 6px;
	background: #f0342c;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	padding: 16px 28px;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.cg-contact-submit:hover {
	background: #ff473f;
	transform: translateY(-1px);
	box-shadow: 0 10px 30px -8px rgba(240, 52, 44, 0.6);
}

.cg-contact-submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	border-radius: 6px;
}

.cg-contact-submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* --------------------------------------------------------------------
   Success state
   -------------------------------------------------------------------- */

.cg-contact-success {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 14px;
	padding: 30px 32px;
	margin-bottom: 32px;
}

.cg-contact-success[hidden] {
	display: none;
}

.cg-contact-success-icon {
	flex-shrink: 0;
	color: #fff;
	margin-top: 2px;
}

.cg-contact-success-text {
	margin: 0;
	font-size: 19px;
	font-weight: 300;
	line-height: 1.5;
	color: #fff;
}

/* --------------------------------------------------------------------
   Footer bar
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   (Footer removed — the form no longer renders a footer.)
   -------------------------------------------------------------------- */


/* ==========================================================================
   Popup / modal mode  ([cg_contact_form popup="yes"])
   ========================================================================== */

/* Lock background scroll while a popup is open. */
html.cg-contact-modal-open,
html.cg-contact-modal-open body {
	overflow: hidden;
}

.cg-contact-modal {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.cg-contact-modal[hidden] {
	display: none;
}

.cg-contact-modal.is-open {
	opacity: 1;
}

.cg-contact-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.62);
	cursor: pointer;
}

.cg-contact-modal-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1120px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	border-radius: 16px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

/* Note: the entrance animation deliberately lives on the overlay (opacity) only.
   A `transform` on the dialog would make it a containing block for the
   position:fixed pricing popover rendered inside the form, throwing off its
   viewport-based positioning. */

/* Inside the dialog the section no longer needs its full-bleed min-height. */
.cg-contact-modal-dialog .cg-contact-section {
	min-height: auto;
	border-radius: 16px;
}

/* Close button = the CG Team mobile-menu "X" (identical to .cgs-burger in its
   open state): a 44x44 transparent button with white 2px bars; the top and
   bottom bars are rotated ±45° into an X and the middle bar is hidden. */
.cg-contact-modal-close {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 5;
	width: 44px;
	height: 44px;
	padding: 10px;
	display: block;
	border: 0;
	background: transparent;
	cursor: pointer;
	line-height: 0;
	font-size: 0;
	transition: opacity 0.2s ease;
}

.cg-contact-modal-close span {
	display: block;
	width: 100%;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.2s ease;
}

.cg-contact-modal-close span + span {
	margin-top: 6px;
}

.cg-contact-modal-close span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.cg-contact-modal-close span:nth-child(2) {
	opacity: 0;
}

.cg-contact-modal-close span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

.cg-contact-modal-close:hover {
	opacity: 0.7;
}

.cg-contact-modal-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	border-radius: 4px;
}

@media (max-width: 782px) {
	.cg-contact-modal {
		padding: 0;
	}

	.cg-contact-modal-dialog {
		max-width: none;
		max-height: 100vh;
		height: 100vh;
		border-radius: 0;
	}

	.cg-contact-modal-dialog .cg-contact-section {
		border-radius: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cg-contact-modal {
		transition: none;
	}
}

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

@media (max-width: 960px) {
	.cg-contact-right {
		margin: 0;
		padding: 44px 40px 48px;
	}
}

@media (max-width: 782px) {
	.cg-contact-section {
		flex-direction: column;
		min-height: auto;
		padding-bottom: 0;
	}

	/* Mobile: drop the image entirely — the form fills the width */
	.cg-contact-left {
		display: none;
	}

	.cg-contact-right {
		order: 2;
		flex: 0 0 auto;
		width: 100%;
		margin: 0;
		padding: 44px 24px 28px;
	}

	.cg-contact-vertical-label {
		font-size: 12px;
		left: 12px;
		letter-spacing: 4px;
	}

	.cg-contact-heading {
		margin-bottom: 40px;
	}

	.cg-contact-field {
		margin-bottom: 32px;
	}
}

@media (max-width: 480px) {
	.cg-contact-heading {
		font-size: 28px;
	}

	.cg-contact-submit {
		width: 100%;
	}

	.cg-contact-radio-group {
		gap: 24px;
	}
}