/* FarmNeed mobile sign-in (OTP) — sheet on phones, centred box on computers.
 * Everything is scoped to .fn-login-*; strong selectors guard against broad theme button/svg/input rules. */

/* ---------- Sheet ---------- */
html.fn-login-is-open,html.fn-login-is-open body{overflow:hidden!important;overscroll-behavior:none}
html body .fn-login-dialog{position:fixed;inset:0;margin:auto;width:min(440px,calc(100% - 40px));max-width:440px;height:fit-content;max-height:calc(var(--fn-login-viewport,100dvh) - 40px);padding:0;border:0;border-radius:24px;overflow:auto;overscroll-behavior:contain;background:#fffefa;color:#182b23;box-shadow:0 28px 90px rgba(9,45,41,.28)}
html body .fn-login-dialog:not([open]){display:none!important}
html body .fn-login-dialog::backdrop{background:rgba(13,35,28,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
html body .fn-login-dialog[open]{animation:fn-login-in .22s ease-out}
@keyframes fn-login-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Panel ---------- */
html body .fn-login-panel{box-sizing:border-box;width:100%;max-width:440px;margin:0 auto 24px;padding:24px 26px 22px;border:1px solid #e2e8e1;border-radius:24px;background:#fffefa;box-shadow:0 12px 40px rgba(21,60,35,.06);color:#182b23;font-family:inherit;text-align:left}
html body .fn-login-dialog .fn-login-panel{margin:0;max-width:none;border:0;border-radius:0;box-shadow:none}
.fn-login-panel *{box-sizing:border-box}
html body .fn-login-panel [hidden]{display:none!important}
.fn-login-panel .fn-login-handle{display:none}
.fn-login-panel .fn-login-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.fn-login-panel .fn-login-brand{display:flex;align-items:center;min-height:40px}
html body .fn-login-panel .fn-login-logo{display:block;width:124px!important;max-width:100%;height:auto!important;max-height:42px;object-fit:contain}
.fn-login-wordmark{font-size:24px;font-weight:800;color:#005440;letter-spacing:-1px}.fn-login-wordmark span{color:#f58a00}
html body .fn-login-panel button.fn-login-close{display:grid;place-items:center;width:44px;height:44px;min-height:44px;margin:-6px -8px 0 0;padding:0;border:0!important;border-radius:50%;background:transparent!important;box-shadow:none!important;color:#3d4842!important;cursor:pointer}
html body .fn-login-panel button.fn-login-close:hover{background:#edf3ed!important}
html body .fn-login-panel button.fn-login-close svg{display:block!important;width:22px!important;height:22px!important;fill:none!important;stroke:currentColor!important;stroke-width:2;stroke-linecap:round}

html body .fn-login-panel h2#fn-login-title{margin:0 0 6px!important;padding:0!important;font-family:inherit;font-size:26px!important;font-weight:750!important;line-height:1.18!important;letter-spacing:-.035em!important;color:#17281f!important;outline:none}
html body .fn-login-panel .fn-otp-intro{margin:0 0 16px!important;font-size:15px!important;line-height:1.5!important;color:#5f6b64!important}
html body .fn-login-panel .fn-login-note,html body .fn-login-panel .fn-otp-notice{margin:0 0 14px!important;padding:10px 12px!important;border-radius:10px;background:#fff3dc;color:#7a5200!important;font-size:13px!important;line-height:1.45!important}

/* Benefits */
html body .fn-login-panel .fn-login-perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 18px!important;padding:0!important;list-style:none!important}
html body .fn-login-panel .fn-login-perks li{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0!important;padding:10px 6px!important;border-radius:12px;background:#eef4ea;color:#2c4a35;font-size:12px;font-weight:600;line-height:1.3;text-align:center;list-style:none!important}
html body .fn-login-panel .fn-login-perks li::before,html body .fn-login-panel .fn-login-perks li::marker{content:none!important}
html body .fn-login-panel .fn-login-perks svg{display:block!important;width:22px!important;height:22px!important;fill:none!important;stroke:#00634b!important;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fn-login-panel.fn-login-code-step .fn-login-perks,.fn-login-panel.fn-login-code-step .fn-login-dealer{display:none!important}

/* Fields */
html body .fn-login-panel label{display:block;margin:0 0 7px!important;font-size:14px!important;font-weight:650!important;line-height:1.4!important;color:#23352c!important}
html body .fn-login-panel .fn-phone-row{display:flex!important;align-items:stretch;min-height:52px;border:1px solid #cfdacf!important;border-radius:12px!important;background:#fff!important;overflow:hidden}
html body .fn-login-panel .fn-phone-row>span{display:flex;align-items:center;justify-content:center;flex:0 0 58px;padding:0 10px!important;border-right:1px solid #dce5d9;background:#eef4eb;color:#223b2d;font-size:16px!important;font-weight:650}
html body .fn-login-panel .fn-phone-row input[type=tel]{flex:1;width:100%!important;min-width:0!important;min-height:52px!important;margin:0!important;padding:12px 14px!important;border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;color:#1d3326!important;font-family:inherit;font-size:17px!important;letter-spacing:.04em}
html body .fn-login-panel .fn-phone-row:focus-within{border-color:#005440!important;box-shadow:0 0 0 3px rgba(0,84,64,.12)!important}
html body .fn-login-panel input::placeholder{color:#89938b;opacity:1;letter-spacing:0}
html body .fn-login-panel input:focus-visible{outline:none!important}
html body .fn-login-panel .fn-otp-code-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
html body .fn-login-panel .fn-otp-code-heading label{margin:0!important}
html body .fn-login-panel input[name=code]{display:block;width:100%!important;min-height:56px!important;margin:0!important;padding:10px 14px!important;border:1px solid #cfdacf!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important;color:#17281f!important;font-family:inherit;font-size:26px!important;font-weight:650;letter-spacing:.5em!important;text-indent:.5em;text-align:center;font-variant-numeric:tabular-nums}
html body .fn-login-panel input[name=code]::placeholder{letter-spacing:.5em;color:#b3bcb4}
html body .fn-login-panel input[name=code]:focus{border-color:#005440!important;box-shadow:0 0 0 3px rgba(0,84,64,.12)!important}
html body .fn-login-panel input[readonly]{background:#f5f7f3!important;color:#56665b!important}
html body .fn-login-panel .fn-otp-meta{display:flex;justify-content:space-between;gap:8px;margin:8px 0 0;font-size:12px;color:#657469;font-variant-numeric:tabular-nums}

/* Buttons and links */
html body .fn-login-panel button.fn-otp-submit,html body .fn-login-launcher button.fn-login-open-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px!important;margin:16px 0 0!important;padding:12px 18px!important;border:0!important;border-radius:12px!important;background:#005440!important;background-image:none!important;box-shadow:0 4px 12px rgba(0,84,64,.12)!important;color:#fff!important;font-family:inherit;font-size:17px!important;font-weight:700!important;line-height:1.3!important;cursor:pointer;transition:background .15s}
html body .fn-login-panel button.fn-otp-submit:hover,html body .fn-login-launcher button.fn-login-open-button:hover{background:#003f31!important}
html body .fn-login-panel button.fn-otp-submit:disabled{background:#9db6ab!important;box-shadow:none!important;cursor:default}
html body .fn-login-panel button.fn-change,html body .fn-login-panel button.fn-resend{min-height:40px;margin:0;padding:6px 0!important;border:0!important;background:none!important;box-shadow:none!important;color:#005440!important;font-family:inherit;font-size:14px;font-weight:650;cursor:pointer}
html body .fn-login-panel button.fn-change{text-decoration:underline;text-underline-offset:3px}
html body .fn-login-panel button.fn-resend:disabled{color:#5d7b6c!important;cursor:default}
html body .fn-login-panel .fn-otp-retry{margin:8px 0 0;text-align:center;font-size:13px;color:#607168}
html body .fn-login-panel .fn-otp-status{margin:10px 0 0!important;font-size:13px!important;line-height:1.5!important}
html body .fn-login-panel .fn-otp-status:empty{display:none!important}
.fn-login-panel .fn-otp-status[data-kind=error]{color:#a32923}.fn-login-panel .fn-otp-status[data-kind=warning]{color:#7a5700}.fn-login-panel .fn-otp-status[data-kind=success]{color:#08704c}
html body .fn-login-panel .fn-otp-refresh{display:inline-block;margin-top:6px;font-size:13px;color:#005440}

html body .fn-login-panel .fn-login-security{display:flex;align-items:flex-start;justify-content:center;gap:7px;margin:14px 0 0!important;font-size:12.5px!important;line-height:1.45!important;color:#5f6b64!important;text-align:left}
html body .fn-login-panel .fn-login-security svg{display:block!important;flex:0 0 15px;width:15px!important;height:17px!important;margin-top:1px;fill:none!important;stroke:currentColor!important;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html body .fn-login-panel .fn-login-help{display:grid;gap:4px;margin:16px 0 0;padding:14px 0 0;border-top:1px solid #e3e9e1}
html body .fn-login-panel a.fn-login-wa{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 14px;border:1px solid #bfe3cb;border-radius:12px;background:#effaf2;color:#0e7a3c!important;font-size:15px;font-weight:700;text-decoration:none!important}
html body .fn-login-panel a.fn-login-wa svg{display:block!important;width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html body .fn-login-panel a.fn-login-track{display:flex;align-items:center;justify-content:center;min-height:42px;color:#005440!important;font-size:14px;font-weight:650;text-decoration:underline;text-underline-offset:3px}
html body .fn-login-panel .fn-login-dealer{margin:4px 0 0!important;font-size:12.5px!important;line-height:1.45!important;color:#6b766f!important;text-align:center}
html body .fn-login-panel a:focus-visible,html body .fn-login-panel button:focus-visible,html body .fn-login-launcher a:focus-visible,html body .fn-login-launcher button:focus-visible{outline:3px solid #137c60!important;outline-offset:2px!important}

/* Remembered number, name step */
html body .fn-login-panel button.fn-other-number{display:block;margin:6px 0 0 auto;min-height:36px;padding:4px 0!important;border:0!important;background:none!important;box-shadow:none!important;color:#005440!important;font-family:inherit;font-size:13.5px;font-weight:650;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
html body .fn-login-panel input[name=name]{display:block;width:100%!important;min-height:52px!important;margin:0!important;padding:12px 14px!important;border:1px solid #cfdacf!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important;color:#17281f!important;font-family:inherit;font-size:17px!important}
html body .fn-login-panel input[name=name]:focus{border-color:#005440!important;box-shadow:0 0 0 3px rgba(0,84,64,.12)!important}
html body .fn-login-panel button.fn-name-skip{display:block;width:100%;min-height:44px;margin:6px 0 0;padding:8px!important;border:0!important;background:none!important;box-shadow:none!important;color:#4f6457!important;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
html body .fn-login-panel .fn-name-status{margin:8px 0 0!important;font-size:13px!important}
html body .fn-login-panel .fn-name-status:empty{display:none!important}
.fn-login-panel .fn-name-status[data-kind=error]{color:#a32923}
.fn-login-panel.fn-login-name-step .fn-login-perks,.fn-login-panel.fn-login-name-step .fn-login-dealer,.fn-login-panel.fn-login-name-step .fn-login-note,.fn-login-panel.fn-login-name-step .fn-login-security,.fn-login-panel.fn-login-name-step .fn-login-help{display:none!important}

/* ---------- My Account page behind the sheet ---------- */
html body .fn-login-launcher{max-width:440px;margin:8px auto 40px;padding:28px 24px;border:1px solid #e2e8df;border-radius:22px;background:#fffefa;box-shadow:0 12px 40px rgba(21,60,35,.05);text-align:center}
html body .fn-login-launcher[hidden]{display:none!important}
.fn-login-launcher .fn-login-eyebrow{font-size:11px;font-weight:750;letter-spacing:.12em;color:#005440}
html body .fn-login-launcher h2{margin:10px 0 6px!important;font-size:24px!important;line-height:1.2!important;letter-spacing:-.03em;color:#23352c!important}
html body .fn-login-launcher p{margin:0!important;font-size:15px;line-height:1.55;color:#5f6b64}
html body .fn-login-launcher .fn-login-launcher-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:16px!important;font-size:14px}
html body .fn-login-launcher .fn-login-launcher-links a{color:#005440!important;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- Phones: bottom sheet ---------- */
@media(max-width:767px){
 html body .fn-login-dialog{inset:auto 0 var(--fn-login-keyboard,0px) 0;margin:0;width:100%;max-width:100%;max-height:calc(var(--fn-login-viewport,100dvh) - 16px);border-radius:22px 22px 0 0}
 html body .fn-login-dialog[open]{animation:fn-login-up .24s ease-out}
 html body .fn-login-dialog .fn-login-panel{padding:8px 20px calc(16px + env(safe-area-inset-bottom))}
 .fn-login-panel .fn-login-handle{display:block;width:40px;height:4px;margin:0 auto 10px;border-radius:4px;background:#d6d9d2}
 .fn-login-panel .fn-login-topbar{margin-bottom:10px}
 html body .fn-login-panel .fn-login-logo{width:112px!important;max-height:38px}
 html body .fn-login-panel h2#fn-login-title{font-size:23px!important}
 html body .fn-login-panel .fn-otp-intro{font-size:14px!important;margin-bottom:14px!important}
 html body .fn-login-panel .fn-login-perks{gap:6px;margin-bottom:16px!important}
 html body .fn-login-panel .fn-login-perks li{padding:9px 4px!important;font-size:11.5px}
 html body .fn-login-panel .fn-login-help{margin-top:14px;padding-top:12px}
 /* Logged-out My Account page: smaller banner so the sign-in box is visible at once. */
 body.woocommerce-account .commerce-hero{padding:14px 0!important}
 body.woocommerce-account .commerce-hero .commerce-breadcrumb,body.woocommerce-account .commerce-hero .eyebrow,body.woocommerce-account .commerce-hero-copy>p{display:none!important}
 body.woocommerce-account .commerce-hero h1{margin:0!important;font-size:24px!important}
 body.woocommerce-account .commerce-shell{padding-top:16px!important}
}
@keyframes fn-login-up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media(max-width:360px){html body .fn-login-dialog .fn-login-panel{padding-left:16px;padding-right:16px}html body .fn-login-panel .fn-login-perks li{font-size:10.5px}}
@media(prefers-reduced-motion:reduce){html body .fn-login-dialog[open]{animation:none}.fn-login-panel *{transition:none!important}}