:root {
  --tahweeleh-shell-primary: #0F7A55;
  --tahweeleh-shell-strong: #08704F;
  --tahweeleh-shell-soft: #E8F7EF;
  --tahweeleh-shell-text: #143B32;
  --tahweeleh-shell-muted: #647A73;
  --tahweeleh-shell-surface: #FFFFFF;
  --tahweeleh-shell-border: #BFE6D3;
  --tahweeleh-shell-header-height: 64px;
  --tahweeleh-shell-logo-size: 36px;
  --tahweeleh-shell-whatsapp-size: 28px;
  --tahweeleh-shell-hit-target: 43px;
  --tahweeleh-shell-horizontal-padding: 12px;
  --tahweeleh-shell-brand-gap: 5px;
  --tahweeleh-shell-action-gap: 9px;
  --tahweeleh-shell-pulse-duration: 2200ms;
}

.customer-shell-header,
[data-customer-shell-header] {
  box-sizing: border-box;
  min-height: var(--tahweeleh-shell-header-height);
  padding: 7px var(--tahweeleh-shell-horizontal-padding);
  background: var(--tahweeleh-shell-surface);
  color: var(--tahweeleh-shell-text);
  direction: rtl;
}

.app-header.customer-shell-header {
  height: var(--tahweeleh-shell-header-height);
  min-height: var(--tahweeleh-shell-header-height);
  padding: 7px var(--tahweeleh-shell-horizontal-padding) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.customer-shell-brand {
  min-width: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--tahweeleh-shell-brand-gap);
  direction: rtl;
  color: inherit;
  text-decoration: none;
}

.customer-shell-brand-logo,
[data-customer-shell-header] img[src*="brand-tahweeleh-customer"] {
  width: var(--tahweeleh-shell-logo-size);
  height: var(--tahweeleh-shell-logo-size);
  flex: 0 0 var(--tahweeleh-shell-logo-size);
  object-fit: contain;
  border: 0;
  border-radius: 0;
}

.customer-shell-brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1;
}

.customer-shell-brand-name,
[data-customer-shell-brand-name] {
  display: block;
  color: var(--tahweeleh-shell-text);
  font-size: 21px;
  line-height: 22px;
  font-weight: 800;
  white-space: nowrap;
}

.customer-shell-tagline,
[data-customer-shell-tagline] {
  display: block;
  max-width: 100%;
  color: var(--tahweeleh-shell-muted);
  font-size: 7.5px;
  line-height: 8px;
  font-weight: 500;
  white-space: nowrap;
  unicode-bidi: isolate;
}

.customer-shell-header .header-actions {
  margin-inline-start: 0;
  display: flex;
  align-items: center;
  gap: var(--tahweeleh-shell-action-gap);
  direction: ltr;
}

.customer-shell-primary-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--tahweeleh-shell-action-gap);
  direction: ltr;
}

.customer-shell-status,
[data-customer-shell-status] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tahweeleh-shell-primary);
  font-size: 9px;
  line-height: 10px;
  font-weight: 600;
  direction: rtl;
  white-space: nowrap;
}

.customer-shell-status[data-state="offline"],
[data-customer-shell-status][data-state="offline"] {
  color: var(--tahweeleh-shell-muted);
}

.customer-shell-status-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
  animation: tahweeleh-shell-status-pulse var(--tahweeleh-shell-pulse-duration) ease-in-out infinite alternate;
}

.customer-shell-whatsapp,
[data-customer-shell-whatsapp] {
  width: var(--tahweeleh-shell-hit-target);
  height: var(--tahweeleh-shell-hit-target);
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--tahweeleh-shell-hit-target);
  border: 0;
  border-radius: 999px;
  background: transparent;
  text-decoration: none;
}

.customer-shell-whatsapp[aria-disabled="true"],
[data-customer-shell-whatsapp][aria-disabled="true"] {
  pointer-events: none;
  opacity: .58;
}

.customer-shell-whatsapp img,
[data-customer-shell-whatsapp] img,
[data-customer-shell-header] img[src*="brand-whatsapp"] {
  width: var(--tahweeleh-shell-whatsapp-size);
  height: var(--tahweeleh-shell-whatsapp-size);
  display: block;
}

@keyframes tahweeleh-shell-status-pulse {
  from { opacity: 0.55; transform: scale(.94); }
  to { opacity: 0.85; transform: scale(1); }
}

@media (max-width: 767px) {
  .customer-shell-header .account-button {
    display: none !important;
  }

  .customer-shell-brand-copy {
    max-width: calc(100vw - 142px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-shell-status-dot {
    animation: none;
    opacity: 0.85;
  }
}