.wcpd-wrapper {
    font-family: inherit;
    margin-bottom: 25px;
    width: 100%;
}
.wcpd-header {
    font-size: 13px;
    font-weight: 700;
    color: #103D47;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.wcpd-container {
    display: flex;
    gap: 15px;
}
.wcpd-box {
    position: relative;
    flex: 1;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 10px;
    text-align: center;
    cursor: pointer;
    background: #ffffff;
    transition: all 0.2s ease-in-out;
}
.wcpd-box:hover { border-color: #d1d5db; }

/* The Selected State! */
.wcpd-box.selected {
    border: 2px solid #2C1836;
    background: #FAFCFF;
}

/* Typography Inside Box */
.wcpd-qty { font-weight: bold; color: #2C1836; font-size: 18px; margin-bottom: 2px; }
.wcpd-price { font-weight: bold; color: #2C1836; font-size: 20px; margin-bottom: 6px; }
.wcpd-subtitle { color: #6b7280; font-size: 13px; }

/* Dynamic Floating Badges */
.wcpd-badge-top {
    position: absolute;
    top: -12px;
    right: 15px;
    background: #1C7A4A; /* Exact Green */
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 12px;
    border-radius: 20px;
    z-index: 10;
}
.wcpd-badge-bottom {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #2C1836; /* Dark Purple */
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 14px;
    border-radius: 20px;
    white-space: nowrap;
    z-index: 10;
}

/* Ensure mobile layout stacks or squishes gracefully */
@media (max-width: 480px) {
    .wcpd-container { flex-direction: column; }
}