/*
 * The WhatsApp button and its card.
 *
 * Fixed to a bottom corner: right on English pages, left on Arabic ones. The
 * card grows up out of the button, so the eye goes from the tap to the answer
 * without looking anywhere else.
 */

.diwan-wa {
	--diwan-wa-color: #25d366;
	/* The size is set on the WhatsApp settings screen and written onto the
	   button as these two; the numbers here are what it is until it is. */
	--diwan-wa-size: var(--diwan-wa-size-desktop, 60px);
	--diwan-wa-ink: #fff;

	/* --diwan-wa-lift is room something else at the foot of the screen asks
	   for — the basket's bar on a phone — added to the button's own distance
	   rather than replacing it, which the button's settings would overrule. */
	bottom: calc(var(--diwan-wa-bottom, 24px) + var(--diwan-wa-lift, 0px) + env(safe-area-inset-bottom, 0px));
	font-family: "Loew", "Loew Font Family", "IBM Plex Sans Arabic", "Cairo", system-ui, sans-serif;
	position: fixed;
	z-index: 9990;
}

.diwan-wa--right {
	right: var(--diwan-wa-side, 24px);
}

.diwan-wa--left {
	left: var(--diwan-wa-side, 24px);
}

.diwan-wa.is-offline-hidden {
	display: none;
}

/* ------------------------------------------------------------ the button */

.diwan-wa__button {
	align-items: center;
	background: var(--diwan-wa-color);
	border-radius: 50%;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.12);
	color: var(--diwan-wa-ink);
	display: flex;
	block-size: var(--diwan-wa-size);
	inline-size: var(--diwan-wa-size);
	justify-content: center;
	position: relative;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.diwan-wa__button:hover,
.diwan-wa__button:focus-visible {
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22), 0 3px 6px rgba(0, 0, 0, 0.14);
	color: var(--diwan-wa-ink);
	transform: translateY(-2px) scale(1.04);
}

.diwan-wa__button:focus-visible {
	outline: 3px solid #fff;
	box-shadow: 0 0 0 6px var(--diwan-wa-color), 0 10px 26px rgba(0, 0, 0, 0.22);
}

.diwan-wa__button:active {
	transform: scale(0.96);
}

.diwan-wa__glyph {
	display: flex;
	inset: 0;
	align-items: center;
	justify-content: center;
	position: absolute;
	transition: opacity 0.2s ease, transform 0.25s ease;
}

/* The mark at about half the button whatever size the button is set to:
   drawn at a fixed 30 it filled a 32-pixel button edge to edge. */
.diwan-wa__glyph svg {
	block-size: calc(var(--diwan-wa-size) * 0.56);
	inline-size: calc(var(--diwan-wa-size) * 0.56);
	stroke-width: 1.7;
}

.diwan-wa__glyph--close {
	opacity: 0;
	transform: rotate(-90deg) scale(0.6);
}

.diwan-wa.is-open .diwan-wa__glyph:not(.diwan-wa__glyph--close) {
	opacity: 0;
	transform: rotate(90deg) scale(0.6);
}

.diwan-wa.is-open .diwan-wa__glyph--close {
	opacity: 1;
	transform: none;
}

/* A soft ring, a few times, once the page has settled. */
.diwan-wa.has-pulse .diwan-wa__button::before {
	animation: diwan-wa-pulse 2s ease-out 1.5s 3;
	border: 2px solid var(--diwan-wa-color);
	border-radius: 50%;
	content: "";
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

@keyframes diwan-wa-pulse {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1.6);
	}
}

.diwan-wa.is-open .diwan-wa__button::before,
.diwan-wa.was-used .diwan-wa__button::before {
	animation: none;
}

/* ----------------------------------------------------------- the label */

.diwan-wa__label {
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	color: #1f1f1f;
	font-size: 14px;
	font-weight: 600;
	opacity: 0;
	padding: 8px 14px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%) translateX(var(--diwan-wa-label-shift, 8px));
	transition: opacity 0.18s ease, transform 0.18s ease;
	white-space: nowrap;
}

.diwan-wa--right .diwan-wa__label {
	right: calc(var(--diwan-wa-size) + 12px);
}

.diwan-wa--left .diwan-wa__label {
	--diwan-wa-label-shift: -8px;

	left: calc(var(--diwan-wa-size) + 12px);
}

@media (hover: hover) {
	.diwan-wa:not(.is-open) .diwan-wa__button:hover + .diwan-wa__label,
	.diwan-wa:not(.is-open) .diwan-wa__button:focus-visible + .diwan-wa__label {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}

/* ------------------------------------------------------------- the card */

.diwan-wa__card {
	background: #fff;
	border-radius: 18px;
	bottom: calc(var(--diwan-wa-size) + 16px);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
	inline-size: min(360px, calc(100vw - 32px));
	overflow: hidden;
	position: absolute;
	transform-origin: bottom right;
}

.diwan-wa--right .diwan-wa__card {
	right: 0;
}

.diwan-wa--left .diwan-wa__card {
	left: 0;
	transform-origin: bottom left;
}

.diwan-wa__card[hidden] {
	display: none;
}

.diwan-wa__card.is-entering {
	animation: diwan-wa-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.diwan-wa__card.is-leaving {
	animation: diwan-wa-out 0.16s ease-in forwards;
}

@keyframes diwan-wa-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.92);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes diwan-wa-out {
	to {
		opacity: 0;
		transform: translateY(8px) scale(0.96);
	}
}

.diwan-wa__head {
	align-items: center;
	background: #075e54;
	color: #fff;
	display: flex;
	gap: 12px;
	padding: 16px 14px 16px 16px;
}

.diwan-wa__avatar {
	align-items: center;
	background: #f9f6db;
	border-radius: 50%;
	display: flex;
	flex: none;
	block-size: 46px;
	inline-size: 46px;
	justify-content: center;
	position: relative;
}

.diwan-wa__avatar img {
	block-size: auto !important;
	inline-size: 34px !important;
	max-inline-size: none;
}

.diwan-wa__dot {
	background: #25d366;
	border: 2px solid #075e54;
	border-radius: 50%;
	block-size: 12px;
	bottom: 1px;
	inline-size: 12px;
	inset-inline-end: 1px;
	position: absolute;
}

.diwan-wa.is-offline .diwan-wa__dot {
	background: #9aa0a6;
}

.diwan-wa__who {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.diwan-wa__name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

.diwan-wa__status {
	font-size: 12.5px;
	line-height: 1.35;
	opacity: 0.85;
}

.diwan-wa__close {
	align-items: center;
	align-self: flex-start;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	flex: none;
	block-size: 32px;
	inline-size: 32px;
	justify-content: center;
	padding: 0;
	transition: background-color 0.16s ease;
}

.diwan-wa__close:hover,
.diwan-wa__close:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	outline: none;
}

/* The chat itself: the pale patterned ground WhatsApp readers know. */
.diwan-wa__body {
	background-color: #efeae2;
	background-image: radial-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px);
	background-size: 14px 14px;
	padding: 20px 16px 22px;
}

.diwan-wa__bubble {
	animation: diwan-wa-bubble 0.3s ease 0.12s both;
	background: #fff;
	border-radius: 0 12px 12px 12px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
	color: #111b21;
	font-size: 14.5px;
	line-height: 1.55;
	margin: 0;
	max-inline-size: 88%;
	padding: 10px 12px 18px;
	position: relative;
}

[dir="rtl"] .diwan-wa__bubble {
	border-radius: 12px 0 12px 12px;
}

.diwan-wa__bubble::before {
	border-block-start: 10px solid #fff;
	border-inline-start: 10px solid transparent;
	content: "";
	inset-block-start: 0;
	inset-inline-start: -9px;
	position: absolute;
}

.diwan-wa__time {
	bottom: 4px;
	color: #667781;
	font-size: 11px;
	inset-inline-end: 10px;
	position: absolute;
}

@keyframes diwan-wa-bubble {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

.diwan-wa__foot {
	padding: 14px 16px 16px;
}

.diwan-wa__start {
	align-items: center;
	background: var(--diwan-wa-color);
	border-radius: 999px;
	color: #fff;
	display: flex;
	font-size: 15px;
	font-weight: 700;
	gap: 10px;
	justify-content: center;
	padding: 13px 18px;
	text-decoration: none;
	transition: filter 0.16s ease, transform 0.16s ease;
}

.diwan-wa__start:hover,
.diwan-wa__start:focus-visible {
	color: #fff;
	filter: brightness(0.94);
	outline: none;
	transform: translateY(-1px);
}

.diwan-wa__start:focus-visible {
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--diwan-wa-color);
}

/* ------------------------------------------------------------ devices */

@media (max-width: 767px) {
	.diwan-wa {
		--diwan-wa-size: var(--diwan-wa-size-phone, 54px);

		bottom: calc(var(--diwan-wa-mobile, 16px) + var(--diwan-wa-lift, 0px) + env(safe-area-inset-bottom, 0px));
	}

	.diwan-wa--right {
		right: var(--diwan-wa-mobile, 16px);
	}

	.diwan-wa--left {
		left: var(--diwan-wa-mobile, 16px);
	}

	.diwan-wa__label {
		display: none;
	}

	/* On a phone the card spans the screen with the same margin both sides,
	   whichever corner the button is in. */
	.diwan-wa__card {
		bottom: calc(var(--diwan-wa-mobile, 16px) + var(--diwan-wa-lift, 0px) + var(--diwan-wa-size) + 12px + env(safe-area-inset-bottom, 0px));
		inline-size: auto;
		left: var(--diwan-wa-mobile, 16px);
		position: fixed;
		right: var(--diwan-wa-mobile, 16px);
	}

	.diwan-wa--right .diwan-wa__card,
	.diwan-wa--left .diwan-wa__card {
		left: var(--diwan-wa-mobile, 16px);
		right: var(--diwan-wa-mobile, 16px);
	}

	.diwan-wa__body {
		max-block-size: 40vh;
		overflow: auto;
	}

	.diwan-wa--devices-desktop {
		display: none;
	}
}

@media (min-width: 768px) {
	.diwan-wa--devices-mobile {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.diwan-wa__button,
	.diwan-wa__glyph,
	.diwan-wa__label,
	.diwan-wa__start {
		transition: none;
	}

	.diwan-wa.has-pulse .diwan-wa__button::before,
	.diwan-wa__card.is-entering,
	.diwan-wa__card.is-leaving,
	.diwan-wa__bubble {
		animation: none;
	}
}

@media print {
	.diwan-wa {
		display: none;
	}
}