/*
 * Pricing strip at the bottom of product pages (partials/pricing-strip.php).
 * Same look as the pricing page: white card, indigo accents, gradient button.
 */

.vsp-strip { padding: 4.5rem 1.5rem; background: #fff; }
.vsp-strip__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2.5rem;
    max-width: 68rem;
    margin: 0 auto;
    padding: 2.25rem 2.5rem;
    border: 1px solid #e0e7ff;
    border-radius: 1.5rem;
    background: radial-gradient(90% 120% at 0% 0%, #f5f3ff 0%, #fff 55%, #f0f7ff 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 48px -36px rgba(49, 46, 129, .35);
}
.vsp-strip__eyebrow { display: inline-flex; margin: 0 0 .875rem; padding: .375rem .875rem; border: 1px solid #e0e7ff; border-radius: 999px; background: #eef2ff; color: #4f46e5; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.vsp-strip .vsp-strip__title { margin: 0 0 1rem; color: #0f172a; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }

.vsp-strip__plans { display: flex; flex-wrap: wrap; gap: .625rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.vsp-strip__plan { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .875rem .5rem .5rem; border: 1px solid #e0e7ff; border-radius: 999px; background: #fff; font-size: .875rem; }
.vsp-strip__plan strong { color: #0f172a; font-weight: 700; }
.vsp-strip__plan span:last-child { color: #475467; }
.vsp-strip__mark { display: inline-grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #d1fae5; color: #047857; }
.vsp-strip__mark svg { width: 13px; height: 13px; stroke-width: 3.5; }
.vsp-strip__plan.is-off { border-color: #eef0f4; background: #fafafa; }
.vsp-strip__plan.is-off .vsp-strip__mark { background: #f3f4f6; color: #9ca3af; }
.vsp-strip__plan.is-off strong, .vsp-strip__plan.is-off span:last-child { color: #9ca3af; }

.vsp-strip .vsp-strip__note { margin: 0; color: #667085; font-size: .9375rem; line-height: 1.6; }

.vsp-strip__actions { display: flex; flex-direction: column; gap: .75rem; min-width: 13rem; }
.vsp-strip__btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.5rem; border: 1px solid transparent; border-radius: 12px; background: linear-gradient(90deg, #4f46e5, #7c3aed); color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 10px 20px -10px rgba(79, 70, 229, .45); transition: transform .3s, box-shadow .3s; }
.vsp-strip__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.vsp-strip__btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 24px -10px rgba(79, 70, 229, .55); }
.vsp-strip__btn:hover svg { transform: translateX(3px); }
.vsp-strip__btn:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 3px; }
.vsp-strip__btn--outline { border-color: #c7d2fe; background: #fff; color: #4338ca; box-shadow: none; }
.vsp-strip__btn--outline:hover { border-color: #a5b4fc; background: #eef2ff; color: #3730a3; box-shadow: none; }

@media (max-width: 767px) {
    .vsp-strip { padding: 3.5rem 1rem; }
    .vsp-strip__card { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem 1.25rem; }
    .vsp-strip__actions { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vsp-strip__btn, .vsp-strip__btn svg { transition: none; }
    .vsp-strip__btn:hover { transform: none; }
}