/* ===========================================================================
   profile-menu.css — the profile chip and its dropdown, everywhere.
   ===========================================================================
   SELF-CONTAINED ON PURPOSE. The dropdown used to be styled in main.css, which
   index.html and flights.html load and the service pages do NOT — so putting
   one component's markup on all of them meant either loading a whole landing-
   page stylesheet everywhere or having the menu appear unstyled on half the
   site. It has its own file instead, and every page that renders the component
   loads exactly this.

   It sits on two different headers: the landing page's dark translucent bar
   and the service pages' navy one. Rather than two palettes, the chip inherits
   `currentColor` from whichever header it is in, and the MENU is its own
   surface — white, its own shadow, its own ink — because a dropdown that
   inherited a translucent header's colours would be unreadable over the page
   behind it.
   =========================================================================== */

.pm-wrap { position: relative; display: inline-block; }

/* ---------------------------------------------------------------- the chip */
.pm-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 12px 6px 6px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  color: inherit;
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.pm-chip:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .38); }
.pm-chip:focus-visible { outline: 2px solid var(--coral, #E9B949); outline-offset: 2px; }

.pm-avatar {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold, #E9B949), var(--coral-dark, #D9A32C));
  color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
}
.pm-name {
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-caret { width: 15px; height: 15px; flex: none; opacity: .75; transition: transform .2s ease; }
.pm-wrap.is-open .pm-caret { transform: rotate(180deg); }

/* --------------------------------------------------------------- the menu */
.pm-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 200;
  min-width: 232px; padding: 7px;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, .10);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(10, 37, 64, .20), 0 2px 8px rgba(10, 37, 64, .08);
  /* Closed by default and animated open — `visibility` rather than `display`
     so the transition has something to run on, and so the items stay out of
     the tab order while it is shut. */
  opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity .18s ease, transform .18s cubic-bezier(.22, .8, .3, 1), visibility .18s;
}
.pm-wrap.is-open .pm-menu {
  opacity: 1; visibility: visible; transform: none;
}

.pm-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px;
  border: 0; border-radius: 9px; background: none;
  color: #0A2540; font: inherit; font-size: 14px; font-weight: 600;
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.pm-item:hover { background: #F4F7FB; }
.pm-item:focus-visible { outline: 2px solid var(--coral, #E9B949); outline-offset: -2px; }
.pm-icon { width: 18px; height: 18px; flex: none; color: #5B6B82; }
.pm-item:hover .pm-icon { color: var(--coral-dark, #D9A32C); }

.pm-sep { margin: 6px 4px; border: 0; border-top: 1px solid rgba(10, 37, 64, .10); }
.pm-logout { color: #D64545; }
.pm-logout .pm-icon { color: #D64545; }
.pm-logout:hover { background: #FFF1F1; }

/* ------------------------------------------------------------- signed out */
.pm-login, .pm-signup {
  display: inline-flex; align-items: center;
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none;
}
/* THE OUTLINED PILL — person, words, arrow. Everything is drawn in
   currentColor, because each page already gives the header its ink (white
   over the hero film, navy on a solid bar — main.css, flights-ref.css,
   booking-ref.css), so the outline and icons follow whichever that is and the
   button can never vanish into its own background. */
.pm-login {
  gap: 10px; padding: 9px 16px 9px 14px; border-radius: 999px;
  color: inherit; white-space: nowrap; line-height: 1.2;
  border: 1.5px solid currentColor;
  border-color: color-mix(in srgb, currentColor 70%, transparent);
  background: transparent;
  transition: background .18s ease, border-color .18s ease;
}
.pm-login:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.pm-login:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.pm-login svg {
  flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.pm-login .pm-login-arrow { width: 18px; height: 18px; transition: transform .18s ease; }
.pm-login:hover .pm-login-arrow { transform: translateX(3px); }
/* Phones: the header also carries the logo, wishlist, partner and menu, so
   the arrow goes first and the pill tightens. */
@media (max-width: 480px) {
  .pm-login { gap: 7px; padding: 7px 12px 7px 10px; }
  .pm-login .pm-login-arrow { display: none; }
  .pm-login svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-login .pm-login-arrow { transition: none; }
  .pm-login:hover .pm-login-arrow { transform: none; }
}
.pm-signup {
  margin-left: 6px; padding: 9px 18px; border-radius: 999px;
  background: var(--coral, #E9B949); color: var(--on-accent, #12253F);
  transition: background .18s ease;
}
.pm-signup:hover { background: var(--coral-dark, #D9A32C); }

/* -------------------------------------------------------------- responsive
   On a narrow screen the menu is pinned to the right edge of the viewport
   rather than to the chip: a 232px panel anchored to a chip near the edge
   would otherwise hang off the side of the page. */
@media (max-width: 560px) {
  .pm-name { display: none; }          /* the avatar is identification enough */
  .pm-chip { padding: 5px; gap: 4px; }
  .pm-menu {
    position: fixed; top: auto; right: 10px; left: 10px;
    min-width: 0; transform-origin: top center;
  }
  .pm-wrap.is-open .pm-menu { transform: none; }
  .pm-item { padding: 13px 12px; }     /* thumb-sized */
}

@media (prefers-reduced-motion: reduce) {
  .pm-menu, .pm-caret, .pm-chip, .pm-item { transition: none; }
}

/* ==========================================================================
   BROWSING AS A GUEST
   ==========================================================================
   The same chip, saying something different. It is deliberately NOT styled as
   a second-class control — a traveller who chose "continue as guest" made a
   choice, and a greyed-out badge would read as a failed login. What separates
   it from a signed-in chip is the avatar: an outline figure rather than
   initials, because there is no name to take initials from.
   ========================================================================== */
.pm-avatar-guest {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .34);
}
.pm-avatar-guest svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
/* On a white header (service pages, scrolled state) the chip inherits navy
   ink, so the translucent white avatar would vanish. */
header.is-solid .pm-avatar-guest {
  background: rgba(10, 37, 64, .08);
  border-color: rgba(10, 37, 64, .18);
}

/* THE PANEL IS SIZED, NOT THE SENTENCE. `.pm-menu` has a min-width and no
   maximum, so a paragraph inside it laid itself out on ONE LINE and dragged
   the dropdown across half the page. The width belongs to the panel; the
   note wraps inside it. */
.pm-wrap-guest .pm-menu { width: min(272px, calc(100vw - 32px)); }

/* One sentence of context at the top of the guest menu. It is the answer to
   "why does this menu have two items when the signed-in one has nine". */
.pm-note {
  /* The menu sets `white-space: nowrap` for its single-line items, and a
     paragraph inherited it — the sentence ran straight out of the card. */
  white-space: normal;
  margin: 2px 4px 7px; padding: 8px 10px;
  border-radius: 10px;
  background: rgba(10, 37, 64, .05);
  color: var(--muted, #5A6B7F);
  font-size: 12.5px; line-height: 1.45;
}
.pm-item-primary { font-weight: 700; }