/* DXB Insider – header pill (Step 1). Brand: navy #0A192F, gold #C6A87C. */
:root {
  --dxb-navy: #0A192F;
  --dxb-gold: #C6A87C;
  --dxb-gold-hover: #D6BC93;
}

/* ---------- the gold pill ---------- */
a.dxb-insider-pill,
a.dxb-insider-pill:visited {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: var(--dxb-gold) !important;
  color: var(--dxb-navy) !important;
  border: 1px solid var(--dxb-gold) !important;
  font-weight: 600 !important;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  line-height: 1.1 !important;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(198, 168, 124, 0.28);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
a.dxb-insider-pill:hover {
  background: var(--dxb-gold-hover) !important;
  border-color: var(--dxb-gold-hover) !important;
  color: var(--dxb-navy) !important;
  box-shadow: 0 4px 16px rgba(198, 168, 124, 0.4);
  transform: translateY(-1px);
}
a.dxb-insider-pill:focus-visible {
  outline: 2px solid var(--dxb-gold) !important;
  outline-offset: 3px;
}
a.dxb-insider-pill::before,
a.dxb-insider-pill::after { display: none !important; } /* themes' underline/arrow effects */

/* The theme styles <em> in gold (sometimes as gradient text) — force navy so "Insider" stays visible on the gold pill */
a.dxb-insider-pill .dxb-insider-pill__text,
a.dxb-insider-pill .dxb-insider-pill__text em {
  color: var(--dxb-navy) !important;
  -webkit-text-fill-color: var(--dxb-navy) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
a.dxb-insider-pill .dxb-insider-pill__text em {
  font-style: italic !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  letter-spacing: inherit !important;
}
a.dxb-insider-pill .dxb-insider-new {
  color: var(--dxb-gold) !important;
  -webkit-text-fill-color: var(--dxb-gold) !important;
}

/* ---------- NEW badge ---------- */
.dxb-insider-new {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--dxb-navy);
  color: var(--dxb-gold);
  font-size: 0.625rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

/* menu item wrapper: centre the pill in the bar */
.dxb-insider-item {
  display: flex !important;
  align-items: center;
  list-style: none;
  align-self: center;
  margin-inline: 4px 10px !important;   /* breathing room before "Let's talk" */
}
.dxb-insider-item::before,
.dxb-insider-item::after { display: none !important; }

/* ---------- "Let's talk" stays outlined, so the two CTAs don't compete ---------- */
a.dxb-letstalk { white-space: nowrap !important; }   /* never squeezed into a column by the extra pill */
a.dxb-letstalk-outline {                                /* only added when "Let's talk" isn't outlined already */
  background: transparent !important;
  border: 1px solid currentColor !important;
  box-shadow: none !important;
}

/* ---------- tablet / small laptop: slightly more compact so the menu stays on one line ---------- */
@media (max-width: 1180px) {
  a.dxb-insider-pill { padding: 6px 12px !important; font-size: 0.8125rem; gap: 6px; }
  .dxb-insider-new { padding: 2px 5px; font-size: 0.5625rem; }
}

/* ---------- mobile: pill beside the hamburger ---------- */
.dxb-insider-pill.dxb-insider-pill--bar { display: none !important; }
html.dxb-mobile-nav a.dxb-insider-pill.dxb-insider-pill--bar {
  display: inline-flex !important;
  padding: 6px 12px !important;
  font-size: 0.8125rem;
  margin-right: 10px;
}
html.dxb-mobile-nav .dxb-insider-pill--bar .dxb-insider-new { padding: 2px 5px; font-size: 0.5625rem; }
.dxb-insider-pill--bar.dxb-fit-1 .dxb-insider-new { display: none; }                          /* tight bar: no badge */
html.dxb-mobile-nav a.dxb-insider-pill.dxb-insider-pill--bar.dxb-fit-2 { padding: 4px 9px !important; font-size: 0.75rem; margin-right: 6px; }
html.dxb-drawer-open a.dxb-insider-pill.dxb-insider-pill--bar { display: none !important; }   /* drawer open: item is at its top */

html.dxb-mobile-nav a.dxb-letstalk { padding: 6px 12px !important; font-size: 0.8125rem !important; }
a.dxb-letstalk.dxb-letstalk-hide { display: none !important; }

/* inside the mobile drawer the item is moved to the top (by the script); give it room */
html.dxb-mobile-nav .dxb-insider-item {
  padding: 4px 0 12px;
}

@media (prefers-reduced-motion: reduce) {
  a.dxb-insider-pill { transition: none; }
  a.dxb-insider-pill:hover { transform: none; }
}