/* ShopSphere - components.css : cards, buttons, forms, chips, tables, toast */

.card{
  background:var(--card);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:.22s;display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(15,18,38,.14)}
.thumb{height:158px;display:grid;place-items:center;position:relative;background:#eef0fb}
.thumb img{width:104px;height:104px}
.tag{position:absolute;top:11px;left:11px;background:rgba(255,255,255,.92);font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;color:var(--brand)}
.card-body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.stars{font-size:12.5px;color:var(--warn)}
.price-row{display:flex;align-items:center;gap:9px;margin-top:auto}
.price{font-size:19px;font-weight:800}
.old{font-size:13px;color:var(--muted);text-decoration:line-through}

.btn{
  border:none;border-radius:11px;cursor:pointer;padding:13px 22px;
  font-size:15px;font-weight:700;letter-spacing:.2px;
  background:linear-gradient(135deg,var(--brand),#7a5bd6);color:#fff;
  transition:.2s;box-shadow:0 10px 24px rgba(91,91,214,.32);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(91,91,214,.42)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-block{width:100%}
.btn-light{background:#fff;color:var(--brand);box-shadow:none}
.btn-ghost{background:#eef0fb;color:var(--brand);box-shadow:none}
.btn-danger{background:linear-gradient(135deg,#e2445c,#c22f45);box-shadow:none}

.add{margin-top:10px;width:100%;border:none;border-radius:10px;padding:10px;background:#eef0fb;color:var(--brand);font-weight:700;font-size:13.5px;cursor:pointer;transition:.18s}
.add:hover{background:var(--brand);color:#fff}

.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{background:#fff;border:1.4px solid var(--line);border-radius:99px;padding:7px 16px;font-size:13px;cursor:pointer;transition:.16s}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}

.panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:26px}
.panel h3{margin-bottom:12px}

.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:#374151}
.input-wrap{position:relative}
.input-wrap .icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:15px;opacity:.55;pointer-events:none}
.field input,.field textarea,.field select{
  width:100%;padding:13px 42px 13px 40px;border:1.6px solid #dfe3ec;border-radius:11px;
  font-size:14.5px;transition:.18s;background:#fbfcfe;color:var(--ink);font-family:inherit;
}
.field textarea{padding:13px 16px;min-height:120px;resize:vertical}
.field select{padding-left:16px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring);background:#fff}
.field input.valid,.field textarea.valid{border-color:var(--ok)}
.field input.invalid,.field textarea.invalid{border-color:var(--danger)}
.toggle-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:15px;opacity:.6;user-select:none}
.msg{font-size:12.5px;margin-top:6px;min-height:16px;display:block}
.msg.err{color:var(--danger)}
.msg.ok{color:var(--ok)}
.meter{height:6px;border-radius:99px;background:#eceef4;margin-top:9px;overflow:hidden}
.meter span{display:block;height:100%;width:0;border-radius:99px;transition:.3s}

.alert{background:#fdecef;color:#a32338;border:1px solid #f6c9d2;padding:11px 14px;border-radius:10px;font-size:13.5px;margin-bottom:18px;display:none}
.alert.show{display:block;animation:shake .35s}
.alert-ok{background:#e7f7f0;color:#0d6b48;border-color:#bde8d5}

table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th,table.tbl td{padding:13px 12px;text-align:left;border-bottom:1px solid var(--line)}
table.tbl th{font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
table.tbl tfoot td{font-weight:700;border-bottom:none}

.qty{display:flex;align-items:center;gap:8px}
.qty button{width:28px;height:28px;border-radius:8px;border:1.4px solid var(--line);background:#fff;cursor:pointer;font-size:15px;line-height:1}
.qty button:hover{border-color:var(--brand);color:var(--brand)}

.stat{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px;text-align:center}
.stat .big{font-size:30px;font-weight:800;color:var(--brand)}
.stat .lbl{font-size:13px;color:var(--muted);margin-top:4px}

.feature{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:24px;display:flex;gap:16px;align-items:flex-start}
.feature .fi{width:46px;height:46px;border-radius:12px;background:#eef0fb;display:grid;place-items:center;font-size:22px;flex-shrink:0}

.toast{
  position:fixed;bottom:26px;right:26px;z-index:80;
  background:var(--ink);color:#fff;padding:13px 20px;border-radius:11px;
  font-size:14px;box-shadow:var(--shadow);opacity:0;transform:translateY(14px);
  transition:.3s;pointer-events:none;
}
.toast.show{opacity:1;transform:none}

.hdr-table{width:100%;border-collapse:collapse;font-size:13px;font-family:Consolas,Monaco,monospace}
.hdr-table td{padding:8px 10px;border-bottom:1px solid var(--line);word-break:break-all}
.hdr-table td:first-child{font-weight:700;color:var(--brand);width:230px}