/* HPK WhatsApp Opt-in — sticky popup */
#hpk-optin {
	--hpk-bg: #630f50;
	--hpk-field: rgba(255, 255, 255, .14);
	--hpk-accent: #ffa81c;
	--hpk-white: #fff;
	--hpk-w: 420px;
	--hpk-img: 110px;
	--hpk-h: 140px;

	position: fixed !important;
	transform: none;
	z-index: 99999;
	width: var(--hpk-w);
	min-height: var(--hpk-h);
	font-family: 'sofia-pro';
	color: var(--hpk-white);
	box-sizing: border-box;
}
#hpk-optin[hidden] { display: none; }

#hpk-optin *,
#hpk-optin *::before,
#hpk-optin *::after { box-sizing: border-box; font-family: 'sofia-pro'; }

/* close button: 35px x 35px, 50% radius */
#hpk-optin .hpk-close {
	position: absolute;
	top: -25px!important;
	left: -35px!important;
	z-index: 2;
	width: 35px;
	height: 35px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hpk-white);
	color: var(--hpk-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;

}
#hpk-optin .hpk-close:focus-visible,
#hpk-optin .hpk-btn:focus-visible { outline: 2px solid var(--hpk-accent); outline-offset: 2px; }

#hpk-optin .hpk-box {
	display: flex;
	gap: 10px;
	min-height: var(--hpk-h);
	padding: 14px;
	background: var(--hpk-bg);
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(60, 5, 48, .35);
}

#hpk-optin .hpk-img {
	flex: 0 0 var(--hpk-img);
	width: var(--hpk-img);
	height: var(--hpk-img);
	align-self: center;
	background: var(--hpk-accent);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
#hpk-optin .hpk-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

#hpk-optin .hpk-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
}
#hpk-optin .hpk-step { display: flex; flex-direction: column; gap: 6px; }
#hpk-optin .hpk-step[hidden] { display: none; }

/* step 1 & 2: heading container on top, input + button container at bottom */
#hpk-optin .hpk-step:not([data-s="3"]) { flex: 1; justify-content: space-between; }
#hpk-optin .hpk-head { display: flex; flex-direction: column; }
#hpk-optin .hpk-actions { display: flex; flex-direction: column; gap: 12px; }

#hpk-optin .hpk-title {
	margin: 0;
	font-size: 13px;
	font-family: 'Sofia-Pro';
	font-weight: 300;
	line-height: 15px;
	color: var(--hpk-white);
	letter-spacing: -2%;
    word-spacing: 1px;

}
#hpk-optin .hpk-hl { color: var(--hpk-accent); font-weight: 700; }
#hpk-optin .hpk-success { font-size: 13px; line-height: 1.45; }

/* phone field */
#hpk-optin .hpk-field {
	display: flex;
	align-items: center;
	height: 28px;
	padding: 0 8px;
	background: var(--hpk-field);
	border-radius: 4px;
}
#hpk-optin .hpk-cc { font-size: 11px; margin-right: 4px; opacity: .9; }
#hpk-optin .hpk-phone {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--hpk-white);
	font-size: 11px;
	box-shadow: none;
}
#hpk-optin input::placeholder { color: rgba(255, 255, 255, .6); opacity: 1; }

/* otp boxes */
#hpk-optin .hpk-otp { display: flex; gap: 5px; }
#hpk-optin .hpk-otp input {
	flex: 1;
	min-width: 0;
	width: 100%;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: var(--hpk-field);
	color: var(--hpk-white);
	text-align: center;
	font-size: 12px;
	box-shadow: none;
}

/* buttons */
#hpk-optin .hpk-btn {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	width: 100%;
	height: 28px;
	padding: 0 8px;
	border: 0;
	border-radius: 4px;
	background: var(--hpk-white);
	color: var(--hpk-bg);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	text-align: left; 
}
#hpk-optin .hpk-btn svg { flex: 0 0 auto; width: 14px; height: 14px; }
#hpk-optin .hpk-btn[disabled] { opacity: .6; cursor: wait; }

#hpk-optin .hpk-msg { margin: 0; font-size: 10px; line-height: 1.3; color: #ffd27a; }
#hpk-optin .hpk-msg[hidden] { display: none; }

/* honeypot */
#hpk-optin .hpk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* step 3: compact success bar, 290px x 60px, close icon vertically centred on the left */
#hpk-optin[data-step="3"] { width: 290px; min-height: 60px; height: 60px; }
#hpk-optin[data-step="3"] .hpk-img { display: none; }
#hpk-optin[data-step="3"] .hpk-box {
	align-items: center;
	height: 60px;
	min-height: 60px;
	padding: 0 12px 0 52px;
}
#hpk-optin[data-step="3"] .hpk-body { justify-content: center; }
#hpk-optin[data-step="3"] .hpk-success { font-size: 12px; line-height: 1.3; }


/* inputs: look the same on hover / focus / active (beats theme styles) */
#hpk-optin input,
#hpk-optin input:hover,
#hpk-optin input:focus,
#hpk-optin input:focus-visible,
#hpk-optin input:active {
	outline: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}
#hpk-optin .hpk-phone,
#hpk-optin .hpk-phone:hover,
#hpk-optin .hpk-phone:focus,
#hpk-optin .hpk-phone:active {
	background: transparent !important;
	color: var(--hpk-white) !important;
}
#hpk-optin .hpk-otp input,
#hpk-optin .hpk-otp input:hover,
#hpk-optin .hpk-otp input:focus,
#hpk-optin .hpk-otp input:active {
	background: var(--hpk-field) !important;
	color: var(--hpk-white) !important;
}
#hpk-optin .hpk-field:hover,
#hpk-optin .hpk-field:focus-within { background: var(--hpk-field); border: 0; box-shadow: none; }
#hpk-optin .hpk-btn:hover,
#hpk-optin .hpk-btn:focus { background: var(--hpk-white); color: var(--hpk-bg); }

/* ---------- mobile: compact bar, close button top-left inside screen ---------- */
@media (max-width: 600px) {
	#hpk-optin {
		--hpk-img: 72px;
		--hpk-h: 94px;
		left: 14px;
		right: 14px;
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		width: auto;
		max-width: none;
	}
	/* close button: smaller, sits on the top-left corner and stays fully visible */
	#hpk-optin .hpk-close {
		top: -14px !important;
		left: -6px !important;
		width: 26px;
		height: 26px;
	}
	#hpk-optin .hpk-close svg { width: 12px; height: 12px; }
	#hpk-optin .hpk-box { gap: 8px; padding: 6px; min-height: var(--hpk-h); }
	#hpk-optin .hpk-body,
	#hpk-optin .hpk-step { gap: 4px; }
	#hpk-optin .hpk-actions { gap: 6px; }
	#hpk-optin .hpk-title { font-size: 10px; line-height: 1.25; word-spacing: 0; }
	#hpk-optin .hpk-field,
	#hpk-optin .hpk-btn,
	#hpk-optin .hpk-otp input { height: 26px; }
	#hpk-optin .hpk-btn { font-size: 11px; }
	#hpk-optin .hpk-btn svg,
	#hpk-optin .hpk-btn img { width: 11px; height: 11px; }
	/* 16px stops iOS from zooming the page when the field is focused */
	#hpk-optin .hpk-phone,
	#hpk-optin .hpk-otp input { font-size: 16px; }
	#hpk-optin .hpk-cc { font-size: 12px; }
	#hpk-optin .hpk-msg { font-size: 9px; }
	#hpk-optin[data-step="3"] { width: auto; height: 48px; min-height: 48px; }
	#hpk-optin[data-step="3"] .hpk-box { height: 48px; min-height: 48px; padding: 0 12px; }
	#hpk-optin[data-step="3"] .hpk-success { font-size: 11px; }
}