/* KiKi Meow newsletter connector styles — v1.2.0 (2026-09-23)
   Popup rules are prefixed with .kiki-newsletter-popup so they outrank the theme's
   blanket `body.kikimeow button { border-radius:999px !important; background:coral !important }`
   rule (theme style.css ~line 1789), which otherwise turns ANY <button> — including the
   popup close control — into a solid coral pill. */

/* ---------- Form primitives ---------- */
.kiki-newsletter-form { max-width: none; margin: 0; }
.kiki-newsletter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.kiki-newsletter-email {
	flex: 1 1 190px; min-width: 150px;
	padding: 12px 14px; border: 1px solid #c3cfcc; border-radius: 8px;
	font-size: 15px; color: #1f2d2b; background: #fff;
}
.kiki-newsletter-email::placeholder { color: #9aa8a5; opacity: 1; }
.kiki-newsletter-email:focus { outline: 2px solid #1F8A80; outline-offset: 1px; border-color: #1F8A80; }
.kiki-newsletter-submit {
	padding: 12px 18px; border: 0; border-radius: 8px; cursor: pointer;
	background: #FF7A59; color: #fff; font-weight: 700; font-size: 15px;
	transition: background .15s ease;
}
.kiki-newsletter-submit:hover { background: #f0633f; }
.kiki-newsletter-submit:disabled { opacity: .6; cursor: default; }
.kiki-newsletter-consent {
	display: flex; align-items: flex-start; gap: 8px; margin-top: 11px;
	font-size: 12.5px; line-height: 1.45; color: #5a6b68; text-align: left;
}
.kiki-newsletter-consent input { margin: 2px 0 0; flex: none; }
.kiki-newsletter-msg { font-size: 13px; margin: 0 0 8px; min-height: 0; }
.kiki-newsletter-msg:empty { display: none; }
.kiki-newsletter-msg.kiki-ok { color: #1F8A80; font-weight: 600; }
.kiki-newsletter-msg.kiki-err { color: #d6453d; font-weight: 600; }
.kiki-newsletter-visually-hidden,
.kiki-newsletter-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Popup shell ---------- */
.kiki-newsletter-popup { position: fixed; inset: 0; z-index: 99999; display: none; }
.kiki-newsletter-popup.kiki-open { display: block; }
.kiki-newsletter-popup-backdrop { position: absolute; inset: 0; background: rgba(20,35,33,.55); }

.kiki-newsletter-popup-inner {
	position: relative;
	width: min(600px, 94vw);
	margin: 12vh auto 0;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 50px rgba(0,0,0,.25);
	display: grid;
	grid-template-columns: 184px 1fr;
	text-align: left;
}

/* Reward panel — states the value before asking for the address. */
.kiki-newsletter-popup-aside {
	background: #1F8A80;
	padding: 28px 16px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; gap: 4px;
}
.kiki-newsletter-popup-aside svg { width: 62px; height: 50px; display: block; margin-bottom: 8px; }
.kiki-newsletter-popup-reward { font-size: 34px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.01em; }
.kiki-newsletter-popup-reward-sub { font-size: 12px; color: #C9EFE3; line-height: 1.35; }

.kiki-newsletter-popup-main { padding: 26px 28px 28px; }

/* The theme's blanket `body.kikimeow button { border-radius:999px !important;
   background: var(--km-coral) !important; color:#fff !important }` (theme style.css
   ~line 1789) has specificity (0,0,1,2). A bare `.kiki-newsletter-submit` (0,0,1,0)
   loses even with !important, so the submit button came out a coral pill and the close
   control a coral circle. Both are prefixed with a container class to reach (0,0,2,0). */
.kiki-newsletter-popup .kiki-newsletter-popup-close {
	position: absolute; top: 8px; right: 10px;
	width: 32px; height: 32px; padding: 0;
	border: 0 !important; background: none !important; box-shadow: none !important;
	border-radius: 50% !important; color: #9aa8a5 !important;
	font-size: 22px; line-height: 30px; text-align: center; cursor: pointer;
	font-family: inherit;
}
.kiki-newsletter-popup .kiki-newsletter-popup-close:hover { color: #1F2D2B !important; background: #f2f2ef !important; }

.kiki-newsletter-form .kiki-newsletter-submit {
	border-radius: 8px !important;
	background: #FF7A59 !important;
	color: #fff !important;
	border: 0 !important;
}
.kiki-newsletter-form .kiki-newsletter-submit:hover { background: #f0633f !important; }

.kiki-newsletter-popup-title { margin: 0 0 5px; font-size: 21px; font-weight: 800; color: #1F2D2B; }
.kiki-newsletter-popup-sub { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: #5a6b68; }

.kiki-newsletter-perks { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 5px; }
.kiki-newsletter-perks li {
	position: relative; padding-left: 20px; font-size: 13px; line-height: 1.4; color: #1F8A80; font-weight: 600;
}
.kiki-newsletter-perks li::before {
	content: ""; position: absolute; left: 2px; top: 4px;
	width: 11px; height: 6px;
	border-left: 2px solid #1F8A80; border-bottom: 2px solid #1F8A80;
	transform: rotate(-45deg);
}

@media (max-width: 560px) {
	.kiki-newsletter-popup-inner { grid-template-columns: 1fr; margin-top: 6vh; }
	.kiki-newsletter-popup-aside {
		flex-direction: row; gap: 10px; padding: 14px 18px; justify-content: flex-start;
	}
	.kiki-newsletter-popup-aside svg { width: 38px; height: 31px; margin-bottom: 0; }
	.kiki-newsletter-popup-reward { font-size: 24px; }
	.kiki-newsletter-popup-reward-sub { text-align: left; }
	.kiki-newsletter-popup-main { padding: 20px 20px 22px; }
}