*/
.zpmf__note-hl {
color: var(--zpmf-green);
}
/* ---------------------------------------------------------------------------
* Intro step <-> form toggle (see membership-form.php / .js)
* ------------------------------------------------------------------------- */
.zpmf--intro .zpmf__form {
display: none;
}
.zpmf--form .zpmf__intro {
display: none;
}
.zpmf__intro {
text-align: center;
}
/* Contact line -> text-sm text-slate-500 font-medium */
.zpmf__contact {
margin: 1.5rem 0 0;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
color: var(--zpmf-slate-500);
}
.zpmf__contact a {
color: var(--zpmf-green);
font-weight: 700;
text-decoration: none;
}
.zpmf__contact a:hover,
.zpmf__contact a:focus {
text-decoration: underline;
}
/* ---------------------------------------------------------------------------
* Buttons -> bg-zp-green hover:bg-[#5C9B30] text-white font-display
* font-bold py-4 px-10 rounded-full text-xl
* shadow-[0_6px_0_0_#4E8529] hover:shadow-[0_2px_0_0_#4E8529]
* hover:translate-y-[4px] active:shadow-none active:translate-y-[6px]
* ------------------------------------------------------------------------- */
.zpmf__submit {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0;
border: 0;
cursor: pointer;
padding: 1rem 2.5rem;
border-radius: 9999px;
background: var(--zpmf-green);
color: var(--zpmf-on-accent);
font-family: var(--zpmf-font-display);
font-weight: 700;
font-size: 1.25rem;
line-height: 1.75rem;
text-align: center;
text-decoration: none;
box-shadow: 0 6px 0 0 var(--zpmf-green-shadow);
transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
-webkit-appearance: none;
appearance: none;
}
/* Keep the label colour through every state — the active theme's generic
* button:hover / :focus rules otherwise darken it. */
.zpmf__submit:hover,
.zpmf__submit:focus,
.zpmf__submit:active {
color: var(--zpmf-on-accent);
}
.zpmf__submit:hover {
background: var(--zpmf-green-hover);
box-shadow: 0 2px 0 0 var(--zpmf-green-shadow);
transform: translateY(4px);
}
.zpmf__submit:active {
box-shadow: none;
transform: translateY(6px);
}
.zpmf__submit:focus-visible {
outline: 3px solid var(--zpmf-darkblue);
outline-offset: 3px;
}
.zpmf__submit:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
box-shadow: 0 6px 0 0 var(--zpmf-green-shadow);
background: var(--zpmf-green);
}
/* Intro CTA -> inline-flex (not full width). */
.zpmf__buy-now {
display: inline-flex;
width: auto;
}
/* ---------------------------------------------------------------------------
* Form -> space-y-6 text-left
* ------------------------------------------------------------------------- */
.zpmf__form {
text-align: left;
}
.zpmf__form > * + * {
margin-top: 1.5rem;
}
/* Error banner -> bg-zp-red/10 border-2 border-zp-red/40 rounded-xl
* px-5 py-3 text-zp-red font-bold text-base */
.zpmf__form-error {
display: none;
padding: 0.75rem 1.25rem;
background: var(--zpmf-red-tint);
border: 2px solid var(--zpmf-red-line);
border-radius: 0.75rem;
color: var(--zpmf-red);
font-weight: 700;
font-size: 1rem;
line-height: 1.5rem;
}
.zpmf__form-error.is-visible {
display: block;
}
/* Two-up rows -> grid grid-cols-1 sm:grid-cols-2 gap-6 (child rows: gap-4) */
.zpmf__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 640px) {
.zpmf__grid {
grid-template-columns: 1fr 1fr;
}
}
/* Child rows container -> space-y-4 ; each row -> gap-4 */
.zpmf__children > * + * {
margin-top: 1rem;
}
.zpmf__children .zpmf__grid {
gap: 1rem;
}
.zpmf__children:empty {
display: none;
}
/* Field -> wrapper, label block mb-2 text-sm */
.zpmf__field {
display: flex;
flex-direction: column;
margin: 0;
}
/* "Number of Children" select — spaced from the two-up rows above it. */
.zpmf__field--select {
margin-top: 1.5rem;
}
.zpmf__field label {
display: block;
margin-bottom: 0.5rem;
font-weight: 700;
font-size: 0.875rem;
line-height: 1.25rem;
color: var(--zpmf-slate-700);
}
.zpmf__req {
color: var(--zpmf-red);
}
/* Inputs -> w-full px-4 py-3 rounded-xl border-4 border-slate-200
* focus:border-zp-green focus:outline-none text-base font-medium
* ------------------------------------------------------------------------- */
.zpmf input[type="text"],
.zpmf input[type="email"],
.zpmf input[type="tel"],
.zpmf input[type="date"],
.zpmf input[type="number"],
.zpmf select {
width: 100%;
height: auto !important;
min-height: 0;
margin: 0;
padding: 0.75rem 1rem;
border: 4px solid var(--zpmf-slate-200);
border-radius: 0.75rem;
background-color: #fff;
background-image: none;
color: var(--zpmf-slate-800);
font-family: inherit;
font-size: 1rem;
font-weight: 500;
line-height: 1.5rem;
box-shadow: none;
outline: none;
transition: border-color 0.15s ease;
}
.zpmf input::placeholder {
color: var(--zpmf-slate-400);
font-weight: 500;
opacity: 1;
}
.zpmf input:focus,
.zpmf select:focus {
border-color: var(--zpmf-green);
outline: none;
box-shadow: none;
}
.zpmf__field--invalid input,
.zpmf__field--invalid select {
border-color: var(--zpmf-red);
}
/* Inline per-field validation text (no Astro equivalent — kept in brand red). */
.zpmf__error {
margin-top: 0.375rem;
color: var(--zpmf-red);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.4;
}
.zpmf__error:empty {
display: none;
}
/* ---------------------------------------------------------------------------
* Marketing checkbox -> flex items-start gap-3 cursor-pointer
* input: mt-1 w-5 h-5 rounded border-2 border-slate-300 accent zp-green
* text : text-sm text-slate-600 font-medium leading-relaxed
* ------------------------------------------------------------------------- */
.zpmf__checkbox {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin: 1.5rem 0 0;
cursor: pointer;
}
/* Custom box so the tick is white on the green fill (native accent-color
* leaves the checkmark black on a light green in most browsers). */
.zpmf__checkbox input {
flex: 0 0 auto;
margin: 0.25rem 0 0;
width: 1.25rem;
height: 1.25rem;
border: 2px solid var(--zpmf-slate-300);
border-radius: 0.25rem;
background-color: #fff;
accent-color: var(--zpmf-green);
-webkit-appearance: none;
appearance: none;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.zpmf__checkbox input:checked {
border-color: var(--zpmf-green);
background-color: var(--zpmf-green);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 0.85rem;
}
/* Dark tick for the light-fill themes (white would be invisible). */
.zpmf--theme-yellow .zpmf__checkbox input:checked,
.zpmf--theme-orange .zpmf__checkbox input:checked {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' stroke='%230e355d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.zpmf__checkbox input:focus-visible {
outline: 3px solid var(--zpmf-darkblue);
outline-offset: 2px;
}
.zpmf__checkbox span {
font-size: 0.875rem;
font-weight: 500;
line-height: 1.625; /* leading-relaxed */
color: var(--zpmf-slate-600);
}
/* ---------------------------------------------------------------------------
* Total -> flex items-center justify-between bg-zp-green/5
* border-2 border-zp-green/20 rounded-2xl px-6 py-4
* "Total" -> font-display font-bold text-zp-darkblue text-lg
* amount -> font-display font-bold text-zp-green text-2xl
* ------------------------------------------------------------------------- */
.zpmf__total {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
background: var(--zpmf-green-tint);
border: 2px solid var(--zpmf-green-line);
border-radius: 1rem;
}
.zpmf__total > span:first-child {
font-family: var(--zpmf-font-display);
font-weight: 700;
font-size: 1.125rem;
color: var(--zpmf-darkblue);
}
.zpmf__total-amount {
font-family: var(--zpmf-font-display);
font-weight: 700;
font-size: 1.5rem;
color: var(--zpmf-green);
}
.zpmf__total-amount .amount,
.zpmf__total-amount bdi {
font-size: inherit;
font-weight: inherit;
color: inherit;
text-decoration: none;
}
/* ---------------------------------------------------------------------------
* Small screens: the card keeps its 8px border + 4px input borders, so ease
* the 32px gutters on the narrowest phones to stop fields from squishing.
* ------------------------------------------------------------------------- */
@media (max-width: 380px) {
.zpmf__header,
.zpmf__body {
padding: 1.25rem;
}
.zpmf__price {
font-size: 2.75rem;
}
.zpmf__note {
padding: 1rem 1.125rem;
}
}
@media (prefers-reduced-motion: reduce) {
.zpmf__submit {
transition: background-color 0.15s ease;
}
.zpmf__submit:hover,
.zpmf__submit:active {
transform: none;
}
}