/*
 * Pickup-or-Delivery popup - design-system skin.
 *
 * WHAT THIS STYLES: the modal owned by the third-party plugin
 * delivery-pickup-popup-pro (pi web solution, v1.1.3.24). We do not own its
 * markup, so this file is a pure skin over the classes that plugin emits:
 *
 *   .pisol-dpp-form-container   the card
 *     .pisol-dpp-title            heading (plugin option pi_dpp_popup_heading)
 *     .pisol-dpp-content
 *       #dpp-notice > .dpp-msg    save / error feedback
 *       .pi-dpp-delivery-type-container  radio + label segmented control
 *       #pi-dpp-dynamic-part
 *         .dpp-location-container   #dpp-pickup-location branch <select>
 *         .pi-dpp-date-time-container  #dpp-pi-delivery-date / -time
 *       .dpp-submit-container       #dpp-save-preference-btn
 *     button.mfp-close            magnific's close, rendered INSIDE the card
 *
 * WHY IT LIVES IN THE THEME: this popup is site chrome, not a plugin extra -
 * the Aisle Rail's Pickup|Delivery pill opens it (inc/header-v2.php gives that
 * control the plugin's own .pisol-date-time-popup click hook). It is the first
 * thing many visitors interact with, and unstyled it was a black title bar, a
 * grey/#F29-default segmented control and a red submit button - none of which
 * are in the palette. Skinning it here rather than editing the plugin means a
 * plugin update cannot revert the design.
 *
 * SPECIFICITY IS DELIBERATE, NOT DEFENSIVE CLUTTER: the plugin pushes an
 * inline <style> block (class-delivery-pickup-popup-pro-public.php ->
 * addInlineStyle()) built from its admin colour options, targeting exactly
 * .pisol-dpp-title, .pi-dpp-delivery-type-container label, that label's
 * :checked state, #dpp-save-preference-btn and #pisol-preference-badge. Those
 * five rules are answered here with one extra class (or, for the button, the
 * card class alongside its id) so we win on specificity regardless of sheet
 * order - no !important anywhere.
 *
 * Palette aliased from assets/css/cw-tokens.css with literal var() fallbacks,
 * per that file's convention.
 *
 * ⚠ THIS DIALOG CARRIES NO LIME AT ALL (user decision 2026-08-24, "option B"
 * of three costed directions). Reasoning, worth keeping because it is a rule
 * and not a preference: lime is the site's BUY colour — it is what "Add to
 * Cart" wears on the shop grid, the PDP and the basket — and this popup never
 * sells anything, it sets a preference. A lime-filled toggle plus a lime
 * submit made a routine, always-visible setting the loudest thing on the
 * screen. Same call, same reasoning, as taking the accent out of the wishlist.
 * Everything here is therefore the ink ramp, and interaction is signalled by
 * DARKENING (ink-2 → ink → olive) rather than by a hue. Brick stays for the
 * error state: that is semantic state, not accent, and it is the one second
 * hue this file is allowed. If you are adding a rule here and reaching for
 * --cw-lime, that is the thing this note exists to stop.
 *
 * @package cw-bricks-child
 */

.pisol-dpp-form-container {
	--d-olive:     var(--cw-olive, #16210a); /* darkest step - button hover */
	--d-ink:       var(--cw-ink, #263238);
	--d-ink-2:     var(--cw-ink-2, #52575a);
	--d-grey:      var(--cw-grey, #6b6b6b);
	--d-faint:     var(--cw-faint, #9a9a94);
	--d-line:      var(--cw-line, #e7e5df);
	--d-line-2:    var(--cw-line-2, #d6d3ca);
	--d-ground:    var(--cw-ground, #f7f7f5);
	--d-card:      var(--cw-card, #ffffff);
	--d-brick:     var(--cw-brick, #a3372c);
	--d-brick-bg:  var(--cw-brick-tint, #fbeeec);
	--d-brick-ln:  var(--cw-brick-line, #eed3ce);
}

/* ------------------------------------------------------ magnific wrapper */

/*
 * .mfp-bg / .mfp-container / .mfp-content are magnific-popup's own shared
 * classes, and magnific ships inside more than one plugin on this site. Each
 * of these is therefore scoped with :has() to the wrapper that actually
 * contains OUR form, so no other plugin's lightbox is repainted. A browser
 * without :has() simply keeps magnific's default #0b0b0b scrim - a graceful
 * loss of polish, never a broken popup. (.mfp-close needs no :has(): the
 * plugin opens with mfp-close-btn-in, so its button is a child of the card.)
 */
.mfp-bg:has(~ .mfp-wrap .pisol-dpp-form-container) {
	background: rgba(38, 50, 56, .55); /* --cw-ink at 55%, same scrim as the sign-in overlay */
	opacity: 1;
	backdrop-filter: blur(2px);
}

.mfp-container:has(.pisol-dpp-form-container) {
	padding: 16px;
}

/* ------------------------------------------------------------------ card */

/*
 * The plugin's own sheet sets width:40% (and 100% under 968px), which on a
 * wide monitor made a 500px+ card for two buttons and a select. A max-width
 * plus the plugin's own margin:auto, rather than a width: magnific's
 * .mfp-content is a shrink-to-fit inline-block, so a percentage width here
 * resolves against a box that is itself sized by this element.
 *
 * overflow:hidden earns its place twice: it clips the square corners of the
 * blockUI overlay the plugin drops inside this element during its AJAX calls,
 * and it keeps the segmented control's rounded ends inside the card.
 */
.pisol-dpp-form-container {
	width: 100%;
	max-width: 420px;
	background: var(--d-card);
	border-radius: 14px;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(38, 50, 56, .08),
		0 24px 48px -12px rgba(38, 50, 56, .35);
	color: var(--d-ink);
	line-height: 1.55;
}

/*
 * Heading. Was a full-bleed black bar; the system does not have a black, and a
 * dark bar on a 420px card reads as plugin chrome rather than as our own UI.
 * It becomes an in-card heading with a hairline under it. Answers the plugin's
 * inline background-color/color pair (see the file header).
 */
.pisol-dpp-form-container .pisol-dpp-title {
	background: var(--d-card);
	color: var(--d-ink);
	padding: 18px 52px 14px 20px; /* right pad clears the close button */
	border-bottom: 1px solid var(--d-line);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.022em;
	line-height: 1.25;
}

.pisol-dpp-form-container .pisol-dpp-content {
	padding: 16px 20px 20px;
}

/*
 * Close. Magnific paints it #333 at .65 opacity, 44px tall, hard against the
 * top-right corner; the plugin then forces background:transparent !important
 * on it. Deliberately no hover background here - it would need !important to
 * beat that, and a colour shift reads just as well.
 */
.pisol-dpp-form-container button.mfp-close {
	top: 8px;
	right: 8px;
	width: 34px;
	height: 34px;
	line-height: 34px;
	padding: 0;
	opacity: 1;
	color: var(--d-ink-2);
	font-size: 26px;
	font-family: inherit;
	border-radius: 8px;
}

.pisol-dpp-form-container button.mfp-close:hover,
.pisol-dpp-form-container button.mfp-close:focus {
	color: var(--d-ink);
	opacity: 1;
}

.pisol-dpp-form-container button.mfp-close:focus-visible {
	outline: 2px solid var(--d-ink);
	outline-offset: 1px;
}

/* -------------------------------------------------------- notice / error */

.pisol-dpp-form-container .dpp-msg {
	background: var(--d-ground);
	border: 1px solid var(--d-line);
	border-radius: 8px;
	padding: 9px 12px;
	margin-bottom: 14px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--d-ink);
	text-align: left;
}

.pisol-dpp-form-container .dpp-error.dpp-msg {
	background: var(--d-brick-bg);
	border-color: var(--d-brick-ln);
	color: var(--d-brick);
}

/* --------------------------------------------------- segmented control */

/*
 * Delivery | Pickup. Rendered as the SAME pill the Aisle Rail header uses
 * (.cwh-mode in assets/css/header-v2.css) on purpose: the header pill is what
 * opens this popup, so the control the visitor clicked and the control they
 * land on should be recognisably one control. Values kept in step with that
 * file - 1.5px line-2 border, 3px padding, 999px radius, ink-2/white active.
 * ⚠ If that pill ever changes, change it here too, or the pairing breaks.
 * That coupling is also why this dialog stayed OUTLINED rather than going to
 * filled fields (the rejected option C): filled here would need the header
 * filled as well.
 */
.pisol-dpp-form-container .pi-dpp-delivery-type-container {
	display: flex;
	align-items: center;
	gap: 3px;
	margin-bottom: 14px;
	padding: 3px;
	border: 1.5px solid var(--d-line-2);
	border-radius: 999px;
	background: var(--d-card);
}

/* The radios themselves stay display:none (the plugin's rule) - the labels
   are the control. Keep them reachable for keyboards all the same: a focused
   input cannot show a ring, so the ring is drawn on its label instead. */
.pisol-dpp-form-container .pi-dpp-delivery-type-container label {
	flex: 1;
	padding: 9px 14px;
	border-radius: 999px;
	background: transparent;
	color: var(--d-grey);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	margin: 0;
}

.pisol-dpp-form-container .pi-dpp-delivery-type-container label:hover {
	color: var(--d-ink);
}

.pisol-dpp-form-container .pi-dpp-delivery-type-container input:checked + label {
	background: var(--d-ink-2);
	color: #fff;
}

.pisol-dpp-form-container .pi-dpp-delivery-type-container input:focus-visible + label {
	outline: 2px solid var(--d-ink);
	outline-offset: 1px;
}

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

.pisol-dpp-form-container .dpp-location-container {
	margin-bottom: 14px;
}

/*
 * Date and time sit side by side. The plugin spaces them with padding-right /
 * padding-left on the children, which puts the gap INSIDE each control's box;
 * a real gap is used instead so both fields keep their full width.
 */
.pisol-dpp-form-container .pi-dpp-date-time-container {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
}

.pisol-dpp-form-container .pi-dpp-date-time-container .pi-dpp-date-container,
.pisol-dpp-form-container .pi-dpp-date-time-container .pi-dpp-time-container {
	flex: 1;
	padding: 0;
	min-width: 0;
}

/*
 * One field style for all three controls. The type selectors are there
 * because a site-wide theme rule styles every input and select with its own
 * border, radius and background - matching on [type] and the element name at
 * equal-or-higher specificity beats it without !important, the same trick the
 * sign-in overlay documents.
 */
.pisol-dpp-form-container #dpp-pi-delivery-date,
.pisol-dpp-form-container input[type="text"]#dpp-pi-delivery-date,
.pisol-dpp-form-container #dpp-pi-delivery-time,
.pisol-dpp-form-container select#dpp-pi-delivery-time,
.pisol-dpp-form-container #dpp-pickup-location,
.pisol-dpp-form-container select#dpp-pickup-location {
	display: block;
	width: 100%;
	height: auto;
	padding: 11px 13px;
	border: 1px solid var(--d-line-2);
	border-radius: 8px;
	background: var(--d-card);
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: var(--d-ink);
	cursor: pointer;
}

/* Native select chevron, drawn rather than left to the OS so the two
   selects and the readonly date input read as one family. */
.pisol-dpp-form-container select#dpp-pi-delivery-time,
.pisol-dpp-form-container select#dpp-pickup-location {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2352575a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.pisol-dpp-form-container #dpp-pi-delivery-date::placeholder {
	color: var(--d-faint);
}

.pisol-dpp-form-container #dpp-pi-delivery-date:focus,
.pisol-dpp-form-container #dpp-pi-delivery-time:focus,
.pisol-dpp-form-container #dpp-pickup-location:focus,
.pisol-dpp-form-container #dpp-pi-delivery-date:focus-visible,
.pisol-dpp-form-container #dpp-pi-delivery-time:focus-visible,
.pisol-dpp-form-container #dpp-pickup-location:focus-visible {
	outline: 2px solid var(--d-ink);
	outline-offset: 1px;
	border-color: var(--d-ink-2);
}

/* The "Select pickup location" / "Select time" prompts are disabled options -
   greying them keeps them reading as a prompt, not a choice. */
.pisol-dpp-form-container select option:disabled {
	color: var(--d-faint);
}

/* -------------------------------------------------------------- submit */

.pisol-dpp-form-container .dpp-submit-container {
	text-align: left;
}

/*
 * Card class + id so this beats the plugin's inline #dpp-save-preference-btn
 * colour pair. Full width because it is the only action in the card.
 */
.pisol-dpp-form-container #dpp-save-preference-btn {
	display: block;
	width: 100%;
	padding: 12px 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--d-ink);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.005em;
	line-height: 1.3;
	text-transform: none;
	cursor: pointer;
}

.pisol-dpp-form-container #dpp-save-preference-btn:hover {
	/* Darkens on hover, like every other control in the zone. --d-olive is the
	   only step darker than ink the system has, and this file already uses it
	   the same way for the re-open badge's hover. White on it measures 15.6:1. */
	background: var(--d-olive);
	color: #fff;
}

.pisol-dpp-form-container #dpp-save-preference-btn:focus-visible {
	outline: 2px solid var(--d-ink);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- badge */

/*
 * The plugin's floating re-open badge. Currently switched OFF in its settings
 * (pi_dpp_enable_badge), so this renders nothing today - it is here so that
 * ticking that box in wp-admin cannot put a pure-black pill on the storefront.
 * Answers the inline #pisol-preference-badge colour pair with an id + class.
 */
#pisol-preference-badge-container a#pisol-preference-badge {
	background: var(--cw-ink, #263238);
	color: var(--cw-on-ink, #dfe3e4);
	border-radius: 999px 999px 0 0;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 700;
}

#pisol-preference-badge-container a#pisol-preference-badge:hover {
	background: var(--cw-olive, #16210a);
	color: var(--cw-lime-bright, #b5e048);
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 520px) {
	.mfp-container:has(.pisol-dpp-form-container) {
		padding: 12px;
	}

	.pisol-dpp-form-container .pisol-dpp-title {
		padding: 16px 50px 12px 16px;
		font-size: 17.5px;
	}

	.pisol-dpp-form-container .pisol-dpp-content {
		padding: 14px 16px 16px;
	}

	/* Date and time stack rather than squeeze to ~120px each. */
	.pisol-dpp-form-container .pi-dpp-date-time-container {
		flex-direction: column;
		gap: 12px;
	}
}