/* The forms the plugins render, in the site's own form style (base.css .field, .btn), and the generic page wrapper.
   MemberPress (signup, login, account, checkout) and MemberPress Courses (outline, lessons). The contact form and the
   footer box are the theme's own (inc/forms.php) and use base.css's .field and .btn styles.
   Written by hand; the selectors are the plugins' own classes. Loaded after the page stylesheets so it wins. */

/* ---- generic wrapper (page.php, MemberPress pages, Privacy, Terms) ---- */
.generic .wrap{max-width:820px}
.entry{font-size:1.05rem;line-height:1.6;color:var(--ink-2);display:grid;gap:14px}
.entry h2,.entry h3,.entry h4{color:var(--ink);margin-top:14px}
.entry h2{font-size:1.5rem}.entry h3{font-size:1.2rem}.entry h4{font-size:1.05rem}
.entry p{margin:0}
.entry a{font-weight:600}
.entry ul,.entry ol{margin:0;padding-left:22px;display:grid;gap:6px}
.entry img{max-width:100%;height:auto;border-radius:18px}
.entry table{width:100%;border-collapse:collapse;font-size:.95rem}
.entry th,.entry td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.entry th{color:var(--ink);font-weight:600}
.entry .wp-block-button__link,.entry .button,.entry button,.entry input[type=submit]{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:8px 24px;border-radius:999px;font:600 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;border:1.5px solid transparent;background:var(--ink);color:#fff;transition:transform .7s var(--ease),background-color .7s var(--ease)}
.entry .button:hover,.entry button:hover,.entry input[type=submit]:hover{background:var(--navy)}
.entry .button:active,.entry button:active,.entry input[type=submit]:active{transform:scale(.98)}

/* ---- fields: MemberPress inputs look like the designed ones ---- */
.crem-mp input[type=text],.crem-mp input[type=email],.crem-mp input[type=password],.crem-mp input[type=tel],.crem-mp input[type=url],.crem-mp input[type=number],.crem-mp select{min-height:52px;padding:0 16px;border:1px solid rgba(11,31,68,.2);border-radius:999px;font:400 1.02rem var(--sans);color:var(--ink);background:#fff;width:100%;max-width:none;box-sizing:border-box;box-shadow:none;transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.crem-mp textarea{min-height:150px;padding:14px 18px;border:1px solid rgba(11,31,68,.2);border-radius:22px;font:400 1.02rem var(--sans);color:var(--ink);background:#fff;width:100%;box-sizing:border-box;resize:vertical;transition:border-color .5s var(--ease)}
.crem-mp input:hover,.crem-mp textarea:hover{border-color:var(--ink)}
.crem-mp input:focus-visible,.crem-mp textarea:focus-visible{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.crem-mp label{font-weight:600;font-size:.92rem;color:var(--ink);display:block;margin:0 0 4px}
.crem-mp .mp-form-label{margin:0 0 4px}
.crem-mp .mp-form-row{margin:0 0 14px;display:grid;gap:4px}
.crem-mp .mepr-form-input{margin:0}
.crem-mp input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;border:1.5px solid rgba(11,31,68,.3);border-radius:7px;background:#fff;display:inline-grid;place-items:center;margin:0 10px 0 0;cursor:pointer;vertical-align:middle;flex:none;transition:background-color .5s var(--ease),border-color .5s var(--ease)}
.crem-mp input[type=checkbox]::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0) translateY(-1px);transition:transform .5s var(--ease)}
.crem-mp input[type=checkbox]:checked{background:var(--ink);border-color:var(--ink)}
.crem-mp input[type=checkbox]:checked::after{transform:rotate(-45deg) scale(1) translateY(-1px)}
.crem-mp label:has(> input[type=checkbox]){display:flex;align-items:center;gap:0;font-weight:500;min-height:44px;cursor:pointer}
.crem-mp .mp-form-row.mepr_bool label,.crem-mp .mp-form-row .mepr-checkbox-field label{font-weight:500}

/* Written errors under the field */
.crem-mp .cc-error{font-size:.86rem;color:#b42318;font-weight:500;margin:4px 0 0;background:none;border:0;padding:0}
/* Hidden until MemberPress's own script shows them (inline style) for a field that is actually wrong; its stylesheet's
   rule keys on .mp_wrapper, which our forms do not always carry, so they showed on a blank form */
.crem-mp .cc-error,.crem-mp .mepr-form-has-errors,.crem-mp .cc-success{display:none}
/* Field messages the Stripe checkout adds after a request (.mepr-validation-error) are real: show them */
.crem-mp .mepr-validation-error{display:block;font-size:.86rem;color:#b42318;font-weight:500;margin:4px 0 0}
.crem-mp .mepr-form-has-errors{color:#b42318;font-size:.92rem;font-weight:500;margin:10px 0 0}
/* The squashed empty pill under the password box was the hidden confirmation's leftover; hide its whole row */
.crem-mp .mp-form-row.mepr_password_confirm{display:none!important}
.crem-mp .mepr_error,.crem-mp .mepr-form-error{display:block;font-size:.86rem;color:#b42318;font-weight:500;margin:4px 0 0;background:none;border:0;padding:0}
.crem-mp .mepr_error ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.crem-mp .mepr_error{padding:12px 16px;border:1px solid rgba(180,35,24,.3);border-radius:18px;margin:0 0 14px;background:#fff5f4}
.crem-mp .mepr-signup-form .invalid{border-color:#b42318}
/* MemberPress's own stylesheet (ui/theme.css, loaded on every page) paints its error and saved boxes and a wrong field with !important:
   bright pink, bright green, a red field. The site's softer versions answer in kind, one class more specific. */
.crem-mp .mepr_error{background:#fff5f4!important;border:1px solid rgba(180,35,24,.3)!important;border-radius:18px;padding:12px 16px!important;margin-bottom:14px!important}
.crem-mp .mepr_error ul li{color:#b42318}
.crem-mp .mepr-form input.invalid,.crem-mp .mepr-form select.invalid,.crem-mp .mepr-form textarea.invalid{border:1.5px solid #b42318!important;background-color:#fff!important}
.crem-mp .mepr-top-error{color:#b42318;font-size:.92rem;margin:0 0 14px}

/* Buttons: MemberPress's submit becomes the site's ink pill */
.crem-mp input[type=submit],.crem-mp button[type=submit],.crem-mp .mepr-submit,.crem-mp .mepr-share-button{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:54px;padding:8px 24px;border-radius:999px;font:600 1rem/1.2 var(--sans);color:#fff;background:var(--ink);border:1.5px solid transparent;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 16px 36px -20px rgba(11,31,68,.6);text-shadow:none;transition:transform .7s var(--ease),background-color .7s var(--ease),box-shadow .7s var(--ease);margin:4px 0 0}
.crem-mp input[type=submit]:hover,.crem-mp .mepr-submit:hover{background:var(--navy)}
.crem-mp input[type=submit]:active,.crem-mp .mepr-submit:active{transform:scale(.98)}
.crem-mp .busy{opacity:.8;cursor:progress}
.crem-mp .mepr-loading-gif,.crem-mp .mepr_spacer{display:none}
.crem-mp .mp_wrapper,.crem-mp form{margin:0;padding:0;background:none;border:0;max-width:none;width:100%}
.crem-mp .mp-form-row.mepr_first_name,.crem-mp .mp-form-row.mepr_last_name{display:grid}
.crem-mp .mepr-signup-form{display:grid;grid-template-columns:1fr 1fr;column-gap:10px}
.crem-mp .mepr-signup-form > *{grid-column:1 / -1}
.crem-mp .mepr-signup-form > .mp-form-row.mepr_first_name{grid-column:1}
.crem-mp .mepr-signup-form > .mp-form-row.mepr_last_name{grid-column:2}
.crem-mp .mepr-signup-form .mepr_password_confirm{display:none}   /* one password box (owner decision); MemberPress keeps the field in the markup only if its setting is on */
.crem-mp .pw{position:relative}
.crem-mp .pw input{padding-right:76px}
.crem-mp .pw button{position:absolute;right:5px;top:5px;min-height:42px;min-width:56px;border:0;background:var(--shell);font:600 .86rem var(--sans);color:var(--ink);cursor:pointer;border-radius:999px;display:none;align-items:center;justify-content:center;line-height:1;width:auto;padding:0 12px;margin:0;box-shadow:none}
.crem-mp .pw button:hover{background:var(--cream-2)}

/* Price and plan lines MemberPress prints on a checkout */
.crem-mp .mepr-payment-method-label,.crem-mp .mepr-payment-methods-wrapper{font-size:.95rem}
.crem-mp .mepr_price,.crem-mp .mepr-price-row{font-weight:600;color:var(--ink)}
.crem-mp .mepr-checkout-terms,.crem-mp .mepr-privacy-policy{font-size:.86rem;color:var(--ink-2)}
.crem-mp .mp-form-row .mepr-form-input[type=checkbox]{width:22px}

/* Login: the actions under MemberPress's form */
.crem-mp .mepr-login-actions{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.92rem;margin-top:10px}
.crem-mp .mepr-login-actions a,.crem-mp #mepr_loginform + div a{font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.crem-mp .mp_login_form .mp-form-row label[for=rememberme]{display:flex;align-items:center;font-weight:500;min-height:44px;cursor:pointer}
.crem-mp .mp_login_form .submit{margin:0}
.crem-mp .mepr-forgot-password-form,.crem-mp .mepr-reset-password-form{display:grid;gap:14px}

/* Account page: assets/css/account.css (page-account.php). Any other MemberPress table keeps this plain look */
.crem-mp .mp_wrapper table{width:100%;border-collapse:collapse;font-size:.92rem}
.crem-mp .mp_wrapper table th,.crem-mp .mp_wrapper table td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}

/* MemberPress Courses in theme mode: the outline and a lesson inside the generic wrapper */
.entry .mpcs-sections,.entry .mpcs-lessons{list-style:none;padding:0}
.entry .mpcs-section{border:1px solid var(--line);border-radius:18px;background:#fff;padding:14px 16px;margin:0 0 10px}
.entry .mpcs-lesson-link,.entry .mpcs-lesson a{display:flex;align-items:center;min-height:44px;text-decoration:none}
.entry .mpcs-progress-bar{border-radius:999px;overflow:hidden}

/* Turnstile sits as the plugin places it */
.crem-mp .cf-turnstile{margin:4px 0}

/* The one optional box on the contact form (and any checkbox row in a designed form) */
.form .remember{display:flex;gap:10px;align-items:center;font-size:.92rem;font-weight:500;cursor:pointer;min-height:44px}
.form .consent-line{display:block;font-size:.82rem;color:var(--ink-2);margin:-6px 0 4px}
.form .consent-line a{font-weight:600}

/* Backstop only: the paid checkouts have the opt-out box cut out on the server (inc/checkout.php); this hides it if the markup ever differs */
.crem-checkout-paid .mp-form-row:has(input[name^="mepr_just_the_materials"]){display:none}

/* ---- one show-password control: ours. MemberPress's eye button is removed on the server (inc/functions: crem_strip_pw_buttons);
   this is the safety net, plus the browsers' own reveal icon ---- */
.crem-mp button.mp-hide-pw{display:none!important}
.crem-mp div.mp-hide-pw{display:block;position:static}
.crem-mp input[type=password]::-ms-reveal,.crem-mp input[type=password]::-ms-clear{display:none}
.crem-mp input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;pointer-events:none;position:absolute;right:0}

/* ---- sign in and reset: the page has its own heading, so MemberPress's h3 above its form goes; its error box is ours ---- */
.crem-login .mp_wrapper:has(#mepr_forgot_password_form) > h3,.crem-login .mp_wrapper:has(#mepr_reset_password_form) > h3{display:none}
.crem-login .mepr_password_reset_requested h3{font-size:1.2rem;margin:0 0 6px}
.crem-login .mepr_pro_error,.crem-mp .mepr_pro_error{padding:12px 16px;border:1px solid rgba(180,35,24,.3);border-radius:18px;margin:0 0 14px;background:#fff5f4;color:#b42318;font-size:.92rem;font-weight:500}
.crem-mp .mepr_pro_error svg{display:none}
.crem-mp .mepr_pro_error ul{margin:0;padding:0;list-style:none}
.crem-mp .mepr_error a,.crem-mp .mepr_pro_error a{color:inherit;text-decoration:underline;font-weight:600}
.crem-reset-bad p{margin:0 0 4px;font-size:.92rem}
.crem-reset-bad p:last-child{margin:0;font-weight:400}
.crem-login .mepr-login-actions{margin-top:6px}

/* ---- the free signup: the email sentence and the one opt-out box sit first; MemberPress's "Price: Free" line goes ---- */
.crem-signup .mp-form-row.mepr_price{display:none}
.crem-signup .signup-emails{margin:0 0 6px;font-size:.9rem}
.crem-signup .mepr-signup-form > .social{margin:6px 0 0}
.crem-signup .mepr-signup-form > .or{margin:10px 0 14px}
.crem-signup .mp-form-row:has(input[name="mepr_just_the_materials"]){margin:0 0 4px}

/* ---- a checkout error: one plain message beside the pay button instead of three stacked (site.js builds it) ---- */
.crem-pay-error{margin:0 0 12px;padding:12px 16px;border:1px solid rgba(180,35,24,.3);border-radius:18px;background:#fff5f4;color:#b42318;font-size:.94rem;font-weight:500;line-height:1.4}
.crem-pay-error[hidden]{display:none}
.crem-pay-on .mepr-form-has-errors{display:none!important}
.crem-pay-on .mepr-top-error,.crem-pay-on .mepr-stripe-card-errors{display:none!important}
.crem-field-msg{display:block;font-size:.86rem;color:#b42318;font-weight:500;margin:4px 0 0}

/* ---- a member who already owns the membership (replaces MemberPress's "You have already subscribed...") ---- */
.crem-owned{display:grid;gap:14px;justify-items:start;padding:18px;border:1px solid var(--line);border-radius:22px;background:#fff}
.crem-owned p{margin:0;font-size:1.05rem;color:var(--ink);font-weight:600}

/* ---- a lesson the visitor may not open: the panel and the padlock on the outline ---- */
/* a long page heading (a lesson name followed by "is part of the Modelling Programme") steps down so it is not six lines on a phone */
.top h1.h1-long{font-size:clamp(1.55rem,3.2vw + 1rem,2.6rem);max-width:26ch;line-height:1.08}

/* ---- the order summary above the checkout form (inc/checkout.php, crem_checkout_summary_html) ----
   On a phone: the card, then the form. From 1000px: the form on the left, the card on the right and kept in view as the page scrolls. */
.crem-co{display:grid;gap:18px;min-width:0}
.crem-co-main{min-width:0}
.crem-summary{padding:20px 18px 18px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 18px 40px -30px rgba(11,31,68,.35);display:grid;gap:12px;align-content:start;color:var(--ink-2);font-size:.96rem;line-height:1.5}
.crem-summary h2{margin:0;font:var(--dw) 1.3rem/1.15 var(--display);letter-spacing:var(--dtrack);color:var(--ink)}
.crem-summary p{margin:0}
.crem-summary-line{color:var(--ink)}
.crem-summary .crem-ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.crem-summary .crem-ticks li{position:relative;padding-left:30px}
.crem-ticks li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11.5' fill='%23e8f0fc'/%3E%3Cpath d='M7 12.5l3.4 3.4L17 9' fill='none' stroke='%231f65cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px 20px no-repeat}
.crem-summary-not{font-size:.88rem;color:var(--ink-2)}
.crem-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line);color:var(--ink);font-weight:600}
.crem-total strong{font:var(--dw) 1.7rem/1 var(--display);letter-spacing:var(--dtrack)}
.crem-klarna{font-size:.9rem;margin-top:-4px;text-wrap:pretty}
.crem-talk{font-size:.92rem}
.crem-talk a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink);touch-action:manipulation;transition:transform .5s var(--ease),color .5s var(--ease)}
.crem-talk a:hover{color:var(--blue)}
.crem-talk a:active{transform:scale(.97)}
.crem-talk a:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
/* the free-materials style hides MemberPress's own Price row only where we have put the summary instead */
.crem-has-summary .mp-form-row.mepr_price{display:none}
@media (prefers-reduced-motion:no-preference){
	.crem-summary{animation:crem-rise .8s var(--ease) both}
	.crem-ticks li{animation:crem-rise .7s var(--ease) both;animation-delay:calc(.12s + var(--i,0) * 60ms)}
	@keyframes crem-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
@media (min-width:1000px){
	.crem-has-summary .generic .wrap,.crem-has-summary .top .wrap{max-width:1040px}
	.crem-co{grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
	.crem-co .crem-summary{grid-column:2;grid-row:1;position:sticky;top:112px;padding:24px 22px 20px}
	.crem-co .crem-co-main{grid-column:1;grid-row:1}
}