.g4y-dhl-wrap{
    --g4y-blue:#1868db;
    --g4y-blue-soft:#eaf2fe;
    --g4y-yellow:#ffd500;
    --g4y-black:#151515;
    --g4y-border:#d9d9d9;
    --g4y-muted:#6f6f6f;
    --g4y-bg:#f7f7f7;
    margin:18px 0 24px;
    font-size:14px;
    color:var(--g4y-black);
}
.g4y-loading,.g4y-error,.g4y-empty{padding:14px 0}
.g4y-error{color:#8f1616;background:#fff5f5;border:1px solid #f0caca;border-radius:6px;padding:14px 16px}

/* Bezorgen / Servicepunt boxed tabs */
.g4y-tabs{
    display:flex;
    gap:10px;
    margin-bottom:16px;
}
.g4y-tabs button{
    flex:1 1 0;
    display:flex;
    align-items:center;
    min-height:52px;
    border:1px solid var(--g4y-border);
    border-radius:6px;
    background:#fff;
    color:var(--g4y-black);
    padding:12px 16px;
    font-size:15px;
    font-weight:400;
    cursor:pointer;
    transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.g4y-tabs button:hover{border-color:#a8a8a8}
.g4y-tabs button.active{
    border:1.5px solid var(--g4y-blue);
    color:var(--g4y-blue);
    background:#fff;
}
.g4y-dot{
    display:inline-block;
    width:19px;
    height:19px;
    border:1.5px solid #9a9a9a;
    border-radius:50%;
    margin-right:10px;
    flex:none;
    background:#fff;
    box-sizing:border-box;
}
.g4y-tabs button.active .g4y-dot{
    border-color:var(--g4y-blue);
    background:var(--g4y-blue);
    box-shadow:inset 0 0 0 3px #fff;
}

.g4y-section-title{
    font-size:15px;
    font-weight:700;
    margin:0 0 10px;
}

/* Collapsed delivery summary card */
.g4y-summary{
    display:flex;
    align-items:flex-start;
    gap:16px;
    border:1px solid var(--g4y-border);
    border-radius:6px;
    background:#fff;
    padding:16px;
}
.g4y-summary-logo{
    flex:none;
    width:54px;
    height:40px;
    border-radius:4px;
    background:var(--g4y-yellow);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.g4y-summary-logo img{
    width:100%;
    height:auto;
    object-fit:contain;
}
.g4y-summary-body{flex:1;min-width:0}
.g4y-summary-body strong{
    display:block;
    font-size:14px;
    font-weight:700;
    margin-bottom:6px;
}
.g4y-summary-body p{
    margin:0 0 10px;
    line-height:1.5;
    color:var(--g4y-black);
}
.g4y-summary-body p b{font-weight:700}
.g4y-change-link{
    background:none;
    border:0;
    padding:0;
    color:var(--g4y-blue);
    font-size:14px;
    cursor:pointer;
    text-decoration:none;
}
.g4y-change-link:hover{text-decoration:underline}

/* Expanded date + window picker */
.g4y-picker{
    border:1px solid var(--g4y-border);
    border-radius:6px;
    background:#fff;
    padding:16px;
}
.g4y-dates-row{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:14px;
}
.g4y-dates-arrow{
    flex:none;
    width:32px;
    height:32px;
    border:1px solid var(--g4y-border);
    border-radius:50%;
    background:#fff;
    color:var(--g4y-black);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    padding:0;
    transition:border-color .15s ease,color .15s ease,opacity .15s ease;
}
.g4y-dates-arrow:hover:not(:disabled){border-color:var(--g4y-blue);color:var(--g4y-blue)}
.g4y-dates-arrow:disabled{opacity:.35;cursor:default}
.g4y-dates-arrow.is-hidden{visibility:hidden}
.g4y-dates{
    display:flex;
    gap:7px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
    flex:1;
    min-width:0;
}
.g4y-dates::-webkit-scrollbar{display:none}
.g4y-dates button{
    flex:0 0 67px;
    min-width:67px;
    min-height:65px;
    border:1px solid var(--g4y-border);
    background:#fff;
    border-radius:6px;
    padding:7px 5px;
    color:#333;
    cursor:pointer;
    transition:.15s ease;
}
.g4y-dates button:hover{border-color:#999}
.g4y-dates button.selected{
    border:1.5px solid var(--g4y-blue);
    background:var(--g4y-blue-soft);
    padding:6.5px 4.5px;
}
.g4y-dates span,.g4y-dates strong{display:block}
.g4y-dates span{
    text-transform:capitalize;
    color:var(--g4y-muted);
    font-size:12px;
    line-height:1.2;
}
.g4y-dates strong{
    margin-top:5px;
    font-size:15px;
    color:var(--g4y-black);
}
.g4y-windows button,.g4y-points button{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    text-align:left;
    border:1px solid var(--g4y-border);
    background:#fff;
    border-radius:6px;
    padding:13px 14px;
    margin-bottom:8px;
    color:var(--g4y-black);
    cursor:pointer;
    transition:border-color .15s ease,background .15s ease;
}
.g4y-windows button:last-child,.g4y-points button:last-child{margin-bottom:0}
.g4y-windows button:hover,.g4y-points button:hover{border-color:#999}
.g4y-windows button.selected,.g4y-points button.selected{
    border:1.5px solid var(--g4y-blue);
    background:var(--g4y-blue-soft);
    padding:12.5px 13.5px;
}
.g4y-windows button>div{
    display:flex;
    align-items:center;
    gap:12px;
}
.g4y-windows img{
    width:48px;
    max-height:25px;
    object-fit:contain;
}
.g4y-windows strong,.g4y-windows span,.g4y-points strong,.g4y-points span{display:block}
.g4y-windows strong{font-size:14px}
.g4y-windows span,.g4y-points span{
    font-size:13px;
    color:#555;
    margin-top:3px;
}
.g4y-windows em,.g4y-points em{
    font-style:normal;
    font-weight:700;
    white-space:nowrap;
}
.g4y-points{margin-top:2px}
.g4y-point-head{
    display:flex;
    gap:11px;
    align-items:flex-start;
}
.g4y-radio{
    width:18px;
    height:18px;
    border:1.5px solid #9a9a9a;
    border-radius:50%;
    margin-top:1px;
    flex:none;
    background:#fff;
    box-sizing:border-box;
}
.g4y-points button.selected .g4y-radio{
    border-color:var(--g4y-blue);
    background:var(--g4y-blue);
    box-shadow:inset 0 0 0 4px #fff;
}
.g4y-points strong{font-size:14px}

/* Extra options */
.g4y-extra{margin-top:20px}
.g4y-options label{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:44px;
    border-bottom:1px solid #eee;
    padding:8px 2px;
    cursor:pointer;
}
.g4y-options label:first-child{border-top:1px solid #eee}
.g4y-options input{
    width:17px;
    height:17px;
    accent-color:var(--g4y-blue);
}
.g4y-options label span{flex:1}
.g4y-options label em{
    font-style:normal;
    font-weight:400;
    color:var(--g4y-black);
    white-space:nowrap;
}

@media(max-width:600px){
    .g4y-tabs button{min-height:48px;font-size:14px;padding:10px 12px}
    .g4y-summary,.g4y-picker{padding:13px}
    .g4y-windows button,.g4y-points button{padding:11px 10px}
    .g4y-windows button.selected,.g4y-points button.selected{padding:10.5px 9.5px}
    .g4y-windows img{width:42px}
}