/* BitBeam Package Shop — visual storefront styles (WHYBLE-2303)
 *
 * Hierarchy: Foundation → Configure → Review
 * Uses BitBeam.space styling: blue (#0066cc), clean cards, rounded corners.
 * Responsive: desktop grid → mobile stack.
 */

.bitbeam-package-shop {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2em 1em 6em; /* bottom padding for sticky review bar */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #1a1a1a;
}

/* ─── Sections ────────────────────────────────────────────── */
.bb-shop-section {
	margin-bottom: 3em;
}

.bb-shop-section-title {
	font-size: 1.75em;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 0.25em 0;
	text-align: center;
}

.bb-shop-section-subtitle {
	font-size: 1em;
	color: #666;
	text-align: center;
	margin: 0 0 2em 0;
}

/* ─── Discount tiers display ──────────────────────────────── */
.bb-shop-discount-tiers {
	text-align: center;
	padding: 0.75em 1em;
	background: #f0f7ff;
	border: 1px solid #d0e3ff;
	border-radius: 8px;
	margin-bottom: 2em;
	font-size: 0.9em;
	color: #0066cc;
}

.bb-shop-discount-tiers-label {
	font-weight: 700;
	margin-right: 0.5em;
}

.bb-shop-discount-policy {
	color: #999;
	font-size: 0.85em;
	margin-left: 0.5em;
}

/* ─── Foundation cards ─────────────────────────────────────── */
.bb-shop-foundation-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.5em;
	align-items: stretch;
}

.bb-shop-foundation-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 2em 1.5em;
	background: #fff;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
	cursor: pointer;
}

.bb-shop-foundation-card:hover {
	border-color: #0066cc;
	box-shadow: 0 4px 20px rgba(0, 102, 204, 0.1);
	transform: translateY(-2px);
}

.bb-shop-foundation-card--recommended {
	border-color: #0066cc;
	box-shadow: 0 2px 12px rgba(0, 102, 204, 0.12);
}

.bb-shop-foundation-card--selected {
	border-color: #0066cc;
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25), 0 4px 20px rgba(0, 102, 204, 0.15);
	transform: translateY(-2px);
}

.bb-shop-foundation-card--quote {
	border-style: dashed;
}

.bb-shop-foundation-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 16px;
	background: #0066cc;
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;
	border-radius: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.bb-shop-foundation-header {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-bottom: 1em;
}

.bb-shop-foundation-icon {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	background: #f0f7ff;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: 32px 32px;
	background-repeat: no-repeat;
	background-position: center;
}

.bb-shop-foundation-name {
	font-size: 1.35em;
	font-weight: 700;
	margin: 0;
	color: #1a1a1a;
}

.bb-shop-foundation-price {
	display: flex;
	align-items: baseline;
	gap: 0.25em;
	margin-bottom: 1em;
}

.bb-shop-foundation-quote-label {
	font-size: 1.3em;
	font-weight: 700;
	color: #0066cc;
}

.bb-shop-foundation-desc {
	font-size: 0.9em;
	color: #555;
	line-height: 1.5;
	margin: 0 0 1em 0;
	flex-grow: 1;
}

.bb-shop-foundation-isolation {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 0;
	border-top: 1px solid #f0f0f0;
	margin-bottom: 0.75em;
}

.bb-shop-isolation-label {
	font-size: 0.85em;
	color: #888;
}

.bb-shop-isolation-value {
	font-size: 0.85em;
	font-weight: 600;
	color: #0066cc;
}

.bb-shop-foundation-limits {
	list-style: none;
	padding: 0;
	margin: 0 0 1em 0;
}

.bb-shop-foundation-limits li {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-size: 0.85em;
	color: #444;
	padding: 0.25em 0;
}

.bb-shop-foundation-included {
	font-size: 0.85em;
	color: #555;
	padding: 0.5em 0.75em;
	background: #f9f9f9;
	border-radius: 6px;
	margin-bottom: 1.5em;
}

.bb-shop-included-label {
	font-weight: 600;
	color: #333;
}

.bb-shop-foundation-select {
	display: block;
	width: 100%;
	padding: 0.85em 1.5em;
	background: #0066cc;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1em;
	cursor: pointer;
	transition: background 0.2s;
	text-align: center;
}

.bb-shop-foundation-select:hover {
	background: #005a87;
}

.bb-shop-foundation-card--selected .bb-shop-foundation-select {
	background: #46b450;
}

.bb-shop-foundation-card--selected .bb-shop-foundation-select:hover {
	background: #3a9a40;
}

/* ─── Module state indicators ─────────────────────────────── */
.bb-shop-module-state {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 2px solid #e0e0e0;
	transition: all 0.2s;
}

.bb-shop-module-card--selected .bb-shop-module-state {
	background: #0066cc;
	border-color: #0066cc;
}

.bb-shop-module-card--included .bb-shop-module-state {
	background: #46b450;
	border-color: #46b450;
}

.bb-shop-module-card--selected {
	border-color: #0066cc;
	box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}

.bb-shop-module-card--included {
	border-color: #46b450;
	background: rgba(70, 180, 80, 0.03);
}

/* ─── Category descriptions ───────────────────────────────── */
.bb-shop-category-desc {
	font-size: 0.85em;
	color: #888;
	margin: 0 0 1em 0;
}

/* ─── Policy metadata ─────────────────────────────────────── */
.bb-shop-policy-metadata {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	padding: 0.6em 1em;
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 6px;
	margin-bottom: 1.5em;
	font-size: 0.78em;
}

.bb-shop-policy-item {
	display: flex;
	align-items: center;
	gap: 0.35em;
}

.bb-shop-policy-label {
	color: #6c757d;
	font-weight: 500;
}

.bb-shop-policy-value {
	color: #1a1a1a;
	font-weight: 600;
}

.bb-shop-policy-value--unverified {
	color: #856404;
}

/* ─── Review bar warnings ─────────────────────────────────── */
.bb-shop-review-warnings {
	padding: 0.4em 1em;
	background: #fff3cd;
	border-top: 1px solid #ffc107;
	font-size: 0.72em;
	color: #856404;
}

.bb-shop-review-warning {
	padding: 0.15em 0;
}

.bb-shop-review-warning--error {
	color: #721c24;
	font-weight: 600;
}

.bb-shop-review-rejected {
	padding: 0.4em 1em;
	background: #f8f9fa;
	border-top: 1px solid #dee2e6;
	font-size: 0.72em;
	color: #6c757d;
}

.bb-shop-review-rejected-label {
	font-weight: 600;
	margin-bottom: 0.2em;
}

.bb-shop-review-rejected-item {
	padding: 0.1em 0;
	color: #6c757d;
}

.bb-shop-review-cloud {
	display: inline-block;
	margin-right: 1em;
}

/* ─── Price estimate labels ───────────────────────────────── */
.bb-shop-price-estimate-label {
	display: block;
	font-size: 0.75em;
	color: #888;
	font-weight: 400;
	margin-bottom: 0.15em;
}

.bb-shop-price-estimate-small {
	font-size: 0.7em;
	color: #999;
	font-weight: 400;
}

.bb-shop-price-disclaimer {
	font-size: 0.72em;
	color: #999;
	margin-top: 0.25em;
	font-style: italic;
}

.bb-shop-preview-notice {
	text-align: center;
	padding: 0.5em 1em;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 6px;
	margin-bottom: 1.5em;
	font-size: 0.82em;
	color: #856404;
	font-weight: 500;
}

/* ─── Cloud worker cards ──────────────────────────────────── */
.bb-shop-cloud-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1em;
}

.bb-shop-cloud-card {
	display: flex;
	flex-direction: column;
	padding: 1.25em;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.bb-shop-cloud-card:hover {
	border-color: #0066cc;
	box-shadow: 0 2px 12px rgba(0, 102, 204, 0.08);
}

.bb-shop-cloud-card--quote {
	border-style: dashed;
}

.bb-shop-cloud-header {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	margin-bottom: 0.75em;
}

.bb-shop-cloud-icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	background: #f0f7ff;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bb-shop-cloud-info {
	flex-grow: 1;
}

.bb-shop-cloud-name {
	font-size: 1em;
	font-weight: 700;
	margin: 0 0 0.15em 0;
	color: #1a1a1a;
}

.bb-shop-cloud-price {
	font-size: 0.85em;
	color: #0066cc;
	font-weight: 600;
}

.bb-shop-cloud-desc {
	font-size: 0.82em;
	color: #666;
	line-height: 1.4;
	margin: 0 0 0.75em 0;
	flex-grow: 1;
}

.bb-shop-cloud-features {
	list-style: none;
	padding: 0;
	margin: 0 0 0.5em 0;
}

.bb-shop-cloud-features li {
	display: flex;
	align-items: flex-start;
	gap: 0.4em;
	font-size: 0.78em;
	color: #555;
	padding: 0.15em 0;
}

.bb-shop-cloud-disclaimer {
	font-size: 0.72em;
	color: #999;
	font-style: italic;
	padding-top: 0.5em;
	border-top: 1px solid #f0f0f0;
	margin-top: auto;
}

/* ─── Connection required badges ──────────────────────────── */
.bb-shop-cloud-connection-badge {
	display: flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35em 0.6em;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 6px;
	font-size: 0.75em;
	color: #856404;
	margin-bottom: 0.5em;
	font-weight: 500;
}

.bb-shop-connection-icon {
	font-size: 0.9em;
}

.bb-shop-cloud-card--connection-required {
	border-color: #ffc107;
}

.bb-shop-cloud-card--connection-required:hover {
	border-color: #e0a800;
}

/* ─── Commercial state badges ─────────────────────────────── */
/* Separate from connection state. "included" comes from the
   selected foundation's included_cloud_workers, not from
   connection_type === internal. */
.bb-shop-cloud-commercial-badge {
	display: inline-block;
	padding: 0.25em 0.55em;
	border-radius: 5px;
	font-size: 0.72em;
	font-weight: 500;
	margin-bottom: 0.75em;
}

.bb-shop-cloud-commercial-badge--addon {
	background: #e7f1ff;
	border: 1px solid #b8daff;
	color: #004085;
}

.bb-shop-cloud-commercial-badge--included {
	background: #d4edda;
	border: 1px solid #28a745;
	color: #155724;
}

.bb-shop-cloud-commercial-badge--planned {
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	color: #6c757d;
}

.bb-shop-cloud-commercial-badge--quote {
	background: #fff3cd;
	border: 1px solid #ffc107;
	color: #856404;
}

/* Commercial state card variants */
.bb-shop-cloud-card--planned {
	opacity: 0.85;
}

.bb-shop-cloud-card--locked {
	border-style: solid;
	border-color: #28a745;
}

/* ─── Legacy bundle cards ─────────────────────────────────── */
.bb-shop-bundle-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.5em;
}

.bb-shop-bundle-card {
	display: flex;
	flex-direction: column;
	padding: 1.5em;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.bb-shop-bundle-card:hover {
	border-color: #0066cc;
	box-shadow: 0 2px 12px rgba(0, 102, 204, 0.08);
}

.bb-shop-bundle-header {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-bottom: 1em;
}

.bb-shop-bundle-icon {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	background: #f0f7ff;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bb-shop-bundle-name {
	font-size: 1.15em;
	font-weight: 700;
	margin: 0;
	color: #1a1a1a;
}

.bb-shop-bundle-price {
	display: flex;
	align-items: baseline;
	gap: 0.25em;
	margin-bottom: 1em;
}

.bb-shop-bundle-desc {
	font-size: 0.85em;
	color: #555;
	line-height: 1.5;
	margin: 0 0 1em 0;
	flex-grow: 1;
}

.bb-shop-bundle-includes {
	list-style: none;
	padding: 0;
	margin: 0 0 1em 0;
}

.bb-shop-bundle-includes li {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-size: 0.82em;
	color: #444;
	padding: 0.2em 0;
}

.bb-shop-bundle-more {
	color: #888 !important;
	font-style: italic;
}

.bb-shop-bundle-cta {
	display: block;
	text-align: center;
	padding: 0.6em 1.5em;
	background: transparent;
	color: #0066cc !important;
	text-decoration: none;
	border: 2px solid #0066cc;
	border-radius: 8px;
	font-weight: 700;
	font-size: 0.9em;
	transition: all 0.2s;
}

.bb-shop-bundle-cta:hover {
	background: #0066cc;
	color: #fff !important;
}

/* ─── Sticky review bar ───────────────────────────────────── */
.bb-shop-review-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 2px solid #0066cc;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
	z-index: 999;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.bb-shop-review-bar--active {
	transform: translateY(0);
}

.bb-shop-review-content {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 0.75em 1em;
	flex-wrap: wrap;
}

.bb-shop-review-foundation,
.bb-shop-review-modules {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.bb-shop-review-label {
	font-size: 0.85em;
	color: #888;
}

.bb-shop-review-value {
	font-size: 0.95em;
	font-weight: 600;
	color: #1a1a1a;
}

.bb-shop-review-pricing {
	display: flex;
	gap: 1.5em;
}

.bb-shop-review-price-row {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.bb-shop-review-discount {
	color: #46b450;
	font-weight: 700;
}

.bb-shop-review-cta {
	padding: 0.75em 2em;
	background: #0066cc;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1em;
	cursor: pointer;
	transition: background 0.2s;
	white-space: nowrap;
}

.bb-shop-review-cta:hover:not(:disabled) {
	background: #005a87;
}

.bb-shop-review-cta:disabled {
	background: #ccc;
	cursor: not-allowed;
}

.bb-shop-review-hint {
	text-align: center;
	padding: 0.75em;
	color: #888;
	font-size: 0.9em;
	background: #f9f9f9;
	border-top: 1px solid #e0e0e0;
}

.bb-shop-review-bar--active .bb-shop-review-hint {
	display: none;
}

.bb-shop-card--url-selected {
	border-color: #0066cc !important;
	box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15) !important;
}

/* ─── Package cards ───────────────────────────────────────── */
.bb-shop-package-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5em;
	align-items: stretch;
}

.bb-shop-package-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 2em 1.5em;
	background: #fff;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.bb-shop-package-card:hover {
	border-color: #0066cc;
	box-shadow: 0 4px 20px rgba(0, 102, 204, 0.1);
	transform: translateY(-2px);
}

.bb-shop-package-card--highlighted {
	border-color: #0066cc;
	box-shadow: 0 2px 12px rgba(0, 102, 204, 0.12);
}

.bb-shop-package-card--highlighted:hover {
	box-shadow: 0 6px 24px rgba(0, 102, 204, 0.18);
}

.bb-shop-package-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 16px;
	background: #0066cc;
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;
	border-radius: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.bb-shop-package-header {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-bottom: 1em;
}

.bb-shop-package-icon {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	background: #f0f7ff;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bb-shop-package-name {
	font-size: 1.25em;
	font-weight: 700;
	margin: 0;
	color: #1a1a1a;
}

.bb-shop-package-price {
	display: flex;
	align-items: baseline;
	gap: 0.25em;
	margin-bottom: 1em;
}

.bb-shop-price-amount {
	font-size: 2em;
	font-weight: 800;
	color: #0066cc;
}

.bb-shop-price-period {
	font-size: 0.9em;
	color: #666;
}

.bb-shop-package-desc {
	font-size: 0.9em;
	color: #555;
	line-height: 1.5;
	margin: 0 0 1em 0;
	flex-grow: 1;
}

.bb-shop-package-includes {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5em 0;
}

.bb-shop-package-includes li {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-size: 0.85em;
	color: #444;
	padding: 0.25em 0;
}

.bb-shop-check {
	color: #46b450;
	font-weight: 700;
	flex-shrink: 0;
}

.bb-shop-package-cta {
	display: block;
	text-align: center;
	padding: 0.75em 1.5em;
	background: #0066cc;
	color: #fff !important;
	text-decoration: none;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1em;
	transition: background 0.2s;
}

.bb-shop-package-cta:hover {
	background: #005a87;
	color: #fff;
}

.bb-shop-package-card--highlighted .bb-shop-package-cta {
	background: #0066cc;
}

/* ─── Module cards ────────────────────────────────────────── */
.bb-shop-category-group {
	margin-bottom: 2em;
}

.bb-shop-category-title {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 1.15em;
	font-weight: 600;
	color: #333;
	margin: 0 0 1em 0;
	padding-bottom: 0.5em;
	border-bottom: 2px solid #f0f0f0;
}

.bb-shop-category-icon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	background: #f0f7ff;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bb-shop-module-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1em;
}

.bb-shop-module-card {
	display: flex;
	flex-direction: column;
	padding: 1.25em;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.bb-shop-module-card:hover {
	border-color: #0066cc;
	box-shadow: 0 2px 12px rgba(0, 102, 204, 0.08);
}

.bb-shop-module-header {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	margin-bottom: 0.75em;
}

.bb-shop-module-icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	background: #f0f7ff;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bb-shop-module-info {
	flex-grow: 1;
}

.bb-shop-module-name {
	font-size: 1em;
	font-weight: 700;
	margin: 0 0 0.15em 0;
	color: #1a1a1a;
}

.bb-shop-module-price {
	font-size: 0.85em;
	color: #0066cc;
	font-weight: 600;
}

.bb-shop-module-desc {
	font-size: 0.8em;
	color: #666;
	line-height: 1.4;
	margin: 0 0 0.75em 0;
	flex-grow: 1;
}

.bb-shop-module-features {
	list-style: none;
	padding: 0;
	margin: 0 0 0.75em 0;
}

.bb-shop-module-features li {
	display: flex;
	align-items: flex-start;
	gap: 0.4em;
	font-size: 0.78em;
	color: #555;
	padding: 0.15em 0;
}

.bb-shop-module-requires {
	font-size: 0.75em;
	color: #999;
	padding: 0.5em 0;
	border-top: 1px solid #f0f0f0;
	margin-top: auto;
}

/* ─── Builder CTA ─────────────────────────────────────────── */
.bb-shop-builder-cta {
	text-align: center;
	margin-top: 2em;
}

.bb-shop-builder-button {
	display: inline-block;
	padding: 1em 2.5em;
	background: #0066cc;
	color: #fff !important;
	text-decoration: none;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1.1em;
	transition: background 0.2s, transform 0.2s;
}

.bb-shop-builder-button:hover {
	background: #005a87;
	transform: translateY(-1px);
	color: #fff;
}

/* ─── Infrastructure cards ────────────────────────────────── */
.bb-shop-infra-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1em;
}

.bb-shop-infra-card {
	display: flex;
	flex-direction: column;
	padding: 1.25em;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.bb-shop-infra-card:hover {
	border-color: #0066cc;
	box-shadow: 0 2px 12px rgba(0, 102, 204, 0.08);
}

.bb-shop-infra-card--quote {
	border-style: dashed;
}

.bb-shop-infra-header {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-bottom: 0.75em;
}

.bb-shop-infra-icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	background: #f0f7ff;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bb-shop-infra-name {
	font-size: 1em;
	font-weight: 700;
	margin: 0;
	color: #1a1a1a;
}

.bb-shop-infra-price {
	font-size: 1.25em;
	font-weight: 800;
	color: #0066cc;
	margin-bottom: 0.5em;
}

.bb-shop-infra-quote {
	display: inline-block;
	padding: 0.25em 0.75em;
	background: #fff3cd;
	color: #856404;
	font-size: 0.85em;
	font-weight: 600;
	border-radius: 4px;
	margin-bottom: 0.5em;
}

.bb-shop-infra-desc {
	font-size: 0.85em;
	color: #666;
	line-height: 1.4;
	margin: 0 0 0.75em 0;
	flex-grow: 1;
}

.bb-shop-infra-limits {
	list-style: none;
	padding: 0;
	margin: 0;
}

.bb-shop-infra-limits li {
	display: flex;
	align-items: flex-start;
	gap: 0.4em;
	font-size: 0.8em;
	color: #555;
	padding: 0.15em 0;
}

/* ─── Support cards ───────────────────────────────────────── */
.bb-shop-support-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1em;
}

.bb-shop-support-card {
	display: flex;
	flex-direction: column;
	padding: 1.5em;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.bb-shop-support-card:hover {
	border-color: #0066cc;
	box-shadow: 0 2px 12px rgba(0, 102, 204, 0.08);
}

.bb-shop-support-name {
	font-size: 1.1em;
	font-weight: 700;
	margin: 0 0 0.5em 0;
	color: #1a1a1a;
}

.bb-shop-support-price {
	font-size: 1.5em;
	font-weight: 800;
	color: #0066cc;
	margin-bottom: 0.5em;
}

.bb-shop-support-desc {
	font-size: 0.85em;
	color: #666;
	line-height: 1.4;
	margin: 0 0 0.75em 0;
	flex-grow: 1;
}

.bb-shop-support-features {
	list-style: none;
	padding: 0;
	margin: 0;
}

.bb-shop-support-features li {
	display: flex;
	align-items: flex-start;
	gap: 0.4em;
	font-size: 0.8em;
	color: #555;
	padding: 0.15em 0;
}

/* ─── Icons (inline SVG backgrounds) ──────────────────────── */
.bb-icon-shield,
.bb-icon-shield-check,
.bb-icon-cloud-upload,
.bb-icon-backup,
.bb-icon-database,
.bb-icon-key,
.bb-icon-users,
.bb-icon-clipboard-list,
.bb-icon-calendar,
.bb-icon-envelope,
.bb-icon-sticky-note,
.bb-icon-heart,
.bb-icon-activity,
.bb-icon-briefcase,
.bb-icon-box,
.bb-icon-server,
.bb-icon-headphones,
.bb-icon-file-check {
	background-size: 24px 24px;
	background-repeat: no-repeat;
	background-position: center;
}

/* Use data URI SVG icons for each category */
.bb-icon-shield { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.bb-icon-shield-check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.bb-icon-cloud-upload { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 16l-4-4-4 4'/%3E%3Cpath d='M12 12v9'/%3E%3Cpath d='M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3'/%3E%3C/svg%3E"); }
.bb-icon-backup { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 0-9-9 9 9 0 0 0-6.36 2.64L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M3 12a9 9 0 0 0 9 9 9 9 0 0 0 6.36-2.64L21 16'/%3E%3Cpath d='M21 21v-5h-5'/%3E%3C/svg%3E"); }
.bb-icon-database { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M21 12c0 1.66-4 3-9 3s-9-1.34-9-3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3C/svg%3E"); }
.bb-icon-key { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 6.5m0 0l3 3L22 6l-3-3'/%3E%3C/svg%3E"); }
.bb-icon-users { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.bb-icon-clipboard-list { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h6a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2v0a2 2 0 0 1 2-2z'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M9 16h6'/%3E%3C/svg%3E"); }
.bb-icon-calendar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); }
.bb-icon-envelope { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); }
.bb-icon-sticky-note { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.bb-icon-heart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); }
.bb-icon-activity { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E"); }
.bb-icon-briefcase { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E"); }
.bb-icon-box { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3C/svg%3E"); }
.bb-icon-server { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2' ry='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2' ry='2'/%3E%3Cline x1='6' y1='6' x2='6.01' y2='6'/%3E%3Cline x1='6' y1='18' x2='6.01' y2='18'/%3E%3C/svg%3E"); }
.bb-icon-headphones { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E"); }
.bb-icon-file-check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='M9 15l2 2 4-4'/%3E%3C/svg%3E"); }

/* ─── Sticky review bar ───────────────────────────────────── */
.bb-shop-sticky-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 2px solid #0066cc;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
	padding: 0.75em 1em;
	z-index: 999;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.bb-shop-sticky-bar--visible {
	transform: translateY(0);
}

.bb-shop-sticky-content {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}

.bb-shop-sticky-text {
	font-size: 0.95em;
	color: #444;
	font-weight: 500;
}

.bb-shop-sticky-cta {
	display: inline-block;
	padding: 0.5em 1.5em;
	background: #0066cc;
	color: #fff !important;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 700;
	font-size: 0.9em;
	white-space: nowrap;
	transition: background 0.2s;
}

.bb-shop-sticky-cta:hover {
	background: #005a87;
	color: #fff;
}

/* ─── Selected card state ─────────────────────────────────── */
.bb-shop-card--selected {
	border-color: #46b450 !important;
	box-shadow: 0 0 0 2px rgba(70, 180, 80, 0.2) !important;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
	.bb-shop-package-grid,
	.bb-shop-module-grid,
	.bb-shop-infra-grid,
	.bb-shop-support-grid {
		grid-template-columns: 1fr;
	}

	.bb-shop-section-title {
		font-size: 1.4em;
	}

	.bb-shop-price-amount {
		font-size: 1.6em;
	}
}

@media (max-width: 480px) {
	.bitbeam-package-shop {
		padding: 1em 0.5em;
	}

	.bb-shop-package-card,
	.bb-shop-module-card,
	.bb-shop-infra-card,
	.bb-shop-support-card {
		padding: 1em;
	}

	.bb-shop-builder-button {
		width: 100%;
		padding: 0.85em 1em;
	}

	.bb-shop-sticky-content {
		flex-direction: row;
		justify-content: space-between;
	}

	.bb-shop-sticky-text {
		font-size: 0.85em;
	}

	.bb-shop-sticky-cta {
		padding: 0.5em 1em;
		font-size: 0.85em;
	}
}