/* Compacte Coolblue-achtige account dropdown */
.pp-acct{ position: relative; z-index: 200; }
.pp-acct__btn{
  display:flex; align-items:center; gap:8px;
  background:transparent; border:0; cursor:pointer; padding:8px 10px;
  font-weight:800; border-radius:10px; transition: background .15s;
}
.pp-acct__btn:hover{ background: rgba(31,111,214,.08); }
.pp-acct__icon{ position:relative; display:inline-flex; }
.pp-acct__icon svg{ display:block }
.pp-acct__dot{
  position:absolute; right:-1px; top:-2px; width:10px; height:10px; border-radius:999px;
  background:#18c964; box-shadow:0 0 0 2px #fff;
}
.pp-acct__label{ line-height:1; }
.pp-acct__chev{ font-size:12px; opacity:.7; }

.pp-acct__panel{
  position:absolute; right:0; top:calc(100% + 10px);
  width:min(360px, 92vw);
  background:#fff; border:1px solid #e7e7ec; border-radius:16px;
  box-shadow:0 20px 40px rgba(16,24,40,.14);
  padding:16px; display:none;
}
.pp-acct__panel[aria-hidden="false"]{ display:block; }

.pp-acct__head{ margin:2px 2px 10px; }
.pp-acct__h1{ font-size:24px; font-weight:900; letter-spacing:.2px; }
.pp-acct__dotH1{ color:#1f6fd6; }
.pp-acct__h2{ font-size:18px; margin-top:4px; color:#475569; font-weight:800; }

.pp-acct__list{ list-style:none; padding:6px 0 0; margin:0; }
.pp-acct__list li + li{ margin-top:8px; }
.pp-acct__list a{ display:block; padding:10px 8px; border-radius:10px; text-decoration:none; color:#0b1930; font-weight:700; }
.pp-acct__list a:hover{ background:#f6f9ff; color:#1f6fd6; }

.pp-acct__cta{
  display:block; margin:14px 2px 8px; text-align:center;
  background:#18c964; color:#fff; font-weight:900; border-radius:12px; padding:12px 14px;
}
.pp-acct__cta:hover{ filter:brightness(0.97); }

.pp-acct__sub{ margin:6px 2px 0; font-size:14px; color:#475569; }
.pp-acct__sub a{ font-weight:800; color:#1f6fd6; text-decoration:none; }
.pp-acct__sub a:hover{ text-decoration:underline; }

@media (max-width: 840px){
  .pp-acct__panel{ right: -8px; }
}

/* Kleur-tokens van je site */
:root{
  --pp-radius: 16px;
  --pp-border: #e7e7ec;
  --pp-text: #0b1930;
  --pp-muted: #667085;
  --pp-primary: var(--wp--preset--color--primary, #2b8edd); /* jouw PP blauw */
  --pp-primary-600: #1f6fd6;
  --pp-panel-shadow: 0 22px 48px rgba(16,24,40,.16);
}

/* Panel */
.pp-acct__panel{
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-panel-shadow);
}

/* Kop en accenten */
.pp-acct__h1{ color: var(--pp-text); }
.pp-acct__dotH1{ color: var(--pp-primary); }
.pp-acct__h2{ color: var(--pp-muted); }

/* Lijstlinks */
.pp-acct__list a{ color: var(--pp-text);        background: #f6f6f6; }
.pp-acct__list a:hover{
  background: color-mix(in srgb, var(--pp-primary) 8%, #fff);
  color: var(--pp-primary);
}

/* CTA-knop in PP-blauw i.p.v. groen */
.pp-acct__cta{
  background: var(--pp-primary);
}
.pp-acct__cta:hover{
  background: var(--pp-primary-600);
}

/* Dot bij ingelogd */
.pp-acct__dot{
  background: #1ec56d; /* mag ook var(--pp-accent-success) als je die hebt */
  box-shadow: 0 0 0 2px #fff;
}

/* Basis: zorg dat het paneel boven alles komt */
.pp-acct { position: relative; z-index: 100; } /* basis */
.pp-acct__panel { z-index: 10010; }
.pp-acct__overlay { z-index: 10000; }

/* Overlay: default weg, bij open tonen */
.pp-acct__overlay{
  position: fixed;
  inset: 0;
  background: rgba(16,24,40,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.pp-acct--open .pp-acct__overlay{
  opacity: 1;
  pointer-events: auto;
}

/* Mobile layout */
@media (max-width: 900px){

  /* Zet anker niet relative – we gebruiken fixed panel */
  .pp-acct{ position: static;     order: 3;}

  .pp-acct__panel{
    position: fixed;
    left: 12px;
    right: 12px;
    /* hoogte van je header: pas evt. aan */
    top: calc(var(--pp-header-h, 64px) + 8px);

    bottom: auto;
    width: auto;
    min-width: 0;
    max-height: calc(100vh - var(--pp-header-h, 64px) - 24px);
    overflow: auto;

    border-radius: 16px;
    border: 1px solid var(--pp-border, #e7e7ec);
    background: #fff;
    box-shadow: 0 22px 48px rgba(16,24,40,.16);

    /* geen transform origin hacks op mobiel */
    transform: none;
  }

  /* Ruimtes en tappable sizes iets vergroten */
  .pp-acct__list a{
    padding: 14px 16px;
    font-size: 16px;
  }

  .pp-acct__cta{
    width: 100%;
    margin: 12px 0 0;
    font-size: 16px;
  }
}

/* Kleine polish algemeen */
.pp-acct__btn{
  display: inline-flex; align-items: center; gap: 0;
  background: white; /* zachte badge-look in jouw header */
  border: 1px solid #e8eefc;
  border-radius: 12px;
  padding: 8px 12px;
  line-height: 1;
  font-weight: 400;
}
.pp-acct__btn:hover{
  background: color-mix(in srgb, var(--pp-primary, #2b8edd) 7%, #fff);
  border-color: color-mix(in srgb, var(--pp-primary, #2b8edd) 18%, #e8eefc);
}

.pp-acct__cta{
  background: var(--pp-primary, #2b8edd) !important;
  box-sizing: border-box;
}
.pp-acct__cta:hover{
  background: var(--pp-primary-600, #1f6fd6) !important;
}