.sqof-wrap { max-width: 1100px; }
.sqof-customer{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
gap:12px;
margin: 12px 0 12px;
padding: 12px;
border:1px solid #eee;
border-radius: 8px;
}
.sqof-customer label{ display:block; font-weight:600; margin-bottom:6px; }
.sqof-customer input, .sqof-customer textarea { width:100%; }
.sqof-cust-notes{ grid-column: 1 / -1; }
.sqof-hp { display:none; } .sqof-wrap input,
.sqof-wrap textarea{
color:#111 !important;
-webkit-text-fill-color:#111 !important;
opacity:1 !important;
} .sqof-summary{
margin: 10px 0 14px;
padding: 12px 14px;
background: #e9f2ff;
border: 1px solid #d7e6ff;
border-radius: 8px;
color: #1a4ea1;
display:flex;
gap: 10px;
align-items:center;
flex-wrap: wrap;
font-size: 14px;
}
.sqof-summary strong{ color:#d10000; font-weight:700; }
.sqof-dot{ opacity: 0.65; }
.sqof-table { border:1px solid #ddd; border-radius: 8px; overflow:hidden; }
.sqof-head, .sqof-row {
display:grid;
grid-template-columns: 1.4fr 2.2fr 0.6fr 0.9fr 0.6fr;
gap:12px;
padding:12px;
align-items:start;
}
.sqof-head { background:#f6f6f6; font-weight:600; }
.sqof-row { border-top:1px solid #eee; }
.sqof-row input { width:100%; height:40px; box-sizing:border-box; }
.sqof-actions { display:flex; gap:8px; justify-content:center; align-items:flex-start; } .sqof-sku-line{
display:flex;
gap:8px;
align-items:center;
}
.sqof-sku-line .sqof-sku{
flex: 1;
min-width: 120px;
}
.sqof-sku-line .sqof-search-btn{
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius: 8px;
line-height: 1;
}
.sqof-sku-line .sqof-search-btn .sqof-ico{
width: 18px;
height: 18px;
display:block;
fill: currentColor;
} .sqof-qty{
min-width: 72px;
text-align:center;
} .sqof-price-input{
background:#f3f4f6 !important;
border:1px solid #d1d5db !important;
border-radius: 6px;
padding: 10px 12px;
font-size: 14px;
min-width: 110px;
text-align:right;
} .sqof-avail-line{
margin-top: 6px;
display:flex;
align-items:center;
gap:8px;
font-size: 12px;
}
.sqof-avail-dot{
width: 10px;
height: 10px;
border-radius: 999px;
display:inline-block;
animation: sqofBlink 1.1s infinite;
}
.sqof-avail-msg{
font-style: italic;
} @keyframes sqofBlink{
0% { opacity: 1; }
50% { opacity: 0.25; }
100% { opacity: 1; }
} .sqof-avail--instock{ background: #1bbf5a; color:#1bbf5a; }
.sqof-avail--backorder{ background: #f59e0b; color:#f59e0b; }
.sqof-avail--out{ background: #ef4444; color:#ef4444; } .sqof-controls {
margin-top: 12px;
display:flex;
justify-content: space-between;
align-items:center;
gap: 12px;
}
.sqof-controls-right{
display:flex;
gap:10px;
align-items:center;
}
.sqof-messages { margin-top: 12px; padding:10px; }
.sqof-messages.sqof-error { color:#b00020; } .sqof-toast{
position: fixed;
right: 18px;
bottom: 18px;
background: #111;
color: #fff;
padding: 12px 14px;
border-radius: 10px;
z-index: 999999;
display:none;
max-width: 380px;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.sqof-toast.sqof-toast-error{
background:#b00020;
} .sqof-panel-overlay{
position: fixed;
inset: 0;
background: rgba(0,0,0,0.35);
z-index: 100000;
padding: 12px;
display:none;
}
.sqof-panel{
background: #fff;
border-radius: 14px;
max-width: 900px;
margin: 0 auto;
box-shadow: 0 20px 60px rgba(0,0,0,0.25);
overflow: hidden;
max-height: 86vh;
display:flex;
flex-direction: column;
}
.sqof-panel-head{
display:flex;
align-items:center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #eee;
}
.sqof-panel-title{ font-weight: 700; font-size: 14px; }
.sqof-panel-close{
border:0;
background: transparent;
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.sqof-panel-body{
padding: 10px 12px 12px;
overflow:auto;
}
.sqof-panel-status{
font-size: 12px;
opacity: 0.75;
margin-bottom: 8px;
}
.sqof-panel-item{
padding: 12px 10px;
border: 1px solid #eee;
border-radius: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.sqof-panel-item:hover{ background:#f7f7f7; }
.sqof-panel-line1{ font-size: 13px; display:flex; gap:8px; align-items:center; }
.sqof-panel-line2{ margin-top: 4px; font-size: 12px; opacity: 0.85; } @media (max-width: 640px){
.sqof-customer{ grid-template-columns: 1fr; }
.sqof-controls{
flex-direction: column;
align-items: stretch;
}
.sqof-table{
overflow-x:auto;
}
.sqof-head, .sqof-row{
min-width: 760px;
grid-template-columns: 230px 320px 100px 140px 70px;
}
}  .sqof-avail--instock,
.sqof-avail--backorder,
.sqof-avail--out{
background: transparent !important;
} .sqof-avail-dot.sqof-avail--instock{ background:#1bbf5a !important; }
.sqof-avail-dot.sqof-avail--backorder{ background:#f59e0b !important; }
.sqof-avail-dot.sqof-avail--out{ background:#ef4444 !important; } .sqof-avail-msg.sqof-avail--instock{ color:#1bbf5a !important; }
.sqof-avail-msg.sqof-avail--backorder{ color:#f59e0b !important; }
.sqof-avail-msg.sqof-avail--out{ color:#ef4444 !important; } .sqof-mini-msg.sqof-avail--instock{ color:#1bbf5a !important; background:transparent !important; }
.sqof-mini-msg.sqof-avail--backorder{ color:#f59e0b !important; background:transparent !important; }
.sqof-mini-msg.sqof-avail--out{ color:#ef4444 !important; background:transparent !important; } .sqof-mini-dot.sqof-avail--instock{ background:#1bbf5a !important; }
.sqof-mini-dot.sqof-avail--backorder{ background:#f59e0b !important; }
.sqof-mini-dot.sqof-avail--out{ background:#ef4444 !important; }  .sqof-row > div{
display: block !important;
} .sqof-row > div:nth-child(3),
.sqof-row > div:nth-child(4),
.sqof-row > div:nth-child(5){
display: flex !important;
align-items: center !important;
} .sqof-row > div:nth-child(4) .sqof-price-input{
align-self: center !important;
} .sqof-actions{
justify-content: center !important;
align-items: center !important;
} .sqof-remove{
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
font-size: 16px !important;
}  .sqof-avail--instock,
.sqof-avail--backorder,
.sqof-avail--out{
background: transparent !important;
} .sqof-avail-dot,
.sqof-mini-dot{
width: 10px !important;
height: 10px !important;
min-width: 10px !important;
min-height: 10px !important;
border-radius: 50% !important;
display: inline-block !important;
flex: 0 0 10px !important; } .sqof-avail-dot.sqof-avail--instock,
.sqof-mini-dot.sqof-avail--instock{ background:#1bbf5a !important; }
.sqof-avail-dot.sqof-avail--backorder,
.sqof-mini-dot.sqof-avail--backorder{ background:#f59e0b !important; }
.sqof-avail-dot.sqof-avail--out,
.sqof-mini-dot.sqof-avail--out{ background:#ef4444 !important; } .sqof-avail-msg.sqof-avail--instock,
.sqof-mini-msg.sqof-avail--instock{ color:#1bbf5a !important; }
.sqof-avail-msg.sqof-avail--backorder,
.sqof-mini-msg.sqof-avail--backorder{ color:#f59e0b !important; }
.sqof-avail-msg.sqof-avail--out,
.sqof-mini-msg.sqof-avail--out{ color:#ef4444 !important; } .sqof-actions{
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.sqof-remove{
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
font-size: 16px !important;
line-height: 1 !important;
border-radius: 8px !important;
} .sqof-row > div:nth-child(4),
.sqof-row > div:nth-child(5){
display: flex !important;
align-items: center !important;
} @media (max-width: 640px){
.sqof-controls{
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.sqof-controls > *{
width: 100% !important;
}
.sqof-controls-right{
flex-direction: column !important;
width: 100% !important;
gap: 10px !important;
}
.sqof-controls-right .button,
.sqof-add-row{
width: 100% !important;
}
} @media (max-width: 640px){ .sqof-panel-head{
padding: 10px 12px !important;
}
.sqof-panel-title{
font-size: 13px !important;
}
.sqof-panel-body{
padding: 8px 10px 10px !important;
}
.sqof-panel-status{
font-size: 12px !important;
margin-bottom: 6px !important;
} .sqof-panel-table-wrap{
border-radius: 10px !important;
} .sqof-panel-table{
min-width: 640px !important; }
.sqof-panel-table th,
.sqof-panel-table td{
padding: 8px 8px !important; font-size: 12px !important; line-height: 1.2 !important;
} .sqof-panel-table td:nth-child(2),
.sqof-panel-table th:nth-child(2){
min-width: 300px !important; } .sqof-mini-msg{
margin-top: 4px !important;
font-size: 11px !important;
line-height: 1.2 !important;
} .sqof-mini-dot{
width: 8px !important;
height: 8px !important;
min-width: 8px !important;
min-height: 8px !important;
}
} .sqof-panel .sqof-mini-msg{
font-size: 13px !important;
line-height: 1.2 !important;
margin-top: 4px !important;
opacity: 0.85;
} @media (max-width: 640px){
.sqof-panel-close{
font-size: 26px !important;
width: 36px;
height: 36px;
border-radius: 8px;
background: #f3f4f6;
color: #111;
display: flex !important;
align-items: center;
justify-content: center;
}
.sqof-panel-close:hover{
background: #e5e7eb;
}
} .sqof-instructions{
margin: 12px 0 14px;
padding: 12px 14px;
border: 1px solid #e5e7eb;
background: #fafafa;
border-radius: 10px;
color: #111;
}
.sqof-instr-title{
font-weight: 700;
font-size: 14px;
margin-bottom: 8px;
}
.sqof-instr-list{
margin: 0;
padding-left: 18px;
font-size: 13px;
line-height: 1.4;
}
.sqof-instr-list li{
margin: 6px 0;
} @media (max-width: 640px){
.sqof-instructions{
padding: 10px 12px;
}
.sqof-instr-list{
font-size: 12.5px;
}
}