/* ==========================================================================
   PoloniaHub — formularze Forminatora i strony zamówień

   Formularz zamówienia jest ostatnim krokiem przed płatnością, więc ma
   wyglądać spokojnie i przewidywalnie. Domyślne style Forminatora są
   z innego świata wizualnego niż reszta strony — tutaj sprowadzamy je
   do tych samych tokenów.
   ========================================================================== */

/* --- Układ strony zamówienia --------------------------------------------- */

.ph-order {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(24px, 1rem + 2vw, 40px);
	align-items: start;
}

@media (max-width: 980px) {
	.ph-order { grid-template-columns: minmax(0, 1fr); }
}

.ph-order__form {
	background: var(--ph-surface);
	border: 1px solid var(--ph-border);
	border-radius: 16px;
	padding: clamp(16px, 0.9rem + 1vw, 26px);
	box-shadow: 0 12px 40px rgba(15, 35, 75, 0.06);
}

.ph-order__aside {
	position: sticky;
	top: 110px;
	display: grid;
	gap: 12px;
}

.ph-panel {
	background: var(--ph-surface);
	border: 1px solid var(--ph-border);
	border-radius: var(--ph-radius);
	padding: 18px;
}

.ph-panel h3 {
	margin: 0 0 12px;
	font-family: var(--ph-font-body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--ph-heading);
}

.ph-panel--price {
	background: #F4F7FD;
	border-color: #DCE6FA;
}

.ph-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
}

.ph-price__value {
	font-family: var(--ph-font-heading);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1;
	color: var(--ph-primary);
}

.ph-price__unit { font-size: 0.875rem; color: var(--ph-muted); }

.ph-rows { margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }

.ph-rows li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px dashed #DCE4F3;
	color: var(--ph-body);
}

.ph-rows li:last-child { border-bottom: 0; }
.ph-rows strong { color: var(--ph-heading-3); font-weight: 600; }

.ph-note {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ph-muted);
}

/* --- Forminator: pola ----------------------------------------------------- */

.forminator-ui.forminator-custom-form {
	font-family: var(--ph-font-body) !important;
}

.forminator-ui .forminator-label {
	font-family: var(--ph-font-body) !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	color: var(--ph-heading-3) !important;
	margin-bottom: 6px !important;
}

.forminator-ui .forminator-description {
	font-size: 0.8125rem !important;
	line-height: 1.5 !important;
	color: var(--ph-muted) !important;
}

.forminator-ui input[type="text"],
.forminator-ui input[type="email"],
.forminator-ui input[type="tel"],
.forminator-ui input[type="number"],
.forminator-ui input[type="date"],
.forminator-ui textarea,
.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea,
.forminator-ui .forminator-select2 .selection .select2-selection {
	min-height: 46px !important;
	padding: 0 16px !important;
	border: 1px solid var(--ph-border-input) !important;
	border-radius: var(--ph-radius-input) !important;
	background: var(--ph-surface) !important;
	font-family: var(--ph-font-body) !important;
	font-size: 16px !important;
	color: var(--ph-heading-3) !important;
	box-shadow: none !important;
	transition: border-color var(--ph-transition), box-shadow var(--ph-transition);
}

.forminator-ui textarea,
.forminator-ui .forminator-textarea {
	min-height: 140px !important;
	padding: 14px 16px !important;
	line-height: 1.6 !important;
}

.forminator-ui input:focus,
.forminator-ui textarea:focus,
.forminator-ui .forminator-select2 .selection .select2-selection:focus {
	border-color: var(--ph-accent-light) !important;
	box-shadow: 0 0 0 3px rgba(59, 109, 246, 0.12) !important;
	outline: none !important;
}

/* --- Forminator: wybory --------------------------------------------------- */
/* Pojedyncze kółko z etykietą tonie w formularzu na kilkadziesiąt pól.
   Każda opcja dostaje własną kartę — łatwiej trafić i widać, co wybrano. */

.forminator-ui .forminator-radio,
.forminator-ui .forminator-checkbox {
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px !important;
	margin-bottom: 10px !important;
	border: 1px solid var(--ph-border) !important;
	border-radius: var(--ph-radius-input);
	background: var(--ph-surface);
	font-size: 0.9375rem !important;
	color: var(--ph-heading-3) !important;
	cursor: pointer;
	transition: border-color var(--ph-transition), background-color var(--ph-transition);
}

.forminator-ui .forminator-radio:hover,
.forminator-ui .forminator-checkbox:hover {
	border-color: #C3D2F0 !important;
	background: #FAFCFF;
}

.forminator-ui .forminator-radio:has(input:checked),
.forminator-ui .forminator-checkbox:has(input:checked) {
	border-color: var(--ph-cta) !important;
	background: #F2F6FE;
}

/* --- Forminator: przyciski i kroki ---------------------------------------- */

.forminator-ui .forminator-button {
	min-height: 46px !important;
	padding: 0 26px !important;
	border-radius: var(--ph-radius) !important;
	font-family: var(--ph-font-body) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	transition: background-color var(--ph-transition) !important;
}

.forminator-ui .forminator-button-submit,
.forminator-ui .forminator-button-next {
	background: var(--ph-cta) !important;
	color: #FFFFFF !important;
	border: 0 !important;
}

.forminator-ui .forminator-button-submit:hover,
.forminator-ui .forminator-button-next:hover { background: #193A9A !important; }

.forminator-ui .forminator-button-back,
.forminator-ui .forminator-button-prev {
	background: var(--ph-surface) !important;
	border: 2px solid var(--ph-cta) !important;
	color: var(--ph-cta) !important;
}

.forminator-ui .forminator-button-back:hover,
.forminator-ui .forminator-button-prev:hover { background: #F4F7FF !important; }

/* Pasek postępu: bez niego wielokrokowy formularz nie mówi, ile zostało. */
.forminator-ui .forminator-pagination-steps .forminator-step-label {
	font-family: var(--ph-font-body) !important;
	font-size: 0.8125rem !important;
	color: var(--ph-muted) !important;
}

.forminator-ui .forminator-progress-bar,
.forminator-ui .forminator-pagination-progress {
	border-radius: 999px !important;
	background: var(--ph-border) !important;
	overflow: hidden;
}

.forminator-ui .forminator-progress-bar span,
.forminator-ui .forminator-pagination-progress span {
	background: var(--ph-cta) !important;
}

.forminator-ui .forminator-error-message {
	font-size: 0.8125rem !important;
	color: var(--ph-alert) !important;
}

/* Nagłówek strony zamówienia: jedna kolumna z ograniczoną miarą.
   W siatce dwukolumnowej prawa połowa zostawała pusta. */
.ph-order__intro { max-width: 62ch; }

/* --- Strona kontaktu ------------------------------------------------------
   Układ z wytycznych: po lewej nagłówek i to, czego klient może się
   spodziewać, po prawej formularz w białej karcie. */

.ph-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(28px, 1.5rem + 2.5vw, 56px);
	align-items: start;
}

@media (max-width: 980px) {
	.ph-contact { grid-template-columns: minmax(0, 1fr); }
}

.ph-contact__intro { max-width: 46ch; }
.ph-contact__intro h1 { margin-bottom: 16px; }
.ph-contact__intro .ph-list { margin: 28px 0; }
.ph-contact__intro .ph-list li { align-items: flex-start; }
.ph-contact__intro .ph-list strong { color: var(--ph-heading); font-weight: 600; }

.ph-contact__form {
	background: var(--ph-surface);
	border: 1px solid var(--ph-border);
	border-radius: 16px;
	padding: clamp(16px, 0.9rem + 1vw, 26px);
	box-shadow: 0 12px 40px rgba(15, 35, 75, 0.06);
}

/* --- Formularze Kadence --------------------------------------------------- */

.kb-advanced-form .kb-field-label,
.kb-advanced-form label {
	font-family: var(--ph-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ph-heading-3);
}

.kb-advanced-form input[type="text"],
.kb-advanced-form input[type="email"],
.kb-advanced-form input[type="tel"],
.kb-advanced-form input[type="number"],
.kb-advanced-form select,
.kb-advanced-form textarea,
.kb-advanced-form .kb-field {
	min-height: 46px;
	padding: 0 16px;
	border: 1px solid var(--ph-border-input);
	border-radius: var(--ph-radius-input);
	background: var(--ph-surface);
	font-family: var(--ph-font-body);
	font-size: 16px;
	color: var(--ph-heading-3);
	transition: border-color var(--ph-transition), box-shadow var(--ph-transition);
}

.kb-advanced-form textarea,
.kb-advanced-form textarea.kb-field {
	min-height: 140px;
	padding: 14px 16px;
	line-height: 1.6;
}

.kb-advanced-form input:focus,
.kb-advanced-form select:focus,
.kb-advanced-form textarea:focus {
	border-color: var(--ph-accent-light);
	box-shadow: 0 0 0 3px rgba(59, 109, 246, 0.12);
	outline: none;
}

.kb-advanced-form button[type="submit"],
.kb-advanced-form .kb-forms-submit {
	min-height: 46px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--ph-radius);
	background: var(--ph-cta);
	color: #FFFFFF;
	font-family: var(--ph-font-body);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--ph-transition);
}

.kb-advanced-form button[type="submit"]:hover,
.kb-advanced-form .kb-forms-submit:hover { background: #193A9A; }

.ph-order__form h2 { margin: 0 0 8px; font-size: 1.25rem; }
.ph-order__form > p { margin: 0 0 20px; color: var(--ph-body); }
.ph-needed__label {
	margin: 0 0 4px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ph-muted);
}
.ph-order__form .ph-list { margin: 0 0 24px; }

/* --- Panel zamówienia wewnątrz artykułu -----------------------------------
   Artykuł przyciąga ruch z wyszukiwarki, ale sam z siebie nic nie sprzedaje.
   Ten panel wchodzi zaraz po wstępie: cena, zakres i przycisk prowadzący do
   formularza na dole tej samej strony. Bez wyprowadzania czytelnika gdzie
   indziej — adres, który rankuje, zostaje ten sam. */

.ph-inline-order {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 20px;
	align-items: center;
	margin: 24px 0 28px;
	padding: 20px 22px;
	border: 1px solid #DCE6FA;
	border-radius: var(--ph-radius);
	background: #F4F7FD;
}

@media (max-width: 720px) {
	.ph-inline-order { grid-template-columns: minmax(0, 1fr); }
}

.ph-inline-order .ph-inline-order__title {
	margin: 0 0 6px;
	font-family: var(--ph-font-body);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--ph-heading);
}

.ph-inline-order p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ph-body);
}

.ph-inline-order__price {
	font-family: var(--ph-font-heading);
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--ph-primary);
	white-space: nowrap;
}

.ph-inline-order ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--ph-body);
}

.ph-inline-order li { display: flex; align-items: center; gap: 7px; margin: 0; }
.ph-inline-order li .ph-i { color: var(--ph-success); }

/* Sekcja formularza na dole artykułu */
.ph-article-form {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 2px solid var(--ph-border);
	scroll-margin-top: 110px;
}

.ph-article-form > h2 {
	margin: 0 0 6px !important;
	padding-top: 0 !important;
	border-top: 0 !important;
}

.ph-article-form > p { margin: 0 0 20px; color: var(--ph-body); }