/* ==========================================================================
   Toopix — стилови за блоковите и шаблоните (patterns)
   Се вчитува и на сајтот и во блок-уредувачот.
   ========================================================================== */

/* Истакнат текст (Highlight во уредувачот) — без позадина */
mark.has-inline-color {
	background: none;
	padding: 0;
}

/* Копчиња */
.wp-block-button__link {
	padding: 1em 1.7em;
	transition: background-color 0.4s var(--tx-ease, ease), color 0.4s, border-color 0.4s, transform 0.4s;
}

.wp-block-button__link:hover {
	background: var(--tx-black, #231f20);
	border-color: var(--tx-black, #231f20);
	color: #fff;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-tx-outline .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border: 1px solid currentColor;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-tx-outline .wp-block-button__link:hover {
	background: var(--tx-accent, #00aca2);
	border-color: var(--tx-accent, #00aca2);
	color: #fff;
}

.wp-block-button.is-style-tx-arrow .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1.9em;
	height: 1.9em;
	margin: -0.5em -0.6em -0.5em 0.2em;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / 50% no-repeat;
	vertical-align: middle;
	transition: transform 0.5s var(--tx-ease, ease);
}

.wp-block-button.is-style-tx-arrow .wp-block-button__link:hover::after {
	transform: rotate(45deg);
}

/* Наслови */
.is-style-tx-display {
	font-size: clamp(2.4rem, 6vw, 5.2rem) !important;
	line-height: 1.02 !important;
	letter-spacing: -0.045em !important;
}

.is-style-tx-outline-text {
	color: transparent !important;
	-webkit-text-stroke: 1.5px var(--tx-fg, #231f20);
}

.is-style-tx-eyebrow {
	font-family: var(--tx-font-display, sans-serif) !important;
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	color: var(--tx-accent-deep, #00786f) !important;
}

.is-style-tx-lead {
	font-size: clamp(1.1rem, 1.5vw, 1.3rem) !important;
	line-height: 1.6 !important;
	color: var(--tx-muted, #625d5e);
}

/* Групи: картичка, темна, тиркизна */
.wp-block-group.is-style-tx-card,
.wp-block-column.is-style-tx-card {
	position: relative;
	padding: clamp(1.6rem, 3vw, 2.4rem);
	background: var(--tx-surface, #fff);
	border: 1px solid var(--tx-line, rgba(35, 31, 32, 0.12));
	border-radius: var(--tx-radius, 22px);
	transition: transform 0.6s var(--tx-ease, ease), box-shadow 0.6s var(--tx-ease, ease), border-color 0.4s;
}

.wp-block-group.is-style-tx-card:hover,
.wp-block-column.is-style-tx-card:hover {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--tx-accent, #00aca2) 50%, transparent);
	box-shadow: 0 30px 60px -30px rgba(18, 16, 17, 0.3);
}

.wp-block-group.is-style-tx-card > :first-child,
.wp-block-column.is-style-tx-card > :first-child {
	margin-top: 0;
}

.is-style-tx-card :is(h2, h3, h4) {
	font-size: clamp(1.05rem, 1.35vw, 1.3rem);
	line-height: 1.25;
	overflow-wrap: normal;
}

.is-style-tx-card p {
	font-size: 0.98rem;
	line-height: 1.65;
}

.wp-block-group.is-style-tx-dark {
	--tx-fg: #f4f2ee;
	--tx-muted: rgba(244, 242, 238, 0.66);
	--tx-line: rgba(255, 255, 255, 0.12);
	--tx-surface: #1b1819;
	background-color: var(--tx-ink, #121011);
	color: var(--tx-fg);
	border-radius: var(--tx-radius-lg, 34px);
	padding: clamp(2rem, 6vw, 5rem);
}

.wp-block-group.is-style-tx-dark.alignfull {
	border-radius: 0;
}

.wp-block-group.is-style-tx-dark :where(h1, h2, h3, h4, h5, h6) {
	color: var(--tx-fg);
}

.wp-block-group.is-style-tx-dark mark.has-inline-color {
	color: var(--tx-accent-bright, #5fd0c9) !important;
}

.wp-block-group.is-style-tx-teal {
	--tx-fg: #fff;
	--tx-muted: rgba(255, 255, 255, 0.85);
	--tx-line: rgba(255, 255, 255, 0.25);
	background-color: var(--tx-accent, #00aca2);
	color: #fff;
	border-radius: var(--tx-radius-lg, 34px);
	padding: clamp(2rem, 6vw, 5rem);
}

.wp-block-group.is-style-tx-teal :where(h1, h2, h3, h4) {
	color: #fff;
}

.wp-block-group.is-style-tx-teal .wp-block-button__link {
	background: var(--tx-ink, #121011);
	border-color: var(--tx-ink, #121011);
}

.wp-block-group.is-style-tx-teal .wp-block-button__link:hover {
	background: #fff;
	border-color: #fff;
	color: var(--tx-ink, #121011);
}

.wp-block-group.is-style-tx-teal .is-style-outline .wp-block-button__link,
.wp-block-group.is-style-tx-dark .is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.wp-block-group.is-style-tx-teal mark.has-inline-color {
	color: var(--tx-ink, #121011) !important;
}

/* Листа со штиклирања */
ul.is-style-tx-check {
	padding-left: 0 !important;
	list-style: none;
}

ul.is-style-tx-check li {
	position: relative;
	padding-left: 2.2em;
}

ul.is-style-tx-check li + li {
	margin-top: 0.7em;
}

ul.is-style-tx-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.45em;
	height: 1.45em;
	border-radius: 50%;
	background: color-mix(in srgb, var(--tx-accent, #00aca2) 16%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300aca2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 58% no-repeat;
}

/* Слики */
.wp-block-image.is-style-tx-rounded img,
.wp-block-image.is-style-tx-tilt img {
	border-radius: var(--tx-radius-lg, 34px);
}

.wp-block-image.is-style-tx-tilt {
	perspective: 1000px;
}

.wp-block-image.is-style-tx-tilt img {
	transition: transform 0.6s var(--tx-ease, ease), box-shadow 0.6s;
	box-shadow: 0 40px 80px -40px rgba(18, 16, 17, 0.5);
}

/* Цитат */
.wp-block-quote.is-style-tx-big {
	border: 0 !important;
	padding: 0 !important;
	font-family: var(--tx-font-display, sans-serif);
	font-size: clamp(1.4rem, 3vw, 2.4rem) !important;
	font-weight: 500 !important;
	line-height: 1.25;
	letter-spacing: -0.03em;
}

.wp-block-quote.is-style-tx-big::before {
	content: "“";
	display: block;
	height: 0.6em;
	font-size: 3em;
	line-height: 1;
	color: var(--tx-accent, #00aca2);
}

/* FAQ (details) */
.wp-block-details {
	border-bottom: 1px solid var(--tx-line, rgba(35, 31, 32, 0.12));
	padding: 0;
}

.wp-block-details summary {
	position: relative;
	padding: 1.4rem 3.5rem 1.4rem 0;
	font-family: var(--tx-font-display, sans-serif);
	font-size: clamp(1.02rem, 1.6vw, 1.2rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	list-style: none;
	cursor: pointer;
	transition: color 0.3s;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border: 1px solid var(--tx-line, rgba(35, 31, 32, 0.12));
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300aca2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 45% no-repeat;
	transition: transform 0.45s var(--tx-ease, ease), background-color 0.3s;
}

.wp-block-details[open] summary::after {
	transform: rotate(135deg);
	background-color: color-mix(in srgb, var(--tx-accent, #00aca2) 14%, transparent);
}

.wp-block-details summary:hover {
	color: var(--tx-accent, #00aca2);
}

.wp-block-details > :not(summary) {
	margin-top: 0;
	padding-right: 3.5rem;
	color: var(--tx-muted, #625d5e);
}

.wp-block-details[open] > :last-child {
	padding-bottom: 1.4rem;
}

/* ---------- Компоненти од Toopix шаблоните ---------- */

/* Секција со вертикален простор */
.tx-block-section {
	padding-block: clamp(3rem, 8vw, 6.5rem);
}

.tx-block-section + .tx-block-section {
	padding-top: 0;
}

/* Мал број/ознака во картички (01, 02…) */
.tx-num {
	display: inline-grid;
	place-items: center;
	min-width: 3em;
	height: 3em;
	margin-bottom: 1.4rem !important;
	border-radius: 50%;
	background: color-mix(in srgb, var(--tx-accent, #00aca2) 14%, transparent);
	color: var(--tx-accent-deep, #00786f);
	font-family: var(--tx-font-display, sans-serif);
	font-size: 0.8rem !important;
	font-weight: 600;
}

.is-style-tx-dark .tx-num {
	color: var(--tx-accent-bright, #5fd0c9);
}

/* Бројки */
.tx-stat-num {
	margin: 0 !important;
	font-family: var(--tx-font-display, sans-serif);
	font-size: clamp(2.6rem, 5vw, 4.2rem) !important;
	font-weight: 600;
	line-height: 1 !important;
	letter-spacing: -0.05em;
}

.tx-stat-num + p {
	margin-top: 0.4rem !important;
	font-weight: 600;
	color: var(--tx-muted, #625d5e);
}

.tx-block-stats > .wp-block-column {
	padding-top: 1.6rem;
	border-top: 2px solid var(--tx-accent, #00aca2);
}

/* Ред со услуга (страна Услуги) */
.tx-service-row {
	padding-block: clamp(2rem, 4vw, 3.2rem);
	border-top: 1px solid var(--tx-line, rgba(35, 31, 32, 0.12));
}

.tx-service-row h2 {
	margin-top: 0 !important;
}

.tx-service-row .tx-num {
	margin-bottom: 1rem !important;
}

/* Чекори (шаблон Процес) */
.tx-block-steps > .wp-block-column {
	position: relative;
	padding-top: 2.2rem;
	border-top: 1px solid var(--tx-line, rgba(35, 31, 32, 0.12));
}

.tx-block-steps > .wp-block-column::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 0;
	width: 11px;
	height: 11px;
	border-radius: 3px;
	background: var(--tx-accent, #00aca2);
}

/* Слика со амблем */
.tx-emblem-figure img {
	border-radius: var(--tx-radius-lg, 34px);
}

@media (max-width: 781px) {
	.wp-block-details > :not(summary) {
		padding-right: 0;
	}
}

/* ---------- Истите стилови во WPBakery (демо содржината во редови и колони) ---------- */

/* Колона како картичка */
.vc_column_container.is-style-tx-card > .vc_column-inner {
	position: relative;
	height: 100%;
	padding: clamp(1.6rem, 3vw, 2.4rem) !important;
	background: var(--tx-surface, #fff);
	border: 1px solid var(--tx-line, rgba(35, 31, 32, 0.12));
	border-radius: var(--tx-radius, 22px);
	transition: transform 0.6s var(--tx-ease, ease), box-shadow 0.6s var(--tx-ease, ease), border-color 0.4s;
}

.vc_row_inner > .vc_column_container.is-style-tx-card,
.vc_inner > .vc_column_container.is-style-tx-card {
	padding-block: 12px;
}

.vc_column_container.is-style-tx-card > .vc_column-inner:hover {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--tx-accent, #00aca2) 50%, transparent);
	box-shadow: 0 30px 60px -30px rgba(18, 16, 17, 0.3);
}

.vc_column_container.is-style-tx-card .wpb_text_column :is(p, li) {
	font-size: 0.98rem;
	line-height: 1.65;
}

/* Темен и тиркизен ред */
.vc_row.is-style-tx-dark,
.vc_row.is-style-tx-teal {
	margin-inline: 0;
	padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
	border-radius: var(--tx-radius-lg, 34px);
}

.vc_row.is-style-tx-dark {
	--tx-fg: #f4f2ee;
	--tx-muted: rgba(244, 242, 238, 0.66);
	--tx-line: rgba(255, 255, 255, 0.12);
	--tx-surface: #1b1819;
	background-color: var(--tx-ink, #121011);
	color: var(--tx-fg);
}

.vc_row.is-style-tx-teal {
	--tx-fg: #fff;
	--tx-muted: rgba(255, 255, 255, 0.85);
	--tx-line: rgba(255, 255, 255, 0.25);
	background-color: var(--tx-accent, #00aca2);
	color: #fff;
}

.vc_row:is(.is-style-tx-dark, .is-style-tx-teal) :where(h1, h2, h3, h4, h5, h6),
.vc_row:is(.is-style-tx-dark, .is-style-tx-teal) .tx-title {
	color: var(--tx-fg);
}

.vc_row.is-style-tx-dark mark.has-inline-color,
.vc_row.is-style-tx-dark .tx-hl {
	color: var(--tx-accent-bright, #5fd0c9) !important;
}

.vc_row.is-style-tx-dark .wp-block-image img {
	border-radius: var(--tx-radius, 22px);
}

/* Секција со вертикален простор (ред) */
.tx-builder .vc_row.tx-block-section {
	padding-block: clamp(2rem, 6vw, 5rem);
}

.tx-builder .vc_row.tx-block-section + .vc_row.tx-block-section {
	margin-top: 0;
	padding-top: 0;
}