body {
  font-family: Arial, sans-serif;
}

.section {
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;

  margin: 20px auto;
  padding: 20px;
  text-align: center;
}


.section h1 {
  color: #d35400;
  font-size: 24px;
  margin-bottom: 20px;
}



.divider {
  border-top: 1px solid #ccc;
  margin: 20px 0;
}

.content-box {
                background-color: #ffffff;
                padding: 20px;
                border-radius: 10px;
                border: 1px solid #ccc;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                text-align: left;
            }

.cards {
    background-color: #f5f5f5; /* Old background color */
    border-radius: 10px; /* Retaining border radius */
    border: 1px solid #e0e0e0; /* Adding border from new styles */
    padding: 20px; /* Adding padding for spacing */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Enhanced shadow effect */
    display: flex; /* Ensuring flex display */
    align-items: center; /* Centering items */
    margin-bottom: 20px; /* Retaining margin */
}


.card-body {
  padding: 20px;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #6c2dc7;
}

.card-text {
  font-size: 16px;
  color: #555;
}


.fas.fa-cart-plus {
    font-size: 30px;
    color: #fff;
}

.fas.fa-donate {
    font-size: 30px;
    color: #fff;
}

.fa-solid.fa-wallet {
    font-size: 30px;
    color: #fff;
}

.icon-container {
    border-radius: 50%;
    background-color: #6c2dc7;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}
/*Sign In*/

/* =========================================================
   file: public/assets/css/pm-auth.css  (v2025-08-30-2)
   Key change: show the real Google button (no hidden overlay)
   ========================================================= */

:root{ --pm-brand:#6c2dc7; --pm-brand-dark:#4a1e8a; --pm-accent:#8b46e9; --pm-radius-lg:16px; --pm-radius-md:12px; --pm-radius-sm:10px; --pm-gray-50:#fff; --pm-gray-100:#fff; --pm-gray-200:#fff; --pm-gray-300:#fff; --pm-gray-700:#fff; --pm-text:#000000; --pm-shadow-1:0 6px 16px rgba(0,0,0,.06); --pm-shadow-2:0 12px 28px rgba(0,0,0,.10)}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#ffffff;line-height:1.5;background:#fff
.pm-wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.pm-hero{padding:32px 0 10px;text-align:center}.pm-hero h1{margin:0 0 6px;font-size:32px;font-weight:800}.pm-hero h1 span{color:var(--pm-brand)}.pm-hero p{margin:0;opacity:.9}
.pm-login-row{display:flex;justify-content:center}.pm-login{width:100%;max-width:720px}
.pm-card,.well{border:1px solid rgba(0,0,0,.08);border-radius:var(--pm-radius-lg);background:#000;box-shadow:var(--pm-shadow-2);padding:22px 22px 18px}
.pm-alert{border-radius:var(--pm-radius-md);padding:12px 14px;margin-bottom:12px;position:relative;border:1px solid transparent}.pm-alert-danger{background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.35)}.pm-alert-success{background:rgba(40,199,111,.08);border-color:rgba(40,199,111,.35)}.pm-alert-close,.pm-alert .close{position:absolute;right:8px;top:6px;border:0;background:transparent;font-size:18px;cursor:pointer;line-height:1}
.pm-field{margin-bottom:14px}.pm-label{display:block;margin-bottom:6px;font-weight:600}
.pm-input,.form-control{width:100%;height:46px;border-radius:var(--pm-radius-sm);border:1px solid #fff;padding:10px 12px;outline:none;transition:box-shadow .2s,border-color .2s}.pm-input:focus,.form-control:focus{border-color:var(--pm-brand);box-shadow:0 0 0 3px rgba(108,45,199,.12)}
.pm-link-sm{display:inline-block;margin-top:6px;font-size:13px}.pm-check{display:inline-flex;align-items:center;gap:8px;margin:4px 0 10px;font-size:14px}.pm-check input{width:16px;height:16px}.pm-captcha{margin:8px 0 10px}
.pm-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 6px}
.pm-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:var(--pm-radius-sm);font-weight:700;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .12s ease,box-shadow .2s,background-color .2s,border-color .2s}
.pm-btn-primary,.btn.btn-primary{background:var(--pm-brand);border-color:var(--pm-brand-dark);color:#fff;box-shadow:0 8px 18px rgba(108,45,199,.18)}
.pm-btn-primary:hover,.btn.btn-primary:hover{background:var(--pm-brand-dark);border-color:var(--pm-brand-dark);transform:translateY(-1px)}
.pm-btn-primary:active,.btn.btn-primary:active{transform:translateY(0);box-shadow:0 4px 12px rgba(108,45,199,.18)}

/* --- Google Sign-In: plain (visible) --- */
.pm-gwrap.plain{flex:1 1 auto;min-width:240px;height:auto;display:flex;align-items:center;justify-content:center}
.pm-gwrap.plain #g_id_onload,.pm-gwrap.plain .g_id_signin{width:100% !important}

/* Keep feature boxes and footer */
.pm-boxes{margin:14px auto 6px;max-width:1120px}.pm-box-grid{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}.pm-box{border:1px solid rgba(0,0,0,.08);border-radius:var(--pm-radius-md);background:#393939;box-shadow:var(--pm-shadow-1);padding:16px;text-align:center}.pm-box img{width:42px;height:42px;object-fit:contain}.pm-box h3{margin:8px 0 4px;font-size:18px;font-weight:800}.pm-box p{margin:0;opacity:.9}
#faq{padding:24px 0}.pm-section-head{text-align:center;margin-bottom:16px}.pm-section-head h2{margin:0 0 4px;font-size:24px;font-weight:800;color:var(--pm-brand)}.pm-section-head p{margin:0;font-size:15px;opacity:.85}
.pm-faq{display:grid;gap:12px;max-width:720px;margin:0 auto}.pm-faq details{border:1px solid rgba(0,0,0,.08);border-radius:var(--pm-radius-md);background:#393939;box-shadow:var(--pm-shadow-1);overflow:hidden}.pm-faq summary{cursor:pointer;padding:14px 16px;font-weight:700;outline:none}.pm-faq summary::-webkit-details-marker{display:none}.pm-faq details[open] summary{border-bottom:1px solid var(--pm-gray-300)}.pm-faq-body{padding:14px 16px;opacity:.95}
.pm-footer{border-top:1px solid var(--pm-gray-300);background:#393939;padding:26px 0;margin-top:28px}.pm-footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.pm-footer h5{margin:0 0 10px;font-weight:800;color:var(--pm-brand)}.pm-muted{color:var(--pm-gray-700);font-size:14px}.pm-list{list-style:none;margin:0;padding:0}.pm-list li+li{margin-top:6px}.pm-list a{color:var(--pm-brand);text-decoration:none;font-size:14px}.pm-list a:hover{color:var(--pm-brand-dark);text-decoration:underline}.pm-footnote{text-align:center;margin-top:18px;font-size:13px;color:var(--pm-gray-700)}
@media (max-width:992px){.pm-box-grid{grid-template-columns:repeat(2,1fr)}.pm-footer-grid{grid-template-columns:repeat(2,1fr)}.pm-hero h1{font-size:28px}}
@media (max-width:576px){.pm-actions .pm-btn{flex:1 1 100%;min-width:220px}.pm-gwrap{flex:1 1 100%;min-width:220px}.pm-box-grid{grid-template-columns:1fr}.pm-footer-grid{grid-template-columns:1fr;text-align:center}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* -------- RTL helpers -------- */
.rtl-form{direction:rtl}
/* ====== Global guards to stop horizontal jiggle ====== */
html, body { width:100%; overflow-x:hidden; }
img { max-width:100%; height:auto; }

/* Variables */
:root{
  --pm-brand:#6c2dc7;
  --pm-brand-dark:#4a1e8a;
  --pm-gray-50:#f9f9f9;
  --pm-gray-100:#f5f5f5;
  --pm-gray-300:#e0e0e0;
  --pm-gray-700:#4b4b4b;
}

/* ===========================
   Compact Totals Boxes (rectangular)
   =========================== */
.pm-stats-row{
  display:flex; flex-wrap:wrap;
  margin-left:-10px; margin-right:-10px;
}
.pm-stats-col{
  display:flex; padding-left:10px; padding-right:10px; margin-bottom:14px;
  /* If you are NOT using Bootstrap grid, uncomment these:
     flex: 0 0 25%; max-width:25%;
     @media (max-width:992px){ flex:0 0 50%; max-width:50%; }
     @media (max-width:576px){ flex:0 0 100%; max-width:100%; }
  */
}
.pm-stats-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  background:#000;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  display:flex; flex-direction:column; width:100%;
  min-height:94px;                    /* slightly shorter */
  cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease;
}
.pm-stats-card:hover{ transform:translateY(-1px); box-shadow:0 12px 24px rgba(0,0,0,.10); }
.pm-stats-card .card-body{ padding:10px 12px; flex:1; display:flex; align-items:center; }
.pm-stats-inner{ display:flex; align-items:center; gap:12px; width:100%; }
.pm-stats-icon img{ width:40px; height:40px; object-fit:contain; }
.pm-stats-text h6{ margin:0; font-size:12px; letter-spacing:.2px; color:#fff; font-weight:700; }
.pm-stats-text h3{ margin:4px 0 0; font-weight:800; font-size:17px; color:#fff; }

/* WhatsApp banner (rectangle, responsive) */
.pm-wh-card{ border:1px solid rgba(0,0,0,.08); border-radius:10px; background:#393939; box-shadow:0 6px 16px rgba(0,0,0,.06); }
.pm-wh-body{ padding:12px 14px; }
.pm-wh-inner{ display:flex; align-items:center; gap:14px; }
.pm-wh-icon img{ max-width:56px; height:auto; }
.pm-wh-text{ flex:1; }
.pm-wh-cta{ border-left:3px solid #01411C; padding-left:14px; }
@media (max-width:576px){
  .pm-wh-cta{ border-left:0; padding-left:0; width:100%; }
  .pm-wh-cta .btn{ width:100%; }
}

/* =====================================
   Account Benefits Modal & Tabs (fixed)
   ===================================== */

/* Make modal safe width in all BS versions */
.modal-dialog{ max-width:min(1140px, 96vw); margin:10px auto; }
.modal{ overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* Pillbar container prevents body overflow */
.pm-benefits-scroll{
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}

/* Pill bar */
.pm-benefits-pillbar{ display:flex; gap:8px; flex-wrap:wrap; margin:0; }
.pm-benefits-pillbar .nav-item{ display:block; }
.pm-benefits-pillbar .nav-link{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; border-radius:10px; padding:.45rem .7rem;
  color:#333; background:#fff; border:1px solid #eadcff;
  transition:background .2s, color .2s, border-color .2s, box-shadow .2s;
  white-space:nowrap;
}
.pm-benefits-pillbar .nav-link:hover{
  background:#6c2dc7; color:#fff; border-color:#6c2dc7;
  box-shadow:0 8px 18px rgba(108,45,199,.18);
}
.pm-benefits-pillbar .nav-link.active,
.pm-benefits-pillbar .nav-link[aria-selected="true"]{
  background:#6c2dc7; color:#fff; border-color:#6c2dc7;
  box-shadow:0 8px 18px rgba(108,45,199,.18);
}

/* Tab panes (work with/without BS JS) */
.tab-content .tab-pane{ display:none; }
.tab-content .tab-pane.active,
.tab-content .tab-pane.in,
.tab-content .tab-pane.show{ display:block; }

/* Feature cards grid */
.pm-features-grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (max-width:768px){ .pm-features-grid{ grid-template-columns:1fr; } }

/* Feature card */
.pm-benefits-feature{
  display:flex; align-items:center; gap:10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px; padding:10px 12px; background:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.04);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.pm-benefits-feature .icon{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; color:#6c2dc7;
}
.pm-benefits-feature .text{ font-weight:600; color:#222; }
.pm-benefits-feature:hover{
  border-color:#6c2dc7; box-shadow:0 8px 18px rgba(108,45,199,.15); background:#f7f2ff;
}

/* Right thresholds box */
.pm-benefits-side{
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px; background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  padding:12px;
}
.pm-benefits-side h3{ margin:0 0 6px; font-size:18px; font-weight:800; }
.pm-benefits-side p{ margin:6px 0; color:#333; }
.pm-benefits-side .user-spending-name{ font-weight:700; color:#111; }
.pm-benefits-side .user-spending-icon{ margin:0 6px; color:var(--pm-gray-700); }
.pm-benefits-side .user-spending-value{ color:var(--pm-brand-dark); font-weight:700; }

/* Modal header close icon compatibility */
.pm-modal-close{ font-size:24px; line-height:1; border:0; background:transparent; cursor:pointer; }





/* =========================
   Pak Main SMM (namespaced)
   ========================= */
.pms { --pms-brand:#6c2dc7; --pms-brand-dark:#4a1e8a; --pms-gray-300:#e0e0e0; --pms-card-b:#fff; --pms-shadow:0 8px 20px rgba(0,0,0,.08); }

/* Layout helpers */
.pms .pms-container { max-width:1120px; margin:0 auto; padding:0 16px; }

/* ---------- Stats (rectangular boxes) ---------- */
.pms .pms-stats { margin:10px 0 6px; }
.pms .pms-stats-grid {
  display:grid; gap:14px;
  grid-template-columns:repeat(4, minmax(0,1fr));
  align-items:stretch;
}
@media (max-width:992px){ .pms .pms-stats-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:576px){ .pms .pms-stats-grid{ grid-template-columns:1fr; } }

.pms .pms-stat {
  border:1px solid rgba(0,0,0,.08);
  background:var(--pms-card-b);
  border-radius:12px;
  box-shadow:var(--pms-shadow);
  min-height:96px; display:flex; align-items:center;
  padding:10px 12px; transition:transform .12s ease, box-shadow .2s ease;
}
.pms .pms-stat:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.pms .pms-stat-inner{ display:flex; align-items:center; gap:12px; width:100%; }
.pms .pms-stat-icon{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.pms .pms-stat-icon img{ width:40px; height:40px; object-fit:contain; }
.pms .pms-stat-text{ flex:1; min-width:0; }
.pms .pms-stat-text h6{ margin:0; font-size:12px; letter-spacing:.2px; color:#666; font-weight:700; }
.pms .pms-stat-text h3{ margin:4px 0 0; font-weight:800; font-size:18px; color:#121212; }

/* Make the Account Status card visually clickable */
.pms .pms-stat--click { cursor:pointer; }
.pms .pms-stat--click:active{ transform:translateY(0); }

/* ---------- WhatsApp banner ---------- */
.pms .pms-wh { margin:8px 0 12px; }
.pms .pms-wh-card { border:1px solid rgba(0,0,0,.08); background:#fff; border-radius:12px; box-shadow:var(--pms-shadow); }
.pms .pms-wh-body { padding:12px 14px; }
.pms .pms-wh-inner { display:flex; align-items:center; gap:14px; }
.pms .pms-wh-icon img{ max-width:56px; height:auto; }
.pms .pms-wh-text{ flex:1; }
.pms .pms-wh-cta{ border-left:3px solid #01411C; padding-left:14px; }
@media (max-width:576px){
  .pms .pms-wh-inner{ flex-direction:column; align-items:flex-start; }
  .pms .pms-wh-cta{ border:0; padding:0; width:100%; }
  .pms .pms-wh-cta .btn{ width:100%; }
}

/* Primary button (scoped) */
.pms .pms-btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 18px; border-radius:10px; border:1px solid var(--pms-brand-dark);
  color:#fff; background:var(--pms-brand);
  font-weight:700; text-decoration:none; cursor:pointer;
  box-shadow:0 8px 18px rgba(108,45,199,.18);
  transition:transform .12s ease, background .2s, border-color .2s, box-shadow .2s;
}
.pms .pms-btn:hover{ background:var(--pms-brand-dark); border-color:var(--pms-brand-dark); transform:translateY(-1px); }

/* ---------- Account Benefits (scoped modal + tabs) ---------- */
.pms-benefits { /* wrapper for scoping */ }
.pms-benefits .modal-dialog{ max-width:min(1140px,96vw); margin:10px auto; }
.pms-benefits .modal-content{ border-radius:12px; overflow:hidden; }
.pms-benefits .modal-header{ border-bottom:1px solid #eee; }
.pms-benefits .pms-modal-close{ font-size:24px; line-height:1; background:transparent; border:0; cursor:pointer; }

/* Pills bar (no bleed) */
.pms-benefits .pms-pillbar-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
.pms-benefits .pms-pillbar{
  display:flex; gap:8px; flex-wrap:nowrap; margin:0; padding:0;
}
.pms-benefits .pms-pill{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  border:1px solid #eadcff; background:#fff; color:#333;
  border-radius:10px; padding:.5rem .75rem; font-weight:700;
  transition:background .2s, color .2s, border-color .2s, box-shadow .2s;
  text-decoration:none;
}
.pms-benefits .pms-pill:hover{ background:#6c2dc7; color:#fff; border-color:#6c2dc7; box-shadow:0 8px 18px rgba(108,45,199,.18); }
.pms-benefits .pms-pill.active{ background:#6c2dc7; color:#fff; border-color:#6c2dc7; box-shadow:0 8px 18px rgba(108,45,199,.18); }

/* Tab panes (framework agnostic) */
.pms-benefits .pms-tab-pane{ display:none; }
.pms-benefits .pms-tab-pane.active{ display:block; }

/* Features grid */
.pms-benefits .pms-features-grid{
  display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (max-width:768px){ .pms-benefits .pms-features-grid{ grid-template-columns:1fr; } }

.pms-benefits .pms-feature{
  display:flex; align-items:center; gap:10px;
  border:1px solid rgba(0,0,0,.08); background:#fff; border-radius:10px;
  padding:10px 12px; box-shadow:0 4px 10px rgba(0,0,0,.04);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.pms-benefits .pms-feature .icon{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:#6c2dc7; }
.pms-benefits .pms-feature .text{ font-weight:600; color:#222; }
.pms-benefits .pms-feature:hover{ border-color:#6c2dc7; background:#f7f2ff; box-shadow:0 8px 18px rgba(108,45,199,.12); }

/* Right side info box */
.pms-benefits .pms-side{
  border:1px solid rgba(0,0,0,.08); background:#fff; border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.06); padding:12px;
}
.pms-benefits .pms-side h3{ margin:0 0 6px; font-size:18px; font-weight:800; }
.pms-benefits .pms-side p{ margin:6px 0; }
.pms-benefits .pms-side .name{ font-weight:700; color:#111; }
.pms-benefits .pms-side .arrow{ margin:0 6px; color:#666; }
.pms-benefits .pms-side .val{ color:var(--pms-brand-dark); font-weight:700; }

/* Prevent horizontal bleed just inside our wrapper */
.pms { overflow-x:hidden; }

/*Orders Page */


/* ===========================
   PakMainSMM Orders (namespaced)
   Namespace root: .ox
   =========================== */
.ox{--r:12px;--pad:12px;--gap:12px;--card:var(--card-bg,#1b1c22);--muted:rgba(255,255,255,.75);--ink:var(--white,#fff);--bor:var(--card-border,rgba(255,255,255,.12));--chip:var(--form-input-bg,#15161c);--brand:var(--primary-color,#6c2dc7);--brand-2:#4a1e8a;--ok:#22c55e;--warn:#f59e0b;--info:#3b82f6;--bad:#ef4444}
.daymode .ox{--card:#fff;--muted:#444;--ink:#111;--bor:#e7e7ee;--chip:#f6f7fa}

/* Top search + filters */
.ox .ox-search-card{background:var(--card);border:1px solid var(--bor);border-radius:14px;padding:14px;box-shadow:0 10px 24px rgba(0,0,0,.15)}
.ox .ox-search{position:relative}
.ox .ox-search input{width:100%;height:44px;border:1px solid var(--bor);background:var(--chip);color:var(--ink);border-radius:10px;padding:0 42px 0 12px;outline:none}
.ox .ox-search button{position:absolute;right:8px;top:50%;transform:translateY(-50%);height:32px;min-width:32px;border:0;border-radius:8px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ox .ox-filters{display:flex;flex-wrap:wrap;gap:10px}
.ox .ox-filter{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;background:var(--chip);border:1px solid var(--bor);color:var(--ink);text-decoration:none}
.ox .ox-filter.active,.ox .ox-filter:hover{border-color:var(--brand);box-shadow:0 0 0 3px rgba(108,45,199,.18) inset}

/* List grid */
.ox .order-list{display:grid;gap:14px}
@media(min-width:992px){.ox .order-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Card */
.ox .order-box{background:var(--card);border:1px solid var(--bor);border-radius:12px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.daymode .ox .order-box{box-shadow:0 6px 18px rgba(0,0,0,.08)}
/* Top row */
.ox .order-top{display:flex;justify-content:space-between;align-items:center;padding:12px}
.ox .order-top-left{display:flex;align-items:center;gap:10px}
.ox .ox-check{width:18px;height:18px;border:2px solid var(--bor);background:var(--chip);border-radius:4px;appearance:none;cursor:pointer;position:relative}
.ox .ox-check:checked{border-color:var(--brand);background:var(--brand)}
.ox .ox-check:checked::after{content:"✓";position:absolute;color:#fff;font-size:12px;left:50%;top:50%;transform:translate(-50%,-50%)}

.ox .order-id{background:var(--chip);border:1px solid var(--bor);border-radius:10px;padding:8px 12px;font-weight:800;cursor:pointer;color:var(--ink);user-select:none}
.ox .ox-pill{background:var(--chip);border:1px solid var(--bor);border-radius:10px;height:34px;display:inline-flex;align-items:center;color:var(--ink)}
.ox .ox-pill i{padding:0 10px}

/* Status pill */
.ox .order-status{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:10px;color:#fff;font-weight:700;white-space:nowrap}
.ox .order-status.pending{background:#444}
.ox .order-status.processing{background:var(--info)}
.ox .order-status.inprogress{background:#2a2b33}
.ox .order-status.completed{background:var(--ok)}
.ox .order-status.partial{background:var(--warn)}
.ox .order-status.canceled,.ox .order-status.cancelled{background:var(--bad)}
.daymode .ox .order-status.inprogress{background:#e9e9f5;color:#111}

/* In-progress mini bar */
.ox .ox-progress{height:6px;border-radius:6px;background:rgba(255,255,255,.14);overflow:hidden}
.daymode .ox .ox-progress{background:#ececff}
.ox .ox-progress > span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .6s ease}

/* Middle content */
.ox .order-center{padding:0 12px 12px}
.ox .order-service{font-weight:700;margin:6px 0;color:var(--ink);white-space:pre-wrap}
.ox .ox-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0}
@media(max-width:520px){.ox .ox-meta{grid-template-columns:1fr}}
.ox .ox-meta .chip{display:flex;align-items:center;gap:8px;background:var(--chip);border:1px solid var(--bor);border-radius:10px;padding:8px 10px}
.ox .order-link{display:flex;align-items:center;gap:8px;background:var(--chip);border:1px solid var(--bor);border-radius:10px;padding:9px 10px;overflow:auto}
.ox .order-link i{cursor:pointer}

/* Metrics row (square boxes) */
.ox .order-center-bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.ox .metric{background:var(--chip);border:1px solid var(--bor);border-radius:10px;padding:10px;text-align:center}
.ox .metric span{display:block;color:var(--muted);font-size:12px}
.ox .metric b{display:block;margin-top:4px;font-size:16px}

/* Footer actions */
.ox .order-btn{padding:0 12px 12px;display:flex;gap:10px}
.ox .ox-btn{height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:10px;border:1px solid var(--brand);background:var(--brand);color:#fff;text-decoration:none;cursor:pointer}
.ox .ox-btn.alt{background:transparent;color:var(--ink)}
.ox .ox-btn:disabled{opacity:.6;cursor:not-allowed}

/* Copy toolbar (appears when items selected) */
.ox .ox-copybar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:9999;background:var(--card);border:1px solid var(--bor);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:10px 12px;display:none;gap:10px;align-items:center}
.daymode .ox .ox-copybar{box-shadow:0 10px 24px rgba(0,0,0,.12)}
.ox .ox-copybar.show{display:flex}
.ox .ox-copybar .ids{max-width:56vw;overflow:auto;white-space:nowrap;font-family:ui-monospace,Menlo,monospace;font-size:13px}
.ox .ox-copybar .ox-btn{height:34px}

/* Utility */
.ox .muted{color:var(--muted);font-size:13px}
.ox .srch-row{margin-bottom:10px}
.ox .mb-10{margin-bottom:10px}
.ox .mb-14{margin-bottom:14px}
.ox .w-100{width:100%}