/* ==========================================================
   ULETI.HR DESIGN SYSTEM
   Version: 1.0
   ========================================================== */


/* ==========================================================
   01. DESIGN TOKENS
   Osnovne boje, razmaci, zaobljenja i animacije
   ========================================================== */

:root {
	/* ExpertHive glavna boja */
	--uleti-color-primary: #00876f;
	--uleti-color-primary-hover: #00725f;
	--uleti-color-primary-light: #e7f7f2;
	--uleti-color-primary-border: #b9e5d9;
	--uleti-color-primary-shadow: rgba(0, 135, 111, 0.35);

	/* WhatsApp */
	--uleti-color-whatsapp: #25d366;
	--uleti-color-whatsapp-hover: #1fbd5b;

	/* Neutralne boje */
	--uleti-color-white: #ffffff;
	--uleti-color-text: #303846;
	--uleti-color-text-muted: #4f5968;
	--uleti-color-surface: #f4f5f6;
	--uleti-color-chip: #eef0f3;
	--uleti-color-border: #e3e6ea;
	--uleti-color-border-soft: rgba(7, 36, 86, 0.075);

	/* Zaobljenja */
	--uleti-radius-small: 6px;
	--uleti-radius-medium: 8px;
	--uleti-radius-large: 10px;
	--uleti-radius-pill: 999px;

	/* Sjene */
	--uleti-shadow-primary:
		0 5px 21px var(--uleti-color-primary-shadow);

	--uleti-shadow-small:
		0 2px 8px rgba(0, 135, 111, 0.08);

	/* Animacije */
	--uleti-transition-fast: 0.15s ease;
	--uleti-transition-base: 0.2s ease;
}


/* ==========================================================
   02. GLOBALNE HIVEPRESS PRILAGODBE
   ========================================================== */

/* Sakrivanje ikona za objavu u zaglavlju */
.site-header .hp-menu__item--listing-submit,
.site-header .hp-menu__item--request-submit {
	display: none !important;
}


/* ==========================================================
   03. KLIKABILNE KATEGORIJE / CHIPS
   Isti izgled na kartici i pojedinačnom oglasu
   ========================================================== */

.uleti-request-card .hp-listing__categories,
.single-hp_request .hp-listing__categories,
.single-hp_request .hp-listing__category {
	display: inline-flex;
	align-items: center;
	margin: 0 !important;
}

.uleti-request-card .hp-listing__categories a,
.single-hp_request .hp-listing__categories a,
.single-hp_request .hp-listing__category a {
	display: inline-flex;
	align-items: center;
	gap: 6px;

	min-height: 26px;
	padding: 4px 10px;
	margin: 0 !important;

	background: var(--uleti-color-chip);
	border: 1px solid var(--uleti-color-border);
	border-radius: var(--uleti-radius-small);

	color: var(--uleti-color-text-muted) !important;

	font-size: 14px;
	font-weight: 550;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none !important;
	text-decoration: none !important;

	cursor: pointer;

	transition:
		background-color var(--uleti-transition-base),
		border-color var(--uleti-transition-base),
		color var(--uleti-transition-base),
		transform var(--uleti-transition-base),
		box-shadow var(--uleti-transition-base);
}

.uleti-request-card .hp-listing__categories a:hover,
.single-hp_request .hp-listing__categories a:hover,
.single-hp_request .hp-listing__category a:hover {
	background: var(--uleti-color-primary-light);
	border-color: var(--uleti-color-primary-border);
	color: var(--uleti-color-primary) !important;

	transform: translateY(-1px);
	box-shadow: var(--uleti-shadow-small);
}

/* WordPress emoji unutar kategorije */
.hp-listing__categories a img.emoji,
.hp-listing__category a img.emoji {
	width: 1.15em;
	height: 1.15em;
	margin: 0;
	vertical-align: middle;
}


/* ==========================================================
   04. REQUEST KARTICA
   ========================================================== */

.uleti-request-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;

	padding: 24px 24px 0;

	overflow: hidden;
	border-radius: var(--uleti-radius-medium);
}

/* Slika oglasa */
.uleti-request-card .uleti-request-image {
	display: block;

	width: 100%;
	height: 170px;
	flex: none;

	margin: 0 0 20px;

	overflow: hidden;
	border-radius: var(--uleti-radius-large);
	background: var(--uleti-color-surface);
}

.uleti-request-card .uleti-request-image img {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}

/* Središnji sadržaj */
.uleti-request-card .hp-listing__content {
	width: 100%;
	min-width: 0;
	flex: 1 1 auto;

	margin: 0;
	padding: 0;
}

/* Naslov */
.uleti-request-card .hp-listing__title {
	margin-bottom: 12px;
}

/* Sekundarni atributi */
.uleti-request-card .hp-listing__attributes--secondary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px 14px;

	margin-top: 0;
}

.uleti-request-card
.hp-listing__attributes--secondary
.hp-listing__attribute {
	margin: 0;
}

/* Footer */
.uleti-request-card .hp-listing__footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;

	width: auto;
	min-height: 68px;
	flex: none;

	margin: 20px -24px 0;
	padding: 14px 24px;

	border-top: 1px solid var(--uleti-color-border-soft);
}

/* Uklanjanje originalnog desnog razmaka */
.uleti-request-card .hp-listing__content:not(:last-child),
.uleti-request-card .hp-listing__footer:not(:last-child),
.uleti-request-card .hp-listing__header:not(:last-child) {
	margin-right: 0;
}

/* Cijena */
.uleti-request-card .hp-listing__attributes--primary {
	display: flex;
	align-items: center;
	margin: 0;
}

.uleti-request-card .hp-listing__attribute--price {
	font-size: 30px;
	font-weight: 700;
}

/* Akcije */
.uleti-request-card .hp-listing__actions--primary {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: flex-end;

	margin: 0;
	padding-right: 18px;
}

.uleti-request-card .hp-listing__action {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Zelena crta uz akciju */
.uleti-request-card .hp-listing__actions--primary::after {
	content: "";

	position: absolute;
	top: -8px;
	right: 0;
	bottom: -8px;

	width: 3px;

	border-radius: 3px;
	background: var(--uleti-color-primary);
}

/* Kartica bez slike */
.uleti-request-card:not(:has(.uleti-request-image)) {
	padding-top: 28px;
}


/* ==========================================================
   05. KONTAKTNE TIPKE
   Poziv i WhatsApp na pojedinačnom requestu
   ========================================================== */

.uleti-request-contact-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;

	margin-top: 20px;
}

.uleti-request-contact-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	min-height: 44px;
	padding: 11px 18px;

	border: 0;
	border-radius: var(--uleti-radius-large);

	color: var(--uleti-color-white) !important;

	font-family: "DM Sans", sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;

	transition:
		background-color var(--uleti-transition-fast),
		transform var(--uleti-transition-fast),
		box-shadow var(--uleti-transition-fast),
		opacity var(--uleti-transition-fast);
}

.uleti-request-contact-button:hover {
	color: var(--uleti-color-white) !important;
	transform: translateY(-1px);
}

/* Poziv */
.uleti-request-contact-button--phone {
	background: var(--uleti-color-primary);
	box-shadow: var(--uleti-shadow-primary);
}

.uleti-request-contact-button--phone:hover {
	background: var(--uleti-color-primary-hover);
}

/* WhatsApp */
.uleti-request-contact-button--whatsapp {
	background: var(--uleti-color-whatsapp);
	box-shadow: 0 5px 21px rgba(37, 211, 102, 0.3);
}

.uleti-request-contact-button--whatsapp:hover {
	background: var(--uleti-color-whatsapp-hover);
}

/* Ikona */
.uleti-request-contact__whatsapp-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.uleti-request-contact__whatsapp-icon svg {
	display: block;
	width: 20px;
	height: 20px;
}


/* ==========================================================
   06. MOBILNI PRIKAZ
   ========================================================== */

@media only screen and (max-width: 767px) {

	.uleti-request-card .hp-listing__categories a,
	.single-hp_request .hp-listing__categories a,
	.single-hp_request .hp-listing__category a {
		min-height: 22px;
		padding: 3px 7px;

		font-size: 16px;
		border-radius: 5px;
	}
}

@media only screen and (max-width: 480px) {

	.uleti-request-contact-button {
		flex: 1 1 calc(50% - 5px);
		min-width: 0;

		padding: 10px 8px;
		
	}
}