/*!
 * Baly Site System — /restaurant-registration page (merchant acquisition).
 * Depends on bsy-chrome.css (which depends on bsy-tokens.css).
 *
 * Ports baly-design-system/taxi pages/RestaurantSignupMosaic.jsx +
 * preview-restaurant-signup.html 1:1. Sections are children of
 * .bsy-page__stack (max-width + vertical gap handled by chrome).
 * Single mobile breakpoint at 768px collapses the desktop grids into the
 * spec's single-column flow.
 *
 * Every color traces to a --bsy-* token except the hero / dashboard gradient
 * stops and the fixed accent yellow (#FFE15E), which are intentional
 * decorative brand colors carried over verbatim from the design — the same
 * exception food.css / food-pro.css document.
 */

/* White card shell shared by the benefits + steps sections. The design uses a
 * 28px pad (vs the 22px .bsy-card default), so we declare our own shell. */
.bsy-page--restaurant-signup .bsy-rs-card {
	background: #fff;
	border-radius: var(--bsy-radius-2xl);
	padding: 28px;
	border: 1px solid var(--bsy-grey-100);
	box-shadow: var(--bsy-shadow-card);
}

/* ── HERO ───────────────────────────────────────────────────── */
.bsy-rs-hero {
	position: relative; overflow: hidden;
	border-radius: var(--bsy-radius-3xl);
	background: linear-gradient(160deg, #0043FF 0%, #1B4CFF 55%, #355FFF 100%);
	color: #fff;
	padding: 38px 44px;
	display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px;
	min-height: 580px;
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 28px 60px -24px rgba(0,30,80,.45);
}
.bsy-rs-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bsy-rs-hero__bgsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bsy-rs-hero__glow {
	position: absolute; inset: auto -120px -160px auto;
	width: 460px; height: 460px; border-radius: 999px;
	background: radial-gradient(circle, rgba(255,225,94,.22), transparent 65%);
	filter: blur(28px); pointer-events: none; z-index: 0;
}
.bsy-rs-hero__left {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; justify-content: space-between;
	direction: rtl;
}
.bsy-rs-hero__title {
	margin: 18px 0 14px;
	font-family: var(--bsy-font); font-weight: 950;
	font-size: 54px; line-height: 0.98; color: #fff;
}
.bsy-rs-hero__accent { color: #FFE15E; }
.bsy-rs-hero__lede {
	margin: 0; max-width: 480px;
	font-size: 16px; line-height: 1.6; font-weight: 500; color: rgba(255,255,255,.88);
}
.bsy-rs-hero__media-col { position: relative; z-index: 2; display: grid; place-items: center; }

/* Hero CTA */
.bsy-rs-cta {
	direction: rtl;
	display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.bsy-rs-cta__btn {
	height: 58px; padding-inline: 30px; box-sizing: border-box;
	border-radius: 999px; text-decoration: none;
	background: #fff; color: var(--bsy-brand);
	font-family: var(--bsy-font); font-size: 17px; font-weight: 900;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	box-shadow: 0 14px 30px -10px rgba(0,0,0,.35);
	transition: transform var(--bsy-duration-fast) var(--bsy-ease-out),
	            box-shadow var(--bsy-duration-fast) var(--bsy-ease-out);
}
.bsy-rs-cta__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 18px 36px -10px rgba(0,0,0,.40);
}
.bsy-rs-cta__note {
	display: flex; align-items: center; gap: 10px;
	font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.9);
}
.bsy-rs-cta__check {
	width: 18px; height: 18px; border-radius: 999px; flex: none;
	background: rgba(255,255,255,.18); color: #fff;
	display: grid; place-items: center;
}

/* Hero media (restaurant-owner image + social-proof badge) */
.bsy-rs-media { position: relative; width: 360px; max-width: 100%; direction: rtl; }
.bsy-rs-media__card {
	position: relative; z-index: 1;
	border-radius: 26px; overflow: hidden; height: 560px;
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.10) inset;
}
.bsy-rs-media__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsy-rs-media__shade {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,12,40,0) 42%, rgba(0,12,40,.62) 100%);
}
.bsy-rs-media__proof {
	position: absolute; inset-inline: 16px; bottom: 16px;
	display: flex; align-items: center; gap: 12px;
	background: rgba(255,255,255,.14);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 16px; padding: 10px 14px; color: #fff;
}
.bsy-rs-media__proof-t { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.9); line-height: 1.4; }
.bsy-rs-media__proof-n { color: #fff; font-weight: 900; font-size: 13px; }

/* ── BENEFITS ───────────────────────────────────────────────── */
.bsy-rs-benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bsy-rs-benefit {
	position: relative; overflow: hidden;
	background: var(--bsy-grey-100); border: 1px solid transparent;
	border-radius: 18px; padding: 18px;
	display: flex; flex-direction: column; gap: 10px;
}
.bsy-rs-benefit--accent {
	background: var(--bsy-brand-lighter);
	border-color: rgba(0,67,255,.18);
}
.bsy-rs-benefit__ic {
	width: 44px; height: 44px; border-radius: 12px;
	background: #fff; color: var(--bsy-brand);
	display: grid; place-items: center;
}
.bsy-rs-benefit--accent .bsy-rs-benefit__ic { background: var(--bsy-brand); color: #fff; }
.bsy-rs-benefit__t {
	font-size: 16px; font-weight: 900; color: var(--bsy-black);
 margin-top: 4px;
}
.bsy-rs-benefit__s { font-size: 12.5px; color: var(--bsy-grey-700); line-height: 1.55; font-weight: 500; }

/* ── HOW IT WORKS (steps) ───────────────────────────────────── */
.bsy-rs-steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bsy-rs-step {
	position: relative;
	background: var(--bsy-grey-100); color: var(--bsy-black);
	border-radius: 18px; padding: 20px 18px;
	display: flex; flex-direction: column; gap: 10px;
}
.bsy-rs-step--accent {
	background: var(--bsy-brand); color: #fff;
	box-shadow: 0 14px 32px -10px rgba(0,67,255,.45);
}
.bsy-rs-step__top { display: flex; align-items: center; gap: 10px; }
.bsy-rs-step__n {
	width: 32px; height: 32px; border-radius: 999px;
	background: #fff; color: var(--bsy-brand);
	display: grid; place-items: center; font-size: 14px; font-weight: 900;
}
.bsy-rs-step--accent .bsy-rs-step__n {
	background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.28);
}
.bsy-rs-step__ic {
	width: 40px; height: 40px; border-radius: 12px;
	background: #fff; color: var(--bsy-brand);
	display: grid; place-items: center; margin-inline-start: auto;
}
.bsy-rs-step--accent .bsy-rs-step__ic { background: rgba(255,255,255,.14); color: #FFE15E; }
.bsy-rs-step__t {
	font-size: 16px; font-weight: 900; margin-top: 4px;
	color: var(--bsy-black);
}
.bsy-rs-step--accent .bsy-rs-step__t { color: #fff; }
.bsy-rs-step__s { font-size: 12.5px; font-weight: 500; line-height: 1.55; color: var(--bsy-grey-700); }
.bsy-rs-step--accent .bsy-rs-step__s { color: rgba(255,255,255,.85); }

/* ── DASHBOARD PREVIEW (dark band) ──────────────────────────── */
.bsy-rs-dash {
	position: relative; overflow: hidden;
	border-radius: var(--bsy-radius-3xl);
	background: linear-gradient(160deg, #0a1430 0%, #112250 60%, #1B3580 100%);
	color: #fff; direction: rtl;
	padding: 40px;
	display: grid; grid-template-columns: 1fr 1.15fr; gap: 32px; align-items: start;
	box-shadow: 0 32px 60px -28px rgba(0,30,80,.50);
}
.bsy-rs-dash__glow {
	position: absolute; inset-inline-end: -120px; top: -80px;
	width: 360px; height: 360px; border-radius: 999px;
	background: radial-gradient(circle, rgba(0,67,255,.45), transparent 65%);
	filter: blur(40px); pointer-events: none;
}
.bsy-rs-dash__copy { position: relative; }
.bsy-rs-dash__title {
	margin: 14px 0 12px;
	font-family: var(--bsy-font); font-weight: 900;
	font-size: 32px; line-height: 1.1; color: #fff;
}
.bsy-rs-dash__accent { color: #FFE15E; }
.bsy-rs-dash__lede {
	margin: 0 0 18px; font-size: 14.5px; font-weight: 500;
	color: rgba(255,255,255,.82); line-height: 1.65; max-width: 460px;
}
.bsy-rs-dash__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bsy-rs-dash__c {
	display: flex; flex-direction: column; gap: 10px;
	padding: 22px 20px;
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
	border-radius: 18px;
}
.bsy-rs-dash__c-ic {
	width: 44px; height: 44px; border-radius: 12px;
	background: rgba(255,225,94,.18); color: #FFE15E;
	display: grid; place-items: center; flex: none;
}
.bsy-rs-dash__c-t { font-size: 16.5px; font-weight: 900; color: #fff; }
.bsy-rs-dash__c-s { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.78); line-height: 1.55; }

/* ── MOBILE (≤768px) — single-column flow from the spec ─────── */
@media (max-width: 768px) {
	.bsy-page--restaurant-signup .bsy-rs-card { padding: 16px; border-radius: var(--bsy-radius-xl); }

	/* Hero → stacked: copy + CTA, then image */
	.bsy-rs-hero {
		grid-template-columns: 1fr; gap: 14px;
		padding: 18px 16px 16px; border-radius: 22px; min-height: 0;
	}
	.bsy-rs-hero__left { gap: 14px; justify-content: flex-start; }
	.bsy-rs-hero__title { font-size: 28px; line-height: 1; margin: 10px 0 8px; }
	.bsy-rs-hero__lede { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.85); }
	.bsy-rs-cta { gap: 12px; align-self: stretch; }
	.bsy-rs-cta__btn { width: 100%; height: 56px; padding-inline: 24px; font-size: 16px; }
	.bsy-rs-media { width: 100%; }
	.bsy-rs-media__card { height: 300px; border-radius: 22px; }

	/* Benefits + steps → 2 columns */
	.bsy-rs-benefits__grid,
	.bsy-rs-steps__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.bsy-rs-benefit { padding: 14px; }
	.bsy-rs-benefit__t { font-size: 14px; }
	.bsy-rs-benefit__s { font-size: 11.5px; }
	.bsy-rs-step { padding: 14px; }
	.bsy-rs-step__t { font-size: 14px; }
	.bsy-rs-step__s { font-size: 11.5px; }

	/* Dashboard → stacked; feature grid stays 2-up */
	.bsy-rs-dash { grid-template-columns: 1fr; gap: 22px; padding: 24px 18px; }
	.bsy-rs-dash__title { font-size: 24px; }
	.bsy-rs-dash__lede { font-size: 13px; }
	.bsy-rs-dash__c { padding: 15px; }
	.bsy-rs-dash__c-t { font-size: 14.5px; }
	.bsy-rs-dash__c-s { font-size: 12px; }
}