/*
 * Offer stage — "artboard" (تصميم): a design app.
 * The offers are layers: the navigation is the layers panel, the chosen
 * offer sits on the artboard with its selection box, handles and size label
 * (a social post, a print page, a slide…), and the cursor glides to it.
 * Its words are then typed in, as if a designer were writing them (owner,
 * 2026-10-05) — the typing is assets/js/components/offer-stage/artboard.js,
 * its look is the last section of this file.
 */

.gb-offer-stage--artboard {
	--gb-art-canvas: #E9EDF1;
	--gb-offer-enter: gb-art-in;
	--gb-offer-enter-time: 0.55s;
}

/* ---------- Layers panel (tabs) ---------- */

.gb-offer-stage--artboard[data-gb-offer-ready] .gb-offer-stage__nav {
	align-self: stretch;
	padding: var(--gb-space-2xs);
	border: 1px solid var(--gb-border);
	border-radius: var(--gb-radius-l);
	background-color: var(--gb-bg);
	box-shadow: 0 1rem 2rem -1.5rem rgb(12 35 66 / 0.25);
}

.gb-os-panel-head {
	display: block;
	padding: var(--gb-space-2xs) var(--gb-space-xs);
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-bold);
	color: var(--gb-text-muted);
}

.gb-offer-stage--artboard .gb-offer-stage__nav-head {
	margin-block-end: var(--gb-space-3xs);
	border-block-end: 1px solid var(--gb-border);
}

.gb-offer-stage--artboard .gb-offer-tab {
	position: relative;
	color: var(--gb-color-navy);
}

.gb-offer-stage--artboard .gb-offer-tab .gb-icon {
	--gb-icon-size: 1.05rem;
}

.gb-offer-stage--artboard .gb-offer-tab__mark {
	color: var(--gb-text-muted);
}

.gb-offer-stage--artboard .gb-offer-tab__end {
	color: var(--gb-color-neutral-300);
}

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

.gb-offer-stage--artboard .gb-offer-tab[aria-selected="true"] {
	background-color: var(--gb-color-turquoise-a20);
	font-weight: var(--gb-weight-bold);
}

.gb-offer-stage--artboard .gb-offer-tab[aria-selected="true"] :is(.gb-offer-tab__mark, .gb-offer-tab__end) {
	color: var(--gb-color-navy);
}

/* The selected layer's edge, as design apps mark it. */
.gb-offer-stage--artboard .gb-offer-tab[aria-selected="true"]::before {
	content: "";
	position: absolute;
	inset-block: 0.4rem;
	inset-inline-start: 0;
	inline-size: 3px;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-primary);
}

/* ---------- The app window ---------- */

.gb-offer-stage--artboard[data-gb-offer-ready] .gb-offer-stage__screen {
	overflow: hidden;
	border: 1px solid var(--gb-border);
	border-radius: var(--gb-radius-l);
	background-color: var(--gb-art-canvas);
	box-shadow: 0 2rem 4rem -2.5rem rgb(12 35 66 / 0.45);
}

/* Toolbar. */
.gb-os-tools {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.55rem 0.75rem;
	border-block-end: 1px solid var(--gb-border);
	background-color: var(--gb-bg);
	color: var(--gb-color-navy);
}

.gb-os-tools__tool {
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 0.45rem;
}

.gb-os-tools__tool .gb-icon {
	--gb-icon-size: 1.05rem;
}

.gb-os-tools__tool:first-child {
	background-color: var(--gb-color-navy);
	color: var(--gb-color-neutral-0);
}

.gb-os-tools__zoom {
	margin-inline-start: auto;
	font-size: 0.75rem;
	color: var(--gb-text-muted);
}

/* The canvas: dot grid, rulers along two edges. */
.gb-offer-stage--artboard[data-gb-offer-ready] .gb-offer-stage__view {
	min-block-size: clamp(20rem, 32vw, 26rem);
	place-items: center;
	padding: 3rem 2.5rem 3.25rem;
	background-image: radial-gradient(rgb(12 35 66 / 0.14) 1px, transparent 1.2px);
	background-size: 16px 16px;
}

.gb-os-rulers::before,
.gb-os-rulers::after {
	content: "";
	position: absolute;
	background-color: var(--gb-bg);
}

/* Top ruler. */
.gb-os-rulers::before {
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 18px;
	border-block-end: 1px solid var(--gb-border);
	background-image:
		repeating-linear-gradient(to right, rgb(12 35 66 / 0.35) 0 1px, transparent 1px 50px),
		repeating-linear-gradient(to right, rgb(12 35 66 / 0.18) 0 1px, transparent 1px 10px);
	background-size: 100% 9px, 100% 5px;
	background-position: 0 100%, 0 100%;
	background-repeat: no-repeat;
}

/* Side ruler, at the reading start. */
.gb-os-rulers::after {
	inset-block: 18px 0;
	inset-inline-start: 0;
	inline-size: 18px;
	border-inline-end: 1px solid var(--gb-border);
	background-image:
		repeating-linear-gradient(to bottom, rgb(12 35 66 / 0.35) 0 1px, transparent 1px 50px),
		repeating-linear-gradient(to bottom, rgb(12 35 66 / 0.18) 0 1px, transparent 1px 10px);
	background-size: 9px 100%, 5px 100%;
	background-repeat: no-repeat;
}

[dir="rtl"] .gb-os-rulers::after {
	background-position: 100% 0, 100% 0;
}

/* The cursor rests at the selection's corner. */
.gb-os-cursor {
	position: absolute;
	inset-block-end: 14%;
	inset-inline-end: 18%;
	color: var(--gb-color-navy);
	filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 2px 3px rgb(12 35 66 / 0.35));
}

.gb-os-cursor .gb-icon {
	--gb-icon-size: 1.6rem;
}

[dir="rtl"] .gb-os-cursor .gb-icon {
	scale: -1 1;
}

/* ---------- The artboard (panel) ---------- */

.gb-offer-stage--artboard[data-gb-offer-ready] .gb-offer {
	position: relative;
	z-index: 1;
	inline-size: min(100%, 27rem);
	padding: var(--gb-space-m);
	background-color: var(--gb-bg);
	box-shadow: 0 1.25rem 2.5rem -1.5rem rgb(12 35 66 / 0.4);
}

.gb-offer-stage--artboard[data-gb-offer-ready] .gb-offer__number {
	justify-self: start;
	padding: 0.15rem 0.6rem;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-color-turquoise-a20);
	color: var(--gb-color-navy);
	font-size: 0.8rem;
}

.gb-offer-stage--artboard[data-gb-offer-ready] .gb-offer__title {
	font-size: var(--gb-step-3);
}

/* Selection box: turquoise outline, four handles, the size label below. */
.gb-os-select {
	position: absolute;
	inset: -10px;
	border: 1.5px solid var(--gb-primary);
	pointer-events: none;
}

.gb-os-select i {
	position: absolute;
	inline-size: 9px;
	block-size: 9px;
	border: 1.5px solid var(--gb-primary);
	background-color: var(--gb-bg);
}

.gb-os-select i:nth-child(1) {
	top: -5px;
	left: -5px;
}

.gb-os-select i:nth-child(2) {
	top: -5px;
	right: -5px;
}

.gb-os-select i:nth-child(3) {
	bottom: -5px;
	left: -5px;
}

.gb-os-select i:nth-child(4) {
	bottom: -5px;
	right: -5px;
}

.gb-os-select b {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline-start: 50%;
	translate: calc(var(--gb-dir) * 50%) 0;
	padding: 0.1rem 0.45rem;
	border-radius: 0.3rem;
	background-color: var(--gb-primary);
	color: var(--gb-color-navy);
	font-size: 0.7rem;
	font-weight: var(--gb-weight-bold);
	white-space: nowrap;
}

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

@keyframes gb-art-in {
	0% {
		opacity: 0;
		scale: 0.94;
	}

	100% {
		opacity: 1;
		scale: 1;
	}
}

@keyframes gb-art-select {
	0% {
		inset: 40%;
		opacity: 0;
	}

	100% {
		inset: -10px;
		opacity: 1;
	}
}

@keyframes gb-art-cursor {
	0% {
		translate: calc(var(--gb-dir) * 140px) -90px;
	}

	100% {
		translate: 0 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--artboard[data-gb-switch] .gb-offer:not([hidden]) .gb-os-select {
		animation: gb-art-select 0.45s var(--gb-ease-out) 0.15s both;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--artboard[data-gb-switch] .gb-os-cursor {
		animation: gb-art-cursor 0.6s var(--gb-ease-in-out) both;
	}
}

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

@media (max-width: 47.99rem) {
	.gb-offer-stage--artboard[data-gb-offer-ready] .gb-offer-stage__nav {
		padding: 0.35rem;
	}

	.gb-offer-stage--artboard[data-gb-offer-ready] .gb-offer-stage__view {
		min-block-size: 0;
		padding: 2.75rem 1.75rem 3rem 2.25rem;
	}

	.gb-os-cursor {
		inset-inline-end: 8%;
	}
}

/* ---------- Typing (assets/js/components/offer-stage/artboard.js) ---------- */

/*
 * While a word is being typed, the real heading / line stays in place but
 * transparent (still read by screen readers), and its typed copy sits on top
 * of it in the same box, so the lines fall exactly where the finished text
 * will be. The caret blinks only while typing (a couple of seconds).
 */
.gb-offer-stage--artboard [data-gb-typing] {
	position: relative;
	color: transparent !important;
}

.gb-os-ghost {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.gb-os-ghost[data-gb-caret]::after {
	content: "";
	display: inline-block;
	inline-size: 2px;
	block-size: 1em;
	margin-inline-start: 2px;
	vertical-align: -0.12em;
	background-color: var(--gb-primary);
	animation: gb-art-caret 0.8s steps(1) infinite;
}

@keyframes gb-art-caret {
	50% {
		opacity: 0;
	}
}

/* ---------- Revision 4: the layer's real design on the canvas ---------- */

.gb-offer-stage--artboard[data-gb-offer-ready] .gb-offer:has(.gb-os-artwork) {
	inline-size: min(100%, 30rem);
}

.gb-offer-stage--artboard[data-gb-offer-ready] .gb-os-artwork {
	aspect-ratio: 16 / 10;
	margin-block-end: var(--gb-space-xs);
	object-fit: cover;
	border-radius: 0.3rem;
}