/**
 * Neopharm — Remedium checkout bridge.
 *
 * DESIGN POSITION
 * ---------------
 * The DC Neopharm theme already owns the site's identity. This stylesheet
 * inherits it rather than competing with it: every colour and face is a custom
 * property with a conservative fallback, so the theme (or a child theme) can
 * restyle the cart by redefining a handful of variables and nothing here needs
 * touching.
 *
 * Type is deliberately `inherit` — the cart should read as the same document,
 * not as an embedded widget in someone else's font.
 *
 * The one place with real visual weight is the delivery picker in the checkout,
 * because choosing a courier office is the genuinely unfamiliar step and it
 * deserves the clarity.
 */

.np-add,
.np-cart,
.np-checkout {
	--np-ink: var(--np-color-ink, #1b2733);
	--np-muted: var(--np-color-muted, #6a7885);
	--np-line: var(--np-color-line, #dfe5ea);
	--np-accent: var(--np-color-accent, #1f6bb5);
	--np-accent-ink: var(--np-color-accent-ink, #ffffff);
	--np-ok: var(--np-color-ok, #1a7f4b);
	--np-error: var(--np-color-error, #b32d2e);
	--np-surface: var(--np-color-surface, #f6f8fa);
	--np-radius: var(--np-radius-base, 6px);

	color: var(--np-ink);
	font: inherit;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.np-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .7em 1.4em;
	border: 1px solid transparent;
	border-radius: var(--np-radius);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.np-btn:disabled {
	opacity: .6;
	cursor: default;
}

.np-btn--primary {
	background: var(--np-accent);
	color: var(--np-accent-ink);
}

.np-btn--primary:hover:not(:disabled) {
	filter: brightness(.94);
}

.np-btn--ghost {
	background: transparent;
	border-color: var(--np-line);
	color: var(--np-ink);
}

.np-btn--wide {
	width: 100%;
	margin-top: 1.25rem;
}

.np-btn:focus-visible,
.np-qty__input:focus-visible,
.np-link:focus-visible {
	outline: 2px solid var(--np-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Add to cart                                                         */
/* ------------------------------------------------------------------ */

.np-add {
	margin: 1.5rem 0;
}

.np-add__row {
	display: flex;
	align-items: flex-end;
	gap: .75rem;
	flex-wrap: wrap;
}

.np-qty {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.np-qty__label {
	font-size: .8125rem;
	color: var(--np-muted);
}

/* One bordered pill holding − input +, so the three read as a single control
   rather than three loose widgets. Unscoped: the cart page reuses it, and the
   two should not drift apart. */
.np-qty__control {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--np-line);
	border-radius: var(--np-radius);
	overflow: hidden;
	background: #fff;
	width: max-content;
}

/* Every declaration here is a theme override, not decoration.
   `.np-add .np-qty__input` (0,2,0) is deliberate: the theme styles inputs with
   compound selectors like `.wpbf-page input`, which out-specifies a single
   class and was stretching this field across half the row. */
.np-add .np-qty__input {
	width: 3.25rem;
	min-width: 0;
	flex: 0 0 auto;
	margin: 0;
	padding: .6em .25em;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font: inherit;
	color: inherit;
	text-align: center;
	line-height: 1.2;
}

/* The native spinner is hidden on purpose — the − / + buttons replace it, and
   leaving both would put two competing controls on one field. */
.np-add .np-qty__input {
	-moz-appearance: textfield;
	appearance: textfield;
}

.np-add .np-qty__input::-webkit-outer-spin-button,
.np-add .np-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.np-add .np-qty__step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	min-width: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--np-surface);
	color: var(--np-ink);
	font: inherit;
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	/* 2.5rem square: a thumb target, unlike the native arrows. */
	-webkit-appearance: none;
	appearance: none;
	transition: background .15s ease;
}

.np-add .np-qty__step:hover {
	background: var(--np-line);
}

.np-add .np-qty__step:disabled {
	opacity: .45;
	cursor: default;
}

.np-add .np-qty__step:focus-visible {
	outline: 2px solid var(--np-accent);
	outline-offset: -2px;
}

.np-add__msg {
	margin: .6rem 0 0;
	min-height: 1.2em;
	font-size: .9375rem;
}

.np-add__msg.is-ok { color: var(--np-ok); }
.np-add__msg.is-error { color: var(--np-error); }

/* Out of stock is not a failure the customer caused, so it doesn't get the
   error red. Neutral note, same weight as any other piece of product info. */
.np-add__msg.is-note {
	color: var(--np-muted);
}

.np-unavailable {
	margin: 1.5rem 0;
	padding: .8rem 1rem;
	background: var(--np-surface);
	border-radius: var(--np-radius);
	color: var(--np-muted);
	font-size: .9375rem;
}

.np-link {
	color: var(--np-accent);
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Cart lines                                                          */
/* ------------------------------------------------------------------ */

.np-lines {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--np-line);
}

.np-line {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .25rem 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--np-line);
}

/* Placement is spelled out rather than left to auto-flow: the line has five
   children across three rows and two columns, and auto-placement puts the
   remove button wherever the row total isn't. */
.np-line__name {
	grid-column: 1;
	grid-row: 1;
	font-weight: 600;
}

.np-line__meta {
	grid-column: 1;
	grid-row: 2;
	color: var(--np-muted);
	font-size: .9375rem;
}

/* Quantity sits under the name in column 1; the money stays on one
   right-aligned axis down the page in column 2. */
.np-qty__control--line {
	grid-column: 1;
	grid-row: 3;
	justify-self: start;
	margin-top: .5rem;
}

.np-qty__control--line .np-qty__step {
	width: 2.25rem;
	min-width: 2.25rem;
	border: 0;
	background: var(--np-surface);
	color: var(--np-ink);
	font: inherit;
	font-size: 1.0625rem;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.np-qty__control--line .np-qty__step:hover {
	background: var(--np-line);
}

.np-qty__control--line .np-qty__step:disabled {
	opacity: .45;
	cursor: default;
}

.np-line__qtyvalue {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: .45em .25em;
	font-variant-numeric: tabular-nums;
}

.np-line__sum {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: start;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Understated on purpose. Remove is destructive and shouldn't compete with
   the checkout button for attention, but it must not be a mystery icon
   either — hence a word, in the muted colour, underlined on hover. */
.np-line__remove {
	grid-column: 2;
	grid-row: 3;
	justify-self: end;
	align-self: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--np-muted);
	font: inherit;
	font-size: .875rem;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.np-line__remove:hover {
	color: var(--np-error);
	text-decoration: underline;
}

.np-line__remove:focus-visible,
.np-qty__control--line .np-qty__step:focus-visible {
	outline: 2px solid var(--np-accent);
	outline-offset: 2px;
}

/* In flight. The whole cart dims, not just the control that was clicked: a
   quantity change moves the totals and the checkout button too. */
.np-cart.is-busy {
	opacity: .55;
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Totals                                                              */
/* ------------------------------------------------------------------ */

.np-totals {
	margin-top: 1.25rem;
	padding: 1rem 1.15rem;
	background: var(--np-surface);
	border-radius: var(--np-radius);
}

.np-totals__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .35rem 0;
	font-variant-numeric: tabular-nums;
}

.np-totals__row.is-grand {
	margin-top: .5rem;
	padding-top: .75rem;
	border-top: 1px solid var(--np-line);
	font-weight: 700;
	font-size: 1.0625rem;
}

/* ------------------------------------------------------------------ */
/* Empty / error states                                                */
/* ------------------------------------------------------------------ */

.np-empty {
	padding: 2.5rem 1rem;
	text-align: center;
	color: var(--np-muted);
}

.np-empty p {
	margin: 0 0 1.25rem;
}

.np-error {
	padding: .9rem 1.1rem;
	border-left: 3px solid var(--np-error);
	background: var(--np-surface);
	color: var(--np-error);
}

.np-cart__loading {
	padding: 2rem 0;
	color: var(--np-muted);
}

/* ------------------------------------------------------------------ */
/* Small screens                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
	.np-add__row {
		align-items: stretch;
	}
	.np-add__row .np-btn {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.np-btn {
		transition: none;
	}
}

/* ==================================================================== */
/* Checkout                                                             */
/* ==================================================================== */

.np-sec {
	margin: 0 0 2rem;
	padding: 0 0 1.75rem;
	border-bottom: 1px solid var(--np-line);
}

.np-sec:last-of-type {
	border-bottom: 0;
}

/* A locked section is visible but not yet actionable. Dimming it (rather
   than hiding it) keeps the shape of the whole flow in view, so nobody
   wonders how many steps are left. */
.np-sec.is-locked {
	opacity: .45;
	pointer-events: none;
}

.np-sec__title {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	font-weight: 700;
}

.np-grid {
	display: grid;
	gap: .9rem;
}

@media (min-width: 560px) {
	.np-grid--2 { grid-template-columns: 1fr 1fr; }
	.np-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
}

.np-field {
	display: block;
	margin-bottom: .9rem;
}

.np-field__label {
	display: block;
	margin-bottom: .3rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--np-muted);
}

.np-field__hint {
	display: block;
	margin-top: .35rem;
	font-size: .8125rem;
	color: var(--np-muted);
}

.np-input {
	width: 100%;
	padding: .65em .8em;
	border: 1px solid var(--np-line);
	border-radius: var(--np-radius);
	font: inherit;
	background: #fff;
}

.np-input:focus-visible {
	outline: 2px solid var(--np-accent);
	outline-offset: 1px;
	border-color: var(--np-accent);
}

/* --- selectable rows (delivery method, office, shipping, payment) ---- */

.np-method,
.np-office,
.np-ship,
.np-pay,
.np-check-row {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .75rem .9rem;
	border: 1px solid var(--np-line);
	border-radius: var(--np-radius);
	margin-bottom: .5rem;
	cursor: pointer;
	transition: border-color .12s ease, background-color .12s ease;
}

.np-method:hover,
.np-office:hover,
.np-ship:hover,
.np-pay:hover {
	border-color: var(--np-accent);
}

.np-method:has(.np-radio:checked),
.np-office:has(.np-radio:checked),
.np-ship:has(.np-radio:checked),
.np-pay:has(.np-radio:checked) {
	border-color: var(--np-accent);
	background: color-mix(in srgb, var(--np-accent) 6%, transparent);
}

.np-radio,
.np-check {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	accent-color: var(--np-accent);
}

.np-ship__name,
.np-office__name { flex: 1 1 auto; }

.np-ship__price {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

/* --- autocomplete ---------------------------------------------------- */

.np-ac { position: relative; }

.np-ac__list {
	position: absolute;
	z-index: 20;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	max-height: 16rem;
	overflow-y: auto;
	margin: 0;
	padding: .25rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--np-line);
	border-radius: var(--np-radius);
	box-shadow: 0 6px 24px rgba(20, 35, 50, .12);
}

.np-ac__item {
	padding: .5rem .6rem;
	border-radius: 4px;
	cursor: pointer;
}

.np-ac__item:hover,
.np-ac__item:focus {
	background: var(--np-surface);
	outline: none;
}

/* --- office picker --------------------------------------------------- */
/* The one step that earns extra weight: a list of near-identical Cyrillic
   addresses is where people abandon a pharmacy checkout. */

.np-offices__filter { margin-bottom: .6rem; }

.np-offices__status {
	margin: 0 0 .5rem;
	font-size: .8125rem;
	color: var(--np-muted);
}

.np-offices__list {
	max-height: 20rem;
	overflow-y: auto;
	padding-right: .25rem;
}

.np-office { margin-bottom: .35rem; }

/* --- misc ------------------------------------------------------------ */

.np-invoice { margin-top: .9rem; }

.np-muted {
	color: var(--np-muted);
	font-size: .9375rem;
}

.np-done {
	padding: 2.5rem 1rem;
	text-align: center;
}

.np-done h2 { margin: 0 0 .6rem; }

.np-totalsbox { margin-top: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
	.np-method, .np-office, .np-ship, .np-pay { transition: none; }
}

/* ==================================================================== */
/* Theme integration                                                    */
/* ==================================================================== */

/* Placement A: the add-to-cart has replaced the hero CTA. It stands alone
   as the page's single buy action, so it needs no container decoration —
   just the button's own weight and room to breathe. */
.np-autobuy--hero {
	position: relative;
	/* Above its own siblings inside the slider layer. */
	z-index: 2;
	margin: 1.5rem 0 0;
}

/* Applied by np.js to the Revolution Slider layer the control ends up inside.
 *
 * Slider layers are absolutely positioned boxes whose hit area is their
 * bounding box, not their visible content — so a neighbouring layer with a
 * higher z-index (the product shot, the bullet list) sits invisibly on top of
 * ours and swallows the clicks. That's why only the part of the button
 * sticking out past that box responded, and why it varied per product: each
 * slide lays its layers out differently.
 *
 * !important is load-bearing here, not laziness: the slider writes its own
 * inline z-index on every layout pass, and an inline style beats a plain class.
 */
.np-hero-layer {
	z-index: 60 !important;
	pointer-events: auto !important;
}

.np-hero-layer * {
	pointer-events: auto;
}

.np-autobuy--hero .np-add {
	margin: 0;
}

.np-autobuy--hero .np-btn--primary {
	padding: .95em 2em;
	font-size: 1.0625rem;
	border-radius: 999px;
}

/* Placement B: sitting above the partner-pharmacy list. Here it does need a
   surface, so "buy from us" reads as distinct from "or buy from these". */
.np-autobuy--inline {
	margin: 0 0 1.5rem;
	padding: 1.1rem 1.25rem 1.25rem;
	background: var(--np-color-surface, #f6f8fa);
	border-radius: var(--np-radius-base, 6px);
	border-bottom: 1px solid var(--np-color-line, #dfe5ea);
}

.np-autobuy--inline .np-add {
	margin: 0;
}

/* --- header cart link ------------------------------------------------ */

/* `a.` rather than a bare class: the theme colours links with compound
   selectors like `.wpbf-page a`, which would otherwise out-specify us and
   paint the icon in the brand orange only on pages the theme happens to
   reach. Matching specificity keeps the header cart identical everywhere. */
a.np-cartlink {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	/* Fixed box so the link sits on the same optical line as the theme's own
	   header icons instead of being baseline-aligned against text. */
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	color: inherit;
	text-decoration: none;
	line-height: 0;
	flex: 0 0 auto;
}

/* Zero-size marker np.js leaves in the desktop nav slot, so it can tell
   whether that slot is on screen after moving the link out of it. Must stay
   visible-but-empty: display:none would make the test always read "hidden". */
.np-cartlink-anchor {
	display: inline-block;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* Themes frequently set a `display` value on span, which overrides the plain
   `hidden` attribute — leaving an empty coloured dot next to the icon until
   the first item is added. Force it off. */
.np-cartlink__count[hidden] {
	display: none !important;
}

/* Mobile: the desktop nav this link lives in is hidden below the breakpoint,
   so np.js relocates it into the mobile header. If it finds no home there,
   this floating fallback keeps the cart reachable rather than invisible. */
a.np-cartlink--float {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 999;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 12px rgba(20, 35, 50, .22);
}

a.np-cartlink--mobile {
	margin-right: .25rem;
}

.np-cartlink__icon {
	display: block;
}

.np-cartlink__count {
	position: absolute;
	top: -2px;
	right: -4px;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 .28rem;
	border-radius: 999px;
	background: var(--np-color-accent, #1f6bb5);
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1.15rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

a.np-cartlink:focus-visible {
	outline: 2px solid var(--np-color-accent, #1f6bb5);
	outline-offset: 2px;
	border-radius: 4px;
}

/* --- checkout: inline field error ------------------------------------ */

.np-field__error {
	display: block;
	margin-top: .35rem;
	font-size: .8125rem;
	color: var(--np-color-error, #b32d2e);
}

.np-input.is-invalid {
	border-color: var(--np-color-error, #b32d2e);
}

.np-input.is-invalid:focus-visible {
	outline-color: var(--np-color-error, #b32d2e);
}

/* --- checkout: order confirmation ------------------------------------ */

.np-done {
	max-width: 32rem;
	margin: 2rem auto;
	padding: 2.5rem 1.5rem;
	text-align: center;
}

.np-done__check {
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--np-color-ok, #1a7f4b);
	color: #fff;
	font-size: 1.9rem;
	line-height: 1;
}

.np-done h2 {
	margin: 0 0 .75rem;
}

.np-done__num {
	font-weight: 700;
	font-size: 1.0625rem;
	margin: 0 0 1rem;
}

.np-done p {
	color: var(--np-muted);
	margin: 0 0 1.5rem;
}

/* --- checkout: order attributes (Remedium's extra questions) ---------- */

.np-attrs:empty { display: none; }

.np-attr {
	margin: 1rem 0 1.25rem;
}

.np-attr__label {
	margin: 0 0 .5rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--np-muted);
}

.np-attr__opt {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: .7rem .9rem;
	margin-bottom: .4rem;
	border: 1px solid var(--np-line);
	border-radius: var(--np-radius);
	cursor: pointer;
	line-height: 1.4;
}

.np-attr__opt:hover { border-color: var(--np-accent); }

.np-attr__opt:has(input:checked) {
	border-color: var(--np-accent);
	background: color-mix(in srgb, var(--np-accent) 6%, transparent);
}

/* Informational notice from Remedium (courier delays etc). Distinct from a
   question — it needs attention but isn't an error, so it reads as a note. */
.np-notice {
	margin: 1rem 0;
	padding: .9rem 1.1rem;
	border-left: 3px solid var(--np-accent);
	background: var(--np-surface);
	border-radius: 0 var(--np-radius) var(--np-radius) 0;
	font-size: .9375rem;
}

.np-notice strong { display: block; margin-bottom: .3rem; }
.np-notice p { margin: .25rem 0; }

/* --- payment failed --------------------------------------------------- */

.np-done--fail .np-done__cross {
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--np-color-error, #b32d2e);
	color: #fff;
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1;
}

/* A required question left unanswered, flagged after a submit attempt.
   Reads as "needs attention" rather than "error" — the customer hasn't done
   anything wrong yet, they just haven't finished. */
.np-attr--missing {
	padding: .75rem .9rem;
	border-left: 3px solid var(--np-color-error, #b32d2e);
	background: color-mix(in srgb, var(--np-color-error, #b32d2e) 4%, transparent);
	border-radius: 0 var(--np-radius-base, 6px) var(--np-radius-base, 6px) 0;
}