.cpi-panel {
    --cpi-card-bg:   #4a1570;
    --cpi-pill-bg:   #6b2d8b;
    --cpi-pill-text: #ffffff;
    --cpi-heading:   #f5c400;
    --cpi-label:     #ccaaee;
    --cpi-value:     #ffffff;
    --cpi-highlight: #f5c400;
    --cpi-note:      #ccaaee;

    --cpi-fz-label:   13px;
    --cpi-fz-value:   18px;
    --cpi-fz-pill:    13px;
    --cpi-fz-heading: 13px;
    --cpi-fz-note:    11px;

    --cpi-r-box:  10px;
    --cpi-r-pill: 20px;
    --cpi-card-outline-width: 0px;
    --cpi-card-outline-color: #ffffff;

    --cpi-gap:    8px;
    --cpi-pad:    12px 14px;

    --cpi-pill-px: 14px;
    --cpi-pill-py: 7px;

    --cpi-icon-w: 52px;
    --cpi-icon-h: 32px;

    background:  transparent;
    font-family: inherit;
    color:       var(--cpi-value);
    max-width:   100%;
}

.cpi-panel .cpi-columns {
    display:     flex;
    align-items: flex-start;
    gap:         var(--cpi-gap);
}

.cpi-panel .cpi-col-left,
.cpi-panel .cpi-col-right {
    flex:           1 1 0;
    display:        flex;
    flex-direction: column;
    gap:            var(--cpi-gap);
    min-width:      0;
}

.cpi-panel .cpi-card {
    background:    var(--cpi-card-bg);
    border:        var(--cpi-card-outline-width) solid var(--cpi-card-outline-color);
    border-radius: var(--cpi-r-box);
    padding:       var(--cpi-pad);
}

.cpi-panel .cpi-info-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   var(--cpi-gap);
}

.cpi-panel .cpi-section-heading {
    font-size:      var(--cpi-fz-heading);
    font-weight:    700;
    color:          var(--cpi-heading);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom:  10px;
}

.cpi-panel .cpi-time-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--cpi-gap);
}

.cpi-panel .cpi-time-grid .cpi-card {
    background: rgba(255,255,255,.07);
}

.cpi-panel .cpi-item-label {
    font-size:     var(--cpi-fz-label);
    color:         var(--cpi-label);
    margin-bottom: 4px;
    font-weight:   500;
}

.cpi-panel .cpi-item-value {
    font-size:   var(--cpi-fz-value);
    font-weight: 700;
    color:       var(--cpi-value);
    line-height: 1.2;
}

.cpi-panel .cpi-item-value--highlight {
    color: var(--cpi-highlight);
}

.cpi-panel .cpi-payment-icons {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
    align-items: center;
}

.cpi-panel .cpi-payment-icon {
    width:       var(--cpi-icon-w);
    height:      var(--cpi-icon-h);
    flex-shrink: 0;
    display:     flex;
    align-items: center;
}

.cpi-panel .cpi-payment-icon img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    display:    block;
}

.cpi-panel .cpi-pills {
    display:   flex;
    flex-wrap: wrap;
    gap:       5px;
}

.cpi-panel .cpi-pill {
    background:    var(--cpi-pill-bg);
    color:         var(--cpi-pill-text);
    font-size:     var(--cpi-fz-pill);
    font-weight:   600;
    padding:       var(--cpi-pill-py) var(--cpi-pill-px);
    border-radius: var(--cpi-r-pill);
    display:       inline-block;
    line-height:   1;
}

.cpi-panel .cpi-note {
    font-size:  var(--cpi-fz-note);
    color:      var(--cpi-note);
    padding:    6px 0 2px;
    font-style: italic;
    text-align: center;
}

@media (max-width: 768px) {
    .cpi-panel .cpi-columns {
        flex-direction: column;
    }
    .cpi-panel .cpi-col-left,
    .cpi-panel .cpi-col-right {
        width: 100%;
    }
    .cpi-panel .cpi-info-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .cpi-panel .cpi-time-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .cpi-panel .cpi-info-grid {
        grid-template-columns: 1fr;
    }
    .cpi-panel .cpi-time-grid {
        grid-template-columns: 1fr;
    }
}