/* =========================================================
   ✅ PK FIXED TOOLBAR — HARD LOCK (NO PAGE CSS OVERRIDE)
   Put this CSS LAST (footer me) so it wins everywhere.
   ========================================================= */

/* ---------- ONLY THESE TOKENS ---------- */
:root{
  --pk-toolbar-top: 64px;
  --pk-toolbar-left: 8px;
  --pk-toolbar-gap: 8px;

  /* ✅ LOCKED BUTTON SIZE (same on all pages) */
  --pk-back-pad-y: 16px;
  --pk-back-pad-x: 22px;
  --pk-back-font: 14px;
  --pk-back-radius: 18px;
  --pk-back-weight: 900;

  --pk-back-grad-1: rgb(2, 13, 81);
  --pk-back-grad-2: rgb(25, 176, 220);
}

/* ---------- TOOLBAR FIXED LEFT ---------- */
.pk-fixed-toolbar{
  position: fixed !important;
  top: var(--pk-toolbar-top) !important;
  left: var(--pk-toolbar-left) !important;
  right: auto !important;

  transform: none !important;
  margin: 0 !important;
  z-index: 2147483647 !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: var(--pk-toolbar-gap) !important;

  max-width: calc(100vw - 24px) !important;
}

/* ---------- HARD OVERRIDE BACK BUTTON ---------- */
/* ✅ use multiple selectors so any CSS file can't beat it */
.pk-fixed-toolbar > .pk-nav-btn,
.pk-fixed-toolbar .pk-nav-btn,
button.pk-nav-btn,
.pk-nav-btn[data-pk-nav="back"]{
  /* reset anything that changes size */
  all: unset !important;

  /* rebuild as fixed design */
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  user-select: none !important;
  white-space: nowrap !important;

  /* ✅ LOCKED SIZE */
  padding: var(--pk-back-pad-y) var(--pk-back-pad-x) !important;
  font-size: var(--pk-back-font) !important;
  font-weight: var(--pk-back-weight) !important;
  line-height: 1 !important;

  border-radius: var(--pk-back-radius) !important;

  /* colors */
  color: #fff !important;
  background-image: linear-gradient(to right, var(--pk-back-grad-1), var(--pk-back-grad-2)) !important;

  /* shadow */
  box-shadow: 0 14px 28px rgba(11,46,122,.18) !important;

  /* make sure it stays visible even if page sets button styles */
  border: 0 !important;
  outline: none !important;
  text-decoration: none !important;
}

/* Hover / Active */
.pk-fixed-toolbar > .pk-nav-btn:hover,
.pk-fixed-toolbar .pk-nav-btn:hover,
button.pk-nav-btn:hover,
.pk-nav-btn[data-pk-nav="back"]:hover{
  filter: brightness(1.05) !important;
}

.pk-fixed-toolbar > .pk-nav-btn:active,
.pk-fixed-toolbar .pk-nav-btn:active,
button.pk-nav-btn:active,
.pk-nav-btn[data-pk-nav="back"]:active{
  transform: translateY(1px) !important;
}

/* ---------- MOBILE (still same look, just small tweak if you want) ---------- */
@media (max-width: 768px){
  :root{
    --pk-toolbar-top: 63px;
    --pk-toolbar-left: 2px;

    /* if you want EXACT same size on mobile too, remove these 3 lines */
    --pk-back-pad-y: 14px;
    --pk-back-pad-x: 18px;
    --pk-back-font: 13px;
  }
}