<main data-testid="page.page_detail.layout" class="css-1f7uoeb eyxgv8w0">
    <style>
        .modal {
            z-index: 99999999!important;
        }
    </style>

    <div data-testid="announcement-bar" class="css-0"></div>

    <style data-emotion="css nktpa7">.css-nktpa7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}</style>

    <div class="css-nktpa7">

        <style data-emotion="css chrfh2">.css-chrfh2{-webkit-order:2;-ms-flex-order:2;order:2;}@media screen and (min-width: 1024px){.css-chrfh2{-webkit-order:1;-ms-flex-order:1;order:1;}}</style>

        <div class="css-chrfh2">
            <style data-emotion="css 1npb55v">.css-1npb55v{background-color:#ffffff;padding:1.6rem 0;}@media screen and (min-width: 640px){.css-1npb55v{padding:2.4rem 0;}}</style>
            <div id="detail-hero" class="css-1npb55v">
                <style data-emotion="css 1hnadhc">.css-1hnadhc{position:relative;margin:auto;max-width:100vw;padding:0 1.6rem;}@media screen and (min-width: 640px){.css-1hnadhc{padding:0 2.4rem;}}@media screen and (min-width: 768px){.css-1hnadhc{padding:0 3.2rem;}}@media screen and (min-width: 1280px){.css-1hnadhc{max-width:128rem;}}</style>
                <div class="css-1hnadhc">
                    <style data-emotion="css 1i5qgxp">.css-1i5qgxp{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:1.2rem;}@media screen and (min-width: 1024px){.css-1i5qgxp{gap:1.6rem;}}</style>
                    <div class="css-1i5qgxp">
                        <style data-emotion="css h38yef">.css-h38yef{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}</style>
                        <div class="css-h38yef">
                            <style data-emotion="css mn6ml3">.css-mn6ml3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.8rem;}</style>
                            <div class="css-mn6ml3">
                                <style data-emotion="css pr2vid">.css-pr2vid{font-family:EuclidCircularB,sans-serif;font-weight:800;color:#1F2B59;font-style:normal;margin:var(--chakra-space-0);font-size:var(--chakra-fontSizes-3xl);line-height:1.33;}@media screen and (min-width: 640px){.css-pr2vid{font-size:var(--chakra-fontSizes-4xl);line-height:1.2;}}@media screen and (min-width: 0em) and (max-width: 639.98px){.css-pr2vid{font-size:var(--chakra-fontSizes-500);line-height:3rem;font-weight:700;letter-spacing:-0.05rem;}}@media screen and (min-width: 640px) and (max-width: 767.98px){.css-pr2vid{font-size:var(--chakra-fontSizes-700);line-height:3.6rem;font-weight:700;letter-spacing:-0.05rem;}}@media screen and (min-width: 768px){.css-pr2vid{font-size:var(--chakra-fontSizes-900);line-height:4.8rem;font-weight:700;letter-spacing:-0.05rem;}}</style>
                                <h1 class="chakra-heading css-pr2vid" role="heading">{{ $car->name }}</h1>
                            </div>
                        </div>
                        <style data-emotion="css 19p3p71">.css-19p3p71{display:grid;max-width:40rem;gap:8px 0px;grid-template-columns:repeat(3, 1fr);}@media screen and (min-width: 1024px){.css-19p3p71{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-width:none;gap:16px;grid-template-columns:unset;}}</style>
                        <div class="css-19p3p71">
                            <style data-emotion="css 15rm72b">.css-15rm72b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:0 0.4rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.6rem;}@media screen and (min-width: 1024px){.css-15rm72b{-webkit-order:-1;-ms-flex-order:-1;order:-1;}}</style>
                            <div data-testid="desc-power" class="css-15rm72b">
                                <style data-emotion="css j53bpa">.css-j53bpa{font-family:EuclidCircularB,sans-serif;font-style:normal;font-size:var(--chakra-fontSizes-100);line-height:2rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--chakra-line-clamp);--chakra-line-clamp:1;font-weight:var(--chakra-fontWeights-semibold);color:#31406F;}</style>
                                <p class="chakra-text css-j53bpa">
                                    <style data-emotion="css orrtjp">.css-orrtjp{display:block;}@media screen and (min-width: 768px){.css-orrtjp{display:none;}}</style>
                                    <span class="css-orrtjp">
                                        <i class="fa-solid fa-bolt"></i>
                                        {{ hpTokW($car->car_detail->power) }} kW
                                    </span>
                                    <style data-emotion="css 16lafvh">.css-16lafvh{display:none;}@media screen and (min-width: 768px){.css-16lafvh{display:block;}}</style>
                                    <span data-testid="desc-power-value" class="css-16lafvh">
                                        <i class="fa-solid fa-bolt"></i>
                                        {{ hpTokW($car->car_detail->power) }} kW (300 hp)
                                    </span>
                                </p>
                            </div>
                            <style data-emotion="css 1qopl4t">.css-1qopl4t{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:0 0.4rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.6rem;}@media screen and (min-width: 1024px){.css-1qopl4t{-webkit-order:-2;-ms-flex-order:-2;order:-2;}}</style>
                            <div data-testid="desc-registration-date" class="css-1qopl4t">
                                <p class="chakra-text css-j53bpa">
                                    <i class="fa-solid fa-clock"></i>
                                    {{ date('m/Y', strtotime($car->car_detail->first_registration)) }}
                                </p>
                            </div>
                            <style data-emotion="css 609l9">.css-609l9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:0 0.4rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.6rem;}@media screen and (min-width: 1024px){.css-609l9{-webkit-order:-3;-ms-flex-order:-3;order:-3;}}</style>
                            <div data-testid="desc-mileage" class="css-609l9">
                                <p class="chakra-text css-j53bpa">
                                    <i class="fa-solid fa-gauge"></i>
                                    {{ $car->car_detail->mileage }} km
                                </p>
                            </div>
                            <style data-emotion="css 1wcsshc">.css-1wcsshc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:0 0.4rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.6rem;}</style>
                            <div class="css-1wcsshc">
                                <p class="chakra-text css-j53bpa">
                                    <i class="fa-solid fa-gear"></i>
                                    {{ $car->car_detail->transmission }}
                                </p>
                            </div>
                            <div data-testid="desc-fuel-type" class="css-1wcsshc">
                                <p class="chakra-text css-j53bpa">
                                    <i class="fa-solid fa-gas-pump"></i>
                                    {{ $car->car_detail->fuel }}
                                </p>
                            </div>
                        </div>
                        <style data-emotion="css 5raa2c">.css-5raa2c{position:relative;max-height:5.6rem;}@media screen and (min-width: 768px){.css-5raa2c{max-height:2.4rem;}}</style>
                        <div role="group" class="css-5raa2c">
                            <style data-emotion="css yqq08">.css-yqq08{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:0.8rem;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;max-height:5.6rem;overflow:hidden;}@media screen and (min-width: 768px){.css-yqq08{max-height:2.4rem;}}</style>
                            <div class="css-yqq08">
                                <style data-emotion="css ndrxqg">.css-ndrxqg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--chakra-colors-blue-100);border-radius:var(--chakra-radii-base);-webkit-padding-start:0.4rem;padding-inline-start:0.4rem;-webkit-padding-end:0.4rem;padding-inline-end:0.4rem;max-width:100%;color:var(--chakra-colors-blue-700);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-transition:0.2s ease;transition:0.2s ease;height:2.4rem;cursor:initial;}.css-ndrxqg>svg{width:1.6rem;height:1.6rem;padding:0.2rem;}</style>
                                <style data-emotion="css 1jqfiqr">.css-1jqfiqr{font-family:EuclidCircularB,sans-serif;font-style:normal;font-weight:600;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-padding-start:0.4rem;padding-inline-start:0.4rem;-webkit-padding-end:0.4rem;padding-inline-end:0.4rem;line-height:1.6rem;font-size:var(--chakra-fontSizes-75);}</style>

                                @foreach (json_decode($car->features) as $index => $feature)
                                    @if ($index > 7)
                                        @break
                                    @endif
                                    <div class="css-ndrxqg"><span class="chakra-text css-1jqfiqr">{{ $feature }}</span></div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <style data-emotion="css w74am0">.css-w74am0{-webkit-order:1;-ms-flex-order:1;order:1;}@media screen and (min-width: 1024px){.css-w74am0{-webkit-order:2;-ms-flex-order:2;order:2;}}</style>

        <div wire:ignore class="css-w74am0 bg-white">
            <div data-testid="image-gallery-strip" class="css-ep0cte bg-white">

                <style>
                    .image-gallery-content {
                        width: 70%;
                        margin: auto;
                    }

                    .splide__slide {
                        display: flex;
                        justify-content: center;
                    }

                    .splide__slide img {
                        width: 70%;
                        height: 100%;
                        object-fit: contain;
                    }

                    @media screen and (max-width: 768px) {
                        .image-gallery-content {
                            width: 100%;
                            height: 100%;
                        }
                        .splide__slide img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                </style>

                <div class="image-gallery-content css-gh02ti">

                    <section id="image-carousel" class="splide" aria-label="Beautiful Images">
                        <div class="splide__track">
                            <ul class="splide__list">
                                @foreach ($car->images as $index => $image)
                                    <li class="splide__slide">
                                        <img src="{{ asset($image) }}">
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </section>
                </div>

            </div>
        </div>

        <style data-emotion="css 1u62pb">.css-1u62pb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;-webkit-order:3;-ms-flex-order:3;order:3;}</style>
        <div class="css-1u62pb">
            <style data-emotion="css 35vcuf">.css-35vcuf{background:var(--chakra-colors-white);padding:0.8rem 0 3.2rem 0;}@media screen and (min-width: 1024px){.css-35vcuf{padding:3.2rem 0;}}@media screen and (min-width: 1280px){.css-35vcuf{padding:3.2rem 0 1.6rem 0;}}</style>
            <div class="css-35vcuf shadow-lg">
                <div class="css-1hnadhc">
                    <style data-emotion="css 18ry5n0">@media screen and (min-width: 1024px){.css-18ry5n0{padding-right:41.6rem;}}</style>
                    <div class="css-18ry5n0">
                        <style data-emotion="css 1x6n1o3">.css-1x6n1o3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--chakra-space-0);padding:3.2rem 2rem 2rem 2rem;border-radius:0.8rem;border:1px solid rgba(179, 184, 251, 0.50);background:linear-gradient(180deg, #D8DBFD 0%, #EBEDFE 100%);position:relative;overflow:hidden;-webkit-transition:.25s;transition:.25s;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;width:100%;}@media screen and (min-width: 640px){.css-1x6n1o3{gap:0.8rem;}}@media screen and (min-width: 1024px){.css-1x6n1o3{padding:3.2rem 3.2rem 2.4rem 3.2rem;}}</style>
                        <div role="group" class="css-1x6n1o3">
                            <style data-emotion="css m052dh">.css-m052dh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:2rem;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;z-index:1;}@media screen and (min-width: 640px){.css-m052dh{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}@media screen and (min-width: 768px){.css-m052dh{gap:1.6rem;}}@media screen and (min-width: 1024px){.css-m052dh{gap:2rem;}}@media screen and (min-width: 1280px){.css-m052dh{gap:1.6rem;}}</style>
                            <div class="css-m052dh">
                                <style data-emotion="css cel5h7">.css-cel5h7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;gap:1.6rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media screen and (min-width: 1024px){.css-cel5h7{gap:1.2rem;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}}</style>
                                <div class="css-cel5h7">
                                    <style data-emotion="css 19p3mfp">.css-19p3mfp{width:3.2rem;height:3.2rem;display:inline-block;line-height:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:currentColor;vertical-align:middle;fill:var(--chakra-colors-transparent);stroke:var(--chakra-colors-transparent);}</style>
                                    <svg viewBox="0 0 24 24" focusable="false" class="chakra-icon css-19p3mfp">
                                        <path d="M22 3.42855L12 -2.47955e-05V24C15.0952 22.1714 22 17.6785 22 14.25V3.42855Z" fill="#FF7300"></path>
                                        <path d="M2 3.42855L12 -2.47955e-05V24C8.90476 22.1714 2 17.6785 2 14.25V3.42855Z" fill="#FF9800"></path>
                                        <path d="M8 11.5L10.6667 14L16 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                    <style data-emotion="css 18ayb1x">.css-18ayb1x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.8rem;}</style>
                                    <div class="css-18ayb1x">
                                        <style data-emotion="css awjz6b">.css-awjz6b{font-family:EuclidCircularB,sans-serif;font-weight:700;font-style:normal;margin:var(--chakra-space-0);font-size:var(--chakra-fontSizes-300);line-height:2.2rem;letter-spacing:-0.05rem;color:#1F2B59;}</style>
                                        <h2 class="chakra-heading css-awjz6b" role="heading">14 days return policy</h2>
                                        <style data-emotion="css 1bu881z">.css-1bu881z{font-family:EuclidCircularB,sans-serif;font-style:normal;font-size:var(--chakra-fontSizes-100);line-height:2rem;color:#1F2B59;display:none;font-weight:500;}@media screen and (min-width: 1024px){.css-1bu881z{display:block;}}</style>
                                        <p class="chakra-text css-1bu881z">If you don&#x27;t fall in love with the car, simply return it to us.</p>
                                    </div>
                                </div>
                                <div class="css-cel5h7">
                                    <svg viewBox="0 0 24 24" focusable="false" class="chakra-icon css-19p3mfp">
                                        <path d="M22 3.42855L12 -2.47955e-05V24C15.0952 22.1714 22 17.6785 22 14.25V3.42855Z" fill="#FF7300"></path>
                                        <path d="M2 3.42855L12 -2.47955e-05V24C8.90476 22.1714 2 17.6785 2 14.25V3.42855Z" fill="#FF9800"></path>
                                        <path d="M8 11.5L10.6667 14L16 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                    <div class="css-18ayb1x">
                                        <h2 class="chakra-heading css-awjz6b" role="heading">Risk-free purchase</h2>
                                        <p class="chakra-text css-1bu881z">We are liable for the technical condition of each sold car.</p>
                                    </div>
                                </div>
                                <div class="css-cel5h7">
                                    <svg viewBox="0 0 24 24" focusable="false" class="chakra-icon css-19p3mfp">
                                        <path d="M22 3.42855L12 -2.47955e-05V24C15.0952 22.1714 22 17.6785 22 14.25V3.42855Z" fill="#FF7300"></path>
                                        <path d="M2 3.42855L12 -2.47955e-05V24C8.90476 22.1714 2 17.6785 2 14.25V3.42855Z" fill="#FF9800"></path>
                                        <path d="M8 11.5L10.6667 14L16 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                    <div class="css-18ayb1x">
                                        <h2 class="chakra-heading css-awjz6b" role="heading">6 months warranty</h2>
                                        <p class="chakra-text css-1bu881z">In addition, with every car you receive an extended warranty.</p>
                                    </div>
                                </div>
                            </div>

                            <style data-emotion="css 5arjk8">.css-5arjk8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;top:var(--chakra-space-0);left:var(--chakra-space-0);width:100%;height:100%;overflow:hidden;border-radius:1.2rem;}</style>
                            <div class="css-5arjk8">
                                <style data-emotion="css 1kvm4d8">.css-1kvm4d8{position:absolute;-webkit-clip-path:polygon(8.48% 100%, 0% 91%, 85.64% 0.05%, 100% 0.05%, 100% 100%, 8.48% 100%);clip-path:polygon(8.48% 100%, 0% 91%, 85.64% 0.05%, 100% 0.05%, 100% 100%, 8.48% 100%);bottom:var(--chakra-space-0);right:-3.2rem;width:228px;-webkit-transition:0.2s ease;transition:0.2s ease;background:linear-gradient(90deg, #B3B8FB 0%, transparent 100%);opacity:0.5;aspect-ratio:9/16;}[role=group]:hover .css-1kvm4d8,[role=group][data-hover] .css-1kvm4d8,[data-group]:hover .css-1kvm4d8,[data-group][data-hover] .css-1kvm4d8,.group:hover .css-1kvm4d8,.group[data-hover] .css-1kvm4d8{right:var(--chakra-space-0);}</style>
                                <div class="css-1kvm4d8"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <style data-emotion="css 2ooyvh">.css-2ooyvh{position:relative;margin:auto;max-width:100vw;padding:0 1.6rem;overflow-x:hidden;}@media screen and (min-width: 640px){.css-2ooyvh{padding:0 2.4rem;}}@media screen and (min-width: 768px){.css-2ooyvh{padding:0 3.2rem;}}@media screen and (min-width: 1280px){.css-2ooyvh{max-width:128rem;}}</style>
            <div class="css-2ooyvh">
                <div class="css-18ry5n0">
                    <style data-emotion="css 1fmhlb7">.css-1fmhlb7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:6rem;padding:4rem 0;}</style>
                    <div data-testid="feature.car_detail.car_description" class="css-1fmhlb7">
                        <style data-emotion="css 5lbiui">.css-5lbiui{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:1rem;scroll-margin-top:90px;}</style>
                        <div id="car-detail-nav-detail" class="css-5lbiui">
                            <style data-emotion="css 101bh7m">.css-101bh7m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}</style>
                            <div class="css-101bh7m">

                                <style data-emotion="css rtzal0">.css-rtzal0{font-family:EuclidCircularB,sans-serif;font-weight:800;color:#1F2B59;font-style:normal;margin:var(--chakra-space-0);font-size:var(--chakra-fontSizes-3xl);line-height:1.33;}@media screen and (min-width: 640px){.css-rtzal0{font-size:var(--chakra-fontSizes-4xl);line-height:1.2;}}@media screen and (min-width: 0em) and (max-width: 1199.98px){.css-rtzal0{font-size:var(--chakra-fontSizes-700);line-height:3.6rem;font-weight:700;letter-spacing:-0.05rem;}}@media screen and (min-width: 1200px){.css-rtzal0{font-size:var(--chakra-fontSizes-900);line-height:4.8rem;font-weight:700;letter-spacing:-0.05rem;}}</style>

                                <h2 class="chakra-heading css-rtzal0" role="heading">Details</h2>

                            </div>
                            <style data-emotion="css gsz9kq">.css-gsz9kq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:2.4rem;}</style>
                            <div class="css-gsz9kq">
                                <style data-emotion="css 12dtrl6">.css-12dtrl6{display:grid;grid-gap:2rem 1.6rem;grid-template-columns:repeat(2, minmax(0, 1fr));padding:1.2rem 0;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;max-width:83.6rem;}@media screen and (min-width: 768px){.css-12dtrl6{grid-template-columns:repeat(3, minmax(0, 1fr));}}</style>
                                <div class="css-12dtrl6">
                                    <style data-emotion="css 1qsf5ns">.css-1qsf5ns{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media screen and (min-width: 0em) and (max-width: 639.98px){.css-1qsf5ns{padding:0.4rem;gap:1.2rem;}}@media screen and (min-width: 640px){.css-1qsf5ns{padding:0.8rem;gap:1.6rem;}}</style>

                                    <style data-emotion="css j7qwjs">.css-j7qwjs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}</style>

                                    <style data-emotion="css y58brv">.css-y58brv{font-family:EuclidCircularB,sans-serif;color:#1F2B59;font-style:normal;font-weight:600;white-space:nowrap;}@media screen and (min-width: 0em) and (max-width: 639.98px){.css-y58brv{font-size:var(--chakra-fontSizes-200);}}@media screen and (min-width: 640px){.css-y58brv{font-size:var(--chakra-fontSizes-300);}}</style>

                                    <div class="css-1qsf5ns">
                                        <div class="css-j7qwjs">
                                            <style data-emotion="css 1hkfmll">.css-1hkfmll{font-family:EuclidCircularB,sans-serif;color:#1F2B59;font-style:normal;font-weight:700;font-size:var(--chakra-fontSizes-50);line-height:1.4rem;letter-spacing:0.05rem;text-transform:uppercase;}</style>
                                            <span class="chakra-text css-1hkfmll">
                                                Mileage<!-- -->
                                            </span>
                                            <p class="chakra-text css-y58brv">{{ $car->car_detail->mileage }} km</p>
                                        </div>
                                    </div>
                                    <div class="css-1qsf5ns">
                                        <div class="css-j7qwjs">
                                            <span class="chakra-text css-1hkfmll">
                                                First registration<!-- -->
                                            </span>
                                            <p class="chakra-text css-y58brv">{{ date('m/Y', strtotime($car->car_detail->first_registration)) }}</p>
                                        </div>
                                    </div>
                                    <div class="css-1qsf5ns">
                                        <div class="css-j7qwjs">
                                            <span class="chakra-text css-1hkfmll">
                                                Power<!-- -->
                                            </span>
                                            <p class="chakra-text css-y58brv">{{ $car->car_detail->power }} hp</p>
                                        </div>
                                    </div>
                                    <div class="css-1qsf5ns">
                                        <div class="css-j7qwjs">
                                            <span class="chakra-text css-1hkfmll">
                                                Transmission<!-- -->
                                            </span>
                                            <p class="chakra-text css-y58brv">{{ $car->car_detail->transmission }}</p>
                                        </div>
                                    </div>
                                    <div class="css-1qsf5ns">
                                        <div class="css-j7qwjs">
                                            <span class="chakra-text css-1hkfmll">
                                                Fuel<!-- -->
                                            </span>
                                            <p class="chakra-text css-y58brv">{{ $car->car_detail->fuel }}</p>
                                        </div>
                                    </div>
                                    <div class="css-1qsf5ns">
                                        <div class="css-j7qwjs">
                                            <span class="chakra-text css-1hkfmll">
                                                Drive type<!-- -->
                                            </span>
                                            <p class="chakra-text css-y58brv">{{ $car->car_detail->drive_type }}</p>
                                        </div>
                                    </div>
                                    <div class="css-1qsf5ns">
                                        <div class="css-j7qwjs">
                                            <span class="chakra-text css-1hkfmll">
                                                Consumption<!-- -->
                                            </span>
                                            <p class="chakra-text css-y58brv">{{ $car->car_detail->consumption }} l/100km</p>
                                        </div>
                                    </div>
                                    <div class="css-1qsf5ns">
                                        <div class="css-j7qwjs">
                                            <span class="chakra-text css-1hkfmll">
                                                CO2 emissions<!-- -->
                                            </span>
                                            <p class="chakra-text css-y58brv">{{ $car->car_detail->co2_emissions }} g/km</p>
                                        </div>
                                    </div>
                                    <div class="css-1qsf5ns">
                                        <div class="css-j7qwjs">
                                            <span class="chakra-text css-1hkfmll">
                                                Location<!-- -->
                                            </span>
                                            <p class="chakra-text css-y58brv">{{ $car->car_detail->location }}</p>
                                        </div>
                                    </div>
                                </div>
                                <style data-emotion="css 11v06f6">.css-11v06f6{position:relative;max-height:30rem;overflow:hidden;}@media screen and (min-width: 1280px){.css-11v06f6{max-height:999rem;}}</style>
                                <div class="css-11v06f6">
                                    <style data-emotion="css u2ah0d">.css-u2ah0d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.8rem;}@media screen and (min-width: 640px){.css-u2ah0d{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:2.4rem;}}</style>
                                    <div class="css-u2ah0d">
                                        <style data-emotion="css f1vm2z">.css-f1vm2z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:1.2rem;max-width:64rem;padding:2rem 0.8rem;}</style>
                                        <div class="css-f1vm2z">

                                            <style data-emotion="css 1q58qaq">.css-1q58qaq{font-family:EuclidCircularB,sans-serif;font-weight:700;color:#1F2B59;font-style:normal;margin:var(--chakra-space-0);font-size:var(--chakra-fontSizes-300);line-height:2.2rem;letter-spacing:-0.05rem;}</style>

                                            <h4 class="chakra-heading css-1q58qaq" role="heading">General</h4>

                                            <style data-emotion="css 1xuc798">.css-1xuc798{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:0.2rem;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;}</style>

                                            <div class="css-1xuc798">
                                                <style data-emotion="css u863oz">.css-u863oz{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));width:100%;}</style>

                                                <style data-emotion="css 118f25i">.css-118f25i{font-family:EuclidCircularB,sans-serif;font-style:normal;font-size:var(--chakra-fontSizes-100);line-height:2rem;font-weight:var(--chakra-fontWeights-medium);color:#31406F;}</style>

                                                <style data-emotion="css 4lpo8k">.css-4lpo8k{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:0.8rem;padding:0.4rem 0px;}</style>

                                                <style data-emotion="css y5aw9x">.css-y5aw9x{font-family:EuclidCircularB,sans-serif;font-style:normal;font-size:var(--chakra-fontSizes-100);line-height:2rem;font-weight:var(--chakra-fontWeights-semibold);color:var(--chakra-colors-gray-800);}</style>

                                                <style data-emotion="css 4g6ai3">.css-4g6ai3{cursor:pointer;}</style>

                                                <div class="css-u863oz">
                                                    <div class="css-70qvj9">
                                                        <p class="chakra-text css-118f25i">Vehicle ID</p>
                                                    </div>
                                                    <div class="css-4lpo8k">
                                                        <p class="chakra-text css-y5aw9x">
                                                            <span class="css-4g6ai3">{{ $car->car_general->vehicle_id }}</span>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="css-u863oz">
                                                    <div class="css-70qvj9">
                                                        <p class="chakra-text css-118f25i">Make</p>
                                                    </div>
                                                    <div class="css-4lpo8k">
                                                        <p class="chakra-text css-y5aw9x">
                                                            <span class="css-4g6ai3">{{ \App\Models\Make::find( $car->car_general->make_id)->value('name') }}</span>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="css-u863oz">
                                                    <div class="css-70qvj9">
                                                        <p class="chakra-text css-118f25i">Model</p>
                                                    </div>
                                                    <div class="css-4lpo8k">
                                                        <p class="chakra-text css-y5aw9x">
                                                            <span class="css-4g6ai3">{{ $car->car_general->model }}</span>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="css-u863oz">
                                                    <div class="css-70qvj9">
                                                        <p class="chakra-text css-118f25i">Body color</p>
                                                    </div>
                                                    <div class="css-4lpo8k">
                                                        <p class="chakra-text css-y5aw9x">
                                                            <span class="css-4g6ai3">{{ $car->car_general->body_color }}</span>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="css-u863oz">
                                                    <div class="css-70qvj9">
                                                        <p class="chakra-text css-118f25i">Type of finish</p>
                                                    </div>
                                                    <div class="css-4lpo8k">
                                                        <p class="chakra-text css-y5aw9x">
                                                            <span class="css-4g6ai3">{{ $car->car_general->type_of_finish }}</span>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="css-u863oz">
                                                    <div class="css-70qvj9">
                                                        <p class="chakra-text css-118f25i">Interior color</p>
                                                    </div>
                                                    <div class="css-4lpo8k">
                                                        <p class="chakra-text css-y5aw9x">
                                                            <span class="css-4g6ai3">{{ $car->car_general->interior_color }}</span>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="css-u863oz">
                                                    <div class="css-70qvj9">
                                                        <p class="chakra-text css-118f25i">Interior material</p>
                                                    </div>
                                                    <div class="css-4lpo8k">
                                                        <p class="chakra-text css-y5aw9x">{{ $car->car_general->interior_material }}</p>
                                                    </div>
                                                </div>
                                                <div class="css-u863oz">
                                                    <div class="css-70qvj9">
                                                        <p class="chakra-text css-118f25i">Body</p>
                                                    </div>
                                                    <div class="css-4lpo8k">
                                                        <p class="chakra-text css-y5aw9x">{{ $car->car_general->body }}</p>
                                                    </div>
                                                </div>
                                                <div class="css-u863oz">
                                                    <div class="css-70qvj9">
                                                        <p class="chakra-text css-118f25i">Doors</p>
                                                    </div>
                                                    <div class="css-4lpo8k">
                                                        <p class="chakra-text css-y5aw9x">{{ $car->car_general->doors }} doors</p>
                                                    </div>
                                                </div>
                                                <div class="css-u863oz">
                                                    <div class="css-70qvj9">
                                                        <p class="chakra-text css-118f25i">Seats</p>
                                                    </div>
                                                    <div class="css-4lpo8k">
                                                        <p class="chakra-text css-y5aw9x">{{ $car->car_general->seats }} seats</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="css-f1vm2z">

                                            <h4 class="chakra-heading css-1q58qaq" role="heading">Engine</h4>

                                            <div class="css-1xuc798">
                                                <div class="css-u863oz">
                                                    <div class="css-70qvj9">
                                                        <p class="chakra-text css-118f25i">Engine capacity</p>
                                                    </div>
                                                    <div class="css-4lpo8k">
                                                        <p class="chakra-text css-y5aw9x">{{ $car->car_engine->engine_capacity }} ccm</p>
                                                    </div>
                                                </div>
                                                <div class="css-u863oz">
                                                    <div class="css-70qvj9">
                                                        <p class="chakra-text css-118f25i">Consumption (comb.)</p>
                                                    </div>
                                                    <div class="css-4lpo8k">
                                                        <p class="chakra-text css-y5aw9x">{{ $car->car_engine->consumption }} l/100km</p>
                                                    </div>
                                                </div>
                                                <div class="css-u863oz">
                                                    <div class="css-70qvj9">
                                                        <p class="chakra-text css-118f25i">Speeds</p>
                                                    </div>
                                                    <div class="css-4lpo8k">
                                                        <p class="chakra-text css-y5aw9x">{{ $car->car_engine->speeds }}</p>
                                                    </div>
                                                </div>
                                                <div class="css-u863oz">
                                                    <div class="css-70qvj9">
                                                        <p class="chakra-text css-118f25i">CO2 emissions</p>
                                                    </div>
                                                    <div class="css-4lpo8k">
                                                        <p class="chakra-text css-y5aw9x">{{ $car->car_engine->co2_emissions }} g/km</p>
                                                    </div>
                                                </div>
                                                <div class="css-u863oz">
                                                    <div class="css-70qvj9">
                                                        <p class="chakra-text css-118f25i">Emission class</p>
                                                    </div>
                                                    <div class="css-4lpo8k">
                                                        <p class="chakra-text css-y5aw9x">{{ $car->car_engine->emission_class }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="car-detail-nav-features" class="css-5lbiui">
                            <div class="css-101bh7m">
                                <h2 class="chakra-heading css-rtzal0" role="heading">Features</h2>
                            </div>

                            <style data-emotion="css 1sbooph">.css-1sbooph{position:relative;max-height:45rem;overflow:hidden;}@media screen and (min-width: 1280px){.css-1sbooph{max-height:999rem;}}</style>
                            <div class="css-1sbooph">
                                <style data-emotion="css o58jes">.css-o58jes{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:4rem;}</style>
                                <div class="css-o58jes">
                                    <style data-emotion="css 1mgzxv6">.css-1mgzxv6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:1.2rem;}</style>
                                    <div class="css-1mgzxv6">

                                        <h4 class="chakra-heading css-1q58qaq" role="heading">Security and stabilization systems</h4>

                                        <style data-emotion="css 16lcb1c">.css-16lcb1c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.2rem;}</style>

                                        <div class="css-16lcb1c">

                                            <style data-emotion="css jamh67">.css-jamh67{font-family:EuclidCircularB,sans-serif;font-style:normal;font-size:var(--chakra-fontSizes-75);line-height:1.6rem;font-weight:600;padding:0.4rem 0.6rem;border-radius:0.4rem;background:#D8DBFD;color:#262A98;}</style>

                                            <style data-emotion="css 1i3z4m7">.css-1i3z4m7{font-family:EuclidCircularB,sans-serif;font-style:normal;font-size:var(--chakra-fontSizes-75);line-height:1.6rem;font-weight:500;padding:0.4rem 0.6rem;border-radius:0.4rem;background:var(--chakra-colors-transparent);color:#31406F;}</style>

                                            @foreach (json_decode($car->features) as $index => $feature)
                                                <div class="css-k008qs">
                                                    <p class="chakra-text {{ $index < 5 ? 'css-jamh67' : 'css-1i3z4m7' }}">{{ $feature }}</p>
                                                </div>
                                            @endforeach

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="car-detail-how-it-works" class="css-5lbiui">
                            <div class="css-101bh7m">
                                <h2 class="chakra-heading css-rtzal0" role="heading">How it works</h2>
                            </div>
                            <style data-emotion="css nkddou">.css-nkddou{width:100%;position:relative;}@media screen and (min-width: 1024px){.css-nkddou{-webkit-clip-path:inset(0 -3.2rem 0 -3.2rem);clip-path:inset(0 -3.2rem 0 -3.2rem);}}</style>
                            <div class="css-nkddou">
                                <style data-emotion="css 8w8lk5">.css-8w8lk5{position:absolute;top:var(--chakra-space-0);height:100%;width:9.6rem;z-index:2;left:-3.2rem;background-image:linear-gradient(to right, var(--chakra-colors-gray-100) 0%, var(--chakra-colors-transparent) 100%);display:none;}@media screen and (min-width: 1024px){.css-8w8lk5{display:none;}}</style>
                                <div class="css-8w8lk5"></div>
                                <style data-emotion="css 1y95xhs">.css-1y95xhs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:3.2rem;}</style>
                                <div id="how-it-works-swiper" class="css-1y95xhs">
                                    <style data-emotion="css j8umpo">.css-j8umpo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;position:relative;}.css-j8umpo .swiper{width:100%;height:auto!important;overflow:visible!important;}.css-j8umpo .swiper-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:unset;}.css-j8umpo .swiper-slide{width:-webkit-fit-content!important;width:-moz-fit-content!important;width:fit-content!important;height:unset!important;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style>
                                    <div class="css-j8umpo">
                                        <div class="swiper">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <style data-emotion="css 1hbane7">.css-1hbane7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:31.2rem;border-radius:var(--chakra-radii-lg);border:1px solid;border-color:var(--chakra-colors-gray-200);-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;box-shadow:var(--chakra-shadows-bottom-lg);background:var(--chakra-colors-white);overflow:hidden;}</style>
                                                    <div class="css-1hbane7">
                                                        <style data-emotion="css 7luvuw">.css-7luvuw{background:var(--chakra-colors-gray-100);}</style>
                                                        <div class="css-7luvuw">
                                                            <style data-emotion="css 17dz65a">.css-17dz65a{width:100%;height:12rem;object-fit:contain}</style>
                                                            <img alt="" src="{{ asset('assets/images/car_audit_1x.d23b2ce7.webp') }}" class="chakra-image css-17dz65a"/>
                                                        </div>
                                                        <style data-emotion="css 1a221pb">.css-1a221pb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:0.8rem;padding:2.4rem 2rem 2rem;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}</style>
                                                        <div class="css-1a221pb">
                                                            <h4 class="chakra-heading css-1q58qaq" role="heading">Check the car first, decide later</h4>
                                                            <style data-emotion="css ctyrdq">.css-ctyrdq{font-family:EuclidCircularB,sans-serif;color:#1F2B59;font-style:normal;font-weight:400;font-size:var(--chakra-fontSizes-100);line-height:2rem;}</style>
                                                            <p class="chakra-text css-ctyrdq"><strong style="font-weight:600">For each car, we first arrange an inspection, which results in a complete report on the technical condition of the car.</strong> Only then do you decide whether you want to buy the car.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <style data-emotion="css 1up5ngf">.css-1up5ngf{display:none;position:absolute;top:-17.4rem;left:var(--chakra-space-0);width:100%;height:100%;z-index:4;pointer-events:none;}@media screen and (min-width: 1024px){.css-1up5ngf{display:block;}}</style>
            <style data-emotion="css 160g03e">.css-160g03e{position:-webkit-sticky;position:sticky;padding-top:9.4rem;top:var(--chakra-space-0);}</style>
            <div class="css-1up5ngf" id="price-div">
                <div class="css-160g03e">
                    <div class="css-1hnadhc">
                        <style data-emotion="css 1tejc0">.css-1tejc0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}@media screen and (min-width: 1024px){.css-1tejc0{gap:3.2rem;}}</style>
                        <div class="css-1tejc0">
                            <style data-emotion="css 1w186fy">.css-1w186fy{-webkit-flex:1;-ms-flex:1;flex:1;overflow:auto;}@media screen and (min-width: 1024px){.css-1w186fy{overflow:unset;}}</style>
                            <div class="css-1w186fy"></div>
                            <style data-emotion="css 17ohq6a">.css-17ohq6a{pointer-events:initial;}@media screen and (min-width: 1024px){.css-17ohq6a{width:38.4rem;}}</style>
                            <div class="css-17ohq6a">
                                <style data-emotion="css 1cr35oi">.css-1cr35oi{width:100%;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-radius:var(--chakra-radii-lg);overflow:hidden;background:var(--chakra-colors-white);border:1px solid;border-color:var(--chakra-colors-gray-200);box-shadow:0px 10px 10px -5px rgba(72, 88, 133, 0.04),0px 20px 25px -5px rgba(72, 88, 133, 0.10);}</style>

                                <div data-testid="feature.page.detail.billingInfoSection" class="css-1cr35oi">
                                    <style data-emotion="css 1wjmqc7">.css-1wjmqc7{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:1.6rem;}@media screen and (min-width: 1024px){.css-1wjmqc7{padding:1.6rem 2.4rem;}}</style>
                                    <div class="css-1wjmqc7">
                                        <style data-emotion="css 1u5841b">.css-1u5841b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-bottom:1.6rem;-webkit-order:1;-ms-flex-order:1;order:1;}@media screen and (min-width: 1024px){.css-1u5841b{-webkit-order:1;-ms-flex-order:1;order:1;}}</style>
                                        <div class="css-1u5841b">
                                            <style data-emotion="css gg4vpm">.css-gg4vpm{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}</style>
                                            <dl data-testid="page.detail.primaryPrice" role="row" class="css-gg4vpm">
                                                <style data-emotion="css 105xw8a">.css-105xw8a{font-family:EuclidCircularB,sans-serif;color:#1F2B59;font-style:normal;font-size:var(--chakra-fontSizes-500);line-height:3.4rem;font-weight:700;}</style>
                                                <dt class="chakra-text css-105xw8a" role="cell">Car price</dt>
                                                <dd class="chakra-text css-105xw8a" role="cell">${{ number_format($price) }}</dd>
                                            </dl>
                                            <dl data-testid="page.detail.secondaryPrice" role="row" class="css-gg4vpm">
                                                <style data-emotion="css 1potdld">.css-1potdld{font-family:EuclidCircularB,sans-serif;color:#1F2B59;font-style:normal;font-weight:400;font-size:var(--chakra-fontSizes-200);line-height:2.4rem;}</style>
                                                <dt class="chakra-text css-1potdld" role="cell">Previously selling at</dt>
                                                <dd class="chakra-text css-1potdld" role="cell">${{ number_format($car->old_price) }}</dd>
                                            </dl>
                                        </div>
                                        <style data-emotion="css xi1zd7">.css-xi1zd7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-top:1.6rem;padding-bottom:var(--chakra-space-0);gap:1.2rem;-webkit-order:5;-ms-flex-order:5;order:5;}@media screen and (min-width: 768px){.css-xi1zd7{gap:1.6rem;}}@media screen and (min-width: 1024px){.css-xi1zd7{padding-top:var(--chakra-space-0);padding-bottom:1.6rem;-webkit-order:2;-ms-flex-order:2;order:2;}}</style>

                                        <style>
                                            .css-1k505f5,.css-1xl287t{border-radius:.4rem;font-weight:600;line-height:2.6rem;font-size:var(--chakra-fontSizes-300);display:inline-flex;cursor:pointer;white-space:nowrap;transition:.2s;height:5.6rem;min-width:5.6rem;width:100%;padding:0 2.4rem 0 2rem}.css-1k505f5{color:var(--chakra-colors-white);-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;background-image:linear-gradient(to right,var(--chakra-colors-blue-500),var(--chakra-colors-blue-700));box-shadow:var(--chakra-shadows-accent-bottom-md);background-position:center center;background-size:100%}.css-1o15eb1{display:inline-flex;align-self:center;flex-shrink:0;margin-inline-end:1rem}.css-1xl287t{color:var(--chakra-colors-blue-500);-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;background:var(--chakra-colors-white);box-shadow:#3e47dd 0 0 0 1px inset}
                                        </style>
                                        <div class="css-xi1zd7">
                                            <div class="css-zvujsg">
                                                <button type="button" class="chakra-button css-1k505f5" data-testid="feature.receipt.buy_button" role="button" data-toggle="modal" data-target="#exampleModalLong2">
                                                    <span class="chakra-button__icon css-1o15eb1">
                                                        <i class="fa-solid fa-cart-plus"></i>
                                                    </span>
                                                    Buy
                                                </button>
                                                <button type="button" class="chakra-button css-1xl287t mt-4" data-testid="feature.receipt.financing_button" role="button" data-toggle="modal" data-target="#exampleModalLong">
                                                    <span class="chakra-button__icon css-1o15eb1">
                                                        <i class="fa-solid fa-calculator"></i>
                                                    </span>
                                                    Financing ${{ number_format($price / 24) }}/mo
                                                </button>
                                            </div>
                                        </div>

                                        <style data-emotion="css i240ay">.css-i240ay{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:0.4rem 0 0.8rem 0;-webkit-order:2;-ms-flex-order:2;order:2;}@media screen and (min-width: 1024px){.css-i240ay{-webkit-order:3;-ms-flex-order:3;order:3;}}</style>

                                        <div class="css-i240ay">
                                            <style data-emotion="css js8c64">.css-js8c64{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;padding:0.4rem 0.6rem;margin:0 -0.6rem;cursor:pointer;}.css-js8c64:hover,.css-js8c64[data-hover]{background:var(--chakra-colors-gray-50);}</style>

                                            <dl role="row" class="css-js8c64">
                                                <style data-emotion="css 168uo7k">.css-168uo7k{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:0.2rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style>
                                                <div class="css-168uo7k">
                                                    <style data-emotion="css 1thl9l0">.css-1thl9l0{font-family:EuclidCircularB,sans-serif;color:#1F2B59;font-style:normal;font-size:var(--chakra-fontSizes-100);line-height:2rem;font-weight:700;}</style>
                                                    <dt class="chakra-text css-1thl9l0" role="cell">Services total</dt>
                                                    <i class="fa-solid fa-chevron-up"></i>
                                                </div>
                                                <style data-emotion="css kagm7w">.css-kagm7w{font-family:EuclidCircularB,sans-serif;color:#1F2B59;font-style:normal;line-height:3rem;font-size:var(--chakra-fontSizes-100);font-weight:700;}</style>
                                                <dd class="chakra-text css-kagm7w" role="cell">${{ number_format($car->audit_price) }}</dd>
                                            </dl>

                                            <style data-emotion="css jmk2mj">.css-jmk2mj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.4rem;}</style>
                                            <div class="css-jmk2mj">
                                                <style data-emotion="css 1drrgd8">.css-1drrgd8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.4rem;}</style>
                                                <dl role="row" class="css-1drrgd8">
                                                    <style data-emotion="css bscg4h">.css-bscg4h{font-family:EuclidCircularB,sans-serif;color:#1F2B59;font-style:normal;font-weight:400;font-size:var(--chakra-fontSizes-100);line-height:2rem;max-width:17rem;}@media screen and (min-width: 640px){.css-bscg4h{max-width:24rem;}}</style>
                                                    <dt class="chakra-text css-bscg4h" title="CarAudit™" role="cell">
                                                        CarAudit™
                                                    </dt>
                                                    <style data-emotion="css 1uyksmk">.css-1uyksmk{font-family:EuclidCircularB,sans-serif;color:#1F2B59;font-style:normal;font-size:var(--chakra-fontSizes-100);line-height:2rem;font-weight:500;}</style>
                                                    <dd class="chakra-text css-1uyksmk" role="cell">${{ number_format($car->audit_price) }}</dd>
                                                </dl>

                                                <style data-emotion="css 19bqs2e">.css-19bqs2e{text-transform:capitalize;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:var(--chakra-radii-base);max-width:-webkit-max-content;white-space:nowrap;color:var(--chakra-colors-white);font-weight:600;letter-spacing:0.05rem;padding:0.4rem 0.6rem;font-size:var(--chakra-fontSizes-75);line-height:1.6rem;background-color:var(--chakra-colors-green-600);}</style>

                                                <dl role="row" class="css-1drrgd8">
                                                    <dt class="chakra-text css-bscg4h" role="cell">
                                                        Extended warranty<!-- --> <!-- -->
                                                    </dt>
                                                    <dd class="chakra-text css-1uyksmk" role="cell">
                                                        <div class="css-19bqs2e">Free</div>
                                                    </dd>
                                                </dl>
                                            </div>
                                        </div>

                                        @if($hasPromo && !$hasAppliedPromo)
                                            <form wire:submit.prevent="applyPromo">
                                                <div class="form-group d-flex">
                                                    <input type="text" wire:model.lazy="promoCode" class="form-control form-control-lg border-0 outline-none" placeholder="Enter promo code">
                                                    <button class="btn btn-warning fw-bold">Apply</button>
                                                </div>
                                            </form>
                                        @endif

                                        <style data-emotion="css 6879pu">.css-6879pu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:0.1rem;padding:1rem 0;-webkit-order:3;-ms-flex-order:3;order:3;}@media screen and (min-width: 1024px){.css-6879pu{-webkit-order:4;-ms-flex-order:4;order:4;}}</style>
                                        <div class="css-6879pu">
                                            <style data-emotion="css 1xcoij5">.css-1xcoij5{background:#D7E1EF;width:100%;height:0.1rem;-webkit-flex:1;-ms-flex:1;flex:1;}</style>
                                            <div class="css-1xcoij5"></div>
                                            <div class="css-1xcoij5"></div>
                                        </div>

                                        @if(session()->has('promo-error'))
                                            <small class="text-danger px-2">{{ session('promo-error') }}</small>
                                        @endif

                                        @if(session()->has('promo-success'))
                                            <small class="text-success px-2">{{ session('promo-success') }}</small>
                                        @endif

                                        <style data-emotion="css 1oghz7l">.css-1oghz7l{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:0.4rem 0 0.6rem 0;-webkit-order:4;-ms-flex-order:4;order:4;}@media screen and (min-width: 1024px){.css-1oghz7l{-webkit-order:5;-ms-flex-order:5;order:5;}}</style>
                                        <div class="css-1oghz7l">
                                            <dl role="row" class="css-gg4vpm">
                                                <style data-emotion="css lba4a4">.css-lba4a4{font-family:EuclidCircularB,sans-serif;color:#1F2B59;font-style:normal;font-size:var(--chakra-fontSizes-400);line-height:3rem;font-weight:700;}</style>
                                                <dt class="chakra-text css-lba4a4" role="cell">Total price</dt>
                                                <dd class="chakra-text css-lba4a4" role="cell">${{ number_format($price) }}</dd>
                                            </dl>
                                            <dl role="row" class="css-gg4vpm">
                                                <dt class="chakra-text css-ctyrdq" role="cell">Total price excluding VAT</dt>
                                                <dd class="chakra-text css-1uyksmk" role="cell">${{ number_format($price) }}</dd>
                                            </dl>
                                        </div>
                                        <style>
                                            @media screen and (min-width: 1024px){.closeTm{display:none;}}
                                        </style>
                                        <div class="closeTm">
                                            <button class="btn btn-danger btn-block" style="font-size: 16px" id="close-price">Hide Modal</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal -->
            <link rel="stylesheet" href="{{ asset('assets/css/payment-modal.css') }}">

            <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" >
                <div class="modal-dialog" role="document">
                    <div class="modal-content" style="border-radius: 2rem">
                        <div class="modal-body">
                            <form wire:submit.prevent="finance">
                                <div class="css-ujjr14 bg-white">
                                    <div role="dialog" class="css-1nw4mfe">
                                        <div class="css-7r74hk">
                                            <button type="button" class="chakra-button css-k4t1hf close" aria-label="Step back" data-testid="feature.modal.back_button" data-dismiss="modal">
                                                <svg viewBox="0 0 16 16" focusable="false" class="chakra-icon css-g7y5ub" aria-hidden="true">
                                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.70711 2.2929C6.31659 1.90237 5.68342 1.90237 5.2929 2.29289L0.292896 7.29287C0.105359 7.4804 1.45502e-06 7.73476 5.24534e-07 7.99997C5.4772e-07 8.26519 0.105356 8.51954 0.292892 8.70708L5.29289 13.7071C5.68341 14.0976 6.31658 14.0976 6.7071 13.7071C7.09763 13.3166 7.09763 12.6834 6.70711 12.2929L3.41421 8.99998L15 8.99998C15.5523 8.99998 16 8.55226 16 7.99998C16 7.44769 15.5523 6.99998 15 6.99998L3.41422 6.99998L6.7071 3.70711C7.09763 3.31659 7.09763 2.68342 6.70711 2.2929Z" fill="currentColor"></path>
                                                </svg>
                                            </button>
                                            <h3 class="chakra-heading css-1a3ob45" role="heading">Financing</h3>
                                        </div>
                                        <div class="css-1rcner2">
                                            <div class="css-1jmaa3">
                                                <div class="css-qvw3sj">
                                                    <div class="css-i7jdrw">
                                                        <div class="css-cv8rvs">
                                                            <div role="radiogroup" aria-labelledby="financing-type" class="css-omhou1">
                                                                <fieldset aria-checked="true" role="radio" class="css-l8wdn">
                                                                    <p class="chakra-text css-1ltvw3b mt-2">Low Installment</p>
                                                                    <div class="css-du0yet">New</div>
                                                                </fieldset>
                                                            </div>
                                                            <div class="css-hboir5">
                                                                <small>Pay for your vehicle in easy installments! Choose a payment plan and spread the cost over several months, making it more manageable and budget-friendly</small>
                                                            </div>
                                                        </div>
                                                        <div class="css-1eecgpw">
                                                            <div class="css-1ofqig9">
                                                                <div class="css-593min">
                                                                    <div class="css-1fag19g">
                                                                        <small class="w-bold">Payback period</small>
                                                                    </div>
                                                                </div>
                                                                <div class="css-fwjkw2">
                                                                    <select wire:model.lazy="timeFrame" class="form-select form-control form-control-lg">
                                                                        <option value="1">1 month</option>
                                                                        <option value="3">3 months</option>
                                                                        <option value="6">6 months</option>
                                                                        <option value="12">12 months</option>
                                                                        <option value="24">24 months</option>
                                                                    </select>
                                                                </div>
                                                            </div>

                                                            <div class="css-1ofqig9">
                                                                <div class="css-exvop4">
                                                                    <div class="css-1fag19g">
                                                                        <p class="chakra-text css-2d055x">
                                                                            <small class="w-bold">Down payment(amount)</small>
                                                                        </p>
                                                                    </div>
                                                                </div>

                                                                <div class="css-j7qwjs">
                                                                    <input type="number" class="form-control form-control-lg" placeholder="500" wire:model.lazy="downPaymentAmount" min="500">
                                                                    <small class="text-danger">
                                                                        @error('downPaymentAmount')
                                                                            {{ $message }}
                                                                        @enderror
                                                                    </small>
                                                                </div>
                                                            </div>

                                                            <div class="css-1ofqig9 mt-2">
                                                                <div class="css-exvop4 mt-2">
                                                                    <div class="css-1fag19g">
                                                                        <p class="chakra-text css-2d055x">
                                                                            <small class="w-bold">Monthly payment(amount)</small>
                                                                        </p>
                                                                    </div>
                                                                </div>

                                                                <div class="css-j7qwjs">
                                                                    <input type="number" class="form-control form-control-lg" placeholder="500" wire:model.lazy="monthlyPaymentAmount" min="200" value="{{ $monthlyPaymentAmount }}" disabled>
                                                                    <small class="text-danger">
                                                                        @error('monthlyPaymentAmount')
                                                                            {{ $message }}
                                                                        @enderror
                                                                    </small>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <button class="btn btn-primary fw-bold p-3 mt-0" data-testid="feature.receipt.financing_next_button" role="button">
                                                            Start Financing
                                                        </button>
                                                    </div>

                                                    <div class="css-tiyt5v px-3">
                                                        <div class="css-qtnf3s mb-2">
                                                            <p class="css-er1uci epmtl4v0">Need some advice?</p>
                                                            <button class="btn btn-white btn-lg text-primary fw-bold border border-2 border-primary">Chat Support  &nbsp;<i class="fa-solid fa-message"></i></button>
                                                        </div>
                                                        <div class="p-1 shadow-sm">
                                                            <small class="chakra-text css-cs1cpz text-danger">
                                                                You can request for a refund if you choose to discontinue with your purchase.
                                                            </small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal end -->

            <!-- Modal for purchase -->
            <div class="modal fade" id="exampleModalLong2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" >
                <div class="modal-dialog" role="document">
                    <div class="modal-content" style="border-radius: 2rem">
                        <div class="modal-body">
                            <div class="css-ujjr14 bg-white">
                                <div role="dialog" class="css-1nw4mfe">
                                    <div class="css-7r74hk">
                                        <button type="button" class="chakra-button css-k4t1hf close" aria-label="Step back" data-testid="feature.modal.back_button" data-dismiss="modal">
                                            <svg viewBox="0 0 16 16" focusable="false" class="chakra-icon css-g7y5ub" aria-hidden="true">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.70711 2.2929C6.31659 1.90237 5.68342 1.90237 5.2929 2.29289L0.292896 7.29287C0.105359 7.4804 1.45502e-06 7.73476 5.24534e-07 7.99997C5.4772e-07 8.26519 0.105356 8.51954 0.292892 8.70708L5.29289 13.7071C5.68341 14.0976 6.31658 14.0976 6.7071 13.7071C7.09763 13.3166 7.09763 12.6834 6.70711 12.2929L3.41421 8.99998L15 8.99998C15.5523 8.99998 16 8.55226 16 7.99998C16 7.44769 15.5523 6.99998 15 6.99998L3.41422 6.99998L6.7071 3.70711C7.09763 3.31659 7.09763 2.68342 6.70711 2.2929Z" fill="currentColor"></path>
                                            </svg>
                                        </button>
                                        <h3 class="chakra-heading css-1a3ob45" role="heading">Purchase</h3>
                                    </div>
                                    <div class="css-1rcner2">
                                        <div class="css-1jmaa3">
                                            <div class="css-qvw3sj">
                                                <div class="css-i7jdrw">
                                                    <div class="css-cv8rvs">
                                                        <div role="radiogroup" aria-labelledby="financing-type" class="css-omhou1">
                                                            <fieldset aria-checked="true" role="radio" class="css-l8wdn">
                                                                <p class="chakra-text css-1ltvw3b mt-2">Instant Purchase</p>
                                                            </fieldset>
                                                        </div>
                                                        <div class="css-hboir5">
                                                            <small>After making this payment, head over to your profile section and fill in your shipping address where we will send the car to. Cars are delivered within 14 days.</small>
                                                        </div>
                                                    </div>

                                                    <div class="col-12 d-block justify-content-center">
                                                        <div class="nk-pps-title">
                                                            <h4 class="title fw-bold">Make Your Payment</h4>
                                                            <small class="caption">
                                                                Your payment process has just began. To complete, kindly click on the button below and then send the exact amount of <strong class="text-success">{{ number_format($price) }} USDT</strong>(trc20) to the address shown to you.
                                                            </small>
                                                        </div>
                                                    </div>

                                                    <button wire:click="purchase" class="btn btn-block btn-primary popup-open p-3 fw-bold">Proceed to Buy</button>
                                                </div>

                                                <div class="css-tiyt5v px-3">
                                                    <div class="css-qtnf3s mb-2">
                                                        <p class="css-er1uci epmtl4v0">Need some advice?</p>
                                                        <button class="btn btn-white btn-lg text-primary fw-bold border border-2 border-primary">Chat Support  &nbsp;<i class="fa-solid fa-message"></i></button>
                                                    </div>
                                                    <div class="p-1 shadow-sm">
                                                        <small class="chakra-text css-cs1cpz text-danger">
                                                            You can request for a refund if you choose to discontinue with your purchase.
                                                        </small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal for purchase end -->
        </div>

        <style data-emotion="css 1ob6cdk">.css-1ob6cdk{position:fixed;width:100%;bottom:var(--chakra-space-0);left:var(--chakra-space-0);z-index:5;}@media screen and (min-width: 1024px){.css-1ob6cdk{display:none;}}</style>
        <div class="css-1ob6cdk" id="bottom-bar-div">
            <style data-emotion="css 1b05fg9">.css-1b05fg9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;padding:1.6rem;background:var(--chakra-colors-white);box-shadow:0px -10px 10px -5px rgba(72, 88, 133, 0.04),0px -20px 25px -5px rgba(72, 88, 133, 0.10);-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.8rem 0.8rem 0 0;border-top:1px solid gray.200;border-right:1px solid gray.200;border-left:1px solid gray.200;}</style>
            <div class="css-1b05fg9">

                <div class="css-jmk2mj">
                    <div class="css-5148o1">
                        <style data-emotion="css 17e4t8h">.css-17e4t8h{font-family:EuclidCircularB,sans-serif;color:#1F2B59;font-style:normal;font-size:var(--chakra-fontSizes-300);line-height:2.6rem;font-weight:700;}</style>
                        <p class="chakra-text css-17e4t8h">${{ number_format($price) }}</p>
                    </div>
                    <style data-emotion="css admsro">.css-admsro{font-family:EuclidCircularB,sans-serif;font-style:normal;font-size:var(--chakra-fontSizes-75);line-height:1.6rem;font-weight:700;-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;color:var(--chakra-colors-blue-600);}</style>
                    <p class="chakra-text css-admsro">
                        ${{ number_format($price / 24) }}/month
                    </p>
                </div>

                <style data-emotion="css 1c5yb82">.css-1c5yb82{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:1.2rem;}</style>
                <div class="css-1c5yb82">
                    <style data-emotion="css 12tqahe">.css-12tqahe{border-radius:0.4rem;font-weight:600;line-height:2.4rem;font-size:var(--chakra-fontSizes-100);color:var(--chakra-colors-white);display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;white-space:nowrap;-webkit-transition:0.2s ease;transition:0.2s ease;height:4.4rem;min-width:4.4rem;background-image:linear-gradient(to right, var(--chakra-colors-blue-500), var(--chakra-colors-blue-700));box-shadow:var(--chakra-shadows-accent-bottom-md);-webkit-background-position:center;background-position:center;-webkit-background-size:100%;background-size:100%;cursor:pointer;padding:0 1.6rem;}.css-12tqahe>svg{width:20px;height:20px;}.css-12tqahe:hover,.css-12tqahe[data-hover]{box-shadow:var(--chakra-shadows-accent-bottom-lg);-webkit-background-position:left;background-position:left;-webkit-background-size:400%;background-size:400%;}.css-12tqahe:active,.css-12tqahe[data-active]{box-shadow:var(--chakra-shadows-accent-bottom-sm);-webkit-background-position:right;background-position:right;-webkit-background-size:400%;background-size:400%;-webkit-transition:none;transition:none;}.css-12tqahe:disabled,.css-12tqahe[disabled],.css-12tqahe[aria-disabled=true],.css-12tqahe[data-disabled]{cursor:not-allowed;opacity:0.4;-webkit-background-position:center;background-position:center;}</style>

                    <button type="button" class="chakra-button css-12tqahe show-pricing" title="Buy">
                        <style data-emotion="css x77lal">.css-x77lal{width:24px;height:24px;-webkit-transition:color 200ms;transition:color 200ms;color:var(--chakra-colors-white);-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1);}</style>
                        <i class="fa-solid fa-cart-plus"></i>&nbsp; Buy
                    </button>
                </div>

                <style data-emotion="css 18zrdl1">.css-18zrdl1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;left:50%;top:-1.35rem;width:4.8rem;height:2.3rem;-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;background:var(--chakra-colors-gray-200);cursor:pointer;-webkit-clip-path:path('M0 12C3.17979 12 6.37786 10.0157 8.36185 7.53082C12.0265 2.94085 17.6698 0 23.9999 0C30.33 0 35.9733 2.94085 39.638 7.53082C41.622 10.0157 44.8202 12 48 12V23H0V12Z');clip-path:path('M0 12C3.17979 12 6.37786 10.0157 8.36185 7.53082C12.0265 2.94085 17.6698 0 23.9999 0C30.33 0 35.9733 2.94085 39.638 7.53082C41.622 10.0157 44.8202 12 48 12V23H0V12Z');-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}</style>
                <div class="css-18zrdl1 show-pricing">
                    <style data-emotion="css 1am7enk">.css-1am7enk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;left:var(--chakra-space-0);top:0.15rem;width:4.8rem;height:2.3rem;-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;background:var(--chakra-colors-white);-webkit-clip-path:path('M0 12C3.17979 12 6.37786 10.0157 8.36185 7.53082C12.0265 2.94085 17.6698 0 23.9999 0C30.33 0 35.9733 2.94085 39.638 7.53082C41.622 10.0157 44.8202 12 48 12V23H0V12Z');clip-path:path('M0 12C3.17979 12 6.37786 10.0157 8.36185 7.53082C12.0265 2.94085 17.6698 0 23.9999 0C30.33 0 35.9733 2.94085 39.638 7.53082C41.622 10.0157 44.8202 12 48 12V23H0V12Z');}</style>
                    <div class="css-1am7enk">
                        <style data-emotion="css 8w1f29">.css-8w1f29{width:1.6rem;height:1.6rem;display:inline-block;line-height:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--chakra-colors-gray-400);vertical-align:middle;fill:var(--chakra-colors-transparent);stroke:var(--chakra-colors-transparent);}</style>
                        <svg viewBox="0 0 16 16" focusable="false" class="chakra-icon css-8w1f29">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M1.29289 11.7071C1.68342 12.0976 2.31658 12.0976 2.70711 11.7071L8 6.41421L13.2929 11.7071C13.6834 12.0976 14.3166 12.0976 14.7071 11.7071C15.0976 11.3166 15.0976 10.6834 14.7071 10.2929L8.70711 4.29289C8.31658 3.90237 7.68342 3.90237 7.29289 4.29289L1.29289 10.2929C0.902369 10.6834 0.902369 11.3166 1.29289 11.7071Z" fill="currentColor"></path>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let pricingDiv = document.getElementsByClassName('css-1up5ngf')[0];
        let showPricingDivButton = document.getElementsByClassName('show-pricing');

        let bottomBar = document.getElementById('bottom-bar-div');
        let closePricingDivButton = document.getElementById('close-price');

        [].forEach.call(showPricingDivButton, (element) => {
            element.addEventListener('click', () => {
                pricingDiv.style.display = 'block';
                window.location.href = '#price-div';
                bottomBar.style.display = 'none';
                document.body.style.maxHeight = '100vh';
            })
        })

        closePricingDivButton.addEventListener('click', () => {
            pricingDiv.style.display = 'none';
            bottomBar.style.display = 'block';
            document.body.removeAttribute('style');
        })

        window.addEventListener('reinitializeModal', function() {
            document.getElementById('exampleModalLong').style.display = 'block';
            $('#exampleModalLong').addClass('show');
        });

        window.addEventListener('reinitializePaymentModal', function() {
            document.getElementById('exampleModalLong2').style.display = 'block';
            $('#exampleModalLong2').addClass('show');
        });

        document.addEventListener('DOMContentLoaded', function () {
            var splideOptions = {
                heightRatio: window.innerWidth <= 768 ? 0.7 : 0.5
            };
            new Splide('#image-carousel', splideOptions).mount();
        });
    </script>
</main>
