/* Dakraamplaza footer v3. All rules are scoped to .pft.
   Uses the theme's .container (1270 / 1170 / 970 / 750 / 100%, 15px gutters) and the Gilroy font that is already loaded. */

.pft {
  --pft-bg: #15181f;
  --pft-usp-bg: #1c202a;
  --pft-line: #2b3140;
  --pft-text: #b9bfcb;
  --pft-muted: #8d95a4;
  --pft-pink: #ff0083;
  --pft-ic-bg: #3a1a2e;          /* pink 16% over the footer ground */
  --pft-white: #fff;
  --pft-success: #27ae60;
  --pft-star: #ffb400;
  --pft-radius: 4px;
  --pft-btn-h: 52px;

  background: var(--pft-bg);
  color: var(--pft-text);
  font-family: Gilroy, sans-serif;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
.pft *, .pft *::before, .pft *::after { box-sizing: border-box; }
.pft p, .pft h2, .pft ul { margin: 0; padding: 0; }
.pft ul { list-style: none; }
.pft a { color: inherit; text-decoration: none; transition: all 0.2s linear; }
.pft img { display: block; max-width: 100%; height: auto; }
.pft svg { display: block; flex: none; }
.pft a:focus-visible, .pft button:focus-visible { outline: 2px solid var(--pft-pink); outline-offset: 2px; }
.pft .pft-m { display: none; }

/* Icon circle */
.pft-ic {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pft-ic-bg); color: var(--pft-pink);
}
.pft-ic svg { width: 20px; height: 20px; }
.pft-ic--lg { width: 44px; height: 44px; }
.pft-ic--lg svg { width: 22px; height: 22px; }

/* 1. USP strip */
.pft-usp { background: var(--pft-usp-bg); border-bottom: 1px solid var(--pft-line); }
.pft-usp__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 30px; padding-top: 22px; padding-bottom: 22px; }
.pft-usp__in::before, .pft-usp__in::after { content: none; } /* bootstrap clearfix */
.pft-usp__i { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pft-usp__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pft-usp__txt strong { font-weight: 600; font-size: 16px; line-height: 22px; color: var(--pft-white); transition: color 0.2s linear; }
.pft-usp__txt span { font-weight: 500; font-size: 14px; line-height: 20px; color: var(--pft-muted); }
a.pft-usp__i:hover strong { color: var(--pft-pink); }

/* 2. Help row */
.pft-help {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center;
  padding: 56px 0 50px; border-bottom: 1px solid var(--pft-line);
}
.pft-help__main { display: flex; flex-direction: column; min-width: 0; }
.pft-help__title { font-weight: 700; font-size: 30px; line-height: 33px; letter-spacing: -0.01em; color: var(--pft-white); text-wrap: pretty; }
.pft-help__sub { margin-top: 8px !important; color: var(--pft-text); }
.pft-help__btns { display: flex; flex-wrap: nowrap; gap: 10px; margin-top: 24px; }

.pft-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--pft-btn-h); padding: 0 18px; white-space: nowrap; flex: none;
  border: 1px solid var(--pft-muted); border-radius: 0;
  font-weight: 600; font-size: 15px; line-height: 22px; color: var(--pft-white);
  cursor: pointer;
}
.pft-btn svg { width: 20px; height: 20px; }
.pft-btn--line:hover { border-color: var(--pft-pink); color: var(--pft-pink); }
/* Pink button in the footer keeps the dark label (4.72:1); hover = inversion */
.pft-btn--filled { background: var(--pft-pink); border-color: var(--pft-pink); color: var(--pft-bg); }
.pft-btn--filled:hover { background: transparent; color: var(--pft-pink); }
.pft-pink { color: var(--pft-pink); }

.pft-hours { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 18px !important; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--pft-muted); }
.pft-hours strong { font-weight: 600; color: var(--pft-white); }
.pft-hours__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pft-success); box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.25); }
.pft-hours.is-closed .pft-hours__dot { background: var(--pft-muted); box-shadow: 0 0 0 3px rgba(141, 149, 164, 0.25); }

.pft-help__trust { display: flex; gap: 12px; }
.pft-tile { width: 150px; height: 108px; border-radius: var(--pft-radius); display: grid; place-items: center; padding: 16px; }
.pft-tile--white { background: var(--pft-white); }
.pft-tile--white img { max-height: 60px; width: auto; object-fit: contain; }
.pft-tile--rating {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px;
  background: var(--pft-usp-bg); border: 1px solid var(--pft-line);
}
.pft-tile--rating:hover { border-color: var(--pft-pink); }
.pft-rating__top { display: flex; align-items: center; gap: 10px; }
.pft-rating__top img { width: 32px; height: 32px; }
.pft-rating__score { font-weight: 700; font-size: 30px; line-height: 30px; color: var(--pft-white); }
.pft-rating__stars { display: flex; gap: 2px; }
.pft-rating__stars svg { width: 14px; height: 14px; fill: var(--pft-star); }
.pft-rating__count { font-weight: 500; font-size: 14px; line-height: 18px; color: var(--pft-muted); }

/* 3. Link columns */
.pft-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 30px; padding: 44px 0; }
.pft-col { min-width: 0; grid-row: 1; }
.pft-acc {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  margin: 0 0 16px; padding: 0; border: 0; background: none; cursor: default; text-align: left;
  font-family: inherit; font-weight: 700; font-size: 17px; line-height: 22.1px; letter-spacing: -0.01em; color: var(--pft-white);
}
.pft-chev { display: none !important; width: 20px; height: 20px; color: var(--pft-muted); transition: transform 0.2s linear; }
.pft-lst { display: flex; flex-direction: column; gap: 10px; }
.pft-lst a { font-weight: 500; font-size: 16px; line-height: 22px; color: var(--pft-text); text-underline-offset: 3px; }
.pft-lst a.is-strong { font-weight: 600; color: var(--pft-white); }
.pft-lst a:hover { color: var(--pft-pink); text-decoration: underline; }
.pft-withdraw {
  grid-column: 6; grid-row: 2; align-self: start; justify-self: stretch; margin-top: 16px;
  height: auto; min-height: 48px; padding: 12px 16px; justify-content: flex-start;
  white-space: normal; text-align: left; line-height: 19px;
}
.pft-withdraw svg { width: 18px; height: 18px; }
/* Columns 1-5 span both rows; column 6 sits in row 1 and the button in row 2 directly under its list,
   so a long column 6 can never run into the button (row 2 takes whatever the taller columns still need). */
.pft-cols { grid-template-rows: auto 1fr; }
.pft-col { grid-row: 1 / span 2; }
.pft-col:nth-child(6) { grid-column: 6; grid-row: 1; }

/* 4. Showroom card */
.pft-showroom {
  display: flex; align-items: center; gap: 20px; margin-bottom: 40px; padding: 22px 24px;
  background: var(--pft-usp-bg); border: 1px solid var(--pft-line); border-radius: var(--pft-radius);
}
.pft-showroom__txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pft-showroom__txt strong { font-weight: 700; font-size: 17px; line-height: 22.1px; color: var(--pft-white); }
.pft-showroom__txt > span { font-weight: 500; font-size: 14px; line-height: 20px; color: var(--pft-text); }
.pft-showroom__act { display: flex; align-items: center; gap: 28px; }
.pft-showroom__act a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 16px; line-height: 24px; text-underline-offset: 3px; white-space: nowrap; }
.pft-showroom__act a:hover { text-decoration: underline; }
.pft-showroom__route { color: var(--pft-white); }
.pft-showroom__book { color: var(--pft-pink) !important; }
.pft-showroom__book svg { width: 16px; height: 16px; }

/* 5. Legal / bottom */
.pft-legal {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 30px;
  border-top: 1px solid var(--pft-line);
}
.pft-logo { padding: 28px 0; }
.pft-logo img { height: 30px; width: auto; }
.pft-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--pft-muted); }
.pft-blinks { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pft-blinks a { color: var(--pft-text); text-underline-offset: 3px; }
.pft-blinks a:hover { color: var(--pft-pink); text-decoration: underline; }
.pft-pay { height: 30px !important; width: auto !important; }
.pft-company {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 28px;
  padding: 20px 0 28px !important; border-top: 1px solid var(--pft-line);
  font-weight: 500; font-size: 14px; line-height: 20px; color: var(--pft-muted);
}
.pft-company strong { font-weight: 600; color: var(--pft-white); }

/* <=1199: help row stacks, 3 columns */
@media (max-width: 1199px) {
  .pft-usp__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pft-help { grid-template-columns: 1fr; gap: 32px; }
  .pft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 0 30px; }
  .pft-col { grid-row: auto; padding-bottom: 40px; }
  .pft-col:nth-child(-n+3) { grid-row: 1; }
  .pft-col:nth-child(4) { grid-column: 1; grid-row: 2 / span 2; }
  .pft-col:nth-child(5) { grid-column: 2; grid-row: 2 / span 2; }
  .pft-col:nth-child(6) { grid-column: 3; grid-row: 2; padding-bottom: 0; }
  .pft-withdraw { grid-column: 3; grid-row: 3; margin-top: 16px; }
}

/* <=991 */
@media (max-width: 991px) {
  .pft-help__btns { flex-wrap: wrap; }
  .pft-showroom { flex-wrap: wrap; }
  .pft-showroom__act { width: 100%; padding-left: 64px; }
  .pft-legal { grid-template-columns: auto 1fr; }
  .pft-meta { grid-column: 1 / -1; grid-row: 2; padding-bottom: 24px; }
  .pft-pay { justify-self: end; }
}

/* <=767: mobile layout, accordion */
@media (max-width: 767px) {
  .pft .pft-d { display: none; }
  .pft .pft-m { display: inline; }
  .pft br.pft-m { display: block; }

  .pft-usp__in { gap: 16px 12px; padding-top: 18px; padding-bottom: 18px; }
  .pft-usp__i { align-items: flex-start; gap: 10px; }
  .pft-usp .pft-ic { width: 32px; height: 32px; }
  .pft-usp .pft-ic svg { width: 17px; height: 17px; }
  .pft-usp__txt strong { font-size: 14px; line-height: 18px; }
  .pft-usp__txt span { font-size: 12.5px; line-height: 16px; }

  .pft-help { gap: 20px; padding: 32px 0 28px; }
  .pft-help__title { font-size: 24px; line-height: 28.8px; }
  .pft-help__sub { font-size: 14px; line-height: 21px; }
  .pft-help__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
  .pft-help__btns .pft-btn { padding: 0 12px; }
  .pft-btn--call { grid-column: 1 / -1; font-size: 16px; }
  .pft-hours { margin-top: 16px !important; font-size: 13px; line-height: 18px; }

  .pft-help__trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pft-tile { width: auto; height: 84px; padding: 10px; }
  .pft-tile--white img { max-height: 44px; }
  .pft-tile--rating { gap: 4px; }
  .pft-rating__top { gap: 6px; }
  .pft-rating__top img { width: 20px; height: 20px; }
  .pft-rating__score { font-size: 20px; line-height: 20px; }
  .pft-rating__stars { gap: 1px; }
  .pft-rating__stars svg { width: 11px; height: 11px; }
  .pft-rating__count { font-size: 12px; line-height: 14px; }

  .pft-cols { display: flex; flex-direction: column; gap: 0; padding: 0 0 20px; }
  .pft-col, .pft-col:nth-child(6) { border-bottom: 1px solid var(--pft-line); padding-bottom: 0; }
  .pft-acc { min-height: 56px; margin: 0; font-size: 16px; line-height: 22px; letter-spacing: 0; cursor: pointer; }
  .pft-chev { display: block !important; }
  .pft-col.is-open .pft-acc { color: var(--pft-pink); }
  .pft-col.is-open .pft-chev { transform: rotate(180deg); color: var(--pft-pink); }
  .pft-lst { gap: 0; padding-bottom: 14px; }
  .pft-lst a { display: flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 21px; }
  .pft.is-js .pft-col:not(.is-open) .pft-lst { display: none; }
  .pft-withdraw { align-self: stretch; width: 100%; margin-top: 20px; height: var(--pft-btn-h); justify-content: center; text-align: center; }

  .pft-showroom { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; margin: 0 0 28px; padding: 16px 16px 0; }
  .pft-showroom .pft-ic--lg { width: 40px; height: 40px; }
  .pft-showroom__txt strong { font-size: 16px; line-height: 21px; }
  .pft-showroom__txt > span { font-size: 13px; line-height: 19px; }
  .pft-showroom__act {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
    margin: 2px -16px 0; width: auto; padding: 0; border-top: 1px solid var(--pft-line);
  }
  .pft-showroom__act a { justify-content: center; min-height: 48px; font-size: 14px; line-height: 20px; }
  .pft-showroom__route { border-right: 1px solid var(--pft-line); }

  .pft-legal { grid-template-columns: 1fr auto; gap: 0 12px; padding: 24px 0; }
  .pft-logo { padding: 0; }
  .pft-logo img { height: 26px; }
  .pft-pay { height: 24px !important; }
  .pft-meta { display: contents; }
  .pft-blinks { grid-column: 1 / -1; grid-row: 2; gap: 4px 16px; margin-top: 18px; font-size: 13px; line-height: 26px; }
  .pft-company { grid-row: 3; flex-direction: column; gap: 2px; margin-top: 18px !important; padding: 0 !important; border-top: 0; font-size: 12.5px; line-height: 18px; }
  .pft-copy { grid-column: 1 / -1; grid-row: 4; margin-top: 10px !important; font-size: 12.5px; line-height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pft a, .pft .pft-chev { transition: none; }
}

/* ---- Theme integration (not in the design export) ---- */

/* application.css styles .footer-keur (margin: auto; margin-top: 8px; max-width: 300px) for the old footer
   and the header; inside the tile row it would push the Webwinkelkeur tile out of line. */
.pft .pft-tile { margin: 0; max-width: none; }

/* `.pft a { color: inherit }` (0-1-1) is stronger than the single-class colours of the design (0-1-0), so in
   the export the button labels and the route link come out in the grey text colour. Restore the colours the
   design states (dark label on the pink button, 4.72:1; white on the outline buttons and the route link) and
   keep the pink hover on top. */
.pft a.pft-btn, .pft a.pft-showroom__route { color: var(--pft-white); }
.pft a.pft-btn--filled { color: var(--pft-bg); }
.pft a.pft-btn--line:hover, .pft a.pft-btn--filled:hover { color: var(--pft-pink); }

/* Stars beyond the rounded rating (the live rating can drop below 4.5). */
.pft-rating__stars svg.is-off { fill: var(--pft-line); }

/* A socials-menu group without children: heading link, no accordion. */
/* .pft a { color: inherit } would otherwise turn the heading link grey. */
.pft a.pft-acc { color: var(--pft-white); cursor: pointer; }
a.pft-acc:hover, .pft a.pft-acc:hover { color: var(--pft-pink); }

/* application.css sets a { font-weight: 600 }; the design bottom links inherit 500. */
.pft .pft-blinks a { font-weight: inherit; }

/* Third-party trust widget (DE: Trusted Shops). It may not render at all (403, blocker, no cookie
   consent), and an empty white tile looks like an artefact. So by default the tile has NO white ground
   and takes no fixed size; the footer script adds is-filled once the widget has drawn something
   (display:none up front would stop it from rendering). */
.pft-tile--extra { width: auto; min-width: 0; padding: 0; background: none; overflow: hidden; }
.pft-tile--extra.is-filled { min-width: 150px; padding: 16px; background: var(--pft-white); }
@media (max-width: 767px) {
  .pft-tile--extra.is-filled { min-width: 0; padding: 10px; }
}