:root {
    --klinz-text-dark: #111827;
    --klinz-text-gray: #6b7280;
    --klinz-text-light: #9ca3af;
}

.klinz-qb-container {
    width: 100%; max-width: var(--klinz-container-width); max-height: var(--klinz-container-height); 
    background: var(--klinz-container-bg); padding: 15px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin-bottom: 25px; box-sizing: border-box; margin-left: auto; margin-right: auto;
}

/* Title Styling */
.klinz-qb-title { 
    text-align: center; color: var(--klinz-primary); 
    font-weight: 800; font-size: 18px; 
    margin-bottom: 20px; margin-top: 0;
}

.klinz-qb-cards { display: flex; flex-direction: column; gap: 14px; padding: 0 5px;}

/* --- Card Styling (Exactly like picture) --- */
.klinz-card {
    position: relative; display: flex; align-items: center; 
    background: var(--klinz-bg-unselected); /* Light pinkish background from Admin */
    border: 1px solid #fecdd3; border-radius: 8px;
    padding: 16px 15px; cursor: pointer; transition: all 0.2s ease;
    box-sizing: border-box;
}

/* Selected Active Card */
.klinz-card.klinz-active {
    background: #ffffff; /* White background for active card */
    border: 2px solid var(--klinz-primary); /* Dark red border */
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* --- Radio Button --- */
.klinz-radio {
    width: 18px; height: 18px; border-radius: 50%; border: 1px solid #cbd5e1;
    margin-right: 15px; display: flex; justify-content: center; align-items: center;
    flex-shrink: 0; background: #fff;
}
.klinz-active .klinz-radio { border-color: var(--klinz-primary); }
.klinz-radio-inner {
    width: 10px; height: 10px; border-radius: 50%; background: var(--klinz-primary);
    opacity: 0; transform: scale(0.5); transition: all 0.2s ease;
}
.klinz-active .klinz-radio-inner { opacity: 1; transform: scale(1); }

/* --- Card Content (Vertically Stacked) --- */
.klinz-card-content { 
    display: flex; justify-content: space-between; align-items: center; width: 100%; 
}

/* LEFT SIDE: Qty -> Big Price -> Old Price */
.klinz-col-left { 
    display: flex; flex-direction: column; justify-content: center; gap: 3px; 
}
.klinz-qty-title { 
    font-size: 13px; font-weight: 500; color: var(--klinz-text-gray); 
}
.klinz-active .klinz-qty-title { 
    font-weight: 600; color: var(--klinz-text-dark); 
}

/* Badi Real Price */
.klinz-price-current { 
    font-size: 19px; font-weight: 900; color: var(--klinz-text-dark); 
    line-height: 1.1; 
}
.klinz-price-unit { 
    font-size: 12px; font-weight: normal; color: var(--klinz-text-gray); 
}
.klinz-active .klinz-price-current { 
    color: var(--klinz-text-dark); /* Keeps it black like the picture */
}

/* Cut Price */
.klinz-price-old { 
    font-size: 13px; color: var(--klinz-text-light); 
    text-decoration: line-through; font-weight: 500; 
}

/* RIGHT SIDE: Text only (No Box) */
.klinz-col-right { 
    display: flex; flex-direction: column; justify-content: center; align-items: flex-end; 
}
.klinz-tag-standard { 
    color: var(--klinz-primary); font-size: 14px; font-weight: 700; 
}
.klinz-tag-discount { 
    color: var(--klinz-primary); font-size: 15px; font-weight: 800; 
}

/* --- Ribbon (Most Popular) Overlapping Top Right Border --- */
.klinz-ribbon {
    position: absolute; 
    top: -12px; 
    right: 15px; 
    background: var(--klinz-badge-bg, var(--klinz-primary)); /* Uses primary or badge color */
    color: #ffffff; font-size: 11px; font-weight: 800; text-transform: uppercase;
    padding: 3px 12px; border-radius: 4px;
    z-index: 5; letter-spacing: 0.5px; 
}

/* Ribbon small triangle pointer (optional nice touch from picture) */
.klinz-ribbon::after {
    content: ''; position: absolute; top: 100%; left: 0;
    border-width: 0 6px 6px 0; border-style: solid;
    border-color: transparent var(--klinz-primary) transparent transparent;
    filter: brightness(0.7); /* Makes it look like a fold */
}

/* --- Footer Section --- */
.klinz-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 20px; padding: 0 5px;
}
.klinz-delivery-text { 
    color: var(--klinz-primary); font-size: 13px; font-weight: 500; 
}
.klinz-total-box { 
    font-size: 14px; font-weight: 600; color: var(--klinz-text-dark); 
}
.klinz-total-amount { 
    font-size: 17px; font-weight: 900; margin-left: 5px;
}

@media (max-width: 400px) {
    .klinz-price-current { font-size: 17px; }
    .klinz-tag-discount { font-size: 13px; }
    .klinz-tag-standard { font-size: 13px; }
    .klinz-ribbon { right: 10px; font-size: 10px; }
}