/**
 * bif365 SMM Checkout — customer-facing flow.
 *
 * Colours and type bind to Elementor's global CSS variables first, with the
 * site's current values as fallbacks. Change the palette in Elementor and this
 * follows automatically; if the variables are ever absent it still renders in
 * the right brand colours.
 */

/* The theme's slug-derived page title ("Smm-order") adds nothing for a
   customer; the flow renders its own heading per step. */
.bif365-page .page-header,
.bif365-page .entry-header,
.bif365-page .entry-title,
.bif365-page .page-title { display: none !important; }

.bif365 {
	--bif-primary: var(--e-global-color-primary, #3fa9f5);
	/* Blue is the brand accent throughout — prices, primary actions, selection. */
	--bif-brand: var(--bif-primary);
	--bif-heading: var(--e-global-color-secondary, #000);
	--bif-text: var(--e-global-color-text, #3f3f3f);

	/* Alias, kept so every text/fill usage has one place to retune. Currently
	   the brand blue itself — deliberately not darkened. */
	--bif-primary-ink: var(--bif-primary);
	--bif-primary-soft: color-mix(in srgb, var(--bif-primary) 10%, #fff);
	--bif-primary-line: color-mix(in srgb, var(--bif-primary) 38%, #fff);
	--bif-brand-soft: var(--bif-primary-soft);

	--bif-surface: #fff;
	--bif-muted: #6b7280;
	--bif-line: #e5e7eb;
	--bif-radius: 16px;
	--bif-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px rgba(16, 24, 40, .07);

	--bif-font: var(--e-global-typography-text-font-family, "Outfit"), system-ui, -apple-system, "Segoe UI", sans-serif;

	font-family: var(--bif-font);
	color: var(--bif-text);
	max-width: 860px;
	/* Breathing room so the flow never sits flush against header or footer. */
	/* Clears the site header and footer — the flow was sitting flush against both. */
	margin: 48px auto 64px;
	padding: 34px 26px 40px;
	line-height: 1.5;
	box-sizing: border-box;

	/* A faintly tinted canvas is what lets the white step cards read as cards —
	   on a plain white page they would just be invisible boxes. */
	background: linear-gradient(180deg, #F7FBFF 0%, #FFFFFF 100%);
	border-radius: 22px;
}

.bif365 *,
.bif365 *::before,
.bif365 *::after { box-sizing: inherit; }

/* Neutralise the theme's button styling inside the flow.
   Hello Elementor gives every <button> a crimson fill with white text, which is
   where the red/purple hover and the invisible selected label came from.
   Scoped away from .bif365-btn — an unscoped reset also stripped the background
   from the flow's own primary buttons and left them looking like plain text. */
.bif365 button:not(.bif365-btn) {
	background: none;
	background-image: none;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}

.bif365 button:not(.bif365-btn):hover,
.bif365 button:not(.bif365-btn):focus,
.bif365 button:not(.bif365-btn):active {
	background: none;
	background-image: none;
	color: inherit;
	box-shadow: none;
}

/* ── progress ─────────────────────────────────────────────── */
/* Sits in the same rounded tinted panel as "Your selection" so the top of the
   page reads as one designed block rather than loose text. */
.bif365-steps {
	display: flex;
	gap: 6px;
	list-style: none;
	margin: 0 0 14px;
	padding: 11px 16px;
	background: #fff;
	border: 1px solid var(--bif-line);
	border-radius: var(--bif-radius);
}

.bif365-steps__item {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--bif-muted);
	transition: color .2s;
	min-width: 0;
}

.bif365-steps__item span {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	/* Not-yet-reached steps: grey on grey must still be legible. */
	background: #d1d5db;
	color: #374151;
	font-size: 12px;
	font-weight: 600;
	flex: 0 0 auto;
}

.bif365-steps__item.is-active,
.bif365-steps__item.is-done { color: var(--bif-heading); }

.bif365-steps__item.is-active span,
.bif365-steps__item.is-done span { background: var(--bif-primary-ink); color: #fff; }

/* ── panels ───────────────────────────────────────────────── */
/* Each step is a card on a tinted page, which is what gives the flow its
   dashboard feel rather than a form floating on white. */
.bif365-panel {
	animation: bif365-in .22s ease both;
	background: #fff;
	border: 1px solid var(--bif-line);
	border-radius: 20px;
	padding: 22px 24px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05);
}

.bif365-panel[hidden] { display: none; }
.bif365-panel:not([data-eyebrow])::before { display: none; }

/* Small caps eyebrow above each step heading, dashboard style. */
.bif365-panel::before {
	content: attr(data-eyebrow);
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bif-primary-ink);
	margin-bottom: 6px;
}

@keyframes bif365-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bif365-panel { animation: none; }
}

.bif365-h {
	font-family: var(--e-global-typography-primary-font-family, "Outfit"), var(--bif-font);
	font-size: clamp(20px, 3vw, 25px);
	font-weight: 600;
	color: var(--bif-heading);
	margin: 0 0 6px;
	line-height: 1.25;
}

.bif365-sub {
	margin: 0 0 16px;
	color: var(--bif-muted);
	font-size: 14.5px;
}

.bif365-label {
	font-weight: 500;
	color: var(--bif-heading);
	margin: 0 0 8px;
	font-size: 15px;
}

/* ── choice grids ─────────────────────────────────────────── */
/* ── platform / service rails ─────────────────────────────── */
/* Compact horizontal sliders rather than a wall of large boxes. */
.bif365-rail-wrap { position: relative; margin: 0 0 14px; }

.bif365-platforms,
.bif365-services {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	padding: 3px 2px 8px;
	margin: 0;
	scrollbar-width: none;
}

.bif365-platforms::-webkit-scrollbar,
.bif365-services::-webkit-scrollbar { display: none; }

.bif365-platforms .bif365-choice,
.bif365-services .bif365-choice {
	scroll-snap-align: start;
	flex: 0 0 auto;
	min-width: 118px;
	min-height: 0;
	padding: 11px 18px;
	border-radius: 12px;
	border-width: 2px;
	font-size: 14.5px;
}

.bif365-platforms .bif365-choice__title,
.bif365-services .bif365-choice__title { font-size: 14.5px; }

/* ── package slider ───────────────────────────────────────── */
/* Horizontal rail rather than a grid: eight tiers as a wall of boxes is a lot
   to parse, and letting the next card peek past the edge signals there is more
   to see far better than a scrollbar does. */
.bif365-pack-wrap { position: relative; margin: 0 0 18px; }

.bif365-packages {
	display: grid;
	grid-auto-flow: column;
	/* Five full cards plus a sliver of the sixth, so there is always a visible
	   cue that the rail continues. */
	grid-auto-columns: calc((100% - 5 * 12px) / 5.5);
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 2px 12px;
	margin: 0;
	scrollbar-width: none;
}

.bif365-packages::-webkit-scrollbar { display: none; }

.bif365-pack {
	scroll-snap-align: start;
	appearance: none;
	border: 2px solid var(--bif-line);
	border-radius: 18px;
	background: var(--bif-surface);
	padding: 0;
	cursor: pointer;
	font: inherit;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	transition: border-color .16s, transform .16s, box-shadow .16s;
	position: relative;
}

.bif365 .bif365-pack:hover,
.bif365 .bif365-pack:focus {
	transform: translateY(-2px);
	border-color: var(--bif-primary);
	background: var(--bif-surface);
}

.bif365 .bif365-pack:focus-visible { outline: 3px solid var(--bif-primary-line); outline-offset: 2px; }

.bif365 .bif365-pack.is-selected,
.bif365 .bif365-pack.is-selected:hover {
	border-color: var(--bif-primary);
	background: var(--bif-primary-soft);
	box-shadow: var(--bif-shadow);
}

/* quantity pill sitting on the top edge, as on the site's own cards */
.bif365-pack__pill {
	align-self: center;
	margin: -1px 0 0;
	background: var(--bif-primary-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 14px;
	border-radius: 0 0 11px 11px;
	min-width: 50px;
	text-align: center;
}

.bif365-pack__label {
	padding: 12px 8px 11px;
	font-weight: 600;
	font-size: 14px;
	color: var(--bif-heading);
	text-align: center;
	flex: 1 1 auto;
	line-height: 1.25;
}

/* price band across the bottom */
.bif365-pack__price {
	background: var(--bif-primary-ink);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	padding: 9px 6px;
	text-align: center;
}

.bif365-pack__price del { opacity: .65; font-weight: 400; margin-right: 6px; }
.bif365-pack__price ins { text-decoration: none; }
.bif365-pack__price .woocommerce-Price-amount { color: #fff; }

.bif365-pack.is-selected .bif365-pack__price { background: var(--bif-heading); }
.bif365-pack.is-selected .bif365-pack__pill { background: var(--bif-heading); }

.bif365-pack__tick {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--bif-heading);
	color: #fff;
	display: none;
	place-items: center;
	font-size: 13px;
	font-weight: 700;
}

.bif365-pack.is-selected .bif365-pack__tick { display: grid; }

/* arrows */
.bif365-pack-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--bif-line);
	background: #fff;
	color: var(--bif-heading);
	cursor: pointer;
	display: grid;
	place-items: center;
	box-shadow: 0 2px 10px rgba(16, 24, 40, .12);
	z-index: 2;
	font-size: 17px;
	line-height: 1;
	padding: 0;
	transition: opacity .16s, background .16s;
}

.bif365-pack-nav:hover { background: var(--bif-primary-ink); color: #fff; border-color: var(--bif-primary); }
.bif365-pack-nav[disabled] { opacity: 0; pointer-events: none; }
.bif365-pack-nav--prev { left: -14px; }
.bif365-pack-nav--next { right: -14px; }

.bif365-choice {
	appearance: none;
	background: var(--bif-surface);
	border: 2px solid var(--bif-line);
	border-radius: var(--bif-radius);
	padding: 16px 14px;
	cursor: pointer;
	text-align: center;
	font: inherit;
	color: var(--bif-heading);
	transition: border-color .16s, box-shadow .16s, transform .16s;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-height: 74px;
	justify-content: center;
}

/* Every state sets its own background and colour explicitly, so nothing the
   theme defines for <button> can leak in. */
.bif365 .bif365-choice:hover:not(:disabled),
.bif365 .bif365-choice:focus:not(:disabled) {
	background: var(--bif-primary-soft);
	border-color: var(--bif-primary-line);
	color: var(--bif-heading);
	transform: translateY(-1px);
}

.bif365 .bif365-choice:focus-visible {
	outline: 3px solid var(--bif-primary-line);
	outline-offset: 2px;
}

.bif365 .bif365-choice.is-selected,
.bif365 .bif365-choice.is-selected:hover,
.bif365 .bif365-choice.is-selected:focus {
	border-color: var(--bif-primary);
	background: var(--bif-primary-soft);
	/* Dark label on the light selected fill — readable, unlike the theme's white. */
	color: var(--bif-heading);
	box-shadow: var(--bif-shadow);
}

.bif365 .bif365-choice.is-selected .bif365-choice__title { color: var(--bif-heading); }

.bif365 .bif365-choice:disabled {
	opacity: .5;
	cursor: not-allowed;
	background: #fafafa;
	color: var(--bif-muted);
}

.bif365-choice__title { font-weight: 600; font-size: 16px; }
.bif365-choice__note  { font-size: 12px; color: var(--bif-muted); }

.bif365-choice__price {
	font-weight: 600;
	color: var(--bif-primary-ink);
	font-size: 15px;
}

.bif365-choice__price del { opacity: .5; font-weight: 400; margin-right: 4px; }
.bif365-choice__price ins { text-decoration: none; }

.bif365-badge {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #b45309;
	background: #fef3c7;
	border-radius: 99px;
	padding: 2px 8px;
}

/* ── fields ───────────────────────────────────────────────── */
.bif365-field { margin: 0 0 14px; }

.bif365-field__label {
	display: block;
	font-weight: 500;
	color: var(--bif-heading);
	margin-bottom: 7px;
	font-size: 15px;
}

.bif365-input-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.bif365-input-shell {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}


/* One field style shared by username, name and email.
   Declared with !important because the theme and WooCommerce both style bare
   inputs with higher specificity than a single class, and without it the fields
   fall back to a plain grey box. */
.bif365 .bif365-input,
.bif365 input.bif365-input,
.bif365 input[type="text"].bif365-input,
.bif365 input[type="email"].bif365-input,
.bif365 input[type="url"].bif365-input {
	flex: 1 1 auto;
	width: 100%;
	font: inherit !important;
	font-size: 16px !important; /* 16px stops iOS zooming on focus */
	padding: 11px 16px !important;
	border: 1px solid var(--bif-primary-line) !important;
	border-radius: var(--bif-radius) !important;
	background: var(--bif-primary-soft) !important;
	color: var(--bif-heading) !important;
	box-shadow: none !important;
	transition: border-color .16s, box-shadow .16s, background .16s;
	min-width: 0;
	line-height: 1.4 !important;
	height: auto !important;
	margin: 0 !important;
}

.bif365 .bif365-input:focus {
	outline: none !important;
	background: #fff !important;
	border-color: var(--bif-primary) !important;
	box-shadow: 0 0 0 3px var(--bif-primary-soft) !important;
}

.bif365 .bif365-input::placeholder { color: color-mix(in srgb, var(--bif-muted) 70%, #fff); }

.bif365 .bif365-input.has-error { border-color: #dc2626 !important; }

.bif365-field__error {
	margin: 7px 0 0;
	color: #b91c1c;
	font-size: 14px;
}

/* ── buttons ──────────────────────────────────────────────── */
.bif365-btn {
	appearance: none;
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	border-radius: 11px;
	padding: 13px 22px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: filter .16s, background .16s, border-color .16s;
	white-space: nowrap;
	line-height: 1.2;
}

.bif365-btn:focus-visible {
	outline: 3px solid var(--bif-primary-line);
	outline-offset: 2px;
}

/* Specificity kept above the theme's own button rules. */
.bif365 .bif365-btn--primary,
.bif365 .bif365-btn--brand {
	background: var(--bif-primary-ink);
	color: #fff;
	border-color: var(--bif-primary);
}

.bif365 .bif365-btn--primary:hover:not(:disabled),
.bif365 .bif365-btn--brand:hover:not(:disabled),
.bif365 .bif365-btn--primary:focus:not(:disabled),
.bif365 .bif365-btn--brand:focus:not(:disabled) {
	background: var(--bif-primary-ink);
	color: #fff;
	filter: brightness(1.07);
}

.bif365 .bif365-btn--ghost {
	background: #fff;
	color: var(--bif-muted);
	border-color: var(--bif-line);
}

.bif365 .bif365-btn--ghost:hover:not(:disabled),
.bif365 .bif365-btn--ghost:focus:not(:disabled) {
	background: #fff;
	color: var(--bif-heading);
	border-color: var(--bif-muted);
}

.bif365-btn:disabled { opacity: .55; cursor: not-allowed; }

.bif365-btn.is-busy { position: relative; color: transparent !important; }

.bif365-btn.is-busy::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 17px;
	height: 17px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: bif365-spin .7s linear infinite;
}

.bif365-btn--ghost.is-busy::after { border-color: rgba(0, 0, 0, .2); border-top-color: var(--bif-muted); }

@keyframes bif365-spin { to { transform: rotate(360deg); } }

.bif365-nav {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.bif365-nav .bif365-btn--primary,
.bif365-nav .bif365-btn--brand { margin-left: auto; }

/* ── profile preview ──────────────────────────────────────── */
.bif365-profile {
	border: 1px solid var(--bif-primary-line);
	background: var(--bif-primary-soft);
	border-radius: var(--bif-radius);
	padding: 14px 16px;
	margin: 4px 0 14px;
	animation: bif365-in .3s ease both;
}

.bif365-profile__card {
	display: flex;
	align-items: center;
	gap: 16px;
}

.bif365-profile__avatar {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	object-fit: cover;
	background: #e5e7eb;
	border: 3px solid #fff;
	flex: 0 0 auto;
}

.bif365-profile__meta { min-width: 0; }

.bif365-profile__name {
	margin: 0;
	font-weight: 600;
	font-size: 18px;
	color: var(--bif-heading);
	overflow-wrap: anywhere;
}

.bif365-profile__handle { margin: 1px 0 0; color: var(--bif-muted); font-size: 14px; }

.bif365-profile__followers {
	margin: 5px 0 0;
	font-weight: 600;
	color: var(--bif-primary-ink);
	font-size: 15px;
}

.bif365-profile__private {
	margin: 14px 0 0;
	padding: 10px 13px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 9px;
	font-size: 14px;
	color: #92400e;
}

/* Confirmed state: the profile card IS the confirmation, so it collapses to a
   compact row with a quiet "Change" link rather than a pair of big buttons. */
.bif365-profile.is-confirmed {
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.bif365-profile.is-confirmed .bif365-profile__card { flex: 1 1 auto; gap: 12px; }
.bif365-profile.is-confirmed .bif365-profile__avatar { width: 44px; height: 44px; border-width: 2px; }
.bif365-profile.is-confirmed .bif365-profile__name { font-size: 16px; }
.bif365-profile.is-confirmed .bif365-profile__handle { display: none; }
.bif365-profile.is-confirmed .bif365-profile__followers { font-size: 13px; margin-top: 1px; }

/* Declared against the theme so it can never inherit a dark fill with dark
   text — the pill states its own background and colour in every state. */
.bif365 .bif365-profile__change,
.bif365 button.bif365-profile__change {
	appearance: none;
	background: #fff !important;
	border: 1px solid var(--bif-primary-line) !important;
	border-radius: 999px !important;
	padding: 6px 15px !important;
	font: inherit !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	color: var(--bif-primary-ink) !important;
	text-decoration: none !important;
	text-transform: none !important;
	cursor: pointer;
	margin-left: auto;
	white-space: nowrap;
	line-height: 1.3 !important;
	box-shadow: none !important;
}

.bif365 .bif365-profile__change:hover,
.bif365 .bif365-profile__change:focus {
	background: var(--bif-primary-ink) !important;
	border-color: var(--bif-primary) !important;
	color: #fff !important;
}

.bif365-profile__ask {
	margin: 16px 0 0;
	font-weight: 500;
	color: var(--bif-heading);
}

.bif365-verified {
	display: inline-block;
	margin-left: 5px;
	color: var(--bif-primary-ink);
	font-size: 14px;
}

/* The profile card sits on a tinted panel, so the greys and the blue that
 * clear AA on white land just under it. Deepen both on this surface only. */
.bif365-profile__handle { color: #5a6273; }
.bif365-profile__followers { color: var(--bif-primary); }

/* ── posts grid ───────────────────────────────────────────── */
.bif365-posts { margin: 0 0 14px; }

.bif365-posts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 10px;
}

.bif365-post {
	appearance: none;
	padding: 0;
	border: 3px solid transparent;
	border-radius: 11px;
	overflow: hidden;
	cursor: pointer;
	background: #f3f4f6;
	position: relative;
	aspect-ratio: 1;
	transition: border-color .16s, transform .16s;
	display: block;
	width: 100%;
}

.bif365-post img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bif365-post:hover { transform: translateY(-2px); }
.bif365-post:focus-visible { outline: 3px solid var(--bif-primary-line); outline-offset: 2px; }
.bif365-post.is-selected { border-color: var(--bif-primary); }

.bif365-post.is-selected::after {
	content: "✓";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 24px;
	height: 24px;
	background: var(--bif-primary-ink);
	color: #fff;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 14px;
	font-weight: 700;
}

/* Cover image failed to load — keep the tile selectable, just visibly empty. */
.bif365-post.is-broken {
	background: #eef0f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='%239aa2ad' stroke-width='1.6'%3E%3Crect x='3' y='5' width='22' height='18' rx='2'/%3E%3Ccircle cx='10' cy='11' r='2'/%3E%3Cpath d='M4 20l6-6 5 4 4-3 5 5'/%3E%3C/svg%3E") center/28px no-repeat;
}

.bif365-post.is-broken img { opacity: 0; }

.bif365-post__vid {
	position: absolute;
	bottom: 6px;
	left: 7px;
	color: #fff;
	font-size: 13px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* skeleton while posts load */
.bif365-skel {
	aspect-ratio: 1;
	border-radius: 11px;
	background: linear-gradient(100deg, #f0f1f3 30%, #e4e6e9 50%, #f0f1f3 70%);
	background-size: 220% 100%;
	animation: bif365-shimmer 1.15s linear infinite;
}

@keyframes bif365-shimmer { to { background-position: -220% 0; } }

/* ── deep-linked selection banner ─────────────────────────── */
.bif365-picked {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	background: var(--bif-primary-soft);
	border: 1px solid var(--bif-primary-line);
	border-radius: var(--bif-radius);
	padding: 13px 16px;
	margin: 0 0 22px;
}

.bif365-picked__body {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	min-width: 0;
}

.bif365-picked__label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--bif-muted);
	font-weight: 600;
}

.bif365-picked__text { font-weight: 600; color: var(--bif-heading); }
.bif365-picked__price { font-weight: 600; color: var(--bif-primary-ink); }

.bif365-picked__change {
	appearance: none;
	background: none;
	border: none;
	padding: 0;
	margin-left: auto;
	font: inherit;
	font-size: 14px;
	color: var(--bif-primary-ink);
	text-decoration: underline;
	cursor: pointer;
}

/* ── inline payment ───────────────────────────────────────── */
.bif365-payment { margin-top: 18px; }

.bif365-payment__title {
	font-size: 19px;
	padding-top: 16px;
	border-top: 1px solid var(--bif-line);
}

/* Payment step shows a card form and nothing else. Name and email were taken
   two steps back, the totals are in the summary directly above, and Square
   collects its own postcode inside its hosted field. */
.bif365-payment__mount #order_review_heading,
.bif365-payment__mount .woocommerce-billing-fields h3,
.bif365-payment__mount .woocommerce-billing-fields__field-wrapper,
.bif365-payment__mount .woocommerce-shipping-fields,
.bif365-payment__mount .woocommerce-additional-fields,
.bif365-payment__mount .woocommerce-form-coupon-toggle,
.bif365-payment__mount .checkout_coupon,
.bif365-payment__mount .woocommerce-checkout-review-order-table,
.bif365-payment__mount .woocommerce-terms-and-conditions-wrapper,
.bif365-payment__mount .bif365-hidden-field,
.bif365-payment__mount .woocommerce-privacy-policy-text { display: none !important; }

/* ── payment ──────────────────────────────────────────────── */
/* Compact chrome around the gateway. The hosted card iframe itself is never
   touched — only the WooCommerce furniture around it, which otherwise takes
   several hundred pixels to say very little. */

.bif365-payment__mount .wc_payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--bif-line);
	border-radius: var(--bif-radius);
	overflow: hidden;
	background: #fff;
}

.bif365-payment__mount .wc_payment_method { border-top: 1px solid var(--bif-line); }
.bif365-payment__mount .wc_payment_method:first-child { border-top: 0; }

.bif365-payment__mount .wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: nowrap;
	margin: 0;
	padding: 11px 14px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--bif-heading);
	cursor: pointer;
	line-height: 1.2;
}

.bif365-payment__mount .wc_payment_method > input[type="radio"] {
	margin: 0 0 0 14px;
	accent-color: var(--bif-primary-ink);
	flex: 0 0 auto;
}

/* Card-brand icons: fixed 20px so a row of seven cannot wrap and blow out the
   layout on a phone. */
.bif365-payment__mount .wc_payment_method label img,
.bif365-payment__mount .wc_payment_method label svg {
	width: 20px !important;
	height: 20px !important;
	max-width: 20px !important;
	max-height: 20px !important;
	object-fit: contain;
	margin: 0 !important;
	padding: 0;
	display: inline-block;
	flex: 0 0 auto;
	vertical-align: middle;
}

.bif365-payment__mount .payment_box {
	background: #fbfcfd;
	border: 0;
	border-top: 1px solid var(--bif-line);
	border-radius: 0;
	margin: 0;
	padding: 12px 14px;
	font-size: 14px;
}

.bif365-payment__mount .payment_box::before { display: none; }
.bif365-payment__mount .payment_box > p { margin: 0 0 9px; color: var(--bif-muted); font-size: 13px; }
.bif365-payment__mount .payment_box > *:last-child { margin-bottom: 0; }

/* Square wraps its hosted field in containers that reserve a lot of empty
   vertical space; collapse those without touching the iframe. */
.bif365-payment__mount #wc-square-credit-card-credit-card-form,
.bif365-payment__mount .wc-square-credit-card-new-payment-method-form,
.bif365-payment__mount #wc-square-credit-card-container {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	min-height: 0 !important;
}

.bif365-payment__mount #wc-square-credit-card-container iframe { display: block; margin: 0; }

/* Digital wallet keeps its own dark button — never repaint a black button's
   background without its text, or it becomes unreadable. */
.bif365-payment__mount .wc-square-digital-wallet,
.bif365-payment__mount .wc-square-wallet-container {
	margin: 0 0 10px;
	padding: 0;
}

.bif365-payment__mount .wc-square-digital-wallet-divider {
	margin: 8px 0;
	font-size: 12px;
	color: var(--bif-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.bif365-payment__mount .wc-square-wallet-buttons,
.bif365-payment__mount .wc-square-wallet-buttons > div { margin: 0 !important; }

.bif365-payment__mount #place_order {
	margin: 12px 0 0;
	width: 100%;
	border-radius: var(--bif-radius);
	padding: 14px 24px;
	font-weight: 600;
	font-size: 16px;
	background: var(--bif-primary-ink);
	color: #fff;
	border: 0;
	cursor: pointer;
}

.bif365-payment__mount #place_order:hover { filter: brightness(1.07); color: #fff; }

.bif365-payment__mount .woocommerce-NoticeGroup,
.bif365-payment__mount .woocommerce-error { margin: 0 0 12px; font-size: 14px; }

/* ── summary + alerts ─────────────────────────────────────── */
.bif365-summary {
	background: #f9fafb;
	border: 1px solid var(--bif-line);
	border-radius: var(--bif-radius);
	padding: 13px 16px;
	margin: 4px 0 6px;
	font-size: 14.5px;
}

.bif365-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; }
.bif365-summary dt { color: var(--bif-muted); }
.bif365-summary dd { margin: 0; font-weight: 600; color: var(--bif-heading); text-align: right; overflow-wrap: anywhere; }
.bif365-summary .bif365-total { border-top: 1px solid var(--bif-line); padding-top: 9px; margin-top: 3px; }
.bif365-summary .bif365-total dd { color: var(--bif-primary-ink); font-size: 17px; }

.bif365-alert {
	border-radius: 11px;
	padding: 13px 16px;
	margin: 0 0 20px;
	font-size: 15px;
	border: 1px solid #fecaca;
	background: #fef2f2;
	color: #991b1b;
}

.bif365-notice {
	border-radius: 11px;
	padding: 14px 17px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #92400e;
}

.bif365-chosen { font-weight: 500; color: var(--bif-primary-ink); }

.bif365-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	justify-content: center;
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--bif-line);
	font-size: 13px;
	color: var(--bif-muted);
}

.bif365-trust span::before { content: "✓ "; color: #16a34a; font-weight: 700; }

/* ── mobile ───────────────────────────────────────────────── */
@media (max-width: 600px) {
	.bif365 { margin: 28px auto 36px; padding: 20px 14px 26px; border-radius: 16px; }
	.bif365-panel { padding: 16px 14px; border-radius: 16px; }

	.bif365-steps { padding: 10px 12px; }
	.bif365-steps__item { font-size: 0; gap: 0; justify-content: center; }
	.bif365-steps__item span { font-size: 12px; }

	/* Keep the field and its button on one line so the @ never separates from
	   the input, and the row stays compact. */
	.bif365-input-row { flex-wrap: nowrap; }
	.bif365-input-row .bif365-btn { width: auto; flex: 0 0 auto; padding: 11px 16px; }

	/* Two and a bit cards visible, sized to the screen rather than stretched.
	   The old grid-template rules here overrode the slider's column flow, which
	   is what made the cards go full width and run off the edge. */
	.bif365-packages {
		grid-auto-columns: calc((100% - 2 * 10px) / 2.4);
		gap: 10px;
	}

	.bif365-pack-nav { width: 32px; height: 32px; font-size: 15px; }
	.bif365-pack-nav--prev { left: -6px; }
	.bif365-pack-nav--next { right: -6px; }

	.bif365-platforms .bif365-choice,
	.bif365-services .bif365-choice { min-width: 104px; padding: 10px 14px; font-size: 14px; }

	.bif365-posts__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }

	.bif365-nav { flex-direction: column-reverse; }
	.bif365-nav .bif365-btn { width: 100%; margin-left: 0; }

	.bif365-profile.is-confirmed { padding: 12px 14px; gap: 10px; }
	.bif365-profile__card { gap: 11px; }
	.bif365-profile__avatar { width: 42px; height: 42px; }
	.bif365-h { font-size: 20px; }
}