/**
 * BN360 Subscription Portal — My Account "Subscriptions" page styles.
 *
 * v0.11.1 COMPLETE REWRITE. Every selector is prefixed .bn360-account-*
 * and scoped under the single root class .bn360-account-subscriptions —
 * no bare element selectors (a, button, h2, ...) anywhere in this file,
 * so nothing here can bleed into the rest of the theme/My Account.
 *
 * ROOT CAUSE OF THE PRE-v0.11.1 UNREADABLE-BUTTON DEFECT, confirmed by
 * reading the actual shipped CSS (see this release's report for the
 * full writeup): BN360's account action buttons previously had NO
 * explicit background, text color, or border of their own anywhere —
 * they relied entirely on the active theme's own `.button` class
 * styling, with zero BN360-owned specificity to guarantee readable
 * text. Any theme convention pairing a light/transparent button text
 * color with a light background (a common "ghost button" pattern) broke
 * them. THE FIX: every button below (`.bn360-account-btn` and its three
 * tier modifiers) declares an explicit background, text color, border,
 * hover state, focus state, and disabled state — nothing is left to the
 * theme to guess, and every property is driven by a CSS custom property
 * (see BN360_Meal_Plan_Account_Appearance::render_css_variables()) with
 * a safe, high-contrast hardcoded fallback.
 */

.bn360-account-subscriptions {
	max-width: var(--bn360-acct-page-max-width, 900px);
	color: var(--bn360-acct-color-text-primary, #1d2327);
	font-size: var(--bn360-acct-body-size, 15px);
	line-height: 1.5;
}

.bn360-account-subscriptions * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   CARD
--------------------------------------------------------------------- */

.bn360-account-card {
	background: var(--bn360-acct-card-bg, #fff);
	border: var(--bn360-acct-card-border-width, 1px) solid var(--bn360-acct-card-border, #e2e2e2);
	border-radius: var(--bn360-acct-card-radius, 10px);
	padding: var(--bn360-acct-card-padding, 24px);
	margin-bottom: var(--bn360-acct-section-spacing, 24px);
	box-shadow: var(--bn360-acct-card-shadow, 0 1px 3px rgba(0,0,0,0.08));
}

.bn360-account-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.bn360-account-card__title {
	margin: 0;
	font-size: var(--bn360-acct-title-size, 22px);
	font-weight: var(--bn360-acct-title-weight, 700);
	color: var(--bn360-acct-color-text-primary, #1d2327);
}

.bn360-account-meta {
	color: var(--bn360-acct-color-text-secondary, #50575e);
	font-size: var(--bn360-acct-meta-size, 13px);
	margin: 4px 0 0;
}

/* ---------------------------------------------------------------------
   STATUS BADGE — never depends on color alone; the label text itself
   ("Active", "Paused", "Action Needed", "Payment Attention",
   "Canceled") is always the primary signal.
--------------------------------------------------------------------- */

.bn360-account-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--bn360-acct-badge-radius, 12px);
	font-size: var(--bn360-acct-badge-font-size, 11px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.bn360-account-badge--active {
	background: #e5f5ea;
	color: #1e7b34;
}

.bn360-account-badge--paused {
	background: #fff3cd;
	color: #8a6100;
}

.bn360-account-badge--attention {
	background: #fdf2f1;
	color: #a94442;
}

.bn360-account-badge--cancelled {
	background: #f1f1f1;
	color: #666;
}

/* ---------------------------------------------------------------------
   SECTIONS — the standard content division used for Upcoming Meals,
   Delivery Address, Recent Deliveries, and the previous-delivery
   summary.
--------------------------------------------------------------------- */

.bn360-account-section {
	margin-top: var(--bn360-acct-section-spacing, 24px);
	padding-top: var(--bn360-acct-section-spacing, 24px);
	border-top: 1px solid var(--bn360-acct-color-border, #e2e2e2);
}

.bn360-account-section h4 {
	margin: 0 0 12px;
	font-size: var(--bn360-acct-heading-size, 13px);
	font-weight: var(--bn360-acct-heading-weight, 700);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--bn360-acct-color-text-secondary, #50575e);
}

/* ---------------------------------------------------------------------
   UPCOMING DELIVERY — its own visually distinct hero panel, per
   explicit instruction to give it the strongest visual priority on the
   card (never equal emphasis to historical/last-delivery information).
--------------------------------------------------------------------- */

.bn360-account-upcoming {
	background: var(--bn360-acct-upcoming-bg, #f6faf7);
	border: 1px solid var(--bn360-acct-upcoming-border, #cfe8d8);
	border-radius: var(--bn360-acct-card-radius, 10px);
	padding: 18px 20px;
	margin-top: 16px;
}

.bn360-account-upcoming h4 {
	margin: 0 0 4px;
	font-size: var(--bn360-acct-heading-size, 13px);
	font-weight: var(--bn360-acct-heading-weight, 700);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--bn360-acct-upcoming-accent, #2c6e49);
}

.bn360-account-upcoming__date {
	font-size: calc(var(--bn360-acct-title-size, 22px) * 0.9);
	font-weight: 700;
	color: var(--bn360-acct-color-text-primary, #1d2327);
	margin-bottom: 6px;
}

.bn360-account-upcoming p {
	margin: 0 0 14px;
	color: var(--bn360-acct-color-text-secondary, #50575e);
	font-size: var(--bn360-acct-body-size, 15px);
}

.bn360-account-upcoming--closed {
	background: #f6f7f7;
	border-color: #e2e2e2;
}

.bn360-account-upcoming--closed h4 {
	color: var(--bn360-acct-color-text-secondary, #50575e);
}

/* ---------------------------------------------------------------------
   PAYMENT / ACTION-NEEDED ALERT — a real, semantic alert panel, never a
   thin line of inline colored text. Icon + text together, never color
   alone.
--------------------------------------------------------------------- */

.bn360-account-alert {
	background: var(--bn360-acct-alert-bg, #fdf2f1);
	border: 1px solid var(--bn360-acct-alert-border, #e2b4b0);
	border-radius: var(--bn360-acct-card-radius, 10px);
	padding: 16px 20px;
	margin-bottom: 16px;
}

.bn360-account-alert__title {
	margin: 0 0 6px;
	font-size: var(--bn360-acct-body-size, 15px);
	font-weight: 700;
	color: var(--bn360-acct-alert-title-color, #8a2a24);
}

.bn360-account-alert__title::before {
	content: "\26A0 ";
}

.bn360-account-alert p {
	margin: 0 0 12px;
	color: var(--bn360-acct-alert-text-color, #5c1e1a);
	font-size: var(--bn360-acct-body-size, 15px);
}

.bn360-account-alert p:last-of-type {
	margin-bottom: 0;
}

.bn360-account-alert .bn360-account-btn {
	margin-top: 4px;
}

/* ---------------------------------------------------------------------
   MEAL ROWS — replaces the old bare bullet list with a real row/card
   per meal, product image included when available.
--------------------------------------------------------------------- */

.bn360-account-meal-row {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 12px 0;
	border-bottom: 1px solid var(--bn360-acct-color-border, #f0f0f0);
}

.bn360-account-meal-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.bn360-account-meal-row__image {
	width: 56px;
	height: 56px;
	flex: 0 0 auto;
	border-radius: 6px;
	background: #f4f4f4;
	background-size: cover;
	background-position: center;
}

.bn360-account-meal-row__body strong {
	display: block;
	font-size: var(--bn360-acct-meta-size, 13px);
	font-weight: 700;
	color: var(--bn360-acct-color-text-secondary, #50575e);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 2px;
}

.bn360-account-meal-row__body > div:not(.bn360-account-meta) {
	font-size: var(--bn360-acct-body-size, 15px);
	font-weight: 600;
	color: var(--bn360-acct-color-text-primary, #1d2327);
}

.bn360-account-meal-row .bn360-account-meta {
	margin-top: 2px;
}

.bn360-account-meal-row--attention {
	background: #fdf9f0;
	border-radius: 6px;
	padding: 12px;
}

/* ---------------------------------------------------------------------
   BUTTONS — THE CONFIRMED FIX for the pre-v0.11.1 unreadable-button
   defect (see this file's own top-of-file docblock, and this release's
   report, for the full root-cause writeup). Every property explicit;
   nothing inherited from the theme's own `.button` class.
--------------------------------------------------------------------- */

.bn360-account-btn {
	display: inline-block;
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	font-size: var(--bn360-acct-body-size, 15px);
	font-weight: 600;
	line-height: 1.4;
	padding: 10px 18px;
	border-radius: var(--bn360-acct-btn-radius, 6px);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.bn360-account-btn--primary {
	background: var(--bn360-acct-btn-primary-bg, #2c6e49);
	color: var(--bn360-acct-btn-primary-text, #ffffff);
	border: 1px solid var(--bn360-acct-btn-primary-border, #2c6e49);
}

.bn360-account-btn--primary:hover,
.bn360-account-btn--primary:focus {
	background: var(--bn360-acct-btn-primary-hover-bg, #255c3d);
	color: var(--bn360-acct-btn-primary-text, #ffffff);
}

.bn360-account-btn--secondary {
	background: var(--bn360-acct-btn-secondary-bg, #ffffff);
	color: var(--bn360-acct-btn-secondary-text, #1d2327);
	border: 1px solid var(--bn360-acct-btn-secondary-border, #c3c4c7);
}

.bn360-account-btn--secondary:hover,
.bn360-account-btn--secondary:focus {
	background: var(--bn360-acct-btn-secondary-hover-bg, #f0f0f1);
	color: var(--bn360-acct-btn-secondary-text, #1d2327);
}

.bn360-account-btn--destructive {
	background: transparent;
	color: var(--bn360-acct-btn-destructive-text, #a94442);
	border: 1px solid var(--bn360-acct-btn-destructive-border, #e2b4b0);
}

.bn360-account-btn--destructive:hover,
.bn360-account-btn--destructive:focus {
	background: var(--bn360-acct-btn-destructive-hover-bg, #fbeceb);
	color: var(--bn360-acct-btn-destructive-text, #a94442);
}

.bn360-account-btn:focus-visible {
	outline: 2px solid var(--bn360-acct-color-accent, #2c6e49);
	outline-offset: 2px;
}

.bn360-account-btn:disabled,
.bn360-account-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

.bn360-account-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}

/* ---------------------------------------------------------------------
   RECENT DELIVERIES — clean rows, replacing the old bullet list.
--------------------------------------------------------------------- */

.bn360-account-history-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--bn360-acct-color-border, #f0f0f0);
	flex-wrap: wrap;
}

.bn360-account-history-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.bn360-account-history-row__date {
	font-weight: 600;
	color: var(--bn360-acct-color-text-primary, #1d2327);
}

.bn360-account-history-row__status {
	color: var(--bn360-acct-color-text-secondary, #50575e);
	font-size: var(--bn360-acct-meta-size, 13px);
}

/* ---------------------------------------------------------------------
   NOTICES (eligibility-attention, needs-selection) — critical,
   operational notices; never suppressible via Appearance settings.
--------------------------------------------------------------------- */

.bn360-mp-notice {
	border-left: 3px solid #c0392b;
	background: #fdf2f1;
	padding: 10px 14px;
	margin: 0 0 20px;
	border-radius: 3px;
}

.bn360-mp-notice p {
	margin: 0;
}

.bn360-mp-needs-selection {
	color: #c0392b;
	font-weight: 600;
}

/* ---------------------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------------------- */

@media (max-width: 600px) {
	.bn360-account-card {
		padding: 16px;
	}

	.bn360-account-actions {
		flex-direction: column;
	}

	.bn360-account-actions .bn360-account-btn {
		width: 100%;
		text-align: center;
	}

	.bn360-account-history-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}