/* ==========================================================================
   Nippax Logistics: Shared Panel System CSS (Cliente & Interno)
   ========================================================================== */

:root {
  --app-bg: #f8f8fa;
  --card-bg: #ffffff;
  --brand-blue: #0ea5e9;
  --brand-blue-bg: rgba(14, 165, 233, 0.08);
  --dark-pill: #111114;
}

/* ==========================================================================
   Client Panel Theme Refresh — scoped to painel-cliente.html only
   (painel-interno keeps the original shared tokens above until its own pass)
   ========================================================================== */
body.client-panel {
  --app-bg: #f4f6f8;
  --surface: #f8fafc;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;

  --radius-lg: 12px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --radius-full: 8px;

  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04);

  --client-primary: #2563eb;
  --client-primary-hover: #3b82f6;

  /* Standard symmetric vertical padding for card/section headers — same
     token used for top and bottom so they can never drift apart again. */
  --header-padding-y: 18px;
  --header-padding-x: 24px;
}

body.client-panel .btn-primary {
  background: var(--client-primary) !important;
  border-color: var(--client-primary) !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.15);
}

body.client-panel .btn-primary:hover {
  background: var(--client-primary-hover) !important;
  border-color: var(--client-primary-hover) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
}

body.client-panel .kpi-card:hover,
body.client-panel .panel-card:hover,
body.client-panel .fatura-outstanding-card:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* Home Welcome Hero */
.home-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 44px 40px 76px;
  color: #ffffff;
  background: linear-gradient(135deg, #2b6cb0 0%, #d53f8c 50%, #ed8936 100%);
}

.home-hero .shader-background-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #2b6cb0 0%, #d53f8c 50%, #ed8936 100%);
}

.home-hero .unicorn-canvas {
  position: absolute;
  top: auto !important;
  right: auto !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 130% !important;
  height: 200% !important;
  transform: translateX(-50%) !important;
  /* Had the same over-saturated/blown-out "HDR" look the marketing hero
     had, so this was dialed to fully neutral (1/1) to match. But unlike
     the hero (no mask on mobile), .home-hero-overlay's dark gradient
     always sits on top of this one for text legibility, and on top of
     neutral filtering that read as flat/washed out. Split the
     difference — some saturation back, well below the original 1.7. */
  filter: saturate(1.3) contrast(1.02) !important;
  pointer-events: none;
}

.home-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.32) 0%, rgba(15, 23, 42, 0.12) 60%, rgba(15, 23, 42, 0.04) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Red alert badge inside Welcome Hero banner for forced shipping warning */
.home-hero .badge-pill-status.status-danger {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(153, 27, 27, 0.08);
}

.home-hero-eyebrow,
.home-hero-title-row,
.home-hero-subtitle,
.home-hero-actions {
  position: relative;
  z-index: 2;
}

.home-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-top-color: rgba(255, 255, 255, 0.55);
  border-left-color: rgba(255, 255, 255, 0.45);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.home-hero-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.home-hero-title {
  font-family: var(--font-mori);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.home-hero-subtitle {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 10px;
  max-width: 520px;
  line-height: 1.5;
}

.home-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.home-hero-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-hero-btn-ghost {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-top-color: rgba(255, 255, 255, 0.55) !important;
  border-left-color: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease !important;
}

.home-hero-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  transform: scale(1.035);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.home-hero-btn-ghost:active {
  transform: scale(0.97);
}

.home-hero-btn-warning {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
}

/* KPI grid floats over the hero's bottom edge, like a summary strip */
.home-kpi-overlap {
  position: relative;
  z-index: 2;
  margin-top: -48px;
}

/* Meus Pedidos — card list (row-per-order, reference style) */
.pedido-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pedido-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.pedido-card:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  border-color: #cbd5e1;
}

.pedido-card-main {
  flex: 1;
  min-width: 0;
}

.pedido-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Keeps the type + status badges together as one unit — before, the row
   simply flex-wrapped whichever badge didn't fit onto its own line,
   which on mobile split the status pill away from the type badge. */
.pedido-card-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.pedido-card-id {
  font-size: 15px;
  font-weight: 500;
  color: var(--dark);
}

.pedido-card-loja {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-soft);
  margin-top: 4px;
}

.pedido-card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.pedido-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-faint);
}

.pedido-card-meta-item i {
  color: var(--text-faint);
}

.pedido-card-side {
  text-align: right;
  flex-shrink: 0;
}

.pedido-card-valor {
  font-size: 15px;
  font-weight: 500;
  color: var(--dark);
}

.pedido-card-valor-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-faint);
  margin-top: 2px;
}

.pedido-card-arrow {
  display: flex;
  align-items: center;
  color: var(--text-faint);
  flex-shrink: 0;
}

.pedido-card.is-skeleton {
  cursor: default;
}

.pedido-card-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-faint);
  font-size: 13px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* Placeholder cinza pra foto do item (Pedido-Detalhe) — fotos_pedido só
   se liga ao pedido, não a um item específico, então não dá pra saber
   com certeza qual foto é de qual item; mostra o placeholder sempre,
   em vez de arriscar mostrar a foto errada. */
.pedido-card-item-photo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
}

.pedido-card-item-photo svg {
  width: 18px;
  height: 18px;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  background-color: #ffffff;
  color: var(--text);
  font-family: var(--font-inter), sans-serif;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Views visibility */
.nippax-view {
  display: none;
  flex-direction: column;
  min-height: calc(100vh - 65px);
  background-color: var(--app-bg);
}

.nippax-view.is-active {
  display: flex;
}

/* Glassmorphic Navbar Header */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.app-header:not(.app-header-2tier) {
  height: 64px;
  display: flex;
  align-items: center;
}

.app-header-2tier {
  display: flex;
  flex-direction: column;
}

.app-header-inner {
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.app-header-inner .brand-group {
  justify-self: start;
}

.app-header-inner .app-nav-pills {
  justify-self: center;
}

.app-header-inner .header-actions-right {
  justify-self: end;
}

/* 2-Tier Operational Header (Painel Interno) */
.app-header-top {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-header-subnav {
  background: #fafafc;
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.app-header-subnav-inner {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 6px 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.app-header-subnav-inner::-webkit-scrollbar {
  display: none;
}

.nav-tab-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
}

.nav-tab-item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--dark);
}

.nav-tab-item.is-active {
  background: var(--dark);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.nav-tab-item.is-active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.brand-logo-img {
  height: 30px;
  width: auto;
}

.brand-name {
  font-family: var(--font-mori);
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.02em;
}

.brand-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

.user-account-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Central Nav Pill Menu */
.app-nav-pills {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #f4f4f5;
  padding: 4px;
  border-radius: 12px;
  border: none;
  position: relative;
  user-select: none;
}

.nav-pill-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  background: #ffffff !important;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}

.nav-pill-item {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #71717a;
  cursor: pointer;
  transition: color 0.2s ease;
  user-select: none;
}

.nav-pill-item:hover:not(.is-active) {
  color: #18181b;
}

.nav-pill-item.is-active {
  color: #355BE4 !important;
  font-weight: 700;
}

.nav-pill-item.is-active svg,
.nav-pill-item.is-active i {
  color: #355BE4 !important;
  stroke: #355BE4 !important;
}

/* Subtabs Bar (Secondary Navigation inside Dashboard Views) */
.subtabs-bar {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 2px;
  background: #e9ebee !important;
  padding: 4px !important;
  border-radius: 12px !important;
  position: relative;
  user-select: none;
  margin-bottom: 20px;
}

.subtab-indicator {
  position: absolute;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}

.subtab-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #71717a !important;
  cursor: pointer;
  transition: color 0.2s ease-in-out !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.subtab-btn * {
  pointer-events: none;
}

.subtab-btn:hover:not(.is-active) {
  color: #18181b !important;
}

.subtab-btn.is-active {
  color: #18181b !important;
  font-weight: 600 !important;
}

.subtab-btn.is-active svg,
.subtab-btn.is-active i {
  color: #18181b !important;
  stroke: #18181b !important;
}

.subtab-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  color: inherit;
  transition: color 0.2s ease;
}

.subtab-btn.is-active .subtab-badge {
  background: transparent;
  color: inherit;
}

/* Header Actions Right */
.header-actions-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-btn-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icon-btn-pill:hover {
  background: var(--surface);
  color: var(--dark);
  border-color: rgba(0, 0, 0, 0.12);
  transform: scale(1.035);
}

.icon-btn-pill:active {
  transform: scale(0.97);
}

.notification-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid #ffffff;
}

.badge-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-full);
  background: #ef4444;
  color: #ffffff;
  margin-left: 4px;
  line-height: 1;
}

.user-profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.2s ease;
}

.user-profile-chip:hover {
  background: var(--surface);
}

.avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FF3055;
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
}

.user-chip-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dark);
}

/* Main Dashboard Container */
.dashboard-container {
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 24px 64px;
  box-sizing: border-box;
}

/* Section Banner Top */
.view-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.view-banner-info {
  flex: 1;
}

.view-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.view-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.view-page-title {
  font-family: var(--font-mori);
  font-size: 28px;
  font-weight: 700;
  color: var(--dark);
  margin: 0;
  letter-spacing: -0.02em;
}

.store-detect-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  animation: fadeIn 0.2s ease;
}

/* ================= REDIRECIONAMENTO SIMPLES ENHANCEMENTS ================= */
.redir-split-container {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 900px) {
  .redir-split-container {
    grid-template-columns: 1fr;
  }
}

.redir-store-card {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: #ffffff !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.redir-store-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(20, 20, 26, 0.25) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05) !important;
}

.redir-live-summary-card {
  position: sticky;
  top: 90px;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
  margin: 0 !important;
  padding: 20px !important;
}

.badge-sky {
  background: rgba(14, 165, 233, 0.1);
  color: #0369a1;
  border: 1px solid transparent;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
}

.badge-success {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid transparent;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
}

.badge-pill-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid transparent;
  color: var(--text-soft);
  white-space: nowrap;
}

.badge-pill-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.badge-pill-status.status-active {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
  border-color: transparent;
}

.badge-pill-status.status-warning {
  background: rgba(249, 115, 22, 0.08);
  color: #d97706;
  border-color: transparent;
}

.badge-pill-status.status-danger {
  background: rgba(200, 30, 58, 0.08);
  color: var(--danger);
  border-color: transparent;
}

.badge-tipo-ps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(168, 85, 247, 0.08);
  color: #7e22ce;
  border: 1px solid transparent;
}

.badge-tipo-redirecionamento {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(14, 165, 233, 0.08);
  color: #0369a1;
  border: 1px solid transparent;
}

@media (max-width: 640px) {
  .view-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  
  #detalhe-subtitulo {
    display: flex;
    flex-wrap: wrap;
    column-gap: 4px;
    row-gap: 2px;
    white-space: normal;
    padding-right: 0;
    -webkit-mask-image: none;
    mask-image: none;
    overflow-x: visible;
    font-size: 12.5px;
    line-height: 1.5;
  }
  .detalhe-subtitle-sep {
    display: none;
  }
  
  .view-subtitle {
    font-size: 13px;
  }
}

.view-subtitle {
  font-size: 14px;
  color: var(--text-soft);
  margin-top: 4px;
}

.view-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* KPI Grid Cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

@media (max-width: 1100px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .kpi-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.kpi-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(20, 20, 26, 0.07);
}

.kpi-chip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.kpi-icon-chip {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-icon-chip.chip-blue {
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
}

.kpi-icon-chip.chip-purple {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
}

.kpi-icon-chip.chip-orange {
  background: rgba(249, 115, 22, 0.1);
  color: #f97316;
}

.kpi-icon-chip.chip-pink {
  background: rgba(236, 72, 153, 0.1);
  color: #ec4899;
}

.kpi-icon-chip.chip-green {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.kpi-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
}

.kpi-value {
  font-family: var(--font-mori);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dark);
  margin-top: 4px;
  line-height: 1.2;
}

#armazenamento-stat-prazos {
  font-size: 22px !important;
}

.kpi-subtext {
  font-size: 12.5px;
  color: var(--text-soft);
  margin-top: 6px;
}



.subtab-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  border: none !important;
}

/* Master Button System */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-inter);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  white-space: nowrap;
  line-height: 1.2;
}

.btn:hover {
  transform: scale(1.035);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: #111114 !important;
  color: #ffffff !important;
  border: 1px solid #111114 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
  background: #27272a !important;
  border-color: #27272a !important;
  box-shadow: 0 4px 12px rgba(17, 17, 20, 0.15);
}

.btn-secondary {
  background: #ffffff !important;
  color: #18181b !important;
  border: 1px solid #d4d4d8 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn-secondary:hover {
  background: #f4f4f5 !important;
  border-color: #a1a1aa !important;
  color: #09090b !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.btn-ghost {
  background: #ffffff !important;
  color: #27272a !important;
  border: 1px solid #d4d4d8 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.btn-ghost:hover {
  background: #f4f4f5 !important;
  border-color: #a1a1aa !important;
  color: #09090b !important;
}

.btn-sm {
  padding: 6px 13px !important;
  font-size: 12.5px !important;
  border-radius: var(--radius-full) !important;
}

.home-tab-underline,
.pedidos-filtro-underline,
.armazenamento-filtro-underline,
.financeiro-filtro-underline {
  display: none !important;
}

.badge-required {
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.16);
}

.btn-danger-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: rgba(220, 38, 38, 0.05) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.12) !important;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.btn-danger-soft:hover {
  background: rgba(220, 38, 38, 0.1) !important;
  border-color: rgba(220, 38, 38, 0.25) !important;
  color: #b91c1c !important;
  transform: scale(1.035);
}

.btn-danger-soft:active {
  transform: scale(0.97);
}

.btn-danger-soft.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
}

.dashboard-grid-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 992px) {
  .dashboard-grid-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The financeiro layout was handled above. Now for Documentos. */
    
  /* Faturas View Mobile Interleaved Layout */
  #view-faturas .dashboard-grid-layout > div {
    display: contents;
  }
  #view-faturas .subtabs-bar { order: 1; margin-bottom: 0 !important; }
  #fin-content-abertas { order: 2; }
  #fin-content-historico { order: 3; }
  #financeiro-outstanding-card { order: 4; }
  #financeiro-faq-card { order: 5; margin-top: 0 !important; }
  #financeiro-suporte-card { order: 6; }
    
  /* Documentos View Mobile Interleaved Layout */
  #view-documentos .dashboard-grid-layout > div {
    display: contents;
  }
  #documentos-upload-card { order: 1; }
  #documentos-main-col > .panel-card:nth-child(1) { order: 2; }
  #documentos-main-col > .panel-card:nth-child(2) { order: 3; }
  #documentos-main-col > .panel-card:nth-child(3) { order: 4; }
  #documentos-info-card { order: 5; }
}

  .panel-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }
  
  /* Column layout spacing: any column inside the main layout should have a gap between its cards */
  .dashboard-grid-layout > div {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

.panel-card-header {
  padding-top: var(--header-padding-y);
  padding-bottom: var(--header-padding-y);
  padding-left: var(--header-padding-x);
  padding-right: var(--header-padding-x);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.panel-card-title {
  font-family: var(--font-mori);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: var(--dark);
  margin: 0;
  letter-spacing: -0.01em;
  transform: translateY(2px);
}

.panel-card-subtitle {
  font-size: 12.5px;
  color: var(--text-soft);
  margin-top: 2px;
}

/* Home preview cards — título maior, sem subtítulo, linhas mais altas */
table.home-preview-table td {
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 13.5px;
}

.home-preview-list .custom-list-item {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* "Armazenamento por urgência" — já vive dentro de um panel-card, então
   os itens são linhas divididas (não caixas com borda própria, pra não
   ficar "quadrado dentro de quadrado") */
.armazenamento-urgencia-item {
  padding: 14px 20px;
  border-bottom: 1px solid var(--surface-2);
  transition: background 0.15s ease;
}

.armazenamento-urgencia-item:last-child {
  border-bottom: none;
}

.armazenamento-urgencia-item:hover {
  background: #fafafa;
}

.armazenamento-urgencia-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.armazenamento-urgencia-id {
  font-size: 15px;
  font-weight: 500;
  color: var(--dark);
}

.armazenamento-urgencia-track-label {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-faint);
  font-weight: 500;
  margin-top: 6px;
}

.panel-card-body {
  padding: 20px 24px;
}

.w-full {
  width: 100%;
}
.flex-1 {
  flex: 1;
}

.status-mobile {
  display: none;
}
@media (max-width: 768px) {
  #home-urgent-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important; /* Override inline gap */
  }
  #home-urgent-banner .urgent-banner-cta {
    align-self: flex-end !important;
    margin-top: -12px !important; /* Pull up to save space */
  }
  
  .fatura-row-list .status-desktop {
    display: none;
  }
  .fatura-row-list .status-mobile {
    display: inline;
  }
    .pedido-card-title-row {
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding-right: 20px;
      -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
      mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    }
    .pedido-card-title-row::-webkit-scrollbar {
      display: none;
    }
  .pedido-card-badges {
    gap: 4px;
  }
  .pedido-card-badges [class^="badge-tipo-"] {
    display: none;
  }
  .pedido-card-badges .badge-pill-status {
    padding: 2px 8px;
    font-size: 11px;
  }
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.custom-table th {
  background: #fafafa;
  padding: 12px 16px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.custom-table th:first-child {
  padding-left: 20px;
}

.custom-table th:last-child {
  text-align: right;
  padding-right: 20px;
}

.custom-table td {
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--text);
  border-bottom: 1px solid var(--surface-2);
  vertical-align: middle;
  text-align: left;
}

.custom-table td:first-child {
  padding-left: 20px;
}

.custom-table td:last-child {
  text-align: right;
  padding-right: 20px;
  white-space: nowrap;
}

.custom-table tr:last-child td {
  border-bottom: none;
}

.custom-table tr:hover td {
  background: #fafafa;
}

.custom-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-list-item {
  padding: 16px 20px;
  border-bottom: 1px solid var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: background 0.15s ease;
}

.custom-list-item:last-child {
  border-bottom: none;
}

.custom-list-item:hover {
  background: #fafafa;
}

/* Armazenamento — lista de pacotes em custódia, um card por pacote
   (mesmo padrão visual da lista de Meus Pedidos) */
.armazenamento-list-header {
  margin-bottom: 14px;
}

.armazenamento-list-header .panel-card-subtitle {
  margin-top: 4px;
}

.armazenamento-consolidar-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--brand-blue-bg);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.armazenamento-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.armazenamento-item {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.armazenamento-item:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  border-color: #cbd5e1;
}

/* Pedido — Detalhe: rótulo pequeno e discreto reaproveitado em vários
   cards (contagem de fotos/itens/documentos). */
.detalhe-progress-pct {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
  white-space: nowrap;
}

/* Timeline (Pedido-Detalhe) — chip de ícone colorido por etapa, no
   mesmo padrão visual do resto do painel (fatura-row-icon etc.) em vez
   de um dot genérico com classes soltas do Tailwind. */
.detalhe-timeline-chip {
  margin-top: 2px;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.detalhe-timeline-chip svg {
  width: 15px;
  height: 15px;
}

.detalhe-timeline-chip.is-done {
  background: #00B686;
  color: #ffffff;
}

.detalhe-timeline-chip.is-current {
  background: rgba(14, 165, 233, 0.12);
  color: #0ea5e9;
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.25) inset;
}

.detalhe-timeline-chip.is-future {
  background: var(--surface);
  color: var(--text-faint);
  border: 1px solid var(--border);
}

.detalhe-timeline-connector {
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

/* Etapas concluída/atual ficam com o respiro normal; as futuras (ainda
   não chegaram) ficam compactadas — continuam todas visíveis (Doc. 8
   §8.2 exige as 11 sempre), só ocupam menos altura vertical. */
.detalhe-timeline-item {
  padding-bottom: 16px;
}

.detalhe-timeline-item.is-compact .text-step-future {
  font-size: 14px;
}

/* Resumo financeiro (Pedido-Detalhe) */
.detalhe-resumo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}

.detalhe-resumo-linha .label {
  color: var(--text-soft);
}

.detalhe-resumo-linha .valor {
  color: var(--dark);
}

.detalhe-resumo-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 4px;
  margin-top: 6px;
  border-top: 1px solid var(--surface-2);
  font-weight: 600;
  font-size: 14px;
}

.detalhe-resumo-total .label {
  color: var(--dark);
}

.detalhe-resumo-total .valor {
  color: #059669;
}

.detalhe-resumo-geral {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
  font-size: 14px;
  color: var(--text-soft);
}

.detalhe-resumo-geral .valor {
  font-weight: 700;
  color: var(--dark);
}

/* Pagamentos — faturas em uma lista de linhas dentro de UM card só
   (estilo diferente de Meus Pedidos, que usa cards separados) */
.fatura-row-list {
  display: flex;
  flex-direction: column;
}

.fatura-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  min-height: 89px;
  border-bottom: 1px solid var(--surface-2);
}

.fatura-row:last-child {
  border-bottom: none;
}

.fatura-row-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fatura-row-icon-danger {
  background: rgba(200, 30, 58, 0.08);
  color: var(--danger);
}

.fatura-row-icon-success {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.fatura-row-icon-purple {
  background: rgba(168, 85, 247, 0.1);
  color: #9333ea;
}

.fatura-row-icon-blue {
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
}

.fatura-row-icon-orange {
  background: rgba(249, 115, 22, 0.1);
  color: #f97316;
}

/* Documentos — zona de upload + card de verificação */
.documento-upload-zone {
  border: 1.5px dashed #cbd5e1;
  border-radius: var(--radius-md);
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  background: var(--surface);
}

.documento-upload-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  margin-top: 4px;
}

.documento-upload-sub {
  font-size: 12px;
  color: var(--text-faint);
}

.documento-info-card {
  display: flex;
  gap: 12px;
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  color: var(--dark);
}

.fatura-row-main {
  flex: 1;
  min-width: 0;
}

.fatura-row-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--dark);
}

.fatura-row-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  margin-top: 2px;
}

.fatura-row-side {
  text-align: right;
  flex-shrink: 0;
}

.fatura-row-valor {
  font-size: 15px;
  font-weight: 500;
  color: var(--dark);
}

.fatura-row-status {
  display: inline-flex;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.fatura-row-status-danger {
  color: var(--danger);
  background: rgba(200, 30, 58, 0.08);
}

.fatura-row-status-success {
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
}

.fatura-row-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-faint);
  font-size: 13px;
}

/* "Outstanding Amount" summary card */
  .fatura-outstanding-card {
    background: #ffffff;
    color: var(--dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 22px 24px;
  }

.fatura-outstanding-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 14px;
}

.fatura-outstanding-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.fatura-outstanding-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
}

.fatura-outstanding-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mori);
  font-size: 18px;
  font-weight: 550;
  color: var(--dark);
  padding-top: 14px;
  border-top: 1px solid var(--surface-2);
}

.fatura-outstanding-note {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 12px;
  line-height: 1.5;
}

.armazenamento-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.armazenamento-item-id {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  min-width: 0;
}

.armazenamento-item-id input[type="checkbox"] {
  flex: 0 0 auto;
  cursor: pointer;
}

.armazenamento-item-loja {
  font-weight: 500;
  color: var(--text-soft);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.armazenamento-item-produtos {
  font-size: 12px;
  color: var(--text-faint);
  margin: 4px 0 0 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



.armazenamento-item-track {
  position: relative;
  height: 4px;
  width: 100%;
  background: var(--surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 12px;
}

.armazenamento-item-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.armazenamento-item-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-faint);
}

/* Declarações — cartões de rádio (Finalidade da Importação) */
.declaracao-radio-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.declaracao-radio-card:hover {
  border-color: #94a3b8;
}

.declaracao-radio-card.is-selected {
  border-color: var(--client-primary, #2563eb);
  background: rgba(37, 99, 235, 0.05);
}

.declaracao-radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  position: relative;
}

.declaracao-radio-card.is-selected .declaracao-radio-dot {
  border-color: var(--client-primary, #2563eb);
}

.declaracao-radio-card.is-selected .declaracao-radio-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--client-primary, #2563eb);
}

.declaracao-radio-title {
  font-size: 14px;
  font-weight: 550;
  color: var(--dark);
}

.declaracao-radio-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  margin-top: 2px;
}

.armazenamento-item-scale .is-critico {
  color: var(--danger);
  font-weight: 600;
}

.field-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 6px;
  display: block;
}

/* ==========================================================================
   Type system — utility classes for the client-panel type scale (25 roles).
   Roles already covered by an existing component class (panel-card-title,
   pedido-card-id/valor, kpi-label/value, badge-pill-status, view-page-title,
   home-hero-title, fatura-row-title/valor/sub, field-label, custom-table th)
   are NOT duplicated here — use those directly. This block only adds
   classes for roles that had no home yet (previously ad-hoc inline styles).
   ========================================================================== */

/* Role 8 — texto secundário / meta (loja em listas, datas, KPI label...) */
.text-meta {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
}

/* Role 10 — contador em pill (nav/tabs); mesmo texto de .subtab-badge, classe
   exposta pra uso fora daquele contexto específico */
.text-count-pill {
  font-size: 11.5px;
  font-weight: 600;
}

/* Role 12 — link/ação pequena (Editar, Esvaziar, Ver pedido...) */
.text-link-sm {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--client-primary, var(--brand-blue));
  cursor: pointer;
}

/* Role 14 — link de navegação (fora da navbar principal, ex: menus/dropdowns) */
.text-nav {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
}

.text-nav.is-active {
  font-weight: 600;
  color: var(--dark);
}

/* Role 15 — nome de usuário / chrome do header */
.text-header-chrome {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dark);
}

/* Role 16 — breadcrumb / voltar */
.text-breadcrumb {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
}

/* Role 17/18 — etapas da timeline do pedido */
.text-step-active {
  font-size: 15px;
  font-weight: 500;
  color: var(--dark);
}

.text-step-future {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
}

/* Role 19 — valor digitado em input (aplicar direto no .field-input quando
   precisar de um peso diferente do padrão do navegador) */
.text-input-value {
  font-size: 14px;
  font-weight: 500;
}

/* Role 20 — dado estático que não é dinheiro (horário, cartão mascarado,
   endereço formatado) */
.text-static-data {
  font-size: 14px;
  font-weight: 500;
  color: var(--dark);
}

/* Role 21/22 — pergunta e resposta de FAQ */
.text-faq-question {
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
}

.text-faq-answer {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-soft);
  line-height: 1.6;
}

/* Role 23 — estado vazio (lista/tabela sem itens) */
.text-empty-state {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-faint);
}

/* Role 24 — opção de toggle/checkbox (ex: WhatsApp / E-mail em Notificações) */
.text-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--dark);
}

/* Role 25 — rótulo de etapa do wizard (Novo Pedido) */
.text-wizard-step-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-soft);
}

.text-wizard-step-label.is-active {
  font-weight: 600;
  color: var(--dark);
}

.field-input:disabled,
.field-input[disabled] {
  background: var(--surface) !important;
  color: var(--text-soft) !important;
  cursor: not-allowed;
}

.perfil-lockable-select.is-locked .custom-select-trigger {
  background: var(--surface);
  color: var(--text-soft);
  cursor: not-allowed;
  pointer-events: none;
}

.field-correction-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
}

.field-correction-link:hover {
  color: var(--dark);
}

.field-input {
  width: 100%;
  font-family: var(--font-inter), sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--dark);
  outline: none;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

textarea.field-input {
  border-radius: var(--radius-md);
  resize: vertical;
}

select.field-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c5c66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  cursor: pointer;
  font-weight: 500;
}

select.field-input:hover,
input.field-input:hover {
  border-color: rgba(20, 20, 26, 0.24);
  background-color: #fafafa;
}

select.field-input:focus,
input.field-input:focus {
  border-color: var(--dark);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(17, 17, 20, 0.08);
}

select.field-input option {
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--dark);
  background: #ffffff;
}

/* Custom Select Component System */
.custom-select-wrapper {
  position: relative;
  display: block;
  user-select: none;
  width: 100%;
}

.custom-select-trigger {
  width: 100%;
  height: 42px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-mori);
  font-size: 14px;
  font-weight: 500;
  color: var(--dark);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
  text-align: left;
  box-sizing: border-box;
  line-height: 1;
  vertical-align: middle;
}

.custom-select-trigger:hover {
  border-color: rgba(20, 20, 26, 0.24);
  background-color: #fafafa;
}

.custom-select-wrapper.is-open .custom-select-trigger {
  border-color: var(--dark);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(17, 17, 20, 0.08);
}

.custom-select-arrow {
  width: 14px;
  height: 14px;
  color: #71717a;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.custom-select-wrapper.is-open .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  z-index: 9999;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.06);
  padding: 6px;
  display: none;
  max-height: 260px;
  overflow-y: auto;
  animation: dropdownFadeIn 0.15s ease-out;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.custom-select-dropdown::-webkit-scrollbar { width: 4px; }
.custom-select-dropdown::-webkit-scrollbar-track { background: transparent; }
.custom-select-dropdown::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.custom-select-dropdown::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

.custom-select-wrapper.is-open .custom-select-dropdown {
  display: block;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.custom-select-option {
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #27272a;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mori);
  line-height: 1.4;
}

.custom-select-option:hover {
  background: #f4f4f5;
  color: #09090b;
}

.custom-select-option.is-selected {
  background: #f0f9ff;
  color: #0284c7;
  font-weight: 600;
}

/* Flag emoji alignment fix */
.ddi-flag {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.hidden { display: none !important; }
.flex-col { flex-direction: column; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

/* Panel Switcher Dropdown */
.panel-switcher-wrapper {
  position: relative;
  display: inline-block;
}

.panel-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  user-select: none;
}

.panel-switcher-btn:hover {
  background: var(--surface);
  color: var(--dark);
}

.panel-switcher-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 200px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  padding: 6px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-switcher-wrapper.is-open .panel-switcher-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.panel-switcher-header {
  padding: 6px 10px 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

.panel-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  transition: all 0.15s ease;
}

.panel-switcher-item:hover {
  background: var(--surface);
  color: var(--dark);
}

.panel-switcher-item.is-active {
  background: var(--brand-blue-bg);
  color: var(--brand-blue);
  font-weight: 600;
}

/* User Profile Dropdown Menu */
.user-profile-wrapper {
  position: relative;
  display: inline-block;
}

.user-profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 200px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  padding: 6px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-profile-wrapper.is-open .user-profile-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.user-profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.user-profile-menu-item:hover {
  background: var(--surface);
  color: var(--dark);
}

.user-profile-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

/* Sub-Tab Sections inside Home View */
.subtab-section {
  display: none;
}

.subtab-section.is-active {
  display: block;
}

/* Modal Overlay & Dialog Styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(17, 17, 20, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-overlay.flex {
  display: flex !important;
}

.modal-dialog {
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  padding: 24px;
  width: 100%;
  position: relative;
  animation: modalSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modal Header, Title and Close Button Styles */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.modal-title {
  font-family: var(--font-mori);
  font-size: 18px;
  font-weight: 600;
  color: var(--dark);
  margin: 0;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--text-soft);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.modal-close-btn:hover {
  background: var(--surface);
  color: var(--dark);
}

.text-center {
  text-align: center !important;
}

.text-stone-400 {
  color: #A8A29E !important;
  font-size: 12.5px !important;
}

/* ================= NOVO PEDIDO — tipografia (alinhada ao type scale do site) ================= */

.novo-pedido-section-title {
  font-family: var(--font-mori);
  font-size: 16px;
  font-weight: 600;
  color: var(--dark);
  letter-spacing: -0.01em;
}

.service-card-title {
  font-family: var(--font-mori);
  font-size: 15px;
  font-weight: 550;
  color: var(--dark);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.service-card-desc {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 14px;
}

.section-eyebrow {
  font-family: var(--font-mori);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
}

/* ================= NOVO PEDIDO — wizard de passos ================= */

.novo-pedido-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.novo-pedido-step {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
  user-select: none;
  transition: all 0.2s ease;
}

.novo-pedido-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--surface);
  color: var(--text-soft);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

.novo-pedido-step-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  transition: color 0.15s ease;
}

/* Active Step */
.novo-pedido-step.is-active .novo-pedido-step-dot {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
}

.novo-pedido-step.is-active .novo-pedido-step-label {
  color: var(--dark);
}

/* Previous / Completed Steps (Clickable to Go Back) */
.novo-pedido-step.is-done {
  cursor: pointer;
}

.novo-pedido-step.is-done .novo-pedido-step-dot {
  background: rgba(37, 99, 235, 0.1);
  color: var(--client-primary);
  border-color: rgba(37, 99, 235, 0.35);
}

.novo-pedido-step.is-done .novo-pedido-step-label {
  color: var(--dark);
}

.novo-pedido-step.is-done:hover .novo-pedido-step-dot {
  transform: scale(1.1);
  background: var(--client-primary);
  border-color: var(--client-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.novo-pedido-step.is-done:hover .novo-pedido-step-label {
  color: var(--client-primary);
}

.novo-pedido-step-connector {
  width: 20px;
  height: 1px;
  background: var(--border);
  flex-shrink: 0;
}

.shopper-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 860px) {
  .shopper-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.shopper-cart-sticky {
  position: sticky;
  top: 20px;
}

@media (max-width: 860px) {
  .shopper-cart-sticky {
    position: static;
  }
}

.catalogo-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.catalogo-filtro-chip {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.catalogo-filtro-chip:hover {
  border-color: var(--dark);
  color: var(--dark);
}

.catalogo-filtro-chip.is-active {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}

.skeleton-card {
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-block {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface) 25%, #eeece8 37%, var(--surface) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.novo-pedido-revisao-linha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.novo-pedido-revisao-linha:last-child {
  border-bottom: none;
}

input:disabled,
button:disabled,
select:disabled,
.ddi-select-trigger:disabled {
  background: var(--surface) !important;
  color: var(--text-soft) !important;
  cursor: not-allowed;
  opacity: 0.85;
}

/* ================= NOVO PEDIDO — Service Selection Cards (Image Layout) ================= */
.service-card-image {
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  min-height: 240px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.service-card-image:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.service-card-image.is-selected {
  border-color: #a855f7;
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.15);
}

.service-card-image.is-selected.blue-border {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
}

.service-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 20px 20px 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}

.service-card-title-text {
  font-weight: 700;
  font-size: 18px;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.service-btn-choose {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  padding: 9px 20px;
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.service-btn-choose:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.9);
  transform: translateY(-1px) scale(1.02);
}

.service-card-image.is-selected .service-btn-choose {
  background: #a855f7;
  border-color: #c084fc;
  box-shadow: 0 4px 18px rgba(168, 85, 247, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.service-card-image.is-selected.blue-border .service-btn-choose {
  background: #0ea5e9;
  border-color: #38bdf8;
  box-shadow: 0 4px 18px rgba(14, 165, 233, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* ================= PHYSICAL STORES IMAGE CARDS ================= */
.store-card-image {
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  min-height: 240px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.store-card-image:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  border-color: rgba(168, 85, 247, 0.4);
}

.store-card-image:hover .store-btn-choose {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.9);
  transform: scale(1.03);
}

.store-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 5px 12px 5px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.store-card-badge-logo {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: contain;
}

.store-card-badge-text {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
}

.store-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 18px 18px 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
  z-index: 2;
}

.store-card-info {
  min-width: 0;
}

.store-card-title {
  font-weight: 700;
  font-size: 17px;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  line-height: 1.2;
}

.store-card-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.88);
  margin-top: 4px;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-btn-choose {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.shopper-icon-box {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
}

.redir-icon-box {
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
}

.service-card-tag {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
}

.service-feature-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.service-timeline {
  display: flex;
  align-items: center;
  margin-top: 16px;
  width: 100%;
}

.st-step {
  display: flex;
  align-items: center;
  gap: 6px;
}

.st-step.purple {
  color: #7e22ce;
}

.st-step.blue {
  color: #0369a1;
}

.st-step .st-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-step .st-icon i {
  width: 16px;
  height: 16px;
}

.st-step .st-text {
  font-size: 12px;
  font-weight: 600;
}

.st-divider {
  flex: 1;
  height: 1px;
  border-top: 1px dashed rgba(0, 0, 0, 0.15);
  margin: 0 12px;
}

.service-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 12px 6px 9px;
  border-radius: var(--radius-full);
  letter-spacing: -0.01em;
}

.service-feature-pill i {
  flex-shrink: 0;
}

.tag-purple {
  background: rgba(168, 85, 247, 0.1);
  color: #7e22ce;
}

.tag-blue {
  background: rgba(14, 165, 233, 0.1);
  color: #0369a1;
}

.service-radio-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.2s ease;
}

.service-card-shopper.is-selected .shopper-check {
  background: #a855f7;
  border-color: #a855f7;
  color: #ffffff;
}

.service-card-redir.is-selected .redir-check {
  background: #0ea5e9;
  border-color: #0ea5e9;
  color: #ffffff;
}

.store-detect-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  background: #eff6ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
  animation: fade-in 0.25s ease-out;
}

.store-detect-badge i, .store-detect-badge svg {
  width: 14px;
  height: 14px;
}

/* Redirection Recommended Stores Styling matching design system */
.redir-store-card {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(20,20,26,.02) !important;
  background: var(--card-bg) !important;
}

.redir-store-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-blue) !important;
  box-shadow: 0 12px 24px rgba(20, 20, 26, 0.05) !important;
}

.redir-store-card a {
  transition: all 0.2s ease;
}

.redir-store-card a:hover {
  background: var(--brand-blue-bg) !important;
  color: var(--brand-blue) !important;
}

/* Custom round checkbox for storage consolidation */
.armazenamento-checkbox-consolidar {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 50% !important;
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
  vertical-align: middle;
}

.armazenamento-checkbox-consolidar:hover {
  border-color: var(--client-primary, var(--brand-blue));
}

.armazenamento-checkbox-consolidar:checked {
  background: var(--client-primary, var(--brand-blue)) !important;
  border-color: var(--client-primary, var(--brand-blue)) !important;
}

.armazenamento-checkbox-consolidar:checked::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

/* ================= MOBILE — Painel do Cliente =================
   Scoped to body.client-panel so painel-interno.html (no class on
   <body>, mobile retrofit not in scope yet) is never affected. */

.client-panel .mobile-tab-bar {
  display: none;
}

@media (max-width: 768px) {
  #pedidos-header-sub {
    font-size: 12.5px;
    white-space: nowrap;
  }
  /* .fatura-row (used by Últimos eventos, Meus Pedidos home tab, and
     Faturas em aberto) gives the right-hand side block (time/value +
     status pill) no width limit. We use CSS grid on mobile to stack 
     the value/status above the CTA button on the right side. */
  .fatura-row {
    padding: 14px 16px;
    gap: 8px 12px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto auto;
    grid-template-rows: auto auto;
    grid-template-areas: 
      "icon main side arrow"
      "icon main btn arrow";
    align-items: center;
  }
  .fatura-row-icon {
    grid-area: icon;
  }
  .fatura-row-main {
    grid-area: main;
    min-width: 0;
  }
  .fatura-row-side {
    grid-area: side;
    max-width: none !important;
    text-align: right;
  }
  .fatura-row-status {
    white-space: normal;
    text-align: right;
    line-height: 1.3;
  }
  .fatura-row > .btn,
  .fatura-row > a.btn {
    grid-area: btn;
    margin-top: 4px;
    width: 100%;
    justify-content: center;
  }
  .fatura-row > .pedido-card-arrow {
    grid-area: arrow;
  }
  .client-panel .home-hero-title {
    font-size: 28px;
  }
  .client-panel .home-hero-subtitle {
    font-size: 13px;
  }
  .client-panel .home-hero-actions-row {
    width: 100%;
  }
  /* flex-1 was stretching "Novo Pedido" to fill the row, padding it out
     with dead space around the text — same pill it is on web, sized to
     its own content, not the row. */
  .client-panel .home-hero-actions-row .btn-primary.flex-1 {
    flex: 0 1 auto;
  }
  /* Urgent-shipment banner: the text block's inline min-width: 280px
     forced the row to wrap on mobile, dropping the button onto its own
     line below instead of staying pinned to the right. Let the text
     shrink and wrap internally (2 lines) while the row itself stays
     nowrap so the button holds its position. */
  #home-urgent-banner {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }
  .urgent-banner-content {
    min-width: 0 !important;
  }
  .urgent-banner-cta {
    flex-shrink: 0;
  }
  #home-header-btn-pendencia {
    display: none !important;
  }
  .client-panel .btn-icon-only-mobile {
    display: none !important;
  }
  /* The icon-only mobile state of this button was nearly invisible —
     12%-opacity white glass barely reads against the equally-light hero
     gradient behind it. Solid fill instead of glass for this state.
     Sized to match .btn-primary's own natural height (~35px, from its
     8px/18px padding — --radius-full is 8px in this theme, not a full
     pill) instead of a fixed 48px that no longer matched once the
     primary button stopped being forced to a taller size too. */
  .client-panel .home-hero-actions-row .home-hero-btn-ghost {
    padding: 0 !important;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full) !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color: rgba(255, 255, 255, 0.55) !important;
    border-left-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  }
  /* .app-header is only 88% opaque with a blur behind it — right below
     it sits the vivid .home-hero gradient, and Safari's status-bar area
     reads whatever's at the very top of the page. The translucency lets
     that gradient bleed through into the sampled color, so instead of
     committing to solid white Safari renders the bar gray. Opaque
     background alone didn't fully fix it — backdrop-filter still forces
     Safari to keep recompositing that region against whatever's behind
     it every frame, which seems to be enough on its own to confuse the
     status-bar color read. Drop the blur too on mobile. */
  .app-header {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .client-panel .app-header-inner {
    grid-template-columns: auto 1fr;
    padding: 0 16px;
  }

  .client-panel .app-header-inner .app-nav-pills {
    display: none;
  }

  .client-panel .user-chip-name {
    display: none;
  }

  .client-panel .dashboard-container {
    padding: 16px 16px calc(84px + env(safe-area-inset-bottom, 0px));
  }

  /* Subtabs (Overview/Triagem-like filters inside a view) scroll
     horizontally instead of overflowing the 375px viewport. */
  .client-panel .subtabs-bar {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .client-panel .subtabs-bar::-webkit-scrollbar {
    display: none;
  }

  .client-panel .subtab-btn {
    flex-shrink: 0;
  }

  /* View header: let the action button (e.g. "Marcar todas como
     lidas") drop to its own line instead of getting squeezed. */
  .client-panel .view-banner {
    flex-wrap: wrap;
  }

  /* The profile trigger sits flush against the right edge of the
     header on mobile — a menu that opens from its left edge (the
     desktop default) runs off the viewport. Open it from the right
     edge instead so it stays on-screen. */
  .client-panel .user-profile-menu {
    left: auto;
    right: 0;
  }

  .client-panel .mobile-tab-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    justify-content: space-around;
    align-items: center;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }

  .client-panel .mobile-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    padding: 6px 2px;
    border-radius: 10px;
    color: #71717a;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
  }

  .client-panel .mobile-tab-item svg,
  .client-panel .mobile-tab-item i {
    width: 20px;
    height: 20px;
  }

  .client-panel .mobile-tab-item.is-active {
    color: #355BE4;
  }

  .client-panel .mobile-tab-item.is-active svg,
  .client-panel .mobile-tab-item.is-active i {
    color: #355BE4;
    stroke: #355BE4;
  }

  /* Notification dot on the bottom tab bar's "Pedidos" icon, replacing
     the "3 perto do envio forçado" pill in the welcome hero on mobile —
     same urgent-shipment count, less intrusive placement. */
  .client-panel .mobile-tab-icon-wrap {
    position: relative;
    display: inline-flex;
  }

  .client-panel .mobile-tab-notif-dot {
    position: absolute;
    top: -3px;
    right: -7px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #ffffff;
  }

  #home-header-badge {
    display: none !important;
  }
}

@media (max-width: 480px) {
  /* Form rows pairing long-content fields (address, item description,
     service picker cards) stack to one column so each field keeps
     enough width to be legible. Short-value pairs (card exp/cvc,
     item size/color) are intentionally left alone. At tablet widths
     (481-768px) there's enough room to keep the original columns. */
  .client-panel .mobile-stack-grid {
    grid-template-columns: 1fr !important;
  }

  /* Personal Shopper store/product card grids: fixed 2/3 columns get
     too narrow to read on a phone — let them reflow by card width
     instead. Desktop/tablet keep the original fixed column count. */
  .client-panel #shopper-lojas-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }

  .client-panel #shopper-catalogo-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  }
}