.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;
}
}