/**
 * Why DJ — campaign popups (Countdown + Share Your Story).
 *
 * A centered modal (overlay + white rounded dialog) wrapping a Gravity Form, restyled to match the
 * Figma popups (242:465, 247:811/875). Tokens taken from the design: red #a91d22, label #444,
 * 591px dialog, 50px/8px inputs, 68px pill submit, and a custom two-step progress indicator
 * (GF's native steps indicator is hidden — it renders neither the fill bar nor white labels).
 */

:root {
	--why-dj-pop-red: #a91d22;
	--why-dj-pop-red-dark: #8f181b;
	--why-dj-pop-ink: #000;
	--why-dj-pop-label: #444;
	--why-dj-pop-field: #f0f0f0;
	--why-dj-pop-track: #d9d9d9;
}

/* ---------- Overlay + dialog ---------- */
.why-dj-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding: 4vh 16px;
	overflow-y: auto;
}
.why-dj-modal.why-dj-modal--open {
	display: flex;
}
body.why-dj-modal-open {
	overflow: hidden;
}
.why-dj-modal__overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 10, 10, 0.6);
	backdrop-filter: blur(2px);
}
.why-dj-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 600px;
	margin: auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	padding: 34px 30px 26px;
	animation: why-dj-modal-in 0.22s ease-out;
}
@keyframes why-dj-modal-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
.why-dj-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: #000;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background 0.15s ease;
}
.why-dj-modal__close:hover {
	background: #f2f2f2;
}

/* ---------- Header ---------- */
.why-dj-modal__header {
	margin-bottom: 22px;
	padding-right: 36px;
}
.why-dj-modal__title {
	margin: 0 0 8px;
	font-size: 1.5rem;   /* 24px */
	font-weight: 700;
	line-height: 1.2;
	color: var(--why-dj-pop-ink);
}
.why-dj-modal__subtitle {
	margin: 0;
	font-size: 1rem;     /* 16px */
	line-height: 1.5;
	color: var(--why-dj-pop-label);
}

/* ---------- Legal footer ---------- */
.why-dj-modal__legal {
	margin: 16px 0 0;
	font-size: 0.875rem; /* 14px */
	font-style: italic;
	color: var(--why-dj-pop-label);
}
.why-dj-modal__legal a {
	color: var(--why-dj-pop-label);
	text-decoration: underline;
}

/* ---------- Custom two-step progress (Share Your Story) ----------
   Rendered into .why-dj-modal__body (OUTSIDE the GF wrapper) so GF's aggressive resets don't
   clobber it; scoped + !important on the layout props for the same reason. */
.why-dj-modal .why-dj-steps {
	margin: 0 0 24px;
}
.why-dj-modal .why-dj-steps__pills {
	display: flex !important;
	justify-content: space-between;
	margin-bottom: 12px;
}
.why-dj-modal .why-dj-steps__pill {
	font-size: 1rem !important;
	font-weight: 700;
	color: #fff !important;
	background: var(--why-dj-pop-label);
	border-radius: 6px;
	padding: 5px 18px !important;
}
.why-dj-modal .why-dj-steps__pill.is-active {
	background: var(--why-dj-pop-red);
}
.why-dj-modal .why-dj-steps__track {
	height: 15px !important;
	background: var(--why-dj-pop-track);
	border-radius: 999px;
	overflow: hidden;
}
.why-dj-modal .why-dj-steps__fill {
	height: 100% !important;
	background: var(--why-dj-pop-red);
	border-radius: 999px;
	transition: width 0.3s ease;
}

/* ==================================================================
   Gravity Forms restyle — scoped to the campaign modal only.
   ================================================================== */
.why-dj-modal .gform_wrapper.gravity-theme,
.why-dj-modal .gform_wrapper,
.why-dj-modal .gform_wrapper form {
	margin: 0;
}

/* Hide GF's native progress indicator — we render our own (.why-dj-steps). */
.why-dj-modal .gf_progressbar_wrapper,
.why-dj-modal .gf_page_steps,
.why-dj-modal .gform_page_steps {
	display: none !important;
}

/* Field grid — GF sets grid-column span from layoutGridColumnSpan; we set gaps + single-col fallback. */
.why-dj-modal .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 15px;
	grid-row-gap: 18px;
}
.why-dj-modal .gfield {
	grid-column: span 12;
	min-width: 0;
}

/* Labels */
.why-dj-modal .gfield_label {
	font-size: 1rem;
	font-weight: 700;
	color: var(--why-dj-pop-label);
	margin: 0 0 8px;
}
.why-dj-modal .gfield_required {
	color: var(--why-dj-pop-red);
}

/* Inputs / selects / textareas — flat light-grey, no border, 8px radius, ~50px tall */
.why-dj-modal .gform_wrapper input[type="text"],
.why-dj-modal .gform_wrapper input[type="email"],
.why-dj-modal .gform_wrapper input[type="tel"],
.why-dj-modal .gform_wrapper input[type="number"],
.why-dj-modal .gform_wrapper input[type="url"],
.why-dj-modal .gform_wrapper select,
.why-dj-modal .gform_wrapper textarea {
	width: 100%;
	background: var(--why-dj-pop-field);
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 13px 16px;
	font-size: 1rem;
	color: var(--why-dj-pop-ink);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.why-dj-modal .gform_wrapper textarea {
	min-height: 130px;
	resize: vertical;
}
.why-dj-modal .gform_wrapper input:focus,
.why-dj-modal .gform_wrapper select:focus,
.why-dj-modal .gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--why-dj-pop-red);
	box-shadow: 0 0 0 3px rgba(169, 29, 34, 0.15);
}
/* Custom chevron locked across base/hover/focus so GF's own hover chevron can't swap it. */
.why-dj-modal .gform_wrapper select,
.why-dj-modal .gform_wrapper select:hover,
.why-dj-modal .gform_wrapper select:focus {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23444444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	background-size: 14px 9px !important;
	padding-right: 40px;
}

/* Complex (Name) field — sub-inputs side by side with First/Last sublabels */
.why-dj-modal .ginput_complex.ginput_container_name {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}
.why-dj-modal .ginput_complex .ginput_full,
.why-dj-modal .ginput_complex span {
	display: block;
}
.why-dj-modal .gform_wrapper .gform-field-label--type-sub,
.why-dj-modal .ginput_complex label {
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--why-dj-pop-label);
	margin-top: 6px;
	display: block;
}

/* Field descriptions ("What is your job role?") */
.why-dj-modal .gfield_description,
.why-dj-modal .gform_wrapper .gfield_description {
	padding: 6px 2px 0;
	font-size: 0.95rem;
	color: var(--why-dj-pop-label);
}

/* Description → tooltip: hide the inline help text (kept for screen readers) and show it on hover
   of a small info icon appended to the label. */
.why-dj-modal .why-dj-desc-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.why-dj-modal .why-dj-tip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-left: 6px;
	border-radius: 50%;
	background: #bdbdbd;
	color: #fff;
	font: italic 700 11px/1 Georgia, "Times New Roman", serif;
	cursor: help;
	position: relative;
	vertical-align: middle;
	transition: background 0.15s ease;
}
.why-dj-modal .why-dj-tip:hover,
.why-dj-modal .why-dj-tip:focus {
	background: var(--why-dj-pop-red);
	outline: none;
}
.why-dj-modal .why-dj-tip[data-why-dj-tip]:hover::after,
.why-dj-modal .why-dj-tip[data-why-dj-tip]:focus::after {
	content: attr(data-why-dj-tip);
	position: absolute;
	bottom: calc(100% + 9px);
	left: 50%;
	transform: translateX(-50%);
	width: 240px;
	max-width: 60vw;
	padding: 10px 12px;
	background: #1a1a1a;
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-size: 0.8rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.45;
	text-align: left;
	white-space: normal;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	z-index: 10;
	pointer-events: none;
}
.why-dj-modal .why-dj-tip[data-why-dj-tip]:hover::before,
.why-dj-modal .why-dj-tip[data-why-dj-tip]:focus::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 3px);
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #1a1a1a;
	z-index: 10;
	pointer-events: none;
}

/* File upload */
.why-dj-modal .gform_wrapper .ginput_container_fileupload input[type="file"],
.why-dj-modal .gform_wrapper .gform_drop_area {
	width: 100%;
	background: var(--why-dj-pop-field);
	border: 1px dashed #c8c8c8;
	border-radius: 8px;
	padding: 20px 16px;
	font-size: 0.95rem;
	color: var(--why-dj-pop-label);
}

/* ---------- Chosen enhanced multiselect (Fixtures Used product picker) ---------- */
.why-dj-modal .chosen-container {
	width: 100% !important;
	font-size: 1rem;
}
.why-dj-modal .chosen-container-multi .chosen-choices {
	background: var(--why-dj-pop-field) !important;
	border: 1px solid var(--why-dj-pop-field-border) !important;
	border-radius: 8px !important;
	padding: 7px 10px !important;
	box-shadow: none !important;
}
.why-dj-modal .chosen-container-active .chosen-choices {
	border-color: var(--why-dj-pop-red) !important;
	box-shadow: 0 0 0 3px rgba(169, 29, 34, 0.15) !important;
}
.why-dj-modal .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
	background: transparent !important;
	font-size: 1rem !important;
	color: var(--why-dj-pop-ink) !important;
	height: auto !important;
	padding: 4px 2px !important;
}
/* Selected product chip → DJ red */
.why-dj-modal .chosen-container-multi .chosen-choices li.search-choice {
	background: var(--why-dj-pop-red) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #fff !important;
	box-shadow: none !important;
	padding: 5px 26px 5px 13px !important;
	margin: 3px 5px 3px 0 !important;
	font-size: 0.9rem !important;
	line-height: 1.3 !important;
}
.why-dj-modal .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
	top: 50% !important;
	transform: translateY(-50%) !important;
	right: 8px !important;
	filter: brightness(0) invert(1); /* recolor the X sprite white for contrast on red */
}
/* Dropdown results */
.why-dj-modal .chosen-container .chosen-drop {
	border-color: var(--why-dj-pop-field-border) !important;
	border-radius: 0 0 8px 8px !important;
}
.why-dj-modal .chosen-container .chosen-results li.highlighted,
.why-dj-modal .chosen-container .chosen-results li.highlighted em {
	background-color: var(--why-dj-pop-red) !important;
	color: #fff !important;
}

/* ---------- Submit + page nav buttons (red pill, full width) ----------
   GF 2.5+ uses BOTH `.gform_footer` (final submit) and `.gform-page-footer` (hyphen; page nav),
   and paints buttons with `.gform-theme-button` — so we override with high specificity + !important. */
.why-dj-modal .gform_footer,
.why-dj-modal .gform-page-footer {
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	gap: 14px;
	align-items: center;
}
.why-dj-modal .gform_wrapper .gform_footer input[type="submit"],
.why-dj-modal .gform_wrapper .gform_footer button,
.why-dj-modal .gform_wrapper .gform-page-footer input[type="submit"],
.why-dj-modal .gform_wrapper .gform-page-footer .gform_next_button,
.why-dj-modal .gform_wrapper .gform-page-footer .gform_button {
	flex: 1 1 auto;
	height: auto !important;
	min-height: 0 !important;
	background: var(--why-dj-pop-red) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 20px 28px !important;
	font-size: 1rem !important;
	line-height: 1.2 !important;
	font-weight: 700;
	text-transform: none !important;
	cursor: pointer;
	transition: background 0.15s ease;
}
.why-dj-modal .gform_wrapper .gform_footer input[type="submit"]:hover,
.why-dj-modal .gform_wrapper .gform_footer button:hover,
.why-dj-modal .gform_wrapper .gform-page-footer input[type="submit"]:hover,
.why-dj-modal .gform_wrapper .gform-page-footer .gform_next_button:hover {
	background: var(--why-dj-pop-red-dark) !important;
}
/* Previous button = narrow outline/secondary, sits in the same footer row as Submit */
.why-dj-modal .gform_wrapper .gform_previous_button {
	flex: 0 0 auto !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	background: #fff !important;
	color: var(--why-dj-pop-ink) !important;
	border: 2px solid #d8d8d8 !important;
	border-radius: 999px !important;
	padding: 18px 26px !important;
	font-size: 1rem !important;
	line-height: 1.2 !important;
	font-weight: 700;
	text-transform: none !important;
	cursor: pointer;
}

/* File upload drop area — recolor GF's blue icon + "Select files" button to DJ red */
.why-dj-modal .gform_wrapper .gform_drop_area .gform_drop_instructions {
	color: var(--why-dj-pop-label);
}
.why-dj-modal .gform_wrapper .gform_drop_area svg,
.why-dj-modal .gform_wrapper .gform_drop_area svg path {
	stroke: var(--why-dj-pop-red) !important;
	color: var(--why-dj-pop-red) !important;
}
.why-dj-modal .gform_wrapper .gform_button_select_files {
	background: var(--why-dj-pop-red) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 12px 24px !important;
	font-size: 1rem !important;
	line-height: 1.2 !important;
	font-weight: 700;
	text-transform: none !important;
	cursor: pointer;
}
.why-dj-modal .gform_wrapper .gform_button_select_files:hover {
	background: var(--why-dj-pop-red-dark) !important;
}

/* ---------- Validation ---------- */
.why-dj-modal .gform_wrapper .gfield_error input,
.why-dj-modal .gform_wrapper .gfield_error select,
.why-dj-modal .gform_wrapper .gfield_error textarea {
	border-color: var(--why-dj-pop-red);
}
.why-dj-modal .gform_wrapper .validation_message,
.why-dj-modal .gform_wrapper .gform_validation_errors {
	color: var(--why-dj-pop-red);
	font-size: 0.9rem;
}
.why-dj-modal .gform_confirmation_message {
	font-size: 1.15rem;
	line-height: 1.5;
	color: var(--why-dj-pop-ink);
	padding: 20px 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	.why-dj-modal__dialog {
		padding: 28px 20px 22px;
		border-radius: 14px;
	}
	.why-dj-modal__title {
		font-size: 1.4rem;
	}
	.why-dj-modal .gform_fields {
		grid-column-gap: 0;
	}
	.why-dj-modal .gfield {
		grid-column: span 12 !important;
	}
	.why-dj-modal .ginput_complex.ginput_container_name {
		grid-template-columns: 1fr;
	}
	.why-dj-modal .gform_footer,
	.why-dj-modal .gform-page-footer {
		flex-wrap: wrap;
	}
}