/**
 * BB Subscriptions — My Account restyle.
 *
 * Loaded only on account pages and only when the `account_restyle_enabled`
 * setting is on (see BB_Sub_Account_UI::enqueue). Live is unaffected until the
 * toggle is flipped at go-live.
 *
 * Design language: the email-template pill button (gradient #e04099 > #c13584,
 * radius 999) and the site's soft-pink card family (#fdf2f8 / #fbcfe8).
 *
 * Sections:
 *   1. Tokens
 *   2. Page shell + typography
 *   3. Sidebar (user chip + nav)
 *   4. Buttons
 *   5. Tables (orders, subscriptions list, generic)
 *   6. Status pills
 *   7. Notices
 *   8. Forms (addresses, account details, login)
 *   9. Address + payment method cards
 *  10. Dashboard (hero + quick-link tiles)
 *  11. Manage panel + cancel-save modal (moved from inline PHP)
 *  12. WCS detail tables + action buttons (moved from inline PHP)
 *  13. Responsive
 */

/* ---------------------------------------------------------------- 1. Tokens */
.woocommerce-account {
	--bb-pink: #e04099;
	--bb-pink-deep: #c13584;
	--bb-grad: linear-gradient(135deg, #e04099, #c13584);
	--bb-grad-hover: linear-gradient(135deg, #e852a6, #cf3d92);
	--bb-rose-bg: #fdf2f8;
	--bb-rose-line: #fbcfe8;
	--bb-rose-ink: #9d174d;
	--bb-ink: #1f2937;
	--bb-muted: #6b7280;
	--bb-faint: #9ca3af;
	--bb-line: #e7ebf1;
	--bb-line-soft: #f1f4f8;
	--bb-card: #ffffff;
	--bb-radius: 16px;
	--bb-radius-sm: 12px;
	--bb-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 16px rgba(16, 24, 40, 0.04);
}

/* --------------------------------------------- 2. Page shell + typography */
/* Soft page background so the white cards actually read as cards. */
.woocommerce-account #main,
.woocommerce-account .page-wrapper { background: #f8f6f9; }
/* Wider canvas than the theme's 1131px cap, account pages only. */
.woocommerce-account .page-wrapper.my-account .container,
.woocommerce-account .page-wrapper.my-account .row.vertical-tabs { max-width: 1200px; }
/* Flatsome draws a vertical rule between the sidebar and content columns. */
.woocommerce-account .col-divided,
.woocommerce-account .large-3,
.woocommerce-account .medium-4 { border-right: 0 !important; border-left: 0 !important; }
.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--bb-card);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow);
	padding: 14px;
	color: var(--bb-ink);
}
/* WCS prints its section titles (Subscription totals, Related orders, Billing
   address, Order details) as h2s, some direct children, some inside <section>
   wrappers; give each air above and keep it off the card edge (owner-tuned
   10px offsets, 2026-08-12). */
.woocommerce-account .woocommerce-MyAccount-content > h2 { margin-top: 28px; }
.woocommerce-account .woocommerce-MyAccount-content > h2:first-child { margin-top: 0; }
/* Descendant, not child: WCS nests some of these (Related subscriptions is
   section > header > h2), so a child selector missed them. */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title {
	margin-left: 10px;
	padding-top: 10px;
}
/* …except inside our own components, which manage their own spacing. */
.woocommerce-account .bb-manage h2,
.woocommerce-account .bb-acct-hero h2,
.woocommerce-account .bb-cs-box h2,
.woocommerce-account .bb-rev-card h2 { margin-left: 0; padding-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content h4 {
	font-family: inherit;
	font-weight: 800;
	color: var(--bb-ink);
	text-transform: none;
	letter-spacing: 0;
}
.woocommerce-account .woocommerce-MyAccount-content h2 { font-size: 1.25rem; }
.woocommerce-account .woocommerce-MyAccount-content h3 { font-size: 1.05rem; }
.woocommerce-account .woocommerce-MyAccount-content p { color: var(--bb-muted); }

/* ------------------------------------------------- 3. Sidebar: chip + nav */
/* The theme's "Username #12" chip: replaced by the welcome line under the
   page title (owner request 2026-08-12). */
.woocommerce-account .account-user { display: none !important; }
/* Rendered in the sidebar column (the only hook on every endpoint) and moved
   under the page title by JS. Hidden until it has been placed, otherwise it
   flashes above the sidebar for a beat on every page load. */
.bb-acct-welcome {
	display: none;
	font-size: 14px;
	font-weight: 700;
	color: var(--bb-muted);
	margin: 6px 0 0;
	text-align: center;
}
.bb-acct-welcome.is-under-title { display: block; }
.woocommerce-account .account-user-legacy {
	background: #fff;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow);
	padding: 14px 18px;
	font-weight: 800;
	color: var(--bb-ink);
	margin-bottom: 14px;
	font-size: 14px;
}
.woocommerce-account .account-user .image-icon { display: none; }
.woocommerce-account .woocommerce-MyAccount-navigation {
	background: var(--bb-card);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow);
	padding: 12px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
	border: 0 !important;
	margin: 2px 0;
}
/* Flatsome's .nav-line active-indicator: a 3px bar drawn by a::before at
   right:-2px, opacity 1 on active/hover. That is the pink sliver next to the
   pills. Kill both pseudos; our icons are real elements, not pseudos. */
.woocommerce-account .woocommerce-MyAccount-navigation li a::before,
.woocommerce-account .woocommerce-MyAccount-navigation li a::after {
	content: none !important;
	display: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	color: var(--bb-muted);
	text-transform: none;
	letter-spacing: 0;
	transition: background 0.15s, color 0.15s;
}
.woocommerce-account .woocommerce-MyAccount-navigation .bb-nav-ic {
	flex: 0 0 17px;
	width: 17px;
	height: 17px;
	display: inline-flex;
	color: var(--bb-faint);
	transition: color 0.15s;
}
.bb-nav-ic svg { width: 100%; height: 100%; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover .bb-nav-ic { color: var(--bb-pink-deep); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a .bb-nav-ic,
.woocommerce-account .woocommerce-MyAccount-navigation li.active a .bb-nav-ic { color: #fff; }
/* The same template renders inside the header account dropdown: no icons there. */
.nav-dropdown .bb-nav-ic, .account-dropdown .bb-nav-ic { display: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--bb-rose-bg);
	color: var(--bb-rose-ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li.active a {
	background: var(--bb-grad);
	color: #fff;
	box-shadow: 0 4px 14px rgba(193, 53, 132, 0.28);
}
/* No signup popup inside the logged-in account area: these people are already
   customers. Display only, the wck_* tracking scripts are untouched. */
.woocommerce-account form.klaviyo-form { display: none !important; }

/* Quiet the account-exit rows: they matter, they just should not compete. */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a,
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--wpf-delete-account a {
	color: var(--bb-faint);
	font-weight: 600;
	font-size: 12.5px;
}

/* ------------------------------------------------------------- 4. Buttons */
/* Default action button inside the account = quiet outline pill. The theme
   paints every .button with its solid pink + dark text and wins the load-order
   tie, so background/color/border are forced. */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button {
	background: #fff !important;
	color: #374151 !important;
	border: 1.5px solid #e2e7ee !important;
	border-radius: 999px !important;
	padding: 9px 20px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	line-height: 1.4;
	white-space: nowrap;
	transition: 0.15s;
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button:hover {
	border-color: var(--bb-pink) !important;
	color: var(--bb-pink-deep) !important;
	background: #fff !important;
}
/* Money-moving actions stay loud: Pay gets the brand CTA. */
.woocommerce-account .woocommerce-MyAccount-content .button.pay {
	background: var(--bb-grad) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 2px 10px rgba(193, 53, 132, 0.25) !important;
}
.woocommerce-account .woocommerce-MyAccount-content .button.pay:hover { background: var(--bb-grad-hover) !important; color: #fff !important; }
/* Destructive actions: red outline family. */
.woocommerce-account .woocommerce-MyAccount-content .button.cancel,
.woocommerce-account .woocommerce-MyAccount-content .button.delete {
	color: #b91c1c !important;
	border-color: #f0d2d2 !important;
}
.woocommerce-account .woocommerce-MyAccount-content .button.cancel:hover,
.woocommerce-account .woocommerce-MyAccount-content .button.delete:hover {
	border-color: #b91c1c !important;
	background: #fdf5f5 !important;
	color: #b91c1c !important;
}
/* Primary pill: the email-template CTA. Applied to the actions that move money
   or fix payment problems, not to every link on the page. */
.woocommerce-account .woocommerce-MyAccount-content .bb-btn-primary,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods + .button,
.woocommerce-account .woocommerce-MyAccount-content form + .button.add-payment-method,
.woocommerce-account .woocommerce-MyAccount-content a.button.add-payment-method,
.woocommerce-account .woocommerce-MyAccount-content button[name="save_address"],
.woocommerce-account .woocommerce-MyAccount-content button[name="save_account_details"],
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Payment .button {
	background: var(--bb-grad);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 12px 26px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 2px 10px rgba(193, 53, 132, 0.25);
}
.woocommerce-account .woocommerce-MyAccount-content .bb-btn-primary:hover,
.woocommerce-account .woocommerce-MyAccount-content a.button.add-payment-method:hover,
.woocommerce-account .woocommerce-MyAccount-content button[name="save_address"]:hover,
.woocommerce-account .woocommerce-MyAccount-content button[name="save_account_details"]:hover {
	background: var(--bb-grad-hover);
	color: #fff;
}

/* ------------------------------------ 5. Tables: orders, subs list, generic */
/* Any table inside the content area (orders, subscriptions, reviews, loyalty
   activity) gets the same calm card treatment. */
.woocommerce-account .woocommerce-MyAccount-content table {
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius-sm);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
	font-size: 0.9rem;
}
.woocommerce-account .woocommerce-MyAccount-content table th {
	background: #f8f9fb !important;
	color: var(--bb-muted) !important;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--bb-line);
}
.woocommerce-account .woocommerce-MyAccount-content table td {
	padding: 14px 16px;
	border: 0;
	border-bottom: 1px solid var(--bb-line-soft);
	vertical-align: middle;
	color: var(--bb-ink);
}
.woocommerce-account .woocommerce-MyAccount-content table tr:last-child td { border-bottom: 0; }
/* Product thumbnails inside tables (reviews page ships full-size images). */
.woocommerce-account .woocommerce-MyAccount-content table td img {
	max-width: 64px !important;
	width: 64px;
	height: auto;
	border-radius: 10px;
	border: 1px solid var(--bb-line-soft);
}
/* WCS prints a payment-method line under the next-payment date; on tokenless
   subscriptions it renders a bare "N/A". Noise either way in a list view. */
.woocommerce-account td.subscription-next-payment small { display: none; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius-sm);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
	font-size: 0.9rem;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
	background: #f8f9fb;
	color: var(--bb-muted);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--bb-line);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	padding: 14px 16px;
	border: 0;
	border-bottom: 1px solid var(--bb-line-soft);
	vertical-align: middle;
	color: var(--bb-ink);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td .button {
	padding: 7px 16px;
	font-size: 12px;
	margin: 2px 4px 2px 0;
}
/* Order / subscription number links read as links, not headings. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td a:not(.button) {
	color: var(--bb-pink-deep);
	font-weight: 700;
}

/* -------------------------------------------------------- 6. Status pills */
.woocommerce-account td.subscription-status,
.woocommerce-account td.order-status { font-weight: 700; }
.woocommerce-account .bb-status-pill {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}
.woocommerce-account .bb-status-pill.is-green { background: #ecfdf5; color: #047857; }
.woocommerce-account .bb-status-pill.is-amber { background: #fffbeb; color: #b45309; }
.woocommerce-account .bb-status-pill.is-grey { background: #f3f4f6; color: #6b7280; }
.woocommerce-account .bb-status-pill.is-red { background: #fef2f2; color: #b91c1c; }
.woocommerce-account .bb-status-pill.is-rose { background: var(--bb-rose-bg); color: var(--bb-rose-ink); }

/* ------------------------------------------------------------- 7. Notices */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	border-radius: var(--bb-radius-sm);
	border: 1px solid var(--bb-line);
	background: #f8f9fb;
	color: var(--bb-ink);
	box-shadow: none;
}

/* ---------------------------------------------------------------- 8. Forms */
.woocommerce-account .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
	border: 1.5px solid #e2e7ee;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 14px;
	box-shadow: none;
	transition: border-color 0.15s;
}
.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
	border-color: var(--bb-pink);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(224, 64, 153, 0.12);
}
.woocommerce-account .woocommerce-MyAccount-content label {
	font-weight: 700;
	font-size: 13px;
	color: var(--bb-ink);
	text-transform: none;
	letter-spacing: 0;
}
.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
	font-weight: 800;
	font-size: 1rem;
	color: var(--bb-ink);
	border: 0;
}

/* ------------------------------------- 9. Address + payment method cards */
/* The theme butts the two address columns against each other; a real gap. */
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .u-columns.woocommerce-Addresses {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}
.woocommerce-account .woocommerce-Addresses > div {
	flex: 1 1 300px;
	max-width: none;
	width: auto;
	float: none;
}
.woocommerce-account .woocommerce-Addresses .woocommerce-Address,
.woocommerce-account .woocommerce-Address {
	background: #fff;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius-sm);
	padding: 18px 20px;
	height: 100%;
}
.woocommerce-account .woocommerce-Address address { color: var(--bb-muted); font-style: normal; line-height: 1.7; }
/* Title row: heading left, the edit link as a small outline pill on the right
   (the theme renders it as a bare text link floating above the address). */
.woocommerce-account .woocommerce-Address-title,
.woocommerce-account .woocommerce-Address header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	border: 0;
}
.woocommerce-account .woocommerce-Address-title h3,
.woocommerce-account .woocommerce-Address header h3 { margin: 0; font-size: 1.05rem; }
.woocommerce-account .woocommerce-Address-title a.edit,
.woocommerce-account .woocommerce-Address a.edit {
	display: inline-block;
	background: #fff !important;
	color: #374151 !important;
	border: 1.5px solid #e2e7ee !important;
	border-radius: 999px !important;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	transition: 0.15s;
}
.woocommerce-account .woocommerce-Address a.edit:hover { border-color: var(--bb-pink) !important; color: var(--bb-pink-deep) !important; }

/* --------------------------------------- 10. Dashboard: hero + quick tiles */
.bb-acct-hero { margin: 0 0 22px; }
.bb-acct-hero h2 {
	margin: 0 0 4px;
	font-size: 1.45rem !important;
	font-weight: 800;
	color: var(--bb-ink);
}
.bb-acct-hero p { margin: 0; color: var(--bb-muted); font-size: 14px; }
.bb-acct-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 22px;
}
.bb-acct-tile {
	display: flex;
	align-items: center;
	gap: 13px;
	background: #fff;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius-sm);
	padding: 15px 16px;
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.bb-acct-tile:hover {
	border-color: var(--bb-rose-line);
	box-shadow: 0 6px 20px rgba(193, 53, 132, 0.1);
	transform: translateY(-1px);
}
.bb-acct-tile-icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--bb-rose-bg);
	color: var(--bb-pink-deep);
	display: flex;
	align-items: center;
	justify-content: center;
}
.bb-acct-tile-icon svg { width: 20px; height: 20px; }
.bb-acct-tile-label {
	font-weight: 800;
	font-size: 13.5px;
	color: var(--bb-ink);
	line-height: 1.3;
}
.bb-acct-tile-desc { font-size: 12px; color: var(--bb-faint); margin-top: 1px; }
.bb-acct-help {
	margin-top: 22px;
	padding: 14px 18px;
	background: var(--bb-rose-bg);
	border: 1px solid var(--bb-rose-line);
	border-radius: var(--bb-radius-sm);
	font-size: 13px;
	color: var(--bb-rose-ink);
}
.bb-acct-help a { color: var(--bb-pink-deep); font-weight: 700; text-decoration: underline; }

/* Status card (rendered by BB_Sub_Account::dashboard_status_card). */
.bb-acc-cards { display: grid; gap: 12px; margin: 0 0 4px; }
.bb-acc-card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: linear-gradient(135deg, #fdf2f8, #fbe8f3);
	border: 1px solid #f5d0e6;
	border-radius: var(--bb-radius);
	padding: 16px 18px;
}
.bb-acc-card-emoji { font-size: 26px; }
.bb-acc-card-img {
	width: 54px;
	height: 54px;
	border-radius: 12px;
	object-fit: cover;
	border: 1px solid #f5d0e6;
	background: #fff;
	flex: 0 0 54px;
}
.bb-acc-card-meta { font-size: 12.5px; color: #a34d7d; margin-top: 3px; font-weight: 600; }
.bb-acc-card-body { flex: 1; }
.bb-acc-card-title { font-weight: 800; color: #9d174d; font-size: 15px; }
.bb-acc-card-sub { color: #831843; font-size: 13px; margin-top: 2px; }
.bb-acc-card-btn {
	background: var(--bb-grad);
	color: #fff !important;
	text-decoration: none;
	padding: 9px 20px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
}

/* --------------------------- 11. Manage panel + cancel-save modal (moved) */
.bb-manage {
	margin: 18px 0;
	padding: 24px;
	border: 1px solid #e7ebf1;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.bb-manage-h { margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; color: #1f2937; }
.bb-manage-next { font-size: 13.5px; color: #374151; margin: 0 0 12px; }
.bb-manage-window { color: #16a34a; font-weight: 600; }
.bb-manage-window.locked { color: #b91c1c; }
.bb-manage-block { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.bb-manage-label { font-weight: 700; font-size: 13px; color: #6b7280; min-width: 96px; }
.bb-pills { display: flex; gap: 8px; flex-wrap: wrap; }
/* The theme paints every <button> with its pink CTA background. Every colour below is
   forced, or we end up with the theme's pink behind our dark text. */
.bb-pill {
	background: #fff !important;
	border: 1.5px solid #e5e7eb !important;
	border-radius: 999px;
	padding: 8px 16px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	transition: 0.15s;
	color: #374151 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
.bb-pill:hover { border-color: #e04099 !important; color: #c13584 !important; background: #fff !important; }
.bb-pill:disabled { opacity: 0.5; cursor: default; }
.bb-skip-reason { padding: 8px 11px; border: 1.5px solid #e5e7eb; border-radius: 10px; font-size: 13px; min-height: 44px; background: #fff; }
.bb-skip-btn { border-color: #f1d4e4; }
/* The confirm-skip row is revealed by the Skip pill; [hidden] must beat the
   block's flex display (same trap as the cancel modal). */
.bb-skip-row[hidden] { display: none !important; }
.bb-skip-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Subscription identity header at the top of the manage panel. */
.bb-sub-hero {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--bb-line-soft);
	margin-bottom: 18px;
}
.bb-sub-hero img, .bb-sub-hero-img {
	width: 64px !important;
	height: 64px;
	max-width: 64px !important;
	border-radius: 14px;
	border: 1px solid var(--bb-line);
	background: #fff;
	object-fit: cover;
	flex: 0 0 64px;
}
.bb-sub-hero-info { flex: 1; min-width: 0; }
.bb-sub-hero-item { display: block; font-weight: 800; font-size: 15.5px; color: var(--bb-ink); line-height: 1.4; }
.bb-sub-hero-itemprice { font-weight: 600; font-size: 13px; color: var(--bb-muted); }
.bb-sub-hero-price { font-weight: 700; font-size: 13.5px; color: var(--bb-pink-deep); margin-top: 3px; }
.bb-sub-hero-info .bb-manage-next { margin: 8px 0 0; }
.bb-sub-hero-status { flex: 0 0 auto; margin-top: 4px; }
.bb-manage .bb-manage-h { font-size: 0.95rem !important; }
/* Action chips under the next-order line: soft neutral chips with a small
   pink icon each, sentence case (the theme uppercases buttons), rose hover.
   Clearly controls OF the order above them, not standalone buttons. */
.bb-hero-actions { margin-top: 12px; }
.bb-hero-actions .bb-pill,
.bb-skip-row .bb-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #f6f7f9 !important;
	border: 1px solid transparent !important;
	color: #374151 !important;
	padding: 9px 16px;
	font-size: 12.5px;
	border-radius: 10px;
	text-transform: none !important;
	letter-spacing: 0.01em !important;
}
.bb-hero-actions .bb-pill:hover,
.bb-skip-row .bb-pill:hover {
	background: var(--bb-rose-bg) !important;
	border-color: var(--bb-rose-line) !important;
	color: var(--bb-rose-ink) !important;
}
.bb-act-ic { width: 15px; height: 15px; display: inline-flex; color: var(--bb-pink-deep); flex: 0 0 15px; }
.bb-act-ic svg { width: 100%; height: 100%; }
.bb-sub-hero .bb-skip-row { margin-top: 10px; }

/* Multiple bottles side by side when the subscription has several products. */
.bb-sub-hero-imgs { display: flex; gap: 8px; flex: 0 0 auto; }
.bb-sub-hero-imgs.multi img { width: 52px !important; max-width: 52px !important; height: 52px; }

/* Add-to-subscription confirmation modal line items. */
.bb-swap-lines { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.bb-swap-line {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid var(--bb-line);
	border-radius: 10px;
}
.bb-swap-line img {
	width: 40px !important;
	max-width: 40px !important;
	height: 40px;
	border-radius: 8px;
	border: 1px solid var(--bb-line-soft);
	object-fit: cover;
	flex: 0 0 40px;
}
.bb-swap-line.is-new { background: var(--bb-rose-bg); border-color: var(--bb-rose-line); }
.bb-swap-name { font-weight: 700; font-size: 13px; color: var(--bb-ink); flex: 1; min-width: 0; }
.bb-swap-price { font-weight: 700; font-size: 13px; color: var(--bb-muted); white-space: nowrap; }
.bb-swap-line.is-new .bb-swap-price { color: var(--bb-pink-deep); }
.bb-swap-total { font-size: 13.5px; color: var(--bb-muted) !important; margin: 0 0 14px !important; }
.bb-swap-total strong { color: var(--bb-ink); }

/* "You have X% off waiting" — shown on the dashboard card and the manage panel
   whenever _bb_save_cycles > 0, so the customer is never surprised by the price. */
.bb-pending-note {
	display: inline-block;
	margin: 10px 0 0;
	padding: 7px 14px;
	border-radius: 999px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #047857;
	font-weight: 700;
	font-size: 12.5px;
}
.bb-acc-card-deal {
	margin-top: 4px;
	font-weight: 800;
	font-size: 12.5px;
	color: #047857;
}
.bb-pending-note s, .bb-acc-card-deal s { opacity: 0.65; font-weight: 600; margin-left: 2px; }
.bb-pending-note .amount, .bb-acc-card-deal .amount { white-space: nowrap; }

/* Compact cross-sell card inside the manage panel. */
.bb-upsell {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	padding: 12px 14px;
	background: var(--bb-rose-bg);
	border: 1px solid var(--bb-rose-line);
	border-radius: var(--bb-radius-sm);
}
.bb-upsell img, .bb-upsell-img {
	width: 44px !important;
	height: 44px;
	max-width: 44px !important;
	border-radius: 10px;
	border: 1px solid var(--bb-rose-line);
	background: #fff;
	object-fit: cover;
	flex: 0 0 44px;
}
.bb-upsell-info { flex: 1; min-width: 0; }
.bb-upsell-name { font-weight: 800; font-size: 13.5px; color: var(--bb-rose-ink); }
.bb-upsell-price { font-size: 12.5px; color: #a34d7d; margin-top: 2px; }
.bb-upsell-btn {
	background: var(--bb-grad) !important;
	color: #fff !important;
	border-color: transparent !important;
	padding: 0 22px !important; /* theme line-height provides the height; owner-tuned */
	flex: 0 0 auto;
	margin: 0 !important; /* theme button margin-bottom pushed it off vertical center */
	align-self: center;
}
.bb-upsell-btn:hover { background: var(--bb-grad-hover) !important; color: #fff !important; }
.bb-manage-msg { margin-top: 8px; font-weight: 600; font-size: 13px; color: #16a34a; }
.bb-manage-msg.err { color: #b91c1c; }
.bb-cs-modal {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 20px;
	backdrop-filter: blur(3px);
}
/* CRITICAL: display:flex above overrides the browser's [hidden]{display:none}, which made
   the modal permanently visible on page load AND made the close button useless (it only
   toggles the hidden attribute). This rule restores the hidden attribute's authority. */
.bb-cs-modal[hidden] { display: none !important; }
.bb-cs-box {
	background: #fff;
	border-radius: 18px;
	max-width: 440px;
	width: 100%;
	padding: 26px 26px 20px;
	position: relative;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
/* Theme buttons carry a default bottom margin that opened big gaps inside the
   modal; and the empty status line should take no space until it has text. */
.bb-cs-box .bb-pill { margin: 0 !important; }
.bb-cs-foot { margin-top: 12px !important; }
.bb-cs-foot .bb-cs-link { margin: 0 !important; }
.bb-cs-msg:empty { display: none; }
.bb-cs-close svg { width: 13px; height: 13px; display: block; }
.bb-cs-close {
	position: absolute;
	top: 14px;
	right: 14px;
	background: #f3f4f6 !important;
	border: 0 !important;
	box-shadow: none !important;
	font-size: 18px;
	line-height: 1 !important;
	color: #6b7280 !important;
	cursor: pointer;
	/* The theme gives every <button> a min-height/padding that stretched this
	   into an oval; every box property is pinned so it stays a circle. */
	width: 30px !important;
	height: 30px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-height: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
}
.bb-cs-close:hover { background: #e5e7eb !important; color: #374151 !important; }
.bb-cs-box h4 { margin: 0 30px 8px 0; font-size: 19px; font-weight: 800; color: #1f2937; }
.bb-cs-box p { margin: 0 0 14px; color: #6b7280; font-size: 14px; }
.bb-cs-box .bb-pills { flex-direction: column; gap: 9px; }
/* Retention options are the actions we want clicked, so they get the solid brand CTA.
   text-transform is forced off: the theme uppercases buttons, which reads as shouting
   at someone who is already halfway out the door. */
.bb-cs-box .bb-pill {
	width: 100%;
	text-align: center;
	padding: 13px 14px;
	font-size: 14.5px;
	font-weight: 700;
	text-transform: none !important;
	letter-spacing: 0 !important;
	background: linear-gradient(135deg, #e04099, #c13584) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 2px 8px rgba(193, 53, 132, 0.22) !important;
}
.bb-cs-box .bb-pill:hover {
	background: linear-gradient(135deg, #e852a6, #cf3d92) !important;
	color: #fff !important;
	border-color: transparent !important;
}
.bb-cs-accent { background: linear-gradient(135deg, #e04099, #c13584) !important; color: #fff !important; border-color: transparent !important; }
.bb-cs-foot { margin-top: 18px; text-align: center; }
/* The escape hatch stays a quiet text link on purpose: it must be easy to find and
   never compete with the offer above it. Underline only on hover. */
.bb-cs-link {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: #8a94a3 !important;
	cursor: pointer;
	font-weight: 600;
	font-size: 13px;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none;
	padding: 6px 4px !important;
	border-radius: 0;
	transition: color 0.15s;
}
.bb-cs-link:hover { color: #c13584 !important; background: none !important; text-decoration: underline; }
.bb-cs-link.muted { color: #9ca3af !important; font-size: 12.5px; }
.bb-fact-row { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.bb-fact {
	background: var(--bb-rose-bg);
	border: 1px solid var(--bb-rose-line);
	color: var(--bb-rose-ink);
	border-radius: 999px;
	padding: 5px 14px;
	font-weight: 800;
	font-size: 15px;
}
.bb-fact-vs { font-size: 13px; color: var(--bb-faint); }
.bb-cs-msg { margin-top: 10px; text-align: center; font-weight: 700; font-size: 13px; color: #16a34a; }

/* ------------------- 12. WCS detail tables + action buttons (moved) */
.woocommerce table.subscription_details,
.woocommerce table.order_details,
.woocommerce-page table.subscription_details {
	border: 1px solid #e7ebf1 !important;
	border-radius: 14px !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden;
	background: #fff;
}
.woocommerce table.subscription_details td, .woocommerce table.subscription_details th,
.woocommerce table.order_details td, .woocommerce table.order_details th {
	border: 0 !important;
	border-bottom: 1px solid #f1f4f8 !important;
	padding: 12px 16px !important;
	font-size: 0.9rem;
}
.woocommerce table.subscription_details tr:last-child td, .woocommerce table.subscription_details tr:last-child th,
.woocommerce table.order_details tr:last-child td, .woocommerce table.order_details tr:last-child th { border-bottom: 0 !important; }
/* The WCS action buttons: quiet outline family, one look, no shouting. */
.woocommerce table.subscription_details .button,
.woocommerce .subscription_details .button {
	background: #fff !important;
	color: #374151 !important;
	border: 1.5px solid #e2e7ee !important;
	border-radius: 10px !important;
	padding: 9px 16px !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	text-transform: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	margin: 2px 6px 2px 0 !important;
	transition: 0.15s;
}
.woocommerce table.subscription_details .button:hover { border-color: #e04099 !important; color: #c13584 !important; background: #fff !important; }
.woocommerce table.subscription_details .button.cancel { color: #b91c1c !important; border-color: #f0d2d2 !important; }
.woocommerce table.subscription_details .button.cancel:hover { border-color: #b91c1c !important; background: #fdf5f5 !important; }

/* ------------------------- 12b. Points & Rewards (WPLoyalty, wlr-*) */
/* Headings: body font, consistent casing ("rewards opportunities" ships
   lowercase), our pink accent bar. */
.woocommerce-account .wlr-heading,
.woocommerce-account .wlr-myaccount-page h3 {
	font-family: inherit !important;
	font-size: 1.1rem !important;
	font-weight: 800 !important;
	color: var(--bb-ink) !important;
	text-transform: capitalize;
	letter-spacing: 0 !important;
	border-color: var(--bb-pink) !important;
}
.woocommerce-account .wlr-myaccount-page h4,
.woocommerce-account .wlr-name {
	font-family: inherit !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none;
}
/* One border per card, never nested. WPLoyalty draws its own borders on the
   outer card AND inner containers (wlr-border-color ships #CFCFCF, earning
   cards #8d87f2 indigo), which stacked into double/triple outlines. */
.woocommerce-account .wlr-border-color { border-color: var(--bb-line) !important; }
.woocommerce-account .wlr-points-container,
.woocommerce-account #wlr-points {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	gap: 14px;
}
.woocommerce-account .wlr-points-container hr,
.woocommerce-account #wlr-points hr { display: none; }
.woocommerce-account .wlr-points-container > div > div,
.woocommerce-account #wlr-points > div {
	border: 1px solid var(--bb-line) !important;
	border-radius: var(--bb-radius-sm) !important;
	background: #fff;
}
.woocommerce-account .wlr-reward-card,
.woocommerce-account .wlr-card {
	border: 1px solid var(--bb-line) !important;
	border-radius: var(--bb-radius-sm) !important;
	background: #fff;
	box-shadow: none !important;
}
/* Everything inside a card loses its own outline. */
.woocommerce-account .wlr-reward-card .wlr-card-container,
.woocommerce-account .wlr-card .wlr-card-container,
.woocommerce-account .wlr-card-inner-container,
.woocommerce-account .wlr-card-icon-container,
.woocommerce-account .wlr-point-conversion-section,
.woocommerce-account .wlr-point-conversion-box,
.woocommerce-account .wlr-input-point-section {
	border: 0 !important;
	box-shadow: none !important;
}
/* The Used-rewards card ships a currency <select> ("USD") that is pure noise
   for a customer whose rewards are all one currency. Hidden per owner request
   2026-08-12; the value below it already renders in the right currency. */
.woocommerce-account #wlr_currency_list { display: none !important; }

/* The little "points conversion" corner label reads as a quiet tag. */
.woocommerce-account .wlr-reward-type-name {
	border: 0 !important;
	background: #f8f9fb;
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 11px;
	font-weight: 700;
	color: var(--bb-muted);
}
/* WPLoyalty's own buttons ship indigo; pull them onto the brand CTA. */
.woocommerce-account .wlr-button,
.woocommerce-account .wlr-button-action {
	background: var(--bb-grad) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	text-transform: none !important;
	box-shadow: 0 2px 10px rgba(193, 53, 132, 0.25) !important;
}
.woocommerce-account .wlr-button:hover { background: var(--bb-grad-hover) !important; }
/* Referral: one border on the box, none on the input inside it. */
.woocommerce-account .wlr-referral-box {
	border: 1.5px solid #e2e7ee !important;
	border-radius: 10px !important;
	background: #fff;
	overflow: hidden;
}
.woocommerce-account .wlr_referral_url,
.woocommerce-account .wlr-referral-box input {
	border: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	font-size: 13.5px;
}
/* Activity table header ships in pink; the shared neutral table look already
   covers it via the generic rules, this catches WPLoyalty's own th styling. */
.woocommerce-account .wlr-myaccount-page table th { background: #f8f9fb !important; color: var(--bb-muted) !important; }
/* Breathing room between the page's stacked sections. */
.woocommerce-account .wlr-heading-container { margin: 26px 0 14px; }
.woocommerce-account .wlr-myaccount-page .wlr-heading-container:first-child { margin-top: 0; }
/* Pagination row: give the Next/Prev pill some air inside its cell. WPLoyalty
   sets its own font-size 16px + padding-left 10px on these ids after our
   sheet loads, which knocked the label off-center. */
.woocommerce-account .wlr-table td[colspan] { padding: 12px 16px !important; }
.woocommerce-account #wlr-next-button,
.woocommerce-account #wlr-prev-button {
	display: inline-block;
	margin: 2px 4px;
	padding: 9px 20px !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	text-align: center !important;
}

/* Point-conversion reveal (after "Redeem Now"): the points input ships ~60px
   wide (4-digit balances get clipped) inside yet another bordered wrapper,
   with an empty spacer div pushing everything down. */
.woocommerce-account .wlr-input-point-conversion { border: 0 !important; box-shadow: none !important; }
.woocommerce-account input.wlr-point-conversion-box {
	width: 96px !important;
	min-width: 96px !important;
	border: 1.5px solid #e2e7ee !important;
	border-radius: 10px !important;
	padding: 8px 10px !important;
	font-size: 14px !important;
	text-align: center;
	background: #fff;
}
.woocommerce-account [id^="wlr-point-conversion-section"] {
	gap: 12px !important;
	align-items: center;
	flex-wrap: wrap;
}
.woocommerce-account .wlr-point-label-content { border: 0 !important; display: flex; align-items: center; }
.woocommerce-account [id^="wlr_point_conversion_div"] div:empty { display: none; }
.woocommerce-account [id^="wlr_point_conversion_div"] { padding-top: 6px; }

/* Woo notices float as toasts over the page (owner request 2026-08-12, same
   feel as the custom checkout messages) instead of pushing the layout down. */
.woocommerce-account .woocommerce-message.message-wrapper,
.woocommerce-account .woocommerce-info.message-wrapper,
.woocommerce-account .woocommerce-error.message-wrapper {
	position: fixed;
	top: 100px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99998;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	width: auto;
	max-width: min(680px, calc(100vw - 30px));
	animation: bbToastIn 0.3s ease;
	transition: opacity 0.4s ease, transform 0.4s ease;
}
body.admin-bar .woocommerce-account .woocommerce-message.message-wrapper,
body.admin-bar .woocommerce-account .woocommerce-info.message-wrapper,
body.admin-bar .woocommerce-account .woocommerce-error.message-wrapper { top: 132px; }
.woocommerce-account .message-wrapper.bb-notice-hide {
	opacity: 0;
	transform: translateX(-50%) translateY(-10px);
	pointer-events: none;
}
@keyframes bbToastIn {
	from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.woocommerce-account .message-wrapper .message-container {
	border-radius: 12px;
	padding: 13px 20px;
	background: #ecfdf5;
	color: #047857;
	border: 1px solid #a7f3d0;
	font-weight: 600;
	font-size: 13.5px;
	box-shadow: 0 10px 34px rgba(16, 24, 40, 0.16);
}
.woocommerce-account .woocommerce-error .message-container,
.woocommerce-account .message-wrapper .message-container.alert-color {
	background: #fef2f2;
	color: #b91c1c;
	border-color: #fecaca;
}

/* -------------------------- 12a2. Reviews: full-text review cards */
.bb-rev-empty { text-align: center; color: var(--bb-muted); padding: 30px 0; }
.bb-rev-card {
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius-sm);
	padding: 16px 18px;
	background: #fff;
	margin-bottom: 12px;
}
.bb-rev-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bb-rev-img, .bb-rev-head img {
	width: 46px !important;
	height: 46px;
	border-radius: 10px;
	border: 1px solid var(--bb-line-soft);
	object-fit: cover;
	flex: 0 0 46px;
	max-width: 46px !important;
}
.bb-rev-name { font-weight: 800; font-size: 14px; }
.bb-rev-name a { color: var(--bb-ink); }
.bb-rev-name a:hover { color: var(--bb-pink-deep); }
.bb-rev-stars { color: #f59e0b; font-size: 14px; letter-spacing: 2px; margin-top: 2px; }
.bb-rev-stars .off { color: #e5e7eb; }
.bb-rev-meta { margin-left: auto; text-align: right; font-size: 12px; color: var(--bb-faint); }
.bb-rev-body { color: #374151; font-size: 14px; line-height: 1.65; }
.bb-rev-body p:last-child { margin-bottom: 0; }

/* Notices get keyboard focus on render (role=alert tabindex=-1) and the
   browser paints a focus ring that reads as a broken double border. */
.woocommerce-account .message-wrapper,
.woocommerce-account .message-wrapper:focus,
.woocommerce-account .message-wrapper:focus-visible { outline: 0 !important; box-shadow: none !important; }

/* --------------------------------- 12c. Delete Account (wpf plugin form) */
.woocommerce-account .wpfda-password-confirm label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 13px; }
.woocommerce-account .wpfda-delete-account-container { max-width: 460px; }
.bb-danger-intro {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--bb-radius-sm);
	padding: 18px 20px;
	margin-bottom: 20px;
}
.bb-danger-intro h3 { margin: 0 0 6px; font-size: 1.05rem; color: #991b1b !important; }
.bb-danger-intro p { margin: 0 0 6px; color: #7f1d1d !important; font-size: 13.5px; }
.bb-danger-intro p:last-child { margin-bottom: 0; }
.bb-danger-intro a { color: var(--bb-pink-deep); font-weight: 700; text-decoration: underline; }
/* The plugin's bare password input + submit. Scoped via :has so the red
   submit cannot leak onto other account forms. */
.woocommerce-account .woocommerce-MyAccount-content:has(.bb-danger-intro) input[type="password"] {
	border: 1.5px solid #e2e7ee;
	border-radius: 10px;
	padding: 10px 14px;
	max-width: 420px;
}
.woocommerce-account .woocommerce-MyAccount-content:has(.bb-danger-intro) [type="submit"] {
	background: #fff !important;
	color: #b91c1c !important;
	border: 1.5px solid #f0d2d2 !important;
	border-radius: 999px !important;
	padding: 11px 24px !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	margin-top: 10px;
	transition: 0.15s;
}
.woocommerce-account .woocommerce-MyAccount-content:has(.bb-danger-intro) [type="submit"]:hover {
	background: #fdf5f5 !important;
	border-color: #b91c1c !important;
}

/* ---------------------------------------------------------- 13. Responsive */
@media (max-width: 980px) {
	.bb-acct-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.woocommerce-account .woocommerce-MyAccount-content { padding: 14px; }
	.bb-acct-tiles { grid-template-columns: 1fr; }
}

/* Pass 11 (2026-09-05): rewards block info + next-order saving */
.bb-reward-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.bb-reward-info{font-size:13px;color:#4b5563;line-height:1.4}
.bb-pending-save{color:#1a7f4b;font-weight:700}

/* Pass 11 #22: fair-use notes under the action pills */
.bb-usage-notes{margin:6px 0 0;font-size:12px;color:#6b7280}
.bb-usage-note{font-size:12px;color:#6b7280;white-space:nowrap}
.bb-usage-sep{color:#d1d5db;margin:0 2px}
.bb-cs-step .bb-usage-note{display:block;margin-top:4px}