/* PPR Loyalty Card */
.ppr-card{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px 20px; border-radius:16px; border:1px solid #e5e7eb;
  background: #0b0c10; color:#fff; box-shadow: 0 6px 20px rgba(0,0,0,.08);
  margin: 18px 0;
}
.ppr-card__left{ display:flex; flex-direction:column; gap:6px; min-width:220px }
.ppr-card__logo{ width:120px; height:auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.ppr-card__logo--text{ font-weight:700; font-size:18px; }
.ppr-card__title{ font-size:14px; opacity:.85; letter-spacing:.02em }
.ppr-card__name{ font-size:16px; font-weight:600 }
.ppr-card__number{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; opacity:.8 }

.ppr-card__right{ display:flex; align-items:flex-end; gap:24px; margin-left:auto; flex-wrap:wrap }
.ppr-card__points{ font-size:14px; text-align:right }
.ppr-card__points-num{ display:block; font-size:28px; font-weight:800; line-height:1 }
.ppr-card__value{ font-size:14px; opacity:.9 }

.ppr-card__barcode{ display:flex; flex-direction:column; align-items:center; gap:6px; background:#fff; color:#111;
  padding:8px 10px; border-radius:8px; border:1px solid #e5e7eb }
.ppr-card__bars{
  width:180px; height:48px; background:
  repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px);
}
.ppr-card__digits{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; letter-spacing:2px }
@media (max-width: 640px){
  .ppr-card{ flex-direction:column; align-items:flex-start }
  .ppr-card__right{ width:100%; justify-content:space-between }
}

/* ===========================
   3D Piplup Plaza Loyalty Card
   =========================== */

.ppr-card3d { --brand:#2b8edd; --bg:#0b0f16; --bg2:#0f1520; --gloss:rgba(255,255,255,.25);
  perspective: 1200px; margin: 12px 0 8px;
}
.ppr-card3d-inner{
    position: relative;
    width: 100%;
    max-width: 490px;
    height: 260px;
    transform-style: preserve-3d;
    transition: transform .7s 
cubic-bezier(.2, .6, .2, 1);
}
.ppr-card3d:not(.is-flipped):hover .ppr-card3d-inner{
  transform: rotateX(2deg) rotateY(6deg);
}
.ppr-card3d.is-flipped .ppr-card3d-inner{ transform: rotateY(180deg); }

.ppr-card-face{
  position:absolute; inset:0; border-radius:18px; overflow:hidden; backface-visibility:hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.18);
}
.ppr-card-front{
  background:
    radial-gradient(1200px 400px at 10% 0%, rgb(43 142 221), transparent 60%), linear-gradient(135deg, #29313f, #000000);
  color:#fff; display:flex; align-items:center; justify-content:space-between;     padding: 50px 22px; position:relative;
}
.ppr-card-front:after{
  content:""; position:absolute; inset:-30% -30%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.12) 45%, transparent 60%);
  transform: translate3d(-10%, -10%, 0) rotate(8deg);
  transition: transform .8s ease;
}
.ppr-card3d:hover .ppr-card-front:after{
  transform: translate3d(10%, 10%, 0) rotate(12deg);
}

.ppr-card-front__left{ display:flex; flex-direction:column; gap:6px; min-width: 200px; }
.ppr-card__logo{   width: 160px;  /* was 120px */
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.ppr-card__logo--text{ font-weight:800; font-size:20px; letter-spacing:.3px; color:#fff; }
.ppr-card__title{ font-size:12px; letter-spacing:.04em; opacity:.85; }
.ppr-card__name{ font-size:16px; font-weight:700; }
.ppr-card__number{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; opacity:.9; letter-spacing:1px; }

.ppr-card-front__right{ display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-left:auto; }
.ppr-card__points{ text-align:right; font-size:12px; opacity:.9 }
.ppr-card__points-num{ display:block; font-size:28px; font-weight:800; line-height:1; color:#fff }
.ppr-card__value{ font-size:12px; opacity:.9 }

.ppr-card__barcode{
  background:#fff; color:#111; padding:8px 10px; border-radius:10px; border:1px solid #e5e7eb; min-width: 200px;
}
.ppr-card__bars{
  width:180px; height:48px;
  background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px);
}
.ppr-card__digits{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; letter-spacing:2px; text-align:center; margin-top:4px
}

.ppr-card-back{
  transform: rotateY(180deg);
  background:
    linear-gradient(135deg, var(--bg2), var(--bg));
  color:#e7eef7; padding:18px 22px;
}
.ppr-card-back__wrap{ position:relative; height:100%; }
.ppr-card__magstripe{
  height: 42px; border-radius: 8px; margin: 4px 0 16px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.7) 0 6px, rgba(0,0,0,.6) 6px 12px);
}
.ppr-card__note{ font-size:13px; line-height:1.35; max-width: 70%; opacity:.95 }
.ppr-card__mini{ position:absolute; right:16px; bottom:16px; text-align:center }
.ppr-card__mini .ppr-card__bars{ width:140px; height:38px }
.ppr-card__digits.--mini{ font-size:11px; letter-spacing:1.5px; color:#cfe6ff }

.ppr-card3d-toggle{
  margin-top:10px; border:0; background: var(--brand); color:#fff; font-weight:700;
  padding:7px 12px; border-radius:10px; cursor:pointer;
  box-shadow: 0 6px 14px rgba(43,142,221,.35);
}
.ppr-card3d-toggle:hover{ filter: brightness(1.05); }
.ppr-card3d-toggle:active{ transform: translateY(1px); }

/* Compact op mobiel */
@media (max-width: 540px){
  .ppr-card3d-inner{ height: 200px; }
.ppr-card__logo{ width: 120px; }
  .ppr-card__barcode{ min-width: 160px; }
  .ppr-card__bars{ width: 150px; height: 42px; }
}

/* ===== Holo Piplup overlay (subtiel) ===== */
.ppr-card-front { position: relative; overflow: hidden; }
.has-holo .ppr-holo-pattern,
.has-holo .ppr-holo-sheen,
.has-holo .ppr-holo-sparkles {
  position:absolute; inset:0; pointer-events:none; z-index:1;
}

/* Tegelpatroon van je piplup-holo.svg */
.has-holo .ppr-holo-pattern{
  background-image: var(--holo-url);
  background-repeat: repeat;
  background-size: 120px auto;     /* groter/kleiner = dichter/ruimer patroon */
  opacity: .12;                     /* subtiel! */
  mix-blend-mode: screen;           /* laat licht door op donkere kaart */
  animation: pprHoloPan 16s linear infinite;
  filter: saturate(1.1) hue-rotate(6deg);
}

/* Zachte glans die diagonaal schuift */
.has-holo .ppr-holo-sheen{
  background:
   linear-gradient(115deg, transparent 35%, rgba(255,255,255,.10) 46%, transparent 60%),
   radial-gradient(500px 220px at 0% 0%, rgba(43,142,221,.18), transparent 70%);
  opacity: .6;
  mix-blend-mode: screen;
  animation: pprHoloSheen 7s ease-in-out infinite;
}

/* Kleine sparkles (heel fijn gestrooid) */
.has-holo .ppr-holo-sparkles{
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.35), transparent 45%),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,.28), transparent 45%),
    radial-gradient(1.8px 1.8px at 40% 80%, rgba(255,255,255,.32), transparent 45%),
    radial-gradient(1.2px 1.2px at 85% 20%, rgba(255,255,255,.25), transparent 45%);
  mix-blend-mode: screen;
  animation: pprHoloSpark 4.5s ease-in-out infinite;
  opacity: .25;
}

/* Zorg dat kaartcontent boven de overlay blijft */
.ppr-card-front__left, .ppr-card-front__right { position: relative; z-index: 2; }

/* Animaties */
@keyframes pprHoloPan {
  0%   { background-position: 0 0; }
  50%  { background-position: 60px 40px; }
  100% { background-position: 120px 80px; }
}
@keyframes pprHoloSheen {
  0%,100% { transform: translate3d(-8%, -6%, 0) rotate(8deg); opacity:.55; }
  50%     { transform: translate3d( 8%,  6%, 0) rotate(12deg); opacity:.75; }
}
@keyframes pprHoloSpark {
  0%,100% { filter: brightness(1);   opacity:.20; }
  50%     { filter: brightness(1.25); opacity:.30; }
}

/* Barcode container blijft gelijk */
.ppr-card__barcode{
  background:#fff; color:#111; padding:8px 10px; border-radius:10px; border:1px solid #e5e7eb; min-width: 200px;
}

/* SVG zelf i.p.v. achtergrondgradient */
.ppr-barcode-svg{
  display:block;
  width:220px;
  height:56px;
}

/* Digits onder de barcode */
.ppr-card__digits{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; letter-spacing:2px; text-align:center; margin-top:4px;
}

/* ==== Piplup Plaza - Redeem box ==== */
.ppr-redeem-box{
    --brand: #2b8edd;
    background: #fff;
    padding: 14px 16px;
    margin: 14px 0 18px;
}

.ppr-redeem-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px;
}
.ppr-redeem-title{
  margin:0; font-size:16px; line-height:1.2; font-weight:800; letter-spacing:.2px; color:#111827;
}
.ppr-redeem-balance{ font-size:14px; color:#111; display:flex; align-items:center; gap:8px; }
.ppr-redeem-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--brand); color:#fff; font-weight:700; border-radius:999px; padding:6px 10px;
  box-shadow:0 6px 14px rgba(43,142,221,.25);
}

.ppr-redeem-controls{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:2px;
}
.ppr-redeem-input{
  width:140px; height:40px;
  border:1px solid #d8dee8; border-radius:10px; padding:0 10px; font-size:16px;
  background:#f8fafc; color:#111;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.ppr-redeem-input:focus{
  outline:0; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(43,142,221,.20); background:#fff;
}

/* Buttons */
.ppr-btn{
  height:40px; border-radius:10px; padding:0 14px; letter-spacing:.2px;
  border:1px solid transparent; cursor:pointer; transition:filter .2s, transform .02s, background .2s, border .2s;
}
.ppr-btn:active{ transform:translateY(1px); }

.ppr-btn-primary{
  background:var(--brand); color:#fff; box-shadow:0 8px 16px rgba(43,142,221,.28);
}
.ppr-btn-primary:hover{ filter:brightness(1.05); }

.ppr-btn-ghost{
  background:#eef3f9; color:#111; border-color:#d8dee8;
}
.ppr-btn-ghost:hover{ filter:brightness(1.04); }

/* Help & message */
.ppr-redeem-help{ margin:8px 0 0; font-size:12px; color:#6b7280; }
.ppr-redeem-msg{ min-height:18px; margin-top:6px; font-size:13px; font-weight:600; color:#2b8edd; }

/* Mobiel compact */
@media (max-width: 520px){
  .ppr-redeem-head{ flex-direction:column; align-items:flex-start; gap:6px; }
  .ppr-redeem-input{ width:120px; }
}

/* Snelle knoppen + 1-lijn mobiel */
.ppr-quick{ display:flex; gap:6px; align-items:center; }
.ppr-chip{
  height:34px; padding:0 10px; border-radius:999px; border:1px solid #d8dee8;
  background:#f3f6fb; color:#111; cursor:pointer;
  transition:filter .2s, transform .02s, background .2s, border .2s;
}
.ppr-chip:hover{ filter:brightness(1.03); }
.ppr-chip:active{ transform:translateY(1px); }

/* Alles in één rij op small screens – met zachte horizontale scroll als het krap wordt */
@media (max-width: 520px){
  .ppr-redeem-controls{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap:8px;
  }
  .ppr-redeem-input{ width:90px; height:38px; }
  .ppr-btn{ height:38px; padding:0 10px; }
  .ppr-chip{ height:32px; padding:0 8px; font-size:13px; }
  .ppr-redeem-controls::-webkit-scrollbar{ display:none; } /* clean look */
}

.ppr-redeem-guest { background: white; border-color:#e5edf6; }
.ppr-redeem-guest .ppr-redeem-title { margin-bottom:6px; }

.ppr-shop-head{ margin:8px 0 14px; }
.ppr-shop-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:#eef5fd; color:#0f172a; border:1px solid #dbeafe;
  padding:8px 12px; border-radius:10px; font-weight:600;
}
.ppr-points-grid .ppr-points-item{ position:relative; }
.ppr-points-badge{
  margin:8px 0 10px; padding:10px; border:1px solid #e6ebf3; border-radius:10px;
  background:#fff; font-size:13px; line-height:1.35;
}
.ppr-points-line{ margin:2px 0; }
.ppr-points-chip{
  display:inline-block; margin-top:6px; padding:4px 8px; border-radius:999px;
  background:#f1f5f9; border:1px solid #e2e8f0; font-weight:700; font-size:12px;
}
.ppr-ok{ background:#d1fae5; border-color:#a7f3d0; color:#065f46; }

.ppr-product-card .ppr-points-price{
  display:block; margin:6px 0 8px; font-weight:800;
}
.ppr-points-chip{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:#d1fae5; border:1px solid #a7f3d0; color:#065f46; font-size:12px; font-weight:700;
  margin-bottom:8px;
}

.ppr-points-price{ display:block; margin:6px 0 8px; font-weight:800; }
.ppr-points-chip{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:#d1fae5; border:1px solid #a7f3d0; color:#065f46; font-size:12px; font-weight:700;
  margin-bottom:8px;
}

/* ========== Piplup Plaza – Mijn punten (kaart + tabel + datumveld) ========== */

/* 1) Info/metadata onder de titel */
.ppr-balance {
  margin: 2px 0 14px;
  color: #667085;
  font-size: 14px;
}

/* 2) Transactietabel */
.ppr-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--pp-border, #e7e7ec);
  border-radius: 12px;
  overflow: hidden; /* rondingen zichtbaar */
}
.ppr-table thead th {
  background: #f6f9ff;
  color: #0f172a;
  font-weight: 800;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--pp-border, #e7e7ec);
  font-size: 14px;
}
.ppr-table tbody td {
  padding: 14px;
  border-bottom: 1px solid #eef1f5;
  font-size: 14px;
}
.ppr-table tbody tr:last-child td { border-bottom: 0; }
.ppr-table tbody tr:hover td { background: #f9fbff; }

/* negatieve/positieve punten licht accent (optioneel) */
.ppr-table td.--neg { color: #b42318; font-weight: 700; }
.ppr-table td.--pos { color: #0b7a28; font-weight: 700; }

/* 3) Geboortedatum sectie */
.ppr-bday {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--pp-border, #e7e7ec);
}
.ppr-bday-label { 
  display: block; 
  margin: 0 0 8px; 
  font-weight: 800; 
}
.ppr-bday-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.ppr-input-date {
  height: 42px;
  border: 1px solid var(--pp-border, #e7e7ec);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 16px;
  background: #f8fafc;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.ppr-input-date:focus{
  outline: none;
  border-color: var(--pp-primary, #2b8edd);
  box-shadow: 0 0 0 3px rgba(43,142,221,.20);
  background: #fff;
}
.ppr-bday .ppr-btn-primary { height: 42px; }

/* subtiele uitleg */
.ppr-bday-help { margin-top: 8px; font-size: 12px; color: #6b7280; }

/* mobiel netjes op één lijn */
@media (max-width: 520px){
  .ppr-bday-row { gap: 8px; }
  .ppr-input-date, .ppr-bday .ppr-btn-primary { height: 40px; }
}

/* ===========================
   PPR Loyalty Card – Mobile fix
   =========================== */

/* Basis: zorg dat de kaart nooit breder is dan het scherm */
.ppr-card3d,
.ppr-card3d-inner,
.ppr-card-face { max-width: 100%; }

/* Maak hoogte mee-schaalbaar met schermbreedte */
.ppr-card3d-inner{
  width:100%;
  height: clamp(180px, 56vw, 260px);   /* min–fluid–max */
}

/* Minder grote padding op mobiel */
.ppr-card-front{
  padding: clamp(14px, 4vw, 22px);
}

/* Logo en typografie schalen mee */
.ppr-card__logo{ width: clamp(90px, 28vw, 120px); }
.ppr-card__logo--text{ font-size: clamp(16px, 5vw, 20px); }
.ppr-card__name{ font-size: clamp(14px, 4.4vw, 16px); }
.ppr-card__number{ letter-spacing: .5px; }

/* Punten/blok rechts compacter */
.ppr-card-front__right{ gap: 12px; }
.ppr-card__points-num{ font-size: clamp(18px, 6vw, 28px); }
.ppr-card__value, .ppr-card__points{ font-size: clamp(11px, 3.4vw, 12px); }

/* Barcode schaalt mee en breekt niet uit de kaart */
.ppr-card__barcode{
  min-width: auto;
  padding: 6px 8px;
  border-radius: 8px;
}
.ppr-card__bars{
  width: clamp(120px, 44vw, 180px);
  height: clamp(34px, 12vw, 48px);
}
.ppr-card__digits{
  font-size: clamp(10px, 3.2vw, 12px);
  letter-spacing: 1.6px;
}

/* Heel smal: layout stapelt, barcode naar rechts onder */
@media (max-width: 600px){
  .ppr-card-front{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;
    align-items: start;
  }
  .ppr-card-front__left{ min-width: 0; }
  .ppr-card-front__right{
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
  .ppr-card__barcode{ justify-self: end; }
}

/* Veiligheid: geen tilt/hover-effect op touchscreen (scheelt artefacts) */
@media (hover: none){
  .ppr-card3d:not(.is-flipped) .ppr-card3d-inner{ transform: none !important; }
}

/* Optioneel: iets subtielere holo op mobiel (performance & leesbaarheid) */
@media (max-width: 480px){
  .has-holo .ppr-holo-pattern{ opacity:.08; background-size: 90px auto; }
  .has-holo .ppr-holo-sheen{ opacity:.45; }
  .has-holo .ppr-holo-sparkles{ opacity:.18; }
}

/* Voorkom horizontale scroll binnen My Account */
.woocommerce-account .entry-content{ overflow-x: hidden; }