@extends('layouts.base')
@section('content')
<style>
    .stars {
        display: flex;
        font-size: 20px;
        width: fit-content;
        margin: 0 auto;
        margin-top: -6px;
        margin-bottom: 5px;
    }

    .star {
        position: relative;
        width: 20px;
        height: 20px;
        margin-right: 4px;
        /* Abyste měl mezi hvězdami trochu prostoru */
    }

    .star1 {
        position: relative;
        width: 18px;
        height: 18px;
        margin-right: 1px;
        /* Abyste měl mezi hvězdami trochu prostoru */
    }

    .fas.fa-star,
    .far.fa-star {
        position: absolute;
        top: 0;
        left: 0;
    }

    .filled {
        overflow: hidden;
        white-space: nowrap;
        vertical-align: middle;
    }

    .star-range {
        display: inline-block;
        width: 150px;
        vertical-align: middle;
        height: 8px;
        margin: 0 6px;
        border-radius: 8px;
    }

    .star-raw {
        color: #313336;
        font-size: 15px;
    }

    .star-num {
        margin-left: 5px;
    }

    .star-classify {
        margin-right: 5px;
    }

    .outside-rev {
        display: none;
        margin-top: -10px;
    }



    @media only screen and (max-width: 768px) {
        .mob-reviews {
            border-right: 0px !important;
        }

        .mob-reviews h3 {
            margin-top: 0px !important;
        }

        .mob-range {
            margin-top: 20px !important;
        }

        .outside-rev {
            max-width: 96%;
            margin: 0 auto;
            margin-top: -10px;
        }

        /* Zobrazte první čtyři recenze */
        .outside-rev:nth-child(-n+20) {
            display: block;
        }

        .rev-numbers {
            padding-left: 8px !important;
            padding-right: 8px !important;
        }
    }

    @media only screen and (min-width: 768px) {

        /* Zobrazte první čtyři recenze */
        .outside-rev:nth-child(-n+20) {
            display: block;
        }
    }



    .grad1 {
        background-image: linear-gradient(35deg,
                hsl(75deg 25% 97%) 0%,
                hsl(62deg 25% 97%) 11%,
                hsl(50deg 31% 97%) 22%,
                hsl(42deg 37% 97%) 33%,
                hsl(36deg 43% 97%) 44%,
                hsl(31deg 50% 97%) 55%,
                hsl(26deg 56% 97%) 66%,
                hsl(22deg 61% 97%) 78%,
                hsl(18deg 66% 97%) 89%,
                hsl(13deg 69% 97%) 100%);
    }

    .outside-rev {
        padding: 15px;
    }

    .inside-rev {
        padding: 30px 30px;
        border-radius: 8px;
        background-color: #F9FAFC;
        font: 400 14px / 18px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

    .rev-name {
        color: rgb(17, 17, 17) !important;
        font-weight: 600;
        font-size: 15px;
        letter-spacing: 0.3px;
    }

    .rev-date {
        font-size: 12px;
        line-height: 14px;
        color: rgba(17, 17, 17, 0.5);
        font-weight: 500;
        margin-top: 4px;
        letter-spacing: 0.3px;
    }

    .rev-text {
        text-align: left;
        font-size: 15px;
        font-weight: 400;
        color: #313336;
        margin-top: 10px;
    }

    #loadMore {
        padding: 12px 35px !important;
        margin-top: 20px;
    }

    .write-review-btn:hover {
        background-color: white;
        color: #313336;
    }
</style>
<section id="new-reviews" style=" padding-top:5px; display:none;">
    <div class="container">
        <h2 style="font-weight:700; text-align:center; margin-bottom:20px; font-size:37px;">Opinie klientów</h2>
        <div class="row rev-numbers"
            style="width:fit-content; max-width: 96%; margin:0 auto; margin-top:25px; padding:30px; border-radius:8px; border: 1px solid #ededed; box-shadow: 0 2px 11px 0 rgb(0 0 0/4%);">
            <div class="col-md-4 mob-reviews" style="text-align:center; border-right:1px solid #EDEDED;">
                <h3 style="font-weight: 800; font-size:30px; margin-top:20px;">4,91</h3>
                <div>
                    <div class="stars">
                        <div class="star">
                            <i class="far fa-star" style="color:#D9D9D9"></i>
                            <i class="fas fa-star filled" style="width: 100%; color:#FFA900;"></i>
                        </div>
                        <div class="star">
                            <i class="far fa-star" style="color:#D9D9D9"></i>
                            <i class="fas fa-star filled" style="width: 100%; color:#FFA900;"></i>
                        </div>
                        <div class="star">
                            <i class="far fa-star" style="color:#D9D9D9"></i>
                            <i class="fas fa-star filled" style="width: 100%; color:#FFA900;"></i>
                        </div>
                        <div class="star">
                            <i class="far fa-star" style="color:#D9D9D9"></i>
                            <i class="fas fa-star filled" style="width: 100%; color:#FFA900;"></i>
                        </div>
                        <div class="star">
                            <i class="fas fa-star" style="color:#D9D9D9"></i>
                            <i class="fas fa-star filled" style="width: 60%; color:#FFA900;"></i>
                        </div>
                    </div>
                </div>
                <div style="color:#313336;">
                    219 opinii
                </div>
            </div>