/*
 * Levertijden & Verzendinformatie (modern accordion)
 * Shortcode: [wcpga_levertijden]
 *
 * Theme-fit (Amaanah): zachte roze tinten + afgeronde cards.
 * Je kunt de kleuren eenvoudig overschrijven via CSS variables op .wcpga-levertijden.
 */

.wcpga-levertijden{
  width: 100%;

  /* Default palette (matcht jullie site) */
  --wcpga-lt-accent: #f8b6d0;
  --wcpga-lt-accent-strong: #d63384;
  --wcpga-lt-surface: #ffffff;
  --wcpga-lt-surface-2: #f9f3f5;
  --wcpga-lt-border: #e2c2cc;
  --wcpga-lt-text: #1e1e1e;
  --wcpga-lt-muted: rgba(30,30,30,0.78);
  --wcpga-lt-radius: 14px;
  --wcpga-lt-shadow: 0 10px 26px rgba(0,0,0,0.06);
  --wcpga-lt-shadow-hover: 0 14px 34px rgba(0,0,0,0.08);
}

.wcpga-levertijden__title{
  margin: 0 0 18px 0;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(2.2rem, 3.2vw, 4rem);
  color: var(--wcpga-lt-text);
}

.wcpga-levertijden__items{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Each accordion card */
.wcpga-lt-item{
  border: 1px solid var(--wcpga-lt-border);
  border-radius: var(--wcpga-lt-radius);
  background: var(--wcpga-lt-surface);
  overflow: hidden;
  box-shadow: var(--wcpga-lt-shadow);
  transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.wcpga-lt-item:hover{
  box-shadow: var(--wcpga-lt-shadow-hover);
}

.wcpga-lt-item[open]{
  border-color: rgba(248,182,208,0.95);
}

/* Clickable question bar */
.wcpga-lt-item > summary{
  margin: 0;
  padding: 18px 20px;
  background: var(--wcpga-lt-surface-2);
  color: var(--wcpga-lt-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.6rem, 1.35vw, 2.0rem);
  font-weight: 600;
  line-height: 1.25;
  position: relative;
  transition: background 160ms ease;
}

/* Remove default marker */
.wcpga-lt-item > summary::-webkit-details-marker{ display: none; }
.wcpga-lt-item > summary::marker{ content: ''; }

.wcpga-lt-item[open] > summary{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Left accent bar (only visible on open) */
.wcpga-lt-item > summary::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--wcpga-lt-accent);
  opacity: 0;
  transition: opacity 160ms ease;
}

.wcpga-lt-item[open] > summary::before{
  opacity: 1;
}

.wcpga-lt-q__text{
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 14px;
}

/* Plus/minus button */
.wcpga-lt-item > summary::after{
  content: '+';
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.0rem;
  line-height: 1;
  background: rgba(248,182,208,0.28);
  border: 1px solid rgba(248,182,208,0.65);
  color: var(--wcpga-lt-text);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.wcpga-lt-item[open] > summary::after{
  content: '\2013'; /* en-dash */
  background: var(--wcpga-lt-accent);
  border-color: var(--wcpga-lt-accent);
  transform: rotate(0deg);
}

.wcpga-lt-item > summary:hover{
  background: rgba(248,182,208,0.22);
}

/* Accessible focus */
.wcpga-lt-item > summary:focus{ outline: none; }
.wcpga-lt-item > summary:focus-visible{
  box-shadow: 0 0 0 3px rgba(214,51,132,0.22);
}

/* Answer content */
.wcpga-lt-a{
  padding: 18px 20px 22px;
  border-top: 1px solid rgba(226,194,204,0.75);
  color: var(--wcpga-lt-muted);
}

.wcpga-lt-item[open] .wcpga-lt-a{
  animation: wcpga-lt-fade-in 180ms ease-out;
}

@keyframes wcpga-lt-fade-in{
  from{ opacity: 0; transform: translateY(-4px); }
  to{ opacity: 1; transform: translateY(0); }
}

.wcpga-lt-a p{ margin: 0 0 14px 0; }
.wcpga-lt-a p:last-child{ margin-bottom: 0; }

.wcpga-lt-a ul,
.wcpga-lt-a ol{
  margin: 0 0 14px 20px;
}

.wcpga-lt-a a{
  color: var(--wcpga-lt-text);
  text-decoration: underline;
}

@media (max-width: 600px){
  .wcpga-levertijden__items{ gap: 12px; }

  .wcpga-lt-item > summary{
    padding: 15px 14px;
  }

  .wcpga-lt-a{
    padding: 16px 14px 18px;
  }

  .wcpga-lt-item > summary::after{
    width: 32px;
    height: 32px;
    font-size: 1.9rem;
  }
}