/**
 * AminH Label Sheet — trigger row, bottom sheet (mobile) and modal (desktop).
 *
 * Every selector is prefixed with aminh-ls so nothing can leak into the theme.
 */

/*
 * The inline EPO fields are replaced by the sheet, but stay in the form.
 * They are clipped rather than display:none — Extra Product Options is ionCube
 * encoded and may inspect field visibility before it serialises the cart data,
 * so the fields keep a real (1px) box.
 */
.aminh-ls-hidden-source {
	position: absolute !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	margin: -1px !important;
	width: 1px !important;
	height: 1px !important;
	white-space: nowrap !important;
}

/* Trigger row ------------------------------------------------------------- */

/*
 * The row is inserted next to the volume swatches, whose container is a flex
 * row in the theme and a grid in some Elementor layouts. `width: 100%` alone
 * leaves it sharing a row and rendering half-width, so claim a full row in all
 * three layout modes.
 */
.aminh-ls-trigger-wrap {
	display: block;
	clear: both;
	box-sizing: border-box;
	margin: 0 0 12px;
	width: 100%;
	flex: 1 0 100%;
	grid-column: 1 / -1;
}

/*
 * `display: block` above is an author declaration, so it beats the browser's
 * own `[hidden] { display: none }` — without this rule the row stays on screen
 * for a volume that carries no label, and only the sheet refuses to open.
 */
.aminh-ls-trigger-wrap[hidden] {
	display: none;
}

/*
 * Same card as the shipping/payment rows the designer pointed at: white, softly
 * rounded, with a light shadow rather than a hard border.
 */
/*
 * Specificity note for every <button> below.
 *
 * Woodmart styles all buttons through `:is(.btn, .button, button, [type=submit],
 * [type=button])`, which scores exactly the same as a single class of ours, and
 * its stylesheet is printed after the plugin's — so on a tie the theme wins and
 * our border-radius, padding and colours are silently dropped. Each button rule
 * is therefore written one level deeper (parent + class) instead of reaching for
 * !important.
 */
.aminh-ls-trigger-wrap .aminh-ls-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	gap: 12px;
	margin: 0;
	width: 100%;
	min-height: 52px;
	padding: 10px 16px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	color: inherit;
	font: inherit;
	text-align: inherit;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.aminh-ls-trigger-wrap .aminh-ls-trigger:hover,
.aminh-ls-trigger-wrap .aminh-ls-trigger:focus-visible {
	border-color: rgba(0, 0, 0, 0.12);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

.aminh-ls-trigger-wrap .aminh-ls-trigger--invalid {
	border-color: #d32f2f;
	box-shadow: 0 2px 10px rgba(211, 47, 47, 0.2);
}

.aminh-ls-trigger-main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.aminh-ls-trigger-label {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.7;
}

.aminh-ls-trigger-value {
	overflow: hidden;
	max-width: 100%;
	color: rgba(0, 0, 0, 0.45);
	font-size: 13px;
	line-height: 1.7;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Nothing is written yet: the row stays the single line of the reference. */
.aminh-ls-trigger:not( .aminh-ls-trigger--filled ) .aminh-ls-trigger-value {
	display: none;
}

.aminh-ls-trigger--filled .aminh-ls-trigger-value {
	color: inherit;
	font-weight: 600;
}

/* The action reads as the underlined link of the reference, not as a pill. */
.aminh-ls-trigger-action {
	flex: none;
	padding: 0;
	background: none;
	color: inherit;
	font-size: 14px;
	line-height: 1.7;
	white-space: nowrap;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.aminh-ls-inline-error {
	margin: 6px 2px 0;
	color: #d32f2f;
	font-size: 13px;
	line-height: 1.7;
}

/*
 * The single-product template of this shop caps the add-to-cart widget at 90%
 * of its column below 768px, which leaves this row — and the volume boxes above
 * it — inset from the product image. The script tags that one ancestor; the
 * width is handed back here, on phones only, so the desktop layout is untouched.
 *
 * The class is repeated rather than marked !important: the builder's own rule is
 * `#<template> .elementor-element.elementor-element-<id>` (three classes) and is
 * printed after this file, so only a higher score can win the tie.
 */
@media (max-width: 768px) {
	.aminh-ls-stretch-host.aminh-ls-stretch-host.aminh-ls-stretch-host.aminh-ls-stretch-host {
		width: 100%;
		max-width: 100%;
	}
}

/* Dialog ------------------------------------------------------------------ */

.aminh-ls-root {
	position: fixed;
	z-index: 100000;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.aminh-ls-root[hidden] {
	display: none;
}

.aminh-ls-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.aminh-ls-root--open .aminh-ls-backdrop {
	opacity: 1;
}

.aminh-ls-panel {
	/*
	 * The stylesheet owns the breakpoint: the script reads this flag to decide
	 * whether drag-to-dismiss applies, so the sheet and the desktop modal can
	 * never disagree about which layout is on screen.
	 */
	--aminh-ls-drag: 1;
	/* Only a hint of backdrop stays above the sheet, as on the reference site. */
	--aminh-ls-top-gap: 24px;
	/* Height budget for the artwork, so the whole sheet fits without scrolling. */
	--aminh-ls-preview-height: 42dvh;

	position: relative;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	width: 100%;
	/*
	 * A percentage of the root, not of the viewport: the root is `inset: 0`, so
	 * the two are the same until the keyboard opens — at which point the script
	 * shrinks the root onto the visible strip above the keyboard and the panel
	 * has to shrink with it. Against `100dvh` it would keep its full-screen
	 * height, and the top of it — the artwork — would be pushed off the screen.
	 */
	max-height: calc(100% - var(--aminh-ls-top-gap));
	border-radius: 20px 20px 0 0;
	background: #fff;
	box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2);
	transform: translateY(100%);
	transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
	will-change: transform;
}

.aminh-ls-panel:focus {
	outline: none;
}

.aminh-ls-root--open .aminh-ls-panel {
	transform: translateY(0);
}

/* While a finger is on the sheet it must follow it exactly, with no easing. */
.aminh-ls-root--dragging .aminh-ls-panel,
.aminh-ls-root--dragging .aminh-ls-backdrop {
	transition: none;
}

.aminh-ls-head {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	/* The header is the drag handle: the browser must not scroll or select here. */
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.aminh-ls-root--dragging .aminh-ls-head {
	cursor: grabbing;
}

.aminh-ls-grabber {
	position: absolute;
	top: 5px;
	left: 50%;
	width: 38px;
	height: 4px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.18);
	transform: translateX(-50%);
}

.aminh-ls-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}

/* Bare glyph, no frame and no plate — the designer's box was an accident. */
.aminh-ls-panel .aminh-ls-close {
	flex: none;
	width: 28px;
	height: 28px;
	/* The theme gives every button a 42px floor; the bare glyph must not grow. */
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.aminh-ls-panel .aminh-ls-close:hover,
.aminh-ls-panel .aminh-ls-close:focus-visible {
	opacity: 0.6;
}

.aminh-ls-body {
	overflow-y: auto;
	flex: 1 1 auto;
	/*
	 * No side padding: the artwork runs edge to edge under the header, as on the
	 * reference site. The fields below carry the gutter themselves.
	 */
	padding: 0 0 14px;
	-webkit-overflow-scrolling: touch;
}

/*
 * The frame hugs the artwork with no empty space beside it, and the engraving is
 * positioned in percentages of that frame — so the two must always be the same
 * box. The image fills the frame outright and the frame fills the sheet, so the
 * bottle runs edge to edge with no white band down either side.
 *
 * The height budget only comes back when the screen is genuinely short (a phone
 * held sideways): there the frame is capped by the image's own aspect ratio,
 * which the script writes into `--aminh-ls-preview-ratio`, so a full-width image
 * cannot push the fields and the confirm button off the sheet. In portrait the
 * body simply scrolls, which costs nothing.
 */
.aminh-ls-preview {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0 auto 14px;
	width: 100%;
	background: rgba(0, 0, 0, 0.02);
	user-select: none;
}

@media (max-height: 520px) {
	.aminh-ls-preview {
		max-width: min( 100%, calc( var(--aminh-ls-preview-height, 42dvh) * var(--aminh-ls-preview-ratio, 1) ) );
	}
}

/*
 * Same budget, driven by the keyboard instead of by the screen.
 *
 * The media query above cannot answer this case: it tests the *layout* viewport,
 * which the keyboard does not change, so on a phone held upright the artwork
 * stayed a full-width square while the space left to show it in had halved. The
 * script publishes the visual viewport height as `--aminh-ls-viewport` and the
 * frame is capped at a third of it, which leaves the mock-up and the box being
 * typed into on screen together — the point of previewing an engraving live.
 */
.aminh-ls-root--keyboard .aminh-ls-preview {
	max-width: min( 100%, calc( var(--aminh-ls-viewport, 100dvh) * 0.33 * var(--aminh-ls-preview-ratio, 1) ) );
}

.aminh-ls-preview-img {
	display: block;
	width: 100%;
	height: auto;
}

.aminh-ls-preview-img[hidden] {
	display: none;
}

/*
 * The text band is sized and placed in percentages of the image box, and the
 * script scales the font size by the rendered image width, so the engraving
 * stays locked to the same spot on the bottle at any size. `width` and `bottom`
 * are set inline from the plugin settings.
 *
 * The band is never clipped: nastaliq ink leans well outside its line box, so
 * `overflow: hidden` here would chop the tall strokes off. Only the mock-up card
 * clips, and the script keeps the ink box itself inside the printed label.
 *
 * `translateY(50%)` makes `bottom` the vertical *centre* of the engraving: the
 * band is free to grow in both directions around the middle of the blank strip
 * on the label, rather than upwards into the printed «برای» above it.
 *
 * `line-height` is mirrored by PREVIEW_LINE_HEIGHT in frontend.js — keep them
 * in step, it is what turns the free label height into a font-size ceiling.
 */
.aminh-ls-preview-text {
	position: absolute;
	left: 50%;
	display: block;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
	transform: translate(-50%, 50%);
	pointer-events: none;
}

.aminh-ls-preview-text[hidden] {
	display: none;
}

/* Fields ------------------------------------------------------------------ */

.aminh-ls-field {
	padding: 0 16px;
}

/*
 * Wider than the old 10px: the legend of the second box hangs above its own top
 * border, so the gap has to carry that overhang as well as the breathing room.
 */
.aminh-ls-field + .aminh-ls-field {
	margin-top: 18px;
}

/* The counter and the legend sit on the box, so the box is the positioning root. */
.aminh-ls-control {
	position: relative;
}

/*
 * The caption straddles the top border of the box, like an outlined field: the
 * white background punches the border out behind the text, so the line reads as
 * notched rather than struck through. `pointer-events: none` lets a tap on the
 * overlap fall through to the box itself.
 */
.aminh-ls-panel .aminh-ls-legend {
	position: absolute;
	z-index: 1;
	top: 0;
	inset-inline-start: 12px;
	display: inline-block;
	margin: 0;
	padding: 0 4px;
	background: #fff;
	color: rgba(0, 0, 0, 0.55);
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	transform: translateY(-50%);
	pointer-events: none;
}

/* Same red as the required-label error, so the two read as one signal. */
.aminh-ls-panel .aminh-ls-legend-star {
	margin-inline-start: 3px;
	color: #d32f2f;
}

/*
 * Written parent + class, not on the class alone: Woodmart sets
 * `.wd textarea { min-height: 190px }`, which scores a class and an element
 * against our single class and is printed after this file — so on the bare
 * class the notes box silently grew to 190px tall. One level deeper wins on
 * score instead of on load order, with no !important.
 */
.aminh-ls-panel .aminh-ls-input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	/* Both boxes are the same size: the notes textarea matches the text input. */
	height: 52px;
	min-height: 52px;
	padding: 14px 16px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 10px;
	background: #fff;
	color: inherit;
	font: inherit;
	line-height: 1.5;
	resize: none;
}

/* Room for the counter at the inline end of the box. */
.aminh-ls-panel .aminh-ls-field--text .aminh-ls-input {
	padding-inline-end: 62px;
}

.aminh-ls-panel .aminh-ls-input:focus {
	border-color: rgba(0, 0, 0, 0.6);
	outline: none;
}

.aminh-ls-counter {
	position: absolute;
	top: 50%;
	inset-inline-end: 16px;
	color: rgba(0, 0, 0, 0.45);
	font-size: 13px;
	line-height: 1;
	transform: translateY(-50%);
	pointer-events: none;
}

.aminh-ls-error {
	display: block;
	margin: 6px 2px 0;
	color: #d32f2f;
	font-size: 12px;
	line-height: 1.7;
}

.aminh-ls-error:empty {
	display: none;
}

/* Prices ------------------------------------------------------------------ */

/*
 * The line item, the free engraving and the subtotal, laid out like the order
 * summary of the reference sheet: name at the inline start, amount at the
 * inline end, so the RTL page reads name-right / price-left by itself.
 */
.aminh-ls-prices {
	margin: 14px 0 0;
	padding: 0 18px;
	font-size: 14px;
	line-height: 1.9;
}

.aminh-ls-prices[hidden] {
	display: none;
}

.aminh-ls-price-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.aminh-ls-price-row--total {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	font-weight: 700;
}

.aminh-ls-price-name {
	min-width: 0;
	/* A long perfume name wraps rather than pushing the amount off the row. */
	overflow-wrap: anywhere;
}

.aminh-ls-price-value {
	flex: none;
	white-space: nowrap;
}

.aminh-ls-note {
	margin: 10px 0 0;
	padding: 0 18px;
	color: rgba(0, 0, 0, 0.6);
	font-size: 13px;
	line-height: 1.8;
}

.aminh-ls-foot {
	flex: none;
	padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.aminh-ls-foot .aminh-ls-save {
	width: 100%;
	padding: 14px 18px;
	border: 0;
	border-radius: 999px;
	background: #1e3c8a;
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.aminh-ls-foot .aminh-ls-save:hover,
.aminh-ls-foot .aminh-ls-save:focus-visible {
	opacity: 0.9;
}

/* Scroll lock while the sheet is open. */
html.aminh-ls-locked,
html.aminh-ls-locked body {
	overflow: hidden;
}

/*
 * The bottom-sheet scroll lock. `overflow: hidden` does not stop iOS scrolling
 * the document while the sheet is open — opening the keyboard for the text
 * field is enough — so the page is taken out of flow instead. The script sets
 * `top` to the negative of the scroll position it froze, and restores that
 * position when it removes the class.
 */
html.aminh-ls-pinned body {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
}

/* Desktop: a centred modal instead of a bottom sheet. */
@media (min-width: 769px) {
	.aminh-ls-root {
		align-items: center;
	}

	.aminh-ls-panel {
		--aminh-ls-drag: 0;
		--aminh-ls-preview-height: 46vh;

		max-width: 460px;
		max-height: 92vh;
		border-radius: 16px;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
		transform: translateY(16px) scale(0.98);
		opacity: 0;
		transition: transform 0.22s ease, opacity 0.22s ease;
	}

	.aminh-ls-root--open .aminh-ls-panel {
		transform: translateY(0) scale(1);
		opacity: 1;
	}

	.aminh-ls-grabber {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aminh-ls-panel,
	.aminh-ls-backdrop {
		transition: none;
	}
}