/* =========================================================
   ADMIN
   ========================================================= */

.oglasi-admin {
	max-width: 1400px;
}

.oglasi-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 24px;
	margin-top: 24px;
}

.oglasi-card {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.oglasi-card h2 {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 18px;
}

.oglasi-field {
	margin-bottom: 24px;
}

.oglasi-field:last-child {
	margin-bottom: 0;
}

.oglasi-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.oglasi-field input[type="text"],
.oglasi-field input[type="url"],
.oglasi-field input[type="number"] {
	max-width: 100%;
}

.required {
	color: #d63638;
}

.oglasi-input-suffix {
	display: flex;
	align-items: center;
	gap: 10px;
}

.oglasi-input-suffix input {
	width: 120px;
}

.oglasi-input-suffix span {
	color: #50575e;
}

.oglasi-sticky {
	position: sticky;
	top: 40px;
}

.oglasi-empty {
	background: #fff;
	border: 1px solid #dcdcde;
	padding: 60px 30px;
	text-align: center;
	margin-top: 24px;
}

.oglasi-empty .dashicons {
	font-size: 50px;
	width: 50px;
	height: 50px;
	color: #2271b1;
}

.oglasi-empty h2 {
	margin: 15px 0 5px;
}

/* =========================================================
   BANNER OPTIONS
   ========================================================= */

.oglasi-banner-options {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.oglasi-banner-option {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 18px;
	border: 2px solid #dcdcde;
	border-radius: 8px;
	cursor: pointer;
	background: #fff;
	transition:
		border-color .15s ease,
		box-shadow .15s ease;
}

.oglasi-banner-option:hover {
	border-color: #8c8f94;
}

.oglasi-banner-option input {
	position: absolute;
	opacity: 0;
}

.oglasi-banner-option:has(input:checked) {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
}

.oglasi-banner-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient(
			135deg,
			#eef2f5,
			#d9dee3
		);
	color: #50575e;
	font-size: 11px;
	font-weight: 600;
}

.oglasi-banner-preview.leaderboard {
	width: 290px;
	height: 36px;
}

.oglasi-banner-preview.rectangle {
	width: 150px;
	height: 125px;
}

.oglasi-banner-preview.half-page {
	width: 100px;
	height: 200px;
}

.oglasi-banner-preview.half-page-landscape {
	width: 200px;
	height: 100px;
}

.oglasi-banner-option strong {
	font-size: 14px;
}

.oglasi-banner-option small {
	color: #646970;
}

/* =========================================================
   IMAGE LIST
   ========================================================= */

.oglasi-images-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.oglasi-image-item {
	display: grid;
	grid-template-columns:
		32px
		150px
		minmax(0, 1fr);
	align-items: center;
	gap: 15px;
	padding: 12px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 6px;
}

.oglasi-drag {
	cursor: move;
	color: #646970;
	text-align: center;
}

.oglasi-drag:hover {
	color: #2271b1;
}

.oglasi-image-thumb {
	width: 150px;
	height: 90px;
	background: #fff;
	border: 1px solid #dcdcde;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.oglasi-image-thumb img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

.oglasi-image-data {
	min-width: 0;
}

.oglasi-image-data > strong {
	display: block;
	margin-bottom: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.oglasi-image-data label {
	display: block;
	font-size: 12px;
	font-weight: 600;
}

.oglasi-image-link {
	display: block;
	width: 100%;
	margin-top: 5px;
}

.oglasi-remove-image {
	margin-top: 8px !important;
}

.oglasi-sort-placeholder {
	height: 118px;
	border: 2px dashed #2271b1;
	background: #f0f6fc;
	border-radius: 6px;
}

/* =========================================================
   UPLOAD MESSAGE
   ========================================================= */

#oglasi-upload-message {
	margin-top: 15px;
}

#oglasi-upload-message .notice {
	margin: 0;
}

#oglasi-upload-message ul {
	margin-left: 20px;
	list-style: disc;
}

/* =========================================================
   PREVIEW
   ========================================================= */

.oglasi-live-preview {
	width: 100%;
	background: #f0f0f1;
	border: 1px solid #dcdcde;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: 140px;
}

.oglasi-live-preview img {
	display: block;
	max-width: 100%;
	height: auto;
	width: auto;
}

.oglasi-preview-empty {
	padding: 60px 20px;
	color: #646970;
	text-align: center;
}

/* =========================================================
   STATISTICS
   ========================================================= */

.oglasi-stat-image {
	display: block;
	max-width: 180px;
	max-height: 100px;
	width: auto;
	height: auto;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
}

.oglasi-link-cell {
	max-width: 400px;
	word-break: break-all;
}

/* =========================================================
   DIAGNOSIS
   ========================================================= */

.oglasi-diagnosis {
	width: 100%;
	min-height: 700px;
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Monaco,
		Consolas,
		"Liberation Mono",
		monospace;
	font-size: 13px;
	line-height: 1.5;
}

/* =========================================================
   GUTENBERG
   ========================================================= */

.oglasi-editor-block {
	min-height: 160px;
}

.oglasi-selected-ad {
	margin: 15px 0 0;
	padding: 10px 12px;
	background: #f0f6fc;
	border-left: 3px solid #2271b1;
}

/* =========================================================
   FRONTEND
   ========================================================= */

.oglasi-banner {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

.oglasi-banner-leaderboard {
	max-width: 728px;
	aspect-ratio: 728 / 90;
}

.oglasi-banner-medium-rectangle {
	max-width: 300px;
	aspect-ratio: 300 / 250;
}

.oglasi-banner-half-page {
	max-width: 300px;
	aspect-ratio: 300 / 600;
}

.oglasi-banner-half-page-landscape {
	max-width: 600px;
	aspect-ratio: 600 / 300;
}

.oglasi-slides {
	position: relative;
	width: 100%;
	height: 100%;
}

.oglasi-slide {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 1;
	pointer-events: none;
	text-decoration: none;
	transform: none;
	filter: none;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	transition:
		opacity var(--oglasi-transition, 1s) var(--oglasi-easing, ease-in-out),
		transform var(--oglasi-transition, 1s) var(--oglasi-easing, ease-in-out),
		filter var(--oglasi-transition, 1s) var(--oglasi-easing, ease-in-out);
}

.oglasi-slide.is-active {
	opacity: 1;
	transform: none;
	filter: none;
	z-index: 2;
	pointer-events: auto;
}

.oglasi-slide.is-leaving {
	opacity: 0;
	z-index: 3;
	pointer-events: none;
}

.oglasi-banner[data-transition-effect="none"] .oglasi-slide { transition: none; }
.oglasi-banner[data-transition-effect="fade"] .oglasi-slide { transform: none; }

.oglasi-banner[data-transition-effect="slide-left"] .oglasi-slide { transform: translateX(var(--oglasi-distance, 100%)); }
.oglasi-banner[data-transition-effect="slide-left"] .oglasi-slide.is-leaving { transform: translateX(calc(-1 * var(--oglasi-distance, 100%))); }
.oglasi-banner[data-transition-effect="slide-right"] .oglasi-slide { transform: translateX(calc(-1 * var(--oglasi-distance, 100%))); }
.oglasi-banner[data-transition-effect="slide-right"] .oglasi-slide.is-leaving { transform: translateX(var(--oglasi-distance, 100%)); }
.oglasi-banner[data-transition-effect="slide-up"] .oglasi-slide { transform: translateY(var(--oglasi-distance, 100%)); }
.oglasi-banner[data-transition-effect="slide-up"] .oglasi-slide.is-leaving { transform: translateY(calc(-1 * var(--oglasi-distance, 100%))); }
.oglasi-banner[data-transition-effect="slide-down"] .oglasi-slide { transform: translateY(calc(-1 * var(--oglasi-distance, 100%))); }
.oglasi-banner[data-transition-effect="slide-down"] .oglasi-slide.is-leaving { transform: translateY(var(--oglasi-distance, 100%)); }

.oglasi-banner[data-transition-effect="zoom-in"] .oglasi-slide { transform: scale(calc(2 - var(--oglasi-scale, 1.1))); }
.oglasi-banner[data-transition-effect="zoom-in"] .oglasi-slide.is-leaving { transform: scale(var(--oglasi-scale, 1.1)); }
.oglasi-banner[data-transition-effect="zoom-out"] .oglasi-slide { transform: scale(var(--oglasi-scale, 1.1)); }
.oglasi-banner[data-transition-effect="zoom-out"] .oglasi-slide.is-leaving { transform: scale(calc(2 - var(--oglasi-scale, 1.1))); }

.oglasi-banner[data-transition-effect="flip-x"] .oglasi-slides,
.oglasi-banner[data-transition-effect="flip-y"] .oglasi-slides { perspective: 1200px; }
.oglasi-banner[data-transition-effect="flip-x"] .oglasi-slide { transform: rotateY(var(--oglasi-rotation, 90deg)); }
.oglasi-banner[data-transition-effect="flip-x"] .oglasi-slide.is-leaving { transform: rotateY(calc(-1 * var(--oglasi-rotation, 90deg))); }
.oglasi-banner[data-transition-effect="flip-y"] .oglasi-slide { transform: rotateX(var(--oglasi-rotation, 90deg)); }
.oglasi-banner[data-transition-effect="flip-y"] .oglasi-slide.is-leaving { transform: rotateX(calc(-1 * var(--oglasi-rotation, 90deg))); }

.oglasi-banner[data-transition-effect="rotate-in"] .oglasi-slide { transform: rotate(var(--oglasi-rotation, 15deg)) scale(0.9); }
.oglasi-banner[data-transition-effect="rotate-in"] .oglasi-slide.is-leaving { transform: rotate(calc(-1 * var(--oglasi-rotation, 15deg))) scale(1.1); }
.oglasi-banner[data-transition-effect="rotate-out"] .oglasi-slide { transform: rotate(calc(-1 * var(--oglasi-rotation, 15deg))) scale(1.1); }
.oglasi-banner[data-transition-effect="rotate-out"] .oglasi-slide.is-leaving { transform: rotate(var(--oglasi-rotation, 15deg)) scale(0.9); }

.oglasi-banner[data-transition-effect="blur"] .oglasi-slide { filter: blur(var(--oglasi-blur, 10px)); }
.oglasi-banner[data-transition-effect="blur"] .oglasi-slide.is-leaving { filter: blur(var(--oglasi-blur, 10px)); }

/* Aktivni slide mora vedno preglasiti zacetni transform/filter posameznega ucinka.
   Pravilo je namenoma za definicijami ucinkov, da deluje tudi pri vseh naslednjih menjavah. */
.oglasi-banner[data-transition-effect] .oglasi-slide.is-active {
	opacity: 1;
	transform: none;
	filter: none;
}

.oglasi-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.oglasi-banner-leaderboard
.oglasi-slide img {
	aspect-ratio: 728 / 90;
}

.oglasi-banner-medium-rectangle
.oglasi-slide img {
	aspect-ratio: 300 / 250;
}

.oglasi-banner-half-page
.oglasi-slide img {
	aspect-ratio: 300 / 600;
}

.oglasi-banner-half-page-landscape
.oglasi-slide img {
	aspect-ratio: 600 / 300;
}

.oglasi-block-placeholder {
	padding: 24px;
	background: #f6f7f7;
	border: 1px dashed #8c8f94;
	text-align: center;
	color: #50575e;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

	.oglasi-grid {
		grid-template-columns: 1fr;
	}

	.oglasi-sticky {
		position: static;
	}
}

@media (max-width: 600px) {

	.oglasi-image-item {
		grid-template-columns:
			28px
			90px
			minmax(0, 1fr);

		gap: 10px;
	}

	.oglasi-image-thumb {
		width: 90px;
		height: 70px;
	}

	.oglasi-banner-options {
		flex-direction: column;
		align-items: stretch;
	}

	.oglasi-banner-option {
		align-items: flex-start;
	}

	.oglasi-banner-preview.leaderboard {
		width: 100%;
	}
}


/* =========================================================
   AUTO DISPLAY
   ========================================================= */

.oglasi-auto-display {
	width: 100%;
	display: flex;
	justify-content: center;
	margin: 0 0 24px;
}

.oglasi-auto-display .oglasi-banner {
	flex: 0 1 auto;
}

@media (max-width: 760px) {
	.oglasi-auto-display {
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}
}


/* =========================================================
   TWENTY TWENTY-FIVE INTEGRATION
   ========================================================= */

.oglasi-auto-display {
	box-sizing: border-box;
	width: 100%;
	margin-block: var(--wp--preset--spacing--40, 1.5rem);
}

.oglasi-theme-twenty-twenty-five {
	padding-inline: var(--wp--preset--spacing--20, 0.75rem);
}

.oglasi-theme-twenty-twenty-five .oglasi-banner {
	margin-inline: auto;
}

@media (max-width: 782px) {
	.oglasi-theme-twenty-twenty-five {
		padding-inline: var(--wp--preset--spacing--20, 0.75rem);
	}
}

/* =========================================================
   MOBILE LAYOUT FOR ADS INSIDE WORDPRESS COLUMNS
   ========================================================= */

/*
 * Gutenberg lahko pri nekaterih postavitvah ohrani stolpce v eni vrstici
 * (npr. ce je izklopljen "Stack on mobile"). JavaScript oznaci samo tiste
 * bloke Stolpci, ki dejansko vsebujejo Oglasi, zato spodnji popravek ne
 * vpliva na ostale stolpce spletisca.
 */
@media (max-width: 782px) {
	.wp-block-columns.oglasi-responsive-columns {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.wp-block-columns.oglasi-responsive-columns > .wp-block-column {
		flex: 0 0 100% !important;
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.wp-block-column.oglasi-responsive-column,
	.wp-block-column.oglasi-responsive-column .oglasi-banner {
		width: 100% !important;
		max-width: 100%;
		min-width: 0;
	}

	.wp-block-column.oglasi-responsive-column .oglasi-banner-leaderboard,
	.wp-block-column.oglasi-responsive-column .oglasi-banner-medium-rectangle,
	.wp-block-column.oglasi-responsive-column .oglasi-banner-half-page,
	.wp-block-column.oglasi-responsive-column .oglasi-banner-half-page-landscape {
		margin-left: auto;
		margin-right: auto;
	}
}


/* =========================================================
   GLOBAL MOBILE RESPONSIVE LAYOUT — ALL ADS / ALL TEMPLATES
   ========================================================= */

@media (max-width: 782px) {
	/*
	 * CSS varovalo za sodobne brskalnike (Chrome/Firefox/Safari).
	 * Deluje tudi brez JavaScripta in na vseh straneh/predlogah, kjer
	 * Gutenberg Columns vsebuje vsaj en blok Oglasi.
	 */
	.wp-block-columns:has(.oglasi-banner) {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.wp-block-columns:has(.oglasi-banner) > .wp-block-column {
		flex: 0 0 100% !important;
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	/* Vsak oglas, ne glede na stran ali vrsto predloge. */
	.oglasi-banner {
		box-sizing: border-box;
		width: 100% !important;
		min-width: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.oglasi-banner img {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		object-fit: contain;
	}
}