/* LIBSEH Design System — tokens, buttons, forms, cards, motion, a11y.
   Loaded last. Does not invent new page layouts; it unifies existing ones. */
:root {
  --ls-burgundy: #66001f;
  --ls-burgundy-dark: #5D142C;
  --ls-olive: #59633A;
  --ls-beige: #E8D8BE;
  --ls-ivory: #FBF7F0;
  --ls-white: #FFFFFF;
  --ls-ink: #31352C;
  --ls-muted: #5C5F54;
  --ls-line: #E8D8BE;
  --ls-err: #9B2C2C;
  --ls-ok: #59633A;
  --ls-radius: 18px;
  --ls-radius-lg: 22px;
  --ls-radius-sm: 12px;
  --ls-space-1: 4px;
  --ls-space-2: 8px;
  --ls-space-3: 12px;
  --ls-space-4: 16px;
  --ls-space-5: 24px;
  --ls-space-6: 32px;
  --ls-space-7: 48px;
  --ls-touch: 44px;
  --ls-shadow: none;
  --ls-font: "Cairo", "Tajawal", "IBM Plex Sans Arabic", "Heebo", sans-serif;
  --ls-ease: 180ms ease;
  --libseh-burgundy: #66001f;
  --libseh-burgundy-dark: #5D142C;
  --libseh-gold: #E8D8BE;
  --libseh-ivory: #FBF7F0;
  --libseh-olive: #59633A;
  --libseh-danger: #9B2C2C;
  --libseh-border: #E8D8BE;
  --libseh-text: #31352C;
  --btn-shadow: none;
  --btn-focus: 0 0 0 3px rgba(120, 29, 58, .28);
}

html, body {
  max-width: 100%;
}

body {
  margin: 0;
}

html body {
  background: var(--ls-ivory);
  color: var(--ls-ink);
  font-family: var(--ls-font);
}

html body.lang-he { font-family: "Heebo", "Cairo", sans-serif; }

.ls-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

.round-icon[title]:hover::after,
.round-icon[aria-label]:hover::after { /* tooltip via native title */ }

html body .pill,
html body .btn,
html body button.pill,
html body a.pill {
  border-radius: var(--ls-radius-sm) !important;
  box-shadow: none !important;
  min-height: var(--ls-touch) !important;
  transition: background var(--ls-ease), color var(--ls-ease), border-color var(--ls-ease), opacity var(--ls-ease) !important;
}

html body .pill.primary,
html body .btn.primary {
  background: var(--ls-burgundy) !important;
  color: #fff !important;
  border: 1px solid var(--ls-burgundy) !important;
}
html body .pill.primary:hover,
html body .btn.primary:hover { background: var(--ls-burgundy-dark) !important; }

html body .pill.secondary,
html body .btn.secondary {
  background: var(--ls-beige) !important;
  color: var(--ls-burgundy) !important;
  border: 1px solid var(--ls-beige) !important;
}

html body .pill.ghost,
html body .btn.ghost,
html body .pill.outline {
  background: transparent !important;
  color: var(--ls-burgundy) !important;
  border: 1.5px solid var(--ls-burgundy) !important;
}

html body .pill.success,
html body .btn.success {
  background: var(--ls-olive) !important;
  color: #fff !important;
  border-color: var(--ls-olive) !important;
}

html body .pill.danger,
html body .btn.danger {
  background: transparent !important;
  color: var(--ls-err) !important;
  border: 1.5px solid var(--ls-err) !important;
}

html body .pill:focus-visible,
html body .btn:focus-visible,
html body .round-icon:focus-visible,
html body a:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body button:focus-visible {
  outline: 2px solid var(--ls-burgundy) !important;
  outline-offset: 2px !important;
}

html body .pill:active,
html body .btn:active { transform: none; filter: brightness(.96); }

html body .pill:disabled,
html body .btn:disabled,
html body .pill.is-loading,
html body .btn.is-loading {
  opacity: .55 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

html body .round-icon {
  min-width: var(--ls-touch) !important;
  min-height: var(--ls-touch) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

html body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html body select,
html body textarea {
  min-height: var(--ls-touch);
  border: 1px solid var(--ls-line) !important;
  border-radius: var(--ls-radius-sm) !important;
  background: var(--ls-white) !important;
  color: var(--ls-ink);
  font: inherit;
  font-size: 16px;
}
html body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
html body select:focus,
html body textarea:focus {
  border-color: var(--ls-burgundy) !important;
  box-shadow: none !important;
}
html body .is-invalid,
html body input[aria-invalid="true"] {
  border-color: var(--ls-err) !important;
}
html body .field-error {
  color: var(--ls-err);
  font-size: .85rem;
  margin-top: 4px;
}

html body .ls-pc,
html body .directory-store,
html body .featured-store,
html body .order-card,
html body .account-card,
html body .aya-card,
html body .mdash-block,
html body .inbox-card {
  background: var(--ls-white);
  border: 1px solid var(--ls-beige);
  border-radius: var(--ls-radius);
  box-shadow: none !important;
}

html body .empty-state,
html body .ls-state {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 32px 16px;
  text-align: center;
  background: var(--ls-white);
  border: 1px solid var(--ls-beige);
  border-radius: var(--ls-radius);
  color: var(--ls-muted);
}

html body .libseh-toast,
html body [data-libseh-toast] {
  position: fixed;
  inset-inline: 16px;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  background: var(--ls-ink);
  color: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
  box-shadow: none;
}

.price, .money, [data-ltr], a[href^="tel"], a[href^="mailto"] {
  unicode-bidi: isolate;
  direction: ltr;
  display: inline-block;
}

html body .ls-pc { height: auto !important; }

html body img {
  max-width: 100%;
}
html body .ls-pc-media img,
html body .home-hero img,
html body .main-category img {
  object-fit: cover;
}

html body.admin-view:not(.merchant-view),
html body.merchant-view {
  background: var(--ls-ivory);
  color: var(--ls-ink);
  font-family: var(--ls-font);
}

@media (max-width: 768px) {
  html body .aya-table-wrap table,
  html body table.admin-table {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (min-width: 1024px) {
  html body .header-search-toggle { display: none !important; }
}
@media (max-width: 1023px) {
  html body .header-search-form { display: none !important; }
  html body .header-search-toggle { display: inline-flex !important; }
}

@media (min-width: 768px) {
  html body.home-page .categories-grid.main-category-circles {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: 880px;
  }
}

@media (min-width: 1024px) {
html body .libseh-header .language-switcher,
html body .libseh-header .header-language-switcher,
html body .aya-topbar .language-switcher,
html body .aya-tools .language-switcher {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
}

html body details.language-switcher > summary.language-switcher-toggle {
  display: inline-flex !important;
}

html body details.language-switcher:not([open]) > .language-switcher-menu {
  display: none !important;
}

html body details.language-switcher[open] > .language-switcher-menu {
  display: grid !important;
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 90;
  min-width: 198px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid #E8D8BE;
  background: #f6f1e8;
  gap: 4px;
}

html body:not(.admin-view):not(.merchant-view) .libseh-header {
  --ls-header-h: 64px;
}

html body:not(.admin-view):not(.merchant-view) .libseh-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  width: min(100% - 24px, 1180px);
  margin-inline: auto;
  padding-block: 8px;
  padding-inline: 4px;
}

html body:not(.admin-view):not(.merchant-view) .header-tools {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2px !important;
}

html body:not(.admin-view):not(.merchant-view) .header-login-icon.header-login-link {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: #31352C !important;
  background: transparent !important;
  border: 0 !important;
}

html body:not(.admin-view):not(.merchant-view) .header-account-btn img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

html body:not(.admin-view):not(.merchant-view) .header-account-link,
html body:not(.admin-view):not(.merchant-view) .header-dashboard-link,
html body:not(.admin-view):not(.merchant-view) .header-text-link {
  display: none !important;
}

html body.cart-view:not(.admin-view):not(.merchant-view) main {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: calc(100dvh - var(--ls-header-h, 72px) - 12rem) !important;
}

html body.cart-view:not(.admin-view):not(.merchant-view) .customer-cart-page {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(100% - 32px, 1120px) !important;
  margin-inline: auto !important;
  padding-block: 20px 32px !important;
  padding-inline: 0 !important;
}

html body.cart-view:not(.admin-view):not(.merchant-view) .cart-hero {
  text-align: center !important;
  max-width: 620px !important;
  margin: 0 auto 16px !important;
  padding: 0 !important;
}

html body.cart-view:not(.admin-view):not(.merchant-view) .cart-hero h1 {
  margin: 4px 0 !important;
  color: #66001f !important;
  font-size: clamp(1.5rem, 4vw, 2rem) !important;
}

html body.cart-view:not(.admin-view):not(.merchant-view) .cart-empty-page {
  width: min(100%, 620px) !important;
  margin: auto !important;
  min-height: 0 !important;
  padding: 32px 20px !important;
  background: #FBF7F0 !important;
  border: 1px solid #E8D8BE !important;
  box-shadow: none !important;
}

html body.cart-view:not(.admin-view):not(.merchant-view) .cart-empty-icon {
  width: 88px !important;
  height: 88px !important;
  color: #66001f !important;
  box-shadow: none !important;
  border: 1px solid #E8D8BE !important;
}

html body.cart-view:not(.admin-view):not(.merchant-view) .cart-empty-icon svg {
  width: 40px !important;
  height: 40px !important;
  stroke: #66001f !important;
}

html body.cart-view:not(.admin-view):not(.merchant-view) .cart-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
}

html body.cart-view:not(.admin-view):not(.merchant-view) .cart-layout {
  display: grid !important;
  gap: 20px !important;
}

html body:not(.admin-view):not(.merchant-view) .libseh-footer {
  background: #FBF7F0 !important;
}

html body:not(.admin-view):not(.merchant-view) .libseh-footer .footer-col {
  display: grid !important;
  gap: 6px !important;
  align-content: start !important;
}

html body:not(.admin-view):not(.merchant-view) .libseh-footer .footer-col h2 {
  margin: 0 0 6px !important;
  color: #66001f !important;
  font-size: 0.95rem !important;
}

html body:not(.admin-view):not(.merchant-view) :is(.breadcrumb, .cart-crumb) a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}

/* One-shot session notice (e.g. account created) — in page flow, never over the header or hero */
html body .site-flash {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
  width: min(100% - 32px, 1280px);
  margin: 12px auto;
  padding-block: 4px;
  padding-inline: 16px 4px;
  border: 1px solid rgba(89, 99, 58, 0.3);
  border-radius: 14px;
  background: #F4F2E7;
  color: #31352C;
  box-shadow: 0 6px 18px rgba(49, 53, 44, 0.06);
}
html body .site-flash.is-error {
  border-color: rgba(120, 29, 58, 0.3);
  background: #FBEFF1;
}
html body .site-flash .site-flash-icon {
  flex: 0 0 auto;
  display: inline-flex;
  margin-block-start: 12px;
  color: #59633A;
}
html body .site-flash.is-error .site-flash-icon { color: #66001f; }
html body .site-flash .ls-icon { width: 20px; height: 20px; }
html body .site-flash .site-flash-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding-block: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
html body .site-flash .site-flash-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  box-shadow: none;
  cursor: pointer;
}
html body .site-flash .site-flash-close:hover { background: rgba(49, 53, 44, 0.08); }
html body .site-flash .site-flash-close:focus-visible { outline: 2px solid #66001f; outline-offset: 2px; }

html body:not(.admin-view):not(.merchant-view) .libseh-footer .footer-col a {
  display: flex !important;
  align-items: center;
  min-height: 44px !important;
}

html body .overlay-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 900px) {
  html body.cart-view:not(.admin-view):not(.merchant-view) .cart-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr) !important;
    align-items: start !important;
  }
}

@media (max-width: 899px) {
  html body.cart-view:not(.admin-view):not(.merchant-view) .cart-layout {
    grid-template-columns: 1fr !important;
  }
}

/* Login / register fields: icons inside the input, compact remember-me */
html body.auth-view .auth-form,
html body.auth-view .auth-card {
  display: grid !important;
  gap: 14px !important;
}

html body.auth-view .auth-field {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  color: var(--ls-ink);
  font-weight: 600;
  font-size: 0.92rem;
}

html body.auth-view .auth-input {
  display: block !important;
  position: relative !important;
  width: 100% !important;
}

html body.auth-view .auth-input input {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 48px !important;
  padding-block: 12px !important;
  padding-inline-start: 46px !important;
  padding-inline-end: 14px !important;
  box-sizing: border-box !important;
}

html body.auth-view .auth-input-password input {
  padding-inline-end: 48px !important;
}

html body.auth-view .auth-input .auth-ico,
html body.auth-view .auth-input .auth-lock {
  position: absolute !important;
  inset-inline-start: 12px !important;
  inset-inline-end: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  pointer-events: none !important;
  color: var(--ls-muted) !important;
}

html body.auth-view .auth-input .auth-ico svg,
html body.auth-view .auth-input .auth-lock svg {
  width: 20px !important;
  height: 20px !important;
}

html body.auth-view .auth-eye,
html body.auth-view button.auth-eye {
  position: absolute !important;
  inset-inline-end: 6px !important;
  inset-inline-start: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
  color: var(--ls-muted) !important;
  cursor: pointer !important;
}

html body.auth-view .auth-eye svg {
  width: 20px !important;
  height: 20px !important;
}

html body.auth-view .auth-options {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px 16px !important;
  width: 100% !important;
  margin: 0 !important;
}

html body.auth-view .auth-checks {
  display: grid !important;
  gap: 10px !important;
}

html body.auth-view .auth-remember,
html body.auth-view .auth-terms {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  color: var(--ls-muted) !important;
  cursor: pointer !important;
}

html body.auth-view .auth-options .auth-remember {
  flex: 1 1 auto;
}

html body.auth-view .auth-forgot {
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ls-burgundy) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

html body.auth-view .auth-form input[type="checkbox"],
html body.auth-view .auth-card input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 18px !important;
  border: 1px solid var(--ls-beige) !important;
  border-radius: 4px !important;
  background: #f6f1e8 !important;
  accent-color: var(--ls-burgundy) !important;
  box-shadow: none !important;
}

html body.auth-view .auth-submit {
  width: 100% !important;
  margin-top: 4px !important;
}

html body.auth-view .auth-switch {
  text-align: center;
  margin: 0;
}

html body .cart-drawer {
  display: none !important;
}

html body.auth-view:not(.admin-view):not(.merchant-view) .header-search-form,
html body.auth-view:not(.admin-view):not(.merchant-view) .header-fav,
html body.auth-view:not(.admin-view):not(.merchant-view) .header-login-icon,
html body.auth-view:not(.admin-view):not(.merchant-view) .header-bell,
html body.auth-view:not(.admin-view):not(.merchant-view) .libseh-header .header-tools > .bag-trigger,
html body.auth-view:not(.admin-view):not(.merchant-view) .libseh-header .bag-trigger {
  display: none !important;
}

html body.auth-view:not(.admin-view):not(.merchant-view) .header-search-toggle {
  display: inline-flex !important;
}

html body.auth-view:not(.admin-view):not(.merchant-view) .libseh-header {
  min-height: 56px !important;
  height: auto !important;
}

@media (max-width: 1023.98px) {
  html body.auth-view:not(.admin-view):not(.merchant-view) .libseh-header-inner {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    grid-template-areas: "menu brand tools" !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 56px !important;
  }

  html body.auth-view:not(.admin-view):not(.merchant-view) .mobile-menu-toggle { grid-area: menu !important; }
  html body.auth-view:not(.admin-view):not(.merchant-view) .libseh-mark {
    grid-area: brand !important;
    justify-self: center !important;
  }
  html body.auth-view:not(.admin-view):not(.merchant-view) .libseh-actions { grid-area: tools !important; }
}

html body.auth-view:not(.admin-view):not(.merchant-view) .libseh-header .header-tools > .header-search-toggle.round-icon:not(.bag-trigger),
html body.auth-view:not(.admin-view):not(.merchant-view) .libseh-header .header-tools > .language-switcher.header-language-switcher:not(.mobile-language-switcher) {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

html body.auth-view.login-view,
html body.auth-view.register-view {
  overflow-x: visible !important;
  min-height: auto !important;
}

html body.auth-view.login-view .libseh-footer,
html body.auth-view.register-view .libseh-footer,
html body.auth-view.login-view .customer-bottom-nav,
html body.auth-view.register-view .customer-bottom-nav {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body:is(.login-view, .register-view, .forgot-view) main,
html body:is(.login-view, .register-view, .forgot-view) .auth-page--login,
html body:is(.login-view, .register-view, .forgot-view) .auth-shell--login {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 16px !important;
  gap: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

html body.auth-view.login-view main,
html body.auth-view.register-view main {
  flex: 0 0 auto !important;
}

html body:is(.login-view, .register-view, .forgot-view) form.auth-card.auth-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 8px auto 32px !important;
  padding: 32px !important;
  background: #f6f1e8 !important;
  border: 1px solid #E8D8BE !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  overflow: visible !important;
  min-height: 0 !important;
  height: auto !important;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-brand-logo {
  display: block !important;
  width: auto !important;
  height: 48px !important;
  max-width: 168px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-heading {
  display: grid !important;
  gap: 6px !important;
  text-align: center !important;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-kicker {
  margin: 0 !important;
  color: #59633A !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-card h1 {
  margin: 0 !important;
  text-align: center !important;
  color: #66001f !important;
  font-size: 1.55rem !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-copy {
  margin: 0 !important;
  text-align: center !important;
  color: #59633A !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-hint {
  margin: 0 !important;
  color: #59633A !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-field > label,
html body:is(.login-view, .register-view, .forgot-view) .auth-remember,
html body:is(.login-view, .register-view, .forgot-view) .auth-terms {
  margin: 0 !important;
  color: #31352C !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  text-align: start !important;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-input input {
  min-height: 54px !important;
  height: 54px !important;
  border: 1px solid #E8D8BE !important;
  border-radius: 12px !important;
  background: #FBF7F0 !important;
  color: #31352C !important;
  font-size: 16px !important;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-input.is-invalid input,
html body:is(.login-view, .register-view, .forgot-view) .auth-input input[aria-invalid="true"] {
  border-color: #66001f !important;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-field-error {
  margin: 0 !important;
  min-height: 0 !important;
  color: #66001f !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-checks {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-terms.is-invalid {
  color: #66001f !important;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-network {
  display: none !important;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-retry,
html body:is(.login-view, .register-view, .forgot-view) .auth-submit {
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-switch {
  text-align: center !important;
  color: #59633A !important;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-switch a,
html body:is(.login-view, .register-view, .forgot-view) .auth-forgot {
  color: #66001f !important;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-terms {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

html body:is(.login-view, .register-view, .forgot-view) .auth-remember input[type="checkbox"],
html body:is(.login-view, .register-view, .forgot-view) .auth-terms input[type="checkbox"] {
  inline-size: 22px !important;
  block-size: 22px !important;
  min-inline-size: 22px;
  flex: 0 0 auto;
  margin: 0;
}

html body:not(.auth-view):not(.admin-view):not(.merchant-view) label.auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  cursor: pointer;
}

html body:not(.auth-view):not(.admin-view):not(.merchant-view) label.auth-remember input[type="checkbox"] {
  inline-size: 22px;
  block-size: 22px;
  flex: 0 0 auto;
  margin: 0;
}

@media (min-width: 1024px) {
  html body.auth-view:not(.admin-view):not(.merchant-view) .header-search-toggle {
    display: inline-flex !important;
  }
  html body.auth-view:not(.admin-view):not(.merchant-view) .header-search-form {
    display: none !important;
  }
}

@media (max-width: 640px) {
  html body:is(.login-view, .register-view, .forgot-view) form.auth-card.auth-form {
    max-width: 100% !important;
    padding: 28px 16px !important;
    margin-inline: 0 !important;
  }
  html body:is(.login-view, .register-view, .forgot-view) .auth-card h1 {
    font-size: 1.35rem !important;
  }
  html body:is(.login-view, .register-view, .forgot-view) .auth-submit {
    min-height: 52px !important;
  }
}



/* Forgot password */
html body.forgot-view form.auth-card.auth-form {
  max-width: 440px !important;
  border-radius: 24px !important;
  padding: 24px !important;
  gap: 20px !important;
  box-sizing: border-box !important;
}

html body.forgot-view .auth-heading {
  gap: 8px !important;
}

html body.forgot-view .auth-lock-badge {
  width: 56px;
  height: 56px;
  margin: 0 auto 4px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(120, 29, 58, 0.1);
  color: #66001f;
}

html body.forgot-view .auth-lock-badge svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

html body.forgot-view .auth-card h1 {
  font-size: clamp(1.5rem, 1.35rem + 0.7vw, 1.875rem) !important;
}

html body.forgot-view .auth-copy {
  font-size: 15px !important;
  line-height: 1.55 !important;
}

html body.forgot-view .auth-field {
  gap: 8px !important;
}

html body.forgot-view .auth-input input {
  min-height: 52px !important;
  border-radius: 14px !important;
  direction: ltr !important;
  text-align: start !important;
}

/* LTR phone field: keep icon on the physical left so it never covers digits in RTL pages */
html body.forgot-view .auth-input:not(.auth-input-password) input {
  padding-left: 46px !important;
  padding-right: 14px !important;
  padding-inline: unset !important;
}

html body.forgot-view .auth-input:not(.auth-input-password) .auth-ico--tel,
html body.forgot-view .auth-input:not(.auth-input-password) .auth-ico {
  left: 12px !important;
  right: auto !important;
  inset-inline: unset !important;
}

html body.forgot-view .auth-submit {
  min-height: 48px !important;
  width: 100% !important;
  background: #66001f !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
}

html body.forgot-view .auth-submit.is-loading,
html body.forgot-view .auth-submit:disabled {
  opacity: 0.72;
  cursor: wait;
}

html body.forgot-view .auth-switch {
  margin: 0 0 4px !important;
  text-align: center !important;
  padding-block-end: 4px !important;
}

html body.forgot-view .auth-back-login,
html body.forgot-view .auth-switch a {
  color: #66001f !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

html body.forgot-view .auth-back-login:hover,
html body.forgot-view .auth-switch a:hover {
  text-decoration: underline !important;
}

html body.forgot-view .auth-back-login:focus-visible {
  outline: 2px solid #66001f;
  outline-offset: 3px;
  border-radius: 4px;
}

html body.forgot-view .auth-flash {
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

html body.forgot-view .auth-flash.ok {
  background: rgba(89, 99, 58, 0.12);
  color: #59633A;
}

html body.forgot-view .auth-flash.danger {
  background: rgba(180, 35, 24, 0.1);
  color: #8a1f16;
}

html body.forgot-view .auth-field-error {
  margin: 0 !important;
  color: #B42318 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

@media (min-width: 768px) {
  html body.forgot-view form.auth-card.auth-form {
    padding: 32px !important;
    gap: 24px !important;
  }
}

@media (max-width: 899px) {
  html body.forgot-view .auth-page--forgot,
  html body.forgot-view .auth-shell--forgot {
    padding-inline: 16px !important;
    padding-block: 16px !important;
  }
  html body.forgot-view form.auth-card.auth-form {
    margin: 0 auto 24px !important;
    max-width: 440px !important;
  }
}
/* ---------- Delivery company (dl-*) ---------- */
.dl-page{display:grid;gap:16px}
.dl-panel{display:grid;gap:12px}
.dl-panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.dl-panel-head h1,.dl-panel-head h2{margin:0;font-size:1.05rem;color:#31352C}
.dl-conn{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.8rem;background:#E8D8BE;color:#31352C}
.dl-conn::before{content:"";width:8px;height:8px;border-radius:50%;background:#9a9a8a}
.dl-conn-ready::before{background:#59633A}
.dl-conn-simulated::before{background:#c79a3b}
.dl-conn-disabled::before,.dl-conn-not_configured::before{background:#66001f}
.dl-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:600;background:#efe7d8;color:#31352C;white-space:nowrap}
.dl-st-awaiting_pickup,.dl-st-sending{background:#E8D8BE;color:#5a4a2a}
.dl-st-picked_up,.dl-st-in_transit,.dl-st-out_for_delivery{background:#e6e9da;color:#59633A}
.dl-st-delivered{background:#59633A;color:#fff}
.dl-st-failed,.dl-st-delivery_failed,.dl-st-unknown{background:#f6e3e8;color:#66001f}
.dl-st-cancelled,.dl-st-returned,.dl-st-returning{background:#ece9e4;color:#6b6b60}
.dl-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.dl-summary>div{display:grid;gap:4px;padding:10px;border:1px solid #eadfcb;border-radius:12px;background:#FBF7F0}
.dl-summary small,.dl-facts small{color:#6f705f;font-size:.75rem}
.dl-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.dl-facts li{display:grid;gap:4px;padding:10px;border-radius:12px;background:#FBF7F0;border:1px solid #eadfcb}
.dl-facts-wide{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.dl-intro{display:grid;gap:12px}
.dl-hint{margin:0;color:#6f705f;font-size:.85rem}
.dl-note{margin:0;padding:10px 12px;border-radius:12px;background:#f3eee4;color:#31352C;font-size:.88rem}
.dl-note-warn{background:#fbf1dc;color:#6a4b12}
.dl-note-danger{background:#f6e3e8;color:#66001f}
.dl-ok{color:#59633A}
.dl-warn{color:#8a5a12}
.dl-empty{margin:0;padding:18px;text-align:center;color:#6f705f;background:#FBF7F0;border:1px dashed #e0d3bc;border-radius:12px}
.dl-missing{margin:0;padding-inline-start:18px;color:#66001f;font-size:.88rem}
.dl-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dl-actions form{margin:0}
.dl-form{display:grid;gap:10px}
.dl-form label{display:grid;gap:4px;font-size:.85rem;color:#31352C}
.dl-form input:not([type=checkbox]):not([type=radio]),.dl-form select,.dl-form textarea{width:100%;min-height:42px;padding:8px 12px;border:1px solid #dccfb8;border-radius:10px;background:#f6f1e8;color:#31352C;font:inherit}
.dl-form textarea{min-height:70px}
.dl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dl-grid fieldset{border:0;padding:0;margin:0}
.dl-wide{grid-column:1/-1}
.dl-cancel,.dl-box{border:1px solid #eadfcb;border-radius:12px;padding:10px 12px;background:#f6f1e8}
.dl-cancel summary,.dl-box summary{cursor:pointer;font-weight:600;color:#66001f}
.dl-cancel[open] summary,.dl-box[open] summary{margin-bottom:10px}
.dl-timeline{list-style:none;margin:0;padding:0;display:grid;gap:8px;border-inline-start:2px solid #E8D8BE;padding-inline-start:14px}
.dl-timeline li{position:relative;display:grid;gap:2px;font-size:.85rem}
.dl-timeline li::before{content:"";position:absolute;inset-inline-start:-20px;top:6px;width:10px;height:10px;border-radius:50%;background:#66001f;border:2px solid #FBF7F0}
.dl-actor{color:#6f705f;font-size:.78rem}
.dl-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.dl-tabs a{flex:0 0 auto;padding:7px 14px;border-radius:999px;border:1px solid #e0d3bc;background:#f6f1e8;color:#31352C;text-decoration:none;font-size:.85rem;white-space:nowrap}
.dl-tabs a.active,.dl-tabs a[aria-current]{background:#66001f;border-color:#66001f;color:#fff}
.dl-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.dl-kpi{display:grid;gap:4px;padding:12px;border-radius:14px;background:#f6f1e8;border:1px solid #eadfcb;color:#31352C;text-decoration:none}
.dl-kpi b{font-size:1.4rem}
.dl-kpi-failed b{color:#66001f}
.dl-kpi-delivered b{color:#59633A}
.dl-table{display:grid;border:1px solid #eadfcb;border-radius:14px;overflow:hidden;background:#f6f1e8}
.dl-tr{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;align-items:center;padding:10px 12px;border-top:1px solid #f0e7d7;color:#31352C;text-decoration:none;font-size:.86rem}
.dl-tr:first-child{border-top:0}
a.dl-tr:hover{background:#FBF7F0}
.dl-th{background:#f6efe2;font-weight:700;font-size:.78rem;color:#59633A}
.dl-list{display:grid;gap:8px}
.dl-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid #eadfcb;border-radius:12px;background:#f6f1e8;color:#31352C;text-decoration:none}
.dl-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.dl-filters label{display:grid;gap:4px;font-size:.8rem}
.dl-filters input,.dl-filters select{min-height:40px;padding:6px 10px;border:1px solid #dccfb8;border-radius:10px;background:#f6f1e8;font:inherit}
.dl-detail{display:grid;gap:14px}
.dl-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dl-two>div{padding:12px;border-radius:12px;background:#FBF7F0;border:1px solid #eadfcb}
.dl-admin-forms{display:grid;gap:10px}
.dl-log{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.82rem}
.dl-log pre{white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto;background:#FBF7F0;padding:8px;border-radius:8px;direction:ltr;text-align:left}
.dl-check{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dl-send{display:grid;gap:10px}
.dl-customer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 0;font-size:.85rem;color:#31352C}
.dl-partner-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid #f0e7d7}
.dl-partner-row p{margin:4px 0;font-size:.86rem}
.dl-partner-actions{display:grid;gap:8px;align-content:start;min-width:220px}
@media (max-width:760px){
  .dl-grid,.dl-two{grid-template-columns:1fr}
  .dl-table{border:0;background:transparent;gap:10px}
  .dl-th{display:none}
  .dl-tr{grid-template-columns:1fr 1fr;border:1px solid #eadfcb;border-radius:12px;background:#f6f1e8}
  .dl-tr:first-child{border-top:1px solid #eadfcb}
  .dl-tr>span{display:grid;gap:2px}
  .dl-tr>span[data-label]::before{content:attr(data-label);font-size:.72rem;color:#6f705f}
  .dl-filters>*{flex:1 1 140px}
  .dl-partner-actions{min-width:0;width:100%}
}.dl-facts a,.dl-summary a,.dl-detail a:not(.pill){color:#66001f}
@media (max-width:760px){
  .dl-facts,.dl-facts-wide,.dl-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dl-facts li,.dl-summary>div{padding:8px 10px;min-width:0;overflow-wrap:anywhere}
}@media (max-width:760px){.dl-summary>div:first-child{grid-column:1/-1}}.dl-ref{border-top:1px solid #E8D8BE;padding:10px 0}
.dl-ref summary{cursor:pointer}
.dl-ref-list{max-height:260px;overflow:auto;columns:2;column-gap:24px;font-size:.9rem;margin:10px 0;padding-inline-start:18px}
.dl-ref-list code{color:#59633A}
@media (max-width:760px){.dl-ref-list{columns:1}}
/* Delivery company & driver dashboards */
.cr-page{padding-bottom:32px;overflow-wrap:anywhere}
.cr-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:16px;background:#66001f;color:#fff}
.cr-brand{display:flex;align-items:center;gap:10px;min-width:0}
.cr-brand img{width:40px;height:40px;border-radius:10px;object-fit:cover;background:#f6f1e8}
.cr-brand div{display:grid;min-width:0}
.cr-brand b{font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-brand small{color:#E8D8BE;font-size:.78rem}
.cr-top .pill.ghost{color:#fff;border-color:rgba(255,255,255,.5);background:transparent}
.cr-nav{position:sticky;top:0;z-index:5;background:#FBF7F0;padding:6px 0}
.cr-blocked{max-width:520px;margin:24px auto;text-align:center}
.cr-crumbs{margin:0;font-size:.85rem;color:#6f705f}
.cr-crumbs a{color:#66001f;text-decoration:none}
.cr-section-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.cr-section-head h1,.cr-section-head h2{margin:0;font-size:1.1rem;color:#31352C}
.cr-kpi-new b,.cr-kpi-ready b{color:#66001f}
.cr-kpi-in_delivery b{color:#59633A}
.cr-kpi-returned b{color:#6b6b60}
.cr-platform-card{display:flex;align-items:center;gap:14px;text-decoration:none;color:#31352C;border:1px solid #E8D8BE;background:linear-gradient(135deg,#fff 0%,#FBF7F0 100%)}
.cr-platform-card:hover{border-color:#66001f}
.cr-platform-card>div{flex:1;display:grid;gap:4px}
.cr-platform-card b{font-size:1.15rem;color:#66001f}
.cr-go{font-size:1.6rem;color:#66001f;line-height:1}
.cr-notes{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.86rem}
.cr-notes li{padding:8px 10px;border-radius:10px;background:#FBF7F0;border:1px solid #f0e7d7}
.cr-notes a{color:#31352C;text-decoration:none}
.cr-store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.cr-store-card{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center;color:#31352C;text-decoration:none;border:1px solid #eadfcb}
.cr-store-card:hover{border-color:#66001f}
.cr-logo{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:12px;overflow:hidden;background:#E8D8BE;color:#66001f;font-weight:700;font-size:1.2rem;flex:0 0 auto}
.cr-logo img{width:100%;height:100%;object-fit:cover}
.cr-logo-lg{width:64px;height:64px;font-size:1.6rem}
.cr-store-name{display:grid;min-width:0}
.cr-store-name small{color:#6f705f;font-size:.78rem}
.cr-counts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;font-size:.78rem}
.cr-counts>span{padding:3px 9px;border-radius:999px;background:#f6efe2;color:#59633A}
.cr-counts .cr-hot{background:#66001f;color:#fff}
.cr-store-head{display:flex;gap:14px;align-items:flex-start}
.cr-store-head>div{flex:1;min-width:0;display:grid;gap:8px}
.cr-store-head h1{margin:0;font-size:1.25rem;color:#31352C}
.cr-branches{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.cr-branch{display:grid;gap:4px;padding:12px;border-radius:12px;border:1px solid #eadfcb;background:#FBF7F0}
.cr-branch p{margin:0;font-size:.86rem}
.cr-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.cr-links .pill{min-height:36px;padding:6px 12px;font-size:.82rem}
.cr-bulk{display:flex;flex-wrap:wrap;gap:8px;align-items:end;padding:10px;border-radius:12px;background:#f6efe2;margin-bottom:10px}
.cr-bulk label{display:grid;gap:4px;font-size:.8rem;flex:1 1 160px}
.cr-bulk select,.cr-bulk input{min-height:40px;padding:6px 10px;border:1px solid #dccfb8;border-radius:10px;background:#f6f1e8;font:inherit}
.cr-list{display:grid;gap:8px}
.cr-group{margin:10px 0 2px;font-size:.92rem;color:#59633A;border-bottom:1px solid #E8D8BE;padding-bottom:4px}
.cr-card{display:flex;align-items:stretch;gap:8px;padding:10px 12px;border:1px solid #eadfcb;border-radius:14px;background:#f6f1e8}
.cr-card:hover{border-color:#d9c6a5}
.cr-pick{display:flex;align-items:center;padding-inline-end:4px}
.cr-pick input{width:20px;height:20px;accent-color:#66001f}
.cr-card-body{flex:1;display:grid;gap:4px;min-width:0;color:#31352C;text-decoration:none}
.cr-card-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cr-card-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.8rem;color:#6f705f}
.cr-card-meta b{color:#31352C}
.cr-task .cr-links{align-self:center;margin:0}
.cr-later{opacity:.72}
.cr-member-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cr-member-actions form{display:flex;gap:6px;align-items:center}
.cr-member-actions input{min-height:36px;padding:4px 8px;border:1px solid #dccfb8;border-radius:10px;font:inherit;width:140px}
.cr-inline{display:flex;gap:6px;align-items:center}
.cr-ss-recorded{background:#E8D8BE;color:#5a4a2a}
.cr-ss-confirmed{background:#59633A;color:#fff}
.cr-ss-rejected{background:#f6e3e8;color:#66001f}
.cr-remit-list{display:grid;gap:6px;max-height:320px;overflow:auto;padding:8px;border:1px solid #eadfcb;border-radius:12px;background:#FBF7F0}
.cr-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;max-height:340px;overflow:auto;padding:8px;border:1px solid #eadfcb;border-radius:12px;background:#FBF7F0}
.cr-pickup-group{display:grid;gap:8px;padding:12px;border:1px solid #eadfcb;border-radius:14px;background:#f6f1e8}
.cr-pickup-group h3{margin:0;font-size:1rem;color:#66001f}
.cr-pickup-form{display:grid;gap:8px}
.cr-check{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px;border-radius:10px;background:#FBF7F0;font-size:.88rem}
.cr-check input{width:20px;height:20px;accent-color:#59633A}
.cr-check a{color:#66001f;margin-inline-start:auto}
.cr-page .pill.cr-big{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;font-size:1rem}
.cr-driver-actions{display:grid;gap:10px}
.cr-deliver-form{padding:12px;border:1px solid #eadfcb;border-radius:14px;background:#f6f1e8}
.cr-due{margin:0;padding:12px;border-radius:12px;background:#66001f;color:#fff;font-size:1.05rem;text-align:center}
.cr-due b{font-size:1.3rem}
.cr-otp input{font-size:1.4rem;letter-spacing:.3em;text-align:center;direction:ltr}
.cr-sign{display:grid;gap:6px}
.cr-sign canvas{width:100%;max-width:420px;height:160px;border:1px dashed #b8a98d;border-radius:12px;background:#f6f1e8;touch-action:none}
.cr-tr-perf{grid-template-columns:2fr repeat(7,minmax(70px,1fr))}
.cr-driver .dl-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){
  .cr-top{border-radius:0 0 16px 16px;margin-inline:-12px}
  .cr-store-grid,.cr-branches{grid-template-columns:1fr}
  .cr-store-head{flex-direction:column}
  .cr-card{flex-wrap:wrap}
  .cr-task .cr-links{width:100%}
  .cr-task .cr-links .pill{flex:1;justify-content:center;min-height:44px}
  .cr-member-actions{width:100%}
  .cr-member-actions input{flex:1;width:auto}
  .cr-bulk>*{flex:1 1 100%}
  .cr-tr-perf{grid-template-columns:1fr 1fr}
  .cr-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-driver .dl-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media print{
  .cr-top,.cr-nav,.cr-bulk,.cr-links,.cr-pick{display:none!important}
  .cr-card,.cr-pickup-group{break-inside:avoid;border-color:#999}
}