/* Global "become a partner" popup form — shared across pages via
   catalog/view/theme/default/template/common/footer.twig, so any page can
   open it just by putting a [data-bon-partner-cta] attribute on a trigger
   (button, link, etc). Not scoped to any single page's markup on purpose. */

/* display:none<->block can't be transitioned (the browser removes the
   box from rendering instantly, mid-animation or not) - opacity/visibility
   instead, same fix as the FAQ accordion's height animation. The
   visibility transition is delayed on the way IN (0s) but delayed on the
   way OUT (.25s, matching the opacity duration) via the two rules below,
   so the modal stays click-through-disabled and hidden from screen
   readers only once the fade has actually finished, not before. */
.bon-partner-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	transition: opacity .25s ease, visibility 0s linear .25s;
}

.bon-partner-modal--open {
	visibility: visible;
	opacity: 1;
	transition: opacity .25s ease, visibility 0s linear 0s;
}

body.bon-partner-modal-open {
	overflow: hidden;
}

.bon-partner-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, .45);
}

.bon-partner-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(440px, calc(100vw - 32px));
	max-height: calc(100vh - 64px);
	overflow-y: auto;
	margin: 32px auto;
	padding: 48px 40px 40px;
	border-radius: 28px;
	background: #ffffff;
	box-shadow: 0 24px 64px rgba(17, 17, 17, .18);
	transform: translateY(24px) scale(0.96);
	transition: transform .25s ease;
	box-sizing: border-box;
}

.bon-partner-modal--open .bon-partner-modal__dialog {
	transform: translateY(0) scale(1);
}

.bon-partner-modal__close {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: transparent;
	color: #9a9a9a;
	cursor: pointer;
	line-height: 0;
}

.bon-partner-modal__close svg {
	width: 16px;
	height: 16px;
}

.bon-partner-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-sizing: border-box;
}

.bon-partner-form * {
	box-sizing: border-box;
}

/* Honeypot: only bots fill this in, so it must stay reachable by a script
   (no display:none/visibility:hidden — some bots skip those) while being
   invisible and unreachable for real visitors. */
.bon-partner-form__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.bon-partner-form__message {
	padding: 12px 18px;
	border-radius: 14px;
	font-family: 'Stratos LC Web', 'Open Sans', Arial, sans-serif;
	font-size: 14px;
	line-height: 1.3;
}

.bon-partner-form__message--success {
	background: rgba(165, 75, 217, .1);
	color: #A54BD9;
}

.bon-partner-form__message--error {
	background: rgba(239, 68, 56, .1);
	color: #EF4438;
}

.bon-partner-form__input,
.bon-partner-form__select,
.bon-partner-form__textarea {
	width: 100%;
	padding: 14px 22px;
	border: 1px solid #CDCDCD;
	border-radius: 999px;
	font-family: 'Stratos LC Web', 'Open Sans', Arial, sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.2;
	color: #212121;
	background: #ffffff;
}

.bon-partner-form__input:focus,
.bon-partner-form__select:focus,
.bon-partner-form__textarea:focus {
	outline: none;
	border-color: #A54BD9;
}

.bon-partner-form__input::placeholder,
.bon-partner-form__textarea::placeholder {
	color: #CDCDCD;
}

.bon-partner-form__textarea {
	border-radius: 20px;
	min-height: 96px;
	resize: vertical;
}

.bon-partner-form__select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	color: #212121;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23212121' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 22px center;
	background-size: 12px 8px;
	cursor: pointer;
}

.bon-partner-form__select:invalid {
	color: #CDCDCD;
}

.bon-partner-form__select option {
	color: #212121;
}

/* Open/focused state gets its own border color, distinct from the other
   fields' shared purple focus color above. */
.bon-partner-form__select:focus {
	border-color: #F4F4F4;
}

.bon-partner-form__submit {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 16px 24px;
	border: none;
	border-radius: 999px;
	background: #A54BD9;
	color: #ffffff;
	font-family: 'Stratos LC Web', 'Open Sans', Arial, sans-serif;
	font-weight: 400;
	font-size: 17px;
	cursor: pointer;
	transition: opacity .25s ease, transform .15s ease;
}

.bon-partner-form__submit:hover {
	opacity: 0.85;
}

.bon-partner-form__submit:active {
	transform: scale(0.97);
	transition-duration: .08s;
}

.bon-partner-form__submit:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

@media (max-width: 480px) {
	.bon-partner-modal__dialog {
		padding: 60px 24px 32px;
	}
}