/*
 * Accounts in the embed (HANDOFF_widget_v2 Phase C, pages added in C.2).
 *
 * Loaded only when WidgetConfig.enable_accounts is on, and every selector here
 * is a class only the account templates emit, so this file cannot change a
 * flag-off render.
 *
 * Mobile-first (rule 8). The narrow layout is the default and 480px is the only
 * enhancement, matching shell_v2.css: the launcher's panel is 560px wide, so a
 * query above that could never fire in the embed shape partners actually see.
 * Every tap target below is at least 44px.
 */

/* --------------------------------------------------------------------------
 * The heart on a place
 * -------------------------------------------------------------------------- */

/*
 * The heart sits in the row's flow, not on top of it.
 *
 * It was absolutely positioned at top/right 0.5rem, which is exactly where
 * .widget-place-supply already draws the add button and price on any stop the
 * tenant sells. Measured on the Amsterdam demo: heart 44x44 at x=832, supply
 * column at x=843. They overlapped on every bookable row, so a tenant's own
 * inventory was the thing it covered.
 *
 * margin-left:auto keeps it hard right on rows with no supply column, so the
 * two cases look the same.
 */
.widget-place-save {
  align-self: center;
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sized with the vote pills (32px), not the old 44px: Zach asked for the
     reaction controls to read as one consistent, compact set (2026-08-26). */
  min-width: 34px;
  min-height: 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--widget-text-muted, #6b7280);
  font-size: 1.05rem;
  cursor: pointer;
}

.widget-place-save:hover,
.widget-place-save:focus-visible {
  color: var(--widget-secondary, #e85d33);
}

.widget-place-save--on {
  color: var(--widget-secondary, #e85d33);
}

.widget-place,
.widget-item {
  position: relative;
}

.widget-place-panel-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.widget-place-panel-headline .widget-place-panel-title {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.widget-place-panel-headline .widget-place-save {
  position: static;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
 * Pages inside the embed (Phase C.2)
 *
 * Trips, Saved and the account view are pages rendered into .widget-main, not
 * overlays. The overlay rules that used to live here are gone: an overlay
 * cannot carry this much detail, cannot be linked, and had to be dismissed
 * before the visitor could do anything else.
 *
 * Visual language is the consumer app's, restated rather than linked. The
 * widget deliberately does not load tripgogo/styles.css, so the consumer's
 * tokens (--white, --text-dark, --teal-50) do not exist here; what is ported
 * is the SHAPE: a 16px card radius, the 0 4px 14px rgb(0 0 0 / 8%) resting
 * shadow and its hover lift from trips/static/trips/css/trip-card.css, and the
 * section head + count pattern from the consumer trip pages. Colour still
 * comes from the tenant's own --widget-* tokens, because a partner's embed is
 * their brand and not ours.
 * -------------------------------------------------------------------------- */

.widget-page {
  padding: 1rem 1rem 1.5rem;
  max-width: 640px;
  margin: 0 auto;
}

.widget-page-head {
  margin-bottom: 1rem;
}

.widget-page-title {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--widget-text, #1a1a2e);
  overflow-wrap: anywhere;
}

.widget-page-sub,
.widget-page-note {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--widget-text-muted, #6b7280);
  overflow-wrap: anywhere;
}

.widget-page-note {
  margin-bottom: 1rem;
}

/* ── Identity header ──────────────────────────────────────────────────── */

.widget-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.widget-identity-avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(
    in srgb,
    var(--widget-primary, #186966) 14%,
    transparent
  );
  color: var(--widget-primary, #186966);
  font-size: 1.2rem;
  font-weight: 700;
}

.widget-identity-body {
  flex: 1 1 12ch;
  min-width: 0;
}

/* ── Sections ─────────────────────────────────────────────────────────── */

.widget-section {
  margin-top: 1.5rem;
}

.widget-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.widget-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  font-size: 0.95rem;
  color: var(--widget-text, #1a1a2e);
  overflow-wrap: anywhere;
}

.widget-section-title i {
  color: var(--widget-primary, #186966);
}

.widget-count {
  flex: 0 0 auto;
  min-width: 1.5rem;
  padding: 0 0.4rem;
  border-radius: 10px;
  background: var(--widget-surface, #f7f8fa);
  color: var(--widget-text-muted, #6b7280);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}

.widget-section-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--widget-primary, #186966);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.widget-section-empty {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--widget-text-muted, #6b7280);
  overflow-wrap: anywhere;
}

.widget-consent-agreed {
  margin: 0.5rem 0 0.25rem;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--widget-primary, #186966);
  background: var(--widget-surface, #f7f8fa);
  font-size: 0.85rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* ── Cards ────────────────────────────────────────────────────────────── */

.widget-card-list {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.widget-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  min-width: 0;
  padding: 0.75rem;
  border-radius: 16px;
  background: var(--widget-bg, #fff);
  border: 1px solid var(--widget-border, #e2e5ea);
  box-shadow: 0 4px 14px rgb(0 0 0 / 8%);
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Hover only lifts where hovering is a thing. On touch the transform fires on
   tap and reads as a glitch. */
@media (hover: hover) {
  .widget-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgb(0 0 0 / 12%);
    text-decoration: none;
    color: inherit;
  }
}

.widget-card-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(
    in srgb,
    var(--widget-primary, #186966) 12%,
    transparent
  );
  color: var(--widget-primary, #186966);
}

.widget-card-icon--saved {
  background: color-mix(
    in srgb,
    var(--widget-secondary, #e85d33) 12%,
    transparent
  );
  color: var(--widget-secondary, #e85d33);
}

.widget-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.widget-card-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.widget-card-meta {
  font-size: 0.8rem;
  color: var(--widget-text-muted, #6b7280);
  overflow-wrap: anywhere;
}

.widget-card-go {
  flex: 0 0 auto;
  color: var(--widget-text-muted, #6b7280);
  font-size: 0.8rem;
}

/* ── Empty and signed-out states ──────────────────────────────────────── */

.widget-page-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1rem;
  text-align: center;
}

.widget-page-empty-icon {
  font-size: 1.75rem;
  color: color-mix(in srgb, var(--widget-primary, #186966) 40%, transparent);
}

.widget-page-empty-text {
  margin: 0;
  max-width: 34ch;
  color: var(--widget-text-muted, #6b7280);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.widget-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  max-width: 100%;
  padding: 0 1rem;
  border: 1px solid var(--widget-border, #e2e5ea);
  border-radius: 8px;
  background: transparent;
  color: var(--widget-text, #1a1a2e);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.widget-btn-ghost:hover,
.widget-btn-ghost:focus-visible {
  border-color: var(--widget-primary, #186966);
  color: var(--widget-primary, #186966);
}

.widget-account-signin,
.widget-popup-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  padding: 0 1.25rem;
  border: none;
  border-radius: 8px;
  background: var(--widget-primary, #186966);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/* The rail's account item STAYS once signed in, showing the visitor's name.
   It used to be hidden, which left no signed-in signal anywhere in the rail
   and, more to the point, no way to sign out: the only exit was clearing
   sessionStorage by hand. */
body.widget-signed-in .widget-rail-signin .widget-rail-label {
  font-weight: 600;
  /* Names are longer than "Sign in" and the column is 76px. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

@media (min-width: 480px) {
  .widget-page {
    padding: 1.25rem 1.25rem 2rem;
  }

  .widget-page-title {
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
 * The sign-in popup (first-party page, not inside the iframe)
 * -------------------------------------------------------------------------- */

.widget-popup {
  margin: 0;
  padding: 1.25rem;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}

.widget-popup-card {
  max-width: 420px;
  margin: 0 auto;
}

.widget-popup-logo {
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

.widget-popup-title {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
}

.widget-popup-body {
  margin: 0 0 1rem;
  line-height: 1.5;
}

.widget-popup-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.widget-popup-optin {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  line-height: 1.45;
  cursor: pointer;
}

.widget-popup-optin input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
}

.widget-popup-note {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: #6b7280;
  line-height: 1.45;
}

.widget-signin-blocked {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--widget-muted, #6b7280);
}