/*
 * Kik Announcement Bar — Figma site chrome.
 * Desktop frame 11611:3873 (1600x38), mobile frame 11675:4139 (414x26).
 *
 * Values come from the frames' own kik design variables. Two of them are
 * written as literals instead of var() because the committed build output
 * assets/kik-theme.css still carries pre-token-sync values for them
 * (--kik-color-bg-inverse resolves to #000, and --kik-spacing-page-default
 * resolves to 124px above 768px). Both literals equal the synced
 * src/input.css token values, so the bar renders correctly whether or not the
 * shared stylesheet has been rebuilt. The token name is named at each site.
 */

.kik-announcement-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  /* kik-color/bg/inverse — literal, see header note */
  background-color: #1e1e1e;
  color: var(--kik-color-text-inverse, #ffffff);
  font-family: var(--kik-text-font-body, "Inter", "Helvetica Neue", Arial, sans-serif);
  line-height: var(--kik-text-line-height-body, 1.6);
  /* kik-spacing/page-default — literal, see header note */
  padding-inline: 16px;
  padding-block: var(--kik-spacing-sm, 4px);
}

.kik-announcement-bar *,
.kik-announcement-bar *::before,
.kik-announcement-bar *::after {
  box-sizing: border-box;
}

/* Utility links (Track Order · Help) and any app block the merchant adds.
   The run is drawn on desktop only, but the box stays in the flow so an app
   block placed here is still reachable on mobile. flex: none keeps it at zero
   width while every link inside it is display: none. */
.kik-announcement-bar__utility {
  display: flex;
  flex: none;
  min-width: 0;
  align-items: center;
  gap: 18px;
  opacity: 0.85;
}

.kik-announcement-bar__link,
.kik-announcement-bar__separator {
  display: none;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: var(--kik-text-size-body-xsm, 11px);
}

.kik-announcement-bar__separator {
  opacity: 0.4;
}

.kik-announcement-bar__app-block {
  flex-shrink: 0;
}

/* Message and its call to action — the only region the mobile frame draws. */
.kik-announcement-bar__message-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--kik-spacing-sm, 4px);
}

.kik-announcement-bar__message {
  text-align: center;
  font-size: var(--kik-text-size-body-xsm, 11px);
}

.kik-announcement-bar__cta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-bottom: 1px solid var(--kik-color-action-inverse, #ffffff);
  font-size: var(--kik-text-size-body-xsm, 11px);
  white-space: nowrap;
}

.kik-announcement-bar__cta-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* Region and language — desktop only, per the mobile frame. */
.kik-announcement-bar__locales {
  display: none;
  flex: none;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: var(--kik-spacing-md, 16px);
}

.kik-announcement-bar__locale {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--kik-spacing-8, 8px);
}

.kik-announcement-bar__locale-inner {
  display: flex;
  align-items: center;
  gap: var(--kik-spacing-sm, 8px);
}

.kik-announcement-bar__locale-flag {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: var(--kik-radius-pill, 9999px);
  object-fit: cover;
}

.kik-announcement-bar__locale-label {
  white-space: nowrap;
  font-size: var(--kik-text-size-body-sm, 14px);
}

.kik-announcement-bar__chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.kik-announcement-bar__close {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding-inline: 4px;
  font-size: 10px;
  opacity: 0.7;
}

@media (min-width: 768px) {
  .kik-announcement-bar {
    justify-content: space-between;
    /* kik-spacing/page-default — literal, see header note */
    padding-inline: 24px;
  }

  .kik-announcement-bar__utility,
  .kik-announcement-bar__locales {
    flex: 1 0 0;
  }

  .kik-announcement-bar__locales {
    display: flex;
  }

  .kik-announcement-bar__link,
  .kik-announcement-bar__separator {
    display: block;
  }

  .kik-announcement-bar__message {
    white-space: nowrap;
  }

  .kik-announcement-bar__close {
    display: flex;
  }
}