/* =====================================================================
   Pricing page (resources/views/v2/pricing.blade.php) and the plan block
   of the subscription page (resources/views/v2/backend/account/plan.blade.php)

   Both pages also load v2.demo-results.*.css for the pieces shared with
   the demo pages (pill, button, section head, plans, trust row, premium
   row, FAQ). Those pieces read their colors from the custom properties
   below, which are a copy of the ones defined on .demo-results and must
   stay in sync.
   ===================================================================== */

.pricing-page {
    --demo-red: #D9432F;
    --demo-red-dark: #B8361F;
    --demo-ink: #1F2233;
    --demo-muted: #5B6070;
    --demo-line: #E3E5EB;
    --demo-bg: #F3F4F7;
    --demo-green: #1E7F4A;
    --demo-green-bg: #E6F4EC;
    --demo-green-line: #C6E6D2;
    --demo-green-text: #33513F;
    --demo-blue: #2B4C9B;
    --demo-blue-bg: #E8EEFA;
    --demo-blue-line: #C9D6F0;
    --demo-offer-bg: #FFF4F2;
    --demo-offer-line: #F5CFC8;
    --demo-strike: #8A8F9C;

    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 48px;
    font-family: Poppins, sans-serif;
    color: var(--demo-ink);
}

.pricing-page [hidden] {
    display: none !important;
}

.pricing-page h1,
.pricing-page h2,
.pricing-page p {
    margin: 0;
}

.pricing-page strong {
    font-weight: 600;
}

/* ---------- Hero: intro and inclusions on the left, calculator on the right ---------- */
.pricing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    grid-template-areas: "intro calc" "included calc";
    grid-template-rows: auto 1fr;
    column-gap: 48px;
    row-gap: 32px;
    padding: 40px;
    background: linear-gradient(135deg, #fff 55%, var(--demo-offer-bg) 100%);
}

.pricing-hero__intro {
    grid-area: intro;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.pricing-hero__title {
    font-size: 40px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--demo-ink);
    text-wrap: balance;
}

.pricing-hero__sub {
    max-width: 60ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--demo-muted);
}

.pricing-hero__included {
    grid-area: included;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pricing-hero__included-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--demo-ink);
}

.pricing-hero__included ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pricing-hero__included li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--demo-muted);
}

.pricing-hero__included li .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--demo-bg);
    font-size: 15px;
    color: var(--demo-ink);
}

.pricing-hero__included strong {
    color: var(--demo-ink);
}

/* ---------- Calculator ---------- */
.pricing-calc {
    grid-area: calc;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border-radius: 12px;
    background: var(--demo-bg);
}

.pricing-calc__label {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--demo-ink);
}

.pricing-calc__usage {
    margin-top: -6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--demo-muted);
}

.pricing-calc__readout {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pricing-calc__visits {
    font-size: 16px;
    color: var(--demo-ink);
}

.pricing-calc__visits strong {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.pricing-calc__actions {
    font-size: 13px;
    color: var(--demo-muted);
}

.pricing-calc__range {
    width: 100%;
    height: 24px;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.pricing-calc__range:focus {
    outline: none;
}

.pricing-calc__range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: #D6D9E0;
}

.pricing-calc__range::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: #D6D9E0;
}

.pricing-calc__range::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--demo-red);
}

.pricing-calc__range::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -9px;
    border-radius: 50%;
    border: 3px solid var(--demo-red);
    background: #fff;
    box-shadow: 0 2px 8px rgba(31, 34, 51, .18);
    -webkit-appearance: none;
    appearance: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.pricing-calc__range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid var(--demo-red);
    background: #fff;
    box-shadow: 0 2px 8px rgba(31, 34, 51, .18);
    transition: transform .15s ease, box-shadow .15s ease;
}

.pricing-calc__range:hover::-webkit-slider-thumb,
.pricing-calc__range:focus-visible::-webkit-slider-thumb {
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(217, 67, 47, .14);
}

.pricing-calc__range:hover::-moz-range-thumb,
.pricing-calc__range:focus-visible::-moz-range-thumb {
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(217, 67, 47, .14);
}

.pricing-calc__scale {
    display: flex;
    justify-content: space-between;
    margin-top: -8px;
    font-size: 11px;
    color: var(--demo-muted);
    font-variant-numeric: tabular-nums;
}

.pricing-calc__fit,
.pricing-calc__none {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid var(--demo-line);
    background: #fff;
}

.pricing-calc__fit-label {
    font-size: 12px;
    color: var(--demo-muted);
}

.pricing-calc__fit-plan {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.pricing-calc__fit-plan > strong {
    font-size: 18px;
    font-weight: 700;
}

.pricing-calc__fit-price {
    font-size: 13px;
    color: var(--demo-muted);
}

.pricing-calc__fit-price > span {
    font-size: 20px;
    font-weight: 700;
    color: var(--demo-ink);
}

.pricing-calc__cta {
    width: 100%;
}

.pricing-calc__none span {
    font-size: 14px;
    line-height: 1.5;
    color: var(--demo-muted);
}

/* ---------- Plan cards: a lift on hover, a tinted shadow on the featured one ---------- */
.pricing-page .demo-plan {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.pricing-page .demo-plan:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(31, 34, 51, .08);
}

.pricing-page .demo-plan--featured {
    box-shadow: 0 12px 32px rgba(217, 67, 47, .12);
}

.pricing-page .demo-plan--featured:hover {
    box-shadow: 0 16px 36px rgba(217, 67, 47, .16);
}

.pricing-page .demo-btn {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}

.pricing-page .demo-btn:active {
    transform: translateY(1px);
}

/* ---------- Free demo strip (visitors only) ---------- */
.pricing-demo {
    display: flex;
    align-items: center;
    gap: 20px 28px;
    padding: 24px 32px;
    border-radius: 12px;
    background: var(--demo-green-bg);
    border: 1px solid var(--demo-green-line);
}

.pricing-demo__icon {
    font-size: 28px;
    color: var(--demo-green);
}

.pricing-demo__text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pricing-demo__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.pricing-demo__sub {
    max-width: 72ch;
    font-size: 14px;
    line-height: 1.5;
    color: var(--demo-green-text);
}

/* The button is a span opening the signup modal, not a link */
.pricing-demo__cta {
    flex-shrink: 0;
    cursor: pointer;
}

/* ---------- Subscription page ---------- */
/* Inside a portlet, its body already provides the spacing */
.m-portlet__body > .pricing-page {
    padding-bottom: 0;
}

/* The portlet sits next to the sidebar, so the four columns only fit on wide screens */
@media (min-width: 768px) and (max-width: 1599px) {
    .m-portlet__body .pricing-page .demo-plans__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .m-portlet__body .pricing-page .demo-premium__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .pricing-page .demo-plan,
    .pricing-page .demo-btn,
    .pricing-calc__range::-webkit-slider-thumb,
    .pricing-calc__range::-moz-range-thumb {
        transition: none;
    }

    .pricing-page .demo-plan:hover {
        transform: none;
    }
}

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
    .pricing-hero {
        grid-template-columns: minmax(0, 1fr) 380px;
        column-gap: 28px;
        padding: 32px;
    }

    .pricing-hero__title {
        font-size: 32px;
    }

    .pricing-hero__included ul {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
    .pricing-page {
        gap: 16px;
    }

    /* The calculator comes right after the title, the inclusions are read after it */
    .pricing-hero {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "intro" "calc" "included";
        grid-template-rows: auto;
        row-gap: 20px;
        padding: 20px;
    }

    .pricing-hero__intro {
        gap: 10px;
    }

    .pricing-hero__title {
        font-size: 26px;
        line-height: 1.2;
    }

    .pricing-hero__sub {
        font-size: 14px;
    }

    .pricing-hero__included {
        gap: 10px;
    }

    .pricing-hero__included li {
        font-size: 13px;
    }

    .pricing-calc {
        padding: 18px;
        gap: 12px;
    }

    .pricing-calc__visits strong {
        font-size: 30px;
    }

    .pricing-demo {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 18px;
    }

    .pricing-demo__icon {
        display: none;
    }

    .pricing-demo__title {
        font-size: 18px;
    }
}