/**
 * Ekalsa Workers — front-end styles.
 *
 * Deliberately minimal and scoped under .ekw-* classes so it never bleeds
 * into the rest of the theme. Everything visual lives in the :root
 * variables below — to match the exact ekalsa.com palette/fonts, only
 * these need to change (either here, or paste overrides into
 * "الإعدادات → CSS إضافي" from wp-admin, no file editing needed).
 */

:root {
	--ekw-columns: 3;
	--ekw-primary-color: #1b6f5c;      /* buttons, links, accents — replace with the site's brand color */
	--ekw-primary-color-dark: #145646;
	--ekw-whatsapp-color: #25D366;
	--ekw-text-color: #222222;
	--ekw-muted-color: #6b6b6b;
	--ekw-border-color: #e6e6e6;
	--ekw-card-bg: #ffffff;
	--ekw-radius: 10px;
	--ekw-font: inherit; /* inherits the theme's body font automatically */
}

.ekw-wrap,
.ekw-single {
	direction: rtl;
	text-align: right;
	font-family: var(--ekw-font);
	color: var(--ekw-text-color);
}

.ekw-listing-title {
	margin: 0 0 16px;
	font-size: 24px;
}

/* Country tabs — prominent, always at the top of a listing page */
.ekw-country-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ekw-border-color);
}

.ekw-country-tab {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	background: #f4f4f4;
	color: var(--ekw-text-color);
	text-decoration: none;
	font-size: 14px;
	white-space: nowrap;
}

.ekw-country-tab:hover {
	background: #e9e9e9;
}

.ekw-country-tab.is-active {
	background: var(--ekw-primary-color);
	color: #fff;
}

/* Filters */
.ekw-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}

.ekw-filter-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 180px;
}

.ekw-filter-field label {
	font-size: 13px;
	color: var(--ekw-muted-color);
}

.ekw-filter-field select {
	padding: 8px 10px;
	border: 1px solid var(--ekw-border-color);
	border-radius: 6px;
	background: #fff;
	font-family: inherit;
}

/* Grid */
.ekw-grid {
	display: grid;
	grid-template-columns: repeat(var(--ekw-columns), 1fr);
	gap: 20px;
	transition: opacity 0.15s ease;
}

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

@media (max-width: 600px) {
	.ekw-grid {
		grid-template-columns: 1fr;
	}
}

.ekw-empty {
	grid-column: 1 / -1;
	color: var(--ekw-muted-color);
	text-align: center;
	padding: 40px 0;
}

/* Card */
.ekw-card {
	background: var(--ekw-card-bg);
	border: 1px solid var(--ekw-border-color);
	border-radius: var(--ekw-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.ekw-card-photo-link {
	display: block;
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #f2f2f2;
}

.ekw-card-photo,
.ekw-single-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ekw-card-photo-placeholder {
	background: #f2f2f2;
}

.ekw-badge {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	background: #b32d2e;
	color: #fff;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 999px;
}

.ekw-card-body {
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-grow: 1;
}

.ekw-card-id {
	font-size: 12px;
	color: var(--ekw-muted-color);
}

.ekw-card-title {
	margin: 0;
	font-size: 17px;
}

.ekw-card-title a {
	color: inherit;
	text-decoration: none;
}

.ekw-card-meta {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	font-size: 13px;
	color: var(--ekw-muted-color);
}

.ekw-card-meta li::before {
	content: '•';
	margin-inline-end: 6px;
	color: var(--ekw-border-color);
}

.ekw-card-meta li:first-child::before {
	content: '';
	margin: 0;
}

/* Buttons */
.ekw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 6px;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	margin-top: auto;
}

.ekw-btn-primary {
	background: var(--ekw-primary-color);
	color: #fff;
}

.ekw-btn-primary:hover {
	background: var(--ekw-primary-color-dark);
	color: #fff;
}

.ekw-btn-whatsapp {
	background: var(--ekw-whatsapp-color);
	color: #fff;
}

.ekw-btn-whatsapp:hover {
	filter: brightness(0.95);
	color: #fff;
}

.ekw-btn-outline {
	background: transparent;
	color: var(--ekw-primary-color);
	border-color: var(--ekw-primary-color);
}

.ekw-card-actions {
	display: flex;
	gap: 8px;
	margin-top: auto;
}

.ekw-card-actions .ekw-btn-primary {
	flex: 1;
	margin-top: 0;
}

.ekw-btn-icon {
	flex: 0 0 auto;
	padding: 10px 12px;
	margin-top: 0;
}

.ekw-icon-whatsapp {
	display: block;
}

.ekw-loadmore-wrap {
	text-align: center;
	margin-top: 24px;
}

/* Single worker page */
.ekw-single {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 32px;
	max-width: 1000px;
	margin: 32px auto;
	padding: 0 16px;
}

@media (max-width: 700px) {
	.ekw-single {
		grid-template-columns: 1fr;
	}
}

.ekw-single-photo {
	position: relative;
	border-radius: var(--ekw-radius);
	overflow: hidden;
	background: #f2f2f2;
	aspect-ratio: 4 / 5;
}

.ekw-single-title {
	margin: 4px 0 12px;
	font-size: 26px;
}

.ekw-single-facts {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ekw-single-extra {
	margin-bottom: 20px;
	line-height: 1.7;
}

.ekw-single-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ekw-notice {
	color: #b32d2e;
	font-size: 13px;
}

/* Branded, watermarked CV preview modal */
.ekw-cv-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 20px;
}

.ekw-cv-modal[hidden] {
	display: none;
}

.ekw-cv-modal-inner {
	background: #fff;
	border-radius: var(--ekw-radius);
	width: 100%;
	max-width: 820px;
	height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	direction: rtl;
}

.ekw-cv-modal-header {
	background: var(--ekw-primary-color);
	color: #fff;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: bold;
}

.ekw-cv-modal-brand {
	font-size: 15px;
}

.ekw-cv-modal-close {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.ekw-cv-modal-frame-wrap {
	position: relative;
	flex: 1;
	background: #525659;
}

.ekw-cv-modal-frame {
	width: 100%;
	height: 100%;
	border: 0;
}

/* The watermark sits ON TOP of the iframe (pointer-events:none so it never
   blocks scrolling/zooming inside the PDF viewer) — a screenshot of the
   visible CV carries it, which is the actual point: a real download still
   isn't offered in "preview" mode, so this is what a visitor is left with. */
.ekw-cv-watermark {
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	justify-content: space-around;
	transform: rotate(-30deg) scale(1.4);
	opacity: 0.16;
	overflow: hidden;
}

.ekw-cv-watermark span {
	font-size: 15px;
	font-weight: bold;
	color: #000;
	white-space: nowrap;
	margin: 18px;
}