/* ==========================================================================
   COSMO UI — centralizovani frontend stilovi za cosmostudyabroad.com
   Jedini fajl sa svim novim stilovima (mu-plugin cosmo-ui).
   Učitan POSLIJE main.css (prioritet 999) => pobjeđuje u kaskadi.

   SADRŽAJ
   01. Dizajn tokeni (boje, fontovi, spacing)
   02. Tipografija — Helvetica Neue, max font-weight 500
   03. Uklanjanje gradijenata i pretjeranih sjena
   04. Dugmad (unifikovana)
   05. Kartice — jednake visine i uniforman oblik
   06. Header i navigacija
   07. Hero
   08. Sekcije i gridovi
   09. Footer
   10. Floating elementi (COSMO Portal, back-to-top)
   11. Pristupačnost (WCAG 2.1 AA)
   12. Responzivnost (breakpointi)
   13. Reduced motion
   ========================================================================== */

/* ==========================================================================
   01. DIZAJN TOKENI
   ========================================================================== */
:root {
	/* Tipografija */
	--font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-heading: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-inter: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-dancing: 'Helvetica Neue', Helvetica, Arial, sans-serif;

	/* Brend boje (zadržane) */
	--color-primary: #00CC99;
	--color-primary-accessible: #007A5C; /* WCAG AA na bijelom (4.9:1) */
	--color-secondary: #0091FF;
	--color-primary-2: #FB4927;

	/* Neutralne */
	--color-heading: #0F172A;
	--color-dark: #0F172A;
	--color-default: #58595E;
	--color-gray: #EDF3F5;
	--color-gray-2: #F6F6F6;
	--color-border: #EFF5F8;
	--color-white: #fff;

	/* Gradijenti uklonjeni */
	--color-gradient: none;
	--gradient-color-from: transparent;
	--gradient-color-to: transparent;

	/* Sjene — samo suptilne */
	--cosmo-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08);
	--cosmo-shadow-header: 0 2px 8px rgba(15, 23, 42, 0.06);

	/* Layout */
	--cosmo-radius: 12px;
	--cosmo-radius-btn: 10px;
	--cosmo-container: 1320px;
}

/* ==========================================================================
   02. TIPOGRAFIJA — Helvetica Neue, max font-weight 500
   ========================================================================== */

/* Globalni font — najjaci selektor da pobijedi Elementor/theme !important */
html,
body,
body *,
body *::before,
body *::after,
.elementor-widget-container,
.elementor-widget-container *,
.elementor-heading-title,
.elementor-text-editor,
[class*="elementor"] *,
.wp-block-* {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Naslovi — font i težina */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.elementor-heading-title,
.xb-item--title,
.sec-title,
.xb-sec-title {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-weight: 500 !important;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

/* MAX FONT-WEIGHT 500 — globalno ogranicenje (mora !important da pobijedi temu) */
body,
body *,
body *::before,
body *::after,
[class*="elementor"] *,
[class*="elementor"] *::before,
[class*="elementor"] *::after {
	font-weight: 500 !important;
}

/* Eksplicitno svesti sve teške težine na 500 */
strong, b,
.elementor-widget-container strong,
.elementor-widget-container b {
	font-weight: 500 !important;
}

/* Elementor inline stilovi često forsiraju 600/700 — pobijediti */
[class*="elementor"] [style*="font-weight"],
[class*="elementor"] .elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor span {
	font-weight: 500 !important;
}

/* Body tekst */
body,
p,
li,
.elementor-widget-text-editor p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-default);
}

/* Visoka specificnost — pobijediti Elementor post-{ID}.css pravila
   (npr. .elementor-12 .elementor-element.elementor-element-xxx .sec-title .title) */
[class*="elementor-"] [class*="elementor-element"] .sec-title .title,
[class*="elementor-"] [class*="elementor-element"] .sec-title--heading,
[class*="elementor-"] [class*="elementor-element"] .xb-item--description,
[class*="elementor-"] [class*="elementor-element"] p,
[class*="elementor-"] [class*="elementor-element"] span,
[class*="elementor-"] [class*="elementor-element"] li,
[class*="elementor-"] [class*="elementor-element"] a,
[class*="elementor-"] [class*="elementor-element"] div,
[class*="elementor-"] [class*="elementor-element"] h1,
[class*="elementor-"] [class*="elementor-element"] h2,
[class*="elementor-"] [class*="elementor-element"] h3,
[class*="elementor-"] [class*="elementor-element"] h4,
[class*="elementor-"] [class*="elementor-element"] h5,
[class*="elementor-"] [class*="elementor-element"] h6 {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-weight: 500 !important;
}

/* Tipografska skala */
h1, .h1, .elementor-widget-heading h1.elementor-heading-title {
	font-size: clamp(2rem, 5vw, 3.5rem) !important;
}
h2, .h2, .elementor-widget-heading h2.elementor-heading-title {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
}
h3, .h3, .elementor-widget-heading h3.elementor-heading-title {
	font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
}
h4, .h4 {
	font-size: clamp(1.125rem, 1.6vw, 1.25rem) !important;
}
h5, .h5, h6, .h6 {
	font-size: 1rem !important;
}

/* Uklanjanje dekorativne kurzive (Dancing Script) */
.xb-item--subtitle,
[class*="dancing"],
.elementor-widget-text-editor em {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-style: normal !important;
}

/* ==========================================================================
   03. UKLANJANJE GRADIJENATA I PRETJERANIH SJENA
   ========================================================================== */

/* Gradijenti -> puna boja */
.grd-btn,
[class*="gradient"],
[class*="grd-"],
.elementor-button,
.thm-btn {
	background-image: none !important;
}

.grd-btn,
[class*="gradient"] {
	background-color: var(--color-primary-accessible) !important;
}

/* Sjene — resetovati sve, pa vratiti samo dozvoljene */
body * {
	box-shadow: none;
	text-shadow: none;
}

/* Dozvoljene suptilne sjene */
.xb-service,
.xb-coaching .xb-item--inner,
.xb-item--inner,
.elementor-widget-int-coaching .xb-item--inner,
.xb-blog-item,
.xb-post-item,
article.post,
.cosmo-card {
	box-shadow: var(--cosmo-shadow-card) !important;
}

/* Sticky header — suptilna sjena */
.xb-header.stricky.is-sticky,
.xb-header.stricky.sticky,
header.site-header.is-sticky {
	box-shadow: var(--cosmo-shadow-header) !important;
}

/* ==========================================================================
   04. DUGMAD — unifikovana
   ========================================================================== */
.thm-btn,
.elementor-button,
button[type="submit"],
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	border-radius: var(--cosmo-radius-btn);
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-size: 16px;
	font-weight: 500 !important;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	background-image: none !important;
	box-shadow: none !important;
}

/* Primarno dugme */
.thm-btn,
.elementor-button,
button[type="submit"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--color-primary-accessible) !important;
	color: #fff !important;
}

.thm-btn:hover,
.elementor-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: #00614A !important;
	color: #fff !important;
}

/* Sekundarno dugme (bijelo) */
.thm-btn.style-2,
.thm-btn.btn-white,
.elementor-button.elementor-button--secondary {
	background-color: #fff !important;
	color: var(--color-heading) !important;
	border-color: var(--color-border) !important;
}

.thm-btn.style-2:hover,
.thm-btn.btn-white:hover {
	background-color: var(--color-gray) !important;
	color: var(--color-heading) !important;
}

/* ==========================================================================
   05. KARTICE — jednake visine i uniforman oblik
   ========================================================================== */

/* Elementor kolone i widgeti rastegnuti na punu visinu */
.elementor-column,
.elementor-column-wrap,
.elementor-widget-wrap,
.elementor-widget,
.elementor-widget-container {
	height: 100%;
}

/* Bootstrap kolone u gridovima — rastegnuti na punu visinu reda */
.row {
	align-items: stretch;
}

.row > [class*="col-"] {
	display: flex;
	flex-direction: column;
}

/* Kartice kao flex kolone — jednake visine */
.xb-service,
.xb-coaching,
.xb-coaching .xb-item--inner,
.xb-item--inner,
.elementor-widget-int-coaching .xb-item--inner,
.xb-blog-item,
.xb-post-item,
article.post,
.xb-country-item,
.xb-item--item {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--cosmo-radius);
	border: 1px solid var(--color-border);
	background-color: #fff;
	overflow: hidden;
}

/* Kartice direktno u Bootstrap koloni — iste visine */
.row > [class*="col-"] > .xb-service,
.row > [class*="col-"] > .xb-coaching,
.row > [class*="col-"] > .xb-blog-item,
.row > [class*="col-"] > .xb-post-item,
.row > [class*="col-"] > article {
	flex: 1 1 auto;
}

/* Unutrasnji omot kartice raste da popuni visinu kartice */
.xb-service > .xb-item--inner,
.xb-coaching > .xb-item--inner,
.xb-blog-item > .xb-item--inner,
.xb-post-item > .xb-item--inner {
	flex: 1 1 auto;
	height: auto;
	min-height: 100%;
}

/* Sadrzaj kartice (tekst) raste, pa su dna poravnata */
.xb-service .xb-item--content,
.xb-service .xb-item--holder,
.xb-coaching .xb-item--content,
.xb-coaching .xb-item--holder {
	flex: 1 1 auto;
}

/* Slike u karticama — fiksni odnos stranica */
.xb-service img,
.xb-coaching img,
.xb-item--img img,
.xb-blog-item img,
.xb-post-item img,
article.post img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

/* Sadržaj kartice raste da popuni prostor */
.xb-item--holder,
.xb-item--content,
.xb-service .xb-item--content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   06. HEADER I NAVIGACIJA
   ========================================================================== */
.site-header .xb-header__logo img,
.xb-header__logo img,
.custom-logo {
	max-width: clamp(110px, 20vw, 150px);
	height: auto;
}

/* Navigacija — konzistentna težina i stanja */
.main-menu a,
.xb-menu-primary a,
.main-menu__wrap a {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-weight: 500 !important;
	text-decoration: none;
	transition: color 0.2s ease;
}

.main-menu a:hover,
.main-menu a:focus,
.xb-menu-primary a:hover,
.xb-menu-primary a:focus {
	color: var(--color-primary-accessible) !important;
}

.main-menu a[aria-current="page"],
.xb-menu-primary a[aria-current="page"] {
	color: var(--color-primary-accessible) !important;
}

/* Header CTA dugme */
.cosmo-header-cta {
	margin-left: 16px;
	min-height: 44px;
	padding: 10px 22px;
	font-size: 15px;
	white-space: nowrap;
}

@media (max-width: 991px) {
	.cosmo-header-cta {
		display: none;
	}
}

/* ==========================================================================
   07. HERO
   ========================================================================== */
.hero,
.hero__style-one,
.xb-hero {
	min-height: clamp(520px, 80vh, 755px);
}

.hero h1,
.xb-hero h1 {
	font-weight: 500 !important;
	line-height: 1.15;
}

/* ==========================================================================
   08. SEKCIJE I GRIDOVI
   ========================================================================== */
.elementor-section {
	padding-left: 0;
	padding-right: 0;
}

/* Konzistentan vertikalni ritam sekcija */
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--cosmo-container);
}

/* Tabele — horizontalni scroll na malim ekranima */
.tablepress,
.tablepress-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   09. FOOTER
   ========================================================================== */
.site-footer,
footer.site-footer {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 {
	font-weight: 500 !important;
}

/* Google Map fallback — statični prikaz */
.cosmo-map-fallback {
	display: block;
	width: 100%;
	min-height: 320px;
	border-radius: var(--cosmo-radius);
	background-color: var(--color-gray);
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
}

.cosmo-map-fallback__link {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--color-primary-accessible);
	color: #fff !important;
	padding: 12px 24px;
	border-radius: var(--cosmo-radius-btn);
	text-decoration: none;
	font-weight: 500;
}

/* ==========================================================================
   10. FLOATING ELEMENTI
   ========================================================================== */
.cosmo-portal-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 9999;
	background-color: var(--color-primary-accessible) !important;
	color: #fff !important;
	padding: 14px 22px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500 !important;
	text-decoration: none !important;
	box-shadow: var(--cosmo-shadow-card) !important;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.cosmo-portal-btn:hover,
.cosmo-portal-btn:focus {
	background-color: #00614A !important;
	color: #fff !important;
	transform: translateY(-2px);
}

/* Back-to-top */
.xb-backtotop {
	z-index: 9998;
}

.xb-backtotop .scroll {
	background-color: var(--color-primary-accessible) !important;
	color: #fff !important;
	box-shadow: var(--cosmo-shadow-card) !important;
}

/* ==========================================================================
   11. PRISTUPAČNOST (WCAG 2.1 AA)
   ========================================================================== */

/* Skip link */
.cosmo-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background-color: var(--color-primary-accessible);
	color: #fff !important;
	padding: 12px 20px;
	border-radius: 0 0 var(--cosmo-radius-btn) 0;
	text-decoration: none;
	font-weight: 500;
}

.cosmo-skip-link:focus {
	left: 0;
	outline: 3px solid #fff;
	outline-offset: -3px;
}

/* Vidljiv fokus svuda */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--color-primary-accessible) !important;
	outline-offset: 2px !important;
}

/* Ukloniti outline:none bez zamjene — vratiti fokus */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}

/* Kontrast — neaktivni tabovi */
.elementor-tab-title:not(.elementor-active),
.nav-tabs .nav-link:not(.active),
[role="tab"][aria-selected="false"] {
	color: #5A5A66 !important;
}

/* Kontrast — linkovi u tekstu */
.elementor-widget-text-editor a,
.entry-content a,
p a {
	color: var(--color-primary-accessible);
}

/* Forme — vidljive labele i fokus */
.elementor-field-group label,
.wpcf7-form label,
.woocommerce form label {
	display: block;
	font-weight: 500 !important;
	margin-bottom: 6px;
	color: var(--color-heading);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="password"],
textarea,
select {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-weight: 500 !important;
	border: 1px solid var(--color-border);
	border-radius: var(--cosmo-radius-btn);
	padding: 12px 14px;
	min-height: 48px;
	background-color: #fff;
	color: var(--color-heading);
}

input::placeholder,
textarea::placeholder {
	color: #6B7280;
	opacity: 1;
}

/* Ikone u listama (migracija snippeta #3) */
.cosmo-li-icon {
	color: var(--color-primary-accessible) !important;
}

/* Dekorativni akcenti — svesti na pristupacnu zelenu (kontrast) */
.xb-service .xb-item--icon,
.xb-service .xb-item--icon.color3,
.xb-item--icon,
.xb-item--number,
.xb-item--category,
.xb-blog .xb-item--category,
.subtitle,
.acc-btn,
.header__search,
.header__bar {
	color: var(--color-primary-accessible) !important;
}

.xb-service .xb-item--icon,
.xb-service .xb-item--icon.color3,
.xb-item--icon {
	background-color: var(--color-primary-accessible) !important;
	background-image: none !important;
}

.xb-item--number,
.xb-item--category,
.xb-blog .xb-item--category {
	background-color: var(--color-primary-accessible) !important;
	background-image: none !important;
	color: #fff !important;
}

/* Tezina fonta — eksplicitno 500 na svim komponentama */
.thm-btn,
.header__search,
.header__bar,
.xb-item--number,
.acc-btn,
.xb-item--category,
.subtitle {
	font-weight: 500 !important;
}

/* ==========================================================================
   12. RESPONZIVNOST — breakpointi
   XS ≤479 | SM 480–767 | MD 768–991 | LG 992–1199 | XL 1200–1439 | XXL ≥1440
   ========================================================================== */

/* --- XS: mali telefoni (≤479px) --- */
@media (max-width: 479px) {
	.hero,
	.hero__style-one,
	.xb-hero {
		min-height: 520px;
	}

	/* CTA dugmad full-width */
	.hero .thm-btn,
	.xb-hero .thm-btn,
	.hero .elementor-button {
		width: 100%;
		display: flex;
		margin-bottom: 10px;
	}

	/* Header — bez apsolutnog preklapanja */
	.site-header {
		position: relative !important;
	}

	.site-header .xb-header__logo img,
	.xb-header__logo img {
		max-width: 110px;
	}

	/* Floating dugmad manja */
	.cosmo-portal-btn {
		bottom: 12px;
		right: 12px;
		padding: 10px 16px;
		font-size: 13px;
	}

	.xb-backtotop {
		bottom: 12px;
		left: 12px;
	}

	/* Prostor da floating dugmad ne preklapaju sadržaj */
	body {
		padding-bottom: 70px;
	}
}

/* --- SM: telefoni (480–767px) --- */
@media (min-width: 480px) and (max-width: 767px) {
	.hero,
	.hero__style-one,
	.xb-hero {
		min-height: 560px;
	}

	.cosmo-portal-btn {
		bottom: 14px;
		right: 14px;
		padding: 12px 18px;
		font-size: 14px;
	}

	body {
		padding-bottom: 70px;
	}
}

/* --- MD: tableti portrait (768–991px) --- */
@media (min-width: 768px) and (max-width: 991px) {
	/* Service grid 3 -> 2 kolone */
	.elementor-widget-int-visa .elementor-column,
	.xb-service-grid .elementor-column {
		width: 50% !important;
	}
}

/* --- LG: tableti landscape / mali laptop (992–1199px) --- */
@media (min-width: 992px) and (max-width: 1199px) {
	.hero h1,
	.xb-hero h1 {
		font-size: clamp(2rem, 4.5vw, 3rem) !important;
	}
}

/* --- XXL: veliki desktop (≥1440px) --- */
@media (min-width: 1440px) {
	.elementor-section.elementor-section-boxed > .elementor-container {
		max-width: var(--cosmo-container);
	}
}

/* ==========================================================================
   13. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}