/**
 * OT Portfolio — Base Styles & Dark-theme overrides
 *
 * Enqueued globally. Inline styles in the shortcode render take precedence.
 */

/* =============================================
   LOAD MORE BUTTON
   ============================================= */
.otpg-load-more {
	display: inline-block;
	padding: 12px 36px;
	border: 1px solid #ccc;
	background: #fff;
	color: #333;
	font-size: 15px;
	font-weight: 500;
	border-radius: 30px;
	cursor: pointer;
	transition: all 0.3s ease;
	outline: none;
	text-transform: none;
	letter-spacing: 0;
}
.otpg-load-more:hover {
	background: #f5f5f5;
	border-color: #999;
	color: #111;
}
.otpg-load-more:disabled {
	opacity: 0.5;
	cursor: default;
}

/* =============================================
   PAGINATION (numbered)
   ============================================= */
.otpg-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 40px 0 20px;
	padding: 0;
}
.otpg-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border-radius: 4px;
	background: #f5f5f5;
	color: #333;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s ease;
}
.otpg-pagination .page-numbers:hover {
	background: #e0e0e0;
	color: #111;
}
.otpg-pagination .page-numbers.current {
	background: #222;
	color: #fff;
}
.otpg-pagination .page-numbers.prev,
.otpg-pagination .page-numbers.next {
	font-size: 18px;
}

/* =============================================
   LIGHTBOX
   ============================================= */
#otpg-lb {
	transition: opacity 0.25s ease;
}
#otpg-lb-img {
	transition: opacity 0.2s ease;
}
#otpg-lb-close,
#otpg-lb-prev,
#otpg-lb-next {
	transition: opacity 0.2s ease;
}
#otpg-lb-close:hover,
#otpg-lb-prev:hover,
#otpg-lb-next:hover {
	opacity: 0.8;
}

/* =============================================
   MASONRY FIX — Archi theme & generic
   ============================================= */
.otpg-item {
	position: relative;
	overflow: hidden;
}

/* =============================================
   ALERTS (for "no items found" etc.)
   ============================================= */
.otpg-alert {
	padding: 14px 18px;
	border-radius: 8px;
	margin: 16px 0;
	font-size: 14px;
	line-height: 1.6;
	border-left: 4px solid;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.otpg-alert-info {
	background: rgba(96, 165, 250, 0.18);
	border-color: #3b82f6;
	color: #1e40af;
}
.otpg-alert-success {
	background: rgba(52, 211, 153, 0.18);
	border-color: #10b981;
	color: #065f46;
}
.otpg-alert-warning {
	background: rgba(251, 191, 36, 0.18);
	border-color: #f59e0b;
	color: #92400e;
}
.otpg-alert-error {
	background: rgba(248, 113, 113, 0.18);
	border-color: #ef4444;
	color: #991b1b;
}
.otpg-alert-tip {
	background: rgba(167, 139, 250, 0.18);
	border-color: #8b5cf6;
	color: #4c1d95;
}

/* =============================================
   SINGLE TEMPLATE — basic responsive
   ============================================= */
@media (max-width: 768px) {
	.otpg-single-meta {
		flex-direction: column;
		gap: 6px;
	}
}

/* =============================================
   PRINT STYLES
   ============================================= */
@media print {
	#otpg-lb { display: none !important; }
	.otpg-ba-handle { display: none !important; }
	.otpg-ba-before { clip-path: none !important; }
}
