/*
 * Offer stage — "feed" (إدارة الحسابات): a phone with the brand's account
 * (components/offer-stage/skins/feed.php).
 * The offers are posts: a designed picture tile with the offer's name on it,
 * the actions row (the heart pops when a post arrives), the caption. The
 * navigation is a column of story rings. The posts turn by themselves like
 * stories (owner, 2026-10-05): the bars at the top fill while a post is
 * shown — the shared autoplay (offer-stage.js) sets --gb-play-p — and a
 * pause / play button sits on the post.
 * No invented numbers: no likes count, no followers (Scope §28).
 */

.gb-offer-stage--feed {
	--gb-offer-display: flex;
	--gb-offer-enter: gb-feed-in;
	--gb-offer-enter-time: 0.55s;
	--gb-story-ring: conic-gradient(from 210deg, var(--gb-primary), var(--gb-accent), var(--gb-primary));
}

/* ---------- Stories (tabs) ---------- */

.gb-offer-stage--feed .gb-offer-tab {
	color: var(--gb-color-navy);
}

.gb-os-story {
	display: grid;
	place-items: center;
	inline-size: 3rem;
	aspect-ratio: 1;
	border: 2.5px solid var(--gb-color-neutral-200);
	border-radius: 50%;
	background-color: var(--gb-bg);
	background-clip: padding-box;
	box-shadow: inset 0 0 0 3px var(--gb-bg);
	font-size: 0.8rem;
	font-weight: var(--gb-weight-bold);
	color: var(--gb-color-navy);
	font-variant-numeric: tabular-nums;
}

.gb-offer-stage--feed .gb-offer-tab:hover {
	background-color: var(--gb-bg);
}

.gb-offer-stage--feed .gb-offer-tab[aria-selected="true"] {
	font-weight: var(--gb-weight-bold);
}

/* The chosen story gets the brand's ring. */
.gb-offer-stage--feed .gb-offer-tab[aria-selected="true"] .gb-os-story {
	border-color: transparent;
	background:
		linear-gradient(var(--gb-color-navy), var(--gb-color-navy)) padding-box,
		var(--gb-story-ring) border-box;
	color: var(--gb-color-neutral-0);
}

/* ---------- The phone ---------- */

.gb-offer-stage--feed[data-gb-offer-ready] .gb-offer-stage__screen {
	justify-self: center;
	inline-size: min(100%, 22rem);
	overflow: hidden;
	border: 0.6rem solid var(--gb-color-navy);
	border-radius: 2.6rem;
	background-color: var(--gb-bg);
	box-shadow:
		0 0 0 1px rgb(12 35 66 / 0.4),
		0 2.5rem 4rem -2rem rgb(12 35 66 / 0.5);
}

/* A soft turquoise glow behind the phone. */
.gb-offer-stage--feed[data-gb-offer-ready] {
	position: relative;
	isolation: isolate;
}

.gb-offer-stage--feed[data-gb-offer-ready]::before {
	content: "";
	position: absolute;
	inset: 10% 0 10% 30%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--gb-color-turquoise-a20), transparent);
}

[dir="rtl"] .gb-offer-stage--feed[data-gb-offer-ready]::before {
	inset: 10% 30% 10% 0;
}

.gb-os-phone__status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.55rem 1.2rem 0.2rem;
	font-size: 0.72rem;
	font-weight: var(--gb-weight-bold);
	color: var(--gb-color-navy);
}

.gb-os-phone__signal {
	inline-size: 1.6rem;
	block-size: 0.6rem;
	background:
		linear-gradient(var(--gb-color-navy), var(--gb-color-navy)) 0 100% / 3px 35%,
		linear-gradient(var(--gb-color-navy), var(--gb-color-navy)) 5px 100% / 3px 60%,
		linear-gradient(var(--gb-color-navy), var(--gb-color-navy)) 10px 100% / 3px 85%,
		linear-gradient(var(--gb-color-navy), var(--gb-color-navy)) 15px 100% / 3px 100%;
	background-repeat: no-repeat;
}

/* Stories bars: one per post — done, filling (the current one), waiting. */
.gb-os-progress {
	display: flex;
	gap: 3px;
	padding: 0.35rem 0.9rem 0.15rem;
}

.gb-os-progress i {
	position: relative;
	flex: 1 1 0;
	block-size: 3px;
	overflow: hidden;
	border-radius: var(--gb-radius-pill);
	background-color: rgb(12 35 66 / 0.14);
}

/*
 * Fill = (current − this bar) + how far the current post has played,
 * kept between 0 and 1: earlier bars full, the current one growing, later
 * ones empty. Without autoplay (--gb-play-p unset) the current bar is full.
 */
.gb-os-progress i::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--gb-primary);
	transform-origin: left center;
	scale: clamp(0, calc(var(--gb-offer-i, 0) - var(--i) + var(--gb-play-p, 1)), 1) 1;
}

[dir="rtl"] .gb-os-progress i::after {
	transform-origin: right center;
}

.gb-os-phone__app {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 1rem;
	border-block-end: 1px solid var(--gb-border);
	font-size: 0.9rem;
	color: var(--gb-color-navy);
}

.gb-os-phone__avatar {
	display: grid;
	place-items: center;
	inline-size: 2.1rem;
	aspect-ratio: 1;
	padding: 2px;
	border-radius: 50%;
	background: var(--gb-story-ring, conic-gradient(var(--gb-primary), var(--gb-accent), var(--gb-primary)));
}

.gb-os-phone__mark {
	inline-size: 100%;
	block-size: 100%;
	padding: 0.3rem;
	border-radius: 50%;
	background-color: var(--gb-color-navy);
}

.gb-os-phone__more {
	margin-inline-start: auto;
	letter-spacing: 0.1em;
	color: var(--gb-text-muted);
}

.gb-os-phone__home {
	display: block;
	inline-size: 36%;
	block-size: 4px;
	margin: 0.6rem auto 0.5rem;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-color-navy);
}

/* ---------- The post (panel) ---------- */

.gb-offer-stage--feed[data-gb-offer-ready] .gb-offer {
	display: flex;
	flex-direction: column;
}

/* The picture tile: the service's own symbol on the brand's navy. */
.gb-os-post {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	overflow: hidden;
	background:
		radial-gradient(70% 60% at 70% 25%, var(--gb-color-turquoise-a35), transparent 70%),
		radial-gradient(60% 50% at 20% 85%, rgb(250 95 30 / 0.28), transparent 70%),
		linear-gradient(160deg, var(--gb-color-profile-light), var(--gb-color-navy));
	color: var(--gb-color-neutral-0);
}

/* Each post its own light (the glows move from post to post). */
.gb-offer:nth-child(4n + 2) .gb-os-post {
	background:
		radial-gradient(70% 60% at 25% 30%, var(--gb-color-turquoise-a35), transparent 70%),
		radial-gradient(60% 50% at 85% 80%, rgb(250 95 30 / 0.3), transparent 70%),
		linear-gradient(200deg, var(--gb-color-profile-light), var(--gb-color-navy));
}

.gb-offer:nth-child(4n + 3) .gb-os-post {
	background:
		radial-gradient(80% 60% at 50% 15%, rgb(250 95 30 / 0.26), transparent 70%),
		radial-gradient(70% 60% at 50% 95%, var(--gb-color-turquoise-a35), transparent 70%),
		linear-gradient(180deg, var(--gb-color-navy), var(--gb-color-profile-light));
}

.gb-offer:nth-child(4n + 4) .gb-os-post {
	background:
		radial-gradient(60% 60% at 80% 70%, var(--gb-color-turquoise-a35), transparent 70%),
		radial-gradient(50% 45% at 20% 20%, rgb(250 95 30 / 0.24), transparent 70%),
		linear-gradient(120deg, var(--gb-color-navy), var(--gb-color-profile-light));
}

/* The tile is designed like a post: the service's symbol, the offer's name, the account. */
.gb-os-post {
	grid-template-rows: auto auto;
	align-content: center;
	gap: 0.9rem;
	padding: 14% 12%;
	text-align: center;
}

.gb-os-post__icon {
	--gb-icon-size: 24%;

	inline-size: 24%;
	block-size: auto;
	aspect-ratio: 1;
	stroke-width: 1.3;
	color: var(--gb-primary);
	opacity: 0.95;
}

.gb-os-post__words {
	font-family: var(--gb-font-display);
	font-size: clamp(1.35rem, 1rem + 1.6vw, 1.9rem);
	font-weight: var(--gb-weight-bold);
	line-height: 1.25;
	color: var(--gb-color-neutral-0);
	text-wrap: balance;
	text-shadow: 0 2px 14px rgb(0 0 0 / 0.35);
}

.gb-os-post__handle {
	position: absolute;
	inset-block-end: 0.8rem;
	inset-inline: 0;
	font-size: 0.72rem;
	font-weight: var(--gb-weight-bold);
	letter-spacing: 0.02em;
	color: rgb(255 255 255 / 0.7);
}

/* The pause / play button (offer-stage.js) on the post's top corner, opposite its number. */
.gb-offer-stage--feed .gb-offer-play {
	inset-block-start: 6.2rem;
	inset-inline-end: 0.9rem;
	inline-size: 2.5rem;
	block-size: 2.5rem;
}

.gb-os-post__num {
	position: absolute;
	inset-block-start: 0.9rem;
	inset-inline-start: 1rem;
	padding: 0.15rem 0.6rem;
	border-radius: var(--gb-radius-pill);
	background-color: rgb(255 255 255 / 0.16);
	font-size: 0.8rem;
	font-weight: var(--gb-weight-bold);
	font-variant-numeric: tabular-nums;
}

.gb-os-actions {
	order: 1;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.7rem 1rem 0.2rem;
	color: var(--gb-color-navy);
}

.gb-os-actions .gb-icon {
	--gb-icon-size: 1.35rem;
}

.gb-os-actions__save {
	margin-inline-start: auto;
}

.gb-os-actions__like .gb-icon {
	color: var(--gb-accent);
	fill: var(--gb-accent);
}

.gb-offer-stage--feed[data-gb-offer-ready] .gb-offer__body {
	order: 2;
	gap: 0.2rem;
	padding: 0.3rem 1rem 0.9rem;
}

.gb-offer-stage--feed[data-gb-offer-ready] .gb-offer__number {
	display: none;
}

.gb-offer-stage--feed[data-gb-offer-ready] .gb-offer__title {
	font-size: var(--gb-step-0);
	font-weight: var(--gb-weight-bold);
}

.gb-offer-stage--feed[data-gb-offer-ready] .gb-offer__text {
	font-size: 0.92rem;
	line-height: 1.7;
}

/* ---------- Motion ---------- */

@keyframes gb-feed-in {
	0% {
		opacity: 0;
		translate: 0 2.5rem;
	}

	100% {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes gb-feed-like {
	0% {
		scale: 0;
	}

	55% {
		scale: 1.35;
	}

	100% {
		scale: 1;
	}
}

@media (prefers-reduced-motion: no-preference) {
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--feed[data-gb-switch] .gb-offer:not([hidden]) .gb-os-actions__like {
		display: inline-grid;
		animation: gb-feed-like 0.5s var(--gb-ease-out) 0.45s both;
	}
}

/* ---------- Phones ---------- */

@media (max-width: 47.99rem) {
	.gb-offer-stage--feed[data-gb-offer-ready] .gb-offer-stage__screen {
		inline-size: min(100%, 20rem);
	}

	.gb-offer-stage--feed .gb-offer-tab {
		flex-direction: column;
		gap: 0.3rem;
		inline-size: 5.5rem;
		padding-inline: 0.2rem;
		font-size: 0.75rem;
		white-space: normal;
		text-align: center;
	}

	.gb-offer-stage--feed .gb-offer-tab__name {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
}

/* ---------- Revision 4: a real post of the accounts we manage ---------- */

.gb-os-post__photo {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* The picture is the post: the drawn icon and words step aside; the number and handle stay. */
.gb-os-post--photo :is(.gb-os-post__icon, .gb-os-post__words) {
	display: none;
}

.gb-os-post--photo :is(.gb-os-post__num, .gb-os-post__handle) {
	position: relative;
	z-index: 1;
	text-shadow: 0 1px 6px rgb(0 0 0 / 0.5);
}