/*
 * Carmel Activation — clothesline + registration card, from the approved landing design.
 * Scoped to .carmel-activation so it works inside any theme; tokens can be overridden.
 */
.carmel-activation {
	--sky: #6EC6EF;
	--sky-deep: #3AACF0;
	--sky-pale: #EAF6FD;
	--blue: #1B6EF5;
	--royal: #123C94;
	--royal-dp: #0D2C70;
	--paper: #FFFFFF;
	--paper-tint: #F4FAFE;
	--ink: #0B1B33;
	--muted: #516A87;
	--line: #DCEBF8;
	--gold: #FFC72C;
	--green: #16A34A;
	--danger: #DC2626;
	--hint: #9AAFC4;

	font-family: 'Tajawal', sans-serif;
	color: var(--ink);
	line-height: 1.6;
	text-align: start;
}

/* English: Inter (the design's Latin face) everywhere except Arabic fragments. */
.carmel-activation[lang="en"],
.carmel-activation[lang="en"] :is(.ca-title, .ca-sub, .ca-field input, .ca-field select, .ca-submit, .ca-remove, .ca-retry, .ca-frame__cta, .ca-consent label) {
	font-family: 'Inter', 'Tajawal', sans-serif;
}

.carmel-activation [lang="ar"] {
	font-family: 'Tajawal', sans-serif;
}

.carmel-activation[lang="en"] .ca-title {
	letter-spacing: -.02em;
}

.carmel-activation[lang="en"] .ca-slot__sub[lang="ar"] {
	text-transform: none;
	letter-spacing: 0;
	font-size: 11px;
}

.carmel-activation *,
.carmel-activation *::before,
.carmel-activation *::after {
	box-sizing: border-box;
}

.carmel-activation [hidden] {
	display: none !important;
}

.carmel-activation p,
.carmel-activation h2,
.carmel-activation ol {
	margin: 0;
	padding: 0;
}

.carmel-activation .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.ca-wrap {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 7vw;
}

@media (max-width: 640px) {
	.ca-wrap {
		padding: 0 6vw;
	}
}

/* ----- shared type ----- */

.ca-eyebrow {
	font-family: 'Inter', 'Tajawal', sans-serif;
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 12px !important;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ca-eyebrow::before {
	content: '';
	width: 18px;
	height: 1px;
	background: var(--blue);
}

.ca-title {
	font-family: 'Tajawal', sans-serif;
	font-size: clamp(28px, 3.6vw, 44px);
	font-weight: 800;
	color: var(--royal-dp);
	letter-spacing: -.01em;
	line-height: 1.15;
}

.ca-sub {
	font-size: 15px;
	color: var(--muted);
	margin-top: 14px !important;
	max-width: 600px;
	line-height: 1.8;
}

.ca-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--paper-tint);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding-block: 6px;
	padding-inline: 14px 10px;
	margin-bottom: 16px;
}

.ca-badge svg {
	display: block;
}

.ca-badge span {
	font-family: 'Inter', 'Tajawal', sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: var(--royal-dp);
}

.ca-optional {
	color: var(--hint);
	font-weight: 400;
}

.ca-error {
	font-size: 11px;
	color: var(--danger);
}

.ca-error:empty {
	display: none;
}

.ca-error--block {
	font-size: 13px;
	font-weight: 500;
	margin-top: 16px !important;
}

.ca-error--consent {
	margin: 8px 0 0 !important;
	margin-inline-start: 28px !important;
}

/* ----- how it works / clothesline ----- */

.ca-howworks {
	background: var(--paper);
	padding: 100px 0 70px;
}

.ca-line {
	position: relative;
	margin-top: 70px;
	padding-bottom: 10px;
}

.ca-line::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: repeating-linear-gradient(90deg, #B9D8ED 0 10px, transparent 10px 16px);
	z-index: 0;
}

.ca-slots {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	position: relative;
	z-index: 1;
}

.ca-slot {
	margin-top: 20px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 10px 10px 14px;
	box-shadow: 0 10px 24px rgba(18, 60, 148, .09);
	position: relative;
	transition: transform .25s ease, box-shadow .25s ease;
}

.ca-slot:nth-child(1) { transform: rotate(-4deg); }
.ca-slot:nth-child(2) { transform: rotate(2.5deg); }
.ca-slot:nth-child(3) { transform: rotate(-2deg); }
.ca-slot:nth-child(4) { transform: rotate(3.5deg); }
.ca-slot:nth-child(5) { transform: rotate(-3deg); }

.ca-slot:hover,
.ca-slot:focus-within {
	transform: translateY(-6px) rotate(0deg);
	box-shadow: 0 18px 32px rgba(18, 60, 148, .16);
}

/* Clothes peg holding the card to the line. */
.ca-peg {
	position: absolute;
	top: -21px;
	left: 50%;
	width: 10px;
	height: 24px;
	transform: translateX(-50%);
	background: var(--blue);
	border-radius: 3px;
	box-shadow: 0 3px 8px rgba(18, 60, 148, .22);
}

.ca-tag {
	position: absolute;
	top: -14px;
	inset-inline-start: -8px; /* start corner: right in Arabic, left in English */
	z-index: 3;
}

.ca-tag svg {
	display: block;
	filter: drop-shadow(0 3px 6px rgba(18, 60, 148, .28));
}

.ca-tag text {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 700;
	fill: #fff;
}

.ca-frame {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--paper-tint);
	border: 1px dashed #B9D8ED;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	margin: 0;
}

.ca-frame:focus-within {
	outline: 3px solid rgba(27, 110, 245, .45);
	outline-offset: 3px;
}

.ca-frame__icon {
	display: block;
}

.ca-frame__cta {
	font-family: 'Tajawal', sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	padding-inline: 8px;
	color: var(--hint);
}

.ca-slot__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3px;
}

.ca-slot[data-has-image] .ca-frame__icon,
.ca-slot[data-has-image] .ca-frame__cta {
	visibility: hidden;
}

/* The whole frame is the tap target; the input covers it invisibly. */
.ca-file {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 4;
}

.ca-file:disabled {
	cursor: progress;
}

.ca-check {
	position: absolute;
	bottom: 8px;
	inset-inline-start: 8px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--green);
	display: none;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	z-index: 2;
}

.ca-slot[data-state="done"] .ca-check {
	display: flex;
}

.ca-slot[data-state="done"] .ca-frame {
	border-style: solid;
	border-color: var(--green);
}

.ca-slot[data-state="error"] .ca-frame {
	border-style: solid;
	border-color: var(--danger);
}

.ca-slot[data-state="uploading"] .ca-frame::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(244, 250, 254, .7);
	z-index: 1;
}

.ca-slot__label {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--royal-dp);
	text-align: center;
	margin-top: 10px !important;
	line-height: 1.4;
}

.ca-slot__sub {
	font-family: 'Inter', sans-serif;
	font-size: 9px;
	color: var(--muted);
	text-align: center;
	margin-top: 3px !important;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.ca-slot__status {
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
	margin-top: 6px !important;
	color: var(--muted);
}

.ca-slot__status:empty {
	display: none;
}

.ca-slot[data-state="done"] .ca-slot__status {
	color: var(--green);
}

.ca-slot[data-state="error"] .ca-slot__status {
	color: var(--danger);
}

.ca-remove {
	display: block;
	margin: 6px auto 0;
	padding: 4px 10px;
	min-height: 32px;
	border: 0;
	background: none;
	color: var(--muted);
	font-family: 'Tajawal', sans-serif;
	font-size: 12px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.ca-remove:hover {
	color: var(--danger);
}

.ca-retry {
	display: block;
	margin: 6px auto 0;
	padding: 6px 12px;
	min-height: 36px;
	border: 1px solid var(--blue);
	border-radius: 6px;
	background: #fff;
	color: var(--blue);
	font-family: 'Tajawal', sans-serif;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.ca-retry:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

.ca-remove:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
	border-radius: 4px;
}

.ca-progress {
	margin-top: 48px;
	background: var(--paper-tint);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 26px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.ca-progress__track {
	flex: 1;
	height: 8px;
	background: #DCEBF8;
	border-radius: 6px;
	overflow: hidden;
}

.ca-progress__fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--blue), var(--sky-deep));
	border-radius: 6px;
	transition: width .5s cubic-bezier(.3, .8, .3, 1);
}

.ca-progress__text {
	font-family: 'Inter', 'Tajawal', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--royal-dp);
	white-space: nowrap;
}

.ca-progress__text span {
	color: var(--blue);
}

.ca-turnstile {
	margin-top: 16px;
	display: flex;
	justify-content: center;
}

.ca-turnstile:empty {
	display: none;
}

/* ----- registration card ----- */

.ca-enter {
	background: var(--paper-tint);
	padding: 100px 0;
}

.ca-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 44px;
	max-width: 640px;
	margin: 0 auto;
	box-shadow: 0 20px 50px rgba(18, 60, 148, .08);
}

.ca-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 36px;
}

.ca-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ca-field label {
	font-family: 'Inter', 'Tajawal', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: var(--muted);
	letter-spacing: .02em;
}

.ca-field input,
.ca-field select {
	width: 100%;
	min-height: 48px;
	background: var(--paper-tint);
	border: 1.5px solid var(--line);
	border-radius: 8px;
	padding: 13px 14px;
	color: var(--ink);
	font-family: 'Tajawal', sans-serif;
	font-size: 16px; /* 16px stops iOS zooming into the field */
	outline: none;
	transition: border-color .2s, background .2s;
}

/* Numbers and emails are typed left-to-right but sit flush with the Arabic labels. */
.carmel-activation[dir="rtl"] .ca-field input[dir="ltr"] {
	text-align: right;
}

.ca-field input::placeholder {
	color: var(--hint);
}

.ca-field input:focus,
.ca-field select:focus {
	border-color: var(--blue);
	background: #fff;
}

.ca-field [aria-invalid="true"] {
	border-color: var(--danger);
}

.ca-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 22px;
}

.ca-consent input {
	margin: 3px 0 0;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--blue);
}

.ca-consent input[aria-invalid="true"] {
	outline: 2px solid var(--danger);
	outline-offset: 2px;
}

.ca-consent label {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.7;
}

.ca-consent a {
	color: var(--blue);
	font-weight: 700;
}

.ca-submit {
	width: 100%;
	margin-top: 26px;
	border: 0;
	background: var(--blue);
	color: #fff;
	font-family: 'Tajawal', sans-serif;
	font-weight: 800;
	font-size: 16px;
	padding: 16px;
	border-radius: 9px;
	cursor: pointer;
	transition: transform .18s, opacity .18s;
	box-shadow: 0 12px 26px rgba(27, 110, 245, .26);
}

.ca-submit:hover:not(:disabled) {
	transform: translateY(-2px);
}

.ca-submit:focus-visible {
	outline: 3px solid rgba(27, 110, 245, .45);
	outline-offset: 3px;
}

.ca-submit:disabled {
	opacity: .6;
	cursor: progress;
}

.ca-note {
	font-size: 12px;
	color: var(--hint);
	text-align: center;
	margin-top: 16px !important;
	line-height: 1.7;
}

.ca-dates {
	font-size: 12px;
	font-weight: 600;
	color: var(--royal, #123C94);
	text-align: center;
	margin-top: 10px !important;
	padding-top: 10px;
	border-top: 1px solid rgba(18, 60, 148, .12);
	line-height: 1.7;
}

.ca-success {
	text-align: center;
	padding: 20px 0;
	outline: none;
}

.ca-success__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(22, 163, 74, .1);
	border: 1.5px solid var(--green);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 22px;
	font-size: 28px;
	color: var(--green);
}

.ca-success__title {
	font-size: 24px;
	font-weight: 800;
	color: var(--royal-dp);
	margin-bottom: 10px !important;
}

.ca-success__sub {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.8;
	max-width: 420px;
	margin: 0 auto !important;
}

.ca-success__sub strong {
	color: var(--blue);
}

.ca-success__ref {
	display: inline-block;
	margin-top: 20px !important;
	padding: 8px 16px;
	border-radius: 20px;
	background: var(--paper-tint);
	border: 1px solid var(--line);
	font-size: 14px;
	font-weight: 700;
	color: var(--royal-dp);
}

.ca-state {
	text-align: center;
}

.ca-state__title {
	font-size: clamp(22px, 2.8vw, 32px);
	font-weight: 800;
	color: var(--royal-dp);
	margin-bottom: 10px !important;
}

.ca-state__text {
	font-size: 15px;
	color: var(--muted);
}

.ca-state__text a {
	color: var(--blue);
}

/* ----- responsive (breakpoints from the design) ----- */

@media (max-width: 900px) {
	.ca-slots {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 28px;
	}

	.ca-line::before {
		display: none;
	}

	.ca-grid {
		grid-template-columns: 1fr;
	}
}

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

	.ca-card {
		padding: 28px 22px;
	}

	.ca-howworks,
	.ca-enter {
		padding: 72px 0;
	}

	.ca-progress {
		padding: 16px 18px;
		gap: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ca-slot,
	.ca-progress__fill,
	.ca-submit {
		transition: none;
	}

	.ca-slot:hover,
	.ca-slot:focus-within {
		transform: none;
	}
}