/* =====================================================================
   Ecom module — LAYOUT & COMPONENTS (SOL clone)
   Depends on tokens.css. No raw hex here — only var(--ecom-*).
   RTL handled via [dir="rtl"] overrides + logical properties where practical.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body.ecom {
  margin: 0;
  font-family: var(--ecom-font);
  font-size: var(--ecom-fs-base);
  color: var(--ecom-ink);
  background: var(--ecom-bg);
  -webkit-font-smoothing: antialiased;
}

.ecom a { color: inherit; text-decoration: none; }
.ecom img { max-width: 100%; display: block; }

.ecom-container {
  max-width: var(--ecom-container);
  margin-inline: auto;
  padding-inline: 24px;
  width: 100%;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ecom *, .ecom *::before, .ecom *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* keyboard focus */
.ecom :focus-visible {
  outline: 2px solid var(--ecom-orange);
  outline-offset: 2px;
}

/* ---------- HEADER ---------- */
.ecom-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ecom-surface);
  border-bottom: 1px solid var(--ecom-border);
  height: var(--ecom-header-h);
  display: flex; align-items: center;
}
.ecom-header__inner {
  display: flex; align-items: center; gap: 28px;
  width: 100%; min-width: 100%; /*max-width: var(--ecom-container);*/
  margin-inline: auto; padding-inline: 24px;
}
.ecom-logo { font-weight: var(--ecom-fw-bold); font-size: 28px; color: var(--ecom-orange); letter-spacing: -.5px; }
.ecom-logo img { height: 40px !important;
    width: auto !important;
    max-width: inherit; }

.ecom-nav { display: flex; align-items: center; gap: 26px; }
.ecom-nav__link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ecom-navy); font-weight: var(--ecom-fw-medium);
  position: relative; white-space: nowrap;
}
.ecom-nav__link i { font-size: 18px; }
.ecom-nav__link:hover { color: var(--ecom-orange); }
.ecom-nav__badge {
  position: absolute; top: -8px; inset-inline-end: -10px;
  background: var(--ecom-orange); color: #fff;
  font-size: 11px; font-weight: var(--ecom-fw-bold);
  min-width: 18px; height: 18px; border-radius: var(--ecom-radius-pill);
  display: grid; place-items: center; padding: 0 4px;
}

.ecom-search {
  flex: 1; max-width: 440px;
  display: flex; align-items: center; gap: 10px;
}
.ecom-search__field {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--ecom-surface); border: 1px solid var(--ecom-border);
  border-radius: var(--ecom-radius-pill); padding: 10px 16px;
}
.ecom-search__field input { border: 0; outline: 0; flex: 1; background: transparent; font-size: var(--ecom-fs-base); }
.ecom-search__field i { color: var(--ecom-muted); }

.ecom-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: var(--ecom-fw-medium); font-size: var(--ecom-fs-base);
  border: 0; cursor: pointer; border-radius: var(--ecom-radius-pill);
  padding: 10px 22px; transition: background .15s ease, color .15s ease;
}
.ecom-btn--primary { background: var(--ecom-orange); color: #fff; }
.ecom-btn--primary:hover { background: var(--ecom-orange-hover); }
.ecom-btn--outline { background: transparent; color: var(--ecom-orange); border: 1px solid var(--ecom-orange); }
.ecom-btn--ghost { background: var(--ecom-surface-2); color: var(--ecom-ink); }
.ecom-btn--success { background: var(--ecom-success); color: #fff; }
.ecom-btn--block { width: 100%; }

.ecom-header__right { display: flex; align-items: center; gap: 18px; margin-inline-start: auto; }
.ecom-account-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ecom-orange); color: #fff; font-weight: var(--ecom-fw-medium);
  border-radius: var(--ecom-radius-pill); padding: 10px 18px;
}
.ecom-lang { display: inline-flex; align-items: center; gap: 6px; color: var(--ecom-navy); font-weight: var(--ecom-fw-medium); cursor: pointer; background: 0; border: 0; font-family: inherit; }

/* ---------- BRANCH BAR ---------- */
.ecom-branchbar {
  background: var(--ecom-orange-soft);
  padding: 12px 0;
}
.ecom-branchbar__inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ecom-branchbar__select {
  background: var(--ecom-surface); border: 1px solid var(--ecom-border);
  border-radius: var(--ecom-radius-sm); padding: 8px 14px; font-family: inherit; max-width: 640px;
}
.ecom-branchbar__note { color: var(--ecom-muted); font-size: var(--ecom-fs-sm); }

/* ---------- ACCOUNT SHELL (sidebar + content) ---------- */
.ecom-shell { display: flex; gap: var(--ecom-gap); max-width: var(--ecom-container); margin-inline: auto; padding: 24px; }
.ecom-sidebar {
  width: var(--ecom-sidebar-w); flex-shrink: 0;
  background: var(--ecom-orange); color: #fff;
  border-radius: var(--ecom-radius); padding: 28px 20px; align-self: flex-start;
}
.ecom-sidebar__title { font-size: var(--ecom-fs-xl); font-weight: var(--ecom-fw-bold); line-height: 1.2; }
.ecom-sidebar__sub { opacity: .9; margin-top: 4px; margin-bottom: 22px; }
.ecom-sidebar__nav { display: flex; flex-direction: column; gap: 4px; }
.ecom-sidebar__link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--ecom-radius-pill);
  color: #fff; font-weight: var(--ecom-fw-medium);
}
.ecom-sidebar__link i { width: 22px; text-align: center; font-size: 18px; }
.ecom-sidebar__link:hover { background: rgba(255,255,255,.12); }
.ecom-sidebar__link.is-active { background: #fff; color: var(--ecom-orange); }
.ecom-content { flex: 1; min-width: 0; }

/* ---------- FOOTER ---------- */
.ecom-footer { background: var(--ecom-orange); color: #fff; }
.ecom-footer__inner {
  max-width: var(--ecom-container); margin-inline: auto; padding: 28px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.ecom-footer__social { display: flex; gap: 16px; font-size: 20px; }
.ecom-footer__logo { font-size: 26px; font-weight: var(--ecom-fw-bold); }
.ecom-footer__links { display: flex; gap: 20px; flex-wrap: wrap; }
.ecom-footer__links a:hover { text-decoration: underline; }

/* ---------- CUSTOMER CARE FLOATING ---------- */
.ecom-care {
  position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 60;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ecom-surface); box-shadow: var(--ecom-shadow-lg);
  border-radius: var(--ecom-radius-pill); padding: 10px 14px; font-weight: var(--ecom-fw-medium);
}
.ecom-care__wa { width: 40px; height: 40px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; font-size: 20px; }

/* ---------- RTL ---------- */
[dir="rtl"] .ecom-logo { letter-spacing: 0; }
[dir="rtl"] .ecom-header__right { margin-inline-start: auto; }
/* logical properties (margin-inline, inset-inline) handle most flipping automatically */

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .ecom-nav { display: none; }       /* collapses to a menu trigger on mobile (Alpine) */
  .ecom-shell { flex-direction: column; }
  .ecom-sidebar { width: 100%; }
}
@media (max-width: 640px) {
  .ecom-search { display: none; }
  .ecom-header__inner { gap: 14px; }
  .ecom-footer__inner { flex-direction: column; align-items: flex-start; }
}


/* ===== Appended to public/css/ecom/ecom.css — Day 5 (modal + account) ===== */
[x-cloak]{ display:none !important; }

/* Modal */
.ecom-modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:grid; place-items:center; z-index:200; padding:20px; }
.ecom-modal{ background:var(--ecom-surface); border-radius:var(--ecom-radius); width:100%; max-width:920px; max-height:90vh; overflow:auto; box-shadow:var(--ecom-shadow-lg); }
.ecom-modal__head{ display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--ecom-border); }
.ecom-modal__head h3{ margin:0; color:var(--ecom-navy); font-size:var(--ecom-fs-lg); font-weight:var(--ecom-fw-bold); }
.ecom-modal__x{ background:0; border:0; font-size:20px; cursor:pointer; color:var(--ecom-muted); }
.ecom-modal__body{ padding:24px; display:flex; flex-direction:column; gap:16px; }
.ecom-modal__foot{ display:flex; justify-content:flex-end; gap:12px; padding:18px 24px; border-top:1px solid var(--ecom-border); }
.ecom-map{ width:100%; height:300px; border-radius:var(--ecom-radius-sm); border:1px solid var(--ecom-border); background:var(--ecom-surface-2); }
.ecom-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ecom-hint{ color:var(--ecom-muted); font-size:11px; font-style:normal; }

/* Account area */
.ecom-acc__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.ecom-acc__head h1{ color:var(--ecom-navy); font-size:var(--ecom-fs-xl); font-weight:var(--ecom-fw-bold); margin:0; }
.ecom-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.ecom-addrcard{ background:var(--ecom-surface); border:1px solid var(--ecom-border); border-radius:var(--ecom-radius); padding:18px; }
.ecom-addrcard.is-default{ border-color:var(--ecom-orange); }
.ecom-addrcard__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.ecom-addrcard__top strong{ color:var(--ecom-navy); }
.ecom-addrcard__lines{ color:var(--ecom-muted); font-size:var(--ecom-fs-sm); line-height:1.6; margin:0 0 14px; }
.ecom-addrcard__actions{ display:flex; gap:8px; flex-wrap:wrap; }
.ecom-badge{ font-size:11px; font-weight:var(--ecom-fw-bold); padding:3px 10px; border-radius:var(--ecom-radius-pill); }
.ecom-badge--green{ background:var(--ecom-success-soft); color:var(--ecom-success); }
.ecom-btn--danger{ background:#FDECEC; color:var(--ecom-danger); }
.ecom-muted{ color:var(--ecom-muted); }
@media (max-width:768px){ .ecom-grid3{grid-template-columns:1fr;} .ecom-cards{grid-template-columns:1fr;} }


/* Dropdown CSS for User */
.ecom-accountmenu{ position:relative; }
.ecom-accountmenu__panel{
  position:absolute; inset-inline-start:0; top:calc(100% + 8px);
  background:var(--ecom-surface); border:1px solid var(--ecom-border);
  border-radius:var(--ecom-radius); box-shadow:var(--ecom-shadow-lg);
  min-width:240px; padding:10px; z-index:80; display:flex; flex-direction:column; gap:2px;
}
.ecom-accountmenu__item{
  display:block; width:100%; text-align:start; background:0; border:0;
  font-family:inherit; font-size:var(--ecom-fs-base); color:var(--ecom-navy);
  padding:12px 14px; border-radius:var(--ecom-radius-sm); cursor:pointer;
}
.ecom-accountmenu__item:hover{ background:var(--ecom-surface-2); }
.ecom-accountmenu__item--logout{ color:var(--ecom-danger); }
.ecom-accountmenu__item--logout:hover{ background:#FDECEC; }


.ecom-banner { margin: 20px 0 24px; }
.ecom-banner img { width: 100%; height: auto; border-radius: 20px; display: block; }

.ecom main {
  padding-bottom: 48px;
}


/* Category card hover (SOL-style, smoother) */
.ecom-catcard,
.ecom-catcard .ecom-catcard__icon,
.ecom-catcard .ecom-catcard__name {
    transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),
                transform .4s cubic-bezier(.25,.8,.25,1),
                color .3s ease !important;
}

.ecom-catcard__icon {
    transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),
                transform .4s cubic-bezier(.25,.8,.25,1);
}
.ecom-catcard__name {
    transition: color .3s ease;
}

.ecom-catcard:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,.10);
    transform: translateY(-4px);
}
.ecom-catcard:hover .ecom-catcard__icon {
    box-shadow: 0 8px 22px rgba(0,0,0,.13);
    transform: translateY(-3px) scale(1.04);
}
.ecom-catcard:hover .ecom-catcard__name {
    color: var(--ecom-orange);
}


/* ===== Append to public/css/ecom/ecom.css — Day 6 team ===== */
.ecom-table-wrap{ overflow-x:auto; background:var(--ecom-surface); border:1px solid var(--ecom-border); border-radius:var(--ecom-radius); }
.ecom-table{ width:100%; border-collapse:collapse; }
.ecom-table th, .ecom-table td{ padding:12px 16px; text-align:start; border-bottom:1px solid var(--ecom-border); font-size:var(--ecom-fs-sm); }
.ecom-table th{ background:var(--ecom-surface-2); color:var(--ecom-navy); font-weight:var(--ecom-fw-bold); white-space:nowrap; }
.ecom-table tr:last-child td{ border-bottom:0; }
.ecom-table__actions{ display:flex; gap:6px; flex-wrap:wrap; }
.ecom-btn--sm{ padding:6px 12px; font-size:13px; }
.ecom-badge--amber{ background:#FEF3C7; color:#B45309; }
.ecom-badge--red{ background:#FDECEC; color:var(--ecom-danger); }

/* Permission grid in invite/edit modal */
.ecom-perm-grid{ display:flex; flex-direction:column; gap:10px; }
.ecom-perm-row{ border:1px solid var(--ecom-border); border-radius:var(--ecom-radius-sm); padding:12px 14px; }
.ecom-perm-row__branch{ font-weight:var(--ecom-fw-bold); color:var(--ecom-navy); }
.ecom-perm-row__opts{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:10px; padding-top:10px; border-top:1px dashed var(--ecom-border); }
.ecom-check--sm{ font-size:13px; }
.ecom-field--inline{ flex-direction:row; align-items:center; gap:8px; }
.ecom-field--inline span{ font-size:13px; white-space:nowrap; }
.ecom-field--inline input{ width:120px; }


body.ecom {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.ecom main {
    flex: 1 0 auto;
}
body.ecom .ecom-footer {
    flex-shrink: 0;
}



.ecom-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 22px; border-radius:var(--ecom-radius-sm);
  font-size:var(--ecom-fs-base); font-weight:var(--ecom-fw-medium);
  cursor:pointer; border:1px solid transparent; text-decoration:none;
  transition:background .15s, border-color .15s, opacity .15s;
  font-family:inherit; line-height:1;
}

/* Primary (green theme) */
.ecom-btn-primary{
  background:var(--ecom-orange); color:#fff; border-color:var(--ecom-orange);
}
.ecom-btn-primary:hover{ background:var(--ecom-orange-hover); border-color:var(--ecom-orange-hover); }

/* Checkout button — full width */
.ecom-checkout-btn{ width:100%; justify-content:center; gap:8px; }
.ecom-checkout-btn.disabled{ opacity:.5; pointer-events:none; }

/* Ghost button — outlined/transparent, for secondary actions */
.ecom-btn-ghost{
  background:transparent;
  color:var(--ecom-navy);
  border-color:var(--ecom-border);
}
.ecom-btn-ghost:hover{
  background:var(--ecom-surface-2);
  border-color:var(--ecom-navy);
}

/* Danger variant of ghost (e.g. Clear cart) */
.ecom-btn-ghost.danger{
  color:var(--ecom-danger);
}
.ecom-btn-ghost.danger:hover{
  background:var(--ecom-danger-soft, rgba(220,38,38,.08));
  border-color:var(--ecom-danger);
}


/* =====================================================================
   Ecom — Order approvals inbox (Day 9). Tokens only.
   ===================================================================== */
[x-cloak]{ display:none !important; }

.ecom-approval{
  background:var(--ecom-surface); border:1px solid var(--ecom-border);
  border-radius:var(--ecom-radius); padding:18px 20px; margin-bottom:14px;
}
.ecom-approval__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:10px;
}
.ecom-approval__head strong{ color:var(--ecom-navy); font-size:var(--ecom-fs-lg); }
.ecom-approval__by{ color:var(--ecom-muted); font-size:var(--ecom-fs-sm); margin-inline-start:8px; }
.ecom-approval__total{ font-weight:var(--ecom-fw-bold); color:var(--ecom-orange); font-size:var(--ecom-fs-lg); }

.ecom-approval__meta{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  font-size:var(--ecom-fs-sm); color:var(--ecom-muted);
  padding:10px 0; border-top:1px solid var(--ecom-border);
}
.ecom-approval__meta i{ color:var(--ecom-muted); margin-inline-end:4px; }
.ecom-link{ background:none; border:none; color:var(--ecom-orange); cursor:pointer; font-size:var(--ecom-fs-sm); }

.ecom-approval__items{
  margin:10px 0; padding:12px; background:var(--ecom-surface-2);
  border-radius:var(--ecom-radius-sm);
}
.ecom-approval__line{
  display:grid; grid-template-columns:1fr auto auto; gap:14px;
  padding:6px 0; font-size:var(--ecom-fs-sm); color:var(--ecom-ink);
}
.ecom-approval__line em{ color:var(--ecom-muted); font-style:normal; }

.ecom-approval__actions{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--ecom-border);
  flex-wrap:wrap;
}
.ecom-approval__note{
  height:38px; padding:0 12px; border:1px solid var(--ecom-border);
  border-radius:var(--ecom-radius-sm); font-size:var(--ecom-fs-sm);
  min-width:220px; background:var(--ecom-input-bg); color:var(--ecom-navy);
}



/* Tabs */
.ecom-req-tabs{ display:flex; gap:12px; margin-bottom:22px; }
.ecom-req-tab{
  padding:10px 22px; border-radius:var(--ecom-radius-sm);
  border:1px solid var(--ecom-border); color:var(--ecom-ink);
  font-weight:var(--ecom-fw-medium); text-decoration:none; font-size:var(--ecom-fs-sm);
}
.ecom-req-tab.on{ background:var(--ecom-orange); color:#fff; border-color:var(--ecom-orange); }

/* Empty */
.ecom-req-empty{ text-align:center; padding:56px 20px; color:var(--ecom-muted); }
.ecom-req-empty i{ font-size:42px; color:var(--ecom-border); }
.ecom-req-empty p{ margin-top:12px; }

/* Table */
.ecom-req-tablewrap{ overflow-x:auto; background:var(--ecom-surface); border:1px solid var(--ecom-border); border-radius:var(--ecom-radius); }
.ecom-req-table{ width:100%; border-collapse:collapse; min-width:760px; }
.ecom-req-table th{
  text-align:start; padding:16px 18px; font-size:var(--ecom-fs-sm);
  color:var(--ecom-navy); font-weight:var(--ecom-fw-bold);
  background:var(--ecom-surface-2); border-bottom:1px solid var(--ecom-border);
}
.ecom-req-table td{
  padding:16px 18px; font-size:var(--ecom-fs-sm); color:var(--ecom-ink);
  border-bottom:1px solid var(--ecom-border); vertical-align:middle;
}
.ecom-req-table tr:last-child td{ border-bottom:none; }
.ecom-req-branch{ max-width:240px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Status pill */
.ecom-req-status{ font-weight:var(--ecom-fw-medium); }
.ecom-req-status--pending_approval{ color:var(--ecom-orange); }
.ecom-req-status--pending{ color:var(--ecom-muted); }
.ecom-req-status--accepted,
.ecom-req-status--preparing,
.ecom-req-status--on_the_way{ color:var(--ecom-navy); }
.ecom-req-status--delivered{ color:var(--ecom-success); }
.ecom-req-status--rejected,
.ecom-req-status--cancelled{ color:var(--ecom-danger); }

.ecom-btn--sm{ height:34px; padding:0 16px; font-size:var(--ecom-fs-sm); }

/* ---- Details page ---- */
.ecom-reqdetail{ }
.ecom-stepper{
  display:flex; align-items:center; background:var(--ecom-surface);
  border:1px solid var(--ecom-border); border-radius:var(--ecom-radius);
  padding:24px 28px; margin-bottom:20px;
}
.ecom-stepper__node{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.ecom-stepper__dot{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--ecom-border); color:transparent; font-size:14px;
}
.ecom-stepper__node.done .ecom-stepper__dot{ background:var(--ecom-orange); border-color:var(--ecom-orange); color:#fff; }
.ecom-stepper__node.current .ecom-stepper__dot{ box-shadow:0 0 0 4px var(--ecom-orange-soft); }
.ecom-stepper__label{ font-size:12px; color:var(--ecom-navy); font-weight:var(--ecom-fw-medium); }
.ecom-stepper__bar{ flex:1; height:2px; background:var(--ecom-border); margin:0 8px 22px; }
.ecom-stepper__bar.done{ background:var(--ecom-orange); }

.ecom-reqstate{
  padding:16px 20px; border-radius:var(--ecom-radius); margin-bottom:20px;
  font-weight:var(--ecom-fw-bold); text-align:center;
}
.ecom-reqstate--pending_approval{ background:var(--ecom-orange-soft); color:var(--ecom-orange); }
.ecom-reqstate--rejected,
.ecom-reqstate--cancelled{ background:rgba(220,38,38,.08); color:var(--ecom-danger); }
.ecom-reqstate__note{ font-weight:var(--ecom-fw-normal); }

.ecom-reqdetail__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.ecom-card{ background:var(--ecom-surface); border:1px solid var(--ecom-border); border-radius:var(--ecom-radius); padding:20px; margin-bottom:16px; }
.ecom-card__h{ font-size:var(--ecom-fs-lg); font-weight:var(--ecom-fw-bold); margin:0 0 14px; }
.ecom-card__h.orange{ color:var(--ecom-orange); }

.ecom-reqitem{ display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--ecom-border); }
.ecom-reqitem:last-child{ border-bottom:none; }
.ecom-reqitem__name{ font-weight:var(--ecom-fw-medium); color:var(--ecom-navy); }
.ecom-reqitem__pack{ font-size:12px; color:var(--ecom-muted); grid-column:1; }
.ecom-reqitem__qty{ color:var(--ecom-muted); font-size:var(--ecom-fs-sm); }
.ecom-reqitem__total{ font-weight:var(--ecom-fw-bold); color:var(--ecom-navy); }

.ecom-reqdetail__addr{ font-size:var(--ecom-fs-sm); color:var(--ecom-navy); line-height:1.5; margin-bottom:12px; }
.ecom-kv{ display:flex; justify-content:space-between; padding:8px 0; font-size:var(--ecom-fs-sm); color:var(--ecom-ink); border-bottom:1px solid var(--ecom-border); }
.ecom-kv:last-child{ border-bottom:none; }
.ecom-kv.grand{ font-size:var(--ecom-fs-lg); font-weight:var(--ecom-fw-bold); color:var(--ecom-navy); border-top:2px solid var(--ecom-border); margin-top:6px; padding-top:12px; }

.ecom-reqactions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ecom-reqactions form{ display:flex; gap:8px; align-items:center; }
.ecom-reqactions__note{ height:38px; padding:0 12px; border:1px solid var(--ecom-border); border-radius:var(--ecom-radius-sm); font-size:var(--ecom-fs-sm); min-width:180px; }
.ecom-reqback{ margin-top:8px; }

@media (max-width:820px){ .ecom-reqdetail__grid{ grid-template-columns:1fr; } }



/* Shared status badge */
.ecom-ord-badge{ display:inline-block; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:var(--ecom-fw-medium); white-space:nowrap; }
.ecom-ord-badge--lg{ font-size:var(--ecom-fs-sm); padding:6px 16px; }
.ecom-ord-badge--pending{ background:var(--ecom-surface-2); color:var(--ecom-muted); }
.ecom-ord-badge--accepted,.ecom-ord-badge--preparing{ background:#e8f0fe; color:#1a56db; }
.ecom-ord-badge--on_the_way{ background:var(--ecom-orange-soft); color:var(--ecom-orange); }
.ecom-ord-badge--delivered{ background:#e6f6ec; color:var(--ecom-success); }
.ecom-ord-badge--cancelled,.ecom-ord-badge--rejected{ background:rgba(220,38,38,.1); color:var(--ecom-danger); }

/* ---- Orders list ---- */
.ecom-acc__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.ecom-acc__head h1{ font-size:var(--ecom-fs-xl); color:var(--ecom-navy); font-weight:var(--ecom-fw-bold); margin:0; }
.ecom-orders__scope,.ecom-dash__scope{ font-size:var(--ecom-fs-sm); color:var(--ecom-muted); }

.ecom-ord-tabs{ display:flex; gap:10px; margin-bottom:20px; }
.ecom-ord-tab{ padding:10px 22px; border-radius:var(--ecom-radius-sm); border:1px solid var(--ecom-border); color:var(--ecom-ink); font-weight:var(--ecom-fw-medium); text-decoration:none; font-size:var(--ecom-fs-sm); background: white}
.ecom-ord-tab.on{ background:var(--ecom-orange); color:#fff; border-color:var(--ecom-orange); }

.ecom-ord-empty{ text-align:center; padding:56px 20px; color:var(--ecom-muted); }
.ecom-ord-empty i{ font-size:46px; color:var(--ecom-border); }
.ecom-ord-empty p{ margin:12px 0 18px; }

.ecom-ord-list{ display:flex; flex-direction:column; gap:12px; }
.ecom-ord-card{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; background:var(--ecom-surface); border:1px solid var(--ecom-border); border-radius:var(--ecom-radius); text-decoration:none; transition:border-color .15s, box-shadow .15s; }
.ecom-ord-card:hover{ border-color:var(--ecom-orange); box-shadow:0 2px 12px rgba(0,0,0,.05); }
.ecom-ord-card__num{ font-weight:var(--ecom-fw-bold); color:var(--ecom-navy); font-size:var(--ecom-fs-base); margin-bottom:6px; }
.ecom-ord-card__meta{ display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--ecom-muted); }
.ecom-ord-card__meta i{ margin-inline-end:4px; }
.ecom-ord-card__side{ display:flex; align-items:center; gap:16px; }
.ecom-ord-card__total{ font-weight:var(--ecom-fw-bold); color:var(--ecom-navy); }
.ecom-ord-card__chev{ color:var(--ecom-muted); }

/* ---- Order details ---- */
.ecom-orddetail__top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.ecom-orddetail__num{ font-size:var(--ecom-fs-xl); color:var(--ecom-navy); font-weight:var(--ecom-fw-bold); margin:0; }
.ecom-orddetail__date{ font-size:var(--ecom-fs-sm); color:var(--ecom-muted); }

.ecom-timeline{ display:flex; align-items:center; background:var(--ecom-surface); border:1px solid var(--ecom-border); border-radius:var(--ecom-radius); padding:24px 28px; margin-bottom:20px; }
.ecom-timeline__node{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.ecom-timeline__dot{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--ecom-border); color:var(--ecom-border); }
.ecom-timeline__node.done .ecom-timeline__dot{ background:var(--ecom-orange); border-color:var(--ecom-orange); color:#fff; }
.ecom-timeline__node.current .ecom-timeline__dot{ box-shadow:0 0 0 4px var(--ecom-orange-soft); }
.ecom-timeline__label{ font-size:12px; color:var(--ecom-navy); font-weight:var(--ecom-fw-medium); }
.ecom-timeline__bar{ flex:1; height:2px; background:var(--ecom-border); margin:0 8px 22px; }
.ecom-timeline__bar.done{ background:var(--ecom-orange); }

.ecom-ord-cancelbanner{ background:rgba(220,38,38,.08); color:var(--ecom-danger); padding:16px 20px; border-radius:var(--ecom-radius); margin-bottom:20px; font-weight:var(--ecom-fw-medium); }
.ecom-ord-cancelbanner i{ margin-inline-end:8px; }

.ecom-orddetail__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:start; }
.ecom-card{ background:var(--ecom-surface); border:1px solid var(--ecom-border); border-radius:var(--ecom-radius); padding:20px; margin-bottom:16px; }
.ecom-card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.ecom-card__h{ font-size:var(--ecom-fs-lg); font-weight:var(--ecom-fw-bold); color:var(--ecom-navy); margin:0 0 14px; }
.ecom-card__head .ecom-card__h{ margin:0; }

.ecom-od-item{ display:grid; grid-template-columns:1fr auto auto auto; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--ecom-border); }
.ecom-od-item:last-child{ border-bottom:none; }
.ecom-od-item__name{ font-weight:var(--ecom-fw-medium); color:var(--ecom-navy); font-size:var(--ecom-fs-sm); }
.ecom-od-item__pack{ font-size:12px; color:var(--ecom-muted); }
.ecom-od-item__qty,.ecom-od-item__price{ font-size:var(--ecom-fs-sm); color:var(--ecom-muted); }
.ecom-od-item__total{ font-weight:var(--ecom-fw-bold); color:var(--ecom-navy); font-size:var(--ecom-fs-sm); }
.ecom-od-addr{ font-size:var(--ecom-fs-sm); color:var(--ecom-navy); line-height:1.5; margin-bottom:12px; }

.ecom-kv{ display:flex; justify-content:space-between; padding:8px 0; font-size:var(--ecom-fs-sm); color:var(--ecom-ink); border-bottom:1px solid var(--ecom-border); }
.ecom-kv:last-child{ border-bottom:none; }
.ecom-kv .minus{ color:var(--ecom-success); }
.ecom-kv.grand{ font-size:var(--ecom-fs-lg); font-weight:var(--ecom-fw-bold); color:var(--ecom-navy); border-top:2px solid var(--ecom-border); margin-top:6px; padding-top:12px; }
.ecom-paystatus--paid{ color:var(--ecom-success); font-weight:var(--ecom-fw-bold); }
.ecom-paystatus--pending{ color:var(--ecom-orange); }
.ecom-paystatus--failed{ color:var(--ecom-danger); }
.ecom-link{ color:var(--ecom-orange); text-decoration:none; font-size:var(--ecom-fs-sm); }
.ecom-od-back{ margin-top:8px; }

/* ---- Dashboard ---- */
.ecom-dash__stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:22px; }
.ecom-stat{ background:var(--ecom-surface); border:1px solid var(--ecom-border); border-radius:var(--ecom-radius); padding:20px; text-align:center; }
.ecom-stat__icon{ width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:20px; }
.ecom-stat__icon--blue{ background:#e8f0fe; color:#1a56db; }
.ecom-stat__icon--green{ background:#e6f6ec; color:var(--ecom-success); }
.ecom-stat__icon--orange{ background:var(--ecom-orange-soft); color:var(--ecom-orange); }
.ecom-stat__icon--navy{ background:var(--ecom-surface-2); color:var(--ecom-navy); }
.ecom-stat__val{ font-size:26px; font-weight:var(--ecom-fw-bold); color:var(--ecom-navy); }
.ecom-stat__label{ font-size:12px; color:var(--ecom-muted); margin-top:4px; }

.ecom-dash__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.ecom-dash-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--ecom-border); text-decoration:none; }
.ecom-dash-row:last-child{ border-bottom:none; }
.ecom-dash-row__num{ font-weight:var(--ecom-fw-medium); color:var(--ecom-navy); font-size:var(--ecom-fs-sm); flex:1; }
.ecom-dash-row__total{ font-weight:var(--ecom-fw-bold); color:var(--ecom-navy); font-size:var(--ecom-fs-sm); }
.ecom-dash-row__cnt{ font-size:12px; color:var(--ecom-muted); }
.ecom-muted{ color:var(--ecom-muted); font-size:var(--ecom-fs-sm); }

@media (max-width:900px){
  .ecom-dash__stats{ grid-template-columns:repeat(2,1fr); }
  .ecom-dash__grid,.ecom-orddetail__grid{ grid-template-columns:1fr; }
}
.ecom-ord-filters{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.ecom-ord-filter{ height:36px; padding:0 12px; border:1px solid var(--ecom-border); 
  border-radius:var(--ecom-radius-sm); font-size:var(--ecom-fs-sm); color:var(--ecom-navy); }
.ecom-ord-filters__spacer{ flex:1; }



/* Product page — SKU options + states (append to your ecom PDP styles) */
.ecom-pdp__opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.ecom-pdp__opt{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 16px;border:1.5px solid var(--ecom-border,#e2e8f0);border-radius:10px;background:#fff;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;color:var(--ecom-navy,#1f2937);transition:border-color .15s,background .15s;}
.ecom-pdp__opt small{font-size:11px;font-weight:400;color:var(--ecom-muted,#94a3b8);}
.ecom-pdp__opt:hover{border-color:var(--ecom-primary,#16a34a);}
.ecom-pdp__opt.is-sel{border-color:var(--ecom-primary,#16a34a);background:var(--ecom-primary-soft,#e6f6ec);}
.ecom-pdp__pct{display:inline-block;background:var(--ecom-primary,#16a34a);color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:20px;margin-inline-start:6px;}
.ecom-pdp__stock{margin-top:10px;color:var(--ecom-success,#16a34a);font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;}
.ecom-pdp__unavail{margin-top:16px;padding:18px;border:1.5px dashed var(--ecom-danger,#dc2626);border-radius:12px;background:rgba(220,38,38,.05);color:var(--ecom-danger,#dc2626);}
.ecom-pdp__unavail i{font-size:22px;display:block;margin-bottom:8px;}
.ecom-pdp__unavail strong{display:block;font-size:15px;margin-bottom:4px;}
.ecom-pdp__unavail p{font-size:13px;color:var(--ecom-muted,#94a3b8);margin:0;}


/* SKU option buttons (Available Options) */
.ecom-pdp__opts{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:8px;
}

.ecom-pdp__opt{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding:10px 16px;
    border:1.5px solid var(--ecom-border, #e2e8f0);
    border-radius:10px;
    background:#fff;
    cursor:pointer;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    color:var(--ecom-navy, #1f2937);
    transition:border-color .15s, background .15s, box-shadow .15s;
}

.ecom-pdp__opt small{
    font-size:11px;
    font-weight:400;
    color:var(--ecom-muted, #94a3b8);
}

.ecom-pdp__opt:hover{
    border-color:var(--ecom-primary, #16a34a);
}

/* Selected state */
.ecom-pdp__opt.is-sel{
    border-color:var(--ecom-primary, #16a34a);
    background:var(--ecom-primary-soft, #e6f6ec);
    box-shadow:0 0 0 2px rgba(22,163,74,.15);
}


/* Ecom account · Overview (profile) — green theme. Append to your ecom account CSS. */
.ecom-ov__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;}
.ecom-ov__card{background:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 1px 3px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:10px;}
.ecom-ov__label{font-size:13px;color:#94a3b8;border-bottom:1px solid #eef2f7;padding-bottom:8px;}
.ecom-ov__value{font-size:18px;font-weight:700;color:var(--ecom-primary,#16a34a);}
.ecom-ov__contact{background:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 1px 3px rgba(0,0,0,.06);margin-bottom:24px;}
.ecom-ov__contact-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px;font-size:18px;color:#475569;}
.ecom-ov__hl{color:var(--ecom-primary,#16a34a);font-weight:600;}
.ecom-ov__subhead{font-size:18px;font-weight:700;color:#1f2937;margin:20px 0 10px;}
.ecom-ov__doctable{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden;margin-bottom:8px;}
.ecom-ov__doctable-head{display:flex;justify-content:space-between;padding:14px 20px;font-weight:700;color:#475569;font-size:14px;border-bottom:1px solid #eef2f7;}
.ecom-ov__doctable-row{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid #f4f7fa;font-size:14px;color:#1f2937;}
.ecom-ov__doctable-row:last-child{border-bottom:none;}
.ecom-ov__doctable-empty{padding:16px 20px;color:#94a3b8;font-size:13px;}
.ecom-ov__doclink{color:var(--ecom-primary,#16a34a);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.ecom-ov__actions{display:flex;gap:16px;margin-top:24px;}
.ecom-ov__actions .ecom-btn{flex:1;justify-content:center;padding:16px;font-size:16px;}

/* Ecom profile · certificate upload controls (green theme) — append to account CSS */
.ecom-ov__badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#16a34a;background:#dcfce7;padding:2px 8px;border-radius:999px;margin-inline-start:8px;}
.ecom-ov__upload{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:16px 20px;margin-bottom:16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.ecom-ov__upload-field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:220px;}
.ecom-ov__upload-label{font-size:13px;color:#64748b;font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.ecom-ov__upload-field input[type=file]{padding:9px 12px;border:1.5px dashed #cbd5e1;border-radius:10px;font-family:inherit;font-size:13px;color:#475569;background:#f8fafc;cursor:pointer;}
.ecom-ov__upload-field input[type=file]:hover{border-color:var(--ecom-primary,#16a34a);}
.ecom-ov__upload-btn{padding:11px 22px;white-space:nowrap;}
.ecom-ov__upload-hint{flex-basis:100%;font-size:12px;color:#94a3b8;font-style:normal;}

/* Ecom profile · certificate upload controls (green theme) — append to account CSS */
.ecom-ov__badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#16a34a;background:#dcfce7;padding:2px 8px;border-radius:999px;margin-inline-start:8px;}
.ecom-ov__upload{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:16px 20px;margin-bottom:16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.ecom-ov__upload-field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:220px;}
.ecom-ov__upload-label{font-size:13px;color:#64748b;font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.ecom-ov__upload-field input[type=file]{padding:9px 12px;border:1.5px dashed #cbd5e1;border-radius:10px;font-family:inherit;font-size:13px;color:#475569;background:#f8fafc;cursor:pointer;}
.ecom-ov__upload-field input[type=file]:hover{border-color:var(--ecom-primary,#16a34a);}
.ecom-ov__upload-btn{padding:11px 22px;white-space:nowrap;}
.ecom-ov__upload-hint{flex-basis:100%;font-size:12px;color:#94a3b8;font-style:normal;}

/* Edit form */
.ecom-ov__form{background:#fff;border-radius:14px;padding:22px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.ecom-ov__form-note{font-size:13px;color:#94a3b8;margin-bottom:16px;}
.ecom-ov__form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.ecom-ov__form-grid--ro{opacity:.7;}
.ecom-field{display:flex;flex-direction:column;gap:6px;}
.ecom-field label{font-size:13px;color:#64748b;font-weight:600;}
.ecom-field input{padding:11px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-family:inherit;font-size:14px;color:#1f2937;outline:none;}
.ecom-field input:focus{border-color:var(--ecom-primary,#16a34a);}
.ecom-field input:disabled{background:#f8fafc;color:#94a3b8;}
/* Modal */
/* Password modal (isolated — does NOT touch the address .ecom-modal) */
.ecom-pwmodal{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;}
.ecom-pwmodal__box{background:#fff;border-radius:16px;padding:26px;max-width:440px;width:100%;}
.ecom-pwmodal__title{font-size:18px;font-weight:700;color:#1f2937;margin-bottom:16px;}
.ecom-pwmodal__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;}
.ecom-pwmodal .ecom-field{margin-bottom:12px;}

/* Alerts */
.ecom-alert{padding:12px 16px;border-radius:10px;font-size:14px;font-weight:600;margin-bottom:16px;}
.ecom-alert--success{background:#e6f6ec;color:#16a34a;}
.ecom-alert--error{background:#fde8e8;color:#dc2626;}



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

/* Ecom search · filter bar (green theme) */
.ecom-filterbar{
    display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
    background:#fff;border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.06);
    padding:16px 18px;margin:18px 0;
}
.ecom-filterbar__field{display:flex;flex-direction:column;gap:5px;}
.ecom-filterbar__field label{font-size:12px;color:#64748b;font-weight:600;}
.ecom-filterbar__field select,
.ecom-filterbar__field input{
    padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:10px;
    font-family:inherit;font-size:13px;color:#1f2937;outline:none;background:#fff;min-width:150px;
}
.ecom-filterbar__field select:focus,
.ecom-filterbar__field input:focus{border-color:var(--ecom-primary,#16a34a);}
.ecom-filterbar__field select:disabled{background:#f8fafc;color:#94a3b8;cursor:not-allowed;}
.ecom-filterbar__price{display:flex;gap:8px;align-items:center;}
.ecom-filterbar__price input{width:90px;min-width:0;}
.ecom-filterbar__price span{color:#94a3b8;}
.ecom-filterbar__reset{
    background:none;border:none;color:#64748b;font-size:12px;font-weight:600;
    cursor:pointer;text-decoration:underline;padding:9px 6px;font-family:inherit;
}
.ecom-filterbar__reset:hover{color:var(--ecom-primary,#16a34a);}

/* Loading state on the results grid */
.ecom-grid-wrap{position:relative;min-height:120px;}
.ecom-grid-wrap.is-loading{opacity:.5;pointer-events:none;}
.ecom-grid-spinner{
    position:absolute;inset:0;display:none;align-items:center;justify-content:center;
    font-size:24px;color:var(--ecom-primary,#16a34a);
}
.ecom-grid-wrap.is-loading .ecom-grid-spinner{display:flex;}

/* Responsive: stack fields on narrow screens */
@media (max-width:640px){
    .ecom-filterbar{gap:10px;}
    .ecom-filterbar__field,
    .ecom-filterbar__field select,
    .ecom-filterbar__field input{width:100%;min-width:0;}
    .ecom-filterbar__price{width:100%;}
    .ecom-filterbar__price input{flex:1;}
}

/* RTL: price dash + alignment */
[dir="rtl"] .ecom-filterbar__field label{text-align:right;}


/* Ecom · pagination (green theme) — styles Laravel's default paginator */
.ecom-pagination{
    display:flex;justify-content:center;margin-top:28px;
}
.ecom-pagination nav{
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
/* Hide the "Showing X to Y of Z results" text block on desktop (optional) */
.ecom-pagination nav > div:first-child{display:none;}
.ecom-pagination nav > div:last-child{
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}

/* Page links + spans */
.ecom-pagination a,
.ecom-pagination span[aria-current],
.ecom-pagination span[aria-disabled]{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:38px;height:38px;padding:0 12px;
    border:1.5px solid #e2e8f0;border-radius:10px;
    font-size:14px;font-weight:600;color:#475569;text-decoration:none;
    background:#fff;transition:all .15s;
}
.ecom-pagination a:hover{
    border-color:var(--ecom-primary,#16a34a);
    color:var(--ecom-primary,#16a34a);
}
/* Current page */
.ecom-pagination span[aria-current] span,
.ecom-pagination span[aria-current]{
    background:var(--ecom-primary,#16a34a);
    border-color:var(--ecom-primary,#16a34a);
    color:#fff;
}
/* Disabled (prev/next at edges) */
.ecom-pagination span[aria-disabled]{
    color:#cbd5e1;background:#f8fafc;cursor:not-allowed;
}
/* SVG arrows in prev/next */
.ecom-pagination svg{width:18px;height:18px;}

/* RTL: flip the prev/next arrows */
[dir="rtl"] .ecom-pagination svg{transform:scaleX(-1);}

/* Responsive */
@media (max-width:640px){
    .ecom-pagination a,
    .ecom-pagination span[aria-current],
    .ecom-pagination span[aria-disabled]{min-width:34px;height:34px;padding:0 9px;font-size:13px;}
}

.ecom-pagination span.inline-flex.rtl\:flex-row-reverse.shadow-sm.rounded-md {
    display: flex;
    gap: 5px;
}