.hap-container {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.hap-plan {
border: 1px solid #ccc;
border-radius: 10px;
padding: 15px;
width: 250px;
text-align: center;
box-shadow: 0 0 10px #eee;
}
.hap-btn {
display: inline-block;
margin-top: 10px;
padding: 8px 12px;
background: #673de6;
color: white;
border-radius: 5px;
text-decoration: none;
} .hap-promo-wrap {
margin: 12px 0 8px;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.hap-offer-text {
display: inline-block;
background: linear-gradient(135deg, #28a745, #20c45e);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
padding: 3px 10px;
border-radius: 20px;
text-transform: uppercase;
}
.hap-promo-label {
font-size: 12px;
color: #555;
font-weight: 600;
letter-spacing: 0.3px;
}
.hap-promo-btn {
display: inline-block;
background: #fff3cd;
border: 2px dashed #e0a800;
color: #856404;
font-weight: 700;
font-size: 14px;
letter-spacing: 1.5px;
padding: 5px 14px;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}
.hap-promo-btn:hover {
background: #ffe69c;
transform: scale(1.05);
}
.hap-promo-btn:active {
transform: scale(0.97);
}
.hap-copied-msg {
font-size: 12px;
color: #198754;
font-weight: 600;
animation: hap-fade-in 0.2s ease;
}
@keyframes hap-fade-in {
from { opacity: 0; transform: translateY(-4px); }
to   { opacity: 1; transform: translateY(0); }
}