/* Pages "Započnimo saradnju" (/zapocnimo-saradnju/) and "Hvala" (/hvala/): light pages in the style of /kontakt/.
   Hero, label, H1, decoration arcs and the form fields come from the existing kt-* classes (Additional CSS of /kontakt/);
   this file only adds what /kontakt/ does not have (body class .kt-light, two-column layout, service cards, conditional question,
   "Šta sledi?" card, thank-you buttons). Loaded only on those two pages (inc/kt-collab.php). */

/* ---- light page + header without the dark band (same as body.page-id-43571) ---- */
body.kt-light { background-color: #fff !important; }
body.kt-light .tp-header-10-main, body.kt-light .tp-header-10-area, body.kt-light .tp-header-10-area.header-sticky, body.kt-light .tp-header-10-area.sticky-black-bg { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ---- hero: the text is a little wider than on /kontakt/ ---- */
body .elementor .kt-lead.zs-lead p { max-width: 600px; }

/* ---- layout: form (left, ~62%) + "Šta sledi?" (right, ~38%); one column below 1025px, form first ---- */
.e-con.zs-grid { display: grid !important; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: 32px !important; align-items: start; width: 100%; padding: 0 !important; margin: 0 !important; }
.e-con.zs-grid > .e-con.kt-right { border: 1px solid #ECECEE; }
.e-con.zs-side { min-width: 0; padding: 0 !important; margin: 0 !important; }
@media (max-width: 1024px) { .e-con.zs-grid { grid-template-columns: minmax(0, 1fr); gap: 24px !important; } }

/* ---- form: groups, service cards, chips ---- */
body .elementor .zs-form .zs-group { margin: 0 0 18px; }
body .elementor .zs-form .zs-group > .kt-lbl { display: block; margin: 0 0 10px; }
body .elementor .zs-form .zs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body .elementor .zs-form .zs-cards .wpcf7-list-item { display: block; margin: 0; }
body .elementor .zs-form .zs-cards label { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 92px; margin: 0; padding: 16px; border: 1px solid #DCDCDF; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; }
body .elementor .zs-form .zs-cards .zs-ic { font-size: 22px; line-height: 1; color: #FF5722; }
body .elementor .zs-form .zs-cards .wpcf7-list-item-label { font-size: 15px; line-height: 1.3; font-weight: 600; color: #111; }
body .elementor .zs-form .zs-cards label:hover { border-color: rgba(255, 87, 34, 0.55); }
body .elementor .zs-form .zs-cards input[type="radio"], body .elementor .zs-form .zs-chips input[type="radio"], body .elementor .zs-form .zs-chips input[type="checkbox"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
body .elementor .zs-form .zs-chips { display: flex; flex-wrap: wrap; gap: 10px; }
body .elementor .zs-form .zs-chips .wpcf7-list-item { display: block; margin: 0; }
body .elementor .zs-form .zs-chips label { position: relative; display: inline-flex; align-items: center; margin: 0; padding: 11px 18px; border: 1px solid #DCDCDF; border-radius: 999px; background: #fff; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; }
body .elementor .zs-form .zs-chips .wpcf7-list-item-label { font-size: 15px; line-height: 1.3; color: #333; }
body .elementor .zs-form .zs-chips label:hover { border-color: rgba(255, 87, 34, 0.55); }
/* selected: orange border + light orange background (.is-selected is set by kt-collab.js, :has() is the same without JS) */
body .elementor .zs-form .zs-cards label.is-selected, body .elementor .zs-form .zs-chips label.is-selected, body .elementor .zs-form .zs-cards label:has(input:checked), body .elementor .zs-form .zs-chips label:has(input:checked) { border-color: #FF5722; background: rgba(255, 87, 34, 0.06); }
body .elementor .zs-form .zs-chips label.is-selected .wpcf7-list-item-label, body .elementor .zs-form .zs-chips label:has(input:checked) .wpcf7-list-item-label { color: #111; }
body .elementor .zs-form .zs-cards label:has(input:focus-visible), body .elementor .zs-form .zs-chips label:has(input:focus-visible) { outline: 2px solid #FF5722; outline-offset: 2px; }
body .elementor .zs-form .kt-accept a { color: #FF5722; text-decoration: underline; }
body .elementor .zs-form .kt-accept a:hover { color: #E64A19; }

/* ---- the one extra question per service: slides open smoothly (grid-rows trick); closed = invisible, not focusable (inert, set by JS) ---- */
body .elementor .zs-form .zs-cond { display: grid; grid-template-rows: 0fr; margin: 0; opacity: 0; visibility: hidden; transition: grid-template-rows 0.3s ease, opacity 0.2s ease, margin 0.3s ease, visibility 0s linear 0.3s; }
body .elementor .zs-form .zs-cond.is-open { grid-template-rows: 1fr; margin: 0 0 18px; opacity: 1; visibility: visible; transition: grid-template-rows 0.3s ease, opacity 0.25s ease 0.05s, margin 0.3s ease, visibility 0s; }
body .elementor .zs-form .zs-cond > .zs-cond-in { min-height: 0; overflow: hidden; padding: 0 2px; margin: 0 -2px; }
body .elementor .zs-form .zs-cond--nested.is-open { margin: 16px 0 0; }
@media (prefers-reduced-motion: reduce) { body .elementor .zs-form .zs-cond, body .elementor .zs-form .zs-cond.is-open { transition: none; } }

@media (max-width: 767px) {
	body .elementor .zs-form .zs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	body .elementor .zs-form .zs-cards .wpcf7-list-item:last-child { grid-column: 1 / -1; }
	body .elementor .zs-form .zs-cards label { min-height: 84px; padding: 14px; }
}

/* ---- "Šta sledi?" card (also on /hvala/) ---- */
body .elementor .zs-next { box-sizing: border-box; padding: 32px; background: #F5F5F6; border-radius: 20px; }
body .elementor .zs-next .zs-next-h { margin: 0 0 24px; font-family: inherit; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; text-transform: none; color: #111; }
body .elementor .zs-next .zs-steps { list-style: none; margin: 0; padding: 0; }
body .elementor .zs-next .zs-steps li { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 22px; padding: 0; }
body .elementor .zs-next .zs-steps li:last-child { margin-bottom: 0; }
body .elementor .zs-next .zs-num { display: flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #FF5722; color: #fff; font-size: 16px; font-weight: 700; line-height: 1; }
body .elementor .zs-next .zs-st { display: block; min-width: 0; }
body .elementor .zs-next .zs-st b { display: block; margin: 7px 0 4px; font-size: 17px; line-height: 1.3; font-weight: 700; color: #111; }
body .elementor .zs-next .zs-st span { display: block; font-size: 15px; line-height: 1.55; color: #555; }
body .elementor .zs-next .zs-line { height: 1px; margin: 28px 0 24px; background: #E2E2E4; }
body .elementor .zs-next .zs-alt { margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: #555; }
body .elementor .zs-next a.zs-val { display: block; font-size: 17px; line-height: 1.6; font-weight: 700; color: #111; text-decoration: none; transition: color 0.2s ease; }
body .elementor .zs-next a.zs-val:hover, body .elementor .zs-next a.zs-val:focus-visible { color: #FF5722; }
@media (max-width: 767px) { body .elementor .zs-next { padding: 24px 20px; } }

/* ---- /hvala/ ---- */
.e-con.zs-thanks { width: 100%; max-width: 640px; padding: 0 !important; }
body .elementor .zs-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 0; padding: 0; }
body .elementor a.zs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; height: 56px; padding: 0 28px; border: 1px solid transparent; border-radius: 999px; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
body .elementor a.zs-btn svg { flex: none; transition: transform 0.2s ease; }
body .elementor a.zs-btn--primary { background: #FF5722; color: #fff; }
body .elementor a.zs-btn--primary:hover, body .elementor a.zs-btn--primary:focus-visible { background: #E64A19; color: #fff; }
body .elementor a.zs-btn--primary:hover svg { transform: translateX(4px); }
body .elementor a.zs-btn--ghost { background: transparent; border-color: #DCDCDF; color: #111; }
body .elementor a.zs-btn--ghost:hover, body .elementor a.zs-btn--ghost:focus-visible { border-color: #FF5722; color: #FF5722; }
@media (max-width: 767px) { body .elementor .zs-actions { flex-direction: column; } body .elementor a.zs-btn { width: 100%; } }