/* ═══════════════════════════════════════════════════════════════════
   FORMULARZE — warstwa mapująca markup Fluent Forms na design system
   ═══════════════════════════════════════════════════════════════════ */

/*
 * Fluent Forms renderuje własne klasy (ff-el-*, ff-btn-*) i wnosi własny
 * arkusz. Nie walczymy z nim specyficznością na każdym elemencie — zamiast
 * tego nadpisujemy w jednym miejscu to, co widać: pola, etykiety, błędy
 * i przycisk. Reszta jego stylu jest neutralna.
 */

.gt-form-wrap {
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	background: var(--gt-surf);
	padding: var(--gt-s5);
}

.gt-form-wrap__missing {
	margin: 0;
	color: var(--gt-warn);
	font-family: var(--gt-mono);
	font-size: var(--gt-t-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* ── pola ── */

.gt-form-wrap .ff-el-group { margin-bottom: var(--gt-s4); }

.gt-form-wrap .ff-el-input--label label {
	font-family: var(--gt-mono);
	font-size: var(--gt-t-mono);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gt-tx2);
	margin-bottom: .35rem;
}

.gt-form-wrap .ff-el-is-required.asterisk-right label:after {
	color: var(--gt-acc);
	margin-left: .2rem;
}

.gt-form-wrap input[type="text"],
.gt-form-wrap input[type="email"],
.gt-form-wrap input[type="tel"],
.gt-form-wrap input[type="url"],
.gt-form-wrap input[type="number"],
.gt-form-wrap select,
.gt-form-wrap textarea {
	width: 100%;
	padding: .7rem .85rem;
	background: var(--gt-bg2);
	color: var(--gt-tx);
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	box-shadow: none;
	font-family: var(--gt-font);
	font-size: 1rem;
	line-height: 1.5;
}

.gt-form-wrap input:focus,
.gt-form-wrap select:focus,
.gt-form-wrap textarea:focus {
	border-color: var(--gt-acc);
	box-shadow: 0 0 0 3px var(--gt-acc-soft);
	outline: none;
}

.gt-form-wrap .ff-el-form-hint {
	font-size: .8125rem;
	color: var(--gt-tx3);
	margin-top: .3rem;
}

/* ── sekcje ── */

.gt-form-wrap .ff-el-section-break {
	border: 0;
	border-top: 1px solid var(--gt-line);
	padding-top: var(--gt-s4);
	margin-top: var(--gt-s5);
	margin-bottom: var(--gt-s4);
}

.gt-form-wrap .ff-el-section-break:first-child {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

.gt-form-wrap .ff-el-section-break h3 {
	font-family: var(--gt-mono);
	font-size: var(--gt-t-mono);
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gt-acc);
	margin: 0;
}

/* ── upload ── */

.gt-form-wrap .ff-el-input--content .ff_upload_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .7rem 1.1rem;
	background: transparent;
	border: 1px dashed var(--gt-line2);
	border-radius: var(--gt-r);
	color: var(--gt-tx2);
	font-family: var(--gt-font);
	font-size: .875rem;
	cursor: pointer;
	width: 100%;
}

.gt-form-wrap .ff_upload_btn:hover {
	border-color: var(--gt-acc);
	color: var(--gt-acc);
}

.gt-form-wrap .ff-uploaded-list .ff-upload-preview {
	background: var(--gt-bg2);
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
}

/* ── zgoda ── */

.gt-form-wrap .gt-form__consent .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--gt-tx2);
}

.gt-form-wrap .gt-form__consent input[type="checkbox"] {
	margin-top: .2rem;
	flex: none;
	accent-color: var(--gt-acc);
}

/* ── przycisk ── */

.gt-form-wrap .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .85rem 1.4rem;
	background: var(--gt-acc);
	color: var(--gt-acc-ink);
	border: 0;
	border-radius: var(--gt-r);
	font-family: var(--gt-font);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--gt-fast) var(--gt-ease), color var(--gt-fast) var(--gt-ease);
}

.gt-form-wrap .ff-btn-submit:hover {
	background: var(--gt-tx);
	color: var(--gt-bg);
}

/* ── błędy i potwierdzenie ── */

.gt-form-wrap .error,
.gt-form-wrap .text-danger,
.gt-form-wrap .ff-el-is-error input,
.gt-form-wrap .ff-el-is-error textarea,
.gt-form-wrap .ff-el-is-error select {
	border-color: var(--gt-crit);
}

.gt-form-wrap .error.text-danger {
	border: 0;
	color: var(--gt-crit);
	font-size: .8125rem;
	margin-top: .3rem;
}

.gt-form-wrap .ff-message-success {
	padding: var(--gt-s4);
	border: 1px solid var(--gt-ok);
	border-left-width: 2px;
	border-radius: var(--gt-r);
	background: var(--gt-ok-bg);
	color: var(--gt-tx);
}

.gt-form-wrap .ff-errors-in-stack {
	padding: var(--gt-s3) var(--gt-s4);
	border-left: 2px solid var(--gt-crit);
	background: var(--gt-crit-bg);
	color: var(--gt-tx);
	border-radius: 0 var(--gt-r) var(--gt-r) 0;
}

/* ── dwie kolumny na szerokim ekranie ── */

@media (min-width: 46em) {
	.gt-form-wrap .ff-t-cell { padding-inline: .4rem; }
	.gt-form-wrap .ff-t-container { margin-inline: -.4rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   STRONY: zgłoszenie, kalkulator, kontakt
   ═══════════════════════════════════════════════════════════════════ */

.gt-ticket__body,
.gt-contact__body {
	display: grid;
	gap: var(--gt-s5);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 62em) {
	.gt-ticket__body,
	.gt-contact__body {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	}
}

.gt-ticket__aside,
.gt-contact__aside {
	display: flex;
	flex-direction: column;
	gap: var(--gt-s4);
}

/* Panel czasu reakcji */

.gt-ticket__react {
	padding: var(--gt-s4);
	border: 1px solid var(--gt-line);
	border-left: 2px solid var(--gt-acc);
	border-radius: 0 var(--gt-r) var(--gt-r) 0;
	background: var(--gt-surf);
}

.gt-ticket__react-val {
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.03em;
	margin: var(--gt-s2) 0 var(--gt-s2);
}

.gt-ticket__react-note {
	margin: 0;
	font-size: .8125rem;
	color: var(--gt-tx2);
	line-height: 1.5;
}

/* Lista „zanim zgłosisz" */

.gt-ticket__pre,
.gt-ticket__critical,
.gt-contact__card {
	padding: var(--gt-s4);
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	background: var(--gt-surf);
}

.gt-ticket__list {
	list-style: none;
	margin: var(--gt-s3) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gt-s2);
}

.gt-ticket__list li {
	display: grid;
	grid-template-columns: 1.6rem 1fr;
	gap: .5rem;
	font-size: .875rem;
	color: var(--gt-tx2);
	line-height: 1.5;
}

.gt-ticket__list .gt-num { color: var(--gt-acc); font-size: .75rem; }

.gt-ticket__critical { border-left: 2px solid var(--gt-crit); border-radius: 0 var(--gt-r) var(--gt-r) 0; }

.gt-ticket__phone,
.gt-duty-card__phone {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: var(--gt-s2) 0;
	font-family: var(--gt-mono);
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--gt-tx);
}

.gt-ticket__phone:hover,
.gt-duty-card__phone:hover { color: var(--gt-acc); }

.gt-ticket__critical-note {
	margin: 0;
	font-size: .8125rem;
	color: var(--gt-tx2);
	line-height: 1.5;
}

/* Kalkulator */

.gt-calc__frame {
	/*
	 * Bez ramki i bez własnego tła — kalkulator ma czytać się jako część
	 * strony, a nie jako widżet w pudełku. Sam dostaje paletę hosta
	 * (parametr `theme` w adresie), a jego <body> w trybie osadzonym jest
	 * przezroczyste.
	 */
	overflow: hidden;

	/*
	 * Wysokość AWARYJNA. Normalnie ustawia ją calc-embed.js z wysokości
	 * raportowanej przez kalkulator, co daje dopasowanie co do piksela
	 * i brak wewnętrznego paska przewijania. Ta wartość działa tylko wtedy,
	 * gdy JS nie wystartuje albo osadzona aplikacja nie raportuje wysokości —
	 * wtedy lepiej mieć wysoką ramkę z paskiem niż uciętą treść.
	 */
	height: clamp(38rem, 78vh, 54rem);
}

/* Po pierwszym raporcie wysokości sterowanie przechodzi do JS-a
   (wrap.style.height), więc awaryjny clamp musi ustąpić. */
.gt-calc__frame[data-gt-calc-sized] {
	height: auto;
}

.gt-calc__frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.gt-calc__note {
	margin-top: var(--gt-s3);
	font-size: .8125rem;
	color: var(--gt-tx3);
	max-width: var(--gt-measure);
}

.gt-calc__after {
	display: flex;
	gap: var(--gt-s3);
	flex-wrap: wrap;
	margin-top: var(--gt-s5);
	padding-top: var(--gt-s5);
	border-top: 1px solid var(--gt-line);
}

/* Kontakt */

.gt-contact__cards {
	display: grid;
	gap: var(--gt-s3);
	grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}

.gt-contact__card-v {
	margin: var(--gt-s2) 0 .2rem;
	font-size: 1.05rem;
	font-weight: 600;
	word-break: break-word;
}

.gt-contact__card-n {
	margin: 0;
	font-size: .8125rem;
	color: var(--gt-tx3);
}

.gt-contact__map {
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   STRONA SERWISU
   ═══════════════════════════════════════════════════════════════════ */

.gt-svc-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--gt-line);
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.gt-svc-hero__inner {
	position: relative;
	display: grid;
	gap: var(--gt-s5);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 62em) {
	.gt-svc-hero__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

.gt-svc-hero__title {
	font-size: clamp(2.1rem, 5.4vw, 3.6rem);
	margin: var(--gt-s2) 0 var(--gt-s4);
}

.gt-svc-hero__actions {
	display: flex;
	gap: var(--gt-s3);
	flex-wrap: wrap;
	margin-top: var(--gt-s4);
}

.gt-duty-card {
	padding: var(--gt-s4);
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	background: var(--gt-surf);
}

.gt-duty-card__label { margin: 0; }

.gt-duty-card__note {
	margin: 0 0 var(--gt-s4);
	font-size: .8125rem;
	color: var(--gt-acc);
}

.gt-svc__h2 {
	font-size: var(--gt-t-h3);
	margin-bottom: var(--gt-s4);
	padding-bottom: var(--gt-s2);
	border-bottom: 1px solid var(--gt-line);
}

.gt-svc {
	display: flex;
	flex-direction: column;
	gap: var(--gt-s2);
	padding: var(--gt-s4);
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	background: var(--gt-surf);
}

.gt-svc__idx { color: var(--gt-acc); }

.gt-svc__title { font-size: 1.1rem; margin: 0; }

.gt-svc__desc {
	margin: 0;
	font-size: .9375rem;
	color: var(--gt-tx2);
	line-height: 1.55;
}

.gt-svc__meta {
	margin: auto 0 0;
	padding-top: var(--gt-s3);
	border-top: 1px solid var(--gt-line);
	font-family: var(--gt-mono);
	font-size: var(--gt-t-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gt-tx3);
}

.gt-svc__two {
	display: grid;
	gap: var(--gt-s6);
	grid-template-columns: 1fr;
}

@media (min-width: 62em) {
	.gt-svc__two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gt-svc__note {
	margin-top: var(--gt-s3);
	font-size: .8125rem;
	color: var(--gt-tx3);
}

.gt-sla { background: var(--gt-surf); font-size: .9375rem; min-width: 26rem; }

.gt-sla__name {
	font-family: var(--gt-mono);
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--gt-acc);
}

.gt-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gt-s3);
	counter-reset: gt-step;
}

.gt-step {
	display: grid;
	grid-template-columns: 2.2rem 1fr;
	gap: var(--gt-s3);
	padding-bottom: var(--gt-s3);
	border-bottom: 1px solid var(--gt-line);
}

.gt-step:last-child { border-bottom: 0; }

.gt-step__n {
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border: 1px solid var(--gt-acc);
	border-radius: 50%;
	color: var(--gt-acc);
	font-family: var(--gt-mono);
	font-size: .8125rem;
	font-weight: 500;
}

.gt-step__body { display: flex; flex-direction: column; gap: .2rem; }

.gt-step__title { font-weight: 600; }

.gt-step__desc {
	font-size: .875rem;
	color: var(--gt-tx2);
	line-height: 1.55;
}