/* Owner-approved login Figma206:14/206:2/206:8 extended to recovery/signup.
   Keep native inputs, IDs, validation and result visibility; no auth changes. */
html:has(.auth-kit-page.active), html:has(.auth-kit-page.active) body,
html:has(body.onboarding-kit) { background:#202224; overscroll-behavior-y:none; }
.auth-kit-page .login-wrap, body.onboarding-kit {
  position:relative; isolation:isolate; overflow-x:clip;
  min-height:100vh; min-height:100svh; min-height:100dvh; box-sizing:border-box;
  background:radial-gradient(ellipse 58.43% 103.88% at 56.74% 50%,#56585b 0%,#202224 100%);
  padding:40px 20px; color:#fff;
}
.auth-kit-scene {
  position:fixed; inset:0; overflow:hidden; pointer-events:none; user-select:none;
  background:radial-gradient(ellipse 58.43% 103.88% at 56.74% 50%,#56585b 0%,#202224 100%);
}
.auth-kit-page .login-wrap::before,.auth-kit-page .login-wrap::after { content:none; }
.auth-kit-page .login-box, .onboarding-kit :is(.ob-card,.ob-setup-card) {
  position:relative; z-index:1;
  --mono-text:#fff; --mono-accent:#dedfe1; --gray4:#fff; --text:#fff; --text-sub:#dedfe1; --text-mute:#dedfe1;
  --gray1:#f5f5f5; --gray2:#d7d8da;
  --btn-bg:#202224; --btn-fg:#fff; --border:rgba(255,255,255,.3);
  background:rgba(138,140,143,.28) !important; color:#fff;
  border:2px solid rgba(138,140,143,.49); border-radius:28px;
  padding:32px !important; backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  box-shadow:none; max-width:480px !important; box-sizing:border-box;
}
.onboarding-kit .ob-setup-card { max-width:1000px !important; }
.auth-kit-page .login-logo-img { content:url('/tmplogo/haccp-selo-logo-dark.png'); width:180px !important; height:40px !important; max-width:100%; object-fit:contain; filter:none; animation:none; }
.auth-kit-page .login-logo-dark-wrap { display:none; }
.onboarding-kit .auth-kit-logo { width:180px; max-width:100%; height:auto; margin-bottom:24px; }
.onboarding-kit .ob-title { color:#fff; font-weight:600; font-size:24px; line-height:34px; letter-spacing:0; margin-bottom:24px; }
.onboarding-kit :is(.ob-agree,.ob-login-box,.ob-next-guide) { --text:#27292b; --text-sub:#696b6e; --text-mute:#696b6e; --mono-text:#27292b; color:#27292b; }
.onboarding-kit .ob-agree :is(label,span,a) { color:#27292b !important; }
.auth-kit-page :is(label,.login-box > div > div), .onboarding-kit :is(.ob-label,.ob-footer,.ob-footer-link,.ob-id-help,.ob-success-desc,.ob-success-title,.ob-success-back) { color:#fff !important; }
.auth-kit-page :is(input:not([type=checkbox]):not([type=radio]),select), .onboarding-kit :is(.ob-input,.setup-input,.setup-select,.setup-field input,.setup-field select,.setup-field textarea) {
  --in-bg:#fff; --in-line:#bcbec0; --gray4:#27292b;
  min-height:44px; padding:10px 14px !important; border:1px solid #bcbec0 !important; border-radius:5px !important;
  background:#fff !important; color:#27292b !important; -webkit-text-fill-color:#27292b;
  font-size:16px !important; box-shadow:none !important; caret-color:#202224; box-sizing:border-box;
}
.auth-kit-page input::placeholder,.onboarding-kit input::placeholder { color:#696b6e !important; opacity:1; }
.auth-kit-page .login-box input { min-width:0; max-width:100%; }
.auth-kit-page .login-box div[style*="flex:1"] { min-width:0; }
#page-signup.auth-kit-page label:has(input[type=checkbox]),#page-signup.auth-kit-page label:has(input[type=radio]) { color:#27292b !important; }
.auth-kit-page button,.onboarding-kit .ob-btn { min-height:44px; border-radius:8px !important; font-size:14px !important; box-shadow:none !important; }
.auth-kit-page button[onclick^=submit],.auth-kit-page #findPwSubmitBtn,.onboarding-kit .ob-btn { background:#202224 !important; color:#fff !important; border:1px solid rgba(255,255,255,.25) !important; }
.auth-kit-page .login-box > div:last-child :is(span,button) { color:#fff !important; }
.auth-kit-page :is(#findIdResultWrap,#findPwResultWrap) > div { background:#fff !important; --mono-text:#27292b; --mono-accent:#696b6e; --gray4:#27292b; }
.auth-kit-page :is(button,input):focus-visible,.onboarding-kit :is(button,input,select):focus-visible { outline:2px solid #fff; outline-offset:3px; }
.onboarding-kit :is(.setup-summary-item,.setup-choice,.setup-note,.setup-pill,.ob-success-actions) { --text:#27292b; --text-sub:#696b6e; --mono-text:#27292b; color:#27292b; }
.onboarding-kit .setup-field label { color:#fff; }
/* Keep dark ink on light inset panels; do not override error/result visibility. */
.auth-kit-page :is(#findIdResultWrap,#findPwResultWrap) > div { color:#27292b !important; }
.auth-kit-page :is(#findIdResultWrap,#findPwResultWrap) > div :is(div,span) { overflow-wrap:anywhere; }
#page-signup.auth-kit-page label:has(input[type=checkbox]) { --mono-text:#27292b; --gray4:#27292b; }
#page-signup.auth-kit-page label:has(input[type=radio]) { background:#fff !important; --gray4:#27292b; }
#page-signup.auth-kit-page label:has(input[type=radio]:checked) { border-color:#27292b !important; }
#page-signup.auth-kit-page button[onclick="checkSignupId()"] { color:#27292b !important; }
.auth-kit-page #findIdResultWrap button[onclick*="page-find-pw"] { border-color:#dedfe1 !important; }
.onboarding-kit :is(.ob-btn,.ob-success-check) { background:#202224; color:#fff; }
.onboarding-kit .ob-id-help { --text:#fff; }
.onboarding-kit :is(.ob-footer-link,.ob-footer-link:hover) { color:#dedfe1; }
.onboarding-kit .ob-btn:hover:not(:disabled) { background:#17191b !important; transform:none; }
.onboarding-kit .ob-field.has-error .ob-input { border-color:#b93e3e !important; }
.onboarding-kit :is(.ob-error-msg,.ob-label .req) { color:#ffc4c4; }
.auth-kit-page :is(input[type=checkbox],input[type=radio]),.onboarding-kit :is(input[type=checkbox],input[type=radio]) { accent-color:#27292b; }
.onboarding-kit :is(a,textarea):focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media(max-width:600px) {
  .auth-kit-page .login-wrap,body.onboarding-kit { padding:24px 16px; }
  .auth-kit-page .login-box,.onboarding-kit :is(.ob-card,.ob-setup-card) { padding:24px !important; border-radius:20px; }
}

/* Payment interruption uses the owner's neutral glass login theme.
   Scoped to the interruption wall and its confirmation, never business dialogs. */
#subscriptionBlock > #paymentBlockScene { display:none; }
#subscriptionBlock.payment-login-kit {
  --gray4:#fff; --mono-text:#fff; --mono-accent:#dedfe1;
  --btn-bg2:#202224; --btn-fg:#fff; --line-10:rgba(255,255,255,.22);
  --line-18:rgba(255,255,255,.3); --sf-line3:#55575a; --danger:#ffc4c4;
  box-sizing:border-box; isolation:isolate; flex-direction:column; align-items:center;
  padding:84px 20px 40px; overflow-x:hidden; overscroll-behavior-y:contain;
  background:#202224 !important; color:#fff !important;
  font-family:var(--font-body); line-height:1.6;
}
#subscriptionBlock.payment-login-kit > #paymentBlockScene { display:block; z-index:-1; }
#subscriptionBlock.payment-login-kit > div:not(#paymentBlockScene) {
  position:relative; flex:none; box-sizing:border-box; width:480px; max-width:100% !important;
  min-height:0 !important; margin:auto !important; padding:32px !important;
  border:2.134px solid rgba(138,140,143,.49); border-radius:28.458px;
  background:rgba(138,140,143,.28); backdrop-filter:blur(8.893px); -webkit-backdrop-filter:blur(8.893px);
  box-shadow:none; text-align:left !important; align-items:stretch !important;
}
#subscriptionBlock.payment-login-kit > div:not(#paymentBlockScene) > div:first-child { margin-bottom:28px !important; }
#subscriptionBlock.payment-login-kit img[alt="haccp selo"] {
  content:url('/tmplogo/haccp-selo-logo-dark.png'); width:200px !important; max-width:100%; height:auto; filter:none;
}
#subscriptionBlock.payment-login-kit > div:not(#paymentBlockScene) > div:nth-child(2) { display:none; }
#subscriptionBlock.payment-login-kit #subBlockTitle { font-size:24px !important; font-weight:700 !important; line-height:1.4; letter-spacing:0 !important; word-break:keep-all; }
#subscriptionBlock.payment-login-kit #subBlockMsg { font-size:14px !important; width:100%; max-width:100% !important; overflow-wrap:anywhere; word-break:keep-all; }
#subscriptionBlock.payment-login-kit #renewalPaymentMessage { font-size:13px; color:#fff; }
#subscriptionBlock.payment-login-kit #subBlockBtnWrap { display:grid; gap:10px; margin-top:24px !important; width:100%; }
#subscriptionBlock.payment-login-kit button {
  box-sizing:border-box; min-height:44px; padding:10px 16px !important; margin:0 !important;
  border:0 !important; border-radius:7.115px !important; background:#202224 !important; color:#fff !important;
  font:inherit; font-size:16px !important; font-weight:700 !important; line-height:1.5;
  box-shadow:none !important; cursor:pointer; transition:background-color 140ms ease;
}
#subscriptionBlock.payment-login-kit button:hover:not(:disabled) { background:#17191b !important; }
#subscriptionBlock.payment-login-kit button:active:not(:disabled) { background:#101112 !important; }
#subscriptionBlock.payment-login-kit button:disabled { opacity:.6; cursor:default; }
#subscriptionBlock.payment-login-kit #subBlockBtnWrap button + button,
#subscriptionBlock.payment-login-kit > button {
  background:rgba(32,34,36,.3) !important; border:1px solid rgba(222,223,225,.6) !important; font-size:14px !important; font-weight:500 !important;
}
#subscriptionBlock.payment-login-kit > button { top:20px !important; right:20px !important; }
#subscriptionBlock.payment-login-kit #subBlockBtnWrap + div { display:none; }
#subscriptionBlock.payment-login-kit > div:not(#paymentBlockScene) > div:last-child {
  margin-top:28px; padding-top:20px !important; border-color:rgba(255,255,255,.22) !important; color:#dedfe1 !important; text-align:center;
}
/* Keep initial-registration receipt panels readable for interrupted first payments. */
#subscriptionBlock.payment-login-kit #subBlockMsg > div[style*="background:var(--white)"] {
  background:#fff !important;
  --gray4:#27292b; --mono-text:#444; --mono-accent:#696b6e; --line-10:rgba(0,0,0,.1); --line-18:rgba(0,0,0,.18);
}
body:has(#subscriptionBlock.payment-login-kit[style*="display: flex"]) #subConfirmModal {
  --gray4:#fff; --mono-accent:#dedfe1;
  z-index:100000 !important; overflow-y:auto;
}
body:has(#subscriptionBlock.payment-login-kit[style*="display: flex"]) #subConfirmModal > div {
  background:rgba(77,79,82,.96) !important; border:2px solid rgba(138,140,143,.49) !important;
  border-radius:28px !important; box-shadow:none !important; animation:none !important;
}
body:has(#subscriptionBlock.payment-login-kit[style*="display: flex"]) #subConfirmModal button {
  min-height:44px; border-radius:7.115px !important; background:#202224 !important; color:#fff !important;
  border:1px solid rgba(222,223,225,.6) !important; font-size:14px !important;
}
body:has(#subscriptionBlock.payment-login-kit[style*="display: flex"]) #subConfirmModal button:first-child { background:transparent !important; }
#subscriptionBlock.payment-login-kit button:focus-visible,
body:has(#subscriptionBlock.payment-login-kit[style*="display: flex"]) #subConfirmModal button:focus-visible { outline:2px solid #fff !important; outline-offset:3px; }
@media(max-width:480px) {
  #subscriptionBlock.payment-login-kit { padding:80px 16px 24px; }
  #subscriptionBlock.payment-login-kit > div:not(#paymentBlockScene) { padding:28px 24px !important; }
  #subscriptionBlock.payment-login-kit > button { top:16px !important; right:16px !important; }
}
@media(prefers-reduced-motion:reduce) {
  #subscriptionBlock.payment-login-kit button { transition:none; }
}