/* =========================================================
   VISIT MY PROFILE — PREMIUM PRICING V2
   ========================================================= */

.vmp-p2 {
    --p2-blue: #1769ff;
    --p2-blue-deep: #0754e8;
    --p2-navy: #07152f;
    --p2-text: #5d6b81;
    --p2-muted: #8995a8;
    --p2-border: rgba(18,55,105,0.09);

    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding: 108px 0 100px !important;

    background:
        radial-gradient(circle at 12% 18%, rgba(23,105,255,0.06), transparent 28%),
        radial-gradient(circle at 88% 76%, rgba(78,167,255,0.07), transparent 30%),
        linear-gradient(180deg, #f9fcff 0%, #ffffff 52%, #f8fbff 100%);
}

.vmp-p2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;

    pointer-events: none;

    background-image:
        linear-gradient(rgba(28,77,148,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28,77,148,0.022) 1px, transparent 1px);

    background-size: 60px 60px;
}

/* ---------- Heading ---------- */

.vmp-p2 .vmp-p2-heading {
    max-width: 820px;
    margin: 0 auto 58px !important;
    scroll-margin-top: 112px;
}

.vmp-p2 .vmp-p2-eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--p2-blue-deep);
    font-size: 12px;
    font-weight: 760;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vmp-p2 .vmp-p2-heading h2 {
    margin: 0;

    color: var(--p2-navy) !important;

    font-size: clamp(40px, 4vw, 58px) !important;
    font-weight: 760 !important;
    line-height: 1.06;
    letter-spacing: -0.04em;
}

.vmp-p2 .vmp-p2-subtitle {
    max-width: 620px;
    margin: 18px auto 0;
    color: var(--p2-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;
}

/* ---------- Disable legacy Slick geometry ---------- */

.vmp-p2 .vmp-p2-grid {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 22px;

    align-items: stretch;
}

.vmp-p2 .vmp-p2-grid::before,
.vmp-p2 .vmp-p2-grid::after {
    display: none !important;
}

.vmp-p2 .vmp-p2-grid > .slick-list,
.vmp-p2 .vmp-p2-grid > .slick-track {
    display: contents !important;
}

.vmp-p2 .vmp-p2-grid > div {
    width: auto !important;
    min-width: 0;
    height: auto;
}

/* ---------- Card ---------- */

.vmp-p2 .vmp-p2-card {
    position: relative;

    display: flex;
    flex-direction: column;

    height: 100% !important;

    overflow: hidden;

    border: 1px solid var(--p2-border) !important;
    border-radius: 28px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.99),
            rgba(246,250,255,0.98)
        ) !important;

    box-shadow:
        0 20px 50px rgba(18,55,105,0.085),
        inset 0 1px 0 rgba(255,255,255,1) !important;

    transition:
        transform 260ms cubic-bezier(0.22,1,0.36,1),
        border-color 260ms ease,
        box-shadow 260ms ease;
}

.vmp-p2 .vmp-p2-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;

    height: 3px;

    border-radius: 0 0 999px 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(23,105,255,0.72),
            transparent
        );

    opacity: 0.55;
}

.vmp-p2 .vmp-p2-card-body {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 30px 26px 24px !important;
}

/* ---------- Trial badge ---------- */

.vmp-p2 .trial-plan-lable {
    position: absolute;

    top: 16px;
    right: 16px;

    z-index: 3;
}

.vmp-p2 .trial-plan-lable span {
    display: inline-flex;

    padding: 6px 10px !important;

    border: 1px solid rgba(23,105,255,0.12);
    border-radius: 999px;

    color: var(--p2-blue-deep);

    background: rgba(235,244,255,0.95);

    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.02em;
}

/* ---------- Plan title ---------- */

.vmp-p2 .pricing-card .card-title {
    margin-bottom: 16px !important;

    color: var(--p2-navy) !important;

    font-size: 20px !important;
    font-weight: 750 !important;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

/* ---------- Price ---------- */

.vmp-p2 .pricing-card .price {
    margin-bottom: 22px !important;

    color: var(--p2-blue-deep) !important;

    font-size: 40px !important;
    font-weight: 780 !important;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.vmp-p2 .pricing-card .price .fs-18 {
    color: #8591a4;

    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 0;
}

/* ---------- Custom quantity selector ---------- */

.vmp-p2 .customSelect {
    min-height: 44px;

    border: 1px solid rgba(23,105,255,0.12) !important;
    border-radius: 12px !important;

    color: #294463;

    background-color: #f7faff !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1);

    font-size: 12px;
    font-weight: 650;

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.vmp-p2 .customSelect:focus {
    border-color: rgba(23,105,255,0.34) !important;

    box-shadow:
        0 0 0 4px rgba(23,105,255,0.07) !important;
}

/* ---------- CTA buttons ---------- */

.vmp-p2 .pricing-card .btn {
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px !important;

    font-size: 12px;
    font-weight: 720;

    box-shadow: none;

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        background 220ms ease;
}

.vmp-p2 .pricing-card .btn-primary {
    border-color: transparent !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #0754e8,
            #2478ff
        ) !important;

    box-shadow:
        0 11px 24px rgba(23,105,255,0.20) !important;
}

.vmp-p2 .pricing-card .btn-success {
    border-color: rgba(25,167,108,0.12) !important;

    color: #147b56 !important;

    background: #eaf9f2 !important;
}

.vmp-p2 .pricing-card .btn-info {
    border-color: rgba(23,105,255,0.10) !important;

    color: #1b5fd0 !important;

    background: #edf5ff !important;
}

/* ---------- Feature list ---------- */

.vmp-p2 .vmp-p2-features {
    margin: 4px 0 20px !important;
    padding: 22px 0 0 !important;

    border-top: 1px solid rgba(18,55,105,0.07);
}

.vmp-p2 .vmp-p2-features li {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-bottom: 12px;

    color: #59677d;

    font-size: 11.5px;
    font-weight: 560;
    line-height: 1.45;
}

.vmp-p2 .vmp-p2-features .check-box {
    flex: 0 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    margin-top: -1px;

    border-radius: 7px;

    background: #edf5ff;
}

.vmp-p2 .vmp-p2-features .active-check .check-box i {
    color: var(--p2-blue) !important;

    font-size: 9px !important;
}

.vmp-p2 .vmp-p2-features .unactive-check {
    color: #a1aaba;
}

.vmp-p2 .vmp-p2-features .unactive-check .check-box {
    background: #f3f5f8;
}

.vmp-p2 .vmp-p2-features .unactive-check .check-box i {
    color: #b6beca !important;

    font-size: 9px !important;
}

/* ---------- Expand / collapse ---------- */

.vmp-p2 .vmp-p2-more,
.vmp-p2 .vmp-p2-less {
    margin-top: auto;

    padding-top: 4px;
}

.vmp-p2 .show-plan-icon-btn,
.vmp-p2 .less-plan-icon-btn {
    color: var(--p2-blue) !important;

    font-size: 20px;

    cursor: pointer;

    transition:
        transform 200ms ease,
        color 200ms ease;
}

/* ---------- Desktop hover ---------- */

@media (hover: hover) {

    .vmp-p2 .vmp-p2-card:hover {
        transform: translateY(-7px);

        border-color: rgba(23,105,255,0.16) !important;

        box-shadow:
            0 30px 66px rgba(18,55,105,0.12),
            0 6px 22px rgba(23,105,255,0.045),
            inset 0 1px 0 rgba(255,255,255,1) !important;
    }

    .vmp-p2 .pricing-card .btn-primary:hover {
        transform: translateY(-2px);

        box-shadow:
            0 15px 30px rgba(23,105,255,0.25) !important;
    }

    .vmp-p2 .show-plan-icon-btn:hover,
    .vmp-p2 .less-plan-icon-btn:hover {
        transform: translateY(2px);
        color: var(--p2-blue-deep) !important;
    }
}

/* =========================================================
   PRICING V2 — RESPONSIVE + MOTION
   ========================================================= */

/* ---------- Entrance ---------- */

@keyframes vmpP2Reveal {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vmp-p2 .vmp-p2-heading {
    animation: vmpP2Reveal 720ms ease both;
}

.vmp-p2 .vmp-p2-card {
    animation: vmpP2Reveal 760ms cubic-bezier(0.22,1,0.36,1) both;
}

.vmp-p2 .vmp-p2-grid > div:nth-child(1) .vmp-p2-card {
    animation-delay: 100ms;
}

.vmp-p2 .vmp-p2-grid > div:nth-child(2) .vmp-p2-card {
    animation-delay: 180ms;
}

.vmp-p2 .vmp-p2-grid > div:nth-child(3) .vmp-p2-card {
    animation-delay: 260ms;
}

.vmp-p2 .vmp-p2-grid > div:nth-child(4) .vmp-p2-card {
    animation-delay: 340ms;
}

/* ---------- Wide desktop: 4+ plans ---------- */

@media (min-width: 1200px) {

    .vmp-p2 .vmp-p2-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vmp-p2 .vmp-p2-grid > div:only-child {
        max-width: 420px;
        width: 100% !important;
        justify-self: center;
        grid-column: 1 / -1;
    }
}

/* ---------- Tablet ---------- */

@media (max-width: 1199.98px) {

    .vmp-p2 {
        padding: 92px 0 82px !important;
    }

    .vmp-p2 .vmp-p2-heading {
        margin-bottom: 48px !important;
    }

    .vmp-p2 .vmp-p2-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .vmp-p2 .vmp-p2-card-body {
        padding: 27px 22px 22px !important;
    }
}

/* ---------- Mobile ---------- */

@media (max-width: 767.98px) {

    .vmp-p2 {
        padding: 76px 0 68px !important;
    }

    .vmp-p2 .vmp-p2-heading {
        margin-bottom: 38px !important;
    }

    .vmp-p2 .vmp-p2-heading h2 {
        font-size: clamp(34px, 9vw, 46px) !important;
    }

    .vmp-p2 .vmp-p2-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .vmp-p2 .vmp-p2-card {
        max-width: 520px;
        width: 100%;

        margin: 0 auto;

        border-radius: 24px !important;
    }

    .vmp-p2 .vmp-p2-card-body {
        padding: 25px 20px 21px !important;
    }

    .vmp-p2 .pricing-card .price {
        font-size: 36px !important;
    }

    .vmp-p2 .pricing-card .btn {
        min-height: 44px;
    }

    .vmp-p2 .vmp-p2-features {
        padding-top: 19px !important;
    }
}

/* ---------- Small mobile ---------- */

@media (max-width: 575.98px) {

    .vmp-p2 {
        padding: 66px 0 58px !important;
    }

    .vmp-p2 .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .vmp-p2 .vmp-p2-heading h2 {
        font-size: clamp(31px, 10vw, 40px) !important;
    }

    .vmp-p2 .vmp-p2-card-body {
        padding: 23px 17px 19px !important;
    }

    .vmp-p2 .pricing-card .card-title {
        font-size: 18px !important;
    }

    .vmp-p2 .pricing-card .price {
        margin-bottom: 19px !important;
        font-size: 33px !important;
    }

    .vmp-p2 .vmp-p2-features li {
        margin-bottom: 10px;
        font-size: 11px;
    }

    .vmp-p2 .trial-plan-lable {
        top: 12px;
        right: 12px;
    }
}

/* ---------- RTL ---------- */

.vmp-p2.rtl .vmp-p2-features li {
    text-align: right;
}

.vmp-p2.rtl .trial-plan-lable {
    right: auto;
    left: 16px;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {

    .vmp-p2 .vmp-p2-heading,
    .vmp-p2 .vmp-p2-card {
        animation: none !important;
    }

    .vmp-p2 .vmp-p2-card,
    .vmp-p2 .pricing-card .btn,
    .vmp-p2 .show-plan-icon-btn,
    .vmp-p2 .less-plan-icon-btn {
        transition: none !important;
    }
}

/* =========================================================
   PRICING V2 — NEUTRALIZE LEGACY SLICK WRAPPERS
   ========================================================= */

.vmp-p2 .vmp-p2-grid.slick-initialized {
    display: grid !important;
}

.vmp-p2 .vmp-p2-grid > .slick-list {
    display: contents !important;
    overflow: visible !important;
    height: auto !important;
}

.vmp-p2 .vmp-p2-grid > .slick-list > .slick-track {
    display: contents !important;

    width: auto !important;
    height: auto !important;

    transform: none !important;
}

.vmp-p2 .vmp-p2-grid .slick-slide {
    display: block !important;

    float: none !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
}

.vmp-p2 .vmp-p2-grid .slick-slide > div {
    display: contents !important;
}

.vmp-p2 .vmp-p2-grid .slick-cloned {
    display: none !important;
}

/* =========================================================
   PRICING V2 — FINAL DESKTOP PROPORTION REFINEMENT
   ========================================================= */

/* Do not stretch a single pricing card vertically */
.vmp-p2 .vmp-p2-grid {
    align-items: start !important;
}

/* Single public plan — controlled premium width */
@media (min-width: 1200px) {
    .vmp-p2 .vmp-p2-grid > div:only-child {
        max-width: 460px;
    }
}

/* Override legacy pricing-card height/min-height */
.vmp-p2 .vmp-p2-card {
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
}

/* Content should size naturally instead of filling slider height */
.vmp-p2 .vmp-p2-card-body {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    padding: 28px 28px 24px !important;
}

/* Tighten title / price hierarchy */
.vmp-p2 .pricing-card .card-title {
    margin-bottom: 12px !important;
}

.vmp-p2 .pricing-card .price {
    margin-bottom: 18px !important;
}

/* Remove excessive inherited space before feature list */
.vmp-p2 .vmp-p2-features {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding-top: 18px !important;
}

/* More compact premium feature rhythm */
.vmp-p2 .vmp-p2-features li {
    margin-bottom: 10px !important;
}

/* Let expand/collapse control follow content naturally */
.vmp-p2 .vmp-p2-more,
.vmp-p2 .vmp-p2-less {
    margin-top: 6px !important;
    padding: 4px 0 2px !important;
}

/* Ensure Slick does not impose artificial height */
.vmp-p2 .slick-list,
.vmp-p2 .slick-track,
.vmp-p2 .slick-slide {
    min-height: 0 !important;
}

.vmp-p2 .slick-track {
    height: auto !important;
}

/* Heading should not feel detached from cards */
.vmp-p2 .vmp-p2-heading {
    margin-bottom: 42px !important;
}

/* Mobile keeps a little more breathing room */
@media (max-width: 767.98px) {
    .vmp-p2 .vmp-p2-heading {
        scroll-margin-top: 84px;
    }

    .vmp-p2 .vmp-p2-card-body {
        padding: 23px 18px 20px !important;
    }

    .vmp-p2 .vmp-p2-heading {
        margin-bottom: 32px !important;
    }
}

/* =========================================================
   PRICING V2 — LEGACY INNER HEIGHT RESET
   ========================================================= */

.vmp-p2 .pricing-plan-list,
.vmp-p2 .vmp-p2-features {
    height: auto !important;
    min-height: 0 !important;
}

.vmp-p2 .show-plan-features,
.vmp-p2 .less-plan-features {
    margin-bottom: 0 !important;
}

.vmp-p2 .vmp-p2-more,
.vmp-p2 .vmp-p2-less {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}