/**
 * Back-in-stock control.
 *
 * This component styles itself completely. It used to lean on `button`, `btn`
 * and `woocommerce-Input`, assuming the theme would dress them — which is a bet,
 * not a design. On a theme that styles none of those (most of them style some),
 * the shopper got the browser's raw default button and field: a cramped grey
 * box next to a black-bordered input.
 *
 * So: layout, size and state live here, and only the colours come from the
 * shop's design tokens (Settings > Design tokens), which the free plugin owns
 * and attaches to this stylesheet. Typography is still inherited — the control
 * should read in the shop's own font — but nothing else is left to chance.
 *
 * Deliberately no prefers-color-scheme. That setting describes the visitor's
 * operating system, and a storefront's colours are decided by its theme: a shop
 * with a light theme, viewed on a machine set to dark, got a black dialog in the
 * middle of a white page.
 */

.rahkar-stock,
.rahkar-stock *,
.rahkar-stock *::before,
.rahkar-stock *::after {
	box-sizing: border-box;
}

/*
 * Controls.
 */

.rahkar-stock__open,
.rahkar-stock__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.55rem 1.25rem;
	font: inherit;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.4;
	color: var( --rahkar-accent-ink, #fff );
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background: var( --rahkar-accent, #1e874b );
	border: 1px solid transparent;
	border-radius: var( --rahkar-radius, 6px );
	transition: opacity .15s ease;
}

.rahkar-stock__open:hover,
.rahkar-stock__submit:hover {
	opacity: .88;
}

/* Keyboard focus only: a mouse click on a button does not need a ring around it,
   but tabbing to one does. */
.rahkar-stock__open:focus-visible,
.rahkar-stock__submit:focus-visible {
	outline: 2px solid var( --rahkar-accent, #1e874b );
	outline-offset: 2px;
}

.rahkar-stock__submit[disabled] {
	cursor: default;
	opacity: .6;
}

/* Visually hidden, in our own class rather than the theme's
   `.screen-reader-text`: that class is a theme convention, not a WordPress
   guarantee, and a theme without it would print the label in the middle of the
   form. */
.rahkar-stock__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.rahkar-stock__input {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.55rem 0.75rem;
	font: inherit;
	font-size: 0.95em;
	color: var( --rahkar-ink, #1f2024 );
	background: var( --rahkar-surface, #fff );
	border: 1px solid var( --rahkar-border, #d6d6d6 );
	border-radius: var( --rahkar-radius, 6px );
}

.rahkar-stock__input:focus {
	border-color: var( --rahkar-accent, #1e874b );
	outline: none;
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --rahkar-accent, #1e874b ) 25%, transparent );
}

.rahkar-stock__input[aria-invalid="true"] {
	border-color: var( --rahkar-error, #c0392b );
}

/* The field and its button stack, with the button full width. A half-width
   button beside a full-width field is the arrangement that makes these forms
   look like an afterthought. */
.rahkar-stock__entry,
.rahkar-stock__account {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.rahkar-stock__entry[hidden],
.rahkar-stock__account[hidden] {
	display: none;
}

/* Choosing another number is the quieter of the two paths, so it is a link
   rather than a second button competing with the first. */
.rahkar-stock__other {
	align-self: center;
	padding: 0.25rem;
	font: inherit;
	font-size: 0.875em;
	color: var( --rahkar-muted, #6b6b6b );
	text-decoration: underline;
	cursor: pointer;
	background: none;
	border: 0;
}

.rahkar-stock__other:hover {
	color: var( --rahkar-ink, #1f2024 );
}

.rahkar-stock__known {
	margin: 0;
	font-size: 0.95em;
	line-height: 1.7;
}

.rahkar-stock__known bdi {
	font-weight: 700;
	letter-spacing: .04em;
}

.rahkar-stock__intro {
	margin: 0 0 0.875rem;
	font-size: 0.9em;
	line-height: 1.7;
	color: var( --rahkar-muted, #6b6b6b );
}

.rahkar-stock__message:empty {
	display: none;
}

.rahkar-stock__message {
	margin: 0.75rem 0 0;
	font-size: 0.875em;
	line-height: 1.6;
}

.rahkar-stock__message.is-error {
	color: var( --rahkar-error, #c0392b );
}

.rahkar-stock__message.is-ok {
	color: var( --rahkar-success, #1e874b );
}

/*
 * Inline shape: the form sits in the page.
 */

.rahkar-stock--inline {
	max-width: 26rem;
	padding: 1.125rem 1.25rem;
	margin: 1.125rem 0;
	color: var( --rahkar-ink, #1f2024 );
	background: var( --rahkar-surface, #fff );
	border: 1px solid var( --rahkar-border, #d6d6d6 );
	border-radius: var( --rahkar-radius, 6px );
}

/*
 * Modal shape: one button in the page, the form in a dialog.
 */

.rahkar-stock--modal {
	display: block;
	margin: 1rem 0;
}

.rahkar-stock--compact {
	margin: 0;
}

.rahkar-stock--compact .rahkar-stock__open {
	width: 100%;
}

.rahkar-stock__dialog {
	width: min( 25rem, calc( 100vw - 2rem ) );
	padding: 1.375rem 1.5rem;

	/* The dialog renders in the top layer, outside the page's own stacking and
	   inheritance, so both colours are stated rather than inherited. */
	color: var( --rahkar-ink, #1f2024 );
	background: var( --rahkar-surface, #fff );
	border: 1px solid var( --rahkar-border, #d6d6d6 );
	border-radius: calc( var( --rahkar-radius, 6px ) + 4px );
	box-shadow: 0 1.125rem 3rem rgba( 0, 0, 0, .25 );
}

.rahkar-stock__dialog::backdrop {
	background: rgba( 0, 0, 0, .5 );
}

.rahkar-stock__head {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.rahkar-stock__title {
	margin: 0;
	font-size: 1.0625em;
	font-weight: 700;
	line-height: 1.5;
}

/* A 2.25rem square: the smallest comfortable touch target, and enough room that
   the glyph is not sitting against the dialog's edge. */
.rahkar-stock__close {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	font-size: 1.375rem;
	line-height: 1;
	color: var( --rahkar-muted, #6b6b6b );
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: var( --rahkar-radius, 6px );
}

.rahkar-stock__close:hover {
	color: var( --rahkar-ink, #1f2024 );
}

.rahkar-stock__close:focus-visible {
	outline: 2px solid var( --rahkar-accent, #1e874b );
	outline-offset: 2px;
}