/* Islamic Counter for Elementor — frontend styles
 * Values here are sane defaults; Elementor style controls override via
 * inline {{WRAPPER}}-scoped selectors targeted at these same classes.
 */

.wtc-counters-section {
	position: relative;
	background-color: #ffffff;
	overflow: hidden;
}

.wtc-inner {
	position: relative;
	z-index: 2;
}

.wtc-counters-section.wtc-has-decorative-borders {
	border-top: 3px double #D4AF37;
	border-bottom: 3px double #D4AF37;
}

/* ------------------------------------------------------------------ *
 * Heading block
 * ------------------------------------------------------------------ */

.wtc-heading {
	text-align: center;
	margin-bottom: 40px;
}

.wtc-heading-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 18px;
	color: #D4AF37;
}

.wtc-divider-line {
	display: inline-block;
	width: 70px;
	height: 1px;
	background-color: currentColor;
}

.wtc-divider-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	color: inherit;
}

/* Same defensive rules as .wtc-counter-icon below: guards against a theme
   or other plugin's own Font Awesome copy overriding this icon's color,
   font weight, or display. */
.wtc-divider-icon i,
.wtc-divider-icon svg,
.wtc-divider-icon [class*="fa-"] {
	color: inherit !important;
	fill: currentColor !important;
	font-style: normal !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.wtc-heading-title {
	margin: 0 0 12px;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.25;
	color: #ffffff;
}

.wtc-heading-highlight {
	color: #D4AF37;
}

.wtc-heading-subtitle {
	margin: 0;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.85);
}

/* ------------------------------------------------------------------ *
 * Color presets
 * ------------------------------------------------------------------ */

/* Style 1 — Deep Emerald & Gold */
.wtc-counters-section.wtc-preset-emerald {
	background-color: #0B3D2E;
	background-image: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.08), transparent 60%);
	padding-top: 60px;
	padding-bottom: 60px;
}
.wtc-counters-section.wtc-preset-emerald .wtc-counter-number { color: #ffffff; }
.wtc-counters-section.wtc-preset-emerald .wtc-counter-title,
.wtc-counters-section.wtc-preset-emerald .wtc-counter-description { color: #f5f0e6; }
.wtc-counters-section.wtc-preset-emerald .wtc-heading-title { color: #ffffff; }
.wtc-counters-section.wtc-preset-emerald .wtc-heading-subtitle { color: rgba(255,255,255,0.82); }

/* Style 2 — Ivory & Green */
.wtc-counters-section.wtc-preset-ivory {
	background-color: #FAF7F0;
	padding-top: 60px;
	padding-bottom: 60px;
}
.wtc-counters-section.wtc-preset-ivory .wtc-counter-number { color: #0B3D2E; }
.wtc-counters-section.wtc-preset-ivory .wtc-counter-title { color: #1f2937; }
.wtc-counters-section.wtc-preset-ivory .wtc-counter-description { color: #4b5563; }
.wtc-counters-section.wtc-preset-ivory .wtc-heading-title { color: #0B3D2E; }
.wtc-counters-section.wtc-preset-ivory .wtc-heading-subtitle { color: #57606f; }
.wtc-counters-section.wtc-preset-ivory .wtc-heading-divider,
.wtc-counters-section.wtc-preset-ivory .wtc-divider-line { color: #0B3D2E; background-color: #0B3D2E; }

/* Style 3 — Navy & Gold */
.wtc-counters-section.wtc-preset-navy {
	background-color: #0F1E3D;
	padding-top: 60px;
	padding-bottom: 60px;
}
.wtc-counters-section.wtc-preset-navy .wtc-counter-number { color: #ffffff; }
.wtc-counters-section.wtc-preset-navy .wtc-counter-title,
.wtc-counters-section.wtc-preset-navy .wtc-counter-description { color: #f0f2f7; }
.wtc-counters-section.wtc-preset-navy .wtc-heading-title { color: #ffffff; }
.wtc-counters-section.wtc-preset-navy .wtc-heading-subtitle { color: rgba(255,255,255,0.82); }

/* ------------------------------------------------------------------ *
 * Icon styles — outline circle (Style 1 & 3) vs filled circle (Style 2)
 * ------------------------------------------------------------------ */

.wtc-icon-style-auto.wtc-preset-emerald .wtc-counter-icon,
.wtc-icon-style-auto.wtc-preset-navy .wtc-counter-icon,
.wtc-icon-style-outline .wtc-counter-icon {
	background-color: transparent;
	border: 2px solid #D4AF37;
	color: #D4AF37;
}

.wtc-icon-style-auto.wtc-preset-ivory .wtc-counter-icon,
.wtc-icon-style-filled .wtc-counter-icon {
	background-color: #0B3D2E;
	border: 2px solid #0B3D2E;
	color: #ffffff;
}

/* ------------------------------------------------------------------ *
 * Counters grid
 * ------------------------------------------------------------------ */

.wtc-counters-wrapper {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 30px;
	row-gap: 30px;
	z-index: 1;
}

/* Optional geometric pattern background, applied via CSS mask so its
   color follows the Pattern Color control while keeping the SVG itself
   colorless/reusable. */
.wtc-counters-wrapper.wtc-has-pattern::before {
	content: "";
	position: absolute;
	inset: -60px;
	background-color: #D4AF37;
	opacity: 0.12;
	-webkit-mask-image: url('../images/pattern.svg');
	mask-image: url('../images/pattern.svg');
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	-webkit-mask-size: 120px 120px;
	mask-size: 120px 120px;
	pointer-events: none;
	z-index: 0;
}

.wtc-counter-box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	z-index: 1;
}

.wtc-counters-wrapper.wtc-has-separators .wtc-counter-box:not(:first-child) {
	border-inline-start: 1px solid rgba(212, 175, 55, 0.4);
}

.wtc-counter-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	margin-bottom: 16px;
	flex-shrink: 0;
	line-height: 1;
}

.wtc-counter-icon.wtc-icon-position-left {
	margin-bottom: 0;
	margin-inline-end: 14px;
}

/* Defensive, higher-specificity rules: some themes/plugins load their own
   older copy of Font Awesome using the same ".fa"/".fas" class names,
   which can silently override this widget's icon color or swap in the
   wrong glyph set. These rules make sure our bundled Font Awesome build
   and its color always win for icons inside this widget. */
.wtc-counter-icon i,
.wtc-counter-icon svg,
.wtc-counter-icon [class*="fa-"] {
	color: inherit !important;
	fill: currentColor !important;
	font-style: normal !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wtc-counter-icon i,
.wtc-counter-icon svg {
	font-size: 30px;
	width: 30px;
	height: 30px;
}

.wtc-counter-number {
	display: inline-block;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 8px;
	font-variant-numeric: tabular-nums;
}

.wtc-counter-title {
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
}

.wtc-counter-accent {
	display: none; /* the reference design doesn't use the gold underline accent by default */
	width: 40px;
	height: 3px;
	margin: 10px 0;
	background-color: #D4AF37;
	border-radius: 2px;
}

.wtc-counter-description {
	display: block;
	font-size: 14px;
	margin-top: 4px;
	opacity: 0.85;
}

/* When icon is positioned beside the number, lay the icon + number/title
   block out horizontally instead of stacked. */
.wtc-counter-box:has(.wtc-icon-position-left) {
	flex-direction: row;
	align-items: center;
	text-align: left;
}

/* ------------------------------------------------------------------ *
 * Decorative corner illustrations (Style 2 leaves / Style 3 mosque & lantern)
 * ------------------------------------------------------------------ */

.wtc-illustration {
	position: absolute;
	bottom: 0;
	width: 220px;
	height: 220px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
	pointer-events: none;
	z-index: 0;
	opacity: 0.9;
}

.wtc-illustration-left { left: -20px; }
.wtc-illustration-right { right: -20px; transform: scaleX(-1); }

.wtc-preset-ivory.wtc-has-illustrations .wtc-illustration {
	background-image: url('../images/leaves.svg');
	width: 180px;
	height: 180px;
}

.wtc-preset-navy.wtc-has-illustrations .wtc-illustration-left {
	background-image: url('../images/mosque-moon.svg');
	transform: none;
	width: 170px;
	height: 260px;
	left: 0;
	bottom: 0;
}

.wtc-preset-navy.wtc-has-illustrations .wtc-illustration-right {
	background-image: url('../images/lantern.svg');
	transform: none;
	width: 150px;
	height: 260px;
	right: 10px;
	bottom: 0;
	background-position: top right;
}

/* ------------------------------------------------------------------ *
 * Decorative bottom seam
 * ------------------------------------------------------------------ */

.wtc-bottom-seam {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 20px;
	line-height: 0;
	z-index: 3;
}

.wtc-bottom-seam svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ------------------------------------------------------------------ *
 * Responsive fallbacks in case a specific breakpoint's column control
 * hasn't been explicitly set inside Elementor.
 * ------------------------------------------------------------------ */

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

	.wtc-illustration {
		display: none;
	}
}

@media (max-width: 600px) {
	.wtc-counters-wrapper {
		grid-template-columns: repeat(1, 1fr);
	}

	.wtc-heading-title {
		font-size: 28px;
	}

	.wtc-counters-wrapper.wtc-has-separators .wtc-counter-box {
		border-inline-start: none !important;
		border-top: 1px solid rgba(212, 175, 55, 0.4);
		padding-top: 20px;
	}

	.wtc-counters-wrapper.wtc-has-separators .wtc-counter-box:first-child {
		border-top: none;
		padding-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wtc-counter-number {
		transition: none !important;
	}
}