:root{font-family:"Segoe UI",Arial,sans-serif;color:#172b4d;background:#eef3f9;font-synthesis:none;--blue:#2164dc;--muted:#738198}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:36px}button,input{font:inherit}a{color:inherit}.login-shell{width:min(1100px,100%);min-height:760px;display:grid;grid-template-columns:1fr 1fr;background:white;border:1px solid #e3eaf2;border-radius:26px;overflow:hidden;box-shadow:0 24px 75px #1b365b12}.welcome{position:relative;isolation:isolate;overflow:hidden;color:white;background:linear-gradient(145deg,#103777,#154e9c 65%,#2073c4);padding:44px;display:flex;flex-direction:column;justify-content:space-between}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;width:fit-content;font-size:27px;font-weight:700;letter-spacing:-1px}.brand small{display:block;font-size:12px;letter-spacing:2.7px;font-weight:500;margin-top:4px;color:#c1d6f4}.brand-mark{position:relative;font-size:57px;line-height:58px;font-weight:800;color:white;letter-spacing:-5px;width:42px}.brand-mark span{position:absolute;bottom:0;left:0;width:40px;height:8px;border-bottom:5px solid #ffcf4f;border-radius:0 0 80% 80%;transform:rotate(-10deg)}.welcome-copy{padding:65px 0 70px}.eyebrow{font-size:13px;letter-spacing:2.5px;color:#c3d9fb;font-weight:600;display:flex;align-items:center;gap:9px}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:#ffcf4f}h1{font-size:52px;line-height:1.16;letter-spacing:-2px;font-weight:650;margin:25px 0 22px}h1 em{font-style:normal;color:#ffcf4f}.welcome-copy>p{color:#c6d9f4;max-width:330px;font-size:16px;line-height:1.85}.welcome-note{display:flex;align-items:center;gap:12px;margin-top:35px;font-size:15px;font-weight:600}.welcome-note small{display:block;font-size:14px;font-weight:400;color:#b8cfee;margin-top:5px}.note-icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid #ffffff30;border-radius:11px;color:#ffcf4f;background:#ffffff0b}.welcome-footer{display:flex;justify-content:space-between;border-top:1px solid #ffffff24;padding-top:21px;color:#b8cfee;font-size:13px}.decoration{position:absolute;z-index:-1;border:1px solid #ffffff0c;border-radius:50%;pointer-events:none}.decoration-one{width:580px;height:580px;right:-390px;top:90px;box-shadow:0 0 0 55px #ffffff03,0 0 0 110px #ffffff03}.decoration-two{width:360px;height:360px;left:-220px;bottom:-230px;background:#ffffff04}.login-panel{padding:35px 48px;display:flex;align-items:center}.login-content{width:100%;max-width:380px;margin:auto}.panel-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:1.6px;color:#8290a4;font-weight:600}.store-badge{border:1px solid #dbe7f7;border-radius:6px;padding:6px 8px;color:#4871a7;background:#f4f8fd;font-size:11px;letter-spacing:1px}.store-logo{display:block;width:105px;height:105px;object-fit:contain;margin:18px auto 15px}.form-heading h2{font-size:28px;letter-spacing:-.8px;margin:0 0 8px;font-weight:650}.form-heading p{margin:0 0 27px;font-size:15px;color:var(--muted)}.field-label{display:block;font-size:14px;font-weight:600;margin:17px 0 9px}.input-wrap{position:relative;display:flex;align-items:center}.input-wrap input{width:100%;height:48px;border:1px solid #dfe5ee;background:#fafbfd;border-radius:9px;padding:0 14px 0 42px;font-size:15px;color:#172b4d;transition:border-color .15s,box-shadow .15s}.input-wrap input::placeholder{color:#97a2b3}.input-wrap input:focus{outline:none;background:#fff;border-color:#538be8;box-shadow:0 0 0 3px #2164dc14}.input-icon{position:absolute;left:15px;width:17px;height:17px;color:#8a9ab0;font-size:17px;line-height:17px}.password-wrap input{padding-right:60px}.password-toggle{position:absolute;right:8px;border:0;background:transparent;padding:8px;color:#5b6f8f;font-size:13px;cursor:pointer}.remember{display:flex;align-items:center;gap:8px;margin:18px 0 22px;font-size:14px;color:#64748b;cursor:pointer;width:fit-content}.remember input{margin:0;width:15px;height:15px;accent-color:var(--blue)}.submit-button{width:100%;height:47px;border:0;border-radius:9px;background:var(--blue);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 19px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 5px 14px #2164dc22;transition:background .15s}.submit-button:hover{background:#1854c1}.submit-button:disabled{opacity:.7;cursor:wait}.submit-button span:last-child{font-size:20px;font-weight:400}.form-hint{text-align:center;font-size:13px;color:#8c98aa;margin:13px 0 23px}.quick-access{border-top:1px solid #e9edf3;padding-top:19px}.section-label{font-size:12px;letter-spacing:1.7px;color:#98a3b3;margin-bottom:10px}.quick-access>a{display:flex;align-items:center;gap:10px;text-decoration:none;padding:8px 2px;font-size:14px;border-radius:6px}.quick-access>a:hover{background:#f5f8fc}.quick-access>a>span:last-child{margin-left:auto;color:#9aa9bd;font-size:16px}.app-icon{display:grid;place-items:center;width:27px;height:27px;background:#ebf2ff;color:#3373d6;border-radius:7px;font-size:14px;font-weight:700}.app-green{background:#eaf7f1;color:#27845f}.app-amber{background:#fff5df;color:#ac7a1b}.quick-access small{color:#8b98aa;font-size:13px;margin-left:4px}.panel-footer{font-size:12px;color:#9aa5b5;text-align:center;margin-top:21px}.panel-footer span{margin:0 5px}.error-message{padding:12px;border:1px solid #fecaca;background:#fff5f5;border-radius:8px;font-size:15px;line-height:1.6;margin:0 0 18px;color:#a32626}.error-message p{margin:0 0 5px}.error-message a{font-weight:600}:focus-visible{outline:3px solid #77a9ff;outline-offset:3px}@media(min-width:1400px){.login-shell{min-height:800px}}@media(max-width:900px){body{padding:24px}.welcome{padding:32px}h1{font-size:43px}.login-panel{padding:30px}.welcome-footer{gap:10px;flex-wrap:wrap}}@media(max-width:680px){body{padding:18px 12px}.login-shell{display:block;max-width:450px;min-height:auto;border-radius:20px}.welcome{padding:22px 25px}.brand{font-size:23px}.brand-mark{font-size:43px;line-height:46px;width:34px}.brand-mark span{width:32px}.brand small{font-size:11px;letter-spacing:2px}.welcome-copy,.welcome-footer{display:none}.login-panel{padding:26px}.store-logo{width:96px;height:96px;margin:12px auto 17px}.form-heading h2{font-size:26px}.panel-footer{margin-top:24px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.brand-logo{display:block;width:48px;height:49px;object-fit:contain;flex-shrink:0}@media(max-width:680px){.brand-logo{width:38px;height:39px}}

.store-logo{width:210px;max-width:100%;height:auto;object-fit:contain;margin:30px auto 29px}@media(max-width:680px){.store-logo{width:190px;height:auto;margin:26px auto}}

/* Comfortable reading sizes for the login form. */
.input-wrap input{font-size:16px;height:52px}.password-wrap input{padding-right:76px}.submit-button{font-size:16px;height:50px}.remember{font-size:14px}.remember input{width:18px;height:18px}.form-heading p{line-height:1.6}.quick-access>a{font-size:15px;padding:10px 2px}.panel-footer{font-size:12px;line-height:1.6}.welcome-note small{line-height:1.6}
/* Fit desktop login to the visible browser area without shrinking the text. */
@media(min-width:681px){
  body{padding:12px;min-height:100svh}
  .login-shell{width:min(1060px,100%);height:min(720px,calc(100svh - 24px));min-height:0}
  .welcome{padding:28px 32px;min-height:0}
  .welcome-copy{padding:20px 0}
  .welcome h1{font-size:clamp(36px,3.6vw,48px);margin:18px 0 16px}
  .welcome-copy>p{line-height:1.65;margin:0}
  .welcome-note{margin-top:22px}
  .welcome-footer{padding-top:14px;gap:10px;flex-wrap:wrap}
  .login-panel{padding:20px 32px;min-height:0;overflow-y:auto}
  .login-content{max-width:400px}
  .store-logo{width:180px;margin:14px auto}
  .form-heading h2{font-size:26px;line-height:1.25;margin-bottom:5px}
  .form-heading p{margin-bottom:12px;line-height:1.5}
  .field-label{margin:10px 0 6px}
  .input-wrap input{height:46px}
  .remember{margin:12px 0 14px}
  .submit-button{height:46px}
  .form-hint{margin:9px 0 12px}
  .quick-access{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;padding-top:10px}
  .section-label{grid-column:1 / -1;margin-bottom:4px}
  .quick-access>a{padding:7px 0;gap:7px}
  .panel-footer{margin-top:12px}
}
@media(min-width:681px) and (max-height:740px){
  .login-panel{padding:16px 28px}
  .store-logo{width:150px;margin:8px auto}
  .panel-top{font-size:11px}
  .store-badge{padding:4px 7px}
  .form-heading p{margin-bottom:8px}
  .field-label{margin:8px 0 5px}
  .input-wrap input{height:44px}
  .remember{margin:10px 0}
  .submit-button{height:44px}
  .form-hint{display:none}
  .quick-access{margin-top:12px;padding-top:8px}
  .panel-footer{margin-top:8px}
  .welcome{padding:24px 28px}
  .welcome h1{margin:14px 0;font-size:40px}
  .welcome-copy{padding:12px 0}
  .welcome-note{margin-top:18px}
}
@media(min-width:681px) and (max-height:540px){
  .welcome h1{font-size:32px}
  .welcome-note{display:none}
  .store-logo{width:120px;margin:5px auto}
  .panel-top{display:none}
  .panel-footer{display:none}
}
@media(max-width:680px){
  body{padding:10px}
  .welcome{padding:16px 22px}
  .login-panel{padding:20px 22px}
  .store-logo{width:160px;margin:14px auto}
  .form-heading p{margin-bottom:16px}
  .field-label{margin:12px 0 6px}
  .input-wrap input{height:46px}
  .remember{margin:14px 0}
  .submit-button{height:46px}
  .form-hint{margin:9px 0 14px}
  .quick-access{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;padding-top:12px}
  .section-label{grid-column:1 / -1;margin-bottom:4px}
  .quick-access>a{padding:7px 0;font-size:14px;gap:6px}
  .panel-footer{margin-top:12px}
}
@media(min-width:681px) and (max-height:740px){
  .panel-top,.quick-access .section-label{display:none}
  .store-logo{margin:6px auto}
  .quick-access>a{padding:5px 0}
  .panel-footer{line-height:1.4}
}
[hidden]{display:none!important}
.login-methods{display:flex;gap:4px;padding:4px;margin:14px 0 13px;border:1px solid #e0e8f3;border-radius:9px;background:#f3f7fc}
.login-methods>button{flex:1;border:0;border-radius:6px;padding:9px 7px;background:transparent;color:#7b8fae;font:inherit;font-size:13px;cursor:pointer}
.login-methods>button.method-active{background:white;color:#2164dc;font-weight:600;box-shadow:0 2px 6px #163b7010}
.wa-login-message{font-size:13px;line-height:1.6;color:#32836c;margin:10px 0;overflow-wrap:anywhere}
.wa-login-message:empty{margin:14px 0}
.wa-login-message.is-error{color:#bb435c}
.wa-registration-help{font-size:12px;line-height:1.6;margin:12px 0;color:#8a9bb2;text-align:center}
.wa-registration-help a{color:#4876b8;text-decoration:none;font-weight:600}
.wa-registration-help a:hover{text-decoration:underline}
.wa-otp-actions{display:flex;justify-content:space-between;gap:12px;margin-top:10px}
.wa-otp-actions button{border:0;padding:4px 0;background:none;color:#6685b0;font:inherit;font-size:12px;cursor:pointer}
@media(min-width:681px) and (max-height:740px){.login-methods{margin:10px 0}.login-methods>button{padding:7px 6px}.wa-registration-help{margin:9px 0}.wa-otp-actions{margin-top:7px}.wa-login-message{margin:8px 0}}
.registration-success{padding:10px 12px;margin:12px 0;border:1px solid #cbe8dc;border-radius:8px;background:#eef9f3;color:#317b62;font-size:13px;line-height:1.6}

/* A small supermarket scene, kept separate from the sign-in controls. */
.market-scene{position:relative;width:100%;max-width:390px;align-self:center;flex:0 1 122px;min-height:70px;margin:2px 0 10px;isolation:isolate}
.market-illustration{display:block;width:100%;height:100%;max-height:122px;overflow:visible}
.market-motion-toggle{position:absolute;top:0;right:0;z-index:1;display:grid;place-items:center;width:26px;height:26px;border:1px solid #ffffff36;border-radius:50%;background:#153f7d;color:#d8e8ff;font-size:11px;line-height:1;cursor:pointer;transition:background .2s}
.market-motion-toggle:hover{background:#2c64a6}.market-motion-toggle:focus-visible{outline:2px solid #ffdc68;outline-offset:3px}
.market-cart{animation:market-cart-roll 7s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
.market-cart-groceries{animation:market-grocery-bob 3.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
.market-sparkle{animation:market-sparkle-glow 3.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.market-scene[data-paused="true"] *{animation-play-state:paused!important}
@keyframes market-cart-roll{0%,100%{transform:translateX(-8px)}50%{transform:translateX(9px)}}
@keyframes market-grocery-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1deg)}}
@keyframes market-sparkle-glow{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.08)}}
@media(min-width:681px){.welcome .welcome-copy{padding:12px 0 4px}.market-scene{max-height:122px}}
@media(min-width:681px) and (max-height:740px){.welcome h1{font-size:36px;margin:12px 0}.welcome-copy>p{font-size:14px}.welcome-note{margin-top:12px;font-size:14px}.welcome-note small{font-size:12px}.market-scene{flex-basis:108px;max-height:108px;margin-bottom:6px}}
@media(min-width:681px) and (max-height:600px){.market-scene{flex-basis:74px;max-height:74px;min-height:54px}.welcome-note{display:none}.welcome h1{font-size:30px}.welcome-copy>p{font-size:13px}.welcome-footer{font-size:11px}}
@media(max-width:680px){.welcome{gap:12px}.market-scene{width:min(300px,100%);height:82px;min-height:82px;max-height:82px;flex:none;margin:0 auto}.market-motion-toggle{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.market-scene *{animation:none!important}.market-motion-toggle{display:none}}