/**
 * Pick-a-video buying flow, on the paid likes page.
 *
 * Sits in a `.svc-section.band` so it shares the pricing section's background
 * and reads as part of the same decision rather than a separate widget.
 *
 * Input rules are `.buy .buy-input` (0-2-0): the theme styles bare
 * input[type="text"] at 0-1-1 and a single class loses that fight.
 *
 * Colour comes from `--brand`, which `.svc-page[data-accent]` sets per service:
 * magenta on likes, violet on views, indigo on shares. It used to read the
 * global `--violet`/`--grad` instead, which happened to look right on the likes
 * page and wrong everywhere else. The fallbacks keep the original magenta for
 * any context outside a service page. Match `.svc-page .btn-primary` rather
 * than inventing a second button style.
 */

/* One white card, matching the Health Scan: same surface, hairline, radius and
   medium shadow, so the two tools read as the same family. */
.buy {
	position: relative;
	width: min(52rem, 100%);
	margin-inline: auto;
	padding: clamp(1.25rem, 3.5vw, 2rem);
	background: var(--surface, #fff);
	border: 1px solid var(--hairline, #E7D8F2);
	border-radius: var(--r, 16px);
	box-shadow: var(--sh-md, 0 2px 6px #1E123312, 0 14px 34px -10px #1E123326);
}

.buy-step[hidden] { display: none; }

.buy-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.buy-at { font-size: 1.1rem; font-weight: 600; color: var(--muted, #7C6B94); }

.buy .buy-input {
	flex: 1 1 12rem;
	min-width: 0;
	width: auto;
	padding: .8rem .95rem;
	border: 1px solid var(--hairline, #E7D8F2);
	border-radius: var(--r-sm, 10px);
	background: var(--paper-2, #FBF7FD);
	color: var(--ink, #1E1233);
	font: inherit;
	font-size: 1rem;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.buy .buy-input:focus {
	outline: none;
	border-color: var(--brand, #9B23D4);
	box-shadow: 0 0 0 3px var(--brand-soft, #9B23D426);
}

.buy .buy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .8rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--brand, #C4267E);
	color: #fff;
	font: inherit;
	font-size: .97rem;
	font-weight: 650;
	cursor: pointer;
	transition: transform .16s, box-shadow .16s;
}

.buy .buy-btn:hover:not(:disabled) {
	transform: translateY(-1px);
	filter: brightness(1.06);
	box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--brand, #C4267E) 55%, transparent);
}

.buy .buy-btn:disabled { opacity: .5; cursor: default; }

.buy .buy-btn-lg { width: 100%; margin-top: 1.25rem; padding: .95rem 1.5rem; font-size: 1.02rem; }

.buy-hint { margin: .65rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--muted, #7C6B94); }

.buy-lead { margin: 0 0 .9rem; font-size: 1rem; font-weight: 650; color: var(--ink, #1E1233); }

.buy-back {
	margin-top: 1rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--muted, #7C6B94);
	font: inherit;
	font-size: .88rem;
	cursor: pointer;
	text-decoration: underline;
}

.buy-back:hover { color: var(--brand, #9B23D4); }

/* ---------------- profile ---------------- */

.buy-profile { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.buy-avatar { width: 2.6rem; height: 2.6rem; border-radius: 999px; object-fit: cover; }
.buy-profile-meta { display: flex; flex-direction: column; line-height: 1.25; }
.buy-profile-name { font-weight: 700; color: var(--ink, #1E1233); }
.buy-profile-handle { font-size: .85rem; color: var(--muted, #7C6B94); }

/* ---------------- video grid ---------------- */

/* Four across, two rows of four. Eight in a single row made each thumbnail
   about 89px wide, too small to tell one video from another — which is the only
   job this grid has. Fixed columns rather than auto-fill, which would reflow to
   5 or 6 depending on viewport and leave a ragged last row. */
.buy-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .7rem;
}

.buy-card {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.buy-card-shot {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var(--r-sm, 10px);
	background: var(--paper, #F5ECFA);
	border: 2px solid transparent;
	transition: border-color .16s, transform .16s;
}

.buy-card-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.buy-card:hover .buy-card-shot { transform: translateY(-2px); border-color: var(--hairline-2, #D8C2E8); }

.buy-card-plays {
	position: absolute;
	left: .35rem;
	bottom: .35rem;
	padding: .1rem .4rem;
	border-radius: 999px;
	background: #1E1233A6;
	color: #fff;
	font-size: .7rem;
	font-weight: 600;
}

.buy-card-tick {
	position: absolute;
	top: .35rem;
	right: .35rem;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 999px;
	background: var(--brand, #9B23D4);
	opacity: 0;
	transform: scale(.7);
	transition: opacity .16s, transform .16s;
}

/* The tick needs an actual tick in it — a bare circle reads as a bug. */
.buy-card-tick::after {
	content: "";
	position: absolute;
	left: .42rem;
	top: .27rem;
	width: .28rem;
	height: .52rem;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

.buy-card.is-picked .buy-card-tick { transform: scale(1); }

.buy-card-desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .78rem;
	line-height: 1.35;
	color: var(--ink-2, #4C3D66);
}

/* ---------------- chosen video ---------------- */

.buy-chosen { margin-bottom: 1.1rem; }

.buy-chosen-inner {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .7rem .85rem;
	border-radius: var(--r-sm, 10px);
	background: var(--paper-2, #FBF7FD);
	border: 1px solid var(--hairline, #E7D8F2);
}

.buy-chosen-shot { width: 2.6rem; height: 3.6rem; object-fit: cover; border-radius: 6px; }
.buy-chosen-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #7C6B94); }
.buy-chosen-desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .9rem;
	font-weight: 600;
	color: var(--ink, #1E1233);
}

/* ---------------- packages ---------------- */

.buy-packages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: .6rem;
}

.buy-pack {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .95rem .8rem;
	border: 2px solid var(--hairline, #E7D8F2);
	border-radius: var(--r-sm, 10px);
	background: var(--paper-2, #FBF7FD);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .16s, transform .16s, background .16s;
}

.buy-pack.is-picked { background: var(--surface, #fff); }

.buy-pack:hover { transform: translateY(-2px); }
.buy-pack.is-picked { border-color: var(--brand, #9B23D4); }

.buy-pack-tag {
	position: absolute;
	top: -.65rem;
	left: .7rem;
	padding: .1rem .45rem;
	border-radius: 999px;
	background: var(--brand, #C4267E);
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.buy-pack-qty { font-size: 1rem; font-weight: 750; color: var(--ink, #1E1233); }
.buy-pack-price { font-size: 1.15rem; font-weight: 800; color: var(--brand, #9B23D4); }
.buy-pack-price .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; }
.buy-pack-mins { font-size: .76rem; color: var(--muted, #7C6B94); }

/* ---------------- upsell ---------------- */

.buy-upsell { margin-top: 1rem; }
.buy-upsell[hidden] { display: none; }

.buy-upsell-inner {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: .9rem 1rem;
	border: 1px dashed var(--brand, #9B23D4);
	border-radius: var(--r-sm, 10px);
	background: var(--brand-soft, #9B23D414);
	cursor: pointer;
}

.buy-upsell-check { margin-top: .2rem; width: 1.1rem; height: 1.1rem; accent-color: var(--brand, #9B23D4); flex: 0 0 auto; }
.buy-upsell-text { flex: 1 1 auto; font-size: .9rem; line-height: 1.5; color: var(--ink-2, #4C3D66); }
.buy-upsell-text strong { color: var(--ink, #1E1233); }
.buy-upsell-price { flex: 0 0 auto; font-weight: 800; color: var(--brand, #9B23D4); }
.buy-upsell-price .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; }

/* ---------------- states ---------------- */

.buy-working {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	margin-top: 1rem;
	font-size: .93rem;
	font-weight: 600;
	color: var(--ink-2, #4C3D66);
}

.buy-working[hidden] { display: none; }

.buy-spinner {
	width: 1.15rem;
	height: 1.15rem;
	border: 2px solid var(--hairline, #E7D8F2);
	border-top-color: var(--brand, #9B23D4);
	border-radius: 999px;
	animation: buy-spin .7s linear infinite;
}

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

.buy-error {
	margin: 1rem 0 0;
	padding: .75rem .9rem;
	border-radius: var(--r-sm, 10px);
	background: #D42D2D14;
	color: #B02121;
	font-size: .9rem;
}

.buy-error[hidden] { display: none; }

/* Four already fits comfortably down to tablet width. */

@media (max-width: 560px) {
	.buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
	.buy .buy-btn { width: 100%; }
	.buy-card-desc { -webkit-line-clamp: 2; }

	/* Two per row on a phone, so packages stay readable rather than becoming
	   four slivers. */
	.buy-packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.buy-upsell-inner { flex-wrap: wrap; }
	.buy-upsell-price { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.buy *, .buy *::before, .buy *::after { transition: none !important; }
	.buy-spinner { animation-duration: 2s; }
}

.buy-card.is-picked .buy-card-shot { border-color: var(--brand, #9B23D4); }
.buy-card.is-picked .buy-card-tick { opacity: 1; }


/* ---------------- step furniture ---------------- */

.buy-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .25rem;
	margin-top: 1.25rem;
}

.buy-actions .buy-back { margin-top: .35rem; }

/* The card already frames the tool, so the grid needs breathing room, not
   another border. */
.buy-grid { margin-top: .25rem; }

.buy-lead {
	display: block;
	margin: 0 0 .9rem;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -.005em;
	color: var(--ink, #1E1233);
}

.buy-profile {
	padding-bottom: .9rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--hairline, #E7D8F2);
}