/**
 * Services Listing widget — structural defaults.
 * Visual styles (colors, sizes, radius, spacing) are controlled from Breakdance Design settings.
 */

.omsar-services-listing-widget {
	width: 100%;
	font-family: var(--font-main, 'Inter', sans-serif);
	overflow: visible;
}

.omsar-services-grid {
	display: grid;
	grid-template-columns: repeat(var(--omsar-services-columns, 4), 1fr);
	gap: 20px;
	width: 100%;
}

.omsar-service-card {
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	text-align: start;
	cursor: pointer;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 22px 24px;
	min-height: 170px;
	text-decoration: none;
	color: inherit;
	box-sizing: border-box;
	transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.omsar-service-card:hover,
.omsar-service-card:focus {
	text-decoration: none;
	color: inherit;
	outline: none;
}

.omsar-service-tag {
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: 4px 10px;
	border-radius: 18px;
	border: 1px solid #307FE2;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	margin-bottom: 16px;
	box-sizing: border-box;
}

.omsar-service-tag--electronic {
	background-color: #ffffff;
	color: #307FE2;
	border-color: #307FE2;
}

.omsar-service-tag--non-electronic {
	background-color: #307FE2;
	color: #ffffff;
	border-color: #307FE2;
}

.omsar-service-title {
	margin: 0 0 18px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
	color: #1a1a1a;
	text-align: start;
	transition: color 0.2s ease;
}

.omsar-service-directorate {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	color: #9ca3af;
	font-size: 13px;
	line-height: 1.4;
}

.omsar-service-directorate-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: inherit;
}

.omsar-service-directorate-icon svg {
	width: 16px;
	height: 16px;
	display: block;
}

.omsar-service-directorate-name {
	min-width: 0;
}

.omsar-services-empty {
	margin: 0;
	color: #6b7280;
}

.omsar-services-listing-widget[dir="rtl"],
.omsar-services-listing-widget.omsar-bd-rtl {
	direction: rtl;
	text-align: right;
}

.omsar-services-listing-widget[dir="rtl"] .omsar-service-title,
.omsar-services-listing-widget[dir="rtl"] .omsar-service-tag,
.omsar-services-listing-widget[dir="rtl"] .omsar-service-directorate,
.omsar-services-listing-widget.omsar-bd-rtl .omsar-service-title,
.omsar-services-listing-widget.omsar-bd-rtl .omsar-service-tag,
.omsar-services-listing-widget.omsar-bd-rtl .omsar-service-directorate {
	font-family: 'Almarai', sans-serif;
}

/* Popup */
body.omsar-service-popup-open {
	overflow: hidden;
}

.omsar-service-popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.omsar-service-popup.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.omsar-service-popup-overlay {
	position: absolute;
	inset: 0;
	background: var(--omsar-popup-overlay, rgba(15, 23, 42, 0.45));
}

.omsar-service-popup-dialog {
	position: relative;
	z-index: 1;
	width: min(var(--omsar-popup-max-width, 1100px), 100%);
	max-height: calc(100vh - 48px);
	overflow: auto;
	background: var(--omsar-popup-bg, #ffffff);
	border-radius: var(--omsar-popup-radius, 20px);
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
	transform: translateY(16px) scale(0.98);
	transition: transform 0.25s ease;
}

.omsar-service-popup.is-open .omsar-service-popup-dialog {
	transform: none;
}

.omsar-service-popup-inner {
	padding: var(--omsar-popup-pad-top, 28px) var(--omsar-popup-pad-right, 32px) var(--omsar-popup-pad-bottom, 32px) var(--omsar-popup-pad-left, 32px);
}

.omsar-service-popup-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.omsar-service-popup-title {
	margin: 0;
	font-size: var(--omsar-popup-title-size, 28px);
	font-weight: var(--omsar-popup-title-weight, 700);
	line-height: var(--omsar-popup-title-line, 1.35);
	color: var(--omsar-popup-title, #111827);
	text-align: start;
}

.omsar-service-popup-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.omsar-service-popup-header-actions .omsar-service-tag {
	align-self: center;
	margin-bottom: 0;
	border-radius: var(--omsar-popup-badge-radius, 18px);
	border-width: var(--omsar-popup-badge-border-width, 1px);
	border-style: solid;
	padding: var(--omsar-popup-badge-pad-top, 4px) var(--omsar-popup-badge-pad-right, 10px) var(--omsar-popup-badge-pad-bottom, 4px) var(--omsar-popup-badge-pad-left, 10px);
	font-size: var(--omsar-popup-badge-size, 12px);
	font-weight: var(--omsar-popup-badge-weight, 600);
	line-height: var(--omsar-popup-badge-line, 1.4);
}

.omsar-service-popup .omsar-service-tag--electronic {
	background-color: var(--omsar-popup-badge-e-bg, #ffffff);
	color: var(--omsar-popup-badge-e-text, var(--omsar-popup-badge-primary, #307FE2));
	border-color: var(--omsar-popup-badge-e-text, var(--omsar-popup-badge-primary, #307FE2));
}

.omsar-service-popup .omsar-service-tag--non-electronic {
	background-color: var(--omsar-popup-badge-ne-bg, var(--omsar-popup-badge-primary, #307FE2));
	color: var(--omsar-popup-badge-ne-text, #ffffff);
	border-color: var(--omsar-popup-badge-ne-bg, var(--omsar-popup-badge-primary, #307FE2));
}

.omsar-service-popup-close {
	appearance: none;
	-webkit-appearance: none;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: var(--omsar-popup-close-bg, #f3f4f6);
	color: var(--omsar-popup-close, #6b7280);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	line-height: 0;
	flex-shrink: 0;
}

.omsar-service-popup-close-icon {
	width: 12px;
	height: 12px;
	display: block;
}

.omsar-service-popup-close:hover,
.omsar-service-popup-close:focus {
	background: #e5e7eb;
	color: #111827;
	outline: none;
}

.omsar-service-popup-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--omsar-popup-gap, 16px);
}

.omsar-service-popup-card {
	grid-column: span 3;
	background: var(--omsar-popup-detail-bg, #f5f6f8);
	border-radius: var(--omsar-popup-detail-radius, 16px);
	padding: var(--omsar-popup-detail-pad-top, 20px) var(--omsar-popup-detail-pad-right, 22px) var(--omsar-popup-detail-pad-bottom, 20px) var(--omsar-popup-detail-pad-left, 22px);
	min-width: 0;
}

.omsar-service-popup-separator {
	grid-column: 1 / -1;
	height: 1px;
	background-color: var(--omsar-popup-separator, #e5e7eb);
	margin-block: 4px;
}

.omsar-service-popup-card--fees,
.omsar-service-popup-card--parties,
.omsar-service-popup-card--duration {
	grid-column: span 2;
}

.omsar-service-popup-card--committee {
	grid-column: span 3;
}

.omsar-service-popup-card--notes {
	grid-column: 1 / -1;
}

.omsar-service-popup-card-title {
	margin: 0 0 10px;
	font-size: var(--omsar-popup-section-title-size, 16px);
	font-weight: var(--omsar-popup-section-title-weight, 700);
	line-height: var(--omsar-popup-section-title-line, 1.4);
	color: var(--omsar-popup-section-title, #111827);
}

.omsar-service-popup-card-body {
	font-size: var(--omsar-popup-section-text-size, 14px);
	font-weight: var(--omsar-popup-section-text-weight, 400);
	line-height: var(--omsar-popup-section-text-line, 1.7);
	color: var(--omsar-popup-section-text, #4b5563);
}

.omsar-service-popup-card-body p,
.omsar-service-popup-card-body ul,
.omsar-service-popup-card-body ol {
	margin: 0 0 8px;
}

.omsar-service-popup-card-body p:last-child,
.omsar-service-popup-card-body ul:last-child,
.omsar-service-popup-card-body ol:last-child {
	margin-bottom: 0;
}

.omsar-service-popup-card-body ul,
.omsar-service-popup-card-body ol {
	padding-inline-start: 1.2em;
}

.omsar-service-popup[dir="rtl"],
.omsar-service-popup[dir="rtl"] .omsar-service-popup-title,
.omsar-service-popup[dir="rtl"] .omsar-service-popup-card-title,
.omsar-service-popup[dir="rtl"] .omsar-service-popup-card-body,
.omsar-service-popup[dir="rtl"] .omsar-service-tag {
	font-family: 'Almarai', sans-serif;
	text-align: right;
}

@media (max-width: 1024px) {
	.omsar-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.omsar-service-popup-card,
	.omsar-service-popup-card--fees,
	.omsar-service-popup-card--parties,
	.omsar-service-popup-card--duration,
	.omsar-service-popup-card--committee {
		grid-column: span 3;
	}

	.omsar-service-popup-card--notes {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.omsar-services-grid {
		grid-template-columns: 1fr;
	}

	.omsar-service-card {
		min-height: 0;
	}

	.omsar-service-popup {
		padding: 12px;
	}

	.omsar-service-popup-inner {
		padding: 20px 16px 24px;
	}

	.omsar-service-popup-header {
		flex-wrap: wrap;
	}

	.omsar-service-popup-title {
		font-size: 22px;
		order: 2;
		width: 100%;
	}

	.omsar-service-popup-header-actions {
		order: 1;
		width: 100%;
		justify-content: flex-end;
	}

	.omsar-service-popup-card,
	.omsar-service-popup-card--fees,
	.omsar-service-popup-card--parties,
	.omsar-service-popup-card--duration,
	.omsar-service-popup-card--committee,
	.omsar-service-popup-card--notes {
		grid-column: span 6;
	}
}