/**
 * Dedication and delivery-date fields on the product page.
 *
 * They sit between the price and the add-to-cart button, so they have to read
 * as part of buying the flowers rather than as a form bolted underneath. Two
 * tinted blocks, the same hairline and radius as the rest of the shop.
 */

.nm-extras {
	display: grid;
	gap: var(--hbc-space-md);
	margin: var(--hbc-space-md) 0 var(--hbc-space-lg);
}

.nm-extras__block {
	padding: clamp(0.95rem, 2.4vw, 1.35rem);
	background: var(--hbc-tint);
	border: 1px solid var(--hbc-hairline);
	border-radius: var(--hbc-radius-md);
}

.nm-extras__title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.35rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--hbc-color-text, #4a4a55);
}

.nm-extras__title svg {
	flex: 0 0 auto;
	color: var(--hbc-color-primary, #d6117a);
}

.nm-extras__hint {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.2rem 0.55rem;
	border-radius: var(--hbc-radius-pill);
	background: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 10%, #fff);
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 75%, #fff);
}

.nm-extras__hint--required {
	background: var(--hbc-color-primary, #d6117a);
	color: #fff;
}

.nm-extras__lead {
	margin: 0 0 0.9rem;
	font-size: 0.88rem;
	line-height: 1.5;
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 78%, #fff);
}

.nm-extras__note {
	margin: 0.7rem 0 0;
	font-size: 0.8rem;
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 70%, #fff);
}

/* ------------------------------------------------------------------ fields */

.nm-extras__field {
	position: relative;
	margin: 0 0 0.85rem;
}

.nm-extras__field:last-child { margin-bottom: 0; }

.nm-extras__field label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.83rem;
	font-weight: 600;
	color: var(--hbc-color-text, #4a4a55);
}

.nm-extras__field input[type="text"],
.nm-extras__field textarea {
	width: 100%;
	/* 16px keeps iOS from zooming the page when the field takes focus. */
	font-size: 16px;
	font-family: inherit;
	line-height: 1.5;
	padding: 0.7rem 0.85rem;
	background: #fff;
	border: 1px solid var(--hbc-hairline);
	border-radius: var(--hbc-radius-sm);
	color: var(--hbc-color-text, #4a4a55);
	transition: border-color var(--hbc-transition), box-shadow var(--hbc-transition);
}

.nm-extras__field--postcode { max-width: 23rem; }

.nm-extras__field--postcode input { max-width: 11rem; }

.nm-extras__postcode-status {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.78rem;
	line-height: 1.4;
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 72%, #fff);
}

.nm-extras__postcode-status.is-valid { color: #27733d; }
.nm-extras__postcode-status.is-error { color: #c0392b; font-weight: 600; }
.nm-extras__field--postcode input.has-error { border-color: #c0392b; }

.nm-extras__field textarea {
	resize: vertical;
	min-height: 5.5rem;
}

.nm-extras__field input[type="text"]:focus,
.nm-extras__field textarea:focus {
	outline: none;
	border-color: var(--hbc-color-primary, #d6117a);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hbc-color-primary, #d6117a) 15%, transparent);
}

.nm-extras__count {
	display: block;
	margin-top: 0.25rem;
	text-align: right;
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 55%, #fff);
}

.nm-extras__count.is-full { color: var(--hbc-color-primary, #d6117a); font-weight: 600; }

/* ---------------------------------------------------------------- calendar */

.nm-cal {
	/*
	 * Capped, not fluid. The day cells are square, so a calendar allowed to
	 * fill a 600px product column renders 80px cells and reads like a wall
	 * planner. This is about the width of a native date picker.
	 */
	max-width: 23rem;
	background: #fff;
	border: 1px solid var(--hbc-hairline);
	border-radius: var(--hbc-radius-md);
	padding: 0.7rem 0.75rem 0.8rem;
	transition: border-color var(--hbc-transition), box-shadow var(--hbc-transition);
}

.nm-cal[hidden] { display: none; }

.nm-cal.has-error {
	border-color: #c0392b;
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.nm-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	margin-bottom: 0.5rem;
}

.nm-cal__month {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	text-transform: capitalize;
	text-align: center;
	color: var(--hbc-color-text, #4a4a55);
}

/*
 * Why these selectors carry an ancestor.
 *
 * The Elementor kit styles every bare <button> on the site — `.elementor-kit-N
 * button { padding: 16px 34px }` — at specificity (0,1,1), which outranks a
 * plain class. Every control drawn below is a bare button, so each rule names
 * its owning block as an ancestor to reach (0,2,0) and win honestly, rather
 * than reaching for !important or targeting the kit's generated class.
 *
 * Do not "simplify" these selectors. Dropping the ancestor puts 34px of side
 * padding back on a 32px-wide chevron button, which crushes the icon inside it
 * to zero width — the button turns into an empty pink blob.
 */
.nm-cal .nm-cal__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--hbc-hairline);
	border-radius: 50%;
	background: #fff;
	color: var(--hbc-color-text, #4a4a55);
	cursor: pointer;
	transition: background var(--hbc-transition), color var(--hbc-transition), border-color var(--hbc-transition);
}

.nm-cal .nm-cal__nav:hover:not(:disabled) {
	background: var(--hbc-color-primary, #d6117a);
	border-color: var(--hbc-color-primary, #d6117a);
	color: #fff;
}

.nm-cal .nm-cal__nav:disabled { opacity: 0.3; cursor: default; }

.nm-cal .nm-cal__nav svg { flex: 0 0 auto; }

.nm-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 2px;
}

.nm-cal__dow {
	padding-bottom: 0.3rem;
	text-align: center;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 55%, #fff);
}

.nm-cal__pad { display: block; }

.nm-cal .nm-cal__day {
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * A fixed height rather than aspect-ratio: the row height must not depend
	 * on how wide the column happens to be. Comfortably past the 44px tap
	 * target once the grid narrows on a phone.
	 */
	height: 2.5rem;
	padding: 0;
	font-family: inherit;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	border: 1px solid transparent;
	border-radius: var(--hbc-radius-sm);
	background: transparent;
	color: var(--hbc-color-text, #4a4a55);
	cursor: pointer;
	transition: background var(--hbc-transition), color var(--hbc-transition), border-color var(--hbc-transition);
}

.nm-cal .nm-cal__day:hover:not(:disabled) {
	background: var(--hbc-tint-strong);
	border-color: var(--hbc-hairline);
}

.nm-cal .nm-cal__day:focus-visible {
	outline: 2px solid var(--hbc-color-primary, #d6117a);
	outline-offset: 1px;
}

/*
 * Unavailable days stay visible but plainly out of reach. Hiding them would
 * make the month jump about and lose the customer's sense of the week.
 */
.nm-cal .nm-cal__day.is-off {
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 28%, #fff);
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.nm-cal .nm-cal__day.is-selected,
.nm-cal .nm-cal__day.is-selected:hover {
	background: var(--hbc-color-primary, #d6117a);
	border-color: var(--hbc-color-primary, #d6117a);
	color: #fff;
	font-weight: 700;
}

.nm-cal__chosen {
	margin: 0.6rem 0 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 70%, #fff);
}

.nm-cal__chosen.is-set {
	font-weight: 600;
	color: var(--hbc-color-primary, #d6117a);
}

.nm-cal__chosen.is-error {
	font-weight: 600;
	color: #c0392b;
}

.nm-cal__chosen:empty { display: none; }

/* Values echoed in the cart and at checkout: keep a long dedication readable. */
.hbc-shop .variation p,
.hbc-shop .wc-item-meta {
	overflow-wrap: break-word;
}

.hbc-shop .wc-item-meta p { margin: 0; }

@media (max-width: 480px) {
	.nm-cal { padding: 0.6rem 0.5rem 0.7rem; }
	.nm-cal .nm-cal__day { height: 2.75rem; font-size: 0.9rem; }
	.nm-cal__grid { gap: 1px; }
}