/*
 * Tadleel Window Films — bespoke CSS
 * Only for effects theme.json / core block settings genuinely can't express:
 * circular icon frames, dotted step-connectors, checklist bullets, the
 * before/after static fallback, image-placeholder tiles, and the
 * scroll-reveal / sticky-header states driven by custom.js.
 */

/* ---------- Sticky header state (toggled by custom.js on scroll) ------- */
.tadleel-header {
	transition: background-color 0.3s ease, border-color 0.3s ease;
	border-bottom: 1px solid transparent;
}
.tadleel-header.is-scrolled {
	background-color: rgba(10, 10, 10, 0.95) !important;
	border-bottom-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(6px);
}

/* ---------- Scroll reveal (fade/slide-up), matches static site --------- */
.tadleel-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.tadleel-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- Circular icon frame (Why Choose / hero feature row) -------- */
.tadleel-icon-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	margin: 0 auto;
}
.tadleel-icon-circle img {
	width: 28px;
	height: 28px;
}

/* Solid dark circular badge used for the How It Works steps */
.tadleel-step-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--ink);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.tadleel-step-badge img {
	width: 24px;
	height: 24px;
	filter: invert(1);
}

/* Dotted connector line threading through the How It Works steps on desktop */
.tadleel-step-connector {
	position: relative;
}
@media (min-width: 782px) {
	.tadleel-step-connector::before {
		content: "";
		position: absolute;
		top: 32px;
		left: 0;
		right: 0;
		border-top: 2px dashed #d4d4d4;
		z-index: 0;
	}
}

/* ---------- Checklist bullets: circular checkmark, not default markers - */
.tadleel-checklist {
	list-style: none !important;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.tadleel-checklist li {
	position: relative;
	padding-left: 1.75rem;
	font-size: 0.9rem;
}
.tadleel-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.15rem;
	height: 1.15rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A24B' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.3 2.6 2.6L16 9.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tadleel-checklist--dark li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3813A' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.3 2.6 2.6L16 9.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Package card image placeholder tile ------------------------ */
.tadleel-photo-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 2px dashed rgba(255, 255, 255, 0.25);
	border-radius: 0.75rem;
	padding: 1.5rem;
	min-height: 180px;
	text-align: center;
}
.tadleel-photo-placeholder.is-light {
	border-color: #d4d4d4;
}
.tadleel-photo-placeholder img {
	width: 32px;
	height: 32px;
	opacity: 0.5;
}
.tadleel-photo-placeholder span {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0.6;
}

/* ---------- Package title all-caps (matches corrected static build) ---- */
.tadleel-package-title {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Package card fixed to row layout on tablet+ so the image sits left of content */
@media (min-width: 600px) {
	.tadleel-package-card > .wp-block-columns {
		flex-wrap: nowrap !important;
	}
}