/* =============================================================================
   PPd UI v1 — the shared Pick Pack Direct stylesheet
   https://pickpack.direct/ui/v1/ppd.css

   One file for every PPd product: the website, PPd, PPd Connections,
   handhelds and van apps. Load it after Bootstrap (if a page uses Bootstrap):

     <link rel="stylesheet" href="https://pickpack.direct/ui/v1/ppd.css">

   v1 never changes in a way that breaks a page. Breaking changes go in /ui/v2/.

   Contents
     1. Brand tokens (colours, fonts, spacing)
     2. Base
     3. Buttons
     4. Tiles — the PPd "live tile" block system
     5. Search box
     6. Notice bar
     7. Utilities
     8. Area pages — the rail menu, coloured header band, sub-tiles
     9. Bootstrap 5 in PPd colours (pages that load Bootstrap 5 first)
    10. Cards, messages, colour choice, PIN boxes, keypad

   Changes (bump ?v= in each project when this file changes)
     1.0.0  first version: tokens, buttons, tiles, search, notices, area pages
     1.1.0  Bootstrap 5 alignment, cards, messages, colour choice, PIN, keypad
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap");

/* 1. Brand tokens — from PICKPACKDIRECT_BRANDGUIDELINES_V05 ----------------- */
:root {
  /* Core */
  --ppd-blue:   #51C3EF;  /* RGB 81 195 239  — primary */
  --ppd-navy:   #0F2630;  /* RGB 15 38 48    — text / dark */
  --ppd-light:  #E0EBF7;  /* RGB 224 235 247 — light panels */
  --ppd-grey:   #545457;  /* RGB 84 84 87    — secondary text */
  --ppd-white:  #FAFAFA;  /* RGB 250 250 250 — page */

  /* Sub-brands */
  --ppd-orange: #FC9142;  /* RGB 252 145 66 */
  --ppd-pink:   #F25E8A;  /* RGB 242 94 138 */
  --ppd-green:  #5ED491;  /* RGB 94 212 145 */
  --ppd-purple: #9999FF;  /* RGB 153 153 255 */

  /* Roles */
  --ppd-bg:        var(--ppd-white);
  --ppd-surface:   #FFFFFF;
  --ppd-text:      var(--ppd-navy);
  --ppd-text-soft: var(--ppd-grey);
  --ppd-line:      #D3DCE6;
  --ppd-focus:     var(--ppd-navy);

  /* Type: Basis Grotesque Pro is licensed; Manrope is the fallback until the
     font files are added. */
  --ppd-font-display: "Basis Grotesque Pro", "Manrope", system-ui, sans-serif;
  --ppd-font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Shape: PPd is square-edged. */
  --ppd-radius: 0;

  /* Tiles */
  --ppd-gap: 6px;
  --ppd-cols: 4;
}

@media (min-width: 640px)  { :root { --ppd-cols: 8; } }
@media (min-width: 1024px) { :root { --ppd-cols: 12; } }

/* 2. Base ------------------------------------------------------------------ */
.ppd {
  font-family: var(--ppd-font-body);
  color: var(--ppd-text);
  background: var(--ppd-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.ppd h1, .ppd h2, .ppd h3, .ppd .ppd-display {
  font-family: var(--ppd-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ppd-navy);
}
.ppd :focus-visible {
  outline: 3px solid var(--ppd-focus);
  outline-offset: 2px;
}

/* 3. Buttons --------------------------------------------------------------- */
.ppd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 2px solid var(--ppd-navy);
  border-radius: var(--ppd-radius);
  background: var(--ppd-navy);
  color: #fff;
  font: 700 15px/1 var(--ppd-font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.ppd-btn:hover  { background: #1d3d4b; border-color: #1d3d4b; }
.ppd-btn:active { transform: scale(.97); }
.ppd-btn--blue  { background: var(--ppd-blue); border-color: var(--ppd-blue); color: var(--ppd-navy); }
.ppd-btn--blue:hover { background: #3fb3e2; border-color: #3fb3e2; }
.ppd-btn--ghost { background: transparent; color: var(--ppd-navy); }
.ppd-btn--ghost:hover { background: var(--ppd-navy); color: #fff; }

/* 4. Tiles ----------------------------------------------------------------- */
/* A grid of square cells. Tiles span cells:
     --s small  1x1   --m medium 2x2   --w wide 4x2   --l large 4x4
   Text sits bottom-left like a Windows live tile. */
.ppd-tiles {
  container-type: inline-size;
}
.ppd-tiles__grid {
  --ppd-cell: calc((100cqw - (var(--ppd-cols) - 1) * var(--ppd-gap)) / var(--ppd-cols));
  display: grid;
  grid-template-columns: repeat(var(--ppd-cols), 1fr);
  grid-auto-rows: var(--ppd-cell);
  grid-auto-flow: dense;
  gap: var(--ppd-gap);
}

.ppd-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 14px 16px;
  overflow: hidden;
  border-radius: var(--ppd-radius);
  background: var(--ppd-blue);
  color: var(--ppd-navy);
  text-decoration: none;
  transform-origin: center;
  transition: transform .12s ease-out, box-shadow .12s ease-out, opacity .2s;
}
a.ppd-tile:hover, button.ppd-tile:hover {
  box-shadow: inset 0 0 0 3px rgba(15, 38, 48, .55);
}
/* The Windows "press" tilt */
a.ppd-tile:active, button.ppd-tile:active {
  transform: perspective(600px) rotateX(4deg) scale(.97);
}

.ppd-tile--s { grid-column: span 1; grid-row: span 1; padding: 8px; }
.ppd-tile--m { grid-column: span 2; grid-row: span 2; }
.ppd-tile--w { grid-column: span 4; grid-row: span 2; }
.ppd-tile--l { grid-column: span 4; grid-row: span 4; }
@media (max-width: 639px) {
  .ppd-tile--l { grid-row: span 3; }
}

/* Colours. Navy text on the bright brand colours keeps it readable. */
.ppd-tile--blue   { background: var(--ppd-blue);   color: var(--ppd-navy); }
.ppd-tile--navy   { background: var(--ppd-navy);   color: #fff; }
.ppd-tile--light  { background: var(--ppd-light);  color: var(--ppd-navy); }
.ppd-tile--grey   { background: var(--ppd-grey);   color: #fff; }
.ppd-tile--orange { background: var(--ppd-orange); color: var(--ppd-navy); }
.ppd-tile--pink   { background: var(--ppd-pink);   color: var(--ppd-navy); }
.ppd-tile--green  { background: var(--ppd-green);  color: var(--ppd-navy); }
.ppd-tile--purple { background: var(--ppd-purple); color: var(--ppd-navy); }
.ppd-tile--image  { background: var(--ppd-navy) center / cover no-repeat; color: #fff; }
.ppd-tile--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 38, 48, .85), rgba(15, 38, 48, 0) 60%);
}
.ppd-tile--image > * { position: relative; z-index: 1; }

.ppd-tile__icon {
  width: 34%;
  max-width: 64px;
  min-width: 22px;
  aspect-ratio: 1;
  align-self: center;
  margin: auto 0;
}
.ppd-tile--w .ppd-tile__icon, .ppd-tile--l .ppd-tile__icon { width: 22%; }
.ppd-tile__icon svg { width: 100%; height: 100%; display: block; }

.ppd-tile__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
}
.ppd-tile__title {
  margin: 0;
  font-family: var(--ppd-font-display);
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 700;
  line-height: 1.2;
}
/* Tile text takes the tile's colour, not the page heading colour. */
.ppd .ppd-tile__title, .ppd .ppd-tile__stat { color: inherit; }
.ppd-tile--l .ppd-tile__title { font-size: clamp(22px, 2.4vw, 34px); font-weight: 800; }
.ppd-tile--s .ppd-tile__title { font-size: clamp(11px, .95vw, 13px); line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; }
.ppd-tile--s .ppd-tile__icon { width: 30%; }
.ppd-tile__text {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
}
.ppd-tile--m .ppd-tile__text { display: none; }
@media (min-width: 1280px) { .ppd-tile--m .ppd-tile__text { display: block; font-size: 13px; } }
.ppd-tile__stat {
  font-family: var(--ppd-font-display);
  font-size: clamp(32px, 4.2vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Live tiles: faces stacked vertically; .is-live slides to the next one.
   Each face fills the tile. */
.ppd-tile--live { padding: 0; }
.ppd-tile__faces {
  position: absolute;
  inset: 0;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.ppd-tile__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px;
}
@media (prefers-reduced-motion: reduce) {
  .ppd-tile, .ppd-tile__faces { transition: none; }
}

/* Search highlighting: matches stay, the rest fade back. */
.ppd-tiles.is-searching .ppd-tile:not(.is-match) { opacity: .18; }
.ppd-tiles.is-searching .ppd-tile.is-match { box-shadow: inset 0 0 0 3px var(--ppd-navy); }

/* 5. Search box ------------------------------------------------------------- */
.ppd-search {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 3px solid var(--ppd-navy);
  border-radius: var(--ppd-radius);
}
.ppd-search__input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--ppd-navy);
  font: 600 clamp(16px, 2vw, 22px)/1.2 var(--ppd-font-body);
}
.ppd-search__input:focus { outline: none; }
.ppd-search:focus-within { box-shadow: 0 0 0 4px var(--ppd-blue); }
.ppd-search__btn {
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  background: var(--ppd-navy);
  color: #fff;
  font: 700 16px var(--ppd-font-body);
  cursor: pointer;
}
.ppd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ppd-chip {
  padding: 6px 12px;
  border: 1px solid var(--ppd-navy);
  border-radius: var(--ppd-radius);
  background: transparent;
  color: var(--ppd-navy);
  font: 600 13px var(--ppd-font-body);
  cursor: pointer;
}
.ppd-chip:hover { background: var(--ppd-navy); color: #fff; }

/* 6. Notice bar ------------------------------------------------------------- */
.ppd-notice {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  background: var(--ppd-navy);
  color: #fff;
  font-size: 14px;
}
.ppd-notice__tag {
  flex: none;
  padding: 2px 8px;
  background: var(--ppd-blue);
  color: var(--ppd-navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ppd-notice--orange .ppd-notice__tag { background: var(--ppd-orange); }
.ppd-notice--pink   .ppd-notice__tag { background: var(--ppd-pink); }
.ppd-notice a { color: var(--ppd-blue); font-weight: 700; }

/* 7. Utilities -------------------------------------------------------------- */
.ppd-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
@media (min-width: 640px) { .ppd-wrap { padding: 0 24px; } }
.ppd-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 8. Area pages ---------------------------------------------------------------
   The same three levels in every PPd product:
     1. a tile menu  →  2. an area page (rail + coloured band + sub-tiles)  →  3. a working screen
   An area keeps its colour at every level so people always know where they are.

   <div class="ppd-area">
     <nav class="ppd-rail">  <a class="ppd-rail__item ppd-c--orange is-active">…</a>  </nav>
     <div class="ppd-area__main">
       <header class="ppd-band ppd-c--orange">…</header>
       <div class="ppd-tiles"><div class="ppd-tiles__grid">…</div></div>
     </div>
   </div>
*/

/* Colour pairs (background + readable text) for any element. */
.ppd-c--blue   { background: var(--ppd-blue);   color: var(--ppd-navy); }
.ppd-c--navy   { background: var(--ppd-navy);   color: #fff; }
.ppd-c--light  { background: var(--ppd-light);  color: var(--ppd-navy); }
.ppd-c--grey   { background: var(--ppd-grey);   color: #fff; }
.ppd-c--orange { background: var(--ppd-orange); color: var(--ppd-navy); }
.ppd-c--pink   { background: var(--ppd-pink);   color: var(--ppd-navy); }
.ppd-c--green  { background: var(--ppd-green);  color: var(--ppd-navy); }
.ppd-c--purple { background: var(--ppd-purple); color: var(--ppd-navy); }

.ppd-area {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ppd-gap);
}
@media (min-width: 900px) {
  .ppd-area { grid-template-columns: 88px minmax(0, 1fr); align-items: start; }
}
.ppd-area__main { min-width: 0; display: grid; gap: 28px; }

/* Rail: the main tiles, shrunk to a strip. Left column on desktop,
   a scrolling row on phones. */
.ppd-rail {
  display: flex;
  gap: var(--ppd-gap);
  overflow-x: auto;
  scrollbar-width: none;
}
@media (min-width: 900px) {
  .ppd-rail { flex-direction: column; overflow: visible; position: sticky; top: 88px; }
}
.ppd-rail__item {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 72px;
  height: 72px;
  padding: 8px;
  box-sizing: border-box;
  text-decoration: none;
  font: 700 11px/1.1 var(--ppd-font-body);
  transition: transform .12s ease-out, box-shadow .12s;
}
@media (min-width: 900px) { .ppd-rail__item { width: 88px; height: 88px; font-size: 12px; } }
.ppd-rail__item svg { width: 26px; height: 26px; }
.ppd-rail__item:hover { box-shadow: inset 0 0 0 3px rgba(15, 38, 48, .55); }
.ppd-rail__item:active { transform: perspective(400px) rotateX(5deg) scale(.95); }
.ppd-rail__item.is-active { box-shadow: inset 0 0 0 4px var(--ppd-navy); }
.ppd-rail__item.ppd-c--navy.is-active { box-shadow: inset 0 0 0 4px var(--ppd-blue); }
@media (min-width: 900px) {
  /* A notch pointing at the page you are on */
  .ppd-rail__item.is-active::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    border: 6px solid transparent;
    border-left-color: var(--ppd-navy);
    transform: translateY(-50%);
  }
}

/* Band: the coloured header of an area page. */
.ppd-band {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 36px);
}
@media (min-width: 900px) {
  .ppd-band { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.ppd-band__kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}
.ppd .ppd-band__title {
  margin: 6px 0 8px;
  color: inherit;
  font-size: clamp(34px, 5vw, 64px);
}
.ppd-band__text { margin: 0; max-width: 640px; font-size: clamp(15px, 1.4vw, 18px); }
.ppd-band__icon { width: clamp(56px, 7vw, 96px); height: clamp(56px, 7vw, 96px); }
.ppd-band__icon svg { width: 100%; height: 100%; }
.ppd-band .ppd-btn { background: var(--ppd-navy); border-color: var(--ppd-navy); color: #fff; }
.ppd-band.ppd-c--navy .ppd-btn { background: var(--ppd-blue); border-color: var(--ppd-blue); color: var(--ppd-navy); }

.ppd-section-label {
  margin: 0 0 12px;
  font: 700 16px/1.2 var(--ppd-font-body);
  color: var(--ppd-navy);
}

/* 9. Bootstrap 5 in PPd colours -----------------------------------------------
   Load Bootstrap 5 first, then this file, and put class="ppd" on <body>.
   Bootstrap keeps doing layout and forms; these lines make it look PPd:
   square edges, PPd fonts, navy as the primary colour. */
.ppd {
  --bs-body-font-family: var(--ppd-font-body);
  --bs-body-color: var(--ppd-navy);
  --bs-body-bg: var(--ppd-bg);
  --bs-primary: #0F2630;
  --bs-primary-rgb: 15, 38, 48;
  --bs-link-color: #0F2630;
  --bs-link-color-rgb: 15, 38, 48;
  --bs-link-hover-color: #1d3d4b;
  --bs-link-hover-color-rgb: 29, 61, 75;
  --bs-border-color: var(--ppd-line);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-focus-ring-color: rgba(81, 195, 239, .5);
}
.ppd .btn-primary {
  --bs-btn-bg: var(--ppd-navy);
  --bs-btn-border-color: var(--ppd-navy);
  --bs-btn-hover-bg: #1d3d4b;
  --bs-btn-hover-border-color: #1d3d4b;
  --bs-btn-active-bg: #1d3d4b;
  --bs-btn-active-border-color: #1d3d4b;
  --bs-btn-disabled-bg: var(--ppd-navy);
  --bs-btn-disabled-border-color: var(--ppd-navy);
  font-weight: 700;
}
.ppd .btn-info {
  --bs-btn-bg: var(--ppd-blue);
  --bs-btn-border-color: var(--ppd-blue);
  --bs-btn-color: var(--ppd-navy);
  --bs-btn-hover-bg: #3fb3e2;
  --bs-btn-hover-border-color: #3fb3e2;
  --bs-btn-hover-color: var(--ppd-navy);
  font-weight: 700;
}
.ppd .form-control:focus, .ppd .form-select:focus {
  border-color: var(--ppd-blue);
  box-shadow: 0 0 0 .2rem rgba(81, 195, 239, .35);
}
.ppd .form-label { font-weight: 700; font-size: 14px; }
.ppd .form-control, .ppd .form-select { background-color: #fff; }
.ppd .form-check-input:checked { background-color: var(--ppd-navy); border-color: var(--ppd-navy); }
.ppd .form-check-input:focus { border-color: var(--ppd-blue); box-shadow: 0 0 0 .2rem rgba(81, 195, 239, .35); }

/* 10. Cards, messages, colour choice, PIN boxes, keypad ----------------------- */
.ppd-card {
  background: var(--ppd-surface);
  border: 1px solid var(--ppd-line);
  border-top: 4px solid var(--ppd-blue);
  padding: clamp(20px, 3vw, 32px);
}
.ppd-card__title {
  margin: 0 0 4px;
  font: 800 clamp(22px, 2.4vw, 28px)/1.15 var(--ppd-font-display);
  letter-spacing: -0.02em;
  color: var(--ppd-navy);
}
.ppd-card__sub { margin: 0 0 20px; color: var(--ppd-text-soft); }
.ppd-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--ppd-text-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ppd-divider::before, .ppd-divider::after { content: ""; flex: 1; height: 1px; background: var(--ppd-line); }

/* Messages: a coloured bar on the left, square, no rounded boxes. */
.ppd-msg {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 6px solid var(--ppd-blue);
  background: var(--ppd-light);
  color: var(--ppd-navy);
  font-size: 14px;
  font-weight: 600;
}
.ppd-msg--error   { border-left-color: var(--ppd-pink);  background: #FDE7EE; }
.ppd-msg--success { border-left-color: var(--ppd-green); background: #E3F8EC; }
.ppd-msg--warning { border-left-color: var(--ppd-orange); background: #FFEFE2; }

/* Colour choice: radio buttons shown as colour tiles.
   <div class="ppd-swatches"><label class="ppd-swatch"><input type="radio" …>
     <span class="ppd-swatch__chip" style="background:#0000ff"></span><span>Blue</span></label></div> */
.ppd-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--ppd-gap);
}
.ppd-swatch { position: relative; display: block; cursor: pointer; margin: 0; }
.ppd-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.ppd-swatch__chip {
  display: block;
  aspect-ratio: 1;
  border: 1px solid rgba(15, 38, 48, .15);
  transition: transform .1s, box-shadow .1s;
}
.ppd-swatch__name { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; text-align: center; }
.ppd-swatch:hover .ppd-swatch__chip { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .6); }
.ppd-swatch:active .ppd-swatch__chip { transform: scale(.95); }
.ppd-swatch input:checked + .ppd-swatch__chip { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ppd-navy); }
.ppd-swatch input:focus-visible + .ppd-swatch__chip { outline: 3px solid var(--ppd-blue); outline-offset: 4px; }

/* PIN boxes */
.ppd-pin { display: flex; justify-content: center; gap: 8px; margin: 8px 0 20px; }
.ppd-pin input {
  width: 44px;
  height: 52px;
  padding: 0;
  border: 2px solid var(--ppd-line);
  border-radius: 0;
  background: #fff;
  color: var(--ppd-navy);
  text-align: center;
  font: 800 24px var(--ppd-font-body);
}
.ppd-pin input.is-filled { border-color: var(--ppd-navy); }

/* Keypad: big square tiles, easy for fingers and gloves. */
.ppd-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ppd-gap);
  max-width: 320px;
  margin: 0 auto;
}
.ppd-key {
  height: 64px;
  border: 0;
  border-radius: 0;
  background: var(--ppd-light);
  color: var(--ppd-navy);
  font: 800 24px var(--ppd-font-body);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .1s, background .1s;
}
.ppd-key:hover { background: #cfdff0; color: var(--ppd-navy); }
.ppd-key:active { transform: perspective(300px) rotateX(6deg) scale(.95); }
.ppd-key--action { background: var(--ppd-grey); color: #fff; font-size: 14px; font-weight: 700; }
.ppd-key--action:hover { background: #3f3f42; color: #fff; }
.ppd-key--go { background: var(--ppd-blue); color: var(--ppd-navy); font-size: 16px; }
.ppd-key--go:hover { background: #3fb3e2; }
.ppd-key:disabled { opacity: .35; cursor: default; transform: none; }