/* ==========================================================================
   KVK ERP9+ SAFFRON INDIA THEME SYSTEM (Option 3 EXACT)
   Reference Mockup: theme3_saffron_indian.jpg
   Header: Saffron-Crimson gradient (#FF6B00 -> #c62828) with white logo & text
   Background: Soft Warm Cream #FFF8E7 (desktop & mobile)
   Cards & Tables: Crisp pure white #FFFFFF with soft warm saffron border #fed7aa
   Text: Deep Espresso #1a0a00 (100% crisp contrast, zero wash-out)
   Buttons: Vibrant Saffron Orange gradient with bold white text
   ========================================================================== */

:root {
  --green: #FF6B00 !important;
  --green2: #c62828 !important;
  --primary: #FF6B00 !important;
  --primary2: #c62828 !important;
  --bg: #FFF8E7 !important;
  --card: #FFFFFF !important;
  --card-pure: #ffffff !important;
  --line: #fed7aa !important;
  --text: #1a0a00 !important;
  --muted: #6c3e12 !important;
  --dark: #1a0a00 !important;
}

html {
  background-color: #FFF8E7 !important;
  color: #1a0a00 !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

body {
  background-color: #FFF8E7 !important;
  color: #1a0a00 !important;
  font-family: 'Segoe UI', Inter, -apple-system, Roboto, sans-serif !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ==========================================================================
   DESKTOP WEB PANELS (super-admin.html & owner.html)
   Full desktop width, clean responsive layout, never squeezed into a phone frame
   ========================================================================== */
body[data-role="superadmin"],
body[data-role="owner"] {
  background: #FFF8E7 !important;
  color: #1a0a00 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-role="superadmin"] .wrap,
body[data-role="superadmin"] .topin,
body[data-role="superadmin"] .container,
body[data-role="superadmin"] #panelRoot,
body[data-role="owner"] .wrap,
body[data-role="owner"] .topin,
body[data-role="owner"] .container,
body[data-role="owner"] #panelRoot {
  max-width: 1360px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* ==========================================================================
   6 MOBILE APPS CONTAINER LOCK (Centered phone screen on PC Browser)
   customer.html, delivery.html, owner-app.html, store-manage.html,
   kitchen-app.html, super-admin-app.html
   ========================================================================== */
@media (min-width: 501px) {
  body[data-role="customer"],
  body[data-role="delivery"],
  body[data-role="ownerapp"],
  body[data-role="storemanage"],
  body[data-role="kitchenapp"],
  body[data-role="superadminapp"] {
    background: #ece4d2 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-role="customer"] #app,
  body[data-role="customer"] .mobile-shell,
  body[data-role="delivery"] #app,
  body[data-role="delivery"] .mobile-shell,
  body[data-role="ownerapp"] #app,
  body[data-role="ownerapp"] .mobile-shell,
  body[data-role="ownerapp"] .owner-app-shell,
  body[data-role="storemanage"] #loginOverlay,
  body[data-role="storemanage"] .container,
  body[data-role="storemanage"] #loginWrapper,
  body[data-role="storemanage"] #appContent,
  body[data-role="kitchenapp"] #app,
  body[data-role="kitchenapp"] .mobile-shell,
  body[data-role="kitchenapp"] #kitchenLoginWrapper,
  body[data-role="kitchenapp"] #kitchenAppDashboard,
  body[data-role="superadminapp"] .app,
  body[data-role="superadminapp"] #loginRoot,
  body[data-role="superadminapp"] #appRoot {
    max-width: 480px !important;
    width: 100% !important;
    margin: 0 auto !important;
    min-height: 100vh !important;
    background: #FFF8E7 !important;
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.16) !important;
    border-left: 1px solid #fed7aa !important;
    border-right: 1px solid #fed7aa !important;
    position: relative !important;
  }

  /* Headers must NEVER have min-height 100vh */
  body[data-role="storemanage"] .topbar,
  body[data-role="kitchenapp"] header.kds-header {
    max-width: 480px !important;
    width: 100% !important;
    margin: 0 auto !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* Fixed mobile bottom navigation centered on PC desktop */
  body[data-role="customer"] .bottom-bar,
  body[data-role="delivery"] .bottom-bar,
  body[data-role="ownerapp"] .bottom-bar,
  body[data-role="storemanage"] .bottom-bar {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 480px !important;
    width: 100% !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    border-top: 1px solid #fed7aa !important;
    box-shadow: 0 -4px 16px rgba(255, 107, 0, 0.08) !important;
  }
}

@media (max-width: 500px) {
  body[data-role="customer"] #app,
  body[data-role="customer"] .mobile-shell,
  body[data-role="delivery"] #app,
  body[data-role="delivery"] .mobile-shell,
  body[data-role="ownerapp"] #app,
  body[data-role="ownerapp"] .mobile-shell,
  body[data-role="ownerapp"] .owner-app-shell,
  body[data-role="storemanage"] .topbar,
  body[data-role="storemanage"] .container,
  body[data-role="kitchenapp"] header.kds-header,
  body[data-role="kitchenapp"] #app,
  body[data-role="superadminapp"] .app,
  body[data-role="superadminapp"] #appRoot {
    max-width: 100% !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
  }

  body[data-role="customer"] .bottom-bar,
  body[data-role="delivery"] .bottom-bar,
  body[data-role="ownerapp"] .bottom-bar,
  body[data-role="storemanage"] .bottom-bar {
    left: 0 !important;
    transform: none !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   HEADER & TOPBAR (Option 3 Saffron Red Festive Gradient)
   ========================================================================== */
.top,
.topbar,
.mobile-header,
.head,
header.kds-header {
  background: linear-gradient(135deg, #FF6B00 0%, #d83a17 50%, #c62828 100%) !important;
  color: #ffffff !important;
  border-bottom: none !important;
  box-shadow: 0 4px 18px rgba(198, 40, 40, 0.22) !important;
  min-height: auto !important;
  height: auto !important;
}

.top b, .top span,
.topbar .brand h1,
.topbar .brand p,
.topbar .brand-title,
.topbar .brand-meta,
.topin .brand b,
.topin .brand span,
.mobile-header .brand h1,
.mobile-header .brand p,
.head b,
.head span,
.admin-panel-title-v3912,
.admin-panel-title-v3913,
.admin-panel-title-v3913 .green {
  color: #ffffff !important;
}

.logo,
.app-logo,
.brand-logo,
.brand-icon {
  background: #ffffff !important;
  color: #FF6B00 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  font-weight: 950 !important;
}

/* ==========================================================================
   CARDS & CONTAINERS (Pure Crisp White with Soft Warm Saffron Borders)
   ========================================================================== */
.card,
.auth-card,
.loginbox,
.order-card,
.product-card,
.item-card,
.stat,
.detailBox,
.calcBox,
.receipt,
.request-section,
.admin-request-result-v3980 {
  background: #ffffff !important;
  border: 1px solid #fed7aa !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.05) !important;
  color: #1a0a00 !important;
}

.stat {
  border-left: 6px solid #FF6B00 !important;
}

.stat b {
  color: #1a0a00 !important;
}

.stat span, .stat .mini {
  color: #6c3e12 !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   TABLES & TABLE ROWS (CRITICAL: 100% Crisp, Pure White & High Contrast)
   ========================================================================== */
.table-wrap {
  overflow-x: auto !important;
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.05) !important;
  margin: 12px 0 !important;
}

table,
.table {
  width: 100% !important;
  background: #ffffff !important;
  border-collapse: collapse !important;
  color: #1a0a00 !important;
}

table th,
.table th {
  background: #fff3e0 !important;
  color: #7c2d12 !important;
  font-weight: 950 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 2px solid #fed7aa !important;
  border-top: none !important;
  padding: 12px 14px !important;
  text-align: left !important;
  vertical-align: middle !important;
}

table td,
.table td {
  background: #ffffff !important;
  color: #1a0a00 !important;
  border-bottom: 1px solid #fce8d5 !important;
  border-top: none !important;
  padding: 12px 14px !important;
  vertical-align: top !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

table tr:last-child td,
.table tr:last-child td {
  border-bottom: none !important;
}

table tr:hover td,
.table tr:hover td {
  background: #fff9f0 !important;
}

/* Table Labels, Pills, Badges & Micro-elements */
.pill,
span.pill {
  background: #ffedd5 !important;
  color: #9a3412 !important;
  border: 1px solid #fed7aa !important;
  font-weight: 900 !important;
  border-radius: 8px !important;
  padding: 2px 8px !important;
  display: inline-block !important;
  margin: 2px 0 !important;
  font-family: Consolas, monospace !important;
  font-size: 12px !important;
}

.folder,
span.folder {
  background: #fef3c7 !important;
  color: #78350f !important;
  border: 1px solid #fde68a !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  display: inline-block !important;
  font-family: Consolas, monospace !important;
  font-size: 11px !important;
  margin-top: 3px !important;
}

.mini {
  font-size: 12px !important;
  color: #6c3e12 !important;
  font-weight: 700 !important;
}

.mini b {
  color: #1a0a00 !important;
}

.muted {
  color: #6c3e12 !important;
  font-weight: 600 !important;
}

/* Status Badges */
.badge {
  display: inline-block !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 950 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}

.badge.active, .badge.approved {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
}

.badge.expired, .badge.deleted, .badge.rejected {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fca5a5 !important;
}

.badge.near {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fcd34d !important;
}

.badge.inactive, .badge.stopped {
  background: #ffedd5 !important;
  color: #9a3412 !important;
  border: 1px solid #fdba74 !important;
}

.badge.pending, .badge.trial, .badge.grace {
  background: #e0e7ff !important;
  color: #3730a3 !important;
  border: 1px solid #c7d2fe !important;
}

/* Action group stack in super-admin & owner */
.request-action-stack-v3984 {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.request-action-label-v3984,
.dashboard-action-label-v3987 {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #9a3412 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 3px !important;
}

/* ==========================================================================
   BUTTONS (Saffron India Option 3 Orange, Theme Secondary, and Accents)
   All action, secondary, new code, cancel/clear buttons get rich theme button color
   ========================================================================== */
html body .btn:not(.red):not(.danger):not(#tabLoginSms):not(#tabLoginTotp),
html body[data-role] .btn:not(.red):not(.danger):not(#tabLoginSms):not(#tabLoginTotp),
html body[data-role] button.btn:not(.red):not(.danger):not(#tabLoginSms):not(#tabLoginTotp),
html body[data-role] .btn.secondary:not(#tabLoginSms):not(#tabLoginTotp),
html body[data-role] .actions .btn:not(.red):not(.danger),
html body[data-role] .actions button:not(.red):not(.danger),
html body[data-role] form button:not(.red):not(.danger):not(.close),
.btn:not(.red):not(.danger):not(#tabLoginSms):not(#tabLoginTotp),
button.btn:not(.red):not(.danger):not(#tabLoginSms):not(#tabLoginTotp),
.btn.secondary:not(#tabLoginSms):not(#tabLoginTotp),
.btn.ghost,
.btn.orange,
.btn.blue,
.btn.purple,
.btn.pink,
button.btn-primary,
button.purple,
button.blue,
button.orange,
button[type="submit"]:not(.red):not(.danger),
button[type="reset"]:not(.red):not(.danger),
.cart-floating {
  background: linear-gradient(135deg, #FF6B00 0%, #e65100 50%, #c62828 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 850 !important;
  box-shadow: 0 3px 10px rgba(255, 107, 0, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

html body[data-role] .btn:not(.red):not(.danger):not(#tabLoginSms):not(#tabLoginTotp):hover,
html body[data-role] .btn.secondary:not(#tabLoginSms):not(#tabLoginTotp):hover,
.btn:not(.red):not(.danger):not(#tabLoginSms):not(#tabLoginTotp):hover,
.btn.secondary:not(#tabLoginSms):not(#tabLoginTotp):hover,
button.btn-primary:hover,
button.purple:hover,
button.blue:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(255, 107, 0, 0.35) !important;
}

.btn.red,
.btn.danger,
button.btn.red,
button.btn.danger,
.btn.reject {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 850 !important;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.25) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  cursor: pointer !important;
}

.btn.red:hover,
.btn.danger:hover,
.btn.reject:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(220, 38, 38, 0.35) !important;
}

.btn.green,
button.btn.green {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 850 !important;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.25) !important;
}

.btn.excel-v3991 {
  background: linear-gradient(135deg, #107c41 0%, #0b5a2e 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 850 !important;
}

.btn.small {
  padding: 6px 10px !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  border-radius: 8px !important;
}

/* Subtabs special styling */
.coupon-subtabs-v39111 .btn.secondary {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Auth Tabs special styling (TOTP vs SMS OTP) */
#tabLoginTotp,
#tabLoginSms {
  font-family: inherit !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#tabLoginTotp.active,
#tabLoginTotp:not(.secondary),
#tabLoginSms.active,
#tabLoginSms:not(.secondary) {
  background: linear-gradient(135deg, #FF6B00 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #c2410c !important;
  box-shadow: 0 3px 10px rgba(255, 107, 0, 0.35) !important;
  text-shadow: none !important;
}

#tabLoginTotp.secondary,
#tabLoginSms.secondary {
  background: #FFF8E7 !important;
  color: #7c2d12 !important;
  border: 1.5px solid #fed7aa !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

#tabLoginTotp.secondary:hover,
#tabLoginSms.secondary:hover {
  background: #ffedd5 !important;
  border-color: #FF6B00 !important;
  color: #c2410c !important;
}

/* ==========================================================================
   TABS & NAVIGATION PILLS
   ========================================================================== */
.tabs {
  gap: 8px !important;
}

.tab,
.nav-pills .pill {
  background: #ffffff !important;
  color: #1a0a00 !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 12px !important;
  font-weight: 850 !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.tab:hover,
.nav-pills .pill:hover {
  background: #fff8ee !important;
  border-color: #f97316 !important;
}

.tab.active,
.nav-pills .pill.active {
  background: linear-gradient(135deg, #FF6B00 0%, #c62828 100%) !important;
  color: #ffffff !important;
  border-color: #c62828 !important;
  box-shadow: 0 3px 10px rgba(255, 107, 0, 0.25) !important;
}

/* ==========================================================================
   FORM INPUTS, SELECTS, TEXTAREAS
   ========================================================================== */
input, select, textarea {
  background: #ffffff !important;
  color: #1a0a00 !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #FF6B00 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.18) !important;
}

label {
  color: #1a0a00 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

/* Login Page Background & Watermark Suppression on Login / Unauthenticated Screen */
.login-page,
.login-cover {
  background: linear-gradient(135deg, #FFF8E7 0%, #ffedd5 50%, #fed7aa 100%) !important;
}

html.is-logged-out body,
html[data-kvk-logged-out-v39271="yes"] body,
html[data-auth-state="logged-out"] body,
body.is-logged-out,
body.kvk-login-active {
  background-image: none !important;
  background: linear-gradient(135deg, #FFF8E7 0%, #ffedd5 50%, #fed7aa 100%) !important;
  background-color: #FFF8E7 !important;
}

/* Notice / Alerts */
.notice {
  border: 1px solid #fed7aa !important;
  border-left: 5px solid #FF6B00 !important;
  background: #fff8ee !important;
  color: #1a0a00 !important;
  border-radius: 12px !important;
  padding: 12px !important;
}

.notice.warn {
  border-color: #fde68a !important;
  border-left-color: #d97706 !important;
  background: #fffbeb !important;
  color: #78350f !important;
}

.notice.danger {
  border-color: #fecaca !important;
  border-left-color: #dc2626 !important;
  background: #fff1f2 !important;
  color: #991b1b !important;
}

/* ==========================================================================
   CORNER SERVER STATUS INDICATOR (Compact Circle + ONLINE / OFFLINE)
   ========================================================================== */
.kvk-server-status-pill {
  position: fixed !important;
  top: 10px !important;
  right: 14px !important;
  z-index: 99999 !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 3px 8px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid #fed7aa !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  user-select: none !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.kvk-server-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  background-color: #16a34a !important;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25) !important;
  transition: all 0.3s ease !important;
}

.kvk-server-label,
.top .kvk-server-status-pill .kvk-server-label,
.admin-header-actions-v3913 .kvk-server-status-pill .kvk-server-label {
  font-size: 8.5px !important;
  font-weight: 900 !important;
  color: #15803d !important;
  letter-spacing: 0.4px !important;
  display: block !important;
  text-align: center !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

.kvk-server-status-pill.is-offline .kvk-server-dot {
  background-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.25) !important;
}
.kvk-server-status-pill.is-offline .kvk-server-label,
.top .kvk-server-status-pill.is-offline .kvk-server-label,
.admin-header-actions-v3913 .kvk-server-status-pill.is-offline .kvk-server-label {
  color: #b91c1c !important;
}

.kvk-server-status-pill.is-checking .kvk-server-dot {
  background-color: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25) !important;
}
.kvk-server-status-pill.is-checking .kvk-server-label,
.top .kvk-server-status-pill.is-checking .kvk-server-label,
.admin-header-actions-v3913 .kvk-server-status-pill.is-checking .kvk-server-label {
  color: #b45309 !important;
}

/* Corner Server Status Pill position on mobile shell on PC */
@media (min-width: 501px) {
  body[data-role="customer"] .kvk-server-status-pill,
  body[data-role="delivery"] .kvk-server-status-pill,
  body[data-role="ownerapp"] .kvk-server-status-pill,
  body[data-role="storemanage"] .kvk-server-status-pill,
  body[data-role="kitchenapp"] .kvk-server-status-pill,
  body[data-role="superadminapp"] .kvk-server-status-pill {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
  }
}

/* Super Admin Header Status Pill & Brand Logo (No Overlap with Logout) */
body[data-role="superadmin"] .admin-header-actions-v3913 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 3px !important;
  margin-left: auto !important;
  padding: 0 !important;
}

.kvk-server-status-pill.in-header,
.admin-header-actions-v3913 .kvk-server-status-pill {
  position: static !important;
  margin: 0 !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 3px 10px !important;
  min-height: 24px !important;
  min-width: 54px !important;
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 5px rgba(255, 107, 0, 0.15) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  user-select: none !important;
}

.admin-header-actions-v3913 .kvk-server-status-pill .kvk-server-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  display: block !important;
  margin: 0 auto !important;
}

body[data-role="superadmin"] .admin-header-actions-v3913 .btn,
body[data-role="superadmin"] .admin-header-actions-v3913 button,
body[data-role="superadmin"] .admin-header-actions-v3913 .admin-logout-btn-v3913 {
  margin-top: 2px !important;
  padding: 5px 14px !important;
  min-height: 30px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}

body[data-role="superadmin"] .kvk-server-status-pill:not(.in-header) {
  position: fixed !important;
  top: 14px !important;
  right: 120px !important;
  z-index: 99999 !important;
}

body[data-role="superadmin"] .admin-original-logo-box-v3913 {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body[data-role="superadmin"] .admin-original-logo-img-v3913 {
  height: 68px !important;
  max-height: 72px !important;
  width: auto !important;
  max-width: 360px !important;
  object-fit: contain !important;
  border-radius: 14px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  display: block !important;
}

/* ==========================================================================
   MODULE & DIALOG POPUPS (White, Clean, Warm Borders)
   ========================================================================== */
.kvk-dialog-v39151,
.admin-request-popup-v3981,
.modal-dialog,
.approval-verify-dialog-v39110,
.admin-doc-popup-v3983 {
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(255, 107, 0, 0.16) !important;
  color: #1a0a00 !important;
}

.kvk-dialog-head-v39151,
.admin-request-popup-head-v3981,
.modal-header,
.modal-head,
html body .modal-head,
html body[data-role] .modal-head,
.approval-verify-head-v39110,
.admin-doc-popup-head-v3983 {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 14px !important;
  min-height: unset !important;
  height: auto !important;
  background: linear-gradient(135deg, #FFF8E7 0%, #ffedd5 100%) !important;
  border-bottom: 1px solid #fed7aa !important;
  color: #1a0a00 !important;
}

.kvk-dialog-head-v39151 h2,
.admin-request-popup-head-v3981 h2,
.modal-title,
.modal-head h2,
html body .modal-head h2,
html body[data-role] .modal-head h2,
.approval-verify-head-v39110 h2,
.admin-doc-popup-head-v3983 h2 {
  color: #7c2d12 !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.modal-head .close,
.modal-header .close,
html body .modal-head .close,
html body[data-role] .modal-head .close {
  width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #ffedd5 !important;
  color: #7c2d12 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
}

/* ==========================================================================
   STORE REQUEST SWITCHER & CARDS
   ========================================================================== */
.admin-request-card-v3980 {
  background: #ffffff !important;
  border: 2px solid #fed7aa !important;
  color: #1a0a00 !important;
  border-radius: 16px !important;
}

.admin-request-card-v3980 b {
  color: #1a0a00 !important;
}

.admin-request-card-v3980 small {
  color: #6c3e12 !important;
}

.admin-request-card-v3980.pending {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
}

.admin-request-card-v3980.approved {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
}

.admin-request-card-v3980.rejected {
  background: #fff1f2 !important;
  border-color: #fda4af !important;
}

/* ==========================================================================
   KITCHEN DISPLAY (KDS) RESTAURANT APP
   ========================================================================== */
body[data-role="kitchenapp"],
body[data-role="kitchenapp"].theme-light {
  --bg: #FFF8E7 !important;
  --bg-card: #ffffff !important;
  --card-border: #fed7aa !important;
  --text: #1a0a00 !important;
  --text-muted: #6c3e12 !important;
}

body[data-role="kitchenapp"] .kot-card,
body[data-role="kitchenapp"] .metrics-strip,
body[data-role="kitchenapp"] .clock-badge,
body[data-role="kitchenapp"] .modal-kot-meta {
  background: #ffffff !important;
  color: #1a0a00 !important;
  border: 1px solid #fed7aa !important;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.05) !important;
}

/* ==========================================================================
   STORE MANAGE STATS & LABELS
   ========================================================================== */
.stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 12px !important;
  margin: 14px 0 !important;
}

.stat-note,
.subtle {
  color: #6c3e12 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.store-detail-pill {
  background: #ffedd5 !important;
  color: #9a3412 !important;
  border: 1px solid #fed7aa !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
}

/* ==========================================================================
   ALL APPS & STORE WEB PANEL (owner.html) - COMPLETE SAFFRON INDIA THEME
   Guarantees exact Super Admin match:
   - Saffron Crimson Gradient Topbar with Crisp White Typography & Badges
   - Warm Soft Cream Background (#FFF8E7)
   - Crisp Pure White Cards (#FFFFFF) with Warm Borders (#fed7aa)
   - Saffron Gradient Active Tabs & Buttons (#FF6B00 -> #EA580C)
   - High specificity (html body[data-role], html body[data-role="owner"], etc.)
   ========================================================================== */

/* Universal Page Background */
html,
body,
html body[data-role],
body[data-role="owner"],
body[data-role="ownerapp"],
body[data-role="storemanage"],
body[data-role="customer"],
body[data-role="delivery"],
body[data-role="kitchenapp"],
body[data-role="superadminapp"] {
  background-color: #FFF8E7 !important;
  color: #1a0a00 !important;
}

/* Universal Header & Topbar Gradient */
html body[data-role] :is(.topbar, .top, .mobile-header, .head, header.kds-header, .topbar-inner, .store-web-header-v3956) {
  background: linear-gradient(135deg, #FF6B00 0%, #d83a17 50%, #c62828 100%) !important;
  color: #ffffff !important;
  border-bottom: none !important;
  box-shadow: 0 4px 18px rgba(198, 40, 40, 0.22) !important;
}

/* Topbar Typography: All text inside header must be clean, crisp white except user badge and server pill */
html body[data-role] :is(.topbar, .topbar-inner, .store-web-header-v3956) :is(
  h1, h2, h3, p,
  span:not(.quick-user-badge-v39128):not(.kvk-server-label):not(.kvk-server-dot),
  strong, b,
  div:not(.logo):not(.brand-logo):not(.store-logo-preview):not(.kvk-server-status-pill):not(.btn):not(.quick-user-controls-v39128):not(.quick-user-host-v39128)
) {
  color: #ffffff !important;
}

/* Specific Store Web Title override (DMS STORE WEB PANEL) */
html body[data-role="owner"] .store-web-panel-title-v3956,
html body[data-role="owner"] .store-web-panel-title-v3956 .blue,
html body[data-role="owner"] .store-web-panel-title-v3956 .green,
html body[data-role="owner"] .store-web-panel-title-v3956 span {
  color: #ffffff !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
}

html body[data-role="owner"] .dms-subtitle-v39118 {
  color: rgba(255, 255, 255, 0.92) !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Header Store Identity / Details */
html body[data-role="owner"] .brand h1,
html body[data-role="owner"] .brand p,
html body[data-role="owner"] #topStoreTitle,
html body[data-role="owner"] #topStoreMeta,
html body[data-role="owner"] .store-header-meta {
  color: #ffffff !important;
}

html body[data-role="owner"] .store-detail-pill {
  background: rgba(255, 255, 255, 0.24) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(4px) !important;
}

/* Header Action Buttons in Store Web (Switch User & Logout) */
html body[data-role="owner"] .top-actions .btn.call,
html body[data-role="owner"] .top-actions .btn.orange,
html body[data-role="owner"] .quick-user-actions-v39243 .btn.orange {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

html body[data-role="owner"] .top-actions .btn.reject,
html body[data-role="owner"] .top-actions .btn.red,
html body[data-role="owner"] .quick-user-actions-v39243 .btn.red {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Server Status Pill in Header (White pill with green text) */
html body[data-role] .kvk-server-status-pill,
html body[data-role="owner"] .kvk-server-status-pill {
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

html body[data-role] .kvk-server-status-pill .kvk-server-label,
html body[data-role="owner"] .kvk-server-status-pill .kvk-server-label {
  color: #15803d !important;
  font-weight: 900 !important;
}

/* Header Logos in Store Web */
html body[data-role="owner"] .logo.store-logo-img,
html body[data-role="owner"] .app-logo.store-logo-img,
html body[data-role="owner"] .store-logo-preview,
html body[data-role="owner"] .kvk-store-header-logo-v3956 img {
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Tabs Navigation across all apps */
html body[data-role] :is(.tabs, .admin-menu-one-line-v3987, .order-stage-slider-v39118, .service-slider-v39118, .delivery-stage-slider-v39118) {
  background: transparent !important;
  gap: 8px !important;
}

html body[data-role] :is(.tab, .pill:not(.status-pill):not(.kvk-server-status-pill):not(.store-detail-pill)):not(.active) {
  background: #FFF8E7 !important;
  border: 1.5px solid #fed7aa !important;
  color: #7c2d12 !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  padding: 9px 14px !important;
  transition: all .15s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

html body[data-role] :is(.tab, .pill):not(.active):hover {
  background: #ffedd5 !important;
  border-color: #f97316 !important;
  color: #1a0a00 !important;
  transform: translateY(-1px) !important;
}

html body[data-role] :is(.tab.active, .pill.active, .tab[data-active="true"]) {
  background: linear-gradient(135deg, #FF6B00 0%, #EA580C 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 950 !important;
  border-radius: 12px !important;
  padding: 9px 14px !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35) !important;
}

/* Cards, Sections & Panels across all apps */
html body[data-role] :is(
  .card, .hero-card, .role-card, .order-card, .product-card,
  .dashboard-store-health-full-v39256,
  .dashboard-store-health-v39256, .order-type-box, .report-filter-card
) {
  background-color: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.05) !important;
  color: #1a0a00 !important;
}

/* Today Stat Cards in Dashboard */
html body[data-role] .dashboard-today-stats-v39256 {
  gap: 12px !important;
  margin: 14px 0 !important;
}

html body[data-role] :is(.dashboard-stat-card-v39256, button.dashboard-stat-card-v39256, .dashboard-summary-card-v39258, .dashboard-summary-strip-v39258 > .stat, .stat) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-top: 1.5px solid #fed7aa !important;
  border-right: 1.5px solid #fed7aa !important;
  border-bottom: 1.5px solid #fed7aa !important;
  border-left: 6px solid #FF6B00 !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.05) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

/* Only 5 Clickable Today Card Buttons & Action Cards Lift on Hover */
html body[data-role] :is(
  button.dashboard-stat-card-v39256,
  button.stat,
  [data-action="dashboard-today-card-v39256"],
  .stat[onclick],
  .card.stat[onclick],
  #dashboardStats .stat,
  #dashboardStats .card
):hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-left: 6px solid #FF6B00 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255, 107, 0, 0.12) !important;
  cursor: pointer !important;
}

/* Non-Clickable Cards: Locked completely, NEVER lift or move on hover */
html body[data-role] :is(
  .dashboard-revenue-mode-v39263,
  .dashboard-paid-display-only-v39258,
  .dashboard-paid-total-only-v39263,
  [data-display-only-v39263="true"],
  div.stat:not([onclick]):not([data-action]),
  div.dashboard-stat-card-v39256:not([onclick]):not([data-action]),
  div.dashboard-summary-card-v39258:not([onclick]):not([data-action]),
  .dashboard-store-health-v39256 .grid > div,
  .health-card:not(button):not([onclick]):not([data-action])
) {
  cursor: default !important;
  transform: none !important;
  transition: none !important;
}

html body[data-role] :is(
  .dashboard-revenue-mode-v39263,
  .dashboard-paid-display-only-v39258,
  .dashboard-paid-total-only-v39263,
  [data-display-only-v39263="true"],
  div.stat:not([onclick]):not([data-action]),
  div.dashboard-stat-card-v39256:not([onclick]):not([data-action]),
  div.dashboard-summary-card-v39258:not([onclick]):not([data-action]),
  .dashboard-store-health-v39256 .grid > div,
  .health-card:not(button):not([onclick]):not([data-action])
):hover {
  transform: none !important;
  cursor: default !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.05) !important;
}

html body[data-role] .dashboard-stat-card-v39256 :is(span, small, .stat-title) {
  color: #6c3e12 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

html body[data-role] .dashboard-stat-card-v39256 :is(strong, b, .stat-value) {
  color: #1a0a00 !important;
  font-weight: 950 !important;
  font-size: 26px !important;
}

html body[data-role] .dashboard-paid-split-v39256 em {
  background: #FFF8E7 !important;
  border: 1px solid #fed7aa !important;
  color: #1a0a00 !important;
  font-weight: 900 !important;
}

/* Store Health Section */
html body[data-role] .dashboard-store-health-v39256 h2,
html body[data-role] .dashboard-store-health-v39256 h3,
html body[data-role] .card h2,
html body[data-role] .card h3 {
  color: #1a0a00 !important;
  font-weight: 950 !important;
}

html body[data-role] :is(.health-card, .dashboard-store-health-v39256 .grid > div, .assign-boy-option) {
  background-color: #FFFDF7 !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  color: #1a0a00 !important;
}

html body[data-role] :is(.health-card, .dashboard-store-health-v39256 .grid > div) :is(small, span.subtle, .subtle) {
  color: #8c521c !important;
  font-weight: 700 !important;
}

/* Big Action Buttons (e.g. Close Graph & Diagram, Open Token Screen) */
html body[data-role] :is(.btn.orange, .btn[data-action*="token"], .btn[data-action*="graph"], .btn.primary):not(.secondary):not(.small) {
  background: linear-gradient(135deg, #FF6B00 0%, #EA580C 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  padding: 12px 18px !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.3) !important;
}

/* Form Controls & Inputs */
html body[data-role] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  background-color: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 12px !important;
  color: #1a0a00 !important;
  padding: 10px 12px !important;
}

html body[data-role] :is(input, select, textarea):focus {
  border-color: #FF6B00 !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15) !important;
  outline: none !important;
}

/* Tables across all apps */
html body[data-role] .table-wrap {
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 16px !important;
}

html body[data-role] table thead th {
  background: #FFF8E7 !important;
  color: #1a0a00 !important;
  font-weight: 900 !important;
  border-bottom: 1.5px solid #fed7aa !important;
}

html body[data-role] table td {
  background: #ffffff !important;
  color: #1a0a00 !important;
  border-bottom: 1px solid #fed7aa !important;
}

/* ==========================================================================
   PERMANENT NEUTRALIZATION OF IDLE / REFRESH VIEWPORT BLANKING
   ========================================================================== */
html,
html.kvk-booting-v39259,
html.kvk-booting-v39265,
html.kvk-booting-v39266,
body {
  background: #FFF8E7 !important;
  background-color: #FFF8E7 !important;
}

html.kvk-booting-v39259 body,
html.kvk-booting-v39265 body,
html.kvk-booting-v39266 body {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   QUICK USER BADGE & CONTROLS IN STORE WEB HEADER - ZERO OVERLAP
   ========================================================================== */
html body[data-role="owner"] .quick-user-controls-v39128,
html body[data-role="ownerapp"] .quick-user-controls-v39128,
.store-web-header-v3956 .quick-user-controls-v39128,
.quick-user-controls-v39128 {
  margin-right: 0 !important;
  margin-left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}

html body[data-role] .quick-user-status-row-v39306 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body[data-role] .quick-user-actions-v39243 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body[data-role] .store-web-header-spacer-v3956,
html body[data-role] .store-web-header-spacer-v3956.quick-user-host-v39128 {
  min-width: 250px !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

html body[data-role] .quick-user-badge-v39128,
html body[data-role] .quick-user-badge-v39128.owner,
html body[data-role] .quick-user-badge-v39128.staff {
  background: #ffffff !important;
  color: #1a0a00 !important;
  border: 1.5px solid #fed7aa !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.1) !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

/* ==========================================================================
   STORE WEB PINNED / STICKY HEADER & TABS (SCREENSHOT 1 PARITY)
   ========================================================================== */
html body[data-role="owner"] .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: linear-gradient(135deg, #FF6B00 0%, #d83a17 50%, #c62828 100%) !important;
  box-shadow: 0 4px 18px rgba(198, 40, 40, 0.22) !important;
}

html body[data-role="owner"] main.container {
  padding-top: 0 !important;
}

html body[data-role="owner"] main.container > .toolbar:first-child,
html body[data-role="owner"] .owner-main-tabs-v39115 {
  position: sticky !important;
  top: 86px !important;
  z-index: 999 !important;
  background: #FFF8E7 !important;
  padding: 6px 0 10px 0 !important;
  margin: 0 !important;
  border-bottom: 1.5px solid #fed7aa !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.08) !important;
  scroll-snap-type: none !important;
}

@media(max-width: 760px) {
  html body[data-role="owner"] main.container > .toolbar:first-child,
  html body[data-role="owner"] .owner-main-tabs-v39115 {
    top: 64px !important;
  }
}

/* ==========================================================================
   100% SUPER ADMIN & STORE WEB UNIFIED THEME: STAT CARDS
   ========================================================================== */
html body[data-role] .dashboard-stat-card-v39256,
html body[data-role] button.dashboard-stat-card-v39256,
html body[data-role] .dashboard-summary-card-v39258,
html body[data-role] .dashboard-summary-strip-v39258 > .stat,
html body[data-role] .dashboard-today-stats-v39256 > .stat,
.stat,
.card.stat,
#dashboardStats .stat,
#dashboardStats .card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-top: 1.5px solid #fed7aa !important;
  border-right: 1.5px solid #fed7aa !important;
  border-bottom: 1.5px solid #fed7aa !important;
  border-left: 6px solid #FF6B00 !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.05) !important;
  color: #1a0a00 !important;
}

html body[data-role] :is(
  button.dashboard-stat-card-v39256,
  button.stat,
  [data-action="dashboard-today-card-v39256"],
  .stat[onclick],
  .card.stat[onclick],
  #dashboardStats .stat,
  #dashboardStats .card
):hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-left: 6px solid #FF6B00 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255, 107, 0, 0.12) !important;
  cursor: pointer !important;
}

html body[data-role] .dashboard-stat-card-v39256 :is(span, small, .stat-title, .dashboard-card-heading-v39263),
html body[data-role] .dashboard-summary-card-v39258 :is(span, small, .stat-title, .dashboard-card-heading-v39263),
html body[data-role] .dashboard-summary-strip-v39258 > .stat :is(span, small, .stat-title, .dashboard-card-heading-v39263) {
  color: #6c3e12 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.2px !important;
}

html body[data-role] .dashboard-stat-card-v39256 :is(strong, b, .stat-value),
html body[data-role] .dashboard-summary-card-v39258 :is(strong, b, .stat-value),
html body[data-role] .dashboard-summary-strip-v39258 > .stat :is(strong, b, .stat-value) {
  color: #1a0a00 !important;
  font-weight: 950 !important;
  font-size: 24px !important;
}

/* Revenue Split Pills: Online / Cash */
html body[data-role] .dashboard-revenue-mode-grid-v39263 em,
html body[data-role] .dashboard-paid-split-v39256 em {
  background: #FFF8E7 !important;
  background-color: #FFF8E7 !important;
  border: 1px solid #fed7aa !important;
  border-radius: 8px !important;
  padding: 3px 6px !important;
}

html body[data-role] .dashboard-revenue-mode-grid-v39263 em > span,
html body[data-role] .dashboard-paid-split-v39256 em .dashboard-paid-label-v39259 {
  color: #8c521c !important;
  font-weight: 850 !important;
}

html body[data-role] .dashboard-revenue-mode-grid-v39263 em > strong,
html body[data-role] .dashboard-paid-split-v39256 em .dashboard-paid-amount-v39259 {
  color: #1a0a00 !important;
  font-weight: 950 !important;
}

/* Store Health Grid Items */
html body[data-role] :is(.dashboard-store-health-v39256 .grid > div, .health-card) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-left: 5px solid #FF6B00 !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 3px 12px rgba(255, 107, 0, 0.04) !important;
  color: #1a0a00 !important;
}

/* ==========================================================================
   DASHBOARD ACTION BUTTONS (SAFFRON FESTIVE GRADIENT)
   ========================================================================== */
html body[data-role] .dashboard-direct-actions-v39258 > [data-action="toggle-dashboard-graph-v39193"],
html body[data-role] .dashboard-direct-actions-v39258 > [data-action="packing-token-screen-v39181"],
html body[data-role] .dashboard-compact-actions-v39243 > [data-action="toggle-dashboard-graph-v39193"],
html body[data-role] .dashboard-compact-actions-v39243 > [data-action="packing-token-screen-v39181"],
html body[data-role] [data-action="toggle-fy-growth-v39205"],
html body[data-role] .fy-growth-toggle-v39205 {
  background: linear-gradient(135deg, #FF6B00 0%, #EA580C 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.3) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

html body[data-role] .dashboard-direct-actions-v39258 > [data-action="toggle-dashboard-graph-v39193"]:hover,
html body[data-role] .dashboard-direct-actions-v39258 > [data-action="packing-token-screen-v39181"]:hover,
html body[data-role] .dashboard-compact-actions-v39243 > [data-action="toggle-dashboard-graph-v39193"]:hover,
html body[data-role] .dashboard-compact-actions-v39243 > [data-action="packing-token-screen-v39181"]:hover,
html body[data-role] [data-action="toggle-fy-growth-v39205"]:hover,
html body[data-role] .fy-growth-toggle-v39205:hover {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.4) !important;
}

/* FY Growth Comparison - Deduplicate toggle buttons, always show only one button */
html body[data-role] .growth-head-v39203 [data-action*="toggle-fy-growth"] ~ [data-action*="toggle-fy-growth"],
html body[data-role] .growth-head-v39203 .fy-growth-toggle-v39205 ~ .fy-growth-toggle-v39205,
html body[data-role] .fy-growth-comparison-v39203 .card-title [data-action*="toggle-fy-growth"] ~ [data-action*="toggle-fy-growth"],
html body[data-role] .fy-growth-comparison-v39203 .card-title .fy-growth-toggle-v39205 ~ .fy-growth-toggle-v39205 {
  display: none !important;
}

/* ==========================================================================
   CALENDAR & DATE CONTROLS (UNIFORM SAFFRON THEME & OVERLAP FIX)
   ========================================================================== */
html body[data-role] :is(
  .professional-date-button-v39200,
  .promo-date-picker-button-v39235,
  .promo-date-picker-shell-v39237,
  .promo-date-button-v39239,
  .promo-date-single-button-v39238,
  .logbook-professional-date-v39266 .professional-date-button-v39200,
  .calendar-btn
) {
  background: linear-gradient(135deg, #FF6B00 0%, #EA580C 100%) !important;
  background-color: #FF6B00 !important;
  border: 1.5px solid #ea580c !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.28) !important;
  border-radius: 0 12px 12px 0 !important;
  cursor: pointer !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}

html body[data-role] :is(
  .professional-date-button-v39200:hover,
  .promo-date-picker-button-v39235:hover,
  .promo-date-picker-shell-v39237:hover,
  .promo-date-button-v39239:hover,
  .promo-date-single-button-v39238:hover,
  .logbook-professional-date-v39266 .professional-date-button-v39200:hover,
  .calendar-btn:hover
) {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
  color: #ffffff !important;
  border-color: #c2410c !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.38) !important;
}

html body[data-role] .promo-date-calendar-icon-v39237 {
  color: #ffffff !important;
}

/* Container has NO double border or background */
html body[data-role] .professional-date-field-v39200 {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: stretch !important;
}

/* Display text input has clean left border radius and peach border */
html body[data-role] :is(
  .professional-date-display-v39200,
  .promo-date-display-v39235
) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-right: none !important;
  color: #1a0a00 !important;
  font-weight: 850 !important;
  border-radius: 12px 0 0 12px !important;
  padding: 8px 12px !important;
}

html body[data-role] :is(
  input[type="date"],
  input[type="datetime-local"]
) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  color: #1a0a00 !important;
  font-weight: 850 !important;
  border-radius: 12px !important;
}

/* Hide native webkit picker inside custom fields to prevent ugly double overlap icon */
html body[data-role] .professional-date-field-v39200 input::-webkit-calendar-picker-indicator,
html body[data-role] .professional-date-native-v39200::-webkit-calendar-picker-indicator,
html body[data-role] [data-promo-date-inline-v39237="true"] input::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0 !important;
  -webkit-appearance: none !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Standalone native date input calendar indicator */
html body[data-role] input[type="date"]:not(.professional-date-native-v39200)::-webkit-calendar-picker-indicator,
html body[data-role] input[type="datetime-local"]:not(.professional-date-native-v39200)::-webkit-calendar-picker-indicator {
  filter: invert(45%) sepia(90%) saturate(1400%) hue-rotate(360deg) brightness(98%) contrast(105%) !important;
  cursor: pointer !important;
}

/* ==========================================================================
   PROMOTION TAB THEME PURIFICATION (SCREENSHOT 1 & 2 FIX)
   Permanently remove cyan/teal tints from Coupons, Offers, Banners & Combos.
   Enforce pure white cards, warm peach borders, and saffron controls.
   ========================================================================== */
html body[data-role] :is(
  #couponForm,
  #offerForm,
  #bannerForm,
  #comboAdFormV39225,
  .kvk-promo-panel-v39232,
  [data-v39185-promo-panel],
  [data-combo-ad-panel-v39225="true"],
  .promo-settings-detail-v39247,
  .promo-manager-shell-v39185,
  .promo-settings-section-v39247
) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #fed7aa !important;
}

/* Promotion cards & forms: clean pure white with soft peach border */
html body[data-role] :is(
  #couponForm,
  #offerForm,
  #bannerForm,
  #comboAdFormV39225
) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(254, 215, 170, 0.18) !important;
}

html body[data-role] .card:has(#couponForm),
html body[data-role] .card:has(#offerForm),
html body[data-role] .card:has(#bannerForm),
html body[data-role] .card:has(#comboAdFormV39225),
html body[data-role] .promo-manager-shell-v39185 .card,
html body[data-role] [data-v39185-promo-panel] .card,
html body[data-role] .kvk-promo-panel-v39232 .card,
html body[data-role] .promo-settings-detail-v39247.card,
html body[data-role] .promo-manager-toolbar-v39185,
html body[data-role] .promo-coupon-grid-v39190,
html body[data-role] .promo-manager-shell-v39185 .switch-row,
html body[data-role] :is(#couponForm, #offerForm, #bannerForm, #comboAdFormV39225) ~ .manage-list,
html body[data-role] :is(#couponForm, #offerForm, #bannerForm, #comboAdFormV39225) ~ .manage-list .switch-row {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid #fed7aa !important;
  border-color: #fed7aa !important;
  color: #1a0a00 !important;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.05) !important;
}

/* Promotion tabs: saffron active pill */
html body[data-role] .promo-manager-tabs-v39185 .promo-manager-tab-v39185 {
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  color: #1a0a00 !important;
  font-weight: 700 !important;
}
html body[data-role] .promo-manager-tabs-v39185 .promo-manager-tab-v39185.active {
  background: linear-gradient(135deg, #FF6B00 0%, #EA580C 100%) !important;
  color: #ffffff !important;
  border-color: #ea580c !important;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.25) !important;
}

/* Promotion Tab Right-Side Status Circle / Badge (Coupons, Offers, Banners, Combo) */
html body[data-role] .promo-settings-heading-v39247 .badge,
html body[data-role] .promo-active-badge-v39247,
html body[data-role] .promo-settings-section-v39247 .badge.blue,
html body[data-role] .card:has(#couponForm, #offerForm, #bannerForm, #comboAdFormV39225) .badge.blue,
html body[data-role] .card:has(#couponForm, #offerForm, #bannerForm, #comboAdFormV39225) .card-title .badge,
html body[data-role] [data-v39185-promo-panel] .badge.blue,
html body[data-role] [data-combo-ad-panel-v39225] .badge.blue,
html body[data-role] .promo-manager-shell-v39185 .badge.blue,
html body[data-role] :is(#couponForm, #offerForm, #bannerForm, #comboAdFormV39225) ~ .manage-list .badge.blue,
html body[data-role] :is(#couponForm, #offerForm, #bannerForm, #comboAdFormV39225) ~ .manage-list .switch-row .badge.blue,
html body[data-role] .coupon-kpi-v39192 .badge.blue {
  background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%) !important;
  color: #c2410c !important;
  border: 1.5px solid #fdba74 !important;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.15) !important;
  font-weight: 800 !important;
}

/* Form inputs inside Promotion tab: soft warm background, peach border, espresso text */
html body[data-role] :is(#couponForm, #offerForm, #bannerForm, #comboAdFormV39225) :is(input:not([type="hidden"]), select, textarea),
html body[data-role] :is(#couponForm, #offerForm, #bannerForm, #comboAdFormV39225) .promo-date-display-v39235,
html body[data-role] [data-promo-date-owned-v39239="true"] .promo-date-display-v39235 {
  background: #FFFDF7 !important;
  background-color: #FFFDF7 !important;
  background-image: none !important;
  border: 1.5px solid #fed7aa !important;
  border-color: #fed7aa !important;
  color: #1a0a00 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

html body[data-role] [data-promo-date-owned-v39239="true"] .promo-date-display-v39235 {
  border-radius: 10px 0 0 10px !important;
  border-right: 0 !important;
}

html body[data-role] :is(#couponForm, #offerForm, #bannerForm, #comboAdFormV39225) :is(input:not([type="hidden"]), select, textarea):focus,
html body[data-role] [data-promo-date-owned-v39239="true"] .promo-date-display-v39235:focus {
  border-color: #FF6B00 !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.16) !important;
  outline: none !important;
}

html body[data-role] :is(#couponForm, #offerForm, #bannerForm, #comboAdFormV39225) :is(input, textarea)::placeholder {
  color: #8c5d33 !important;
  opacity: 0.85 !important;
}

/* Date picker trigger button in Promotion forms: vibrant saffron */
html body[data-role] .promo-date-button-v39239,
html body[data-role] [data-promo-date-owned-v39239="true"] .promo-date-button-v39239,
html body[data-role] [data-promo-date-inline-v39237="true"] .promo-date-picker-shell-v39237 {
  background: linear-gradient(135deg, #FF6B00 0%, #EA580C 100%) !important;
  border: 1.5px solid #ea580c !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3) !important;
  border-radius: 0 10px 10px 0 !important;
}

html body[data-role] .promo-date-button-v39239:hover,
html body[data-role] [data-promo-date-owned-v39239="true"] .promo-date-button-v39239:hover,
html body[data-role] [data-promo-date-inline-v39237="true"] .promo-date-picker-shell-v39237:hover {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
  border-color: #c2410c !important;
}

/* Date modal dialog: pure white & saffron */
html body .kvk-promo-date-panel-v39239 {
  background: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid #fed7aa !important;
  box-shadow: 0 24px 70px rgba(234, 88, 12, 0.2) !important;
  color: #1a0a00 !important;
}
html body .kvk-promo-date-dialog-grid-v39239 input {
  background: #FFFDF7 !important;
  border: 1.5px solid #fed7aa !important;
  color: #1a0a00 !important;
}

/* ==========================================================================
   MODAL / POPUP LAYERING & BACKGROUND SCROLL LOCK (SCREENSHOT 4 FIX)
   Modals sit ABOVE sticky header (z-index: 1000) and tabs (z-index: 999).
   ========================================================================== */
html body .modal-backdrop.open,
html body .modal-backdrop[style*="display: block"],
html body .modal-backdrop[style*="display: flex"],
html body .modal-overlay.open,
html body .modal-overlay[style*="display: block"],
html body .modal-overlay[style*="display: flex"],
html body .modal-overlay[style*="display: grid"],
html body .modal-wrap.open,
html body [data-modal].open,
html body #trackingMapModalV39268.open,
html body #trackingMapModalV39268:not([style*="display: none"]):not([style*="display:none"]),
html body .kvk-tracker-modal-v39280,
html body .quick-switch-modal-v39128,
html body .dialog-backdrop,
html body .swal2-container {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 24px 16px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

/* Explicit hide rule for un-opened modals */
html body .modal-overlay:not(.open):not([style*="display: block"]):not([style*="display: flex"]):not([style*="display:flex"]):not([style*="display: grid"]),
html body .modal-backdrop:not(.open):not([style*="display: block"]):not([style*="display: flex"]):not([style*="display:flex"]),
html body .modal-wrap:not(.open):not([style*="display: block"]):not([style*="display: flex"]):not([style*="display:flex"]),
html body [data-modal]:not(.open):not([style*="display: block"]):not([style*="display: flex"]):not([style*="display:flex"]),
html body [hidden] {
  display: none !important;
}

html body .modal-backdrop > .modal,
html body .modal-overlay > .modal,
html body .modal,
html body [data-modal] .modal-content,
html body #trackingMapModalV39268 .modal-content,
html body .modal-content,
html body .modal-dialog {
  position: relative !important;
  z-index: 100000 !important;
  margin: 20px auto !important;
  max-height: calc(100vh - 64px) !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
  border: 1.5px solid #fed7aa !important;
  box-sizing: border-box !important;
}

/* Background page scroll lock when any top-level modal overlay is genuinely open */
body:has(> .modal-backdrop:not([style*="display: none"]):not([style*="display:none"]):not([hidden])),
body:has(> .modal-overlay:not([style*="display: none"]):not([style*="display:none"]):not([hidden])),
body:has(> .modal:not([style*="display: none"]):not([style*="display:none"]):not([hidden])),
body:has(> [data-modal]:not([style*="display: none"]):not([style*="display:none"]):not([hidden])),
body:has(> #trackingMapModalV39268:not([style*="display: none"]):not([style*="display:none"]):not([hidden])),
body.modal-open {
  overflow: hidden !important;
  touch-action: none !important;
}

/* ==========================================================================
   DELIVERY BOY CREATE PHOTO COMPACT BUTTONS (SCREENSHOT 5 FIX)
   ========================================================================== */
.delivery-photo-btn-v39307,
.photo-actions .delivery-photo-btn-v39307,
button.delivery-photo-btn-v39307 {
  height: 32px !important;
  min-height: 32px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1 !important;
}

/* ==========================================================================
   SUPER ADMIN TOTP REAUTH POPUP LOGOUT BUTTON
   ========================================================================== */
#kvkReauthLogoutBtn,
.kvk-reauth-logout-btn,
button#kvkReauthLogoutBtn {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
  cursor: pointer !important;
}

#kvkReauthLogoutBtn:hover,
.kvk-reauth-logout-btn:hover,
button#kvkReauthLogoutBtn:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35) !important;
}

/* ==========================================================================
   v3.9.308 STORE WEB HEADER STICKY & 100% FULL-WIDTH TABS BAR
   ========================================================================== */
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

.owner-main-tabs-v39115 {
  width: 100% !important;
  max-width: 100% !important;
  border-bottom: 2px solid #fed7aa !important;
}

/* ==========================================================================
   v3.9.308 SAFFRON BORDER ON STAT / CARD BUTTONS ACROSS STORE WEB
   ========================================================================== */
.kvk-stat-button-v39223,
.dashboard-stat-card-v39256,
.daybook-stat-card-v39308 {
  border: 1.5px solid #fed7aa !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.kvk-stat-button-v39223:hover,
.kvk-stat-button-v39223.active,
.dashboard-stat-card-v39256:hover,
.dashboard-stat-card-v39256.active,
.daybook-stat-card-v39308:hover,
.daybook-stat-card-v39308.active {
  border-color: #FF6B00 !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.15) !important;
}

/* ==========================================================================
   v3.9.308 DELIVERY BOY BUTTONS SIZING & PHOTO ACTIONS GAP
   ========================================================================== */
html body[data-role] :is(.btn.small, .btn.small.orange, [data-action="reset-delivery-session-v39119"]),
[data-action="reset-delivery-session-v39119"],
.btn.small.orange {
  padding: 5px 9px !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  min-height: unset !important;
  height: auto !important;
  box-shadow: none !important;
}

.photo-actions {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 6px !important;
}

.delivery-photo-btn-v39307 {
  padding: 5px 12px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  margin: 0 !important;
}

/* ==========================================================================
   v3.9.309 SAFFRON INDIA THEME - CUSTOMER & APP LOGIN SCREEN
   ========================================================================== */
html body .login-page:not(.hidden):not([style*="display: none"]):not([hidden]),
html body[data-role] .login-page:not(.hidden):not([style*="display: none"]):not([hidden]),
html body .login-cover:not(.hidden):not([style*="display: none"]):not([hidden]),
html body[data-role] .login-cover:not(.hidden):not([style*="display: none"]):not([hidden]),
html body[data-role="storemanage"] #loginOverlay:not(.hidden):not([style*="display: none"]):not([hidden]) {
  background: radial-gradient(circle at 50% 15%, #fff7ed 0%, #fffbf5 50%, #FFF8E7 100%) !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 14px 12px 28px 12px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html body #loginOverlay[style*="display: none"],
html body #loginOverlay.hidden,
html body #loginOverlay[hidden],
html body[data-role="storemanage"] #loginOverlay[style*="display: none"],
html body[data-role="storemanage"] #loginOverlay.hidden,
html body[data-role="storemanage"] #loginOverlay[hidden],
html body .login-page[style*="display: none"],
html body .login-page.hidden,
html body .login-page[hidden],
html body .login-cover[style*="display: none"],
html body .login-cover.hidden,
html body .login-cover[hidden] {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html body .auth-card,
html body .store-auth-card,
html body .kvk-identity-login-v39267,
html body .loginbox,
html body #loginCardView {
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(234, 88, 12, 0.12), 0 4px 14px rgba(251, 146, 60, 0.08) !important;
  padding: 20px 18px !important;
  max-width: 440px !important;
  width: 100% !important;
  margin: 6px auto 0 !important;
  box-sizing: border-box !important;
}

html body #kitchenLoginCardView {
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(234, 88, 12, 0.12), 0 4px 14px rgba(251, 146, 60, 0.08) !important;
  padding: 20px 18px !important;
  max-width: 440px !important;
  width: min(440px, calc(100% - 24px)) !important;
  margin: 12px auto 24px !important;
  box-sizing: border-box !important;
}

html body .login-brand {
  text-align: center !important;
  margin-bottom: 10px !important;
}

html body .login-brand img {
  width: 50px !important;
  height: 50px !important;
  object-fit: contain !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  display: block !important;
  margin: 0 auto 6px !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.18) !important;
  border: 1.5px solid #fed7aa !important;
}

html body .login-brand .title {
  font-size: 20px !important;
  font-weight: 950 !important;
  color: #142033 !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

html body .auth-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

html body .auth-head h1 {
  margin: 0 !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  color: #1a0a00 !important;
  letter-spacing: -0.01em !important;
}

html body .auth-head p {
  margin: 2px 0 0 0 !important;
  color: #7c2d12 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

html body .auth-head .logo,
html body .auth-logo-v39267 {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1.5px solid #fdba74 !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.20) !important;
  overflow: hidden !important;
  padding: 2px !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}

html body .auth-head .logo img,
html body .auth-logo-v39267 img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 10px !important;
}

html body .auth-card label,
html body .store-auth-card label,
html body .kvk-identity-login-v39267 label,
html body .loginbox label,
html body #kitchenLoginCardView label,
html body #loginCardView label {
  color: #431407 !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  margin-bottom: 4px !important;
  display: block !important;
}

html body .auth-card input,
html body .auth-card select,
html body .store-auth-card input,
html body .store-auth-card select,
html body .kvk-identity-login-v39267 input,
html body .kvk-identity-login-v39267 select,
html body .loginbox input,
html body .loginbox select,
html body #kitchenLoginCardView input,
html body #loginCardView input {
  background: #FFFDF7 !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 11px !important;
  padding: 9px 12px !important;
  font-size: 14px !important;
  color: #1a0a00 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 42px !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

html body .auth-card input:focus,
html body .auth-card select:focus,
html body .store-auth-card input:focus,
html body .store-auth-card select:focus,
html body .kvk-identity-login-v39267 input:focus,
html body .kvk-identity-login-v39267 select:focus,
html body .loginbox input:focus,
html body .loginbox select:focus,
html body #kitchenLoginCardView input:focus,
html body #loginCardView input:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.20) !important;
  outline: none !important;
}

html body .auth-card .actions,
html body .store-auth-card .actions,
html body .kvk-identity-login-v39267 .actions,
html body .loginbox .actions {
  margin-top: 14px !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

html body .auth-card .actions.kvk-login-actions-v39267,
html body .kvk-identity-login-v39267 .actions.kvk-login-actions-v39267,
html body .kvk-login-actions-v39267 {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  margin-top: 16px !important;
}

html body .auth-card .actions.kvk-login-actions-v39267 .btn,
html body .kvk-identity-login-v39267 .actions.kvk-login-actions-v39267 .btn,
html body .kvk-login-actions-v39267 .btn,
html body .kvk-btn-login-v39267,
html body .kvk-btn-forgot-v39267 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

html body .auth-card .btn:not(.secondary),
html body .kvk-identity-login-v39267 .btn:not(.secondary),
html body .kvk-btn-login-v39267 {
  background: linear-gradient(135deg, #FF6B00 0%, #EA580C 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  padding: 11px 16px !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35) !important;
  cursor: pointer !important;
  transition: transform 0.1s ease, filter 0.18s ease !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}

html body .auth-card .btn:not(.secondary):hover,
html body .kvk-identity-login-v39267 .btn:not(.secondary):hover,
html body .kvk-btn-login-v39267:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
}

html body .auth-card .btn.secondary,
html body .kvk-identity-login-v39267 .btn.secondary,
html body .kvk-btn-forgot-v39267 {
  background: #ffffff !important;
  color: #c2410c !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 12px !important;
  font-weight: 750 !important;
  font-size: 12.5px !important;
  padding: 10px 10px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
  transition: background 0.18s ease, border-color 0.18s ease !important;
  text-shadow: none !important;
}

html body .auth-card .btn.secondary:hover,
html body .kvk-identity-login-v39267 .btn.secondary:hover,
html body .kvk-btn-forgot-v39267:hover {
  background: #fff7ed !important;
  border-color: #fdba74 !important;
  color: #9a3412 !important;
}

html body .kvk-auth-link,
html body a.kvk-auth-link {
  color: #ea580c !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 4px 10px !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: color 0.15s ease !important;
}

html body .kvk-auth-link:hover,
html body a.kvk-auth-link:hover {
  color: #c2410c !important;
  text-decoration: underline !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html body .kvk-password-field-wrap {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

html body .kvk-password-field-wrap input {
  width: 100% !important;
  padding-right: 44px !important;
}

html body .kvk-password-field-wrap .kvk-eye-btn {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  color: #ea580c !important;
  z-index: 3 !important;
}

html body .kvk-password-field-wrap .kvk-eye-btn:hover {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: translateY(-50%) scale(1.15) !important;
}

html body .kvk-password-checklist-v39267 {
  background: #fffaf0 !important;
  border: 1px dashed #fed7aa !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  margin-top: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

html body .kvk-password-rule-v39267 {
  font-size: 11.5px !important;
  color: #9a3412 !important;
}

html body .kvk-password-rule-v39267.pass {
  color: #15803d !important;
  font-weight: 700 !important;
}

html body .identity-status-v39267.ok {
  background: #ffedd5 !important;
  border: 1px solid #fdba74 !important;
  color: #9a3412 !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

html body .identity-status-v39267.warn {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

html body a[data-action="customer-change-store-code"] {
  color: #ea580c !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 4px 10px !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}

html body a[data-action="customer-change-store-code"]:hover {
  color: #c2410c !important;
  text-decoration: underline !important;
}

/* In-App Mobile Header Title Bar Icon */
html body[data-role="customer"] .mobile-header,
html body[data-role="customer"] .topbar {
  background: linear-gradient(135deg, #FF6B00 0%, #d83a17 50%, #c62828 100%) !important;
  color: #ffffff !important;
  border-bottom: none !important;
  box-shadow: 0 4px 18px rgba(198, 40, 40, 0.22) !important;
}

html body[data-role="customer"] .mobile-header .logo.store-logo-img,
html body[data-role="customer"] .mobile-header .app-logo-header {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1.5px solid #fdba74 !important;
  overflow: hidden !important;
  padding: 2px !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 3px 10px rgba(234, 88, 12, 0.15) !important;
}

html body[data-role="customer"] .mobile-header .logo.store-logo-img img,
html body[data-role="customer"] .mobile-header .app-logo-header img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 9px !important;
}

/* Forgot Password Modal */
html body .kvk-forgot-card-v39275 {
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  box-shadow: 0 20px 50px rgba(234, 88, 12, 0.18) !important;
  border-radius: 20px !important;
  padding: 22px !important;
}

/* ==========================================================================
   UNIVERSAL COMPACT MOBILE TITLE BAR & ZERO BLANK GAP FOR ALL ANDROID APPS
   Apps covered: owner-app, customer, delivery, kitchen-app, store-manage, super-admin-app
   ========================================================================== */
@media (max-width: 600px) {
  /* 1. Header Containers - Compact 44px - 48px height matching Customer App; scrolls away on scroll */
  html body :is(.mobile-header, .owner-app-header-v39243, .owner-app-header-v3965, .delivery-header-v39120, .delivery-header-v39119, .kds-header, .head, #storeManageTopbar, .topbar) {
    position: relative !important;
    top: auto !important;
    min-height: 44px !important;
    max-height: 48px !important;
    height: 48px !important;
    padding: 3px 8px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    margin: 0 !important;
    z-index: 10 !important;
  }

  /* 2. Inner Wrappers */
  html body :is(.mobile-header, .owner-app-header-v39243, .owner-app-header-v3965, .delivery-header-v39120, .delivery-header-v39119, .kds-header, .head, #storeManageTopbar, .topbar) .topbar-inner {
    padding: 0 !important;
    min-height: 40px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3. Logos & App Icons */
  html body :is(.mobile-header, .owner-app-header-v39243, .delivery-header-v39120, .kds-header, .head, #storeManageTopbar, .topbar) :is(.logo, .store-logo-img, .brand-logo, .store-header-logo-v39243, .app-logo-header, .kvk-store-header-logo-v3956 img) {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    border-radius: 8px !important;
    padding: 1px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  html body .head .brandline .brand-logo {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    border-radius: 8px !important;
  }

  /* 4. Headings & Titles */
  html body :is(.mobile-header, .owner-app-header-v39243, .delivery-header-v39120, .kds-header, .head, #storeManageTopbar, .topbar) :is(h1, .brand-text b, .brand-title, .delivery-brand-v39120 h1, .employee-panel-title, .brand-title h1) {
    font-size: 13px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Employee App Header Specific Title & Spans */
  html body .head .employee-panel-title,
  html body .head .employee-panel-title span,
  html body .head .employee-panel-title .title-blue,
  html body .head .employee-panel-title .title-green {
    font-size: 13.5px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    letter-spacing: 0.3px !important;
    line-height: 1.2 !important;
  }

  /* Employee App Header Container & Bell Panel Isolation */
  html body .head {
    display: block !important;
    overflow: visible !important;
  }
  html body .head > div:first-child {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
  }
  html body .head .brandline {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  html body .head .head-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  html body .head .head-actions #empBellBtn.bell-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }
  html body .head .head-actions .btn {
    height: 28px !important;
    min-height: 28px !important;
    padding: 3px 10px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    line-height: 22px !important;
    border: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  }

  /* Employee App Subpage Smooth Scroll (No White Gap) */
  html body .v397-page {
    min-height: auto !important;
    height: auto !important;
    background: #ffffff !important;
  }
  html body .v397-page-head {
    position: relative !important;
    top: auto !important;
    height: 46px !important;
    min-height: 44px !important;
    max-height: 48px !important;
    padding: 4px 44px 4px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-bottom: 1.5px solid #fed7aa !important;
    background: #fff7ed !important;
  }
  html body .v397-page-head h2 {
    font-size: 13.5px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    color: #c2410c !important;
    font-weight: 900 !important;
  }
  html body .v397-page-head p {
    font-size: 9.5px !important;
    margin: 0 !important;
    color: #64748b !important;
  }
  html body .v397-page-x {
    top: 9px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }
  html body .v397-page-body {
    max-height: none !important;
    overflow: visible !important;
    padding: 12px !important;
  }

  /* Status Pill on Employee App (No Overlap with Logout, Scrolls Away with Header) */
  body[data-role="superadminapp"] .kvk-server-status-pill {
    position: absolute !important;
    top: 9px !important;
    right: 120px !important;
    padding: 2px 7px !important;
    font-size: 8.5px !important;
    height: 24px !important;
    z-index: 15 !important;
  }
  body[data-role="superadminapp"]:has(#v397RequestPage) .kvk-server-status-pill {
    display: none !important;
  }

  /* 5. Subtitles & Secondary Meta */
  html body :is(.mobile-header, .owner-app-header-v39243, .delivery-header-v39120, .kds-header, .head, #storeManageTopbar, .topbar) :is(p, .brand-meta, .store-header-meta, #topStoreMeta, #storeCodeSubtitle) {
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    margin: 1px 0 0 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 6. Hide Excessive Taglines in Delivery App */
  html body .delivery-system-name-v39120,
  html body .delivery-brand-v39120 .delivery-system-name-v39120 {
    display: none !important;
  }

  /* 7. Header Action Buttons & Badges */
  html body :is(.mobile-header, .owner-app-header-v39243, .delivery-header-v39120, .kds-header, .head, #storeManageTopbar, .topbar) :is(.btn, .pill, button, .bell-btn, .clock-badge, .btn-ctrl, .store-select-btn) {
    min-height: 28px !important;
    height: 28px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    line-height: 1 !important;
  }

  /* 8. ELIMINATE BLANK PAGE / BLANK SPACES UNDER HEADER */
  html body :is(.mobile-content, .container, .delivery-container-v39120, .delivery-container-v39119, .kds-container, #appContent, .wrap, main) {
    padding-top: 6px !important;
    margin-top: 0 !important;
  }

  html body {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  /* 10. Delivery App Profile Summary Compactness */
  html body .delivery-profile-summary-v39120 {
    margin: 0 0 8px 0 !important;
    padding: 8px 10px !important;
  }
}

/* ==========================================================================
   STORE MANAGE APP UNIVERSAL STYLES (DESKTOP & MOBILE COMPACT PARITY)
   Matching Customer App header sizing (90px height, 520px width), Saffron theme gradient, clean slider & stack
   ========================================================================== */

/* Universal Title Bar matching Customer App & Saffron Theme */
html body[data-role="storemanage"] :is(#storeManageTopbar, .sm-compact-header, .sm-compact-header-inner, .topbar-inner) {
  background: linear-gradient(135deg, #FF6B00 0%, #d83a17 50%, #c62828 100%) !important;
  color: #ffffff !important;
}

html body[data-role="storemanage"] #storeManageTopbar,
html body[data-role="storemanage"] .topbar.sm-compact-header {
  position: relative !important;
  top: auto !important;
  height: 90px !important;
  min-height: 90px !important;
  max-height: 90px !important;
  padding: 14px 16px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: linear-gradient(135deg, #FF6B00 0%, #d83a17 50%, #c62828 100%) !important;
  color: #ffffff !important;
  border-bottom: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 10 !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}

html body[data-role="storemanage"] :is(#storeManageTopbar, .sm-compact-header, .topbar) :is(h1, h2, h3, p, span:not(.sm-logout-btn), strong, b, div, #topStoreTitle) {
  color: #ffffff !important;
}

html body[data-role="storemanage"] .sm-brand-title span,
html body[data-role="storemanage"] #topStoreTitle {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1px !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

html body[data-role="storemanage"] #topStoreMeta {
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.25 !important;
  margin-top: 2px !important;
  display: block !important;
}

html body[data-role="storemanage"] .sm-brand-logo,
html body[data-role="storemanage"] #topStoreLogo {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  padding: 2px !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Universal Hide 3 Badges (Grocery, Mohit, Store Code) */
html body[data-role="storemanage"] :is(#topTradePill, #storeCodePill, #userNamePill) {
  display: none !important;
}

/* Hide ONLINE server status pill on Store Manage to avoid covering the Logout button */
html body[data-role="storemanage"] .kvk-server-status-pill {
  display: none !important;
}

/* Universal Red Logout Button Top-Right Corner */
html body[data-role="storemanage"] .sm-logout-btn,
html body[data-role="storemanage"] #topUserActions button.sm-logout-btn {
  display: inline-flex !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  background: #dc2626 !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35) !important;
  cursor: pointer !important;
  z-index: 20 !important;
  position: relative !important;
}

/* Universal Navigation Pills Slider directly under Title Bar matching Grocery App Slider */
html body[data-role="storemanage"] nav.nav-pills-slider,
html body[data-role="storemanage"] #mainNavPills {
  max-width: 520px !important;
  margin: 0 auto !important;
  margin-top: 0 !important;
  width: 100% !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  padding: 8px 10px 8px !important;
  gap: 8px !important;
  background: #FFF8E7 !important;
  border-top: none !important;
  border-bottom: 1.5px solid #fed7aa !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Visibility Control: strictly show only when logged in, hide on login view */
html.has-sm-session body[data-role="storemanage"] #storeManageTopbar,
body[data-role="storemanage"].sm-logged-in #storeManageTopbar {
  display: flex !important;
}
html.has-sm-session body[data-role="storemanage"] #mainNavPills,
body[data-role="storemanage"].sm-logged-in #mainNavPills {
  display: flex !important;
}

html:not(.has-sm-session) body[data-role="storemanage"] #storeManageTopbar,
html:not(.has-sm-session) body[data-role="storemanage"] #mainNavPills,
body[data-role="storemanage"].sm-logged-out #storeManageTopbar,
body[data-role="storemanage"].sm-logged-out #mainNavPills,
body[data-role="storemanage"]:has(#loginOverlay:not(.hidden):not([style*="display: none"])) #storeManageTopbar,
body[data-role="storemanage"]:has(#loginOverlay:not(.hidden):not([style*="display: none"])) #mainNavPills,
body[data-role="storemanage"] #storeManageTopbar[style*="display: none"],
body[data-role="storemanage"] #mainNavPills[style*="display: none"] {
  display: none !important;
}

html body[data-role="storemanage"] #mainNavPills::-webkit-scrollbar {
  height: 4px !important;
  display: block !important;
}
html body[data-role="storemanage"] #mainNavPills::-webkit-scrollbar-track {
  background: #f1e6cf !important;
  border-radius: 999px !important;
}
html body[data-role="storemanage"] #mainNavPills::-webkit-scrollbar-thumb {
  background: #a8a29e !important;
  border-radius: 999px !important;
}

html body[data-role="storemanage"] #mainNavPills .pill {
  flex-shrink: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 12px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  background: #FFF8E7 !important;
  border: 1.5px solid #fed7aa !important;
  color: #7c2d12 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.15s ease !important;
}

html body[data-role="storemanage"] #mainNavPills .pill:hover:not(.active) {
  background: #ffedd5 !important;
  border-color: #f97316 !important;
  color: #431407 !important;
}

html body[data-role="storemanage"] #mainNavPills .pill.active {
  background: linear-gradient(135deg, #FF6B00 0%, #EA580C 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 950 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35) !important;
}

/* Continuous 520px Column on Desktop */
@media (min-width: 541px) {
  body[data-role="storemanage"] {
    background: #ece4d2 !important;
  }
  body[data-role="storemanage"] :is(#storeManageTopbar, #mainNavPills, #mainContainer, #loginOverlay) {
    max-width: 520px !important;
    margin: 0 auto !important;
    border-left: 1.5px solid #fed7aa !important;
    border-right: 1.5px solid #fed7aa !important;
    box-sizing: border-box !important;
  }
}

/* ========================================================
   KVK SAFFRON INDIA THEME: CUSTOMER OFFER & COMBO CAROUSEL
   Vibrant Saffron Indian palette, crisp white card text, 
   smooth shadows and glowing indicators
   ======================================================== */
.offer-carousel {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  margin: 0 0 16px !important;
  background: linear-gradient(135deg, #FF6B00 0%, #ea580c 45%, #c62828 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(255, 107, 0, 0.28), 0 2px 8px rgba(198, 40, 40, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  touch-action: pan-y !important;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.offer-carousel:hover {
  box-shadow: 0 14px 34px rgba(255, 107, 0, 0.38), 0 4px 12px rgba(198, 40, 40, 0.25) !important;
}

.offer-carousel .offer-slide {
  min-height: 130px !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%) !important;
}

.offer-carousel .offer-slide > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.offer-carousel .offer-slide small {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  width: fit-content !important;
  margin-bottom: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(4px) !important;
}

.offer-carousel .offer-slide h2 {
  margin: 0 0 4px 0 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  letter-spacing: -0.2px !important;
}

.offer-carousel .offer-slide p {
  margin: 0 0 6px 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: #fff7ed !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  opacity: 0.95 !important;
  font-weight: 500 !important;
}

.offer-carousel .offer-slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.2);
  padding: 3px 8px;
  border-radius: 6px;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.offer-carousel .offer-slide-img {
  width: 86px !important;
  height: 86px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
  background: rgba(255, 255, 255, 0.2) !important;
  flex: 0 0 86px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

.offer-carousel .offer-slide-icon-box {
  width: 80px !important;
  height: 80px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 40px !important;
  flex: 0 0 80px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(4px) !important;
}

.offer-carousel .offer-dots {
  position: absolute !important;
  right: 14px !important;
  bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  z-index: 2 !important;
}

.offer-carousel .offer-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.45) !important;
  transition: all 0.25s ease !important;
}

.offer-carousel .offer-dot.active {
  background: #ffffff !important;
  width: 22px !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9) !important;
}

.offer-carousel .offer-nav {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  display: flex !important;
  gap: 6px !important;
  z-index: 2 !important;
}

.offer-carousel .offer-nav button {
  border: 0 !important;
  background: rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.offer-carousel .offer-nav button:hover {
  background: rgba(0, 0, 0, 0.45) !important;
  transform: scale(1.08) !important;
}


/* ==========================================================================
   KVK ORDER SECTION UNIFIED SAFFRON THEME (Store Web & Store App)
   Ensures cards, filter sliders, badges, totals, and buttons match Saffron
   ========================================================================== */
html body[data-role] :is(.order-card, article.order-card) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.06) !important;
  color: #1a0a00 !important;
}

html body[data-role] :is(.order-card, article.order-card):hover {
  border-color: #fdba74 !important;
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.10) !important;
}

html body[data-role] .order-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  border-bottom: 1.5px solid #ffedd5 !important;
  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
}

html body[data-role] .order-head strong {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #1a0a00 !important;
  letter-spacing: 0.3px !important;
}

html body[data-role] .order-head .subtle {
  color: #8c4a16 !important;
  font-weight: 600 !important;
}

/* Order Filter Tabs / Slider & Service Filter */
html body[data-role] :is(.tabs.order-filter-slider, .order-filter-slider, .order-filter-slider-v39189, .service-filter-v39189, .rejected-service-filter-v39211, .tabs[aria-label="Store order filters"], .tabs[aria-label="Order status"], .tabs[aria-label="Order type"], .tabs[aria-label="Rejected order type"]) {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding: 4px 2px 10px !important;
  scrollbar-width: thin !important;
  border: none !important;
  background: transparent !important;
}

html body[data-role] :is(.tabs.order-filter-slider, .order-filter-slider, .order-filter-slider-v39189, .service-filter-v39189, .rejected-service-filter-v39211, .tabs[aria-label="Store order filters"], .tabs[aria-label="Order status"], .tabs[aria-label="Order type"], .tabs[aria-label="Rejected order type"]) .tab,
html body[data-role] .tabs button.tab[data-action="order-filter"],
html body[data-role] .tabs button.tab[data-action="order-service-v39189"] {
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 999px !important;
  color: #7c2d12 !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
}

html body[data-role] :is(.tabs.order-filter-slider, .order-filter-slider, .order-filter-slider-v39189, .service-filter-v39189, .rejected-service-filter-v39211, .tabs[aria-label="Store order filters"], .tabs[aria-label="Order status"], .tabs[aria-label="Order type"], .tabs[aria-label="Rejected order type"]) .tab.active,
html body[data-role] .tabs button.tab[data-action="order-filter"].active,
html body[data-role] .tabs button.tab[data-action="order-service-v39189"].active {
  background: linear-gradient(135deg, #FF6B00 0%, #d83a17 50%, #c62828 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.35) !important;
}

html body[data-role] .bottom-bar button.active {
  background: #ffedd5 !important;
  color: #c2410c !important;
  font-weight: 900 !important;
}

/* Order action buttons */
html body[data-role] .order-card .actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid #ffedd5 !important;
}

html body[data-role] .order-card .actions .btn {
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 7px 14px !important;
  cursor: pointer !important;
  transition: transform 0.12s ease !important;
}

/* Accept / Status-Next / Primary Button */
html body[data-role] .order-card .actions :is(.btn.small.green:not([data-action="toggle-payment"]), .btn.small.blue, [data-action="accept-order"], [data-action="status-next"], [data-action="mark-packed"]) {
  background: linear-gradient(135deg, #FF6B00 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 3px 10px rgba(255, 107, 0, 0.28) !important;
}

/* Secondary / View / Bill */
html body[data-role] .order-card .actions :is(.btn.small.secondary, [data-action="view-order"], [data-action="previous-status-v39177"]) {
  background: #FFF8E7 !important;
  color: #9a3412 !important;
  border: 1.5px solid #fed7aa !important;
}

/* Mark Paid (Green) */
html body[data-role] .order-card .actions .btn[data-action="toggle-payment"].green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: none !important;
}

/* Mark Unpaid (Orange) */
html body[data-role] .order-card .actions .btn[data-action="toggle-payment"].orange {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  border: none !important;
}

/* Reject / Cancel Order */
html body[data-role] .order-card .actions :is(.btn.small.reject, [data-action="reject-order"], [data-action="customer-cancel-order"]) {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  border: none !important;
}

/* Call Customer */
html body[data-role] .order-card .actions :is(.btn.small.call, [data-action="call-customer"]) {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border: none !important;
}

/* Customer Verified / Unverify */
html body[data-role] .order-card .actions :is(.btn.small.verify, .btn.small.unverify) {
  background: #fff7ed !important;
  color: #c2410c !important;
  border: 1.5px solid #fed7aa !important;
}

/* Order Totals Block */
html body[data-role] .order-card .totals {
  background: #fffaf0 !important;
  border: 1.5px solid #ffedd5 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin-top: 10px !important;
}

html body[data-role] .order-card .totals .grand {
  color: #FF6B00 !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  border-top: 1.5px dashed #fed7aa !important;
  padding-top: 6px !important;
  margin-top: 6px !important;
}

/* Order Lines */
html body[data-role] .order-card .order-line {
  border-bottom: 1px solid #fff1e0 !important;
  padding: 6px 0 !important;
}

/* Receive Orders Window */
html body[data-role] .order-received-window {
  border: 2px solid #FF6B00 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 6px 24px rgba(255, 107, 0, 0.12) !important;
}

/* ==========================================================================
   ORDERS SEARCH BAR & FILTER STRIP (SAFFRON THEME CONVERSION)
   Replaces legacy blue/cyan box with warm saffron-cream surface and peach border
   ========================================================================== */
html body[data-role] :is(.order-search-v39195, .order-search-item-style-v39259, .order-search-date-final-v39264) {
  background: #FFFDF7 !important;
  background-color: #FFFDF7 !important;
  background-image: none !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.05) !important;
  color: #1a0a00 !important;
}

html body[data-role] :is(.order-search-v39195, .order-search-item-style-v39259, .order-search-date-final-v39264) label {
  color: #1a0a00 !important;
  font-weight: 800 !important;
}

html body[data-role] :is(.order-search-v39195, .order-search-item-style-v39259, .order-search-date-final-v39264) .order-search-line-v39195 {
  background: transparent !important;
}

html body[data-role] :is(.order-search-v39195, .order-search-item-style-v39259, .order-search-date-final-v39264) :is(input[type="search"], input) {
  background: #FFF8E7 !important;
  background-color: #FFF8E7 !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 12px !important;
  color: #1a0a00 !important;
  font-weight: 700 !important;
}

html body[data-role] :is(.order-compact-filter-v39259, .order-date-filter-v39264) {
  background: #FFF8E7 !important;
  background-color: #FFF8E7 !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 12px !important;
  color: #1a0a00 !important;
  font-weight: 800 !important;
}

/* Match badge in search bar: Saffron peach pill instead of blue */
html body[data-role] :is(.order-search-v39195, .order-search-item-style-v39259, .order-search-date-final-v39264) .badge,
html body[data-role] :is(.order-search-v39195, .order-search-item-style-v39259, .order-search-date-final-v39264) .badge.blue {
  background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%) !important;
  color: #c2410c !important;
  border: 1.5px solid #fdba74 !important;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.15) !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

/* Logbook / Filter panel companion elements */
html body[data-role] :is(.order-filter-panel-v39257, .logbook-all-days-v39264) {
  background: #FFFDF7 !important;
  border: 1.5px solid #fed7aa !important;
  color: #1a0a00 !important;
}

/* ==========================================================================
   SIREN SETTINGS & TOGGLE CONTROLS (KVK Saffron Theme)
   ========================================================================== */
html body[data-role] :is(.siren-setting-card-v39208, .siren-setting-card-v39207) {
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.06) !important;
}

html body[data-role] .siren-status-box-v39208 {
  background: #FFF8E7 !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 16px !important;
}

html body[data-role] .siren-status-heading-v39208 {
  color: #7c2d12 !important;
}

html body[data-role] .siren-status-pill-v39208.is-on {
  background: linear-gradient(135deg, #FF6B00 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(255, 107, 0, 0.35) !important;
}

html body[data-role] .siren-status-pill-v39208.is-off {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
}

html body[data-role] .siren-large-track-v39208 {
  border: 3px solid #fdba74 !important;
  background: #ffedd5 !important;
  box-shadow: inset 0 2px 5px rgba(124, 45, 18, 0.12) !important;
}

html body[data-role] .siren-large-toggle-v39208 input:checked + .siren-large-track-v39208 {
  background: linear-gradient(135deg, #FF6B00 0%, #ea580c 100%) !important;
  border-color: #c2410c !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.38) !important;
}

html body[data-role] .siren-large-toggle-v39208 input:focus-visible + .siren-large-track-v39208 {
  outline: 4px solid rgba(255, 107, 0, 0.35) !important;
}

html body[data-role] .siren-track-off-v39208 {
  color: #9a3412 !important;
}

/* ==========================================================================
   EMAIL & SMS API SETTINGS (KVK Saffron Theme - Super Admin & Store Owner)
   ========================================================================== */
/* Store Owner Settings Actions Bar (Tabs) */
html body[data-role] .store-settings-actions .store-setting-btn {
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  color: #7c2d12 !important;
  border-radius: 14px !important;
  transition: all 0.2s ease !important;
}

html body[data-role] .store-settings-actions .store-setting-btn.active,
html body[data-role] .store-settings-actions .store-setting-btn[data-kvk-active-v39233="true"] {
  background: linear-gradient(135deg, #FF6B00 0%, #ea580c 100%) !important;
  border-color: #c2410c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35) !important;
}

html body[data-role] .store-settings-actions .store-setting-btn.active small,
html body[data-role] .store-settings-actions .store-setting-btn[data-kvk-active-v39233="true"] small {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Store Owner Email & SMS Settings Cards */
html body[data-role] :is(.store-api-settings-card, .store-api-email-card, .store-api-sms-card, #ownerEmailApiSettingsSection, #ownerSmsApiSettingsSection, #ownerStoreBasicSettingsSection) {
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.06) !important;
}

html body[data-role] :is(.store-api-settings-card, .store-api-email-card, .store-api-sms-card) h2 {
  color: #7c2d12 !important;
}

html body[data-role] :is(.store-api-settings-card, .store-api-email-card, .store-api-sms-card) .subtle {
  color: #9a3412 !important;
}

html body[data-role] :is(.store-api-settings-card, .store-api-email-card, .store-api-sms-card) table {
  border: 1.5px solid #fed7aa !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

html body[data-role] :is(.store-api-settings-card, .store-api-email-card, .store-api-sms-card) th {
  background: #FFF8E7 !important;
  color: #7c2d12 !important;
  border-color: #fed7aa !important;
  font-weight: 800 !important;
}

html body[data-role] :is(.store-api-settings-card, .store-api-email-card, .store-api-sms-card) td {
  border-color: #ffedd5 !important;
  color: #1a0a00 !important;
}

html body[data-role] :is(.store-api-settings-card, .store-api-email-card, .store-api-sms-card) .notice,
html body[data-role] :is(.store-api-settings-card, .store-api-email-card, .store-api-sms-card) .notice.soft {
  background: #FFF8E7 !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 10px !important;
  color: #7c2d12 !important;
}

html body[data-role] :is(.store-api-settings-card, .store-api-email-card, .store-api-sms-card) .slab-help {
  color: #9a3412 !important;
}

/* Super Admin Communication API Settings */
html body[data-role] #tab-apis .card {
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.06) !important;
}

html body[data-role] #tab-apis h2 {
  color: #7c2d12 !important;
}

html body[data-role] .admin-api-switcher-v3981 {
  background: #FFF8E7 !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 14px !important;
  padding: 6px !important;
}

html body[data-role] .admin-api-switch-v3981 {
  border: 1.5px solid #fed7aa !important;
  background: #ffffff !important;
  color: #7c2d12 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

html body[data-role] .admin-api-switch-v3981.active {
  border-color: #c2410c !important;
  background: linear-gradient(135deg, #FF6B00 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(255, 107, 0, 0.35) !important;
  font-weight: 800 !important;
}

html body[data-role] .admin-api-switch-v3981.active .mini {
  color: rgba(255, 255, 255, 0.9) !important;
}

html body[data-role] #adminTwoFactorBlock {
  background: #FFF8E7 !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 12px !important;
}

html body[data-role] #adminEmailProviderHelpBlock {
  background: #FFF8E7 !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 12px !important;
}

html body[data-role] #adminEmailProviderHelpTitle {
  color: #7c2d12 !important;
}

html body[data-role] #adminEmailProviderHelpNote {
  color: #9a3412 !important;
}

html body[data-role] .admin-api-note-v3981 {
  background: #FFF8E7 !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 10px !important;
  color: #7c2d12 !important;
}

html body[data-role] :is(#adminLiveEmailTestBlock, #smsForm > div > div[style*="f8fafc"], #smsForm div:has(#adminTestPhoneInput)) {
  background: #FFFDF7 !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 12px !important;
}

html body[data-role] .admin-api-service-table-v3981 th {
  background: #FFF8E7 !important;
  color: #7c2d12 !important;
  border-color: #fed7aa !important;
  font-weight: 800 !important;
}

html body[data-role] .admin-api-service-table-v3981 td {
  border-color: #ffedd5 !important;
  color: #1a0a00 !important;
}

html body[data-role] :is(#btnAdminTestSms, #btnAdminTestEmail) {
  background: linear-gradient(135deg, #FF6B00 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.3) !important;
  font-weight: 700 !important;
}

html body[data-role] :is(#btnSaveAdminSmsApi, #btnSaveAdminEmailApi) {
  background: linear-gradient(135deg, #FF6B00 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35) !important;
  font-weight: 800 !important;
}

html body[data-role] #adminApiDual2faSection {
  border-top-color: #fed7aa !important;
}

html body[data-role] #adminApiDual2faSection h3 {
  color: #7c2d12 !important;
}

/* ==========================================================================
   STORE SETTINGS: EMAIL & SMS API BUTTONS & BADGES (KVK Saffron Theme)
   ========================================================================== */
html body .store-settings-actions .store-setting-btn,
html body[data-role] .store-settings-actions .store-setting-btn {
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  color: #7c2d12 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.05) !important;
  transition: all 0.2s ease !important;
}

html body .store-settings-actions .store-setting-btn:not(.active):not([data-kvk-active-v39233="true"]):not([data-kvk-active-v39242="true"]):hover,
html body[data-role] .store-settings-actions .store-setting-btn:not(.active):not([data-kvk-active-v39233="true"]):not([data-kvk-active-v39242="true"]):hover {
  background: #FFF8E7 !important;
  border-color: #FF6B00 !important;
  color: #c2410c !important;
}

html body .store-settings-actions .store-setting-btn.active,
html body .store-settings-actions .store-setting-btn[data-kvk-active-v39233="true"],
html body .store-settings-actions .store-setting-btn[data-kvk-active-v39242="true"],
html body[data-role] .store-settings-actions .store-setting-btn.active,
html body[data-role] .store-settings-actions .store-setting-btn[data-kvk-active-v39233="true"],
html body[data-role] .store-settings-actions .store-setting-btn[data-kvk-active-v39242="true"] {
  background: linear-gradient(135deg, #FF6B00 0%, #ea580c 100%) !important;
  border-color: #c2410c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35) !important;
}

html body .store-settings-actions .store-setting-btn.active strong,
html body .store-settings-actions .store-setting-btn[data-kvk-active-v39233="true"] strong,
html body .store-settings-actions .store-setting-btn[data-kvk-active-v39242="true"] strong,
html body[data-role] .store-settings-actions .store-setting-btn.active strong,
html body[data-role] .store-settings-actions .store-setting-btn[data-kvk-active-v39233="true"] strong,
html body[data-role] .store-settings-actions .store-setting-btn[data-kvk-active-v39242="true"] strong {
  color: #ffffff !important;
}

html body .store-settings-actions .store-setting-btn.active small,
html body .store-settings-actions .store-setting-btn[data-kvk-active-v39233="true"] small,
html body .store-settings-actions .store-setting-btn[data-kvk-active-v39242="true"] small,
html body[data-role] .store-settings-actions .store-setting-btn.active small,
html body[data-role] .store-settings-actions .store-setting-btn[data-kvk-active-v39233="true"] small,
html body[data-role] .store-settings-actions .store-setting-btn[data-kvk-active-v39242="true"] small {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* API Badges in Settings (OFF, ON + Ready, ON + Pending) */
html body .store-setting-btn .badge.gray,
html body[data-role] .store-setting-btn .badge.gray {
  background: #FFF8E7 !important;
  color: #7c2d12 !important;
  border: 1px solid #fed7aa !important;
  font-weight: 800 !important;
}

html body .store-setting-btn.active .badge.gray,
html body .store-setting-btn[data-kvk-active-v39233="true"] .badge.gray,
html body .store-setting-btn[data-kvk-active-v39242="true"] .badge.gray,
html body[data-role] .store-setting-btn.active .badge.gray,
html body[data-role] .store-setting-btn[data-kvk-active-v39233="true"] .badge.gray,
html body[data-role] .store-setting-btn[data-kvk-active-v39242="true"] .badge.gray {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
}

html body .store-setting-btn .badge.green,
html body[data-role] .store-setting-btn .badge.green {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #86efac !important;
  font-weight: 800 !important;
}

html body .store-setting-btn.active .badge.green,
html body .store-setting-btn[data-kvk-active-v39233="true"] .badge.green,
html body .store-setting-btn[data-kvk-active-v39242="true"] .badge.green,
html body[data-role] .store-setting-btn.active .badge.green,
html body[data-role] .store-setting-btn[data-kvk-active-v39233="true"] .badge.green,
html body[data-role] .store-setting-btn[data-kvk-active-v39242="true"] .badge.green {
  background: #ffffff !important;
  color: #15803d !important;
  border: 1px solid #86efac !important;
}

html body .store-setting-btn .badge.orange,
html body[data-role] .store-setting-btn .badge.orange {
  background: #ffedd5 !important;
  color: #c2410c !important;
  border: 1px solid #fdba74 !important;
  font-weight: 800 !important;
}

html body .store-setting-btn.active .badge.orange,
html body .store-setting-btn[data-kvk-active-v39233="true"] .badge.orange,
html body .store-setting-btn[data-kvk-active-v39242="true"] .badge.orange,
html body[data-role] .store-setting-btn.active .badge.orange,
html body[data-role] .store-setting-btn[data-kvk-active-v39233="true"] .badge.orange,
html body[data-role] .store-setting-btn[data-kvk-active-v39242="true"] .badge.orange {
  background: #ffffff !important;
  color: #ea580c !important;
  border: 1px solid #fed7aa !important;
}

/* Store Owner Email & SMS Form Controls */
html body :is(#storeEmailApiForm, #storeSmsApiForm, .store-api-form) button[type="submit"],
html body[data-role] :is(#storeEmailApiForm, #storeSmsApiForm, .store-api-form) button[type="submit"] {
  background: linear-gradient(135deg, #FF6B00 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35) !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  padding: 10px 20px !important;
}

html body :is(#storeEmailApiForm, #storeSmsApiForm, .store-api-form) .btn.secondary,
html body[data-role] :is(#storeEmailApiForm, #storeSmsApiForm, .store-api-form) .btn.secondary {
  background: #FFF8E7 !important;
  color: #7c2d12 !important;
  border: 1.5px solid #fed7aa !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

html body :is(#storeEmailApiForm, #storeSmsApiForm, .store-api-form) .btn.secondary:hover,
html body[data-role] :is(#storeEmailApiForm, #storeSmsApiForm, .store-api-form) .btn.secondary:hover {
  background: #ffedd5 !important;
  border-color: #FF6B00 !important;
  color: #c2410c !important;
}

/* ==========================================================================
   SUPER ADMIN: EMAIL & SMS ACTION BUTTONS (Store Requests, License Alerts, Offers)
   ========================================================================== */
/* Store Request Email Action Button */
html body :is(.store-request-doc-actions-v3983, .request-action-stack-v3984) .btn.blue,
html body :is(.store-request-doc-actions-v3983, .request-action-stack-v3984) button[onclick*="openStoreRequestCommunicationV3983('email'"],
html body[data-role] :is(.store-request-doc-actions-v3983, .request-action-stack-v3984) .btn.blue,
html body[data-role] :is(.store-request-doc-actions-v3983, .request-action-stack-v3984) button[onclick*="openStoreRequestCommunicationV3983('email'"] {
  background: linear-gradient(135deg, #FF6B00 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(255, 107, 0, 0.3) !important;
  font-weight: 800 !important;
}

/* Store Request SMS Action Button */
html body :is(.store-request-doc-actions-v3983, .request-action-stack-v3984) .btn.purple,
html body :is(.store-request-doc-actions-v3983, .request-action-stack-v3984) button[onclick*="openStoreRequestCommunicationV3983('sms'"],
html body[data-role] :is(.store-request-doc-actions-v3983, .request-action-stack-v3984) .btn.purple,
html body[data-role] :is(.store-request-doc-actions-v3983, .request-action-stack-v3984) button[onclick*="openStoreRequestCommunicationV3983('sms'"] {
  background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(194, 65, 12, 0.3) !important;
  font-weight: 800 !important;
}

/* License Alerts Email & SMS Buttons */
html body #tab-license-alerts :is(.btn.blue, button[onclick*="'email'"]),
html body[data-role] #tab-license-alerts :is(.btn.blue, button[onclick*="'email'"]) {
  background: linear-gradient(135deg, #FF6B00 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.3) !important;
  font-weight: 800 !important;
}

html body #tab-license-alerts :is(.btn.purple, button[onclick*="'sms'"]),
html body[data-role] #tab-license-alerts :is(.btn.purple, button[onclick*="'sms'"]) {
  background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(194, 65, 12, 0.3) !important;
  font-weight: 800 !important;
}

/* Coupons / Offers Email & SMS Send Buttons */
html body #tab-coupons-offers :is(.btn.blue, button[onclick*="sendOfferV39111('email')"]),
html body[data-role] #tab-coupons-offers :is(.btn.blue, button[onclick*="sendOfferV39111('email')"]) {
  background: linear-gradient(135deg, #FF6B00 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.3) !important;
  font-weight: 800 !important;
}

html body #tab-coupons-offers :is(.btn.purple, button[onclick*="sendOfferV39111('sms')"]),
html body[data-role] #tab-coupons-offers :is(.btn.purple, button[onclick*="sendOfferV39111('sms')"]) {
  background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(194, 65, 12, 0.3) !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   SUPER ADMIN: EMAIL & SMS DISPATCH POPUP (admin-doc-popup-v3983)
   ========================================================================== */
html body .admin-doc-popup-v3983,
html body[data-role] .admin-doc-popup-v3983 {
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(124, 45, 18, 0.22) !important;
}

html body .admin-doc-popup-head-v3983,
html body[data-role] .admin-doc-popup-head-v3983 {
  background: linear-gradient(135deg, #FFF8E7 0%, #ffedd5 100%) !important;
  border-bottom: 1.5px solid #fed7aa !important;
}

html body .admin-doc-popup-head-v3983 h2,
html body[data-role] .admin-doc-popup-head-v3983 h2 {
  color: #7c2d12 !important;
  font-weight: 900 !important;
}

html body .admin-doc-choice-v3983,
html body[data-role] .admin-doc-choice-v3983 {
  border: 1.5px solid #fed7aa !important;
  background: #ffffff !important;
  color: #1a0a00 !important;
  border-radius: 12px !important;
  transition: all 0.15s ease !important;
}

html body .admin-doc-choice-v3983:hover,
html body[data-role] .admin-doc-choice-v3983:hover {
  border-color: #FF6B00 !important;
  background: #FFF8E7 !important;
}

html body .admin-doc-choice-v3983:has(input:checked),
html body[data-role] .admin-doc-choice-v3983:has(input:checked) {
  border-color: #ea580c !important;
  background: #FFF8E7 !important;
  color: #7c2d12 !important;
  box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.22) !important;
}

html body .admin-doc-choice-v3983 input[type="radio"],
html body[data-role] .admin-doc-choice-v3983 input[type="radio"] {
  accent-color: #FF6B00 !important;
}

html body .admin-doc-popup-actions-v3983 button[type="submit"],
html body[data-role] .admin-doc-popup-actions-v3983 button[type="submit"] {
  background: linear-gradient(135deg, #FF6B00 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 3px 10px rgba(255, 107, 0, 0.35) !important;
  font-weight: 800 !important;
}

/* Dispatch status badges (sent, pending, failed) */
html body .admin-doc-status-v3983.sent,
html body[data-role] .admin-doc-status-v3983.sent {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
}

html body .admin-doc-status-v3983.pending-provider,
html body .admin-doc-status-v3983.queued,
html body[data-role] .admin-doc-status-v3983.pending-provider,
html body[data-role] .admin-doc-status-v3983.queued {
  background: #ffedd5 !important;
  color: #9a3412 !important;
  border: 1px solid #fdba74 !important;
}

html body .admin-doc-status-v3983.failed,
html body .admin-doc-status-v3983.missing-contact,
html body[data-role] .admin-doc-status-v3983.failed,
html body[data-role] .admin-doc-status-v3983.missing-contact {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fca5a5 !important;
}

/* ==========================================================================
   STORE OWNER SETTINGS SLIDER MOBILE FIT & PILL BUTTON SIZING
   ========================================================================== */
html body .store-settings-actions,
html body[data-role] .store-settings-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 4px 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: auto !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  transform: translateZ(0) !important;
  will-change: scroll-position !important;
  scrollbar-width: thin !important;
  cursor: grab !important;
}

html body .store-settings-actions .store-setting-btn,
html body[data-role] .store-settings-actions .store-setting-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* Mobile View: Clean compact pills without oversized subtitle boxes */
@media (max-width: 768px) {
  html body .store-settings-actions .store-setting-btn,
  html body[data-role] .store-settings-actions .store-setting-btn {
    min-height: 38px !important;
    height: 38px !important;
    padding: 6px 12px !important;
  }
  html body .store-settings-actions .store-setting-btn small,
  html body[data-role] .store-settings-actions .store-setting-btn small {
    display: none !important;
  }
  html body .store-settings-actions .store-setting-btn strong,
  html body[data-role] .store-settings-actions .store-setting-btn strong {
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
  }
  html body .store-settings-actions .store-setting-btn .badge,
  html body[data-role] .store-settings-actions .store-setting-btn .badge {
    display: inline-flex !important;
    font-size: 9.5px !important;
    padding: 2px 6px !important;
    margin-left: 5px !important;
    border-radius: 999px !important;
  }
}

/* Store Owner Email & SMS Form Controls */
html body :is(#storeEmailApiForm, #storeSmsApiForm, .store-api-form) label {
  color: #7c2d12 !important;
  font-weight: 700 !important;
}
html body :is(#storeEmailApiForm, #storeSmsApiForm, .store-api-form) :is(input, select, textarea) {
  border: 1.5px solid #fed7aa !important;
  background: #ffffff !important;
  color: #1a0a00 !important;
  border-radius: 10px !important;
}
html body :is(#storeEmailApiForm, #storeSmsApiForm, .store-api-form) :is(input, select, textarea):focus {
  border-color: #FF6B00 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2) !important;
}
html body :is(#storeEmailApiForm, #storeSmsApiForm, .store-api-form) input[type="checkbox"] {
  accent-color: #FF6B00 !important;
  width: 16px !important;
  height: 16px !important;
}

/* ==========================================================================
   v3.9.462: KVK Saffron Theme Overrides for Communication Providers (Email & SMS)
   ========================================================================== */
html body .comm-wrap {
  display: grid !important;
  gap: 16px !important;
  margin-top: 14px !important;
}

html body .comm-card {
  padding: 18px 20px !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.06) !important;
}

html body .comm-card h2 {
  color: #431407 !important;
  font-weight: 850 !important;
  margin: 0 0 4px !important;
}

html body .comm-card p.subtle {
  color: #7c2d12 !important;
  opacity: 0.9 !important;
}

html body .comm-fields {
  padding: 14px 16px !important;
  border: 1.5px dashed #f97316 !important;
  border-radius: 14px !important;
  background: #FFF8E7 !important;
}

html body .comm-fields label,
html body .comm-card label {
  color: #7c2d12 !important;
  font-weight: 750 !important;
}

html body .comm-fields input,
html body .comm-card input,
html body .comm-card select {
  border: 1.5px solid #fed7aa !important;
  background: #ffffff !important;
  color: #7c2d12 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

html body .comm-fields input:focus,
html body .comm-card input:focus,
html body .comm-card select:focus {
  border-color: #FF6B00 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.22) !important;
}

html body .comm-ok {
  display: block !important;
  color: #15803d !important;
  font-weight: 750 !important;
}

html body .comm-services label,
html body .comm-row {
  padding: 10px 14px !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #7c2d12 !important;
}

html body .comm-services label input[type="checkbox"] {
  accent-color: #FF6B00 !important;
  width: 16px !important;
  height: 16px !important;
}

html body .comm-row .badge.blue,
html body .card-title .badge.blue,
html body .badge.blue {
  background: #ffedd5 !important;
  color: #c2410c !important;
  border: 1px solid #fed7aa !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
}

html body .comm-row button.btn.small.blue {
  background: linear-gradient(135deg, #FF6B00 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.3) !important;
}

html body .comm-card button[type="submit"] {
  background: linear-gradient(135deg, #FF6B00 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 10px rgba(255, 107, 0, 0.35) !important;
}

/* ==========================================================================
   Store Settings Action Buttons: Ultra-Smooth 120fps Horizontal Slider
   ========================================================================== */
html body .store-settings-actions,
html body[data-role] .store-settings-actions,
html body[data-role="owner"] .store-settings-actions,
html body[data-role="ownerapp"] .store-settings-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 4px 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: #fdba74 #fff7ed !important;
}

html body .store-settings-actions::-webkit-scrollbar,
html body[data-role] .store-settings-actions::-webkit-scrollbar {
  height: 5px !important;
  display: block !important;
}

html body .store-settings-actions::-webkit-scrollbar-thumb,
html body[data-role] .store-settings-actions::-webkit-scrollbar-thumb {
  background: #fdba74 !important;
  border-radius: 999px !important;
}

html body .store-settings-actions::-webkit-scrollbar-track,
html body[data-role] .store-settings-actions::-webkit-scrollbar-track {
  background: #fff7ed !important;
  border-radius: 999px !important;
}

html body .store-settings-actions .store-setting-btn,
html body[data-role] .store-settings-actions .store-setting-btn {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  max-width: none !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  scroll-snap-align: none !important;
  white-space: nowrap !important;
}

@media (max-width: 600px) {
  html body .store-settings-actions .store-setting-btn,
  html body[data-role] .store-settings-actions .store-setting-btn {
    min-height: 38px !important;
    height: 38px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
  html body .store-settings-actions .store-setting-btn small,
  html body[data-role] .store-settings-actions .store-setting-btn small {
    display: none !important;
  }
}