﻿.woocommerce-orders-table__cell-order-actions .button {
	background-color: var( --e-global-color-ec74859 );
	color: #fff;
}

header.woocommerce-Address-title.title h2 {
	font-size: 16px;
}

.minimog-wc-account-wrap mark {
	color: var( --e-global-color-ec74859 );
}

body .minimog-wc-account-wrap h2 {
	font-size: 28px;
}

.minimog-wc-account-wrap section > h2,
.minimog-wc-account-wrap .woocommerce-order-details h2 {
	font-size: 28px;
}

.minimog-wc-account-wrap h2.woocommerce-column__title {
	font-size: 20px;
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: #b42318 !important;
	font-weight: 700;
}

section.woocommerce-order-details header h2 {
	margin-bottom: 9px;
	margin-top: 40px;
}

section.woocommerce-order-downloads {
	margin-top: 40px;
}

.minimog-wc-account-wrap .bc-account-page-title {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 24px;
}

/* =========================================================
   Subscription view tables — mobile only
   Collapses the 2-column rows into stacked label / value pairs
   on small screens; full table layout is kept on desktop.
   ========================================================= */
@media (max-width: 767px) {
	body.woocommerce-view-subscription table.shop_table td {
		padding: 10px !important;
		text-align: left;
	}

	body.woocommerce-view-subscription table.shop_table tr > th:first-child {
		border-bottom: none;
		font-weight: 500;
		padding-bottom: 0 !important;
		text-align: left;
	}

	body.woocommerce-view-subscription table.shop_table tr > td:first-child {
		border-bottom: none;
		font-weight: 500;
		padding-bottom: 0 !important;
	}

	body.woocommerce-view-subscription table.shop_table tr > td:nth-child(2) {
		border-top: none;
		padding-top: 0 !important;
	}
}

/* =========================================================
   Subscription "Actions" buttons
   (Skift betalingsmetode / Forny nu / Opsig abonnement)
   ========================================================= */
.subscription_details td:has( > .woocommerce-button ) {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.subscription_details .woocommerce-button.button {
	align-items: center;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	display: inline-flex !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	justify-content: center;
	line-height: 1.2 !important;
	margin: 0 !important;
	min-height: 38px;
	min-width: 200px;
	padding: 8px 16px !important;
	text-align: center;
	text-decoration: none !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.subscription_details .woocommerce-button.button:hover {
	transform: translateY(-1px);
}

/* Skift betalingsmetode + Forny nu + Skift leveringsdato — outline (transparent bg + green border) */
.subscription_details .woocommerce-button.change_payment_method,
.subscription_details .woocommerce-button.subscription_renewal_early,
.subscription_details .woocommerce-button.calio-change-date {
	background-color: transparent !important;
	border-color: var( --e-global-color-ec74859, #2f5d4f ) !important;
	color: var( --e-global-color-ec74859, #2f5d4f ) !important;
}

.subscription_details .woocommerce-button.change_payment_method:hover,
.subscription_details .woocommerce-button.subscription_renewal_early:hover,
.subscription_details .woocommerce-button.calio-change-date:hover {
	background-color: var( --e-global-color-ec74859, #2f5d4f ) !important;
	border-color: var( --e-global-color-ec74859, #2f5d4f ) !important;
	color: #fff !important;
}

/* Forny nu — disabled state. Only applies when the JS blocker is active (it adds
   body.bc-early-renewal-disabled); see bc_disable_early_renewal_button() in
   my-account.php. With that hook off, the button keeps its normal green outline. */
body.bc-early-renewal-disabled .subscription_details .woocommerce-button.subscription_renewal_early,
body.bc-early-renewal-disabled .subscription_details .woocommerce-button.subscription_renewal_early:hover {
	background-color: #f3f4f4 !important;
	border-color: #e0e3e2 !important;
	color: #9aa3a0 !important;
	cursor: not-allowed !important;
	position: relative;
	transform: none !important;
}

body.bc-early-renewal-disabled .subscription_details .woocommerce-button.subscription_renewal_early::after {
	background: #15302a;
	border-radius: 6px;
	bottom: calc( 100% + 8px );
	color: #fff;
	content: "Funktionen er ikke tilgængelig. Kontakt os hvis du ønsker at fornye tidligt.";
	font-size: 12px;
	font-weight: 500;
	left: 0;
	line-height: 1.35;
	max-width: 260px;
	opacity: 0;
	padding: 8px 10px;
	pointer-events: none;
	position: absolute;
	transition: opacity .15s ease;
	visibility: hidden;
	white-space: normal;
	width: max-content;
	z-index: 5;
}

body.bc-early-renewal-disabled .subscription_details .woocommerce-button.subscription_renewal_early:hover::after {
	opacity: 1;
	visibility: visible;
}

/* Opsig abonnement — red (destructive) */
.subscription_details .woocommerce-button.bc-cancel-flow {
	background-color: transparent !important;
	border-color: #b23b3b !important;
	color: #b23b3b !important;
}

.subscription_details .woocommerce-button.bc-cancel-flow:hover {
	background-color: #b23b3b !important;
	border-color: #b23b3b !important;
	color: #fff !important;
}

/* =========================================================
   Early renewal modal ("Forny tidligt")
   Scoped to .wcs-modal (the WooCommerce Subscriptions modal wrapper)
   so it doesn't touch the theme's own modals.
   ========================================================= */
.wcs-modal .modal-header .close,
.wcs-modal .modal-header .close .dashicons {
	color: #000 !important;
}

.wcs-modal .modal-header .close,
.wcs-modal .modal-header .close:hover,
.wcs-modal .modal-header .close:focus {
	box-shadow: none !important;
}

.wcs_early_renew_modal_totals_table {
	height: unset !important;
	overflow: auto;
}

#early_renewal_modal_submit {
	font-size: 18px !important;
	margin-top: 10px;
}

/* =========================================================
   Cancel / unsubscribe flow
   ========================================================= */
.bc-cancel-flow {
	--bc-primary: var( --e-global-color-ec74859, #2f5d4f );
	--bc-primary-ink: #173f39;
	--bc-accent: #25ae91;
	--bc-ink: #15302a;
	--bc-text: #4b5e59;
	--bc-muted: #6d7f7b;
	--bc-line: #e7efec;
	--bc-line-strong: #d7e4e0;
	--bc-surface: #fff;
	--bc-soft: #f5faf8;
	--bc-tint: #ecf7f2;
	--bc-danger: #b23b3b;
	--bc-danger-line: #e4c2c2;
	--bc-radius: 12px;
	--bc-radius-sm: 10px;
	--bc-radius-xs: 8px;
	--bc-shadow: 0 1px 2px rgba( 21, 48, 42, .05 ), 0 16px 36px -22px rgba( 21, 48, 42, .35 );
	--bc-shadow-sm: 0 1px 2px rgba( 21, 48, 42, .05 );
	--bc-ring: 0 0 0 3px rgba( 37, 174, 145, .22 );

	color: var( --bc-text );
	max-width: 720px;
}

.bc-cancel-flow h3,
.bc-cancel-flow h4,
.bc-cancel-flow h5 {
	color: var( --bc-ink );
}

/* Orientation notice */
.bc-cancel-flow__context-notice {
	background: var( --bc-soft );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius-sm );
	display: grid;
	gap: 3px;
	margin-bottom: 24px;
	padding: 13px 16px;
}

.bc-cancel-flow__context-notice strong {
	color: var( --bc-primary-ink );
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.bc-cancel-flow__order-number {
	color: var( --bc-primary );
	font-weight: 700;
	white-space: nowrap;
}

.bc-cancel-flow__context-notice span {
	color: var( --bc-muted );
	font-size: 13px;
	line-height: 1.45;
}

/* Back link */
.bc-cancel-flow__back {
	align-items: center;
	color: var( --bc-muted );
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	gap: 6px;
	margin-bottom: 14px;
	text-decoration: none;
}

.bc-cancel-flow__back:hover {
	color: var( --bc-primary );
}

/* Contact box footer (below the buttons on every step) */
.bc-cancel-flow__contact-footer {
	border-top: 1px solid var( --bc-line );
	margin-top: 26px;
	padding-top: 22px;
}

/* Intro hero (sad dog) */
.bc-cancel-selection-hero {
	align-items: center;
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius );
	display: grid;
	gap: 20px;
	grid-template-columns: minmax(0, 1fr) 150px;
	margin-bottom: 28px;
	padding: 24px 26px;
}

.bc-cancel-selection-hero--compact {
	display: block;
	margin-bottom: 24px;
	padding: 16px 18px;
}

.bc-cancel-selection-hero__copy h2 {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.12;
	margin: 0 0 18px;
}

.bc-cancel-selection-hero__image {
	align-self: end;
	display: block;
	margin: 0 0 0 auto;
	max-width: 160px;
	width: 100%;
}

.bc-cancel-flow__contact-box {
	align-items: center;
	color: var( --bc-primary-ink );
	display: flex;
	font-size: 15px;
	gap: 13px;
	line-height: 1.45;
}

.bc-cancel-flow__contact-box strong {
	color: var( --bc-ink );
}

.bc-contact-icon {
	align-items: center;
	background: var( --bc-primary );
	border-radius: 50%;
	display: inline-flex;
	flex: 0 0 44px;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.bc-contact-icon svg {
	fill: #fff;
	height: 19px;
	width: 19px;
}

.bc-cancel-flow__contact-box a {
	border-bottom: 1px solid currentColor;
	color: var( --bc-primary );
	font-weight: 700;
	text-decoration: none;
}

/* Step intros */
.bc-cancel-flow__reason-intro {
	margin-bottom: 18px;
}

.bc-cancel-flow__reason-intro h4 {
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 6px;
}

.bc-cancel-flow__reason-intro p {
	color: var( --bc-muted );
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
}

/* Product selection */
.bc-product-selection {
	display: grid;
	gap: 12px;
	margin-bottom: 22px;
}

.bc-product-selection__option {
	align-items: center;
	background: var( --bc-surface );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius );
	box-shadow: var( --bc-shadow-sm );
	cursor: pointer;
	display: flex;
	gap: 15px;
	padding: 14px;
	position: relative;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.bc-product-selection__option:hover {
	border-color: var( --bc-line-strong );
}

.bc-product-selection__option input {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	opacity: 0;
	overflow: hidden;
	padding: 0;
	pointer-events: none;
	position: absolute !important;
	white-space: nowrap;
	width: 1px;
}

.bc-product-selection__image,
.bc-product-selection__placeholder {
	aspect-ratio: 1;
	background: var( --bc-soft );
	border-radius: var( --bc-radius-xs );
	display: block;
	flex: 0 0 68px;
	object-fit: cover;
	width: 68px;
}

.bc-product-selection__body {
	display: grid;
	flex: 1 1 auto;
	gap: 5px;
	min-width: 0;
}

.bc-product-selection__body strong {
	color: var( --bc-ink );
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

.bc-product-selection__qty {
	color: var( --bc-muted );
	font-size: 13px;
	line-height: 1.2;
}

.bc-product-selection__price {
	color: var( --bc-ink );
	flex: 0 0 auto;
	line-height: 1.35;
	margin-left: auto;
	padding-left: 10px;
	text-align: right;
	white-space: nowrap;
}

.bc-product-selection__price del,
.bc-product-selection__price del .woocommerce-Price-amount {
	color: var( --bc-muted );
	font-size: 13px;
	font-weight: 400;
}

.bc-product-selection__price ins,
.bc-product-selection__price ins .woocommerce-Price-amount,
.bc-product-selection__price > .woocommerce-Price-amount {
	background: none;
	color: var( --bc-primary-ink );
	font-size: 16px;
	font-weight: 700;
	margin: 0 !important;
	text-decoration: none;
}

.bc-product-selection__price .price {
	margin: 0;
}

.bc-product-selection__price del {
	margin-right: 4px;
}

.bc-product-selection__price .subscription-details {
	color: var( --bc-muted );
	display: block;
	font-size: 12px;
	font-weight: 400;
}

.bc-product-selection__check {
	align-items: center;
	background: var( --bc-surface );
	border: 1.5px solid var( --bc-line-strong );
	border-radius: 6px;
	display: inline-flex;
	flex: 0 0 22px;
	height: 22px;
	justify-content: center;
	transition: background-color .15s ease, border-color .15s ease;
	width: 22px;
}

.bc-product-selection__check::after {
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	content: "";
	height: 5px;
	margin-top: -2px;
	opacity: 0;
	transform: rotate(-45deg);
	transition: opacity .15s ease;
	width: 10px;
}

.bc-product-selection__option:has(input:checked) {
	background: var( --bc-tint );
	border-color: var( --bc-primary );
}

.bc-product-selection__option:has(input:checked) .bc-product-selection__check {
	background: var( --bc-primary );
	border-color: var( --bc-primary );
}

.bc-product-selection__option:has(input:checked) .bc-product-selection__check::after {
	opacity: 1;
}

.bc-product-selection__option:has(input:focus-visible) {
	box-shadow: var( --bc-ring );
}

/* Reason options */
.bc-cancel-flow__option {
	align-items: center;
	background: var( --bc-surface );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius-sm );
	box-shadow: var( --bc-shadow-sm );
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 10px;
	padding: 15px 16px;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.bc-cancel-flow__option:hover {
	border-color: var( --bc-line-strong );
}

.bc-cancel-flow__option input {
	accent-color: var( --bc-primary );
	flex: 0 0 auto;
	height: 20px;
	margin: 0;
	width: 20px;
}

.bc-cancel-flow__option span {
	color: var( --bc-ink );
	flex: 1 1 auto;
	font-size: 15px;
	font-weight: 600;
}

.bc-cancel-flow__option:has(input:checked) {
	background: var( --bc-tint );
	border-color: var( --bc-primary );
}

.bc-cancel-flow__option:has(input:focus-visible) {
	box-shadow: var( --bc-ring );
}

.bc-cancel-flow__other-text {
	border: 1px solid var( --bc-line-strong );
	border-radius: var( --bc-radius-xs );
	box-sizing: border-box;
	flex: 0 0 100%;
	margin: 4px 0 0 32px;
	max-width: calc(100% - 32px);
	min-height: 92px;
	padding: 12px;
	width: calc(100% - 32px);
}

.bc-cancel-flow__other-text:focus {
	border-color: var( --bc-primary );
	box-shadow: var( --bc-ring );
	outline: none;
}

.bc-cancel-flow__content {
	margin-top: 4px;
}

/* Per-product symptom pickers, shown on the dedicated symptoms page (reason:
   "Jeg oplever ikke nogen effekt"): a tinted panel with one card per product. */
.bc-cancel-flow__symptoms {
	background: var( --bc-tint );
	border: 1px solid var( --bc-primary );
	border-radius: var( --bc-radius-sm );
	box-sizing: border-box;
	display: grid;
	gap: 14px;
	margin: 0 0 22px;
	padding: 16px;
}

.bc-symptom-product__question {
	color: var( --bc-ink );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
}

.bc-symptom-product {
	background: var( --bc-surface );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius-sm );
	display: grid;
	gap: 12px;
	padding: 14px;
}

.bc-symptom-product__head {
	align-items: center;
	display: flex;
	gap: 12px;
}

.bc-symptom-product__image {
	flex: 0 0 44px;
	height: 44px;
	width: 44px;
}

.bc-symptom-product__image img {
	border-radius: var( --bc-radius-xs );
	display: block;
	height: 44px;
	object-fit: cover;
	width: 44px;
}

.bc-symptom-product__name {
	color: var( --bc-ink );
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.bc-symptom-list {
	display: grid;
	gap: 8px;
}

.bc-symptom-option {
	align-items: center;
	background: var( --bc-surface );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius-xs );
	cursor: pointer;
	display: flex;
	gap: 10px;
	padding: 10px 12px;
	transition: border-color .15s ease, background-color .15s ease;
}

.bc-symptom-option:hover {
	border-color: var( --bc-line-strong );
}

.bc-symptom-option input {
	accent-color: var( --bc-primary );
	flex: 0 0 auto;
	height: 18px;
	margin: 0;
	width: 18px;
}

.bc-symptom-option span {
	color: var( --bc-ink );
	font-size: 14px;
	line-height: 1.35;
}

.bc-symptom-option:has( input:checked ) {
	background: var( --bc-surface );
	border-color: var( --bc-primary );
	box-shadow: inset 0 0 0 1px var( --bc-primary );
}

.bc-symptom-option:has( input:checked ) span {
	color: var( --bc-primary-ink );
	font-weight: 600;
}

.bc-symptom-option:has( input:focus-visible ) {
	box-shadow: var( --bc-ring );
}

.bc-symptom-product__other {
	border: 1px solid var( --bc-line-strong );
	border-radius: var( --bc-radius-xs );
	box-sizing: border-box;
	color: var( --bc-ink );
	padding: 10px 12px;
	width: 100%;
}

.bc-symptom-product__other[hidden] {
	display: none;
}

.bc-symptom-product__other:focus {
	border-color: var( --bc-primary );
	box-shadow: var( --bc-ring );
	outline: none;
}

/* Validation error highlight: applied client-side when a required field is
   missing, so the customer is scrolled to it and sees what to fix. */
.bc-field-error,
.bc-field-error.bc-symptom-product,
.bc-field-error.bc-cancel-flow__option {
	border: 1px solid #d63638;
	border-radius: var( --bc-radius-sm );
	box-shadow: 0 0 0 3px rgba( 214, 54, 56, 0.15 );
}

textarea.bc-field-error,
input.bc-field-error {
	border-color: #d63638;
	box-shadow: 0 0 0 3px rgba( 214, 54, 56, 0.15 );
}

.bc-field-error-message {
	color: #d63638;
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-top: 8px;
}

/* Retention hero */
.bc-retention-hero {
	align-items: center;
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1fr) 200px;
	margin-bottom: 22px;
	position: relative;
}

.bc-retention-hero--text-only,
.bc-retention-hero--cancel {
	display: block;
}

.bc-retention-hero__copy {
	position: relative;
	z-index: 1;
}

.bc-retention-hero h3 {
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.16;
	margin: 0 0 10px;
}

.bc-retention-hero p {
	color: var( --bc-text );
	font-size: 16px;
	line-height: 1.55;
	margin: 0;
}

.bc-retention-kicker,
.bc-retention-label {
	color: var( --bc-primary );
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

/* GLS card */
.bc-retention-gls-card {
	align-items: center;
	background: #fff;
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius-sm );
	box-shadow: var( --bc-shadow );
	display: flex;
	flex-direction: column;
	gap: 14px;
	justify-content: center;
	min-height: 160px;
	padding: 22px;
	position: relative;
	z-index: 1;
}

.bc-retention-gls-card img {
	display: block;
	height: auto;
	max-width: 170px;
	width: 100%;
}

.bc-retention-gls-card p {
	color: var( --bc-primary-ink );
	font-size: 13px;
	font-weight: 700;
	margin: 0;
	text-align: center;
}

/* Stayed confirmation header */
.bc-stayed-header {
	align-items: center;
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius );
	display: grid;
	gap: 20px;
	grid-template-columns: minmax(0, 1fr) 150px;
	margin-bottom: 22px;
	padding: 24px 26px;
}

.bc-cancel-flow .bc-stayed-header__copy h3 {
	font-size: 34px !important;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.2 !important;
	margin: 0 0 12px;
}

.bc-stayed-header__copy p {
	color: var( --bc-text );
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

.bc-stayed-renewal {
	margin-top: 10px !important;
}

.bc-stayed-renewal strong {
	color: var( --bc-primary-ink );
	font-weight: 700;
	white-space: nowrap;
}

.bc-stayed-not {
	color: var( --bc-danger );
	font-weight: 700;
}

.bc-stayed-actions {
	display: flex;
	justify-content: center;
	margin-top: 22px;
}

.bc-stayed-header__image {
	align-self: end;
	display: block;
	margin: 0 0 0 auto;
	max-width: 150px;
	width: 100%;
}

/* Tips (won't eat) */
.bc-wonteat-header {
	align-items: center;
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius );
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	margin-bottom: 24px;
	padding: 24px 26px;
}

.bc-cancel-flow .bc-wonteat-header__copy h3 {
	font-size: 34px !important;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.2 !important;
	margin: 0 0 10px;
}

.bc-wonteat-header__copy p {
	color: var( --bc-text );
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

.bc-wonteat-quote {
	background: var( --bc-soft );
	border-radius: var( --bc-radius-sm );
	margin: 0;
	padding: 18px 20px;
}

.bc-wonteat-quote__text {
	color: var( --bc-ink );
	font-size: 14px;
	font-style: italic;
	line-height: 1.5;
	margin: 0;
}

.bc-wonteat-quote__text::before {
	color: var( --bc-accent );
	content: "\201C";
	font-family: Georgia, "Times New Roman", serif;
	font-size: 26px;
	font-style: normal;
	line-height: 0;
	margin-right: 1px;
	vertical-align: -6px;
}

.bc-wonteat-quote__author {
	color: var( --bc-primary );
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	margin-top: 10px;
}

.bc-wonteat-tips-heading {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 12px;
}

.bc-retention-tip-grid {
	display: grid;
	gap: 12px;
	margin-bottom: 4px;
}

.bc-retention-tip {
	align-items: center;
	background: var( --bc-surface );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius-sm );
	box-shadow: var( --bc-shadow-sm );
	column-gap: 16px;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	padding: 16px 18px;
	row-gap: 2px;
}

.bc-retention-tip span {
	align-items: center;
	background: transparent;
	border: 2px solid var( --bc-primary );
	border-radius: 50%;
	color: var( --bc-primary );
	display: inline-flex;
	font-size: 15px;
	font-weight: 700;
	grid-row: span 2;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.bc-retention-tip h5 {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.bc-retention-tip p {
	color: var( --bc-muted );
	font-size: 14px;
	line-height: 1.45;
	margin: 0;
}

.bc-retention-note {
	background: #fdf6e7;
	border: 1px solid #f0dcab;
	border-radius: var( --bc-radius-sm );
	color: #6a4f1c;
	line-height: 1.55;
	margin: 16px 0 4px;
	padding: 15px 17px;
}

.bc-retention-note strong {
	color: #5a4316;
}

/* Effect step */
.bc-effect-note {
	background: var( --bc-soft );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius-sm );
	margin-bottom: 16px;
	padding: 18px 20px;
}

.bc-effect-note h4 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 6px;
}

.bc-effect-note p {
	color: var( --bc-text );
	line-height: 1.5;
	margin: 0;
}

.bc-effect-timeline {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 16px;
}

.bc-effect-timeline > div {
	background: var( --bc-surface );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius-sm );
	box-shadow: var( --bc-shadow-sm );
	padding: 16px 18px;
}

.bc-effect-timeline span {
	color: var( --bc-primary );
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.bc-effect-timeline strong {
	color: var( --bc-ink );
	display: block;
	font-size: 16px;
	margin-bottom: 6px;
}

.bc-effect-timeline p {
	color: var( --bc-muted );
	font-size: 14px;
	line-height: 1.45;
	margin: 0;
}

.bc-effect-checklist {
	background: var( --bc-surface );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius );
	box-shadow: var( --bc-shadow-sm );
	margin-bottom: 4px;
	padding: 22px;
}

.bc-effect-checklist h4 {
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 14px;
}

.bc-effect-checklist > div {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bc-effect-checklist article {
	background: var( --bc-soft );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius-sm );
	padding: 15px 16px;
}

.bc-effect-checklist strong {
	color: var( --bc-ink );
	display: block;
	font-size: 15px;
	margin-bottom: 5px;
}

.bc-effect-checklist p {
	color: var( --bc-muted );
	font-size: 14px;
	line-height: 1.45;
	margin: 0;
}

.bc-retention-product-content {
	background: var( --bc-surface );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius );
	box-shadow: var( --bc-shadow-sm );
	margin-top: 16px;
	padding: 22px;
}

.bc-retention-product-content h3 {
	font-size: 18px;
	margin: 0 0 8px;
}

.bc-retention-product-content p {
	color: var( --bc-text );
	line-height: 1.55;
	margin: 0 0 10px;
}

.bc-retention-product-content p:last-child {
	margin-bottom: 0;
}

/* Price comparison (discount) */
.bc-price-comparison {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 4px;
}

.bc-price-comparison > div {
	background: var( --bc-surface );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius );
	box-shadow: var( --bc-shadow-sm );
	padding: 22px 24px;
}

.bc-price-comparison__highlight {
	background: var( --bc-tint ) !important;
	border-color: var( --bc-primary ) !important;
}

.bc-price-comparison__label {
	color: var( --bc-muted );
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.bc-price-comparison__amount {
	color: var( --bc-danger );
	display: block;
	font-size: 26px;
	font-weight: 800;
	white-space: nowrap;
}

.bc-price-comparison__amount,
.bc-price-comparison__amount .woocommerce-Price-amount,
.bc-price-comparison__amount .woocommerce-Price-currencySymbol {
	color: var( --bc-danger ) !important;
}

.bc-price-comparison__amount .woocommerce-Price-amount,
.bc-price-comparison__amount .woocommerce-Price-currencySymbol {
	display: inline;
	font-size: inherit !important;
	font-weight: inherit;
	white-space: nowrap;
}

.bc-price-comparison__highlight .bc-price-comparison__amount {
	font-size: 30px;
}

.bc-price-comparison__highlight .bc-price-comparison__amount,
.bc-price-comparison__highlight .bc-price-comparison__amount .woocommerce-Price-amount,
.bc-price-comparison__highlight .bc-price-comparison__amount .woocommerce-Price-currencySymbol {
	color: var( --bc-primary ) !important;
}

/* Offer / benefits step headers */
.bc-benefits-header,
.bc-offer-header,
.bc-cancel-header {
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius );
	margin-bottom: 22px;
	padding: 24px 26px;
}

.bc-cancel-flow .bc-benefits-header h3,
.bc-cancel-flow .bc-offer-header h3,
.bc-cancel-flow .bc-cancel-header h3 {
	font-size: 32px !important;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.16 !important;
	margin: 0 0 10px;
}

.bc-benefits-header p,
.bc-offer-header p,
.bc-cancel-header p {
	color: var( --bc-text );
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

.bc-benefits-header p + p,
.bc-offer-header p + p {
	margin-top: 6px;
}

.bc-benefit-product-list {
	display: grid;
	gap: 12px;
	margin: 0 0 4px;
}

.bc-benefit-product {
	background: var( --bc-surface );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius );
	box-shadow: var( --bc-shadow-sm );
	padding: 20px;
}

.bc-benefit-product__head {
	align-items: center;
	display: flex;
	gap: 16px;
	margin-bottom: 16px;
}

.bc-benefit-product__image,
.bc-benefit-product__placeholder {
	aspect-ratio: 1;
	background: var( --bc-soft );
	border-radius: var( --bc-radius-xs );
	flex: 0 0 64px;
	object-fit: cover;
	width: 64px;
}

.bc-cancel-flow .bc-benefit-product h5 {
	font-size: 24px !important;
	font-weight: 700;
	margin: 0 !important;
}

.bc-benefit-product__list {
	display: grid;
	gap: 9px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bc-benefit-product__list li {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%3E%3Ccircle%20cx='10'%20cy='10'%20r='10'%20fill='%2325ae91'/%3E%3Cpath%20d='M5.8%2010.3l2.7%202.7%205.7-6'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: 0 3px;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	color: var( --bc-text );
	line-height: 1.5;
	margin: 0;
	min-height: 18px;
	padding-left: 28px;
}

.bc-benefit-product__warning {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%3E%3Ccircle%20cx='10'%20cy='10'%20r='10'%20fill='%23b23b3b'/%3E%3Cpath%20d='M7%207l6%206M13%207l-6%206'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E");
	background-position: 0 2px;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	color: var( --bc-text );
	line-height: 1.5;
	margin: 12px 0 0;
	min-height: 18px;
	padding-left: 28px;
}

/* Benefits timeline (horizontal desktop / vertical mobile) */
.bc-benefit-timeline {
	align-items: flex-start;
	display: flex;
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.bc-benefit-timeline__step {
	align-items: center;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	margin: 0;
	min-width: 0;
	padding: 0 4px;
	position: relative;
	text-align: center;
}

.bc-benefit-timeline__marker {
	align-items: center;
	display: flex;
	height: 16px;
	justify-content: center;
	margin-bottom: 10px;
	position: relative;
	width: 100%;
}

.bc-benefit-timeline__step:not(:last-child) .bc-benefit-timeline__marker::after {
	background: var( --bc-line-strong );
	content: "";
	height: 2px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
}

.bc-benefit-timeline__dot {
	background: var( --bc-surface );
	border: 2px solid var( --bc-line-strong );
	border-radius: 50%;
	box-sizing: border-box;
	height: 16px;
	position: relative;
	width: 16px;
	z-index: 1;
}

.bc-benefit-timeline__step.is-reached .bc-benefit-timeline__dot {
	background: var( --bc-primary );
	border-color: var( --bc-primary );
}

.bc-benefit-timeline__step.is-reached:not(:last-child) .bc-benefit-timeline__marker::after {
	background: var( --bc-primary );
}

.bc-benefit-timeline__week {
	color: var( --bc-ink );
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}

.bc-benefit-timeline__label {
	color: var( --bc-muted );
	display: block;
	font-size: 12px;
	line-height: 1.35;
	margin-top: 3px;
}

/* Confirmation / summary */
.bc-subscription-summary {
	background: var( --bc-surface );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius );
	box-shadow: var( --bc-shadow-sm );
	margin: 0 0 16px;
	padding: 22px;
}

.bc-cancel-flow .bc-retention-hero--cancel h3 {
	font-size: 32px !important;
	line-height: 1.16 !important;
}

.bc-cancel-flow .bc-subscription-summary h4 {
	font-size: 24px !important;
	font-weight: 700;
	margin: 0 0 14px;
}

.bc-subscription-summary dl {
	display: grid;
	gap: 12px;
	margin: 0;
}

.bc-subscription-summary dl > div {
	align-items: center;
	border-top: 1px solid var( --bc-line );
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding-top: 12px;
}

.bc-subscription-summary dl > div:first-child {
	border-top: 0;
	padding-top: 0;
}

.bc-subscription-summary dt {
	color: var( --bc-muted );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.bc-subscription-summary dd {
	color: var( --bc-ink );
	font-weight: 700;
	margin: 0;
	text-align: right;
}

.bc-final-reason {
	align-items: center;
	background: var( --bc-surface );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius-sm );
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 4px;
	padding: 15px 17px;
}

.bc-final-reason span {
	color: var( --bc-muted );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.bc-final-reason strong {
	color: var( --bc-ink );
	text-align: right;
}

.bc-final-note {
	display: block;
	margin-top: 18px;
}

.bc-final-note span {
	color: var( --bc-ink );
	display: block;
	font-weight: 700;
	margin-bottom: 8px;
}

.bc-final-note em {
	color: var( --bc-muted );
	font-style: normal;
	font-weight: 400;
}

.bc-final-note textarea {
	border: 1px solid var( --bc-line-strong );
	border-radius: var( --bc-radius-xs );
	display: block;
	min-height: 104px;
	padding: 12px;
	width: 100%;
}

.bc-final-note textarea:focus {
	border-color: var( --bc-primary );
	box-shadow: var( --bc-ring );
	outline: none;
}

/* Pause options */
.bc-pause-form {
	margin: 0;
}

/* Pause date selector — three quick-duration boxes above an always-visible calendar */
.bc-pause-quick {
	margin: 0 0 18px;
}

.bc-pause-quick__label {
	color: var( --bc-ink );
	display: block;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 12px;
}

.bc-pause-quick__grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bc-pause-quick__btn {
	align-items: center;
	background: var( --bc-soft );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius-sm );
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 2px;
	justify-content: center;
	min-height: 72px;
	padding: 12px 8px;
	text-align: center;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
	user-select: none;
}

.bc-pause-quick__btn:hover {
	border-color: var( --bc-line-strong );
}

.bc-pause-quick__btn.is-active {
	background: var( --bc-tint );
	border-color: var( --bc-primary );
}

.bc-pause-quick__btn:focus-visible {
	box-shadow: var( --bc-ring );
	outline: none;
}

.bc-pause-quick__name {
	color: var( --bc-ink );
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

.bc-pause-quick__btn.is-active .bc-pause-quick__name {
	color: var( --bc-primary-ink );
}

.bc-pause-quick__date {
	color: var( --bc-muted );
	font-size: 12px;
	line-height: 1.2;
}

/* Small, de-emphasised "Udskyd med" line above the duration */
.bc-pause-quick__eyebrow {
	color: var( --bc-muted );
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
}

/* Chosen day carries a "Valgt" flag above it (mirrors the "Nuværende" flag, in the
   accent colour so the two are easy to tell apart). */
.bc-pause-cal .calio-cdf-cal__day.is-selected {
	overflow: visible;
	position: relative;
}

.bc-pause-cal .calio-cdf-cal__flag--selected {
	background: var( --bc-accent );
}

.bc-pause-cal .calio-cdf-cal__flag--selected::after {
	border-top-color: var( --bc-accent );
}

/* Compact the shared calendar for the pause step (smaller than the full "Skift
   leveringsdato" one) and cap its width so it doesn't dominate the page. Higher
   specificity than the base .calio-cdf-cal rules so it wins regardless of order. */
.calio-cdf-cal.bc-pause-cal {
	max-width: 420px;
	padding: 14px 14px 16px;
}

.bc-pause-cal .calio-cdf-cal__head {
	margin-bottom: 10px;
}

.bc-pause-cal .calio-cdf-cal__title {
	font-size: 16px;
}

.bc-pause-cal .calio-cdf-cal__nav {
	font-size: 19px;
	height: 32px;
	width: 32px;
}

.bc-pause-cal .calio-cdf-cal__weekdays,
.bc-pause-cal .calio-cdf-cal__days {
	gap: 4px;
}

.bc-pause-cal .calio-cdf-cal__weekdays span {
	font-size: 11px;
}

.bc-pause-cal .calio-cdf-cal__days {
	margin-top: 16px; /* headroom for the "Nuværende" / "Valgt" flags on the first row */
}

.bc-pause-cal .calio-cdf-cal__day,
.bc-pause-cal .calio-cdf-cal__pad {
	min-height: 38px;
}

.bc-pause-cal .calio-cdf-cal__day {
	font-size: 14px;
}

/* Live result of the chosen pause date */
.bc-pause-result {
	background: var( --bc-tint );
	border-radius: var( --bc-radius-sm );
	color: var( --bc-text );
	font-size: 14px;
	line-height: 1.5;
	margin: 16px 0 0;
	padding: 12px 16px;
}

/* Before a date is chosen the line is a neutral prompt, not a confirmation. */
.bc-pause-result--empty {
	background: var( --bc-soft );
	color: var( --bc-muted );
}

.bc-pause-result strong {
	color: var( --bc-primary-ink );
	font-weight: 700;
	white-space: nowrap;
}

/* Stayed step */
.bc-stayed-detail {
	background: var( --bc-surface );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius );
	box-shadow: var( --bc-shadow-sm );
	margin-bottom: 18px;
	padding: 22px;
}

.bc-cancel-flow .bc-stayed-detail h4,
.bc-cancel-flow .bc-stayed-plain h4 {
	font-size: 24px !important;
	font-weight: 700;
	margin: 0 0 8px;
}

.bc-stayed-detail p,
.bc-stayed-plain p {
	color: var( --bc-text );
	margin: 0;
}

.bc-stayed-detail__logo {
	display: block;
	height: auto;
	margin: 0 0 14px;
	max-width: 120px;
	width: 100%;
}

.bc-stayed-plain {
	margin-bottom: 18px;
}

/* Actions & buttons */
.bc-cancel-flow__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

.bc-cancel-flow__actions--final {
	margin-top: 24px;
}

.bc-cancel-flow .button {
	border-radius: 999px;
	font-weight: 700;
	transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.bc-cancel-flow__actions .button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	margin: 0 !important;
	min-height: 48px;
	text-align: center;
}

.bc-step-submit {
	margin-top: 4px !important;
	min-height: 48px;
	min-width: 220px;
}

.bc-button-primary {
	background: var( --bc-primary ) !important;
	border: 1px solid var( --bc-primary ) !important;
	color: #fff !important;
	min-height: 48px;
	padding-left: 26px !important;
	padding-right: 26px !important;
}

.bc-button-secondary {
	background: #fff !important;
	border: 1px solid var( --bc-primary ) !important;
	color: var( --bc-primary ) !important;
}

.bc-button-link {
	background: transparent !important;
	border: 1px solid var( --bc-line-strong ) !important;
	color: var( --bc-text ) !important;
}

.bc-button-danger {
	background: var( --bc-danger ) !important;
	border: 1px solid var( --bc-danger ) !important;
	color: #fff !important;
	min-height: 48px;
	padding-left: 26px !important;
	padding-right: 26px !important;
}

/* De-emphasised "continue toward cancelling" action — outlined, never solid, so the
   solid-red "Bekræft opsigelse" confirm stays the only filled danger button. */
.bc-button-danger-outline {
	background: transparent !important;
	border: 1px solid var( --bc-danger ) !important;
	color: var( --bc-danger ) !important;
	min-height: 48px;
	padding-left: 26px !important;
	padding-right: 26px !important;
}

.bc-button-primary:hover {
	background: var( --bc-primary-ink ) !important;
	border-color: var( --bc-primary-ink ) !important;
	color: #fff !important;
}

.bc-button-secondary:hover {
	background: var( --bc-tint ) !important;
}

.bc-button-link:hover {
	background: var( --bc-soft ) !important;
}

.bc-button-danger:hover {
	background: #922f2f !important;
	border-color: #922f2f !important;
	color: #fff !important;
}

.bc-button-danger-outline:hover {
	background: var( --bc-danger ) !important;
	border-color: var( --bc-danger ) !important;
	color: #fff !important;
}

.bc-cancel-flow .button:hover {
	box-shadow: 0 8px 18px -10px rgba( 21, 48, 42, .55 ) !important;
	transform: translateY(-1px);
}

.bc-cancel-flow .button:active {
	box-shadow: none !important;
	transform: translateY(0);
}

/* Disabled action (e.g. "Sæt på pause" before a date is chosen) */
.bc-cancel-flow .button:disabled,
.bc-cancel-flow .button:disabled:hover {
	background: var( --bc-line-strong ) !important;
	border-color: var( --bc-line-strong ) !important;
	box-shadow: none !important;
	color: var( --bc-muted ) !important;
	cursor: not-allowed;
	transform: none !important;
}

@media (max-width: 767px) {
	.minimog-wc-account-wrap .minimog-wc-account-content {
		padding: 28px 16px;
	}

	.minimog-wc-account-wrap .bc-account-page-title {
		font-size: 26px;
	}

	/* Re-assert the flex column on mobile — the theme forces .shop_table td
	   to display:block at this breakpoint, which otherwise kills the gap and
	   the full-width buttons. */
	.subscription_details td:has( > .woocommerce-button ) {
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
	}

	.subscription_details .woocommerce-button.button {
		min-width: 0;
		width: 100% !important;
	}

	.bc-cancel-flow {
		max-width: none;
	}

	.bc-cancel-selection-hero {
		gap: 14px;
		grid-template-columns: 1fr;
		padding: 20px;
	}

	.bc-cancel-selection-hero--compact {
		padding: 14px 16px;
	}

	.bc-cancel-selection-hero__copy h2 {
		font-size: 28px;
	}

	.bc-cancel-selection-hero__image {
		margin: 0 auto;
		max-width: 130px;
	}

	.bc-cancel-flow__reason-intro h4 {
		font-size: 20px;
	}

	.bc-wonteat-header {
		gap: 18px;
		grid-template-columns: 1fr;
		padding: 20px;
	}

	.bc-cancel-flow .bc-wonteat-header__copy h3 {
		font-size: 28px !important;
	}

	.bc-cancel-flow .bc-retention-tip h5 {
		font-size: 20px !important;
	}

	.bc-wonteat-quote {
		padding: 16px 18px;
	}

	.bc-retention-hero {
		gap: 18px;
		grid-template-columns: 1fr;
	}

	.bc-retention-hero h3 {
		font-size: 22px;
	}

	.bc-cancel-flow .bc-retention-hero--cancel h3 {
		font-size: 26px !important;
	}

	.bc-cancel-flow .bc-subscription-summary h4 {
		font-size: 20px !important;
	}

	.bc-subscription-summary dl > div,
	.bc-final-reason {
		align-items: flex-start;
		flex-direction: column;
		gap: 4px;
	}

	.bc-subscription-summary dd,
	.bc-final-reason strong {
		text-align: left;
	}

	.bc-retention-gls-card {
		margin: 0 auto;
		max-width: 220px;
		width: 100%;
	}

	.bc-stayed-header {
		gap: 14px;
		grid-template-columns: 1fr;
		padding: 20px;
	}

	.bc-cancel-flow .bc-stayed-header__copy h3 {
		font-size: 28px !important;
	}

	.bc-cancel-flow .bc-stayed-detail h4,
	.bc-cancel-flow .bc-stayed-plain h4 {
		font-size: 20px !important;
	}

	.bc-stayed-header__image {
		margin: 0 auto;
		max-width: 130px;
	}

	.bc-effect-timeline,
	.bc-effect-checklist > div,
	.bc-price-comparison {
		grid-template-columns: 1fr;
	}

	.bc-benefits-header,
	.bc-offer-header {
		padding: 20px;
	}

	.bc-cancel-flow .bc-benefits-header h3,
	.bc-cancel-flow .bc-offer-header h3 {
		font-size: 26px !important;
	}

	.bc-benefit-product__head {
		gap: 14px;
	}

	.bc-cancel-flow .bc-benefit-product h5 {
		font-size: 20px !important;
	}

	.bc-benefit-product__image,
	.bc-benefit-product__placeholder {
		flex-basis: 56px;
		width: 56px;
	}

	/* On mobile, surface the confirm-cancel button first. */
	.bc-cancel-flow__actions--final .bc-confirm-cancel {
		order: -1;
	}

	.bc-benefit-timeline {
		align-items: stretch;
		flex-direction: column;
	}

	.bc-benefit-timeline__step {
		align-items: stretch;
		flex-direction: row;
		gap: 12px;
		padding: 0;
		text-align: left;
	}

	.bc-benefit-timeline__marker {
		align-items: flex-start;
		flex: 0 0 16px;
		height: auto;
		margin-bottom: 0;
		width: 16px;
	}

	.bc-benefit-timeline__step:not(:last-child) .bc-benefit-timeline__marker::after {
		bottom: 0;
		height: auto;
		left: 50%;
		top: 14px;
		transform: translateX(-50%);
		width: 2px;
	}

	.bc-benefit-timeline__body {
		padding-bottom: 18px;
	}

	.bc-product-selection__option {
		gap: 12px;
	}

	.bc-product-selection__image,
	.bc-product-selection__placeholder {
		flex-basis: 56px;
		width: 56px;
	}

	/* Stack price: discounted on top of the real (struck) price. */
	.bc-product-selection__price {
		align-items: flex-end;
		display: flex;
		flex-direction: column;
		padding-left: 6px;
		white-space: normal;
	}

	.bc-product-selection__price ins,
	.bc-product-selection__price > .woocommerce-Price-amount {
		order: 1;
	}

	.bc-product-selection__price del {
		margin-right: 0;
		order: 2;
	}

	.bc-product-selection__price del,
	.bc-product-selection__price del .woocommerce-Price-amount {
		font-size: 12px;
	}

	.bc-product-selection__price ins,
	.bc-product-selection__price ins .woocommerce-Price-amount,
	.bc-product-selection__price > .woocommerce-Price-amount {
		font-size: 15px;
	}

	.bc-product-selection__price .subscription-details {
		order: 3;
	}

	.bc-pause-quick__grid {
		gap: 8px;
	}

	.bc-pause-quick__btn {
		min-height: 64px;
		padding: 10px 6px;
	}

	.bc-pause-quick__eyebrow {
		font-size: 10px;
	}

	.bc-pause-quick__name {
		font-size: 14px;
	}

	.bc-pause-quick__date {
		font-size: 11px;
	}

	.bc-cancel-flow__actions {
		flex-direction: column;
	}

	.bc-cancel-flow__actions .button,
	.bc-step-submit {
		width: 100%;
	}
}

/* =========================================================
   Skift leveringsdato (change next delivery date) flow
   Reuses the .bc-cancel-flow design tokens; see change-date-flow.php.
   ========================================================= */
.calio-cdf {
	max-width: 720px;
}

/* Current next-delivery callout */
.calio-cdf__current {
	align-items: center;
	background: var( --bc-soft );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius );
	display: flex;
	gap: 14px;
	margin-bottom: 22px;
	padding: 16px 18px;
}

.calio-cdf__current-icon {
	align-items: center;
	background: var( --bc-tint );
	border-radius: 50%;
	color: var( --bc-primary );
	display: inline-flex;
	flex: 0 0 44px;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.calio-cdf__current-icon svg {
	fill: currentColor;
	height: 20px;
	width: 20px;
}

.calio-cdf__current-label {
	color: var( --bc-muted );
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
	margin-bottom: 2px;
	text-transform: uppercase;
}

.calio-cdf__current-date {
	color: var( --bc-primary-ink );
	display: block;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
}

/* Intro line above the calendar */
.calio-cdf .calio-cdf__intro {
	color: var( --bc-text );
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	margin: 0 0 12px;
}

/* Calendar */
.calio-cdf-cal {
	background: var( --bc-surface );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius );
	box-shadow: var( --bc-shadow-sm );
	padding: 18px 20px 20px;
	width: 100%;
}

.calio-cdf-cal__head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 14px;
}

.calio-cdf-cal__title {
	color: var( --bc-ink );
	font-size: 18px;
	font-weight: 700;
}

.calio-cdf-cal__nav {
	align-items: center;
	background: var( --bc-soft );
	border: 1px solid var( --bc-line );
	border-radius: 50%;
	box-sizing: border-box;
	color: var( --bc-primary-ink );
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 22px;
	height: 38px;
	justify-content: center;
	line-height: 1;
	padding: 0 0 3px;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	user-select: none;
	width: 38px;
}

.calio-cdf-cal__nav:hover:not(.is-disabled) {
	background: var( --bc-tint );
	border-color: var( --bc-primary );
	color: var( --bc-primary );
}

.calio-cdf-cal__nav.is-disabled {
	cursor: not-allowed;
	opacity: .35;
}

.calio-cdf-cal__weekdays,
.calio-cdf-cal__days {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(7, 1fr);
}

.calio-cdf-cal__weekdays {
	margin-bottom: 6px;
}

.calio-cdf-cal__weekdays span {
	color: var( --bc-muted );
	font-size: 12px;
	font-weight: 600;
	padding: 4px 0;
	text-align: center;
	text-transform: uppercase;
}

.calio-cdf-cal__day,
.calio-cdf-cal__pad {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 46px;
}

.calio-cdf-cal__day {
	background: transparent;
	border: 1px solid transparent;
	border-radius: var( --bc-radius-sm );
	box-sizing: border-box;
	color: var( --bc-ink );
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	padding: 0;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
	user-select: none;
	width: 100%;
}

/* Extra headroom so the "Nuværende" flag above a first-row current date has room. */
.calio-cdf-cal__days {
	margin-top: 14px;
	overflow: visible;
}

.calio-cdf-cal__day:not(.is-disabled):not(.is-current):hover {
	background: var( --bc-tint );
	border-color: var( --bc-line-strong );
}

.calio-cdf-cal__day.is-disabled {
	color: var( --bc-line-strong );
	cursor: default;
	font-weight: 500;
}

/* Current renewal date — a clearly marked, non-selectable box with an always-visible flag */
.calio-cdf-cal__day.is-current {
	background: var( --bc-tint );
	border: 1.5px solid var( --bc-primary );
	color: var( --bc-primary-ink );
	cursor: default;
	font-weight: 700;
	overflow: visible;
	position: relative;
}

.calio-cdf-cal__flag {
	background: var( --bc-primary );
	border-radius: 6px;
	bottom: calc( 100% + 3px );
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	left: 50%;
	letter-spacing: .03em;
	line-height: 1;
	padding: 3px 6px;
	pointer-events: none;
	position: absolute;
	text-transform: uppercase;
	transform: translateX(-50%);
	white-space: nowrap;
	z-index: 6;
}

/* Little downward arrow joining the flag to the date. */
.calio-cdf-cal__flag::after {
	border: 4px solid transparent;
	border-top-color: var( --bc-primary );
	bottom: -7px;
	content: "";
	height: 0;
	left: 50%;
	margin-left: -4px;
	position: absolute;
	width: 0;
}

/* Selected date — solid primary */
.calio-cdf-cal__day.is-selected,
.calio-cdf-cal__day.is-selected:hover {
	background: var( --bc-primary ) !important;
	border-color: var( --bc-primary ) !important;
	color: #fff !important;
	transform: translateY(-1px);
}

.calio-cdf-cal__day:focus-visible {
	box-shadow: var( --bc-ring );
	outline: none;
}

/* Timeline */
.calio-cdf-tl {
	background: var( --bc-surface );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius );
	box-shadow: var( --bc-shadow-sm );
	margin-top: 20px;
	padding: 22px;
}

.calio-cdf .calio-cdf-tl h4 {
	font-size: 18px !important;
	font-weight: 700;
	line-height: 1.3 !important;
	margin: 0 0 16px;
}

.calio-cdf-tl__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.calio-cdf-tl__list li {
	display: flex;
	gap: 14px;
	padding-bottom: 18px;
	position: relative;
}

/* Vertical connector between dots */
.calio-cdf-tl__list li::before {
	background: var( --bc-line-strong );
	content: "";
	left: 7px;
	position: absolute;
	top: 18px;
	width: 2px;
	bottom: -4px;
}

.calio-cdf-tl__list li:last-child {
	padding-bottom: 0;
}

.calio-cdf-tl__list li:last-child::before {
	display: none;
}

.calio-cdf-tl__dot {
	background: var( --bc-surface );
	border: 2px solid var( --bc-line-strong );
	border-radius: 50%;
	flex: 0 0 16px;
	height: 16px;
	margin-top: 2px;
	position: relative;
	width: 16px;
	z-index: 1;
}

.calio-cdf-tl__list li.is-first .calio-cdf-tl__dot {
	background: var( --bc-primary );
	border-color: var( --bc-primary );
}

.calio-cdf-tl__body strong {
	color: var( --bc-ink );
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

/* Success (confirmation) page */
.calio-cdf__success {
	align-items: flex-start;
	background: var( --bc-tint );
	border: 1px solid var( --bc-line );
	border-radius: var( --bc-radius );
	display: flex;
	gap: 16px;
	margin-bottom: 22px;
	padding: 22px 24px;
}

.calio-cdf__success-icon {
	align-items: center;
	background: var( --bc-primary );
	border-radius: 50%;
	display: inline-flex;
	flex: 0 0 46px;
	height: 46px;
	justify-content: center;
	width: 46px;
}

.calio-cdf__success-icon svg {
	fill: #fff;
	height: 20px;
	width: 20px;
}

.calio-cdf .calio-cdf__success h3 {
	font-size: 24px !important;
	font-weight: 700;
	margin: 2px 0 6px;
}

.calio-cdf__success p {
	color: var( --bc-text );
	margin: 0;
}

@media (max-width: 767px) {
	.calio-cdf__current {
		gap: 12px;
		padding: 14px;
	}

	.calio-cdf__current-icon {
		flex: 0 0 38px;
		height: 38px;
		width: 38px;
	}

	.calio-cdf__current-date {
		font-size: 17px;
	}

	.calio-cdf-cal {
		padding: 14px 12px 16px;
	}

	.calio-cdf-cal__title {
		font-size: 16px;
	}

	.calio-cdf-cal__weekdays,
	.calio-cdf-cal__days {
		gap: 3px;
	}

	.calio-cdf-cal__weekdays span {
		font-size: 11px;
		padding: 2px 0;
	}

	.calio-cdf-cal__day,
	.calio-cdf-cal__pad {
		min-height: 40px;
	}

	.calio-cdf-cal__day {
		font-size: 14px;
	}

	.calio-cdf-tl {
		padding: 18px 16px;
	}

	.calio-cdf__success {
		gap: 13px;
		padding: 18px;
	}

	.calio-cdf .calio-cdf__success h3 {
		font-size: 21px !important;
	}
}

@media (max-width: 380px) {
	.calio-cdf-cal {
		padding: 12px 8px 14px;
	}

	.calio-cdf-cal__weekdays span {
		font-size: 10px;
	}

	.calio-cdf-cal__day {
		font-size: 13px;
	}
}
