/**
 * PanelPageInfo — bookmark button + page counter (panel web)
 *
 * Layout: bookmark + page-counter stack is fixed to the top-right corner of the
 * viewport (out of .panel-logo's flow). Open App CTA is rendered as a sibling of
 * .panel-logo-link inside .panel-logo so it flows directly under the freeroam
 * wordmark in the top-left. pointer-events: none on .panel-logo so only
 * interactive children capture clicks; rest of panel stays clickable.
 */

/* Keep logo + Open App block above panel image (image-container uses z-index 16).
   display/flex alignment live in panel-components.css (load order: components before this file). */
.panel-logo {
  z-index: 2000;
  pointer-events: none;
}

.panel-logo .panel-logo-link,
.panel-logo .panel-logo-row,
.panel-logo .panel-open-app-cta,
.panel-logo .panel-open-app-cta-shell {
  pointer-events: auto;
}

/* Bookmark + Page # — pinned to the top-right corner of the viewport (independent of .panel-logo flow). */
.panel-page-info-stack {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: auto;
}

.panel-logo-row {
  position: relative;
  z-index: 1;
}

/* No extra top margin — stack handles its own positioning */
.panel-page-info-stack .panel-logo-row {
  margin-top: 0;
}

/* Match homepage header .auth-button.signup (mobile ≤768px): full-opacity gradient, no parent dimming.
 * Sits below .panel-logo-link inside .panel-logo (column flex), so margin-top spaces it from the wordmark. */
.panel-open-app-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 0;
  padding: 6px 12px;
  border: none;
  border-radius: 24px;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(135deg, #ff6b6b, #ed7bbc, #f8a454);
  box-shadow: 0 4px 12px rgba(240, 101, 149, 0.3);
  transition: all 0.3s ease;
}

.panel-open-app-cta:hover {
  box-shadow: 0 8px 15px rgba(240, 101, 149, 0.4);
  filter: brightness(1.1);
  transform: translateY(-2px) scale(1.02);
}

.panel-open-app-cta:active {
  transform: scale(0.98);
}

/*
 * Dismissable Open App: one continuous gradient (same as .panel-open-app-cta).
 * Two transparent hit targets sit on the shell — no grey strip; X is just inside the pill.
 */
.panel-open-app-cta-shell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, #ff6b6b, #ed7bbc, #f8a454);
  box-shadow: 0 4px 12px rgba(240, 101, 149, 0.3);
  transition: box-shadow 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

.panel-open-app-cta-shell:hover {
  box-shadow: 0 8px 15px rgba(240, 101, 149, 0.4);
  filter: brightness(1.1);
  transform: translateY(-2px) scale(1.02);
}

.panel-open-app-cta-shell:active {
  transform: scale(0.98);
  filter: brightness(1);
}

.panel-open-app-cta-main {
  margin: 0;
  padding: 6px 0 6px 12px;
  border: none;
  background: transparent;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.panel-open-app-cta-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 26px;
  margin: 0;
  padding: 6px 12px 6px 0;
  border: none;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.panel-open-app-cta-dismiss:hover {
  background: rgba(255, 255, 255, 0.16);
}

.panel-open-app-cta-dismiss:active {
  background: rgba(255, 255, 255, 0.26);
}