/* Store Messages — sign-up popup and form. Mobile first: a bottom sheet on phones, a centred card from 600px. */
.stms-pop, .stms-signup-box { --stms-accent: #2563eb; --stms-on-accent: #fff; --stms-text: #18181b; --stms-muted: #52525b; --stms-line: #d4d4d8; }
.stms-pop[hidden] { display: none !important; }
.stms-pop { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; }
.stms-pop__backdrop { position: absolute; inset: 0; background: rgba(15, 15, 20, .5); opacity: 0; transition: opacity .2s ease; }
.stms-pop__dialog { position: relative; width: 100%; max-height: 92vh; overflow-y: auto; background: #fff; color: var(--stms-text); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .2); transform: translateY(24px); opacity: 0; transition: transform .25s ease, opacity .2s ease; outline: none; }
.stms-pop.is-open .stms-pop__backdrop { opacity: 1; }
.stms-pop.is-open .stms-pop__dialog { transform: none; opacity: 1; }
.stms-pop__close { position: absolute; top: 8px; right: 8px; z-index: 1; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--stms-text); font-size: 26px; line-height: 44px; text-align: center; cursor: pointer; }
.stms-pop__close:focus-visible { outline: 2px solid var(--stms-accent); outline-offset: 2px; }
.stms-pop__image { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 18px 18px 0 0; }
.stms-pop__body { padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); }
.stms-pop__title { margin: 0 40px 8px 0; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--stms-text); }
.stms-pop__text { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--stms-muted); }

.stms-signup { display: grid; gap: 8px; margin: 0; }
.stms-signup__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.stms-signup__input { box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 12px 14px; border: 1px solid var(--stms-line); border-radius: 10px; background: #fff; color: var(--stms-text); font-size: 16px; }
.stms-signup__input::placeholder { color: #71717a; }
.stms-signup__input:focus { border-color: var(--stms-accent); outline: 2px solid var(--stms-accent); outline-offset: 0; }
.stms-signup__input[aria-invalid=true] { border-color: #b91c1c; }
.stms-signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.stms-signup__button { min-height: 48px; margin: 4px 0 0; padding: 12px 18px; border: 0; border-radius: 10px; background: var(--stms-accent); color: var(--stms-on-accent); font-size: 16px; font-weight: 700; cursor: pointer; }
.stms-signup__button:hover { filter: brightness(.95); }
.stms-signup__button:focus-visible { outline: 2px solid var(--stms-text); outline-offset: 2px; }
.stms-signup__button[disabled] { opacity: .65; cursor: progress; }
.stms-signup__note { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--stms-muted); }
.stms-signup__note a { color: inherit; text-decoration: underline; }
.stms-signup__msg { margin: 0; font-size: 14px; }
.stms-signup__msg:empty { display: none; }
.stms-signup__msg.is-error { color: #b91c1c; }
.stms-signup__done { margin: 4px 0 0; padding: 14px 16px; border-radius: 10px; background: #f4f4f5; color: var(--stms-text); font-size: 15px; line-height: 1.5; outline: none; }

.stms-signup-box { max-width: 480px; }
.stms-signup-box__title { margin: 0 0 6px; }
.stms-signup-box__text { margin: 0 0 12px; color: var(--stms-muted); }

.stms-optin { margin: 0 0 12px; }

@media (min-width: 600px) {
	.stms-pop { align-items: center; padding: 24px; }
	.stms-pop__dialog { max-width: 420px; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
	.stms-pop__image { height: 190px; }
	.stms-pop__body { padding: 28px 28px 26px; }
	.stms-pop__title { font-size: 24px; }
}

/* Inline preview on the Sign-up settings tab. */
.stms-pop.is-preview { position: relative; inset: auto; z-index: auto; padding: 0; min-height: 0; }
.stms-pop.is-preview .stms-pop__backdrop { display: none; }
.stms-pop.is-preview .stms-pop__dialog { max-height: none; border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }

@media (prefers-reduced-motion: reduce) {
	.stms-pop__backdrop, .stms-pop__dialog { transition: none; }
}