/* Shared by the real storefront and the design catalogue preview. */
.auth-screen{--auth-primary:var(--primary,#23577d);--auth-surface:var(--teal,#eef6ff);position:relative;isolation:isolate;min-height:80vh;padding:34px 20px 45px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;background:#f7f9fc;color:#172b45;overflow:hidden;box-sizing:border-box}
.auth-screen::before,.auth-screen::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.auth-brand{text-align:center;width:100%;max-width:360px;margin-bottom:22px;position:relative}
.auth-brand img,.auth-brand .mock-logo{width:82px!important;height:82px!important;object-fit:contain!important;background:#fff;border-radius:24px!important;padding:10px;box-sizing:border-box;margin:0 auto 15px!important;box-shadow:0 8px 24px #142a5017}
.auth-brand h2,.auth-brand h6{font-size:1.4em!important;margin:0 0 8px!important;color:inherit;overflow-wrap:anywhere}
.auth-brand p{font-size:.88em!important;line-height:1.7;margin:0!important;color:#64748b!important}
.auth-panel{width:100%;max-width:360px;background:#fff;padding:24px;border-radius:24px;box-shadow:0 12px 35px #17354e12;box-sizing:border-box;position:relative}
.auth-panel>div{width:100%!important;max-width:none!important}
.auth-panel label:not(:has(input[type=checkbox])){font-size:.86em!important;color:#475569!important}
.auth-panel .auth-field,.auth-panel .mock-field{display:flex;align-items:center;gap:10px;border:1px solid #dce4ed!important;background:#f8fafc!important;border-radius:12px!important;padding:13px 14px!important;margin-bottom:14px!important;box-shadow:none!important}
.auth-panel input:not([type=checkbox]){min-width:0;width:100%;background:transparent!important;color:#172b45!important;font-size:1em!important;font-family:inherit;outline:none;border:0}
.auth-panel input::placeholder{color:#7c8ba0;opacity:1}
.auth-panel .auth-field i{color:var(--auth-primary)!important}
.auth-panel .auth-submit,.auth-panel .mock-submit{width:100%;border:0;background:var(--auth-primary)!important;color:#fff!important;border-radius:12px!important;padding:14px!important;font:800 1em Tajawal,sans-serif!important;cursor:pointer;box-shadow:0 6px 14px #17354e18}
.auth-panel p,.auth-panel a{line-height:1.7}
.auth-links{display:block;text-align:center;color:var(--auth-primary);font-size:.86em;margin:14px 0}
.auth-footer{display:flex;justify-content:center;gap:18px;margin-top:26px!important;flex-wrap:wrap;max-width:360px}
.auth-eye{border:0;background:transparent;color:var(--auth-primary);padding:4px;cursor:pointer;font-size:1em}
.auth-screen[data-auth-variant="1"] .auth-brand{background:var(--auth-primary);color:#fff;padding:24px 20px 38px;border-radius:24px 24px 0 0;box-sizing:border-box;margin:0}
.auth-screen[data-auth-variant="1"] .auth-brand p{color:#ffffffcc!important}
.auth-screen[data-auth-variant="1"] .auth-panel{margin-top:-18px;border-radius:24px}
.auth-screen[data-auth-variant="2"]::before{width:220px;height:220px;border-radius:50%;background:var(--auth-primary);top:-85px;right:-80px}
.auth-screen[data-auth-variant="2"]::after{width:170px;height:170px;border-radius:50%;background:var(--auth-primary);opacity:.1;bottom:-45px;left:-60px}
.auth-screen[data-auth-variant="2"] .auth-panel{background:transparent;box-shadow:none;padding:12px 8px}
.auth-screen[data-auth-variant="2"] .auth-field,.auth-screen[data-auth-variant="2"] .mock-field{border:0!important;border-radius:40px!important;background:color-mix(in srgb,var(--auth-primary) 10%,white)!important}
.auth-screen[data-auth-variant="2"] .auth-submit,.auth-screen[data-auth-variant="2"] .mock-submit{border-radius:40px!important}
.auth-screen[data-auth-variant="3"]{background:linear-gradient(135deg,var(--auth-primary),var(--auth-surface))}
.auth-screen[data-auth-variant="3"]::before{width:190px;height:190px;border-radius:50%;background:#ffffff45;top:30px;left:-50px}
.auth-screen[data-auth-variant="3"] .auth-panel{background:#ffffffdc;border:1px solid #ffffff90;backdrop-filter:blur(12px)}
.auth-screen[data-auth-variant="3"] .auth-brand{color:#fff}
.auth-screen[data-auth-variant="3"] .auth-brand p{color:#fff!important}
.auth-screen[data-auth-variant="4"]{background:linear-gradient(155deg,var(--auth-surface),var(--auth-primary))}
.auth-screen[data-auth-variant="4"] .auth-panel{border-radius:35px 8px 35px 8px;border:2px solid var(--auth-primary);box-shadow:14px 14px 0 #ffffff35}
.auth-screen[data-auth-variant="4"] .auth-brand img,.auth-screen[data-auth-variant="4"] .mock-logo{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);border-radius:0!important}
.auth-screen[data-auth-variant="4"] .auth-submit,.auth-screen[data-auth-variant="4"] .mock-submit{border-radius:4px!important;clip-path:polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,0 50%)}
.auth-screen[data-auth-variant="5"]{justify-content:flex-start;padding-top:44px!important;background:#fff}
.auth-screen[data-auth-variant="5"]::before{height:170px;top:0;left:-10%;right:-10%;background:var(--auth-primary);border-radius:0 0 50% 50%}
.auth-screen[data-auth-variant="5"] .auth-brand{color:#fff;margin-bottom:26px}
.auth-screen[data-auth-variant="5"] .auth-brand p{color:#fff!important}
.auth-screen[data-auth-variant="5"] .auth-brand img,.auth-screen[data-auth-variant="5"] .mock-logo{border-radius:50%!important;border:5px solid white}
.auth-screen[data-auth-variant="5"] .auth-panel{border:1px solid #e0e7ef;border-radius:10px}
.auth-screen[data-auth-variant="6"]::before{top:0;right:0;left:0;height:46%;background:var(--auth-primary);border-radius:0 0 48px 48px}
.auth-screen[data-auth-variant="6"] .auth-brand{color:#fff}
.auth-screen[data-auth-variant="6"] .auth-brand p{color:#ffffffdd!important}
.auth-screen[data-auth-variant="6"] .auth-panel{box-shadow:0 15px 35px #17354e25}
.auth-screen[data-auth-variant="7"]{background:#fff}
.auth-screen[data-auth-variant="7"] .auth-panel{border:2px solid var(--auth-primary);box-shadow:8px 8px 0 var(--auth-surface);border-radius:6px}
.auth-screen[data-auth-variant="7"] .auth-brand img,.auth-screen[data-auth-variant="7"] .mock-logo{border-radius:6px!important;box-shadow:none;border:1px solid var(--auth-primary)}
.auth-screen[data-auth-variant="8"]{background:#fff}
.auth-screen[data-auth-variant="8"] .auth-panel{box-shadow:0 0 55px color-mix(in srgb,var(--auth-primary) 22%,transparent);border-radius:20px}
.auth-screen[data-auth-variant="8"] .auth-field,.auth-screen[data-auth-variant="8"] .mock-field{background:#fff!important;border:0!important;border-bottom:2px solid color-mix(in srgb,var(--auth-primary) 30%,white)!important;border-radius:0!important}
.auth-screen[data-auth-variant="8"] .auth-submit,.auth-screen[data-auth-variant="8"] .mock-submit{background:linear-gradient(90deg,var(--auth-primary),color-mix(in srgb,var(--auth-primary) 60%,white))!important}
.phone .auth-screen{--auth-primary:var(--p);--auth-surface:var(--s);min-height:calc(100% - 22px);padding:16px 12px!important;font-size:10px}
.phone .auth-brand{margin-bottom:14px}
.phone .auth-brand .mock-logo{width:52px!important;height:52px!important;font-size:24px;margin-bottom:8px!important}
.phone .auth-brand h6{margin-bottom:4px!important}
.phone .auth-panel{padding:12px}
.phone .auth-links{margin:8px 0}
.phone .auth-screen[data-auth-variant="1"] .auth-brand{padding:12px 10px 25px}
.phone .auth-panel .mock-field{padding:9px!important;margin-bottom:10px!important;font-size:9px}
.phone .auth-panel .mock-submit{padding:9px!important}
.phone .auth-footer{margin-top:12px!important;font-size:16px;color:var(--p)}
.phone .auth-screen[data-auth-variant="3"] .auth-footer,.phone .auth-screen[data-auth-variant="4"] .auth-footer{color:#fff}
.phone .auth-screen[data-auth-variant="5"]::before{height:122px}
.phone .auth-screen[data-auth-variant="5"]{padding-top:20px!important}
@media(max-width:360px){.auth-screen{padding-left:14px!important;padding-right:14px!important}.auth-panel{padding:20px}.auth-footer{gap:12px}}