:root {
    --safaricom-green-color: #52B44A;
}

/* Custom Card Styles */
.offer-card {
    border: 2px solid #ddd;
    border-radius: 9px;
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
    display: flex;
    align-items: center;
}

.offer-card:hover {
    border-color: var(--safaricom-green-color);
}

.offer-card.selected {
    border-color: var(--safaricom-green-color);
    color: var(--safaricom-green-color);
}

.offer-input:checked + .offer-label {
    font-weight: bold;
    color: var(--safaricom-green-color);
}

.offer-input {
    display: none;
}

.offer-label {
    margin-left: 10px;
    font-weight: normal;
    color: #333;
    flex-grow: 1;
}

.text-success {
    font-size: smaller;
    text-align: center;
}

.custom-badge {
    left: 94%;
}

.loader {
	width: 100%;
	height: 20px;
	background: 
	  radial-gradient(circle 10px,#3aa335 95%,#0000 )  right /calc(200% + 20px) 100%,
	  linear-gradient(#3aa335 0 0) center/100% 4px; 
	background-repeat: no-repeat; 
	-webkit-mask: radial-gradient(circle 4px,#3aa335 93%, #3aa335 ) right/calc(200% + 20px) 100%;
	animation: l6 1s infinite linear;
	
  }
  @keyframes l6 {
	100% {background-position: left;-webkit-mask-position:left}
  }