#cel-login { margin-top: 1.25em; }

/* v0.3 type scale (audit R4): title 18 / text 15 / labels+messages 14 */
.cel-title { font-size: 18px; font-weight: 700; color: #1d1d1b; margin: 0 0 .8em; }
.cel-sub { color: #1a7f37; font-size: 14px; font-weight: 600; margin: -.4em 0 .9em; }
.cel-back { display: inline-block; background: none; border: none; padding: .35em 0; margin: 0 0 .5em;
	color: #6F4E37; cursor: pointer; font-size: 15px; font-weight: 600; text-decoration: underline; }

/* buttons — ONE dark primary per step (R1); 46-48px touch targets */
.cel-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px;
	padding: .6em 1em; margin: .65em 0; border: 1px solid #001d01; border-radius: 4px;
	background: #001d01; color: #fff; text-align: center; cursor: pointer;
	font-size: 16px; font-weight: 500; line-height: 1.3; transition: opacity .15s; }
.cel-btn, .cel-btn:hover, .cel-btn:focus { text-decoration: none; } /* the theme underlines modal <a>s */
.cel-btn:hover { opacity: .9; color: #fff; }
.cel-btn:disabled { opacity: .55; cursor: default; }
/* secondary: white with the brand border — everything that isn't the step's main action */
.cel-btn-secondary { background: #fff; color: #001d01; }
.cel-btn-secondary:hover { background: #f4f7f4; color: #001d01; opacity: 1; }
.cel-btn-secondary:disabled { opacity: .55; }
/* Google button per Google's own style: white, subtle border */
.cel-btn-google { background: #fff; color: #3c4043; border-color: #dadce0; }
.cel-btn-google:hover { background: #f8f9fa; color: #3c4043; opacity: 1; }
/* Official 4-color Google "G", inlined as a data URI (no external requests). The span
   precedes the text, so in RTL it sits to the RIGHT of the label — Google's guidelines
   allow either side; margin-inline-end keeps the gap correct for RTL. */
.cel-gicon { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-inline-end: .45em; flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") no-repeat center / contain; }
.cel-link { display: inline-block; background: none; border: none; padding: .6em 0; margin-top: .2em;
	color: #6F4E37; text-decoration: underline; cursor: pointer; font-size: 15px; font-weight: 600; }

/* panels */
.cel-panel { margin-top: 1.1em; }
.cel-panel p { font-size: 15px; color: #303030; margin: 0 0 .75em; }
.cel-panel label { display: block; font-size: 14px; font-weight: 600; color: #303030; margin: .9em 0 .35em; }
.cel-panel input { width: 100%; height: 46px; padding: .55em .8em; border: 1px solid #b9b9b9; border-radius: 4px;
	font-size: 16px; color: #303030; background: #fff; } /* 16px+ so iOS never auto-zooms */
.cel-panel input:focus { outline: none; border-color: #001d01; box-shadow: 0 0 0 1px #001d01; }
#cel-code, #cel-offer-code { letter-spacing: .45em; text-align: center; font-size: 22px; font-weight: 600; }
#cel-sent-note { font-weight: 600; margin-bottom: .1em; }
#cel-change-phone { margin: 0 0 .4em; padding-top: 0; }
/* signup: first+last side by side (audit S4a) */
.cel-names { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* v0.4 consent rows — small print, real checkbox sizing, error state tints the
   sentence. v0.4.2: the selectors must OUT-SPECIFY `.cel-panel label` (14px/600/
   block) or the wizard's rows render differently from the injected theme-form
   copies (owner: font mismatch between the two checkboxes) — one look everywhere. */
label.cel-consent, .cel-panel label.cel-consent { display: flex; gap: .55em; align-items: flex-start;
	margin: .8em 0 0; font-size: 14px; line-height: 1.5; color: #555; cursor: pointer; font-weight: 400; }
/* v0.4.3: custom-drawn checkbox — iOS Safari renders NATIVE checkboxes at its
   own size and ignores width/height (owner: boxes unequal on mobile), so draw
   it ourselves; identical on every browser and matches the theme's box style. */
.cel-consent input, .cel-panel .cel-consent input { -webkit-appearance: none; appearance: none;
	width: 20px; height: 20px; min-height: 0; margin: .05em 0 0; padding: 0; flex: none;
	border: 1px solid #001d01; border-radius: 2px; background: #fff; cursor: pointer;
	display: inline-grid; place-content: center; }
.cel-consent input:checked::before { content: "✓"; font-size: 12px; font-weight: 700;
	color: #001d01; line-height: 1; }
.cel-consent input:focus-visible { outline: 2px solid #001d01; outline-offset: 1px; }
.cel-consent a { color: #6F4E37; text-decoration: underline; }
.cel-consent-err, .cel-consent-err a { color: #b3261e; }
/* v0.4.4: theme-pattern injected row (register modal) — theme CSS sizes it; we
   only add the link + error tint */
.cel-consent-t .label-text a { color: #6F4E37; text-decoration: underline; }
.cel-consent-row.cel-consent-err .label-text, .cel-consent-row.cel-consent-err .label-text a { color: #b3261e; }
/* v0.4.4: Flashy's injected opt-in on the my-account register form (13px native
   box under a font-boosted ~25px row) matches our consent style instead */
form.woocommerce-form-register p.form-row:has(input[name="flashy_accept_marketing"]) {
	font-size: 14px; line-height: 1.5; color: #555; -webkit-text-size-adjust: 100%; }
form.woocommerce-form-register p.form-row:has(input[name="flashy_accept_marketing"]) label { font-size: 14px; font-weight: 400; }
form.woocommerce-form-register input[name="flashy_accept_marketing"] {
	-webkit-appearance: none; appearance: none; width: 20px; height: 20px;
	border: 1px solid #001d01; border-radius: 2px; background: #fff; cursor: pointer;
	display: inline-grid; place-content: center; vertical-align: -4px; margin-inline-end: .45em; }
form.woocommerce-form-register input[name="flashy_accept_marketing"]:checked::before {
	content: "✓"; font-size: 12px; font-weight: 700; color: #001d01; line-height: 1; }
/* v0.4.5: ONE checkbox scale everywhere (owner: tiny on mobile, huge on desktop).
   The modal consent rows are sized by the theme in em/rem (24px at phone width,
   ~31px on desktop) — pin BOTH the theme's own row and our cloned row to the
   20px/14px standard. !important: three stylesheets fight over these rows. */
.login-modal .remeber-check .checkbox, .register-modal .remeber-check .checkbox {
	font-size: 14px !important; line-height: 1.5 !important; }
.login-modal .remeber-check .checkbox .fake-input, .register-modal .remeber-check .checkbox .fake-input {
	width: 20px !important; height: 20px !important; }
.login-modal .remeber-check .checkbox .fake-input:before, .register-modal .remeber-check .checkbox .fake-input:before {
	font-size: 11px !important; }

/* v0.4.7 (owner, edit-account): WC's own password fieldset (demands the CURRENT
   password) rendered above our set-password module — one password UI per page.
   Guard on #cel-setpw: privileged users have no module and keep the WC fieldset. */
body:has(#cel-setpw) fieldset:has(#password_current) { display: none; }
/* v0.4.8 (owner): "שם תצוגה" means nothing to a shop customer — hidden for them
   (same guard). The input still submits its stored value, so WC's required
   check passes and the name is preserved. Admins keep the full WC form. */
body:has(#cel-setpw) p:has(> #account_display_name) { display: none; }

/* v0.3 fixed message slot (audit R3): tinted box, reserved height, never moves */
.cel-msg { min-height: 2.5em; font-size: 14px; margin: .6em 0 0; padding: .55em .8em; border-radius: 5px;
	box-sizing: border-box; background: #fbeeed; color: #b3261e; }
.cel-msg:empty { background: transparent; padding: .55em 0; }
.cel-msg.cel-ok { color: #1a7f37; background: #edf6ef; } /* confirmations must not read as errors */

/* v0.2 email-taken options screen */
.cel-taken-head { color: #b3261e; font-weight: 700; font-size: 15px; }
.cel-support { font-size: 14px; color: #555; margin-top: 1em; }
/* v0.2 logged-in my-account blocks (dashboard phone offer / edit-account set-password) */
#cel-offer, #cel-setpw { max-width: 460px; margin: 1.3em 0; padding: 1.1em 1.25em; border: 1px solid #ddd; border-radius: 6px; background: #fafaf7; }
#cel-offer-code-step { margin-top: 1em; }

/* v0.4.10: the inner-banner default-logo hide (v0.3.1/0.3.2) moved OUT of this
   plugin to WPCode snippet 65659 ("Site: hide theme default-logo inner-banner")
   — owner 2026-08-05: a site cosmetic must not depend on the login plugin.
   PROD needs that snippet created too at the easy-login GO. */

/* v0.3.1 (audit S8a): my-account navigation as cards */
body.woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;
	list-style: none; margin: 0 0 1.4em; padding: 0; }
body.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
body.woocommerce-account .woocommerce-MyAccount-navigation li a { display: flex;
	align-items: center; justify-content: center; min-height: 52px; padding: .6em .9em;
	border: 1px solid #ddd; border-radius: 6px; background: #fafaf7; color: #1d1d1b;
	font-size: 15px; font-weight: 600; text-decoration: none; text-align: center; }
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	border-color: #001d01; background: #001d01; color: #fff; }
#cel-dash .cel-title { margin-bottom: .5em; }

/* logged-in nav item (replaces the theme's user-login link — see cel-login.js) */
a.cel-nav-account { font-weight: 600; }

/* inside the theme's header #loginModal */
.login-modal #cel-login { margin-top: .5em; }
/* Flashy popup suppression lives in JS (cel-login.js): it opens a top-layer
   <dialog> in its shadow root, which no document CSS can beat. */
@media (max-width: 767px) {
	.cel-btn { min-height: 48px; }
}