/* ═══════════════════════════════════════════════════════════════
   IMS Customer App — Design System
   Premium dark theme with vibrant blue accents
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ─── CSS Variables ─────────────────────────────────────── */
:root {
  --bg-primary: #0a0e27;
  --bg-secondary: #111638;
  --bg-card: #161b40;
  --bg-card-hover: #1c2252;
  --bg-elevated: #1a1f4a;
  --bg-input: #1a1f4a;
  --bg-overlay: rgba(10, 14, 39, 0.95);
  
  --accent: #2979ff;
  --accent-hover: #448aff;
  --accent-glow: rgba(41, 121, 255, 0.25);
  --accent-soft: rgba(41, 121, 255, 0.1);
  
  --success: #00e676;
  --warning: #ffc107;
  --danger: #ff5252;
  
  --text-primary: #e8eaf6;
  --text-secondary: #9fa8da;
  --text-muted: #5c6bc0;
  --text-on-accent: #ffffff;
  
  --border: rgba(255, 255, 255, 0.06);
  --border-accent: rgba(41, 121, 255, 0.3);
  
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-float: 0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px var(--accent-glow);
  
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-theme="light"] {
  --bg-primary: #e8eef7;
  --bg-secondary: rgba(255, 255, 255, 0.96);
  --bg-card: #ffffff;
  --bg-card-hover: #f4f8ff;
  --bg-elevated: #f3f7fd;
  --bg-input: #f7faff;
  --bg-overlay: rgba(232, 238, 247, 0.96);

  --accent: #1565d8;
  --accent-hover: #0d47a1;
  --accent-glow: rgba(21, 101, 216, 0.18);
  --accent-soft: rgba(21, 101, 216, 0.1);

  --success: #008f5a;
  --warning: #a66b00;
  --danger: #d8344a;

  --text-primary: #15213a;
  --text-secondary: #50617f;
  --text-muted: #7c8aa6;
  --text-on-accent: #ffffff;

  --border: rgba(21, 101, 216, 0.2);
  --border-accent: rgba(21, 101, 216, 0.42);

  --shadow-card: 0 8px 28px rgba(23, 43, 77, 0.12);
  --shadow-float: 0 16px 44px rgba(23, 43, 77, 0.16);
  --shadow-glow: 0 0 18px var(--accent-glow);
}

/* ─── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

html[dir="rtl"] body {
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* ─── App Shell ─────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.view {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  animation: fadeIn 0.3s ease;
}
.view.active {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ─── Header ────────────────────────────────────────────── */
.app-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
}

.header-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-header h1 {
  font-size: 1.1rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent), #7c4dff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-track {
  position: relative;
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-y;
  background: var(--bg-primary);
}

.page-track.active {
  display: flex;
}

.page-track .nav-page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden;
  animation: none;
  pointer-events: none;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 220ms ease, visibility 220ms ease;
}

.page-track .nav-page.active {
  pointer-events: auto;
  visibility: visible;
}

.page-track.no-page-transition .nav-page {
  transition: none;
}

.page-track > .view:not(.nav-page).active {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  flex: none;
  overflow: hidden;
  z-index: 2;
  background: var(--bg-primary);
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.shop-switch-btn {
  max-width: 190px;
  height: 40px;
  padding: 0 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: var(--transition);
}

.shop-switch-btn:hover,
.shop-switch-btn:active {
  border-color: var(--accent);
  color: var(--accent);
}

.language-select {
  min-width: 64px;
  height: 40px;
  padding: 0 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

.language-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.language-select-wide {
  width: 100%;
  margin-top: 8px;
}

.profile-label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 8px;
}

.header-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  transition: var(--transition);
}
.header-btn:hover, .header-btn:active {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}

.app-icon {
  --icon-size: 1.35rem;
  --icon-mask: none;
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
}

.icon-products {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}

.icon-notifications {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
}

.icon-orders {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5h6'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M9 19h6'/%3E%3Cpath d='M5 5h.01'/%3E%3Cpath d='M5 12h.01'/%3E%3Cpath d='M5 19h.01'/%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3C/svg%3E");
}

.icon-profile {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.icon-account {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
}

.icon-cart {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h8.77a2 2 0 0 0 1.95-1.57L21 7H5.12'/%3E%3C/svg%3E");
}

.icon-settings {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.74v-.51a2 2 0 0 1 1-1.72l.15-.1a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.icon-search {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

.icon-filter {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3H2l8 9.46V19l4 2v-8.54L22 3Z'/%3E%3C/svg%3E");
}

.icon-theme {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E");
}

:root[data-theme="light"] .icon-theme {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
}

.icon-trend {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E");
}

.icon-save {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E");
}

.icon-send {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4Z'/%3E%3C/svg%3E");
}

.cart-badge {
  position: relative;
}
.cart-badge .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 1.5s infinite;
}

/* ─── Bottom Navigation ─────────────────────────────────── */
.bottom-nav {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 8px 10px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
  scrollbar-width: none;
  scroll-snap-type: inline proximity;
  -webkit-overflow-scrolling: touch;
}

.bottom-nav::-webkit-scrollbar {
  display: none;
}

.nav-item {
  flex: 0 0 auto;
  min-width: max-content;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  scroll-snap-align: center;
  white-space: nowrap;
}
.nav-item .app-icon { --icon-size: 1.45rem; }
.nav-item.active {
  color: var(--accent);
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--border-accent);
}
.nav-item.active .app-icon {
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

/* ─── Auth Views ────────────────────────────────────────── */
.auth-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 24px;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}

.auth-logo {
  text-align: center;
  margin-bottom: 40px;
}
.auth-logo .logo-icon {
  font-size: 3.5rem;
  margin: 0;
  display: block;
}
.auth-logo h2 {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), #7c4dff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.auth-logo p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-top: 8px;
}

.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.form-group input {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: inherit;
  transition: var(--transition);
  outline: none;
}
.form-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-group input::placeholder {
  color: var(--text-muted);
}

.btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), #448aff);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover, .btn-primary:active {
  transform: translateY(-1px);
  box-shadow: 0 0 30px var(--accent-glow);
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border-accent);
}
.btn-compact {
  width: auto;
  min-width: 96px;
  padding: 10px 14px;
  font-size: 0.8rem;
}
.btn-danger {
  background: var(--danger);
  color: white;
}

.auth-switch {
  text-align: center;
  margin-top: 24px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.auth-switch a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.error-msg {
  background: rgba(255, 82, 82, 0.1);
  border: 1px solid rgba(255, 82, 82, 0.3);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--danger);
  font-size: 0.85rem;
  margin-bottom: 16px;
  display: none;
}
.error-msg.visible { display: block; }

#view-access-code,
#view-login,
#view-register,
#view-reset-password {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ─── Catalog / Products ────────────────────────────────── */
.catalog-content {
  flex: 1;
  min-height: 0;
  padding: 16px;
  padding-bottom: calc(var(--bottom-nav-height, 64px) + 16px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#view-catalog {
  position: relative;
  overflow: hidden;
}

.catalog-toolbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(94px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  z-index: 20;
  margin-bottom: 22px;
}

.category-filter-wrap {
  position: relative;
  min-width: 0;
}

.category-filter-button {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg-card);
  color: var(--accent);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
}

html[dir="rtl"] .category-filter-button,
html[dir="rtl"] .category-menu {
  direction: rtl;
}

.category-filter-button .app-icon {
  --icon-size: 1rem;
}

.category-filter-chevron {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--text-muted);
  transform: rotate(45deg);
}

.category-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  min-width: min(230px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(52vh, 360px);
  overflow-y: auto;
  display: grid;
  gap: 6px;
  padding: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.category-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.search-bar {
  position: relative;
}
.search-bar input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: var(--transition);
}
.search-bar input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

html[dir="rtl"] .search-bar input {
  padding: 12px 44px 12px 16px;
  direction: rtl;
  text-align: right;
}

.search-bar .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  --icon-size: 1.1rem;
}

html[dir="rtl"] .search-bar .search-icon {
  left: auto;
  right: 16px;
}

.chip {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  text-align: start;
}
.chip:hover, .chip.active {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}
.chip .count {
  opacity: 0.7;
  margin-left: 4px;
  font-size: 0.7rem;
}

/* Product list */
.product-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  transition: var(--transition);
  position: relative;
  display: grid;
  grid-template-columns: 44px 38px minmax(0, 1fr) 84px;
  align-items: center;
  gap: 12px;
  animation: slideUp 0.3s ease backwards;
  min-height: 120px;
  direction: ltr;
}

/* Catalog product row layout (no plus button, wider stepper shifted left) */
.product-row:not(.cart-item) {
  grid-template-columns: 56px minmax(0, 1fr) 84px;
}
.product-row:not(.cart-item) .add-to-cart-btn {
  display: none !important;
}
.product-row:not(.cart-item) .product-quantity-stepper {
  width: 100% !important;
}
.product-row:not(.cart-item) .product-add-quantity {
  width: 100% !important;
}

.product-row:hover, .product-row:active {
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}
.product-row-unavailable {
  opacity: 0.62;
}
.product-row-unavailable:hover,
.product-row-unavailable:active {
  border-color: var(--border);
  box-shadow: none;
}
.product-row-name {
  grid-column: 1 / -1;
  min-width: 0;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
  text-align: center;
}
.product-thumb {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-muted);
}
.product-thumb-button {
  padding: 0;
  cursor: pointer;
}
.product-thumb-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-thumb-icon {
  --icon-size: 1.55rem;
}
.product-row-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
  direction: ltr;
}
html[dir="rtl"] .product-row-copy {
  direction: rtl;
}
.product-price {
  color: var(--accent);
  font-size: 1.04rem;
  font-weight: 850;
  text-align: start;
}
.product-row-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.35;
}
.product-row-meta span {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.product-row-meta-icon {
  --icon-size: 1rem;
  color: var(--text-muted);
}
.product-row-actions {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0;
}

.product-breakdown-total {
  width: 56px;
  min-height: 56px;
  display: grid;
  place-content: center;
  gap: 2px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
}

.product-breakdown-total small {
  color: var(--text-muted);
  font-size: 0.62rem;
}

.product-breakdown-total strong {
  color: var(--accent);
  font-size: 1rem;
}

.product-breakdown-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  direction: inherit;
}

.product-breakdown-heading {
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: start;
}

.product-breakdown-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
}

.product-breakdown-field {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 0.7rem;
  text-align: center;
}

.product-breakdown-field input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 800;
  text-align: center;
  outline: none;
}

.product-breakdown-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(48, 127, 255, 0.15);
}

.product-breakdown-field .product-breakdown-stepper {
  justify-self: center;
}

.product-breakdown-field .product-add-quantity {
  width: 38px;
  height: 34px;
}

.product-breakdown-field span {
  overflow-wrap: anywhere;
}

.line-quantity-breakdown {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.line-quantity-breakdown > span {
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.72rem;
}
.product-add-quantity {
  width: 38px;
  height: 34px;
  border-radius: 0;
  border: 0;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  outline: none;
}

.product-add-quantity:not(.has-quantity) {
  color: var(--text-muted);
}

.product-add-quantity.has-quantity {
  color: var(--accent);
}

.product-add-quantity:focus {
  box-shadow: inset 0 0 0 2px rgba(48, 127, 255, 0.18);
}

.product-add-quantity:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.product-quantity-stepper {
  width: 38px;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
}

.product-quantity-step {
  width: 100%;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.product-quantity-step:active {
  background: var(--accent-soft);
  color: var(--accent);
}

.product-quantity-step:disabled {
  color: rgba(117, 132, 158, 0.45);
  cursor: default;
}

.product-quantity-step:disabled:active {
  background: transparent;
}

.product-step-caret {
  width: 7px;
  height: 7px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
}

.product-step-caret-up {
  transform: translateY(2px) rotate(225deg);
}

.product-step-caret-down {
  transform: translateY(-2px) rotate(45deg);
}

.availability-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.availability-badge.available {
  background: rgba(0, 230, 118, 0.12);
  color: var(--success);
}
.availability-badge.low {
  background: rgba(255, 193, 7, 0.12);
  color: var(--warning);
}
.availability-badge.out {
  background: rgba(255, 82, 82, 0.12);
  color: var(--danger);
}

.availability-badge.backorder {
  background: rgba(255, 152, 0, 0.14);
  color: var(--warning);
  border: 1px solid rgba(255, 152, 0, 0.28);
}

.cart-backorder-note,
.cart-backorder-policy-note,
.order-backorder-note {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border: 1px solid rgba(255, 152, 0, 0.28);
  border-radius: var(--radius-sm);
  background: rgba(255, 152, 0, 0.08);
  color: var(--warning);
  font-size: 0.74rem;
  line-height: 1.4;
}

.cart-backorder-policy-note {
  margin-bottom: 10px;
}

.order-backorder-note {
  margin-top: 10px;
}

.add-to-cart-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  box-shadow: var(--shadow-glow);
  flex: 0 0 auto;
}
.add-to-cart-btn:hover {
  transform: scale(1.15);
}

/* ─── Cart Page ───────────────────────────────────────────────── */
.cart-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  padding-bottom: calc(var(--bottom-nav-height, 64px) + 16px);
  overflow: hidden;
}

.cart-page-count strong {
  font-size: 0.84rem;
  font-weight: 900;
}

.cart-page-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-inline-end: 2px;
}

.cart-page-body .cart-list {
  overflow-y: visible;
}

.cart-page-body .cart-extra-requests {
  padding: 0;
}

/* Flip card: front = actions, back = order total + balances */
.cart-action-card {
  position: relative;
  perspective: 1200px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.cart-action-flipper {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 380ms cubic-bezier(0.22, 0.9, 0.3, 1);
  min-height: 142px;
}

.cart-action-card.is-flipped .cart-action-flipper {
  transform: rotateY(180deg);
}

.cart-action-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.cart-action-front {
  transform: rotateY(0deg);
}

.cart-action-back {
  transform: rotateY(180deg);
}

.cart-actions-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cart-actions-row .cart-submit-button {
  grid-column: 1 / -1;
}

.cart-actions-row .cart-submit-button,
.cart-actions-row .cart-save-only-button,
.cart-actions-row .cart-send-revised-button {
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
}

.cart-action-back .cart-expanded-total-card {
  min-height: 60px;
  flex: 1;
}

.cart-action-back .cart-expanded-total-card strong {
  font-size: 1.35rem;
}

.cart-action-back-expected {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 14px;
  border: 1px solid rgba(41, 121, 255, 0.22);
  border-radius: 12px;
  background: var(--accent-soft);
  font-size: 0.76rem;
  font-weight: 750;
}

.cart-action-back-expected strong {
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--accent);
  white-space: nowrap;
}

.cart-expanded-badge {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-secondary);
  background: var(--bg-card);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.cart-expanded-badge .app-icon {
  --icon-size: 1rem;
  color: var(--accent);
}

.cart-expanded-summary {
  display: grid;
  gap: 10px;
  padding: 0 0 4px;
}

.cart-expanded-total-card {
  min-height: 76px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(48, 127, 255, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(48, 127, 255, 0.08), rgba(255, 255, 255, 0.72));
}

.cart-expanded-total-card span {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 750;
}

.cart-expanded-total-card strong {
  color: var(--accent);
  font-size: 1.55rem;
  font-weight: 950;
  line-height: 1;
}


.cart-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline-end: 2px;
}

.cart-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.cart-empty .empty-icon { --icon-size: 3rem; margin: 0 auto 16px; display: block; }
.cart-empty p { font-size: 0.9rem; }

.cart-open-draft-panel {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  padding: 42px 20px;
  color: var(--text-secondary);
}

.cart-open-draft-panel .empty-icon {
  --icon-size: 3rem;
  color: var(--primary);
}

.cart-open-draft-panel.locked-by-shop {
  background: rgba(255, 193, 7, 0.06);
  border: 1px solid rgba(255, 193, 7, 0.18);
  border-radius: var(--radius-md);
}

.cart-open-draft-panel.locked-by-shop .empty-icon {
  color: var(--warning);
}

.cart-open-draft-panel strong {
  color: var(--text-primary);
  font-size: 1rem;
}

.cart-open-draft-panel p {
  max-width: 320px;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.cart-open-draft-panel .btn {
  width: min(100%, 280px);
}

/* Cart items inherit .product-row grid layout */
.cart-item {
  margin-bottom: 10px;
}


.cart-remove-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 82, 82, 0.1);
  border: 1px solid rgba(255, 82, 82, 0.25);
  color: var(--danger);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  place-self: center;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.cart-remove-btn:hover {
  background: rgba(255, 82, 82, 0.18);
}
.cart-remove-btn.removing {
  transform: scale(1.2);
  background: rgba(255, 82, 82, 0.25);
  border-color: var(--danger);
}
.cart-remove-btn.removed {
  transform: scale(0);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Entire card feedback during hold-to-delete */
.cart-item-delete-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: var(--danger);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  z-index: 10;
  transition: width 1s linear;
}
.cart-item.holding-delete .cart-item-delete-bar {
  width: 100%;
}
.cart-item.holding-delete {
  animation: cardShake 0.3s infinite linear;
  border-color: rgba(255, 82, 82, 0.4) !important;
  background: rgba(255, 82, 82, 0.02) !important;
  box-shadow: 0 0 8px rgba(255, 82, 82, 0.15) !important;
}

@keyframes cardShake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  15% { transform: translate(-1px, -1.5px) rotate(-0.3deg); }
  30% { transform: translate(-2px, 0px) rotate(0.3deg); }
  45% { transform: translate(0px, 1.5px) rotate(0deg); }
  60% { transform: translate(1.5px, -1px) rotate(0.3deg); }
  75% { transform: translate(-1px, 1px) rotate(-0.3deg); }
  90% { transform: translate(-2px, 1px) rotate(0deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}


.cart-footer {
  position: static;
  display: grid;
  gap: 10px;
  padding-top: 10px;
  background: var(--bg-secondary);
  border-top: 0;
}

.cart-extra-requests {
  display: grid;
  gap: 8px;
  padding: 0 14px;
}

.cart-extra-requests:empty {
  display: none;
}

.cart-extra-request-add {
  min-height: 40px;
  border: 1px solid var(--border-accent);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--accent);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.cart-extra-request-add.hidden {
  display: none;
}

.cart-extra-request-add-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
}

.cart-extra-request-card {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 74px;
  padding: 10px;
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--primary);
  border-radius: 8px;
  background: var(--surface);
}

.detail-extra-title {
  margin: 18px 0 10px;
  color: var(--text-secondary);
  font-size: .85rem;
  font-weight: 700;
}

.detail-extra-line {
  border-inline-start: 3px solid var(--primary);
}

.cart-extra-request-thumb {
  width: 58px;
  height: 58px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--bg-input);
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.cart-extra-request-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-extra-request-copy {
  min-width: 0;
}

.cart-extra-request-copy strong,
.cart-extra-request-copy span,
.cart-extra-request-copy small {
  display: block;
}

.cart-extra-request-copy strong {
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.cart-extra-request-copy span {
  margin-top: 3px;
  color: var(--primary);
  font-size: .76rem;
  font-weight: 700;
}

.cart-extra-request-copy small {
  margin-top: 3px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.cart-extra-request-remove {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 1.15rem;
}

.extra-request-modal {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  align-items: end;
  background: rgba(15, 23, 42, .52);
  padding: 12px;
}

.extra-request-modal.hidden {
  display: none;
}

.install-prompt {
  position: fixed;
  inset: 0;
  z-index: 2800;
  display: grid;
  align-items: end;
  padding: 12px;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(3px);
}

.install-prompt.hidden,
.install-prompt-native.hidden,
.install-prompt-instructions.hidden {
  display: none;
}

.install-prompt-dialog {
  position: relative;
  width: min(100%, 430px);
  margin: 0 auto;
  padding: 24px 20px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-float);
  text-align: center;
  animation: slideUp .24s ease;
}

.install-prompt-close {
  position: absolute;
  inset-inline-end: 14px;
  top: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 1.35rem;
}

.install-prompt-brand {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 8px 24px var(--accent-glow);
}

.install-prompt-brand img {
  width: 100%;
  height: 100%;
  display: block;
}

.install-prompt-dialog h2 {
  padding-inline: 30px;
  font-size: 1.15rem;
  line-height: 1.35;
}

.install-prompt-subtitle {
  margin: 8px auto 18px;
  color: var(--text-secondary);
  font-size: .86rem;
  line-height: 1.55;
}

.install-prompt-native .btn,
.install-prompt-later {
  width: 100%;
}

.install-prompt-instructions {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--text-secondary);
  text-align: start;
}

.install-prompt-instructions strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.install-prompt-instructions ol {
  padding-inline-start: 22px;
}

.install-prompt-instructions li + li {
  margin-top: 5px;
}

.install-prompt-instructions p,
.install-prompt-instructions li {
  font-size: .82rem;
  line-height: 1.5;
}

.install-prompt-later {
  margin-top: 10px;
}

@media (min-width: 700px) {
  .install-prompt {
    align-items: center;
  }
}

.extra-request-dialog {
  width: min(100%, 520px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  margin: 0 auto;
  padding: 18px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .24);
}

.extra-request-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.extra-request-dialog-header h2 {
  font-size: 1.05rem;
}

.extra-request-dialog-header p {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.45;
}

.extra-request-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 1.35rem;
}

.extra-request-field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--text-secondary);
  font-size: .8rem;
  font-weight: 700;
}

.extra-request-field input,
.extra-request-field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-input);
  color: var(--text-primary);
  padding: 11px 12px;
  font: inherit;
  font-weight: 500;
}

.extra-request-photo-button {
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-input);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}

.extra-request-photo-preview {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.extra-request-photo-preview.hidden {
  display: none;
}

.extra-request-photo-preview img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--border);
}

.extra-request-photo-preview button {
  border: 0;
  background: transparent;
  color: var(--danger);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
}

.extra-request-save {
  width: 100%;
  margin-top: 14px;
}

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

.cart-notes-panel {
  display: none !important;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
}

.cart-notes-label {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 850;
}

.cart-notes-label .app-icon {
  --icon-size: 1rem;
  color: var(--text-secondary);
}

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 12px;
  padding: max(20px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom));
  background: rgba(5, 12, 10, 0.94);
}

.image-viewer.hidden {
  display: none;
}

.image-viewer img {
  max-width: 100%;
  max-height: calc(100dvh - 116px);
  object-fit: contain;
  border-radius: var(--radius-md);
}

.image-viewer-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  font-size: 26px;
  line-height: 1;
}

.image-viewer-caption {
  max-width: min(420px, 100%);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
}

.receipt-viewer {
  position: fixed;
  inset: 0;
  z-index: 2700;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #20242c;
  color: #fff;
}

.receipt-viewer.hidden {
  display: none;
}

body.receipt-viewer-open {
  overflow: hidden;
}

.receipt-viewer-header,
.receipt-viewer-toolbar {
  display: flex;
  align-items: center;
  padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
  background: #111827;
}

.receipt-viewer-header {
  min-height: 58px;
  padding-top: env(safe-area-inset-top);
  gap: 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12);
}

.receipt-viewer-header strong {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .95rem;
}

.receipt-viewer-icon-button,
.receipt-viewer-toolbar button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 7px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit;
  font-size: 1.45rem;
}

.receipt-viewer-download {
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  padding: 9px 12px;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}

.receipt-viewer-content {
  overflow: auto;
  overscroll-behavior: contain;
  padding: 14px;
}

.receipt-viewer-status {
  min-height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .8);
  font-size: .9rem;
  text-align: center;
}

.receipt-viewer-status.hidden {
  display: none;
}

.receipt-viewer-pages {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.receipt-viewer-page {
  display: block;
  max-width: none;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .38);
}

.receipt-viewer-toolbar {
  min-height: 54px;
  justify-content: center;
  gap: 14px;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .12);
}

.receipt-viewer-toolbar output {
  min-width: 54px;
  font-size: .82rem;
  font-weight: 800;
  text-align: center;
}

.receipt-viewer-toolbar button:disabled {
  opacity: .4;
}

.observation-input {
  width: 100%;
  padding: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
  resize: none;
  outline: none;
  margin-bottom: 12px;
  transition: var(--transition);
}
.observation-input:focus {
  border-color: var(--accent);
}

.cart-submit-button {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  font-size: 0.98rem;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(18, 107, 219, 0.24);
}

.cart-revision-actions {
  display: flex;
  gap: 10px;
  margin: 0;
  grid-column: 1 / -1;
  flex: none;
}

.cart-revision-actions.hidden {
  display: none;
}

.cart-revision-actions .cart-send-revised-button,
.cart-revision-actions .cart-save-only-button {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

html[dir="rtl"] .cart-revision-actions {
  direction: rtl;
}

/* ─── Orders ────────────────────────────────────────────── */
.orders-content {
  flex: 1;
  min-height: 0;
  padding: 16px;
  padding-bottom: calc(var(--bottom-nav-height, 64px) + 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.orders-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.orders-toolbar h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.orders-toolbar p,
.orders-last-updated {
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.orders-last-updated {
  margin-bottom: 14px;
}

.order-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: var(--transition);
  animation: slideUp 0.3s ease backwards;
}
.order-card:hover { border-color: var(--accent); }

.order-card .order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.order-card .order-id {
  font-weight: 600;
  font-size: 0.9rem;
}
.order-card .order-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.order-card .order-meta {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.order-state-note {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-secondary);
  font-size: 0.76rem;
  line-height: 1.4;
}

.order-total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.order-total strong {
  color: var(--success);
  font-size: 0.85rem;
}

.state-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}
.state-badge.pending {
  background: rgba(255, 193, 7, 0.12);
  color: var(--warning);
}
.state-badge.synced-to-local-draft {
  background: rgba(41, 121, 255, 0.12);
  color: var(--accent);
}
.state-badge.rejected-by-local,
.state-badge.local-draft-locked,
.state-badge.sync-error {
  background: rgba(255, 82, 82, 0.12);
  color: var(--danger);
}
.state-badge.confirmed-by-local {
  background: rgba(0, 230, 118, 0.12);
  color: var(--success);
}
.state-badge.draft {
  background: rgba(41, 121, 255, 0.12);
  color: var(--accent);
}
.state-badge.confirmed {
  background: rgba(0, 230, 118, 0.12);
  color: var(--success);
}
.state-badge.cancelled {
  background: rgba(255, 82, 82, 0.12);
  color: var(--danger);
}
.state-badge.cancelled-by-customer {
  background: rgba(255, 82, 82, 0.12);
  color: var(--danger);
}

/* ─── Order Detail ──────────────────────────────────────── */
.detail-content {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: none;
  padding: 16px;
  padding-bottom: calc(var(--bottom-nav-height, 64px) + 16px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

#detail-body {
  width: 100%;
  min-width: 0;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.back-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: var(--transition);
}
.back-btn:hover { background: var(--accent); color: white; }

.order-detail-summary {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

.order-detail-summary > div {
  min-width: 0;
}

.order-detail-summary h3 {
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.order-detail-summary p {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-top: 5px;
  line-height: 1.45;
}

.order-detail-summary .state-badge {
  max-width: 124px;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}

.detail-total {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.detail-total strong {
  color: var(--success);
  font-size: 0.9rem;
  text-align: end;
  overflow-wrap: anywhere;
}

.detail-order-actions {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.detail-action-button {
  width: 100%;
}

.detail-order-cancel {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.detail-cancel-button {
  width: auto;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  background: transparent;
  color: var(--danger);
  font-size: 0.78rem;
  font-weight: 600;
}

.detail-cancel-button:hover,
.detail-cancel-button:focus-visible {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-color: var(--danger);
}

.detail-draft-lock-note {
  width: 100%;
  min-width: 0;
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.18);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  padding: 11px 14px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.detail-observation {
  width: 100%;
  min-width: 0;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  padding: 10px 14px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.detail-section-title {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.detail-lines {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 8px;
  margin: 0;
}

.detail-line {
  width: 100%;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name name"
    "qty qty"
    "conversion conversion"
    "price total";
  gap: 6px 12px;
  align-items: center;
}

.detail-line .line-name {
  grid-area: name;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.detail-line .line-qty { 
  grid-area: qty;
  font-size: 0.8rem; 
  color: var(--accent); 
  font-weight: 850;
  line-height: 1.2;
  text-align: start;
  white-space: nowrap;
}

.detail-line .line-conversion {
  grid-area: conversion;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.detail-line .line-reservation {
  grid-column: 1 / -1;
  font-size: 0.74rem;
  line-height: 1.35;
}

.detail-line .line-reservation.reserved {
  color: var(--success);
}

.detail-line .line-reservation.backordered {
  color: var(--warning);
}

.detail-line .line-price {
  grid-area: price;
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
}

.detail-line .line-total {
  grid-area: total;
  color: var(--success);
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.2;
  text-align: end;
  white-space: nowrap;
}

html[dir="rtl"] .detail-line {
  grid-template-areas:
    "name name"
    "qty qty"
    "conversion conversion"
    "total price";
}

html[dir="rtl"] .detail-line .line-name,
html[dir="rtl"] .detail-line .line-conversion {
  text-align: right;
}

html[dir="rtl"] .detail-line .line-qty {
  text-align: right;
}

html[dir="rtl"] .detail-line .line-total {
  text-align: left;
}

/* ─── Loading & Empty States ────────────────────────────── */
.loading-spinner {
  display: flex;
  justify-content: center;
  padding: 40px;
}
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state .empty-icon { --icon-size: 3rem; margin: 0 auto 16px; }
.inline-icon { --icon-size: 0.95rem; vertical-align: -0.15rem; }

/* ─── Toast Notification ────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-md);
  padding: 12px 20px;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: var(--shadow-float);
  z-index: 1000;
  opacity: 0;
  transition: var(--transition-slow);
  pointer-events: none;
}
.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.success { border-color: rgba(0, 230, 118, 0.5); }
.toast.error { border-color: rgba(255, 82, 82, 0.5); }

/* ─── Profile ───────────────────────────────────────────── */
.profile-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  margin-bottom: 20px;
}
.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #7c4dff);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 1.8rem;
}
.profile-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.profile-email {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.profile-section {
  margin-bottom: 20px;
}

.profile-section-title {
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
}

.shop-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.shop-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
}

.shop-list-item.active {
  border-color: var(--accent);
}

.shop-list-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.shop-list-main strong,
.shop-list-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-list-main strong {
  color: var(--text-primary);
  font-size: 0.9rem;
}

.shop-list-main span {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.shop-list-action {
  flex: 0 0 auto;
  min-width: 96px;
  height: 34px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--accent);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.shop-list-action:disabled {
  border-color: var(--border);
  color: var(--text-muted);
  cursor: default;
}

.settings-content {
  flex: 1;
  min-height: 0;
  padding: 24px 16px;
  padding-bottom: calc(var(--bottom-nav-height, 64px) + 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.settings-section {
  margin-bottom: 20px;
}

.settings-section-title {
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
}

.settings-card {
  display: grid;
  gap: 8px;
}

.settings-row,
.settings-field {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  color: var(--text-primary);
  font-family: inherit;
  text-align: start;
}

.settings-row-button {
  cursor: pointer;
  transition: var(--transition);
}

.settings-row-button:hover,
.settings-row-button:active {
  border-color: var(--accent);
}

.settings-row-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.settings-row-main strong,
.settings-field > span {
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 700;
}

.settings-row-main span {
  color: var(--text-muted);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-row-action {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
}

.settings-field {
  align-items: stretch;
  flex-direction: column;
  margin-bottom: 8px;
}

.settings-theme-button .app-icon {
  --icon-size: 1.35rem;
  color: var(--accent);
}

.account-content {
  flex: 1;
  min-height: 0;
  padding: 24px 16px;
  padding-bottom: calc(var(--bottom-nav-height, 64px) + 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.account-summary-card {
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 16px 0;
  min-height: 100px;
  padding: 18px 22px;
}

.account-summary-card.due {
  background: linear-gradient(135deg, rgba(255, 82, 82, 0.08), var(--bg-card));
  border-color: rgba(255, 82, 82, 0.45);
}
.account-summary-card.credit {
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.08), var(--bg-card));
  border-color: rgba(0, 230, 118, 0.45);
}
.account-summary-card.zero {
  background: linear-gradient(135deg, rgba(41, 121, 255, 0.08), var(--bg-card));
  border-color: rgba(41, 121, 255, 0.45);
}

.account-summary-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: end;
}

.account-summary-label {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
}

.account-summary-value {
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 3px;
}

.account-summary-card.due .account-summary-value { color: var(--danger); }
.account-summary-card.credit .account-summary-value { color: var(--success); }
.account-summary-card.zero .account-summary-value { color: var(--accent); }

.account-summary-name {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-summary-icon {
  --icon-size: 1.6rem;
  align-items: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 50%;
  color: var(--accent);
  display: inline-flex;
  flex: 0 0 52px;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.account-summary-card.due .account-summary-icon {
  background: rgba(255, 82, 82, 0.1);
  border-color: rgba(255, 82, 82, 0.18);
  color: var(--danger);
}
.account-summary-card.credit .account-summary-icon {
  background: rgba(0, 230, 118, 0.1);
  border-color: rgba(0, 230, 118, 0.18);
  color: var(--success);
}

.account-metrics {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-metric {
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
  min-width: 0;
  min-height: 92px;
  padding: 11px 8px;
  text-align: center;
}

.account-metric-icon {
  --icon-size: 1.1rem;
  align-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 50%;
  color: var(--accent);
  display: inline-flex;
  flex: 0 0 34px;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.account-metric-payments .account-metric-icon {
  background: rgba(0, 230, 118, 0.12);
  color: var(--success);
}

.account-metric-activity .account-metric-icon {
  background: rgba(179, 136, 255, 0.14);
  color: #b388ff;
}

.account-metric-copy {
  display: block;
  min-width: 0;
  width: 100%;
}

.account-metric-copy span {
  color: var(--text-muted);
  display: block;
  font-size: 0.72rem;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-metric-copy strong {
  color: var(--text-primary);
  display: block;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
  white-space: nowrap;
}

.account-section-title {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 22px 0 10px;
}

.account-filter-tabs {
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
  overflow: hidden;
}

.account-filter-tab {
  align-items: center;
  background: transparent;
  border: 0;
  border-inline-end: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 750;
  gap: 5px;
  justify-content: center;
  min-height: 42px;
  min-width: 0;
  padding: 7px 5px;
  transition: var(--transition);
  white-space: nowrap;
}

.account-filter-tab:last-child {
  border-inline-end: 0;
}

.account-filter-tab:hover,
.account-filter-tab.is-active {
  background: var(--accent);
  box-shadow: 0 8px 18px rgba(41, 121, 255, 0.22);
  color: var(--text-on-accent);
}

.account-filter-tab:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent-hover);
  outline: none;
  position: relative;
  z-index: 1;
}

.account-filter-tab-icon {
  --icon-size: 0.95rem;
}

.statement-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.statement-line {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-inline-start-width: 4px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.statement-type-sale { border-inline-start-color: var(--danger); }
.statement-type-receipt { border-inline-start-color: var(--success); }
.statement-type-payout { border-inline-start-color: #b388ff; }
.statement-type-cancellation { border-inline-start-color: var(--warning); }
.statement-type-initial-balance { border-inline-start-color: var(--accent); }

.statement-summary-row {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
  width: 100%;
}

.statement-summary-main {
  flex: 1 1 auto;
  min-width: 0;
}

.statement-description {
  align-items: center;
  color: var(--text-primary);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85rem;
  font-weight: 600;
  gap: 6px;
}

.statement-source-badge {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-style: normal;
  padding: 2px 7px;
}

.statement-source-badge.statement-type-sale {
  background: rgba(255, 82, 82, 0.1);
  border-color: rgba(255, 82, 82, 0.28);
  color: var(--danger);
}

.statement-source-badge.statement-type-receipt {
  background: rgba(0, 230, 118, 0.1);
  border-color: rgba(0, 230, 118, 0.28);
  color: var(--success);
}

.statement-source-badge.statement-type-payout {
  background: rgba(179, 136, 255, 0.12);
  border-color: rgba(179, 136, 255, 0.32);
  color: #b388ff;
}

.statement-date {
  color: var(--text-muted);
  font-size: 0.72rem;
  margin-top: 4px;
}

.statement-summary-side {
  align-items: flex-end;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 92px;
  text-align: end;
}

.statement-primary-amount {
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
}

.statement-running-balance {
  color: var(--text-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.statement-actions {
  align-items: stretch;
  display: grid;
  flex: 0 0 auto;
  gap: 6px;
  grid-template-columns: 1fr;
}

.statement-action {
  align-items: center;
  background: transparent;
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  color: var(--accent);
  cursor: default;
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 800;
  justify-content: center;
  min-height: 30px;
  padding: 6px 10px;
  white-space: nowrap;
}

.statement-action-details {
  cursor: pointer;
  font-family: inherit;
}

.statement-action-receipt {
  cursor: pointer;
}

.statement-action-receipt:disabled {
  cursor: progress;
  opacity: 0.7;
}

.statement-action-disabled {
  border-color: var(--border);
  color: var(--text-muted);
  opacity: 0.68;
}

.account-detail-balance-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
}

.account-detail-stat {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.account-detail-stat span {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.account-detail-stat strong {
  color: var(--text-primary);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.account-statement-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.account-statement-order-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
}

html[dir="rtl"] .account-statement-order-table {
  direction: rtl;
}

.account-statement-order-table th,
.account-statement-order-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  text-align: end;
}

.account-statement-order-table th {
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.64rem;
  font-weight: 850;
  line-height: 1.3;
}

.account-statement-order-table td {
  color: var(--text-primary);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.account-statement-order-table th:first-child,
.account-statement-order-table td:first-child {
  width: 31%;
  text-align: start;
}

.account-statement-order-table th:nth-child(2),
.account-statement-order-table th:nth-child(3),
.account-statement-order-table th:nth-child(4) {
  width: 10%;
}

.account-statement-order-table th:nth-child(5),
.account-statement-order-table th:nth-child(7) {
  width: 14%;
}

.account-statement-order-table th:nth-child(6) {
  width: 11%;
}

.account-statement-order-table tbody tr:last-child td {
  border-bottom: 0;
}

.account-statement-order-table tbody tr:nth-child(even) {
  background: var(--bg-input);
}

.account-statement-product-cell {
  min-width: 180px;
}

.account-statement-product-name {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  color: var(--text-primary);
  font-weight: 800;
}

.account-statement-order-table .line-quantity-breakdown {
  margin-top: 7px;
}

.account-statement-line-total {
  color: var(--success);
  font-weight: 850;
}

.amount-out { color: var(--danger); }
.amount-in { color: var(--success); }

/* ─── Responsive ────────────────────────────────────────── */
@media (min-width: 768px) {
  .auth-container { max-width: 400px; }
  .catalog-content, .cart-content, .orders-content, .detail-content, .account-content, .settings-content {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .catalog-content {
    padding: 16px 14px;
    padding-bottom: calc(var(--bottom-nav-height, 64px) + 16px);
  }

  .catalog-toolbar {
    grid-template-columns: 98px minmax(0, 1fr);
    gap: 10px;
  }

  .product-row {
    grid-template-columns: 40px 38px minmax(0, 1fr) 84px;
    gap: 10px;
    min-height: 112px;
  }

  .product-row:not(.cart-item) {
    grid-template-columns: 56px minmax(0, 1fr) 84px;
  }

  .product-thumb {
    width: 84px;
    height: 84px;
  }

  .cart-preview-metric small {
    font-size: 0.5rem;
  }

  .cart-preview-metric strong {
    font-size: 0.74rem;
  }

  .orders-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .orders-toolbar .btn-compact {
    width: 100%;
  }

  .account-summary-card {
    align-items: flex-start;
    gap: 12px;
    min-height: 92px;
    padding: 16px;
  }

  .account-summary-value {
    font-size: 1.65rem;
  }

  .account-summary-icon {
    --icon-size: 1.4rem;
    flex-basis: 46px;
    height: 46px;
    width: 46px;
  }

  .account-metrics {
    gap: 7px;
  }

  .account-metric {
    min-height: 84px;
    padding-inline: 4px;
  }

  .account-metric-icon {
    --icon-size: 1rem;
    flex-basis: 30px;
    height: 30px;
    width: 30px;
  }

  .account-metric-copy span {
    font-size: 0.63rem;
  }

  .account-metric-copy strong {
    font-size: 0.78rem;
  }

  .account-filter-tab {
    flex-direction: column;
    font-size: 0.66rem;
    gap: 3px;
    min-height: 46px;
    padding: 6px 3px;
  }

  .account-filter-tab-icon {
    --icon-size: 0.9rem;
  }

  .statement-summary-row {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .statement-summary-side {
    align-items: flex-end;
    min-width: 0;
  }

  .statement-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .statement-action {
    width: 100%;
  }

  .account-detail-balance-grid {
    grid-template-columns: 1fr;
  }

  body.account-statement-detail-open .detail-content {
    padding-inline: 12px;
  }

  .account-statement-order-table {
    min-width: 860px;
  }

  .account-statement-order-table th,
  .account-statement-order-table td {
    padding: 9px 8px;
  }

  .account-statement-product-cell {
    min-width: 220px;
  }
}

.app-version-badge {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  pointer-events: none;
}

:root[data-theme="light"] .app-version-badge {
  background: rgba(255, 255, 255, 0.9);
}

/* ─── Shop notifications tab ─────────────────────────────── */

.notifications-content {
  padding: 16px;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

.notif-center-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-center-row {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notif-center-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.notif-center-head strong {
  overflow-wrap: anywhere;
}

.notif-center-time {
  color: var(--text-muted, #8a93a6);
  font-size: 0.78rem;
  white-space: nowrap;
}

.notif-center-body {
  color: var(--text-secondary, #b6bdcf);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.notif-center-row .btn {
  align-self: flex-start;
}

.notif-empty {
  color: var(--text-muted, #8a93a6);
  text-align: center;
  padding: 24px 12px;
}

.notif-hint {
  color: var(--warning, #b87500);
  font-size: 0.85rem;
  margin: 8px 0 0;
}