/* Business-specific pricing stylesheet */
/* Inherit common styles from site_ui; add overrides here for legacy parity. */
@import url("/static/default/css/components/pricing.css");

/* Legacy discount badge styling (parity with old pricing.css) */
.discount-rate{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff4757, #ff3838);
    color: white !important;
    -webkit-text-fill-color: white !important;
    padding: 16px 0px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3), 0 2px 4px rgba(0,0,0,0.1);
    transform: rotate(-5deg);
    animation: discountPulse 2s ease-in-out infinite;
    margin-left: 8px;
    min-width: 60px;
    height: 28px;
    text-transform: uppercase;
    overflow: visible;
    z-index: 1;
}
.discount-rate::before{
    content: '';
    position: absolute; top:-4px; left:-4px; right:-4px; bottom:-4px;
    background: radial-gradient(circle, rgba(255,71,87,0.4) 0%, transparent 70%),
                linear-gradient(45deg, #ff6b6b, #ff4757, #ff3838, #ff6b6b);
    border-radius: 50px; z-index: -1; opacity: 0.8; animation: discountGlow 3s ease-in-out infinite;
}
.discount-rate.save::after{
    content: '☀️'; position: absolute; top:-10px; right:-10px; font-size:14px;
    animation: sunRotate 4s linear infinite; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    text-shadow: 0 0 8px rgba(255,215,0,0.8);
}
.save-label{
    position: absolute; top:-8px; left:-8px; font-size:8px; font-weight:700; color:white;
    background: linear-gradient(135deg, #ff6b6b, #ff4757);
    padding: 2px 4px; border-radius: 4px; letter-spacing: 0.02em; text-transform: uppercase; z-index:2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3); animation: savePulse 1.5s ease-in-out infinite; white-space: nowrap;
}
@keyframes discountPulse { 0%,100%{ transform: rotate(-5deg) scale(1); } 50%{ transform: rotate(-5deg) scale(1.05);} }
@keyframes discountGlow { 0%,100%{ opacity:0.8; transform:scale(1);} 50%{ opacity:1; transform:scale(1.02);} }
@keyframes sunRotate { 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);} }
@keyframes savePulse { 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.1); opacity:0.9;} }

/* Features list parity */
.pricing-features{ list-style:none; margin: 12px 0 0; padding:0; }
.pricing-feature-item{ position:relative; padding-left: 18px; margin: 6px 0; color: var(--text-secondary); font-size: 14px; }
.pricing-feature-item::before{ content:'✓'; position:absolute; left:0; color: var(--pink-primary); }