/* ===== Piplup Plaza — My Orders (Coolblue-style) ===== */

/* container (je pp-card bestaat al in account-core.css) */
.pp-order { margin-bottom: 18px; overflow: hidden; }

/* header */
.pp-order__header{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; margin:-8px -8px 12px; padding:8px;
  border-bottom:1px solid var(--pp-border, #e7e7ec);
}
.pp-order__meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:#667085; font-size:14px; }
.pp-order__meta a{ font-weight:800; text-decoration:none; }
.pp-order__status{ font-weight:700; color:#0b69d7; }
.pp-order__total{ font-weight:800; }

/* items */
.pp-order__items{
  list-style:none; margin:0 0 12px; padding:0;
  display:grid; grid-template-columns: 1fr; gap:10px;
}
@media (min-width: 700px){
  .pp-order__items{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1000px){
  .pp-order__items{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.pp-order__item{
  display:grid; grid-template-columns: 72px 1fr; gap:14px;
  padding:10px; border:1px solid var(--pp-border, #e7e7ec); border-radius:12px; background:#fff;
}
.pp-order__thumb img{ width:72px; height:72px; object-fit:contain; background:#f3f6fb; border-radius:8px; display:block; }
.pp-order__title{ display:inline-block; font-weight:800; color:#0f172a; text-decoration:none; }
.pp-order__title:hover{ text-decoration:underline; }
.pp-order__metaRow{ margin-top:4px; font-size:13px; color:#667085; display:flex; gap:12px; flex-wrap:wrap; }
.pp-order__qty{ font-weight:700; color:#0b69d7; }
.pp-order__attrs{ color:#667085; }

/* actions */
.pp-order__actions{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:8px;
  border-top:1px dashed #eef1f5; padding-top:12px;
}
.pp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 14px; border-radius:999px; border:0; cursor:pointer;
  text-decoration:none; font-weight:800; transition:transform .02s ease, box-shadow .2s ease, background .15s ease;
}
.pp-btn--primary{ background:#2aa7ff; color:#fff; box-shadow:0 8px 18px rgba(42,167,255,.25); }
.pp-btn--primary:hover{ background:#1f8fe6; }
.pp-btn--secondary{ background:#eef6ff; color:#0b69d7; }
.pp-btn--secondary:hover{ background:#e1f0ff; }

/* pagination align */
.pp-orders__pagination{ margin-top: 10px; }
.pp-orders__pagination ul{ display:flex; gap:6px; justify-content:flex-start; }
.pp-orders__pagination a, .pp-orders__pagination span{
  padding:8px 10px; border-radius:8px; background:#f6f7f9;
}

/* ===== Orders – neutraler palet + status badges ===== */

/* tokens (passen bij je bestaande core) */
:root{
  --pp-border: #e7e7ec;
  --pp-link: #1f6fd6;
  --pp-blue: #2aa7ff;
  --pp-blue-50: #eaf5ff;
  --pp-green: #22a06b;
  --pp-green-50: #eaf7f2;
  --pp-amber: #e6a100;
  --pp-amber-50: #fff6df;
  --pp-red: #d64545;
  --pp-red-50: #fdecec;
  --pp-slate-600: #475569;
  --pp-muted: #667085;
}

/* kaart */
.pp-order{
  margin-bottom: 18px;
  background:#fff;
  border:1px solid var(--pp-border);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(16,24,40,.06);
  padding:16px;
}

/* header: minder blauw, subtiele scheiding */
.pp-order__header{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin:-4px -4px 12px; padding:4px;
  border-bottom:1px solid var(--pp-border);
}
.pp-order__meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--pp-muted); font-size:14px; }
.pp-order__meta a{ font-weight:800; color:var(--pp-link); text-decoration:none; }
.pp-order__meta a:hover{ text-decoration:underline; }
.pp-order__total{ font-weight:800; color:#0f172a; }

/* status badge */
.pp-status{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; font-size:12px;
  background:#f1f5f9; color:var(--pp-slate-600);
}
.pp-status--completed,
.pp-status--afgerond{ background:var(--pp-green-50); color:var(--pp-green); }
.pp-status--processing,
.pp-status--inprogress,
.pp-status--verwerken{ background:var(--pp-blue-50); color:var(--pp-link); }
.pp-status--on-hold,
.pp-status--onhold,
.pp-status--inwachtrij{ background:var(--pp-amber-50); color:var(--pp-amber); }
.pp-status--cancelled,
.pp-status--geannuleerd{ background:var(--pp-red-50); color:var(--pp-red); }
.pp-status--refunded{ background:#eef2f7; color:#5b6776; }
.pp-status--failed,
.pp-status--mislukt{ background:var(--pp-red-50); color:var(--pp-red); }
.pp-status--pending,
.pp-status--inwachting{ background:#f4f6f9; color:#5b6776; }

/* items: rustige tegels, subtiele hover */
.pp-order__items{
  list-style:none; margin:0 0 12px; padding:0;
  display:grid; grid-template-columns:1fr; gap:10px;
}
@media (min-width: 700px){ .pp-order__items{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px){ .pp-order__items{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.pp-order__item{
  display:grid; grid-template-columns:72px 1fr; gap:14px;
  padding:10px;
  border:1px solid var(--pp-border);
  border-radius:12px;
  background:#fff;
  transition: box-shadow .2s, transform .02s, border-color .2s;
}
.pp-order__item:hover{ border-color:#dfe3ea; box-shadow:0 4px 10px rgba(16,24,40,.06); }

.pp-order__thumb img{
  width:72px; height:72px; object-fit:contain;
  background:#f6f7f9; border-radius:8px; display:block;
}

.pp-order__title{
  display:inline-block; font-weight:800; color:#0f172a; text-decoration:none;
}
.pp-order__title:hover{ color:var(--pp-link); text-decoration:underline; }

.pp-order__metaRow{
  margin-top:4px; font-size:13px; color:var(--pp-muted);
  display:flex; gap:12px; flex-wrap:wrap;
}
.pp-order__qty{ font-weight:700; color:#0f172a; } /* geen fel blauw meer */
.pp-order__attrs{ color:var(--pp-muted); }

/* acties: neutraler */
.pp-order__actions{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:8px;
  border-top:1px dashed #eef1f5; padding-top:12px;
}

.pp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 14px; border-radius:999px; border:1px solid #e1e6ee;
  background:#fff; color:#0f172a; font-weight:800; text-decoration:none;
  transition: background .15s, border-color .15s, box-shadow .2s;
}
.pp-btn:hover{ background:#f7f9fc; border-color:#d8dee8; }
.pp-btn--secondary{ color:var(--pp-link); border-color:#dbe9ff; background:#f8fbff; }
.pp-btn--secondary:hover{ background:#eef6ff; border-color:#cfe0ff; }
/* Primair spaarzaam gebruiken: */
.pp-btn--primary{ background:var(--pp-blue); color:#fff; border-color:transparent; box-shadow:0 8px 18px rgba(42,167,255,.20); }
.pp-btn--primary:hover{ background:#1f8fe6; }

/* --- Orders: enkele rand per producttegel, geen dubbele rand --- */

/* De tegel zelf blijft de enige rand houden */
.pp-order__item{
  border: 1px solid var(--pp-border, #e7e7ec);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

/* Verwijder randen/box-shadow/outline van links ín de tegel (thumb/titel/volle-tegel links) */
.pp-order__item a,
.pp-order__item a:link,
.pp-order__item a:visited{
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Sommige thema’s zetten een extra pseudo-border */
.pp-order__item a::before,
.pp-order__item a::after{
  content: none !important;
}

/* Hover: geen extra (blauwe) border, alleen subtiele schaduw en border-tint */
.pp-order__item:hover{
  border-color: #dfe3ea;
  box-shadow: 0 4px 10px rgba(16,24,40,.06);
}

/* Thumbnail visueel rustig houden */
.pp-order__thumb img{
  background: #f6f7f9; /* blijft lichtgrijs */
  border: 0;           /* zeker weten: geen rand op img */
}

/* Titel-link alleen typografisch benadrukken, niet als 'button' met border */
.pp-order__title{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.pp-order__title:hover{
  text-decoration: underline;
}


/* status badge in View Order */
.pp-status{
  display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:999px; font-weight:800; font-size:12px;
  background:#f1f5f9; color:#475569;
}
.pp-status--completed,
.pp-status--afgerond{ background:#eaf7f2; color:#22a06b; }
.pp-status--processing,
.pp-status--verwerken{ background:#eaf5ff; color:#1f6fd6; }
.pp-status--on-hold,
.pp-status--onhold,
.pp-status--inwachtrij{ background:#fff6df; color:#e6a100; }
.pp-status--cancelled,
.pp-status--geannuleerd{ background:#fdecec; color:#d64545; }
.pp-status--failed,
.pp-status--mislukt{ background:#fdecec; color:#d64545; }
.pp-status--refunded{ background:#eef2f7; color:#5b6776; }
.pp-status--pending{ background:#f4f6f9; color:#5b6776; }

/* ===== View Order – styling ===== */

.pp-order--view .pp-order__notice{
  margin: 8px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--pp-border, #e7e7ec);
  border-radius: 12px;
  background: #fffdf5;
}

/* totals */
.pp-order__totals{
  margin-top: 10px;
}
.pp-totals{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--pp-border, #e7e7ec);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.pp-totals tr + tr td, .pp-totals tr + tr th{ border-top: 1px solid #eef1f5; }
.pp-totals th{
  text-align: left; padding: 12px 14px; font-weight: 800; background: #f6f9ff;
}
.pp-totals td{
  text-align: right; padding: 12px 14px; font-weight: 700;
}

/* addresses */
.pp-address{ padding: 12px 14px; }
.pp-address__contact{ list-style: none; padding: 8px 0 0; margin: 0; color: #475569; }

/* section titles */
.pp-blocktitle{ margin: 14px 0 10px; font-size: 18px; font-weight: 800; }