/* Qmart account panel (.iit-sidebar): the slide-in sign-in / account box from the amirularham theme (arhamskin), restyled with Qmart colours.
 * The #authbox rules (the Sign in / Reset switch, the sliding button text) are the ones that theme ships; the panel itself is moved by js/qmart-auth.js. */

.iit-sidebar{width:min(350px,100%) !important;height:100%;background:var(--card);color:var(--ink);box-shadow:-18px 0 50px -20px rgba(0,0,0,.35);transition:right .35s cubic-bezier(.2,.9,.2,1);z-index:501 !important}
.iit-sidebar-overlay{position:fixed;inset:0;background:rgba(10,18,13,.45);opacity:0;visibility:hidden;transition:.3s;z-index:500}
body.iit_sidep_open .iit-sidebar-overlay{opacity:1;visibility:visible}
body.iit_sidep_open{overflow:hidden}
.iit_mini_content{width:100%;height:100%;position:relative;overflow-y:scroll;overscroll-behavior-y:contain;scrollbar-width:none}
.iit_mini_content::-webkit-scrollbar{display:none}
.iit-quit-sidebar{padding:13px;border-radius:50%;color:var(--ink);fill:currentColor;line-height:1;display:inline-flex;margin:9px;background:var(--card);box-shadow:var(--shadow);cursor:pointer;position:absolute;transition:all .3s ease-in-out;z-index:2}
.iit-quit-sidebar svg{fill:currentColor}
body.iit_sidep_open .iit_sidep_active .iit-quit-sidebar{right:100%}
.pos-absolute{position:absolute}.pos-absolute.top{top:0}
.offcanvas__content{padding:56px 25px 30px 25px}
.offcanvas__login{margin-bottom:30px}
.offcanvas__top{margin-bottom:24px}

/* #authbox: the Sign in / Reset switch */
#authbox #wrapper,#authbox label,#authbox #arrow,#authbox button span{transition:all .5s cubic-bezier(.6,0,.4,1)}
#authbox #wrapper{overflow:hidden}
#authbox #signin:checked ~ #wrapper{height:104px}
#authbox #signin:checked ~ #wrapper #arrow{left:32px}
#authbox #signin:checked ~ button span{transform:translate3d(0,-40px,0)}
#authbox #signup:checked ~ #wrapper{height:151px}
#authbox #signup:checked ~ #wrapper #arrow{left:38%}
#authbox #signup:checked ~ button span{transform:translate3d(0,-80px,0)}
#authbox #reset:checked ~ #wrapper{height:55px}
#authbox #reset:checked ~ #wrapper #arrow{left:88%}
#authbox #reset:checked ~ button span{transform:translate3d(0,0,0)}
#authbox form{width:100%;height:auto;margin:0 auto;position:relative}
#authbox input[type=radio]{display:none}
#authbox label{cursor:pointer;display:inline-block;font-size:15px;font-weight:800;opacity:.5;margin-bottom:10px;text-transform:uppercase;color:var(--ink)}
#authbox label:hover{transition:all .3s cubic-bezier(.6,0,.4,1);opacity:1}
#authbox label[for="signin"]{margin-right:20px}
#authbox label[for="reset"]{float:right}
#authbox input[type=radio]:checked + label{opacity:1}
#authbox input[type=text],#authbox input[type=password]{background:var(--bg);border:1.5px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit;height:42px;width:100%;margin-bottom:7px;opacity:1;text-indent:14px;color:var(--ink);transition:all .2s ease-in-out;outline:0}
#authbox input[type=text]:focus,#authbox input[type=password]:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(11,122,59,.12)}
#authbox button{background-color:var(--brand);border:none;border-radius:10px;color:#fff;cursor:pointer;font-family:inherit;font-size:15px;font-weight:700;height:42px;width:100%;margin-bottom:10px;overflow:hidden;transition:all .3s cubic-bezier(.6,0,.4,1)}
#authbox button span{display:block;line-height:42px;position:relative;top:-2px;transform:translate3d(0,0,0)}
#authbox button:hover{background-color:var(--brand-d)}
#authbox #arrow{height:0;width:0;border-bottom:10px solid var(--bg);border-left:10px solid transparent;border-right:10px solid transparent;position:relative;left:32px}
.authform{position:relative}
.lgstatus{font-size:14px;font-weight:600;margin-top:4px}
.lgstatus ddce,.lgstatus ddci{display:block;color:var(--sale)}
.lgstatus ddcs{display:block;color:var(--brand)}

/* the signed-in card */
.qm-authcard{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.qm-authcard img{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none}
.qm-authcard h6{font-size:16px;font-weight:800;margin:0 0 6px;letter-spacing:-.01em}
.qm-authcard .acts2{display:flex;gap:6px;flex-wrap:wrap}
.qm-authcard .acts2 a{padding:6px 12px;border-radius:9px;font-size:12.5px;font-weight:700;background:var(--brand);color:#fff}
.qm-authcard .acts2 a:hover{background:var(--brand-d)}
.qm-authcard .acts2 a.out{background:transparent;color:var(--ink);border:1px solid var(--line)}