/* OmniBridge dashboard layout: left sidebar on desktop, off-canvas on mobile. */
.ob-app[data-ob-app] {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	min-height: 70vh;
	border: 1px solid var(--ob-border);
	border-radius: var(--ob-radius);
	overflow: hidden;
	position: relative;
	max-width: 100%;
}
.ob-app.is-collapsed { grid-template-columns: 72px minmax(0, 1fr); }

.ob-skip { position: absolute; left: -9999px; top: 8px; z-index: 5; background: var(--ob-surface); padding: 8px 12px; border-radius: 6px; }
.ob-skip:focus { left: 8px; }

.ob-sidebar {
	background: var(--ob-subtle);
	border-right: 1px solid var(--ob-border);
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.ob-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 12px 12px 18px; min-height: 64px; }
.ob-brand__logo { max-height: 36px; max-width: 160px; width: auto; }
.ob-brand__name { font-weight: 700; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-collapse .ob-icon { transition: transform .15s; }
.is-collapsed .ob-collapse .ob-icon { transform: rotate(180deg); }

.ob-nav { flex: 1; overflow-y: auto; padding: 4px 8px 16px; }
.ob-nav ul { list-style: none; margin: 0; padding: 0; }
.ob-nav__group { margin-bottom: 12px; }
.ob-nav__label { margin: 12px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ob-muted); }
.ob-app .ob-nav__item {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 10px; border-radius: 8px; min-height: 40px;
	color: var(--ob-text); text-decoration: none; font-size: 14px; font-weight: 500;
}
.ob-app .ob-nav__item:hover { background: color-mix(in srgb, var(--ob-primary) 8%, transparent); }
.ob-app .ob-nav__item.is-active { background: color-mix(in srgb, var(--ob-primary) 14%, transparent); color: var(--ob-primary); font-weight: 650; }
.ob-nav__item .ob-icon { flex: 0 0 20px; }
.ob-nav__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-sidebar__foot { padding: 8px; border-top: 1px solid var(--ob-border); }

.is-collapsed .ob-nav__text, .is-collapsed .ob-nav__label, .is-collapsed .ob-brand__name, .is-collapsed .ob-brand__logo, .is-collapsed .ob-nav .ob-count { display: none; }
.is-collapsed .ob-brand { justify-content: center; padding: 16px 8px; }
.is-collapsed .ob-nav__item { justify-content: center; }

.ob-main-wrap { min-width: 0; display: flex; flex-direction: column; }
.ob-topbar { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--ob-border); min-height: 64px; }
.ob-menu-btn { display: none; }
.ob-breadcrumbs { flex: 1; min-width: 0; }
.ob-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--ob-muted); }
.ob-breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--ob-border); }
.ob-breadcrumbs [aria-current] { color: var(--ob-text); font-weight: 600; }
.ob-topbar__user { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.ob-avatar { border-radius: 50%; }
.ob-main { padding: 24px; min-width: 0; outline: none; }
.ob-main:focus { outline: none; }
.ob-embed .fce-payment-methods-app { margin: 0 0 16px; }

.ob-overlay { display: none; }

@media (max-width: 900px) {
	.ob-app[data-ob-app], .ob-app.is-collapsed { grid-template-columns: minmax(0, 1fr); }
	.ob-sidebar {
		position: fixed; z-index: 100000; inset: 0 auto 0 0; width: min(300px, 86vw);
		transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--ob-shadow);
		background: var(--ob-surface);
	}
	.ob-app.is-menu-open .ob-sidebar { transform: none; }
	.ob-app.is-collapsed .ob-nav__text, .ob-app.is-collapsed .ob-nav__label, .ob-app.is-collapsed .ob-brand__name, .ob-app.is-collapsed .ob-brand__logo { display: initial; }
	.ob-collapse { display: none; }
	.ob-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(17, 24, 39, .45); }
	.ob-app.is-menu-open .ob-overlay { display: block; }
	.ob-menu-btn { display: inline-flex; }
	.ob-topbar { padding: 8px 12px; }
	.ob-topbar__name { display: none; }
	.ob-main { padding: 16px; }
}

.ob-app--guest { padding: 24px; border: 0; display: block; }

/* Payment Methods & Billing Details (1.2) */
.ob-app .ob-check { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 14px; }
.ob-app .ob-check input { margin-top: 3px; }
.ob-app .ob-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.ob-app .ob-pm-cards { list-style: none; margin: 0; padding: 0; }
.ob-app .ob-pm-card { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--ob-border); }
.ob-app .ob-pm-card:last-child { border-bottom: 0; }
.ob-app .ob-pm-card.is-expired strong { opacity: .6; }
.ob-app .ob-pm-main { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.ob-app .ob-pm-actions { display: flex; gap: 4px; }
.ob-app .ob-pm-add { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ob-border); }
.ob-app .ob-pm-element { min-height: 40px; margin-bottom: 8px; }
.ob-app .ob-pm-error { color: #b42318; margin: 8px 0 0; }

/* WP Sell Services pages shown inside the dashboard. */
.ob-wss-page { min-width: 0; }
.ob-wss-page .wpss-requirements-page__layout { display: block; }
.ob-wss-page .wpss-requirements-page__sidebar { display: none !important; }
.ob-wss-page .wpss-requirements-page__main { max-width: none; width: 100%; }