/**
 * Nile Slide-ins — frontend styles.
 *
 * Site root: html { font-size: 1px } → Nrem === Npx.
 * Same layout for all designs; color/font variants only.
 * Orange minimize tab matches XD half-pill handle (size/placement).
 */

.nile-slidein,
.nile-slidein * {
	font-family: "Inter", sans-serif !important;
	box-sizing: border-box;
}

.nile-slidein {
	/* XD orange handle (1rem === 1px); inset into card padding when open */
	--nile-slidein-rail-w: 12rem;
	--nile-slidein-rail-h: 40rem;
	--nile-slidein-radius: 12rem;
	--nile-slidein-gap-bottom: 24rem; /* keep bottom spacing */
	--nile-slidein-pad: 14rem;
	--nile-slidein-orange: #f65a27;
	--nile-slidein-peek: 2%;
	position: fixed;
	z-index: 999990;
	width: min(400rem, 100vw);
	max-width: 400rem;
	pointer-events: none;
	opacity: 0;
	transform: translateY(14rem);
	transition: opacity 0.25s ease, transform 0.3s ease;
	overflow: visible;
}

.nile-slidein.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/*
 * Flush to left/right viewport edge (0 gap).
 * Bottom placements keep bottom spacing.
 * Arrow on the INNER side, inset into the card padding.
 * Minimized: slide mostly off-screen, leave a 2% peek.
 */
.nile-slidein--right-bottom {
	right: 0;
	bottom: var(--nile-slidein-gap-bottom);
}

.nile-slidein--left-bottom {
	left: 0;
	bottom: var(--nile-slidein-gap-bottom);
}

.nile-slidein--right-center {
	right: 0;
	top: 50%;
	transform: translateY(calc(-50% + 14rem));
}

.nile-slidein--right-center.is-visible {
	transform: translateY(-50%);
}

.nile-slidein--left-center {
	left: 0;
	top: 50%;
	transform: translateY(calc(-50% + 14rem));
}

.nile-slidein--left-center.is-visible {
	transform: translateY(-50%);
}

.nile-slidein__panel {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.nile-slidein__toggle {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: var(--nile-slidein-rail-w);
	height: var(--nile-slidein-rail-h);
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--nile-slidein-orange) !important;
	color: #ffffff !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	line-height: 0;
	border-radius: 8rem;
}

/* Right-docked: sit in LEFT padding strip inside the card */
.nile-slidein--right-bottom:not(.is-minimized) .nile-slidein__toggle,
.nile-slidein--right-center:not(.is-minimized) .nile-slidein__toggle {
	left: 1rem;
	right: auto;
	transform: translateY(-50%);
}

/* Left-docked: sit in RIGHT padding strip inside the card */
.nile-slidein--left-bottom:not(.is-minimized) .nile-slidein__toggle,
.nile-slidein--left-center:not(.is-minimized) .nile-slidein__toggle {
	right: 1rem;
	left: auto;
	transform: translateY(-50%);
}

.nile-slidein__toggle:hover {
	background: #ee4a59 !important;
}

.nile-slidein__toggle-icon {
	display: block;
	width: 5rem;
	height: 9rem;
	flex-shrink: 0;
}

.nile-slidein__toggle-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * Open: chevron points into the card.
 * Right-docked (tab on left) → > ; left-docked (tab on right) → <
 */
.nile-slidein--right-bottom:not(.is-minimized) .nile-slidein__toggle-icon,
.nile-slidein--right-center:not(.is-minimized) .nile-slidein__toggle-icon {
	transform: none;
}

.nile-slidein--left-bottom:not(.is-minimized) .nile-slidein__toggle-icon,
.nile-slidein--left-center:not(.is-minimized) .nile-slidein__toggle-icon {
	transform: scaleX(-1);
}

/*
 * Minimized: keep card in DOM, slide 98% off-screen so ~2% peeks.
 * Arrow stays on the peeking (inner) edge so it remains clickable.
 */
.nile-slidein.is-minimized .nile-slidein__panel {
	/* peek strip is clickable to expand; content CTAs stay inert while collapsed */
	pointer-events: auto;
	cursor: pointer;
}

.nile-slidein.is-minimized .nile-slidein__content {
	pointer-events: none;
}

.nile-slidein.is-minimized .nile-slidein__toggle {
	pointer-events: auto;
	box-shadow: 0 4rem 14rem rgba(246, 90, 39, 0.35);
}

.nile-slidein.is-minimized.nile-slidein--right-bottom {
	right: 0 !important;
	left: auto !important;
	/* 2% card peek + full arrow stay on-screen */
	transform: translateX(calc(100% - var(--nile-slidein-peek) - var(--nile-slidein-rail-w)));
}

.nile-slidein.is-minimized.nile-slidein--right-center {
	right: 0 !important;
	left: auto !important;
	transform: translate(
		calc(100% - var(--nile-slidein-peek) - var(--nile-slidein-rail-w)),
		-50%
	);
}

.nile-slidein.is-minimized.nile-slidein--left-bottom {
	left: 0 !important;
	right: auto !important;
	transform: translateX(calc(-100% + var(--nile-slidein-peek) + var(--nile-slidein-rail-w)));
}

.nile-slidein.is-minimized.nile-slidein--left-center {
	left: 0 !important;
	right: auto !important;
	transform: translate(
		calc(-100% + var(--nile-slidein-peek) + var(--nile-slidein-rail-w)),
		-50%
	);
}

.nile-slidein.is-minimized.nile-slidein--right-bottom .nile-slidein__toggle,
.nile-slidein.is-minimized.nile-slidein--right-center .nile-slidein__toggle {
	left: 0;
	right: auto;
	transform: translateY(-50%);
	border-radius: 8rem 0 0 8rem;
}

.nile-slidein.is-minimized.nile-slidein--left-bottom .nile-slidein__toggle,
.nile-slidein.is-minimized.nile-slidein--left-center .nile-slidein__toggle {
	right: 0;
	left: auto;
	transform: translateY(-50%);
	border-radius: 0 8rem 8rem 0;
}

.nile-slidein.is-minimized.nile-slidein--right-bottom .nile-slidein__toggle-icon,
.nile-slidein.is-minimized.nile-slidein--right-center .nile-slidein__toggle-icon {
	transform: scaleX(-1); /* < expand */
}

.nile-slidein.is-minimized.nile-slidein--left-bottom .nile-slidein__toggle-icon,
.nile-slidein.is-minimized.nile-slidein--left-center .nile-slidein__toggle-icon {
	transform: none; /* > expand */
}

.nile-slidein__content {
	display: flex;
	align-items: stretch;
	gap: 20rem;
	padding: 20rem;
}

.nile-slidein__media {
	flex: 0 0 118rem;
	width: 118rem;
	align-self: stretch;
	border-radius: 8rem;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nile-slidein__media picture {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.nile-slidein__media img {
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.nile-slidein__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.nile-slidein__label {
	display: flex;
	align-items: center;
	gap: 8rem;
	margin: 0 0 5rem;
	font-size: 10rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
}

/* XD: 3px vertical accent before post type */
.nile-slidein__label::before {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 3rem;
	height: 12rem;
	background: #ff6600;
	border-radius: 1rem;
}

.nile-slidein h3.nile-slidein__title {
	margin: 0 0 10rem !important;
	padding: 0 0 5rem !important;
	font-size: 18rem !important;
	line-height: 1.4em !important;
	font-weight: 500 !important;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.nile-slidein__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8rem;
	margin-top: auto;
	padding: 0;
}

.nile-slidein__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 7rem 14rem;
	border-radius: 999rem;
	font-size: 12rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}

.nile-slidein__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 7rem 14rem;
	border: 0 !important;
	border-radius: 999rem;
	font-size: 12rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	white-space: nowrap;
	flex-shrink: 0;
}

.nile-slidein__cta:hover {
	opacity: 0.92;
	text-decoration: none !important;
}

/* =========================================================================
 * design1 — blue gradient (360deg / bottom → top)
 * ========================================================================= */
.nile-slidein--design1 .nile-slidein__panel {
	background: transparent linear-gradient(360deg, #0e4eaf 0%, #2070e1 52%, #579ef4 100%) 0% 0% no-repeat padding-box !important;
	box-shadow: 0 14rem 40rem rgba(0, 30, 93, 0.35), 0 4rem 10rem rgba(0, 30, 93, 0.2) !important;
	border: 0 !important;
	opacity: 1;
}

.nile-slidein--design1.nile-slidein--left-bottom .nile-slidein__panel,
.nile-slidein--design1.nile-slidein--left-center .nile-slidein__panel {
	border-radius: 0 14rem 14rem 0 !important;
}

.nile-slidein--design1.nile-slidein--right-bottom .nile-slidein__panel,
.nile-slidein--design1.nile-slidein--right-center .nile-slidein__panel {
	border-radius: 14rem 0 0 14rem !important;
}

.nile-slidein--design1 .nile-slidein__media {
	background: rgba(255, 255, 255, 0.12) !important;
}

.nile-slidein--design1 .nile-slidein__label {
	color: #ffffff !important;
}

.nile-slidein--design1 h3.nile-slidein__title {
	color: #ffffff !important;
}

.nile-slidein--design1 .nile-slidein__close {
	background: transparent !important;
	border: 1rem solid #ffffff !important;
	color: #ffffff !important;
}

.nile-slidein--design1 .nile-slidein__close:hover {
	background: #ffffff !important;
	color: #0e4eaf !important;
}

.nile-slidein--design1 .nile-slidein__cta {
	background: linear-gradient(73deg, #ee4a59 0%, #ff6600 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 3rem 10rem rgba(255, 102, 0, 0.24) !important;
}

/* =========================================================================
 * design2 — blue gradient (180deg / top → bottom)
 * ========================================================================= */
.nile-slidein--design2 .nile-slidein__panel {
	background: transparent linear-gradient(180deg, #0e4eaf 0%, #2070e1 52%, #579ef4 100%) 0% 0% no-repeat padding-box !important;
	box-shadow: 0 14rem 40rem rgba(0, 30, 93, 0.35), 0 4rem 10rem rgba(0, 30, 93, 0.2) !important;
	border: 0 !important;
	opacity: 1;
}

.nile-slidein--design2.nile-slidein--left-bottom .nile-slidein__panel,
.nile-slidein--design2.nile-slidein--left-center .nile-slidein__panel {
	border-radius: 0 14rem 14rem 0 !important;
}

.nile-slidein--design2.nile-slidein--right-bottom .nile-slidein__panel,
.nile-slidein--design2.nile-slidein--right-center .nile-slidein__panel {
	border-radius: 14rem 0 0 14rem !important;
}

.nile-slidein--design2 .nile-slidein__media {
	background: rgba(255, 255, 255, 0.12) !important;
}

.nile-slidein--design2 .nile-slidein__label {
	color: #ffffff !important;
}

.nile-slidein--design2 h3.nile-slidein__title {
	color: #ffffff !important;
}

.nile-slidein--design2 .nile-slidein__close {
	background: transparent !important;
	border: 1rem solid #ffffff !important;
	color: #ffffff !important;
}

.nile-slidein--design2 .nile-slidein__close:hover {
	background: #ffffff !important;
	color: #0e4eaf !important;
}

.nile-slidein--design2 .nile-slidein__cta {
	background: linear-gradient(73deg, #ee4a59 0%, #ff6600 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 3rem 12rem rgba(255, 102, 0, 0.35) !important;
}

/* =========================================================================
 * design3 — light ice blue (#EFF6FF)
 * ========================================================================= */
.nile-slidein--design3 .nile-slidein__panel {
	background: #eff6ff 0% 0% no-repeat padding-box !important;
	box-shadow: 0 14rem 40rem rgba(0, 30, 93, 0.35), 0 4rem 10rem rgba(0, 30, 93, 0.2) !important;
	border: 1rem solid #0e4eaf !important;
	opacity: 1;
}

.nile-slidein--design3.nile-slidein--left-bottom .nile-slidein__panel,
.nile-slidein--design3.nile-slidein--left-center .nile-slidein__panel {
	border-radius: 0 14rem 14rem 0 !important;
	border-left: 0 !important;
	border-right-width: 4rem !important;
}

.nile-slidein--design3.nile-slidein--right-bottom .nile-slidein__panel,
.nile-slidein--design3.nile-slidein--right-center .nile-slidein__panel {
	border-radius: 14rem 0 0 14rem !important;
	border-right: 0 !important;
	border-left-width: 4rem !important;
}

.nile-slidein--design3 .nile-slidein__media {
	background: #e0ecfa !important;
}

.nile-slidein--design3 .nile-slidein__label {
	color: #0e4eaf !important;
}

.nile-slidein--design3 h3.nile-slidein__title {
	color: #002e5d !important;
}

.nile-slidein--design3 .nile-slidein__close {
	background: #d6e8ff !important;
	border: 0 !important;
	color: #0e4eaf !important;
}

.nile-slidein--design3 .nile-slidein__close:hover {
	background: #0e4eaf !important;
	color: #ffffff !important;
}

.nile-slidein--design3 .nile-slidein__cta {
	background: linear-gradient(73deg, #ee4a59 0%, #ff6600 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 3rem 12rem rgba(255, 102, 0, 0.35) !important;
}

@media (max-width: 600px) {
	.nile-slidein:not(.is-minimized) {
		width: min(380rem, 100vw);
		max-width: 100vw;
	}

	.nile-slidein--right-bottom:not(.is-minimized),
	.nile-slidein--right-center:not(.is-minimized) {
		left: auto !important;
		right: 0 !important;
	}

	.nile-slidein--left-bottom:not(.is-minimized),
	.nile-slidein--left-center:not(.is-minimized) {
		right: auto !important;
		left: 0 !important;
	}

	.nile-slidein--left-center:not(.is-minimized),
	.nile-slidein--right-center:not(.is-minimized) {
		top: auto;
		bottom: var(--nile-slidein-gap-bottom);
		transform: translateY(14rem);
	}

	.nile-slidein--left-center.is-visible:not(.is-minimized),
	.nile-slidein--right-center.is-visible:not(.is-minimized) {
		transform: translateY(0);
	}

	.nile-slidein.is-minimized.nile-slidein--right-bottom,
	.nile-slidein.is-minimized.nile-slidein--right-center {
		left: auto !important;
		right: 0 !important;
	}

	.nile-slidein.is-minimized.nile-slidein--left-bottom,
	.nile-slidein.is-minimized.nile-slidein--left-center {
		right: auto !important;
		left: 0 !important;
	}
}