body {
  font-family: 'Poppins', sans-serif;
  background-color: #F4F4F6;
  color: #202A44;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  flex-direction: column;
  gap: 1rem;
}

button {
  background-color: #FF9E1B;
  color: #202A44;
  font-size: 1rem;
  padding: 1rem 2rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#subscribeIOSModal {
	align-items: end !important;
	.modal-content::after {
		display: block;
		content: ' ';
		border-width: 1rem 1rem 0 1rem;
		border-style: solid;
		border-color: #fff transparent;
		position: absolute;
		bottom: -1rem;
		left: calc(50% - 1rem);
	}
}

.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.6);
	top: 0; left: 0; right: 0; bottom: 0;
	justify-content: center;
	align-items: center;
	font-family: 'Poppins', sans-serif;
	padding: 1rem;
}

.modal-content {
	background: #fff;
	padding: 2rem;
	max-width: 400px;
	border-radius: 6px;
	box-shadow: 0 2px 20px rgba(0,0,0,0.2);
	text-align: center;
}

.modal-actions {
	display: flex;
	justify-content: space-around;
	margin-top: 1.5rem;
}

.confirm {
	background-color: #FF9E1B;
	border: none;
	padding: 0.75rem 1.5rem;
	color: #202A44;
	font-weight: bold;
	border-radius: 4px;
	cursor: pointer;
}

.dismiss {
	background-color: #eee;
	border: none;
	padding: 0.75rem 1.5rem;
	color: #333;
	border-radius: 4px;
	cursor: pointer;
}

/* Visible, high-contrast focus (2.4.7/2.4.13) */
.modal-content:focus-visible,
.btn:focus-visible,
.btn-close:focus-visible {
	outline: 3px solid #202A44; /* dark, high-contrast ring */
	outline-offset: 3px;
}

/* Prefer reduced motion (2.3.3); animations only if user allows */
@media (prefers-reduced-motion:no-preference) {
	.modal-content { transform: translateY(8px); transition: transform .18s ease, opacity .18s ease; }
	.modal:not([hidden]) .modal-content { transform: translateY(0); }
}