/**
 * PanelPageInfo — bookmark button + page counter (panel web)
 *
 * Ensures the bookmark and page counter sit above the panel image.
 * Panel page mounts this island inside .panel-logo (below .panel-logo-link).
 * Stack: Open App (mobile CTA) → bookmark + page row. pointer-events: none on .panel-logo
 * so only interactive children capture clicks; rest of panel stays clickable.
 */

/* Keep logo + bookmark 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-page-info-stack,
.panel-logo .panel-logo-row {
  pointer-events: auto;
}

/* Column under freeroam logo: optional Open App (centered), then bookmark + Page # */
.panel-page-info-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
}

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

/* Row sits below Open App; no extra top margin (stack gap handles it) */
.panel-page-info-stack .panel-logo-row {
  margin-top: 0;
}

/* Match homepage header .auth-button.signup (mobile ≤768px): full-opacity gradient, no parent dimming */
.panel-open-app-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 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);
}

@media (min-width: 769px) {
  .panel-open-app-cta {
    display: none !important;
  }
}