/* ============================================================
   OrderStraight — Embed shell stylesheet (v14)
   Stage 14 changes vs v5b:
     - .os-embed-tenant__avatar--img : modifier that lets the
       avatar circle host an <img> filling the whole circle
       (cover-fitted, no inner shadow ring, white safety bg).
     - .os-embed-action--login : restyled from coral pill to a
       cream-on-navy primary CTA pill — looks intentional next
       to the navy bar and stops color-clashing with coral or
       red tenant avatars (e.g. Fratelli #c41e3a).
   Everything else is byte-identical to v5b.
   ============================================================ */

html, body { margin: 0; padding: 0; background: #fff; }
body.os-embed-body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--os-cream, #F7F5F0);
}

/* ---------- Top bar ---------- */
.os-embed-bar {
  background: var(--os-navy, #1C2A44);
  color: var(--os-cream, #F7F5F0);
  flex: 0 0 auto;
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.os-embed-bar__inner {
  max-width: 100%;
  display: flex; align-items: center;
  gap: 8px;
  padding: 8px 12px;
  min-height: 52px;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

.os-embed-back {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  color: var(--os-cream);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  text-decoration: none;
  transition: background .15s ease, transform .1s ease;
}
.os-embed-back:hover, .os-embed-back:focus { background: rgba(255,255,255,.18); }
.os-embed-back:active { transform: scale(.96); }

.os-embed-tenant {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  padding: 4px 8px;
}
.os-embed-tenant__avatar {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 0 0 2px rgba(255,255,255,.16) inset;
  overflow: hidden;
}
/* Stage 14 — when an <img> is inside the avatar, kill the inner
   shadow ring (looks like a halo over the photo) and let the img
   fill the circle edge-to-edge. Background switches to white so
   transparent PNG logos render against a clean disc. */
.os-embed-tenant__avatar--img {
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset;
  padding: 0;
}
.os-embed-tenant__avatar--img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.os-embed-tenant__name {
  flex: 1 1 auto;
  font-size: 16px; font-weight: 700;
  color: var(--os-cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

.os-embed-actions {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
}
.os-embed-action {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; min-width: 34px; padding: 0 10px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px; font-weight: 600;
  color: var(--os-cream);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  cursor: pointer;
}
.os-embed-action:hover, .os-embed-action:focus { background: rgba(255,255,255,.18); }
.os-embed-action:active { transform: scale(.96); }

.os-embed-action--ext { padding: 0; width: 34px; }
.os-embed-action--lang { font-weight: 700; letter-spacing: .3px; }

/* Stage 14 — restyled Sign-in pill.
   Cream/white solid background + navy text reads as a clean
   primary CTA on the navy bar, replaces the muddy coral pill
   that clashed with coral-tinted tenant avatars. */
.os-embed-action--login {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--os-navy, #1C2A44);
  font-weight: 700;
  padding: 0 16px;
  height: 36px;
  letter-spacing: .2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.os-embed-action--login:hover,
.os-embed-action--login:focus {
  background: var(--os-cream, #F7F5F0);
  border-color: var(--os-cream, #F7F5F0);
  color: var(--os-navy, #1C2A44);
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}

.os-embed-action--user {
  background: var(--os-coral);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0; width: 34px;
}

/* ---------- Iframe area ---------- */
.os-embed-main {
  flex: 1 1 auto;
  position: relative;
  background: #fff;
  min-height: 0;
  display: flex; flex-direction: column;
}
.os-embed-iframe {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #fff;
  display: block;
  min-height: 200px;
}

.os-embed-poweredby {
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center;
  font-size: 11px;
  color: rgba(28,42,68,.45);
  padding: 4px 8px;
  background: linear-gradient(to top, rgba(247,245,240,.9), rgba(247,245,240,0));
  pointer-events: none;
  z-index: 1;
  font-weight: 600;
  letter-spacing: .3px;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 540px) {
  .os-embed-bar__inner { padding: 6px 8px; gap: 6px; min-height: 50px; }
  .os-embed-back { width: 36px; height: 36px; }
  .os-embed-tenant__avatar { width: 30px; height: 30px; font-size: 13px; }
  .os-embed-tenant__name { font-size: 15px; }
  .os-embed-action { height: 32px; min-width: 32px; padding: 0 8px; font-size: 12px; }
  .os-embed-action--ext, .os-embed-action--user { width: 32px; }
  .os-embed-action--login { height: 32px; padding: 0 14px; font-size: 12.5px; }
  .os-embed-poweredby { display: none; }
}

/* ---------- RTL ---------- */
[dir="rtl"] .os-embed-tenant__name { text-align: right; }

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .os-embed-back, .os-embed-action { transition: none; }
}