.apr-tradein,
.apr-tradein * {
box-sizing: border-box;
}
.apr-tradein button,
.apr-tradein a,
.apr-tradein .apr-thumb,
.apr-tradein .apr-link,
.apr-tradein .apr-chip {
color: #111 !important;
}
.apr-nojs {
border: 1px solid #e5c28b;
background: #fff8ee;
color: #6b4d16;
border-radius: 12px;
padding: 10px 12px;
margin-bottom: 12px;
}
.apr-tradein {
margin: 16px 0;
}
.apr-tradein__top {
display: flex;
gap: 14px;
align-items: flex-start;
justify-content: space-between;
}
.apr-tradein__title h3 {
margin: 0 0 6px 0;
}
.apr-tradein__title p {
margin: 0;
opacity: .85;
}
.apr-step {
margin-top: 10px;
}
.apr-stephead {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
margin: 14px 0 6px;
}
.apr-steptitle {
font-weight: 900;
font-size: 24px;
line-height: 1.2;
margin: 8px 0 14px;
}
.apr-stepnav {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
flex-wrap: wrap;
}
.apr-stepnav__dot {
width: 36px;
height: 36px;
border-radius: 999px;
border: 2px solid #d6d6d6;
background: #fff;
font-weight: 900;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.apr-stepnav__dot.is-active {
border-color: #111;
}
.apr-stepnav__line {
width: 28px;
height: 3px;
background: #e6e6e6;
border-radius: 999px;
}
.apr-subhead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 6px 0 6px;
}
.apr-selectedline {
opacity: .85;
}
.apr-selectedline strong {
font-weight: 900;
}
.apr-thumbs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 10px 0 14px;
}
@media (min-width: 768px) {
.apr-thumbs {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.apr-thumb {
position: relative;
text-align: left;
border: 1px solid #e6e6e6;
border-radius: 14px;
padding: 12px;
background: #fff;
cursor: pointer;
transition: transform .08s ease, border-color .08s ease, box-shadow .08s ease;
display: flex;
flex-direction: column;
gap: 6px;
min-height: 72px;
color: #111 !important;
}
.apr-thumb:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.apr-thumb.is-selected {
border-color: #111;
}
.apr-thumb__title {
font-weight: 800;
color: #111 !important;
}
.apr-thumb__sub {
opacity: .75;
font-size: 13px;
color: #111 !important;
}
.apr-thumb--missing-model .apr-thumb__title {
text-transform: none !important;
}
.apr-thumb.is-loading {
pointer-events: none;
opacity: .85;
}
.apr-thumb__spinner {
position: absolute;
top: 12px;
right: 12px;
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid rgba(0,0,0,.18);
border-top-color: rgba(0,0,0,1);
animation: aprspin .75s linear infinite;
}
.apr-actions {
margin-top: 12px;
}
.apr-actions--split {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.apr-btn {
padding: 10px 14px;
border-radius: 12px;
border: 1px solid #ddd;
background: #f5f5f5;
color: #999 !important;
cursor: not-allowed;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
gap: 10px;
transition: all .15s ease;
}
.apr-btn[disabled] {
background: #f5f5f5;
color: #999 !important;
border-color: #ddd;
cursor: not-allowed;
opacity: 1;
}
.apr-btn:not([disabled]) {
background: #ff7a00;
border-color: #ff7a00;
color: #fff !important;
cursor: pointer;
}
.apr-btn:not([disabled]):hover {
background: #e66e00;
border-color: #e66e00;
}
.apr-btn--ghost {
background: #fff;
color: #111 !important;
border: 1px solid #d9d9d9;
cursor: pointer;
}
.apr-btn--ghost:hover {
background: #f7f7f7;
}
.apr-btn--secondary {
background: #fff;
color: #111 !important;
border: 1px solid #d9d9d9;
cursor: pointer;
}
.apr-btn--secondary:hover {
background: #f7f7f7;
}
.apr-link {
border: none;
background: transparent;
cursor: pointer;
padding: 0;
text-decoration: underline;
opacity: .85;
}
.apr-card {
border: 1px solid #e6e6e6;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.apr-line {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 6px 0;
}
.apr-note {
margin-top: 10px;
opacity: .85;
}
.apr-error {
border: 1px solid #ffb3b3;
background: #fff5f5;
padding: 10px 12px;
border-radius: 12px;
}
.apr-empty {
opacity: .7;
padding: 8px 0;
}
.apr-edit {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.apr-chip {
border: 1px solid #d9d9d9;
background: #fff;
border-radius: 999px;
padding: 8px 10px;
cursor: pointer;
}
.apr-tipbox {
border: 1px solid #eee;
background: #fafafa;
border-radius: 14px;
padding: 12px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin: 8px 0 4px;
}
.apr-tipbox p {
margin: 0;
opacity: .9;
}
.apr-ghostlink {
border: none;
background: transparent;
padding: 0;
cursor: pointer;
text-decoration: underline;
opacity: .85;
margin: 4px 0 2px;
}
.apr-whatsapp-help {
margin-top: 12px;
}
.apr-whatsapp-help .apr-btn {
width: 100%;
}
.apr-selected-product {
margin: 12px 0 6px;
padding: 12px;
border: 1px solid #eee;
border-radius: 14px;
background: #fff;
display: flex;
gap: 12px;
align-items: center;
}
.apr-selected-product__img img {
border-radius: 10px;
height: 100px !important;
width: auto;
}
.apr-selected-product__label {
font-size: 12px;
opacity: .75;
margin-bottom: 2px;
}
.apr-selected-product__title {
font-weight: 900;
}
.apr-selected-product__price {
margin-top: 4px;
opacity: .9;
}
.apr-btn__spinner {
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid rgba(255,255,255,.45);
border-top-color: rgba(255,255,255,1);
display: none;
animation: aprspin .75s linear infinite;
}
.apr-btn--secondary .apr-btn__spinner,
.apr-btn--ghost .apr-btn__spinner {
border-color: rgba(0,0,0,.25);
border-top-color: rgba(0,0,0,1);
}
.apr-btn.is-loading .apr-btn__spinner {
display: inline-block;
}
@keyframes aprspin {
to {
transform: rotate(360deg);
}
}
.apr-tradein-box {
border: 1px solid #e6e6e6;
border-radius: 14px;
padding: 14px;
background: #fafafa;
margin-top: 14px;
}
.apr-tradein-box__title {
margin: 0 0 8px 0;
font-size: 20px;
line-height: 1.2;
}
.apr-tradein-box__text {
margin-bottom: 12px;
opacity: .9;
}
body.apr-modal-open {
overflow: hidden !important;
}
.apr-tradein__modal[hidden] {
display: none !important;
}
.apr-tradein__modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
z-index: 2147483647 !important;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
overflow: auto;
}
.apr-tradein__modal-inner {
width: min(860px, 100%);
background: #fff;
border-radius: 16px;
position: relative;
margin: auto;
max-height: calc(100vh - 32px);
overflow: auto;
padding: 14px;
}
.apr-tradein__close {
position: sticky;
top: 10px;
float: right;
width: 36px;
height: 36px;
border-radius: 12px;
border: 1px solid #d9d9d9;
background: #fff;
cursor: pointer;
font-size: 18px;
line-height: 1;
color: #111 !important;
z-index: 5;
padding: 0 10px;
}
.indicatie-inruilwaarde {
background: #dadada;
border-radius: 10px;
padding: 10px;
}
.apr-hide-brand-step .apr-step[data-step="1"] {
display: none !important;
} .apr-whatsapp-help .apr-btn,
.apr-result .apr-whatsapp-help .apr-btn {
background: transparent !important;
border: 1px solid #1A2744 !important;
color: #1A2744 !important;
}
.apr-whatsapp-help .apr-btn:hover,
.apr-result .apr-whatsapp-help .apr-btn:hover {
background: transparent !important;
border-color: #1A2744 !important;
color: #1A2744 !important;
} .apr-step[data-step="result"] .apr-actions .apr-btn {
background: transparent !important;
border: 1px solid #ff7a00 !important;
color: #111 !important;
}
.apr-step[data-step="result"] .apr-actions .apr-btn:hover {
background: transparent !important;
border-color: #ff7a00 !important;
color: #111 !important;
} .apr-tradein--standalone {
border: 1px solid #e6e6e6;
background: #ffffff;
border-radius: 18px;
padding: 22px;
box-shadow: 0 12px 35px rgba(0,0,0,0.06);
} .apr-tradein--standalone .apr-step {
margin-top: 18px;
} .apr-tradein--standalone .apr-tradein__title h3 {
margin-bottom: 8px;
} .apr-tradein--standalone .apr-step:first-of-type {
margin-top: 10px;
}
@media (max-width: 640px) {
.apr-stephead,
.apr-subhead,
.apr-tipbox {
flex-direction: column;
align-items: flex-start;
}
.apr-stepnav {
width: 100%;
justify-content: flex-start;
}
.apr-line {
flex-direction: column;
align-items: flex-start;
}
.apr-actions--split {
flex-direction: column;
align-items: stretch;
}
.apr-selected-product {
flex-direction: column;
align-items: flex-start;
}
.apr-steptitle {
font-size: 21px;
}
}.apr-tradein--json .apr-json-value{font-size:clamp(25px,4vw,36px);margin:18px 0 10px}.apr-tradein--json .apr-json-intents{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.apr-tradein--json .apr-json-contact{margin:14px 0;padding:16px;border:1px solid #e6e6e6;border-radius:12px}.apr-tradein--json .apr-json-interest{display:block;width:100%;padding:12px;margin:10px 0;border:1px solid #ccc;border-radius:8px}.apr-tradein--json .apr-json-disclaimer{font-size:14px;opacity:.75}.apr-tradein--json .apr-error{color:#b91c1c}.apr-tradein--json .apr-stepnav{font-size:13px;opacity:.65} .apr-tradein--json{--apr-accent:#ed7600;max-width:780px;margin:20px auto;padding:clamp(18px,4vw,36px);border:1px solid #e7e9ed;border-radius:22px;background:#fff;box-shadow:0 12px 42px rgba(15,23,42,.045);color:#17202c;font-family:inherit}
.apr-tradein--json .apr-tradein__title h3{font-size:clamp(21px,3vw,27px);font-weight:750;letter-spacing:-.035em;color:#151c26}
.apr-tradein--json .apr-tradein__title p{color:#687381;font-size:14px;line-height:1.65}
.apr-tradein--json .apr-stephead{display:block;margin:25px 0 26px}
.apr-stephead__labels{display:flex;justify-content:space-between;gap:12px;margin-bottom:11px;color:#737f8b;font-size:11px;font-weight:750;letter-spacing:.06em}
.apr-tradein--json .apr-stepnav{display:flex;gap:5px;flex-wrap:nowrap;width:100%}
.apr-progress-segment{height:5px;border-radius:10px;flex:1;background:#eceef2;transition:background .2s ease}
.apr-progress-segment.is-complete{background:var(--apr-accent)}
.apr-tradein--json .apr-steptitle{font-size:clamp(21px,3.4vw,27px);line-height:1.22;letter-spacing:-.025em;font-weight:760;color:#17202c;margin:0 0 8px}
.apr-stephelp{margin:0 0 22px;color:#677483;font-size:14px;line-height:1.6}
.apr-tradein--json .apr-selectedline{font-size:12px;color:#6a7581;margin:0 0 14px;line-height:1.5}
.apr-tradein--json .apr-thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 22px}
.apr-tradein--json .apr-thumbs--list{grid-template-columns:1fr}
.apr-tradein--json .apr-thumbs--compact{grid-template-columns:repeat(2,minmax(0,1fr))}
.apr-tradein--json .apr-thumb{display:flex;flex-direction:row;align-items:center;text-align:left;gap:14px;min-height:86px;border:1.5px solid #e4e7eb;background:#fff;border-radius:15px;padding:17px;color:#17202c!important;box-shadow:none;transition:border-color .15s,box-shadow .15s,transform .15s;cursor:pointer}
.apr-tradein--json .apr-thumb:hover,.apr-tradein--json .apr-thumb:focus-visible{border-color:var(--apr-accent);box-shadow:0 5px 16px rgba(15,23,42,.07);transform:translateY(-1px)}
.apr-tradein--json .apr-thumb:focus-visible{outline:3px solid rgba(237,118,0,.22);outline-offset:2px}
.apr-thumb__icon{display:grid;place-items:center;flex:none;width:45px;height:45px;background:#f5f6f8;border-radius:11px;color:#253142;font-size:29px;line-height:1}
.apr-thumb__content{display:flex;flex:1;flex-direction:column;gap:5px;min-width:0}
.apr-tradein--json .apr-thumb__title{font-size:15px;line-height:1.35;font-weight:720;color:#1b2430!important}
.apr-tradein--json .apr-thumb__sub{font-size:12px;line-height:1.4;color:#73808d!important;opacity:1}
.apr-thumb__arrow{font-size:25px;line-height:1;color:#a0a8b2;flex:none}
.apr-tradein--json .apr-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:22px;padding-top:17px;border-top:1px solid #edf0f3}
.apr-tradein--json .apr-link{font-size:13px;color:#65717d!important;text-decoration:none;padding:9px 0}
.apr-tradein--json .apr-link:hover{text-decoration:underline}
.apr-tradein--json .apr-link[hidden]{display:none!important}
.apr-tradein--json .apr-result-card{text-align:center;background:#f7f8fa;border:1px solid #edf0f3;border-radius:18px;padding:clamp(20px,4vw,32px);margin:10px 0 18px}
.apr-result-card__eyebrow{font-size:13px;font-weight:700;color:#278257;margin-bottom:14px}
.apr-result-card__model{font-size:14px;color:#677381;line-height:1.5;margin-bottom:10px}
.apr-result-card__value{font-size:clamp(27px,5vw,40px);font-weight:800;line-height:1.22;letter-spacing:-.04em;color:#151c26;overflow-wrap:anywhere}
.apr-result-card__message{font-size:14px;line-height:1.6;color:#505d6a;margin:14px 0 0}
.apr-result-card__disclaimer{font-size:12px;line-height:1.6;color:#7a8591;margin:16px 0 0}
.apr-tradein--json .apr-whatsapp-btn,.apr-tradein--json .apr-whatsapp-btn:not([disabled]){width:100%;display:flex;align-items:center;justify-content:center;padding:16px 20px;min-height:54px;border-radius:12px;border:1px solid #198754;background:#198754;color:#fff!important;font-size:15px;font-weight:750;cursor:pointer}
.apr-tradein--json .apr-whatsapp-btn:hover:not([disabled]){background:#137246;border-color:#137246}
.apr-tradein--json .apr-whatsapp-btn[disabled]{opacity:.7;cursor:wait}
.apr-result-note{text-align:center;font-size:12px;color:#74808c;line-height:1.5;margin:11px 0 0}
.apr-loading{padding:24px 0;color:#687381}
.apr-tradein__modal .apr-tradein--json{margin:12px auto;box-shadow:none;border-color:#edf0f3}
@media(max-width:560px){.apr-tradein--json{border-radius:15px;padding:18px 15px;margin:10px auto}.apr-tradein--json .apr-thumb{padding:14px;min-height:72px;gap:10px}.apr-tradein--json .apr-thumbs{gap:9px}.apr-tradein--json .apr-thumb__title{font-size:14px}.apr-thumb__icon{width:35px;height:35px;font-size:23px}.apr-tradein--json .apr-thumbs--compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:370px){.apr-tradein--json .apr-thumbs:not(.apr-thumbs--compact){grid-template-columns:1fr}} .apr-tradein__modal{position:fixed!important;inset:0!important;z-index:2147483647!important}
.apr-tradein--json [data-prev]:hover,.apr-tradein--json [data-prev]:focus-visible,
.apr-tradein--json [data-restart]:hover,.apr-tradein--json [data-restart]:focus-visible{
background:#e87500!important;color:#fff!important;border-color:#e87500!important;text-decoration:none!important;
}
.apr-tradein--json [data-prev]:hover *,.apr-tradein--json [data-restart]:hover *{color:#fff!important} .apr-tradein--json .apr-actions [data-prev],
.apr-tradein--json .apr-actions [data-restart]{
padding:12px 17px;
border-radius:9px;
min-height:44px;
} .apr-tradein--json .apr-thumbs > button.apr-thumb {
display:flex!important;flex-direction:row!important;align-items:center!important;
justify-content:flex-start!important;text-align:left!important;
width:100%!important;min-width:0!important;min-height:70px!important;
height:auto!important;gap:12px!important;padding:14px!important;
background:#fff!important;color:#17202c!important;
font-family:inherit!important;font-size:14px!important;
line-height:1.45!important;letter-spacing:normal!important;
text-transform:none!important;white-space:normal!important;
overflow-wrap:anywhere!important;word-break:normal!important;
border:1px solid #e4e7eb!important;border-radius:14px!important;
}
.apr-tradein--json .apr-thumbs > button.apr-thumb:hover,
.apr-tradein--json .apr-thumbs > button.apr-thumb:focus-visible {
border-color:#ed7600!important;background:#fffaf5!important;
}
.apr-tradein--json .apr-thumb .apr-thumb__content {
display:flex!important;flex:1 1 0!important;flex-direction:column!important;
align-items:flex-start!important;gap:4px!important;min-width:0!important;
width:auto!important;margin:0!important;padding:0!important;
}
.apr-tradein--json .apr-thumb .apr-thumb__title,
.apr-tradein--json .apr-thumb .apr-thumb__sub {
display:block!important;width:100%!important;max-width:100%!important;
height:auto!important;margin:0!important;padding:0!important;
font-family:inherit!important;letter-spacing:normal!important;
text-transform:none!important;white-space:normal!important;
overflow-wrap:anywhere!important;word-break:normal!important;
text-align:left!important;line-height:1.4!important;
}
.apr-tradein--json .apr-thumb .apr-thumb__title{font-size:15px!important;font-weight:700!important;color:#17202c!important}
.apr-tradein--json .apr-thumb .apr-thumb__sub{font-size:12px!important;font-weight:400!important;color:#6b7280!important}
.apr-tradein--json .apr-thumb .apr-thumb__icon {
display:grid!important;place-items:center!important;flex:0 0 36px!important;
width:36px!important;height:36px!important;font-size:23px!important;
background:#f4f5f7!important;border-radius:9px!important;
}
.apr-tradein--json .apr-thumb .apr-thumb__arrow{display:block!important;flex:0 0 auto!important;margin-left:auto!important}
@media(max-width:600px){
.apr-tradein--json .apr-thumbs{grid-template-columns:1fr!important;gap:9px!important}
.apr-tradein--json .apr-thumbs--compact{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.apr-tradein--json .apr-thumbs > button.apr-thumb{padding:12px!important;gap:10px!important;min-height:64px!important}
.apr-tradein--json .apr-thumbs--compact > button.apr-thumb{min-height:64px!important}
.apr-tradein--json .apr-thumb .apr-thumb__title{font-size:14px!important}
.apr-tradein--json .apr-thumb .apr-thumb__icon{flex-basis:30px!important;width:30px!important;height:30px!important;font-size:20px!important}
} .apr-tradein--json .apr-thumbs > button.apr-thumb:last-child:has(.apr-thumb__icon:first-child){border-style:dashed!important}
.apr-tradein--json .apr-result-card--unknown .apr-result-card__value{font-size:clamp(24px,5vw,34px)}