/* 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); }

/* --- Payment methods (logos) --- */
.pricing-payment {
    /* Unified visual height for all logos */
    --pay-logo-height: 20px;
    text-align: center;
    margin-top: 2rem;
    padding: 0 20px;
}

.pricing-payment-methods {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.pricing-payment-methods img,
.pricing-payment-methods .payment-logo {
    height: var(--pay-logo-height);
    opacity: 0.9;
    transition: opacity var(--transition-normal, .2s ease), filter var(--transition-normal, .2s ease);
    object-fit: contain;
}

/* Emphasize Stripe wordmark for clarity (slightly larger) */
.pricing-payment-methods img.brand-stripe{
    height: 1em !important; /* match brand-icon font-size */
    width: auto;
    filter: none;
    opacity: 0.95;
    vertical-align: -0.05em;
}

/* Minimal, clean text labels (no capsule) */
.pricing-payment-methods .brand-icon{
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    height: auto;
    line-height: 1;
    font-size: inherit; /* keep base size (FA icons ~2rem from site_ui) */
    font-weight: 600;
    opacity: 0.9;
}

/* Unify text badges provided by base (.brand-icon spans) */
.pricing-payment-methods .brand-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--pay-logo-height);
    line-height: var(--pay-logo-height);
    padding: 0 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    background: var(--surface-2, #f4f5f7);
    color: #2B2F36; /* safe dark (not black) */
}

/* Re-enable base icons/text; do not hide Stripe/text badges */

.pricing-payment-methods img:hover,
.pricing-payment-methods .payment-logo:hover {
    opacity: 1;
    filter: brightness(1.1);
}
/* Hover effect for text badges */
.pricing-payment-methods .brand-icon:hover { opacity: 1; filter: brightness(1.05); }

/* text fallback badge if logos fail to load (rare) */
.pricing-payment-methods .payment-logo--text {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

/* subtle brand color tints for fallback badges */
.payment-logo--text.payment-logo--stripe { background: #f3f4f7; }
.payment-logo--text.payment-logo--naverpay { background: #e6f7eb; }
.payment-logo--text.payment-logo--kakaopay { background: #fff6bf; }
.payment-logo--text.payment-logo--payco { background: #fde6e6; }
.payment-logo--text.payment-logo--samsungpay { background: #eef2ff; }

@media (max-width: 768px) {
    .pricing-payment { --pay-logo-height: 20px; }
    .pricing-payment-methods { gap: 1.25rem; }
}

/* Brand text badge colors (use text when no official logo) */
.pricing-payment-methods .brand-p24{ color: #C81D25; font-weight: 700; }
.pricing-payment-methods .brand-naver_pay{ color: #0E8E47; }
.pricing-payment-methods .brand-kakao_pay{ color: #6A5500; }
.pricing-payment-methods .brand-payco{ color: #C81D25; font-weight: 700; }
.pricing-payment-methods .brand-samsung_pay{ color: #1428A0; }

/* EU bank redirects (text only colors) */
.pricing-payment-methods .brand-ideal{ color:#C2185B; }
.pricing-payment-methods .brand-bancontact{ color:#0046AD; }
.pricing-payment-methods .brand-giropay{ color:#BE0034; }
.pricing-payment-methods .brand-eps{ color:#BE0034; }

/* SEA wallets */
.pricing-payment-methods .brand-paynow{ color:#C0142C; }
.pricing-payment-methods .brand-grabpay{ color:#068B44; }
/* Stripe FA icon color */
.pricing-payment-methods .brand-stripe{ color:#635BFF; }

/* BNPL & Open Banking */
.pricing-payment-methods .brand-klarna{ color:#C2185B; }
.pricing-payment-methods .brand-afterpay{ color:#078F70; }
.pricing-payment-methods .brand-affirm{ color:#1947D2; }
.pricing-payment-methods .brand-paybybank, .pricing-payment-methods .brand-pay_by_bank{ color:#2B2F36; }

/* Common extras */
.pricing-payment-methods .brand-paypal{ color:#003087; }
.pricing-payment-methods .brand-blik{ color:#4A5568; }
.pricing-payment-methods .brand-boleto{ color:#8B6F00; }
.pricing-payment-methods .brand-cashapp{ color:#0E8E47; }
.pricing-payment-methods .brand-fpx{ color:#1C3FAA; }
.pricing-payment-methods .brand-konbini{ color:#9C6E00; }
.pricing-payment-methods .brand-link{ color:#0A2540; }
.pricing-payment-methods .brand-mb_way{ color:#C8142D; }
.pricing-payment-methods .brand-multibanco{ color:#0046AD; }
.pricing-payment-methods .brand-oxxo{ color:#A65C00; }
.pricing-payment-methods .brand-pix{ color:#0E8E47; }
.pricing-payment-methods .brand-promptpay{ color:#1A56DB; }
.pricing-payment-methods .brand-sofort{ color:#C74300; }
.pricing-payment-methods .brand-swish{ color:#6E2CA0; }
.pricing-payment-methods .brand-revolut_pay{ color:#0038FF; }
.pricing-payment-methods .brand-mobilepay{ color:#2962D5; }
.pricing-payment-methods .brand-zip{ color:#5A21C8; }
.pricing-payment-methods .brand-amazon_pay{ color:#AD6F00; }
.pricing-payment-methods .brand-alma{ color:#C2185B; }
.pricing-payment-methods .brand-twint{ color:#2B2F36; }
.pricing-payment-methods .brand-kr_card{ color:#2B2F36; }
.pricing-payment-methods .brand-nz_bank_account{ color:#2B2F36; }
.pricing-payment-methods .brand-billie{ color:#6E2CA0; }
.pricing-payment-methods .brand-paypay{ color:#C8142D; }
.pricing-payment-methods .brand-satispay{ color:#078F70; }