/* Quick Order Login Flow Styles */
body.quick-ovelay{
	overflow: hidden;
}
body.quick-ovelay:after{
	content:"";
	position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    display:block;
    background: #363636;
    -webkit-transition: opacity 0.45s, visibility 0.45s;
    -moz-transition: opacity 0.45s, visibility 0.45s;
    -ms-transition: opacity 0.45s, visibility 0.45s;
    -o-transition: opacity 0.45s, visibility 0.45s;
    transition: opacity 0.45s, visibility 0.45s;
    z-index: 50;
	opacity: .5;
}
.send-code-button:disabled:before, .verify-code-button:disabled:before{
	background: #C4C4C4;
}
.login-header  {
     display:  flex;
        flex-direction:  column;
        justify-content:  flex-end;
        align-items:  flex-start;
        margin:  0;
        width:  auto;
        margin-bottom:  15px;
        gap:  5px;
    
}
.login-header h2  {
        font-style:  normal;
        font-weight:  400;
        font-size:  22px;
        line-height:  26px;
        text-align:  right;
        color:  #000000;
        margin:  0;
    	align-items:  center;
}
.login-header p  {
        font-style:  normal;
        font-weight:  400;
        font-size:  16px;
        line-height:  20px;
        text-align:  right;
        color:  #76706E;
}
.phone-input-container  {
    display:  flex;
        flex-direction:  column;
        align-items:  flex-end;
        width:  auto;
        margin-bottom:  0;
    	position:  relative;
}
.phone-input-wrapper  {
        display:  flex;
        flex-direction:  row-reverse;
        align-items:  center;
        width:  216px;
        height:  44px;
}
.phone-prefix  {
        box-sizing:  border-box;
        display:  flex;
        flex-direction:  row;
        justify-content:  space-between;
        padding:  0 4px;
        width:  72px;
        height:  44px;
        border:  none;
        border-bottom:  1px solid #000000;
        text-align:  center;
        font-style:  normal;
        font-weight:  400;
        font-size:  22px;
        line-height:  16px;
        letter-spacing:  0.05em;
        color:  #000000;
        max-width:  60px;
		outline: none;
}
.phone-separator  {
        width:  6px;
        height:  16px;
        font-style:  normal;
        font-weight:  400;
        font-size:  16px;
        line-height:  16px;
        text-align:  right;
        color:  #76706E;
}
.phone-number  {
    box-sizing:  border-box;
        display:  flex;
        flex-direction:  row;
        align-items:  center;
        padding:  0 12px;
        width:  130px;
        height:  44px;
        border:  none;
        border-bottom:  1px solid #000000;
        font-style:  normal;
        font-weight:  400;
        font-size:  22px;
        line-height:  16px;
        text-align:  center;
        letter-spacing:  0.05em;
        color:  #000000;
		outline: none;
}
.phone-error-message  {
        font-style:  normal;
        font-weight:  400;
        font-size:  13px;
        text-align:  right;
        color:  #DE2C00;
        display:  none;
        position:  absolute;
        bottom:  -15px;
        right:  0;
}
.send-code-button,  .verify-code-button  {
        display:  flex;
        flex-direction:  row;
        justify-content:  center;
        align-items:  center;
        padding:  4px;
        width:  160px;
        height:  44px;
        background:  #222222;
        border-radius:  4px;
        font-style:  normal;
        font-weight:  700;
        font-size:  16px;
        line-height:  20px;
        text-align:  center;
        color:  #FFFFFF;
        border:  none;
        cursor:  pointer;
}
.send-code-button:disabled,  .verify-code-button:disabled  {
        background:  #C4C4C4;
        cursor:  not-allowed;
}
.verification-input-container  {
	display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 277px;
    height: 44px;
    margin-bottom: 0;
    gap: 5px;
}
.verification-code-input  {
        display:  flex;
        flex-direction:  row;
        justify-content:  space-between;
        align-items:  center;
        width:  100%;
        height:  44px;
        border:  none;
        border-bottom:  1px solid #000000;
        font-style:  normal;
        font-weight:  400;
        font-size:  22px;
        line-height:  16px;
        text-align:  center;
        letter-spacing:  0.2em;
        color:  #222222;
}
/* Quick Order Button */
#quick-order-button  {
        position:  fixed;
        bottom:  0;
        left:  50%;
        transform:  translateX(-50%);
        width:  397px;
        z-index:  999;
        box-sizing:  border-box;
        display:  flex;
        flex-direction:  column;
        align-items:  center;
        background:  #FFFFFF;
        border-bottom:  6px solid #222222;
        box-shadow:  0px 0px 16px rgba(38,  16,  2,  0.12);
        border-radius:  4px 4px 0px 0px;
        cursor:  pointer;		
}
.quick-order-minimized  {
        position:  fixed;
        bottom:  0;
        left:  50%;
        transform:  translateX(-50%);
        width:  710px;
        z-index:  999;
        background:  #F7F7F7;
        box-shadow:  0px 0px 12px rgba(38,  16,  2,  0.4);
        border-radius:  4px 4px 0px 0px;
        display:  flex;
        flex-direction:  row;
        align-items:  center;
    	padding:  0;
        height:  78px;
        line-height:  78px;
}
#quick-order-container  {
        position:  fixed;
        bottom:  0;
        left:  50%;
        transform:  translateX(-50%);
        box-sizing:  border-box;
        display:  flex;
        flex-direction:  column;
        align-items:  center;
        gap:  12px;
        width:  710px;
    	height:  auto;
    	max-width: 100%;
        background:  #FFFFFF;
        border-bottom:  6px solid #222222;
        box-shadow:  0px 0px 16px rgba(38,  16,  2,  0.12);
        border-radius:  4px 4px 0px 0px;
        z-index:  1000;
    	justify-content:  flex-start;
    	padding:  25px 0px;
		transition: opacity 0.6s ease-out, bottom 0.6s ease-out;
		bottom: -300px;
}
#quick-order-container.active{
	bottom:0
}
#quick-order-container.logged-container {
    	padding:  0;
}
#quick-order-container.logged-container .quick-order-header {
    	position:  relative;
        display:  flex;
        justify-content:  center;
        align-items:  center;
        padding:  8px 20px;
        border-bottom:  none;
        width:  100%;
        background:  #1A2756;
}
#quick-order-container.logged-container .quick-order-header h2 {
    	margin:  0;
        text-align:  center;
        width:  100%;
        color:  #fff;
        font-size:  20px;
}
.quick-order-content {
    	width:  100%;
}
.close-button, .mini-button  {
    background: #fff url(../images/panel-close.svg) center no-repeat;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 2.1px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 26.25px;
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 10;
    background-size: 24px;
}
.verification-error-message{
	color: red;
    font-size: 15px;
}
.close-button:before  {
    	display: none;
    
    content:  "";
        width:  7.35px;
        height:  7.35px;
        background:  #000000;
}
 .login-flow-container {
    display:  flex;
        flex-direction:  row;
        align-items:  center;
        width:  100%;
        padding:  0;
        justify-content:  space-between;
		gap: 30px;
}
.login-flow-container.reg-form {
    	flex-direction:  column;
    	flex-direction:  column;
}

/*.quick-order-container #quick-order-content {
    	width:  100%;
    	padding:  0 40px;
    	background:  #F7F7F7;
}*/

.new-user-notice  {
        color:  #4CAF50;
        font-size:  14px;
        margin-top:  5px;
        margin-bottom:  15px;
}
/* Verification code inputs container */.verification-code-inputs  {
        display:  flex;
        flex-direction:  row-reverse;
        justify-content:  space-between;
        align-items:  center;
        width:  277px;
        height:  44px;
        margin:  0 auto;
        gap:  10px;
}
/* Individual digit input */.verification-digit  {
        box-sizing:  border-box;
        display:  flex;
        flex-direction:  row;
        justify-content:  center;
        align-items:  center;
        padding:  0px 4px;
        width:  37.83px;
        height:  44px;
        border:  none;
        border-bottom:  1px solid #000000;
        font-style:  normal;
        font-weight:  400;
        font-size:  22px;
        line-height:  16px;
        text-align:  center;
        color:  #222222;
}
/* Verify button */.verify-code-button  {
        width:  160px;
        height:  44px;
        background:  #222222;
        border-radius:  4px;
        font-style:  normal;
        font-weight:  700;
        font-size:  16px;
        line-height:  20px;
        text-align:  center;
        color:  #FFFFFF;
        border:  none;
        cursor:  pointer;
        margin-top:  12px;
}
.verify-code-button:disabled  {
        background:  #C4C4C4;
        cursor:  not-allowed;
}
/* Verification status container */.verification-status  {
        display:  flex;
        flex-direction:  column;
        align-items:  center;
        margin-top:  16px;
        gap:  8px;
}
/* Spinner for verification in progress */.verification-spinner  {
        display:  flex;
        justify-content:  center;
        align-items:  center;
        height:  24px;
}
.spinner-border  {
        display:  inline-block;
        width:  24px;
        height:  24px;
        border:  3px solid rgba(0,  0,  0,  0.1);
        border-radius:  50%;
        border-top-color:  #222222;
        animation:  spin 1s ease-in-out infinite;
}
@keyframes spin  {
        to  {
     transform:  rotate(360deg);
 }
}
/* Resend code button */.resend-code-button  {
        background:  none;
        border:  none;
        color:  #222222;
        text-decoration:  underline;
        font-size:  14px;
        cursor:  pointer;
        padding:  4px 8px;
}
.resend-code-button:disabled  {
        color:  #999999;
        cursor:  not-allowed;
        text-decoration:  none;
}
/* Registration form styles */.registration-form  {
        display:  flex;
        flex-direction:  column;
        align-items:  center;
        width:  100%;
        max-width:  662px;
        gap:  18px;
}
.registration-inputs  {
        width:  100%;
        display:  flex;
        flex-direction:  row;
        gap:  16px;
}
.input-row  {
        display:  flex;
        flex-direction:  row;
        justify-content:  flex-end;
        align-items:  center;
        width:  100%;
        gap:  16px;
}
.form-field  {
        box-sizing:  border-box;
        display:  flex;
        flex-direction:  column;
        align-items:  flex-end;
        padding:  0px 4px 0px 4px;
        margin-bottom:  8px;
        border-bottom:  1px solid #000000;
		position: relative;
}
.form-field input  {
        width:  100%;
        height:  44px;
        border:  none;
        background:  transparent;
        font-style:  normal;
        font-weight:  400;
        font-size:  18px;
        line-height:  16px;
        text-align:  right;
        color:  #222222;
        padding:  0;
		outline: none;
}
.email-field  {
        width:  258px;
}
.first-name-field,  .last-name-field  {
        width:  186px;
}
.form-field input::placeholder  {
        color:  #76706E;
}
.terms-checkbox-container  {
        display:  flex;
        flex-direction:  column;
        width:  100%;
}
.terms-checkbox-label  {
        display:  flex;
        flex-direction:  row-reverse;
        justify-content:  flex-end;
        align-items:  center;
        gap:  8px;
        font-style:  normal;
        font-weight:  400;
        font-size:  16px;
        line-height:  20px;
        text-align:  right;
        color:  #000000;
        cursor:  pointer;
}
.terms-checkbox-label a  {
        color:  #000000;
        text-decoration:  underline;
}
.terms-checkbox  {
        position:  absolute;
        opacity:  0;
        cursor:  pointer;
        height:  0;
        width:  0;
}
.product-item .product-checkbox{
	display:none
}
.custom-checkbox{
	cursor: pointer;
}
.custom-checkbox input:checked + .checkmark {
  background: #000000 url(../images/vi.svg) center no-repeat;
}
.checkmark  {
        box-sizing:  border-box;
        display:  flex;
        justify-content:  center;
        align-items:  center;
        width:  20px;
        height:  20px;
        border:  0.8px solid #000000;
        background-color:  transparent;
        position:  relative;
}
.terms-checkbox:checked + .checkmark  {
        background:  #000000 url(../images/vi.svg) center no-repeat;;
}
.checkmark:after  {
        content:  "";
        position:  absolute;
        display:  none;
        width:  11.2px;
        height:  10.4px;
        background-image:  url('data:image/svg+xml;utf8, <svg xmlns="http: //www.w3.org/2000/svg" width="12" height="11" viewBox="0 0 12 11" fill="none"><path d="M1 5.5L4.5 9L11 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
        background-repeat:  no-repeat;
        background-position:  center;
}
.terms-checkbox:checked ~ .checkmark:after  {
        display:  block;
}
/* Field error messages */
.field-error-message  {
        font-size:  12px;
        color:  #DE2C00;
        text-align:  right;
        margin-top:  4px;
        width:  100%;
        min-height:  16px;
		    position: absolute;
    bottom: -20px;
    right: 0;
}
.terms-error  {
        margin-top:  4px;
        width:  100%;
        text-align:  right;
}
.registration-error-message  {
        width:  100%;
        color:  #DE2C00;
        font-size:  14px;
        text-align:  right;
}
.register-button  {
        width:  160px;
        height:  44px;
        background:  #1A2756;
        border-radius:  4px;
        color:  #FFFFFF;
        font-weight:  700;
        font-size:  16px;
        line-height:  20px;
        text-align:  center;
        border:  none;
        cursor:  pointer;
}
.register-button:disabled  {
        background:  #C4C4C4;
        cursor:  not-allowed;
}
	#quick-order-button.quick-order-minimized {
    		right:  15px;
    		left:  auto;
    		bottom:  80px;
    		width:  95px;
    		height:  95px;
    		transform:  none;
    		border-radius:  50%;
    		border:  none;
    		padding:  15px 6px 0;
			transition: opacity 0.6s ease-out, right 0.6s ease-out;
    	}
	#quick-order-button.quick-order-minimized.hide,
	#quick-order-button.quick-order-minimized.mini.hide{
		right:  -150px;
	}
	#quick-order-button.quick-order-minimized .mini-button {
    		box-sizing:  border-box;
    		display:  flex;
    		flex-direction:  column;
    		justify-content:  center;
    		align-items:  center;
    		padding:  0px;
    		gap:  0;
    		width:  18px;
    		height:  18px;
    		border:  1px solid #000000;
    		border-radius:  26.25px;
    		cursor:  pointer;
    		position:  absolute;
    		top:  -12px;
    		right:  4px;
    	}
	#quick-order-button.quick-order-minimized .quick-order-button-text {
			background-position: center top;
			padding-left: 0;
			font-size: 14px;
			line-height: 18px;
			padding-top: 0;
			text-align: center;
			background-size: 37px;
			height: 100%;
    	}
		#quick-order-button.quick-order-minimized .quick-order-button-text img.pop-icon{
			width: 37px;
			display: block;
			text-align: center;
			margin: auto;
		}
		#quick-order-button.quick-order-minimized.mini .quick-order-button-text img.pop-icon{
			position: absolute;
			width: 25px;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
		}
		@keyframes shake {
			0% { transform: translateX(0); }
			25% { transform: translateX(-7px); }
			50% { transform: translateX(7px); }
			75% { transform: translateX(-7px); }
			100% { transform: translateX(0); }
		}

		.shake {
			animation: shake 0.5s ease 4; /* Shake for 0.5 seconds, 2 times */
		}
		
		#quick-order-button.quick-order-minimized.mini{
			right: 9px;
			left: auto;
			bottom: 80px;
			width: 44px;
			height: 44px;
			transform: none;
			border-radius: 50%;
			border: none;
			padding: 0;
		}
		#quick-order-button.quick-order-minimized.mini .mini-button{
			display: none;
		}
		#quick-order-button.quick-order-minimized.mini .quick-order-button-text{
			background-position: center center;
			padding-left: 0;
			line-height: 18px;
			padding-top: 0;
			text-align: center;
			background-size: 29px;
			font-size: 0;
			width: 100%;
			height: 100%;
			position: relative;
		}
@media only screen and (max-width:  767px)  {
    	#quick-order-container  {
    		position:  fixed;
    		left:  50%;
    		transform:  translateX(-50%);
    		box-sizing:  border-box;
    		display:  flex;
    		flex-direction:  column;
    		align-items:  center;
    		gap:  12px;
    		width:  710px;
    		height:  auto;
    		max-width:  100%;
    		background:  #FFFFFF;
    		border-bottom:  6px solid #222222;
    		box-shadow:  0px 0px 16px rgba(38,  16,  2,  0.12);
    		border-radius:  4px 4px 0px 0px;
    		z-index:  100;
    		padding: 13px 0px;
    	}
	.login-header  {
    		display:  flex;
    		flex-direction:  column-reverse;
    		justify-content:  flex-end;
    		align-items:  flex-start;
    		margin:  0;
    		width:  auto;
    		margin-bottom:  15px;
    		gap:  9px;
    		row-gap:  9px;
    		column-gap:  9px;
    	}
	.phone-input-container  {
    		display:  flex;
    		flex-direction:  column;
    		align-items:  flex-end;
    		width:  auto;
    		margin-bottom:  18px;
    		position:  relative;
    	}
	.login-flow-container  {
    		display:  flex;
    		flex-direction:  column;
    		align-items:  center;
    		width:  85%;
			gap: 0;
			padding: 0;
			margin: auto;
    		justify-content:  space-between;
    	}
		#quick-order-content{
			width: 100%;
		}
		.login-flow-container.reg-form .login-header {
    		flex-direction:  column;
    	}
	.login-flow-container.reg-form  .email-field  {
    		width:  100%;
    	}
	.login-flow-container.reg-form  .registration-inputs {
    		    flex-direction:  column-reverse;
    	}
	.login-flow-container.reg-form  .input-row {
    		flex-direction:  row;
    	}
}