/**
 * Abandoned Cart — Capture Widget
 *
 * Floating card anchored to bottom-inline-end. Stacked layout with
 * a blue accent stripe at the top. Phone field is always LTR via
 * dir="ltr" on the container — phone numbers never flip.
 *
 * Uses the site's design tokens (--asi-*) so it looks native to
 * the storefront. CSS logical properties throughout for RTL.
 */

/* ── Hidden state (Lesson 3) ─────────────────────────── */

.asi-ac[hidden],
.asi-ac__error[hidden],
.asi-ac__success[hidden] {
	display: none !important;
}

/* ── Shell ────────────────────────────────────────────── */

.asi-ac {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--asi-font-family, Poppins, sans-serif);
	color: var(--wp--preset--color--contrast, #0F172A);
	animation: asi-ac-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.asi-ac__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

@keyframes asi-ac-enter {
	from { opacity: 0; }
}

.asi-ac__inner {
	animation: asi-ac-card-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes asi-ac-card-enter {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.96);
	}
}

@media (prefers-reduced-motion: reduce) {
	.asi-ac { animation: none; }
}

.asi-ac__inner {
	position: relative;
	inline-size: clamp(18rem, 90vw, 22rem);
	background: #FFFFFF;
	border-radius: var(--asi-radius, 16px);
	overflow: hidden;
	filter: drop-shadow(0 12px 40px rgba(15, 23, 42, 0.18))
	        drop-shadow(0 2px  8px rgba(15, 23, 42, 0.06));
}

/* Blue accent stripe at the top */
.asi-ac__inner::before {
	content: '';
	display: block;
	block-size: 3px;
	background: var(--asi-gradient-blue, linear-gradient(135deg, #0155B7, #013A7A));
}

/* ── Close ────────────────────────────────────────────── */

.asi-ac__close {
	position: absolute;
	inset-block-start: calc(3px + 0.625rem);
	inset-inline-end: 0.625rem;
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--accent-4, #64748B);
	cursor: pointer;
	transition: background var(--asi-transition, 200ms);
}

.asi-ac__close:hover {
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 6%, transparent);
}

/* ── Header ───────────────────────────────────────────── */

.asi-ac__header {
	padding: 1.25rem 1.25rem 0;
	text-align: center;
}

.asi-ac__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1, #0155B7) 8%, transparent);
	color: var(--wp--preset--color--accent-1, #0155B7);
	margin-block-end: 0.625rem;
}

.asi-ac__title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
}

.asi-ac__desc {
	margin: 0.1875rem 0 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-4, #64748B);
	line-height: 1.4;
}

/* ── Form ─────────────────────────────────────────────── */

.asi-ac__form {
	padding: 1rem 1.25rem 1.25rem;
}

/* Name field — optional, sits above the phone field.
   Inherits page direction (names ARE RTL in Arabic). */
.asi-ac__name {
	display: block;
	inline-size: 100%;
	box-sizing: border-box;
	border-radius: 0.625rem;
	font-size: 0.9375rem;
	font-family: inherit;
	background: transparent;
	color: var(--wp--preset--color--contrast, #0F172A);
	outline: none;
	transition: border-color var(--asi-transition, 200ms),
	            box-shadow var(--asi-transition, 200ms);
}

.asi-ac__name:focus {
	border-color: var(--wp--preset--color--accent-1, #0155B7);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent-1, #0155B7) 12%, transparent);
}

.asi-ac__name::placeholder {
	color: var(--wp--preset--color--accent-4, #64748B);
	opacity: 0.5;
}

/* Phone field — ALWAYS LTR via dir="ltr" on the container.
   The prefix sits on the LEFT in both EN and AR. */
.asi-ac__phone {
	display: flex;
	align-items: center;
	margin-block-end: 0.875rem;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 14%, transparent);
	border-radius: 0.625rem;
	overflow: hidden;
	transition: border-color var(--asi-transition, 200ms),
	            box-shadow var(--asi-transition, 200ms);
}

.asi-ac__phone:focus-within {
	border-color: var(--wp--preset--color--accent-1, #0155B7);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent-1, #0155B7) 12%, transparent);
}

.asi-ac__prefix {
	display: flex;
	align-items: center;
	padding: 0 0.625rem;
	block-size: 2.625rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--contrast, #0F172A);
	background: color-mix(in srgb, var(--wp--preset--color--accent-5, #F8FAFC) 100%, transparent);
	border-right: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 10%, transparent);
	flex-shrink: 0;
	user-select: none;
}

.asi-ac__input {
	flex: 1;
	border: none;
	outline: none;
	padding: 0 0.625rem;
	block-size: 2.625rem;
	font-size: 0.9375rem;
	font-family: inherit;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	background: transparent;
	color: var(--wp--preset--color--contrast, #0F172A);
	min-inline-size: 0;
}

.asi-ac__input::placeholder {
	color: var(--wp--preset--color--accent-4, #64748B);
	opacity: 0.5;
	letter-spacing: 0;
}

/* ── Disclaimer note ──────────────────────────────────── */

.asi-ac__note {
	margin: 0.75rem 0 0;
	font-size: 0.625rem;
	color: var(--wp--preset--color--accent-4, #64748B);
	line-height: 1.5;
	text-align: center;
	opacity: 0.8;
}

/* ── Submit ───────────────────────────────────────────── */

.asi-ac__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	inline-size: 100%;
	padding: 0.625rem 1rem;
	border: none;
	border-radius: 0.625rem;
	background: var(--asi-gradient-blue, linear-gradient(135deg, #0155B7, #013A7A));
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: transform var(--asi-transition, 200ms),
	            box-shadow var(--asi-transition, 200ms);
}

.asi-ac__submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--wp--preset--color--accent-1, #0155B7) 35%, transparent);
}

.asi-ac__submit:active {
	transform: translateY(0);
}

.asi-ac__submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.asi-ac__submit-arrow {
	transition: transform var(--asi-transition, 200ms);
}

[dir="rtl"] .asi-ac__submit-arrow {
	transform: scaleX(-1);
}

.asi-ac__submit:hover .asi-ac__submit-arrow {
	transform: translateX(2px);
}

[dir="rtl"] .asi-ac__submit:hover .asi-ac__submit-arrow {
	transform: scaleX(-1) translateX(2px);
}

/* ── Error / Success ──────────────────────────────────── */

.asi-ac__error {
	margin: 0.5rem 0 0;
	padding: 0.375rem 0.5rem;
	font-size: 0.75rem;
	line-height: 1.3;
	color: #b91c1c;
	background: #fef2f2;
	border-radius: 0.375rem;
}

.asi-ac__success {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.75rem 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-2, #72B94A);
	text-align: center;
}

/* ── Mobile ───────────────────────────────────────────── */

@media (max-width: 480px) {
	.asi-ac__inner {
		inline-size: calc(100vw - 2rem);
	}
}


/* ── Country picker ───────────────────────────────────────
   A flag + dial-code chip that opens a searchable list, matching the
   gift card product page. The chip is styled to be indistinguishable
   from the static .asi-ac__prefix on a single-country store, so both
   setups look the same apart from the caret.

   The row holding it must not clip: .asi-ac__phone sets overflow to
   hidden for its rounded corners, and the panel has to escape it. */

.asi-ac__country {
	flex-shrink: 0;
}

.asi-ac__toggle {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0;
	padding: 0 0.5rem 0 0.625rem;
	block-size: 2.625rem;
	border: 0;
	border-right: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 10%, transparent);
	border-start-start-radius: 0.5rem;
	border-end-start-radius: 0.5rem;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--contrast, #0F172A);
	background: var(--wp--preset--color--accent-5, #F8FAFC);
	cursor: pointer;
	user-select: none;
	transition: background var(--asi-transition, 200ms);
}

.asi-ac__toggle:hover {
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 6%, var(--wp--preset--color--accent-5, #F8FAFC));
}

.asi-ac__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1, #0155B7);
	outline-offset: -2px;
}

.asi-ac__flag {
	font-size: 1rem;
	line-height: 1;
}

.asi-ac__flag--img {
	display: block;
	inline-size: 20px;
	object-fit: cover;
	border-radius: 2px;
}

.asi-ac__dial {
	font-variant-numeric: tabular-nums;
}

.asi-ac__caret {
	inline-size: 0;
	block-size: 0;
	border-inline: 4px solid transparent;
	border-block-start: 5px solid currentColor;
	opacity: 0.55;
	transition: transform var(--asi-transition, 200ms);
}

.asi-ac__phone.is-open .asi-ac__caret {
	transform: rotate(180deg);
}

/* --- the list, as a sheet over the card ---
   Not a dropdown: .asi-ac__inner clips its children (rounded corners and
   the gradient stripe) and the space under the phone field is far shorter
   than the list needs, so an anchored panel was cut off after a row and a
   half. The script reparents it to .asi-ac__inner and it fills the card
   instead — nothing to clip, and it reads the same on a phone. */

/* While the sheet is up the card grows, so the list gets a usable number
   of rows instead of the height of the little form. Capped against the
   viewport so it still fits a short phone screen in landscape. */
.asi-ac__inner.is-picking {
	min-block-size: min(27rem, 80vh);
}

.asi-ac__panel {
	position: absolute;
	inset: 3px 0 0; /* clears the gradient stripe */
	z-index: 6;
	display: flex;
	flex-direction: column;
	background: #fff;
	animation: asi-ac-sheet-enter 0.18s ease-out both;
}

.asi-ac__panel[hidden] {
	display: none;
}

@keyframes asi-ac-sheet-enter {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.asi-ac__panel {
		animation: none;
	}
}

.asi-ac__panel-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 8%, transparent);
}

.asi-ac__back {
	display: grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	flex-shrink: 0;
	padding: 0 !important;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--accent-4, #64748B);
	cursor: pointer;
	transition: background var(--asi-transition, 200ms);
}

.asi-ac__back:hover {
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 6%, transparent);
}

/* The arrow has to point back the way the language reads. */
[dir="rtl"] .asi-ac__back svg {
	transform: scaleX(-1);
}

.asi-ac__panel-title {
	font-size: 0.875rem;
	font-weight: 600;
}

.asi-ac__search-wrap {
	padding: 0.5rem 0.75rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 8%, transparent);
}

.asi-ac__search {
	inline-size: 100%;
	box-sizing: border-box;
	padding: 0.4rem 0.55rem;
	font: inherit;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--contrast, #0F172A);
	background: #fff;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 14%, transparent);
	border-radius: 0.5rem;
	outline: none;
}

.asi-ac__search:focus {
	border-color: var(--wp--preset--color--accent-1, #0155B7);
}

/* Takes whatever height the card has left, so the list is as long as it
   can be without ever pushing past the card. */
.asi-ac__list {
	flex: 1;
	min-block-size: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.asi-ac__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.75rem;
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast, #0F172A);
	cursor: pointer;
}

.asi-ac__option[hidden] {
	display: none;
}

.asi-ac__option:hover {
	background: var(--wp--preset--color--accent-5, #F8FAFC);
}

.asi-ac__option.is-selected {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1, #0155B7) 10%, transparent);
	font-weight: 600;
}

/* The shop's own markets sit at the top; a hairline closes the group. */
.asi-ac__option.is-priority + .asi-ac__option:not(.is-priority) {
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 10%, transparent);
}

.asi-ac__name {
	flex: 1;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.asi-ac__option-dial {
	flex-shrink: 0;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent-4, #64748B);
	direction: ltr;
}

.asi-ac__empty {
	padding: 0.9rem 0.625rem;
	font-size: 0.8125rem;
	text-align: center;
	color: var(--wp--preset--color--accent-4, #64748B);
}

.asi-ac__empty[hidden] {
	display: none;
}

/* --- inline validation --- */

.asi-ac__phone.has-error {
	border-color: #dc2626;
}

.asi-ac__phone.has-error:focus-within {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

.asi-ac__field-error {
	margin: -0.5rem 0 0.875rem;
	font-size: 0.75rem;
	line-height: 1.35;
	color: #b91c1c;
	text-align: start;
}

.asi-ac__field-error[hidden] {
	display: none;
}