@charset "utf-8";
/* CSS Document */
body{margin: 0;}
/*
.main-menu ul li{display: inline-block; padding: 4px;}
.main-menu ul li a{ display: inline-block; font-size: 18px; background: #200E84; color: #FFFFFF; padding: 10px; text-decoration: none;}
.main-menu ul li a:active{background: #00A0D1;}
.sub-menu ul li {display: inline-block; padding: 4px;}
.sub-menu ul li a{ display: inline-block; font-size: 16px; background: #000207; color: #FFFFFF; padding: 10px; text-decoration: none;}

.logo{ width:60px;}
.sub-menu ul li a:active{background: #00A0D1;}*/

.sub-menu{display:inline-block;top:100%;left:0;z-index:1;background-color:#fff;border:1px solid #ccc;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.sub-menu ul{list-style:none;margin:0;padding:0}
.sub-menu li{margin-right:0;display:inline-block;margin-bottom:5px}
.sub-menu a{display:block;padding:8px 16px;color:#333;text-decoration:none;transition:background-color .2s ease-in-out}
.sub-menu a:hover{background-color:#f2f2f2}
header{display:flex;justify-content:space-between;align-items:center;background-color:#fff;padding:10px 20px;box-shadow:0 0 10px rgba(0,0,0,0.1)}
.logo-wrapper{display:flex;align-items:center}
.logo{max-width:100px;height:auto;margin-right:10px}
nav.main-menu ul{list-style:none;margin:0;padding:0;display:flex}
nav.main-menu li{margin-right:20px}
nav.main-menu li:last-child{margin-right:0}
nav.main-menu a{text-decoration:none;color:#333;font-weight:bold;transition:color 0.2s ease-in-out}
nav.main-menu a:hover{color:#008CBA}

.customer-selection input{ padding: 18px; font-size: 18px;}
.item-list-wrapper{}
.item-list-wrapper ol li:nth-child(2n){background: #F1F1F1;}
.item-list-wrapper ol li h2{color: #3C3D3D; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";  padding: 5px;}
.left-wrap{display:  inline-block;}
.right-wrap{display: inline-block; margin-left: 30px;}
.item-list-wrapper ol li .left-wrap .item-img{border: solid #C2C1C2 2px; display: inline-block;}
.thumbnail img{width: 80px;}
.item-list-wrapper .actionbutton{ background: #7A0004; color: #FFFFFF; text-decoration: none; width: 150px; height:20px; text-align:center; margin:0 0 5px 0; display:inline-block; }
.overlay{background:rgba(255,255,255,0.9); overflow:scroll; width: 100%; height: 100%; position: fixed; display: none;}
.itemid{display:inline-block; padding:0 10px;}
.itemname{display:inline-block}
.savedcategories ul{ overflow:scroll; height:300px;}
.savedcategories ul li{ background:#F1F0FF; padding: 10px 0; font-size:24px;}
.savedcategories ul li:nth-child(2n){background:#EBEBEB;}
#newcatadd input,#newcatadd select, #newcatadd textarea{ padding:10px;}
.block{display:block;}
.inline{display:inline-block;}
#sale-panel h1{display:inline-flex;}
#billItemCount {
    display: inline-flex;
	float:right;
    align-items: center;
    justify-content: center;

    min-width: 58px;
    height: 58px;
    padding: 0 12px;

    margin: 5px 0 15px 0;

    font-size: 32px;
    font-weight: 700;
    line-height: 1;

    color: #fff;
    background: #222;

    border-radius: 12px;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);

    transition: transform 0.15s ease;
}
.additemform{ }
.additemform input, .additemform select{ margin:5px;padding:10px;}
.additemform .itemname input{width:50%;}
.additemform label{ width:100px; display:inline-block;}
.additemform textarea{ padding:10px; margin:5px; height:50px;}
.additemform button{ padding:10px; margin:20px;}

#barcodegen{cursor:pointer;  padding:10px; border:solid 1px; background:#CCC; display:inline-block;}

.wrapper{ width:100%; display:block; margin:0 auto;}
.inner-wrapper{}
.heading-wrapper{ text-align:center;}
.login-form-wrapper div{ padding:5px 0;}
.login-form-wrapper input, .login-form-wrapper button{ padding:10px 0; display:block; margin:0 auto;}
.stock-table{ text-align:center;}


#addnewcustomer{max-width:500px;margin:0 auto;font-family:Arial,sans-serif;background-color:#f2f2f2;padding:20px;border-radius:5px}
#addnewcustomer .form-group{margin-bottom:15px}
#addnewcustomer label{display:block;font-weight:bold;margin-bottom:5px}
#addnewcustomer span{color:red}
#addnewcustomer input[type="number"],#addnewcustomer input[type="text"]{display:block;width:100%;padding:10px;border:none;border-radius:5px;background-color:#fff;box-shadow:0 1px 1px rgba(0,0,0,.1);font-size:16px}
#addnewcustomer button{padding:10px 20px;background-color:#4CAF50;color:#fff;border:none;border-radius:5px;font-size:16px;cursor:pointer;transition:all .3s ease-in-out}
#addnewcustomer button:hover{background-color:#3e8e41}

#cart{margin:20px auto;width:80%;border:1px solid #ccc;border-radius:5px;padding:10px;box-shadow:0 0 10px rgba(0,0,0,0.2)}
#cart h2{font-size:24px;margin-bottom:10px}
#cart table{width:100%;border-collapse:collapse}
#cart th,#cart td{padding:10px;text-align:center;border:1px solid #ccc}
#cart th{background-color:#f7f7f7}
#cart tfoot th{text-align:right}
#total{font-weight:bold}
#cart button{background-color:#008CBA;color:#fff;border:none;padding:10px;border-radius:5px;cursor:pointer;font-size:16px}
#cart button:hover{background-color:#006687}

#add-product-to-bill{margin:20px auto;width:80%}
#add-product-to-bill label{font-size:18px;display:inline-block;width:50px;margin-right:10px}
#add-product-to-bill input{font-size:16px;padding:5px;border-radius:5px;border:1px solid #ccc}
#add-product-to-bill input:focus{outline:none;border-color:#008CBA}

.minified .image-upload{margin-bottom:20px}
.image-upload form{display:flex;align-items:center;justify-content:space-between;border:1px solid #ccc;padding:10px}
.image-upload form input[type="file"]{flex:1;margin-right:10px}
.image-upload form button{background-color:#4CAF50;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer}
.image-gallery{}
.image-viewer{display:inline-block; }
.image-thumbnails{display:inline-block; float:left;}
.image-thumbnails .thumbnail{display:block; width:50px; margin:5px; border:solid 2px #FFFFFF; width:50px; height:50px;}
.image-thumbnails .thumbnail:hover {border-color:#09F;}
.highlighted-image{display:inline-block; max-width:500px;}
.highlighted-image .highlighted{width:500px;}
.imageaction{ display:inline-block;float:right; padding:20px 0;}
.deleteimage{ padding:20px 0;}
.customer-info { font-size:16px; text-align:center;
}
.customer-info div {display:inline-block; padding: 5px 20px; background:#F4F4F4;}
.label {
  font-weight: bold;
}
.value {
  margin-left: 10px;
}
#boughtitemwrapper input[type=number]{width:80px}

#qricon{ padding:10px; 
background:url(../images/fix/qr.png);
background-size: contain;
display: inline-block;
}


.qrcontainer {
	width: 100%;
	max-width: 500px;
	margin: 5px;
}

.qrcontainer h1 {
	color: #ffffff;
}

.qrcontainer .section {
	background-color: #ffffff;
	padding: 50px 30px;
	border: 1.5px solid #b2b2b2;
	border-radius: 0.25em;
	box-shadow: 0 20px 25px rgba(0, 0, 0, 0.25);
}

.qrcontainer #my-qr-reader {
	padding: 20px !important;
	border: 1.5px solid #b2b2b2 !important;
	border-radius: 8px;
}

.qrcontainer #my-qr-reader img[alt="Info icon"] {
	display: none;
}

.qrcontainer #my-qr-reader img[alt="Camera based scan"] {
	width: 100px !important;
	height: 100px !important;
}

.qrcontainer button {
	padding: 10px 20px;
	border: 1px solid #b2b2b2;
	outline: none;
	border-radius: 0.25em;
	color: white;
	font-size: 15px;
	cursor: pointer;
	margin-top: 15px;
	margin-bottom: 10px;
	background-color: #008000ad;
	transition: 0.3s background-color;
}

.qrcontainer button:hover {
	background-color: #008000;
}

.qrcontainer #html5-qrcode-anchor-scan-type-change {
	text-decoration: none !important;
	color: #1d9bf0;
}

.qrcontainer video {
	width: 100% !important;
	border: 1px solid #b2b2b2 !important;
	border-radius: 0.25em;
}
.navigation-icon-container{display:none;}
.idnotice{font-size:12px; display:block; float:right;}
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
 
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
display:block;
}

.active, .collapsible:hover {
  background-color: #555;
}

.iconforvariety{
	display: inline-block;
    padding: 5px;
    background: #179234;
    color: #fff;
    margin: 5px;
	}	
#varietytype{
	display:inline-block;
	}
.resultpages {
    margin: 15px;
	text-align:center;
}

.resultpages .searchresultbutton {
    display: inline-block;
    padding: 6px 10px;
    margin-right: 3px;

    background-color: #f5f5f5;
    color: #333;

    border: 1px solid #ccc;
    border-radius: 2px;

    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}

.resultpages .searchresultbutton:hover {
    background-color: #333;
    color: #fff;
}

.resultpages .searchresultbutton.active {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

.resultpages .pagination-dots {
    display: inline-block;
    padding: 6px 5px;
    color: #555;
}

.resultpages .prevnext {
    font-weight: 600;
}


/* =========================================================
   VARIETY MANAGER UI
   ========================================================= */

#varietyform{
    margin: 10px 0 15px 0;
}

#varietyform > div{
    display: block;
}


/* Variety type buttons */

#varietyagewise,
#varietycolorwise,
#varietybytext,
#varietylettersize,
#varietynumbersize{
    display: inline-block;
    padding: 10px 16px;
    margin: 4px 3px;
    background: #179234;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid #179234;
}

#varietyagewise:hover,
#varietycolorwise:hover,
#varietybytext:hover,
#varietylettersize:hover,
#varietynumbersize:hover{
    background: #117328;
}


/* Variety input */

#varietytype{
    display: inline-block;
    vertical-align: middle;
    margin: 5px 5px 5px 0;
}

#varietytype select,
#varietytype input{
    min-width: 220px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #fff;
}


/* Quantity */

#varietyform input[name="quantity"]{
    width: 100px;
    padding: 10px;
    margin: 5px;
    font-size: 16px;
    border: 1px solid #bbb;
    border-radius: 4px;
}


/* Save button */

#varietyform button{
    padding: 10px 22px;
    margin: 5px;
    background: #008CBA;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

#varietyform button:hover{
    background: #006f94;
}


/* Print Codes */

#savedvarietywrapper{
    margin-top: 15px;
}
/* =========================================================
   SAVED VARIETIES TABLE
   ========================================================= */

#savedvarietywrapper{
    width: 100%;
    margin-top: 20px;
    overflow-x: auto;
}

#savedvarietywrapper table{
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #d5d5d5;
}

#savedvarietywrapper table tr:first-child{
    background: #333;
    color: #fff;
}

#savedvarietywrapper table th,
#savedvarietywrapper table td{
    padding: 10px 8px;
    border: 1px solid #ddd;
    text-align: center;
    font-size: 14px;
}

#savedvarietywrapper table tr:not(:first-child):nth-child(even){
    background: #f7f7f7;
}

#savedvarietywrapper table tr:not(:first-child):hover{
    background: #eeeeee;
}


/* Variety UPC */

#savedvarietywrapper table td:nth-child(4){
    font-family: monospace;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
}


/* Quantity */

#savedvarietywrapper table td:nth-child(3){
    font-weight: 600;
}


/* Delete */

#savedvarietywrapper table td:last-child a{
    display: inline-block;
    padding: 6px 10px;
    background: #7A0004;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
}

#savedvarietywrapper table td:last-child a:hover{
    background: #a00005;
}


/* Mobile */

@media screen and (max-width: 600px){

    #savedvarietywrapper table th,
    #savedvarietywrapper table td{
        padding: 8px 5px;
        font-size: 12px;
    }

    #savedvarietywrapper table td:nth-child(4){
        font-size: 12px;
    }

    #savedvarietywrapper table td:last-child a{
        padding: 5px 7px;
        font-size: 11px;
    }

}

@media screen and (max-width: 1000px){
	header{display:inline-block; padding:0; width:100%;}
	.logo-wrapper{display:block}
	.logo{ max-width:none; margin:0 auto; display:block;}
	.main-menu{display:block; background:#F7F7F7;}
	.main-menu ul{ display:inline-block !important;width:100%; font-size:24px;}
	.main-menu ul li{ display:none;}
	.main-menu ul li a{display:block; padding:10px;}
	.main-menu ul li a:hover{background-color:#E9E9E9;}
	.navigation-icon-container{display:block !important;}
	.idnotice{ float:none; display:inline-block;}
	.customer-selection input {padding:10px 0; font-size:24px; width:100%;}
	#add-product-to-bill label {display:block;}
	#add-product-to-bill input{display:block; font-size:24px; width:100%;}
	#qricon{padding:36px;}
	#cart{ margin:auto; width:auto;}
	#cart tr, #cart th{font-size:8px; padding:10px 0;}
	#cart tr th input{width:50px; font-size:8px;}
	#boughtitemwrapper input[type=number]{width:30px; font-size:9px;}
	.login-form-wrapper input{ width:90%;  font-size:36px; padding:20px 0; margin:0 auto;}
}
/* =========================================================
   BABY MALL - STORE MANAGEMENT
   ========================================================= */


/* ---------- Store Management Page ---------- */

.store-page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 25px 30px 50px;
    box-sizing: border-box;
}


/* ---------- Page Header ---------- */

.store-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    gap: 20px;
}

.store-page-title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #222;
}

.store-page-subtitle {
    margin: 6px 0 0;
    color: #777;
    font-size: 14px;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.store-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 25px;
    align-items: start;
}


/* =========================================================
   STORE CARD
   ========================================================= */

.store-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.store-card-header {
    padding: 18px 22px;
    border-bottom: 1px solid #eeeeee;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 15px;
}

.store-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 650;
    color: #222;
}

.store-card-description {
    margin: 4px 0 0;
    color: #888;
    font-size: 13px;
}


/* =========================================================
   STORE COUNT
   ========================================================= */

.store-count {
    background: #f1f5f9;
    color: #475569;

    border-radius: 20px;

    padding: 5px 12px;

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   AVAILABLE STORE LIST
   ========================================================= */

.store-list {
    padding: 10px 20px 20px;
}

.store-item {
    display: grid;

    grid-template-columns: 45px minmax(0, 1fr) auto;

    gap: 15px;

    align-items: center;

    padding: 17px 5px;

    border-bottom: 1px solid #eeeeee;

    transition: background 0.2s ease;
}

.store-item:last-child {
    border-bottom: none;
}

.store-item:hover {
    background: #fafafa;
}


/* ---------- Store Icon ---------- */

.store-icon {
    width: 45px;
    height: 45px;

    border-radius: 10px;

    background: #f3f4f6;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 21px;
}


/* ---------- Store Information ---------- */

.store-information {
    min-width: 0;
}

.store-name {
    font-size: 15px;
    font-weight: 650;

    color: #222;

    margin-bottom: 5px;
}

.store-detail {
    font-size: 13px;

    color: #777;

    margin: 2px 0;

    word-break: break-word;
}

.store-detail strong {
    color: #555;

    font-weight: 500;
}


/* ---------- Active Status ---------- */

.store-status {
    font-size: 12px;

    font-weight: 600;

    color: #16803c;

    background: #eaf8ef;

    padding: 6px 10px;

    border-radius: 20px;

    white-space: nowrap;
}


/* =========================================================
   EMPTY STORE STATE
   ========================================================= */

.empty-stores {
    padding: 60px 25px;

    text-align: center;
}

.empty-icon {
    font-size: 42px;

    margin-bottom: 12px;
}

.empty-title {
    font-size: 17px;

    font-weight: 650;

    color: #333;

    margin-bottom: 6px;
}

.empty-description {
    color: #888;

    font-size: 13px;

    line-height: 1.6;

    max-width: 400px;

    margin: 0 auto;
}


/* =========================================================
   ADD STORE FORM
   ========================================================= */

.add-store-body {
    padding: 22px;
}

.store-form-group {
    margin-bottom: 18px;
}

.store-form-group label {
    display: block;

    font-size: 13px;

    font-weight: 600;

    color: #444;

    margin-bottom: 7px;
}

.store-form-group label .required {
    color: #e53935;
}


/* ---------- Text Inputs ---------- */

.store-form-group input {
    width: 100%;

    box-sizing: border-box;

    height: 44px;

    padding: 0 13px;

    border: 1px solid #d7d7d7;

    border-radius: 7px;

    background: #fff;

    color: #222;

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* ---------- Address ---------- */

.store-form-group textarea {
    width: 100%;

    box-sizing: border-box;

    min-height: 95px;

    padding: 11px 13px;

    border: 1px solid #d7d7d7;

    border-radius: 7px;

    background: #fff;

    color: #222;

    font-size: 14px;

    outline: none;

    resize: vertical;

    font-family: inherit;

    line-height: 1.5;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* ---------- Focus ---------- */

.store-form-group input:focus,
.store-form-group textarea:focus {
    border-color: #008CBA;

    box-shadow:
        0 0 0 3px rgba(0, 140, 186, 0.10);
}


/* ---------- Placeholder ---------- */

.store-form-group input::placeholder,
.store-form-group textarea::placeholder {
    color: #aaa;
}


/* =========================================================
   PHONE INPUT
   ========================================================= */

.phone-wrapper {
    position: relative;
}

.phone-prefix {
    position: absolute;

    left: 13px;
    top: 50%;

    transform: translateY(-50%);

    color: #777;

    font-size: 14px;

    pointer-events: none;
}

.phone-wrapper input {
    padding-left: 42px;
}


/* =========================================================
   CREATE STORE BUTTON
   ========================================================= */

.store-submit {
    width: 100%;

    height: 46px;

    border: none;

    border-radius: 7px;

    background: #008CBA;

    color: #fff;

    font-size: 14px;

    font-weight: 650;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.1s ease,
        opacity 0.2s ease;
}

.store-submit:hover {
    background: #006f94;
}

.store-submit:active {
    transform: translateY(1px);
}

.store-submit:disabled {
    opacity: 0.65;

    cursor: wait;
}


/* =========================================================
   INFORMATION BOX
   ========================================================= */

.store-info {
    margin-top: 18px;

    padding: 13px 14px;

    border-radius: 7px;

    background: #f7f8fa;

    border: 1px solid #eceef1;

    font-size: 12px;

    line-height: 1.6;

    color: #777;
}

.store-info strong {
    color: #555;
}


/* =========================================================
   TABLE / DATABASE INFORMATION
   ========================================================= */

.store-table-info {
    margin-top: 7px;

    font-size: 11px;

    color: #999;

    word-break: break-all;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 900px) {

    .store-layout {
        grid-template-columns: 1fr;
    }

    .store-page {
        padding: 20px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 600px) {

    .store-page {
        padding: 15px;
    }


    .store-page-header {
        display: block;
    }

    .store-page-title {
        font-size: 23px;
    }

    .store-card-header {
        padding: 16px;
    }

    .add-store-body {
        padding: 18px;
    }

    .store-list {
        padding: 8px 15px 15px;
    }

    .store-item {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .store-icon {
        width: 40px;
        height: 40px;
    }

    .store-status {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 400px) {

    .store-page {
        padding: 10px;
    }

    .store-page-title {
        font-size: 21px;
    }

    .store-card-title {
        font-size: 16px;
    }

    .store-form-group input {
        height: 42px;
    }

    .store-submit {
        height: 44px;
    }

}


/* ---------- Login Variables ---------- */

.baby-login-page {

    --login-primary: #6c63ff;
    --login-primary-dark: #554bd8;
    --login-secondary: #ff6b9d;

    --login-text: #25253d;
    --login-muted: #8a8aa3;

    --login-border: #e7e7f0;

    --mouse-x: 50%;
    --mouse-y: 50%;

    min-height: 100vh;
    margin: 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at var(--mouse-x) var(--mouse-y),
            rgba(108, 99, 255, 0.16),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f8f8ff 0%,
            #f2f0ff 45%,
            #fff5f8 100%
        );

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    position: relative;
}


/* ---------- Background ---------- */

.login-background {

    position: fixed;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: 0;
}


.login-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(1px);

    opacity: .55;

    animation:
        loginFloat 9s ease-in-out infinite;
}


.login-orb-one {

    width: 320px;
    height: 320px;

    top: -120px;
    left: -100px;

    background:
        radial-gradient(
            circle,
            rgba(108, 99, 255, .24),
            transparent 70%
        );
}


.login-orb-two {

    width: 420px;
    height: 420px;

    right: -180px;
    bottom: -170px;

    background:
        radial-gradient(
            circle,
            rgba(255, 107, 157, .22),
            transparent 70%
        );

    animation-delay: -3s;
}


.login-orb-three {

    width: 200px;
    height: 200px;

    top: 35%;
    right: 12%;

    background:
        radial-gradient(
            circle,
            rgba(108, 99, 255, .12),
            transparent 70%
        );

    animation-delay: -6s;
}


/* ---------- Floating Dots ---------- */

.login-dot {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: rgba(108, 99, 255, .3);

    animation:
        loginDotFloat 5s ease-in-out infinite;
}


.login-dot-one {

    top: 18%;
    left: 20%;
}


.login-dot-two {

    top: 70%;
    left: 12%;

    animation-delay: -2s;
}


.login-dot-three {

    top: 25%;
    right: 20%;

    animation-delay: -4s;
}


/* ---------- Main Wrapper ---------- */

.login-wrapper {

    width: 100%;

    padding: 30px;

    box-sizing: border-box;

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: center;
}


/* ---------- Login Card ---------- */

.login-card {

    width: 100%;

    max-width: 430px;

    box-sizing: border-box;

    background: rgba(255, 255, 255, .82);

    border: 1px solid rgba(255, 255, 255, .9);

    border-radius: 28px;

    padding: 42px 42px 30px;

    box-shadow:
        0 30px 80px rgba(55, 50, 110, .14),
        0 8px 25px rgba(55, 50, 110, .07);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    opacity: 0;

    transform:
        translateY(35px)
        scale(.97);

    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.8,.2,1);

    position: relative;

    overflow: hidden;
}


.login-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--login-primary),
            var(--login-secondary)
        );
}


.login-card-visible {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* ---------- Brand ---------- */

.login-brand {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-bottom: 30px;
}


.login-logo-box {

    width: 64px;
    height: 64px;

    border-radius: 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #ffffff;

    box-shadow:
        0 8px 25px rgba(108, 99, 255, .14);

    animation:
        loginLogoFloat 4s ease-in-out infinite;
}


.login-logo {

    max-width: 50px;
    max-height: 50px;

    object-fit: contain;

    display: block;
}


.login-brand-text h1 {

    margin: 0;

    font-size: 25px;

    font-weight: 800;

    letter-spacing: -.7px;

    color: var(--login-text);
}


.login-brand-text p {

    margin: 3px 0 0;

    font-size: 12px;

    color: var(--login-muted);

    letter-spacing: .2px;
}


/* ---------- Heading ---------- */

.login-heading {

    text-align: center;

    margin-bottom: 28px;
}


.login-heading h2 {

    margin: 0 0 7px;

    font-size: 27px;

    font-weight: 750;

    letter-spacing: -.8px;

    color: var(--login-text);
}


.login-heading p {

    margin: 0;

    font-size: 14px;

    color: var(--login-muted);
}


/* ---------- Form ---------- */

.login-form-wrapper {

    display: flex;

    flex-direction: column;

    gap: 19px;

    margin: 0;
}


.login-field {

    width: 100%;
}


.login-field label {

    display: block;

    margin-bottom: 8px;

    font-size: 13px;

    font-weight: 650;

    color: #49495f;

    letter-spacing: .1px;
}


/* ---------- Input Wrapper ---------- */

.login-input-wrapper {

    height: 56px;

    width: 100%;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    position: relative;

    border: 1px solid var(--login-border);

    border-radius: 15px;

    background: rgba(255,255,255,.88);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


.login-input-wrapper:hover {

    border-color: #d5d3ed;
}


.login-input-active {

    border-color: var(--login-primary) !important;

    box-shadow:
        0 0 0 4px rgba(108, 99, 255, .09),
        0 7px 20px rgba(108, 99, 255, .07);

    transform: translateY(-1px);
}


/* ---------- Input Icon ---------- */

.login-input-icon {

    width: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}


.login-input-icon svg {

    width: 20px;
    height: 20px;

    fill: #9999ad;

    transition: fill .25s ease;
}


.login-input-active .login-input-icon svg {

    fill: var(--login-primary);
}


/* ---------- Inputs ---------- */

.login-input-wrapper input {

    width: 100%;

    height: 100%;

    border: 0 !important;

    outline: none !important;

    background: transparent !important;

    box-shadow: none !important;

    padding: 0 48px 0 0 !important;

    box-sizing: border-box;

    font-size: 15px;

    color: var(--login-text);

    margin: 0 !important;
}


.login-input-wrapper input::placeholder {

    color: #aaaabd;

    transition: opacity .2s ease;
}


.login-input-wrapper input:focus::placeholder {

    opacity: .45;
}


/* ---------- Password Toggle ---------- */

.login-password-toggle {

    position: absolute;

    right: 13px;

    top: 50%;

    transform: translateY(-50%);

    width: 36px;
    height: 36px;

    border: 0;

    background: transparent;

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    transition:
        background .2s ease,
        transform .2s ease;
}


.login-password-toggle:hover {

    background: rgba(108, 99, 255, .08);

    transform:
        translateY(-50%)
        scale(1.05);
}


.login-password-toggle svg {

    width: 19px;
    height: 19px;

    fill: #9292a8;
}


.eye-closed {

    display: none;
}


/* ---------- Submit Button ---------- */

.login-submit {

    height: 57px;

    width: 100%;

    margin-top: 4px;

    border: 0;

    border-radius: 16px;

    position: relative;

    overflow: hidden;

    cursor: pointer;

    color: #fff;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: .2px;

    background:
        linear-gradient(
            110deg,
            var(--login-primary),
            #8179ff,
            var(--login-secondary)
        );

    background-size: 200% 100%;

    box-shadow:
        0 12px 28px rgba(108, 99, 255, .25);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-position .5s ease;
}


.login-submit:hover {

    transform: translateY(-2px);

    background-position: 100% 0;

    box-shadow:
        0 16px 34px rgba(108, 99, 255, .30);
}


.login-submit:active {

    transform: translateY(1px);

    box-shadow:
        0 7px 16px rgba(108, 99, 255, .20);
}


.login-submit:disabled {

    cursor: wait;

    opacity: .8;

    transform: none;
}


.login-button-text {

    position: relative;

    z-index: 2;

    transition: opacity .2s ease;
}


.login-button-arrow {

    position: relative;

    z-index: 2;

    margin-left: 8px;

    font-size: 20px;

    vertical-align: -1px;

    transition:
        transform .25s ease;
}


.login-submit:hover .login-button-arrow {

    transform: translateX(5px);
}


/* ---------- Button Ripple ---------- */

.login-ripple {

    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: rgba(255,255,255,.4);

    transform: translate(-50%, -50%);

    animation:
        loginRipple .65s ease-out forwards;

    pointer-events: none;
}


/* ---------- Loader ---------- */

.login-loader {

    display: none;

    position: absolute;

    left: 50%;

    top: 50%;

    width: 20px;
    height: 20px;

    margin:
        -10px 0 0 -10px;

    border: 2px solid rgba(255,255,255,.4);

    border-top-color: #fff;

    border-radius: 50%;

    animation:
        loginSpin .7s linear infinite;

    z-index: 3;
}


.login-loading .login-loader {

    display: block;
}


.login-loading .login-button-text,
.login-loading .login-button-arrow {

    opacity: 0;
}


/* ---------- Footer ---------- */

.login-footer {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 25px;

    font-size: 11px;

    color: #9a9aaf;
}


.login-footer-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #4fc58a;

    box-shadow:
        0 0 0 4px rgba(79,197,138,.1);

    animation:
        loginPulse 2s ease-in-out infinite;
}


/* ---------- Login Error Shake ---------- */

.login-shake {

    animation:
        loginShake .45s ease;
}


/* ---------- Animations ---------- */

@keyframes loginFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-25px) scale(1.04);
    }

}


@keyframes loginDotFloat {

    0%,
    100% {
        transform: translateY(0);
        opacity: .3;
    }

    50% {
        transform: translateY(-18px);
        opacity: .65;
    }

}


@keyframes loginLogoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }

}


@keyframes loginRipple {

    0% {
        width: 10px;
        height: 10px;
        opacity: .8;
    }

    100% {
        width: 500px;
        height: 500px;
        opacity: 0;
    }

}


@keyframes loginSpin {

    to {
        transform: rotate(360deg);
    }

}


@keyframes loginPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.25);
        opacity: .65;
    }

}


@keyframes loginShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-9px);
    }

    40% {
        transform: translateX(8px);
    }

    60% {
        transform: translateX(-6px);
    }

    80% {
        transform: translateX(5px);
    }

}


/* ---------- Responsive ---------- */

@media (max-width: 600px) {

    .login-wrapper {

        padding: 18px;
    }


    .login-card {

        padding: 34px 25px 25px;

        border-radius: 24px;
    }


    .login-brand {

        margin-bottom: 25px;
    }


    .login-heading h2 {

        font-size: 24px;
    }


    .login-logo-box {

        width: 58px;
        height: 58px;

        border-radius: 16px;
    }


    .login-logo {

        max-width: 46px;
        max-height: 46px;
    }

}


@media (max-width: 380px) {

    .login-card {

        padding: 30px 20px 22px;
    }


    .login-brand-text h1 {

        font-size: 22px;
    }


    .login-brand-text p {

        font-size: 11px;
    }


    .login-heading h2 {

        font-size: 22px;
    }

}

/* =========================================================
   BABY MALL PROFESSIONAL HEADER
   Append to the END of storepanelcss.css
   ========================================================= */


/* ================= HEADER ================= */

.bm-header {

    width: 100%;

    min-height: 72px;

    padding: 0 22px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    gap: 22px;

    position: relative;

    z-index: 9999;

    background:
        rgba(255, 255, 255, .96);

    border-bottom: 1px solid #ececf3;

    box-shadow:
        0 4px 22px rgba(40, 40, 80, .07);

}


/* ================= BRAND ================= */

.bm-brand {

    flex-shrink: 0;
}


.bm-brand-link {

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    color: inherit;
}


.bm-logo-box {

    width: 43px;
    height: 43px;

    border-radius: 12px;

    overflow: hidden;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #fff;

    box-shadow:
        0 5px 16px rgba(80, 70, 160, .12);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.bm-brand-link:hover .bm-logo-box {

    transform:
        translateY(-2px)
        rotate(-2deg);

    box-shadow:
        0 8px 22px rgba(80, 70, 160, .18);
}


.bm-logo {

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.bm-brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1.05;
}


.bm-brand-name {

    font-size: 19px;

    font-weight: 800;

    letter-spacing: -.5px;

    color: #292942;
}


.bm-brand-subtitle {

    margin-top: 4px;

    font-size: 9px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: #9898aa;
}


/* ================= NAVIGATION ================= */

.bm-navigation {

    flex: 1;

    min-width: 0;
}


.bm-menu {

    list-style: none;

    padding: 0;
    margin: 0;

    display: flex;

    align-items: center;

    gap: 3px;
}


.bm-menu-item {

    position: relative;

    list-style: none;
}


.bm-menu-link {

    min-height: 42px;

    padding: 0 12px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    gap: 7px;

    border: 0;

    border-radius: 11px;

    background: transparent;

    color: #5b5b70;

    text-decoration: none;

    font-size: 12px;

    font-weight: 650;

    white-space: nowrap;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;
}


.bm-menu-link:hover {

    color: #6159dc;

    background: #f4f3ff;

    transform: translateY(-1px);
}


.bm-menu-icon {

    width: 18px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    font-size: 15px;

    color: #77758f;

    transition: color .2s ease;
}


.bm-menu-link:hover .bm-menu-icon {

    color: #6c63ff;
}


/* ================= DROPDOWN ================= */

.bm-dropdown-toggle {

    font-family: inherit;
}


.bm-chevron {

    margin-left: 2px;

    font-size: 12px;

    color: #9999aa;

    transition:
        transform .25s ease;
}


.bm-dropdown.open
.bm-chevron {

    transform: rotate(180deg);
}


.bm-dropdown-menu {

    position: absolute;

    top: calc(100% + 10px);

    left: 0;

    min-width: 230px;

    padding: 8px;

    box-sizing: border-box;

    background: rgba(255,255,255,.98);

    border: 1px solid #ececf4;

    border-radius: 15px;

    box-shadow:
        0 18px 45px rgba(40, 40, 80, .14);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-8px)
        scale(.98);

    transform-origin: top left;

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;
}


.bm-dropdown.open
.bm-dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


.bm-dropdown-title {

    padding: 8px 11px 7px;

    font-size: 9px;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: #a0a0b0;
}


.bm-dropdown-link {

    min-height: 42px;

    padding: 0 11px;

    display: flex;

    align-items: center;

    gap: 10px;

    border-radius: 10px;

    text-decoration: none;

    color: #555568;

    font-size: 12px;

    font-weight: 600;

    transition:
        background .2s ease,
        color .2s ease,
        padding-left .2s ease;
}


.bm-dropdown-link:hover {

    background: #f5f4ff;

    color: #6259dd;

    padding-left: 15px;
}


.bm-dropdown-icon {

    width: 22px;
    height: 22px;

    border-radius: 7px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f3f2ff;

    color: #6c63ff;

    font-size: 12px;

    flex-shrink: 0;
}


.bm-dropdown-divider {

    height: 1px;

    margin: 7px 4px;

    background: #eeeeF4;
}


.bm-logout-link {

    color: #df5964;
}


.bm-logout-link .bm-dropdown-icon {

    background: #fff0f1;

    color: #df5964;
}


.bm-logout-link:hover {

    background: #fff5f5;

    color: #d64e59;
}


/* ================= HEADER RIGHT ================= */

.bm-header-right {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}


/* ================= STORE SELECTOR ================= */

.bm-store-selector {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.bm-store-label {

    padding-left: 7px;

    font-size: 8px;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: .8px;

    color: #9999aa;
}


.bm-store-select-wrap {

    height: 38px;

    min-width: 170px;

    position: relative;

    display: flex;

    align-items: center;

    border: 1px solid #e7e7ef;

    border-radius: 10px;

    background: #fafaff;

    overflow: hidden;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.bm-store-select-wrap:focus-within {

    border-color: #8a83ed;

    box-shadow:
        0 0 0 3px rgba(108,99,255,.08);
}


.bm-store-icon {

    width: 32px;

    display: flex;

    justify-content: center;

    color: #6c63ff;

    font-size: 13px;
}


.bm-store-select-wrap select {

    width: 100%;
    height: 100%;

    padding: 0 28px 0 0;

    border: 0 !important;

    outline: 0 !important;

    appearance: none;
    -webkit-appearance: none;

    background: transparent !important;

    box-shadow: none !important;

    color: #4d4d60;

    font-size: 11px;

    font-weight: 650;

    cursor: pointer;
}


.bm-select-arrow {

    position: absolute;

    right: 9px;

    pointer-events: none;

    color: #8d8d9e;

    font-size: 12px;
}


/* ================= USER ================= */

.bm-user-area {

    position: relative;
}


.bm-user-button {

    min-height: 45px;

    padding: 4px 7px;

    border: 0;

    border-radius: 13px;

    display: flex;

    align-items: center;

    gap: 8px;

    background: transparent;

    cursor: pointer;

    font-family: inherit;

    transition:
        background .2s ease;
}


.bm-user-button:hover {

    background: #f5f4ff;
}


.bm-user-avatar,
.bm-user-large-avatar {

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #fff;

    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #6c63ff,
            #9a79ff
        );

    box-shadow:
        0 5px 14px rgba(108,99,255,.22);
}


.bm-user-avatar {

    width: 34px;
    height: 34px;

    font-size: 13px;
}


.bm-user-info {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    max-width: 100px;
}


.bm-user-info strong {

    max-width: 100px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 11px;

    color: #3f3f53;
}


.bm-user-info small {

    margin-top: 2px;

    font-size: 8px;

    color: #9292a4;
}


.bm-user-chevron {

    font-size: 11px;

    color: #9999aa;

    transition:
        transform .2s ease;
}


.bm-user-button.open
.bm-user-chevron {

    transform: rotate(180deg);
}


/* ================= USER DROPDOWN ================= */

.bm-user-dropdown {

    position: absolute;

    top: calc(100% + 10px);

    right: 0;

    width: 255px;

    padding: 10px;

    box-sizing: border-box;

    border: 1px solid #ececf3;

    border-radius: 16px;

    background: rgba(255,255,255,.98);

    box-shadow:
        0 20px 45px rgba(40,40,80,.15);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-8px)
        scale(.98);

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;
}


.bm-user-dropdown.open {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


.bm-user-dropdown-header {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 8px;
}


.bm-user-large-avatar {

    width: 42px;
    height: 42px;

    font-size: 16px;
}


.bm-user-dropdown-header strong {

    display: block;

    font-size: 12px;

    color: #3f3f53;
}


.bm-user-dropdown-header small {

    display: block;

    margin-top: 4px;

    font-size: 9px;

    color: #9292a4;
}


.bm-access-info {

    padding: 7px 9px 10px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.bm-access-info span {

    font-size: 10px;

    color: #9696a7;
}


.bm-access-info strong {

    padding: 4px 8px;

    border-radius: 6px;

    background: #f3f2ff;

    color: #655de0;

    font-size: 9px;
}


.bm-user-logout {

    height: 39px;

    padding: 0 11px;

    display: flex;

    align-items: center;

    gap: 9px;

    border-radius: 9px;

    text-decoration: none;

    color: #dc5964;

    font-size: 11px;

    font-weight: 650;

    transition:
        background .2s ease;
}


.bm-user-logout:hover {

    background: #fff2f3;
}


/* ================= ACCESS NOTICE ================= */

.bm-access-notice {

    min-height: 25px;

    padding: 0 22px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    gap: 7px;

    background: #f8f8fc;

    border-bottom: 1px solid #eeeeF4;

    color: #9292a2;

    font-size: 9px;

    font-weight: 500;
}


.bm-access-notice strong {

    color: #66657c;

    font-weight: 700;
}


.bm-access-separator {

    margin: 0 5px;

    color: #c4c4ce;
}


.bm-access-status {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #48c78e;

    box-shadow:
        0 0 0 3px rgba(72,199,142,.10);
}


/* ================= MOBILE MENU BUTTON ================= */

.bm-mobile-menu {

    display: none;

    width: 42px;
    height: 42px;

    margin-left: auto;

    border: 0;

    border-radius: 11px;

    background: #f5f4ff;

    cursor: pointer;

    padding: 10px;
}


.bm-mobile-menu span {

    display: block;

    height: 2px;

    margin: 4px 0;

    border-radius: 2px;

    background: #6c63ff;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


.bm-mobile-menu.open span:nth-child(1) {

    transform:
        translateY(6px)
        rotate(45deg);
}


.bm-mobile-menu.open span:nth-child(2) {

    opacity: 0;
}


.bm-mobile-menu.open span:nth-child(3) {

    transform:
        translateY(-6px)
        rotate(-45deg);
}


/* ================= RESPONSIVE ================= */

@media (max-width: 1250px) {

    .bm-header {

        gap: 12px;

        padding: 0 14px;
    }


    .bm-menu-link {

        padding: 0 8px;

        font-size: 11px;
    }


    .bm-menu-icon {

        display: none;
    }


    .bm-store-select-wrap {

        min-width: 145px;
    }

}


@media (max-width: 1050px) {

    .bm-brand-text {

        display: none;
    }


    .bm-header {

        gap: 8px;
    }


    .bm-menu-link {

        padding: 0 7px;
    }


    .bm-user-info {

        display: none;
    }

}


@media (max-width: 900px) {

    .bm-header {

        min-height: 65px;

        padding: 0 15px;
    }


    .bm-mobile-menu {

        display: block;
    }


    .bm-navigation {

        position: absolute;

        top: calc(100% + 1px);

        left: 0;
        right: 0;

        padding: 10px;

        background: rgba(255,255,255,.98);

        border-bottom: 1px solid #ececf3;

        box-shadow:
            0 15px 30px rgba(40,40,80,.10);

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-10px);

        transition:
            opacity .25s ease,
            visibility .25s ease,
            transform .25s ease;
    }


    .bm-navigation.mobile-open {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);
    }


    .bm-menu {

        flex-direction: column;

        align-items: stretch;

        gap: 3px;
    }


    .bm-menu-link {

        width: 100%;

        justify-content: flex-start;

        padding: 0 14px;

        font-size: 13px;
    }


    .bm-menu-icon {

        display: inline-flex;
    }


    .bm-dropdown-menu {

        position: static;

        width: 100%;

        margin-top: 4px;

        display: none;

        box-shadow: none;

        border-radius: 11px;

        background: #f9f9fd;

        transform: none;

        opacity: 1;

        visibility: visible;
    }


    .bm-dropdown.open
    .bm-dropdown-menu {

        display: block;
    }


    .bm-header-right {

        margin-left: auto;
    }


    .bm-store-selector {

        display: flex;
        max-width: 180px;
    }


    .bm-logout-mobile {

        display: block;
    }

}


@media (max-width: 600px) {

    .bm-header {

        min-height: 60px;
    }


    .bm-logo-box {

        width: 39px;
        height: 39px;
    }


    .bm-user-button {

        padding: 3px;
    }


    .bm-user-chevron {

        display: none;
    }


    .bm-access-notice {

        padding: 0 14px;
    }


    .bm-user-dropdown {

        position: fixed;

        top: 70px;

        right: 12px;

        width: calc(100vw - 24px);

        max-width: 300px;
    }

}


/* =========================================================
   BABYMALL - SELLING DESK CUSTOMER SELECTION
   ========================================================= */

.sellingdesk-customer {
    width: min(100%, 760px);
    margin: 35px auto;
    padding: 0 20px 40px;
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.sellingdesk-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.sellingdesk-title-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f6fb;
    font-size: 21px;
}

.sellingdesk-title h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.sellingdesk-title p {
    margin: 4px 0 0;
    font-size: 14px;
    opacity: .65;
}


/* ---------------------------------------------------------
   PHONE SEARCH
   --------------------------------------------------------- */

.sellingdesk-search {
    position: relative;
    margin-bottom: 30px;
}

.phone-input-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid #dfe4eb;
    border-radius: 15px;
    background: #fff;
    min-height: 62px;
    transition: .2s ease;
}

.phone-input-wrap:focus-within {
    border-color: #8d9bb0;
    box-shadow: 0 0 0 4px rgba(100, 120, 145, .08);
}

.phone-icon {
    width: 52px;
    min-width: 52px;
    text-align: center;
    font-size: 18px;
    opacity: .55;
}

.phone-input-wrap input {
    flex: 1;
    min-width: 0;
    height: 60px;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 45px 0 0 !important;
    font-size: 17px;
    font-weight: 500;
}

.phone-input-wrap input::placeholder {
    opacity: .5;
}

.clear-phone {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f3f6;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    opacity: .65;
}

.clear-phone:hover {
    opacity: 1;
}


/* ---------------------------------------------------------
   LIVE SEARCH RESULTS
   --------------------------------------------------------- */

.customer-search-results {
    position: absolute;
    z-index: 100;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    display: none;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e6ec;
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .10);
}

.customer-search-results.show {
    display: block;
}

.customer-result {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 14px 16px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background .15s ease;
    border-bottom: 1px solid #edf0f3;
}

.customer-result:last-child {
    border-bottom: 0;
}

.customer-result:hover,
.customer-result:active {
    background: #f7f9fb;
}

.customer-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f3f7;
    font-size: 15px;
    font-weight: 700;
}

.customer-result-info {
    min-width: 0;
    flex: 1;
}

.customer-result-name {
    display: block;
    font-size: 15px;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-result-phone {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    opacity: .62;
}

.customer-result-arrow {
    opacity: .35;
    font-size: 14px;
}


/* ---------------------------------------------------------
   SECTION HEADING
   --------------------------------------------------------- */

.recent-customers-section {
    width: 100%;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 13px;
}

.section-heading h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.section-heading p {
    margin: 4px 0 0;
    font-size: 13px;
    opacity: .58;
}

.recent-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    box-sizing: border-box;
    border-radius: 20px;
    background: #f1f3f6;
    font-size: 12px;
    font-weight: 700;
}


/* ---------------------------------------------------------
   RECENT CUSTOMER LIST
   --------------------------------------------------------- */

.recent-customers-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recent-customer {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 66px;
    padding: 10px 14px;
    box-sizing: border-box;
    border: 1px solid #e5e8ed;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: transform .15s ease,
                box-shadow .15s ease,
                border-color .15s ease;
}

.recent-customer:hover {
    transform: translateY(-1px);
    border-color: #d6dbe2;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .06);
}

.recent-customer:active {
    transform: scale(.99);
}

.recent-customer .customer-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
}

.recent-customer-info {
    min-width: 0;
    flex: 1;
}

.recent-customer-name {
    display: block;
    font-size: 15px;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-customer-phone {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    opacity: .62;
}

.recent-customer-action {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f3f5f7;
    opacity: .7;
    font-size: 13px;
}


/* ---------------------------------------------------------
   LOADING
   --------------------------------------------------------- */

.customer-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 70px;
    padding: 10px;
    border: 1px solid #e5e8ed;
    border-radius: 14px;
    font-size: 13px;
    opacity: .6;
}

.customer-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #dfe3e8;
    border-top-color: #707985;
    border-radius: 50%;
    animation: sellingdesk-spin .7s linear infinite;
}

@keyframes sellingdesk-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ---------------------------------------------------------
   EMPTY / NO RESULT
   --------------------------------------------------------- */

.customer-empty {
    padding: 20px;
    text-align: center;
    font-size: 13px;
    opacity: .58;
}

.customer-empty-icon {
    font-size: 21px;
    margin-bottom: 7px;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .sellingdesk-customer {
        margin: 20px auto;
        padding: 0 13px 30px;
    }

    .sellingdesk-title {
        gap: 11px;
        margin-bottom: 18px;
    }

    .sellingdesk-title-icon {
        width: 45px;
        height: 45px;
        min-width: 45px;
        border-radius: 13px;
        font-size: 18px;
    }

    .sellingdesk-title h2 {
        font-size: 20px;
    }

    .sellingdesk-title p {
        font-size: 12px;
    }

    .phone-input-wrap {
        min-height: 58px;
        border-radius: 13px;
    }

    .phone-input-wrap input {
        height: 56px;
        font-size: 16px;
    }

    .phone-icon {
        width: 45px;
        min-width: 45px;
    }

    .customer-search-results {
        border-radius: 12px;
    }

    .customer-result {
        padding: 12px;
    }

    .customer-result .customer-avatar {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .recent-customers-section {
        margin-top: 5px;
    }

    .section-heading h3 {
        font-size: 16px;
    }

    .section-heading p {
        font-size: 12px;
    }

    .recent-customer {
        min-height: 62px;
        padding: 9px 11px;
        border-radius: 12px;
    }

    .recent-customer .customer-avatar {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .recent-customer-name {
        font-size: 14px;
    }

    .recent-customer-phone {
        font-size: 12px;
    }

    .recent-customer-action {
        width: 31px;
        height: 31px;
        min-width: 31px;
    }
}


/* ---------------------------------------------------------
   VERY SMALL PHONES
   --------------------------------------------------------- */

@media (max-width: 380px) {

    .sellingdesk-customer {
        padding-left: 10px;
        padding-right: 10px;
    }

    .sellingdesk-title p {
        display: none;
    }

    .section-heading p {
        display: none;
    }

    .phone-input-wrap input {
        font-size: 15px;
    }

    .recent-customer {
        gap: 9px;
    }
}

/* =========================================
ADD CUSTOMER PAGE
========================================= */

.add-customer-page {
width: 100%;
padding: 24px 20px;
box-sizing: border-box;
}

.add-customer-card {
width: 100%;
max-width: 620px;
margin: 0 auto;
background: #fff;
border: 1px solid #e6e9ee;
border-radius: 14px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
overflow: hidden;
}

.add-customer-header {
padding: 22px 24px;
border-bottom: 1px solid #edf0f3;
}

.add-customer-header h2 {
margin: 0;
font-size: 22px;
font-weight: 600;
color: #1f2937;
}

.add-customer-header p {
margin: 6px 0 0;
font-size: 14px;
color: #6b7280;
}

.add-customer-form {
padding: 24px;
}

.add-customer-field {
margin-bottom: 20px;
}

.add-customer-field label {
display: block;
margin-bottom: 7px;
font-size: 14px;
font-weight: 600;
color: #374151;
}

.add-customer-field label span {
color: #dc2626;
margin-left: 3px;
}

.add-customer-field input {
width: 100%;
height: 44px;
padding: 0 13px;
box-sizing: border-box;
border: 1px solid #d1d5db;
border-radius: 8px;
background: #fff;
color: #111827;
font-size: 15px;
outline: none;
transition: border-color .2s, box-shadow .2s;
}

.add-customer-field input {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.add-customer-field input[readonly] {
background: #f5f7fa;
color: #4b5563;
cursor: not-allowed;
}

.customer-phone-status {
display: flex;
align-items: center;
gap: 6px;
margin-top: 7px;
font-size: 12px;
color: #16a34a;
}

.customer-phone-status::before {
content: "✓";
font-weight: 700;
}

.add-customer-actions {
margin-top: 8px;
}

.add-customer-button {
width: 100%;
min-height: 44px;
border: 0;
border-radius: 8px;
padding: 0 18px;
background: #2563eb;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background .2s, transform .1s;
}

.add-customer-button {
background: #1d4ed8;
}

.add-customer-button {
transform: translateY(1px);
}

@media (max-width: 600px) {

.add-customer-page {
    padding: 14px 10px;
}

.add-customer-card {
    border-radius: 10px;
}

.add-customer-header {
    padding: 18px;
}

.add-customer-form {
    padding: 18px;
}

.add-customer-header h2 {
    font-size: 20px;
}

}

/*--------------------------category manager---------------*/
/* =========================================================
   BABY MALL CATEGORY MANAGER
   ========================================================= */

.bm-category-manager {
    width: min(1180px, 96vw);
    margin: 0 auto;
    padding: 24px;
    box-sizing: border-box;
    color: #20232a;
    font-family: inherit;
}


/* =========================================================
   HEADER
   ========================================================= */

.bm-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
}

.bm-category-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #7b8190;
    margin-bottom: 5px;
}

.bm-category-header h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.15;
}

.bm-category-header p {
    margin: 7px 0 0;
    color: #777d89;
    font-size: 14px;
}

.bm-category-total {
    min-width: 90px;
    padding: 14px 18px;
    text-align: center;
    background: #f7f8fb;
    border: 1px solid #e4e7ed;
    border-radius: 14px;
}

.bm-category-total strong {
    display: block;
    font-size: 25px;
    line-height: 1;
}

.bm-category-total span {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    color: #7b8190;
}


/* =========================================================
   CARDS
   ========================================================= */

.bm-category-form-card,
.bm-category-list-card {
    background: #ffffff;
    border: 1px solid #e3e6eb;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(0,0,0,.05);
    margin-bottom: 22px;
    overflow: hidden;
}

.bm-category-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 22px;
    border-bottom: 1px solid #eceef2;
}

.bm-category-section-heading h3 {
    margin: 0;
    font-size: 18px;
}

.bm-category-section-heading p {
    margin: 5px 0 0;
    color: #858b96;
    font-size: 13px;
}


/* =========================================================
   FORM
   ========================================================= */

#newcatadd {
    padding: 22px;
}

.bm-category-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

.bm-category-field {
    min-width: 0;
}

.bm-span-2 {
    grid-column: span 2;
}

.bm-span-4 {
    grid-column: span 4;
}

.bm-category-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #454a54;
}

.bm-category-field label span {
    color: #d33b4a;
}

.bm-category-field input,
.bm-category-field select,
.bm-category-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dfe2e8;
    border-radius: 10px;
    background: #fff;
    color: #252830;
    font-family: inherit;
    font-size: 14px;
    padding: 11px 12px;
    outline: none;
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.bm-category-field textarea {
    resize: vertical;
    min-height: 95px;
}

.bm-category-field input:focus,
.bm-category-field select:focus,
.bm-category-field textarea:focus {
    border-color: #8d96a6;
    box-shadow: 0 0 0 3px rgba(80,90,110,.08);
}

.bm-category-field input[readonly] {
    background: #f6f7f9;
    color: #777d88;
}

.bm-category-field small {
    display: block;
    margin-top: 5px;
    color: #9499a3;
    font-size: 11px;
    line-height: 1.4;
}

.bm-category-system-field {
    height: 42px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px dashed #cfd3da;
    border-radius: 10px;
    background: #f7f8fa;
    color: #858b96;
    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   FORM FOOTER
   ========================================================= */

.bm-category-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eceef2;
}

.bm-category-preview {
    color: #7d838e;
    font-size: 12px;
}

.bm-category-preview strong {
    color: #333740;
    margin-left: 5px;
}

.bm-category-save {
    border: 0;
    border-radius: 11px;
    padding: 11px 18px;
    background: #252a33;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform .15s ease,
        opacity .15s ease;
}

.bm-category-save:hover {
    opacity: .9;
}

.bm-category-save:active {
    transform: translateY(1px);
}

.bm-category-save span {
    margin-right: 5px;
    font-size: 17px;
}


/* =========================================================
   TREE
   ========================================================= */

.bm-category-tree {
    padding: 18px 20px 24px;
}

.bm-category-node {
    position: relative;
}

.bm-category-node + .bm-category-node {
    margin-top: 9px;
}

.bm-category-level-1,
.bm-category-level-2,
.bm-category-level-3,
.bm-category-level-4,
.bm-category-level-5 {
    margin-left: 0;
}

.bm-category-level-1 > .bm-category-card {
    margin-left: 0;
}

.bm-category-level-2 > .bm-category-card {
    margin-left: 28px;
}

.bm-category-level-3 > .bm-category-card {
    margin-left: 56px;
}

.bm-category-level-4 > .bm-category-card {
    margin-left: 84px;
}

.bm-category-level-5 > .bm-category-card {
    margin-left: 112px;
}

.bm-category-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 15px 16px;
    border: 1px solid #e4e7ec;
    border-radius: 13px;
    background: #fff;
    transition:
        box-shadow .15s ease,
        border-color .15s ease;
}

.bm-category-card:hover {
    border-color: #d2d6dd;
    box-shadow: 0 5px 18px rgba(0,0,0,.045);
}

.bm-category-main {
    min-width: 0;
    flex: 1;
}

.bm-category-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.bm-category-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    background: #f0f2f5;
    color: #6d7380;
    font-size: 10px;
    font-weight: 800;
}

.bm-category-name {
    font-size: 16px;
    color: #252932;
}

.bm-category-status {
    padding: 3px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}

.bm-active {
    background: #eaf7ef;
    color: #27834a;
}

.bm-inactive {
    background: #fceced;
    color: #ad4650;
}

.bm-category-path {
    margin-top: 5px;
    color: #8a909a;
    font-size: 11px;
}

.bm-category-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 11px;
    color: #7c828d;
    font-size: 11px;
}

.bm-category-meta b {
    color: #3b4049;
}

.bm-category-slug,
.bm-category-tags,
.bm-category-description {
    display: flex;
    gap: 9px;
    margin-top: 9px;
    color: #6e747e;
    font-size: 12px;
    line-height: 1.5;
}

.bm-field-label {
    flex: 0 0 auto;
    color: #969ba5;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.bm-category-slug code {
    padding: 2px 6px;
    border-radius: 5px;
    background: #f5f6f8;
    color: #555b66;
    font-family: monospace;
}

.bm-category-actions {
    flex: 0 0 auto;
}

.bm-category-delete {
    border: 1px solid #e4bfc3;
    border-radius: 8px;
    background: #fff;
    color: #b34852;
    padding: 7px 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.bm-category-delete:hover {
    background: #fff5f6;
}

.bm-category-empty {
    padding: 45px 20px;
    text-align: center;
    color: #9298a2;
    font-size: 14px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .bm-category-manager {
        width: 100%;
        padding: 14px;
    }

    .bm-category-form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .bm-span-4 {
        grid-column: span 2;
    }

    .bm-category-level-3 > .bm-category-card,
    .bm-category-level-4 > .bm-category-card,
    .bm-category-level-5 > .bm-category-card {
        margin-left: 28px;
    }
}

@media (max-width: 560px) {

    .bm-category-header {
        align-items: flex-start;
    }

    .bm-category-header h2 {
        font-size: 24px;
    }

    .bm-category-form-grid {
        grid-template-columns: 1fr;
    }

    .bm-span-2,
    .bm-span-4 {
        grid-column: span 1;
    }

    .bm-category-form-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .bm-category-save {
        width: 100%;
    }

    .bm-category-card {
        flex-direction: column;
    }

    .bm-category-actions {
        width: 100%;
    }

    .bm-category-delete {
        width: 100%;
    }

    .bm-category-level-2 > .bm-category-card,
    .bm-category-level-3 > .bm-category-card,
    .bm-category-level-4 > .bm-category-card,
    .bm-category-level-5 > .bm-category-card {
        margin-left: 14px;
    }
}
/*----------------------------*/
/*-------------category drodown-----------*/

/* =========================================================
   STOCK MANAGER - CATEGORY FILTER
   ========================================================= */

.bm-stock-category-filter {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 220px;
}


.bm-stock-filter-label {
    display: block;
    padding-left: 4px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: #858594;
}


.bm-stock-category-select-wrap {
   
    height: 42px;

    display: flex;
    align-items: center;

    border: 1px solid #e5e5ec;
    border-radius: 10px;

    background: #ffffff;

    overflow: hidden;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.bm-stock-category-select-wrap:hover {
    border-color: #d4d1f7;
}


.bm-stock-category-select-wrap:focus-within {
    border-color: #6c63ff;

    box-shadow:
        0 0 0 3px rgba(108, 99, 255, .09);
}


.bm-stock-category-icon {
    width: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6c63ff;

    font-size: 17px;

    flex-shrink: 0;
}


.bm-stock-category-select-wrap select {
    width: 100%;
    height: 100%;

    padding: 0 34px 0 0;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #3f3f4d;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}


.bm-stock-category-select-wrap select option {
    padding: 8px;

    color: #3f3f4d;
    background: #ffffff;

    font-size: 13px;
}


.bm-stock-category-arrow {
    position: absolute;

    right: 13px;

    pointer-events: none;

    color: #888899;

    font-size: 16px;
    line-height: 1;
}


/* =========================================================
   STOCK FILTER AREA
   ========================================================= */

#sortsearchmenu {
    display: flex;
    align-items: flex-end;
    gap: 12px;

    padding: 14px 16px;

    background: #ffffff;

    border: 1px solid #eeeeF3;
    border-radius: 12px;

    box-shadow:
        0 3px 14px rgba(30, 30, 50, .04);

    flex-wrap: wrap;
}


#sortsearchmenu > select,
#sortsearchmenu > input {
    height: 42px;

    box-sizing: border-box;

    border: 1px solid #e5e5ec;
    border-radius: 10px;

    background: #ffffff;

    padding: 0 12px;

    color: #454554;

    font-family: inherit;
    font-size: 13px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


#sortsearchmenu > select:focus,
#sortsearchmenu > input:focus {
    border-color: #6c63ff;

    box-shadow:
        0 0 0 3px rgba(108, 99, 255, .08);
}


#sortsearchmenu > input::placeholder {
    color: #a2a2ae;
}


/* Results per page */

#resultperpage {
    min-width: 125px;
}


/* Search */

#searchbox {
    min-width: 190px;
}


/* UPC */

#upcid {
    min-width: 130px;
}


/* Sort */

#sortby {
    min-width: 125px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 700px) {

    #sortsearchmenu {
        align-items: stretch;
        flex-direction: column;
    }


    .bm-stock-category-filter {
        width: 100%;
    }


    #sortsearchmenu > select,
    #sortsearchmenu > input {
        width: 100%;
        min-width: 0;
    }

}

/*---------------------------------------*/