/* Premium merchandising + checkout additions. Loaded after refresh.css. */

/* Tier quick filters on the shop page */
.tier-chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.tier-chip{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:700;background:#fff;color:var(--ink)}
.tier-chip.active{background:var(--dark);border-color:var(--dark);color:#fff}
.tier-chip:hover{border-color:var(--dark)}

/* Tighter rhythm between the three homepage tier sections */
.tier-section{padding-block:44px}
.tier-section+.tier-section{border-top:1px solid var(--line)}

/* Product detail: showroom note under the stock line */
.showroom-note{margin:10px 0 0;color:var(--muted);font-size:14px}

/* Checkout payment sub-fields */
.payment-detail{background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;padding:16px 16px 18px;margin:-8px 0 8px;display:flex;flex-direction:column;gap:10px}
.payment-detail p{margin:0;color:var(--muted)}
.payment-detail small{color:var(--muted)}
.payment-detail label{display:flex;flex-direction:column;gap:7px;font-weight:650;font-size:14px}
.network-choice{display:flex;gap:8px}
.network{flex-direction:row!important;align-items:center;min-height:44px;gap:8px;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:650;font-size:13px;cursor:pointer}
.network input{width:auto}
.payment-number strong{color:var(--ink)}

/* MoMo / Airtel confirmation modal - honest framing: this records a pending order for staff
   verification, it does not push a live API request. Copy should never imply otherwise. */
.momo-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(8,20,15,.55);padding:20px}
.momo-open .momo-modal{display:flex}
.momo-modal-box{background:#fff;border-radius:var(--radius);padding:36px;max-width:380px;width:100%;text-align:center;box-shadow:var(--shadow)}
.momo-modal-box h2{margin:0 0 18px;font-size:22px}
.momo-timer{width:76px;height:76px;margin:0 auto 18px;border-radius:50%;border:4px solid var(--green);display:grid;place-items:center;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.momo-modal-box p{margin:0 0 8px;color:var(--muted)}
.momo-modal-note{font-size:13px}

@media(max-width:650px){.momo-modal-box{padding:26px}}

/* Featured / Best Seller badge on product cards */
.badge-featured{position:absolute;top:12px;right:12px;padding:6px 10px;background:var(--dark);color:#fff;border-radius:999px;font-size:11px;font-weight:800;z-index:1}