html{
    line-height:1.15;
    -webkit-text-size-adjust:100%;
}

body{
    margin:0;
}

main{
    display:block;
}

h1{
    font-size:2em;
    margin:0.67em 0;
}

hr{
    box-sizing:content-box;
    height:0;
    overflow:visible;
}

pre{
    font-family:monospace, monospace;
    font-size:1em;
}

a{
    background-color:transparent;
}

abbr[title]{
    border-bottom:none;
    text-decoration:underline;
    text-decoration:underline dotted;
}

b,
strong{
    font-weight:bolder;
}

code,
kbd,
samp{
    font-family:monospace, monospace;
    font-size:1em;
}

small{
    font-size:80%;
}

sub,
sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline;
}

sub{
    bottom:-0.25em;
}

sup{
    top:-0.5em;
}

img{
    border-style:none;
}

button,
input,
optgroup,
select,
textarea{
    font-family:inherit;
    font-size:100%;
    line-height:1.15;
    margin:0;
}

button,
input{
    overflow:visible;
}

button,
select{
    text-transform:none;
}

button,
[type="button"],
[type="reset"],
[type="submit"]{
    -webkit-appearance:button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner{
    border-style:none;
    padding:0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring{
    outline:1px dotted ButtonText;
}

fieldset{
    padding:0.35em 0.75em 0.625em;
}

legend{
    box-sizing:border-box;
    color:inherit;
    display:table;
    max-width:100%;
    padding:0;
    white-space:normal;
}

progress{
    vertical-align:baseline;
}

textarea{
    overflow:auto;
}

[type="checkbox"],
[type="radio"]{
    box-sizing:border-box;
    padding:0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button{
    height:auto;
}

[type="search"]{
    -webkit-appearance:textfield;
    outline-offset:-2px;
}

[type="search"]::-webkit-search-decoration{
    -webkit-appearance:none;
}

::-webkit-file-upload-button{
    -webkit-appearance:button;
    font:inherit;
}

details{
    display:block;
}

summary{
    display:list-item;
}

template{
    display:none;
}

[hidden]{
    display:none;
}

:root{
    --black:#000000;
    --white:#ffffff;
    --red:#CB2528;
    --violet:#E839CD;
    --purple:#7E14F7;
    --gray:#e2e2e8;
    --blueshift:#0e0ed45f;
    --light-green:rgba(136, 198, 44, 0.444);
    --green:rgba(136, 198, 44, 1);
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    min-height:100vh;
}

html{
    font-style:normal;
    font-weight:400;
    line-height:1.15;
    font-family:"Open Sans", "Arial", sans-serif;
    color:var(--default-black);
    scroll-behavior:smooth;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

body{
    width:100%;
    height:100%;
}

a{
    text-decoration:none;
}

img,
video{
    display:block;
    max-width:100%;
    height:auto;
    object-fit:contain;
}

textarea{
    resize:none;
}

input:-webkit-autofill{
    box-shadow:inset 0 0 0 1000px var(--white);

    -webkit-text-fill-color:var(--black);
}

input,
textarea{
    border-radius:0;

    &::placeholder{
        opacity:1;
    }

    &:invalid{
        box-shadow:none;
    }
}

select{
    border-radius:0;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
    appearance:none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    margin:0;

    appearance:none;
}

input[type="number"]{
    appearance:textfield;
}

select,
textarea,
input:matches([type="email"],
    [type="number"],
    [type="password"],
    [type="search"],
    [type="tel"],
    [type="text"],
    [type="url"]){
    appearance:none;
}

button,
[type="button"],
[type="reset"],
[type="submit"]{
    appearance:none;
    border:0;
    padding:0;
    background:none;
    border:none;
    cursor:pointer;
}

.wrapper{
    position:relative;

    display:flex;
    flex-direction:column;
    min-height:100vh;
    min-height:calc(100 * var(--vh, 1vh));
    max-width:120rem;
    margin:0 auto;

    .header,
    .footer{
        flex-shrink:0;
    }

    main{
        flex-grow:1;
    }
}

.visually-hidden{
    position:absolute;

    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;

    white-space:nowrap;

    border:0;

    clip:rect(0 0 0 0);
    clip-path:inset(100%);
}

.scroll-lock-ios{
    position:fixed;

    overflow:hidden;
}

.scroll-lock{
    overflow:hidden;
}

.no-scrollbar{
    -ms-overflow-style:none;
    scrollbar-width:none;

    &::-webkit-scrollbar{
        display:none;
    }
}

.no-transition{
    transition:none !important;
}

.js-focus-visible :focus:not(.focus-visible){
    outline:none;
}

h1, h2, h3, h4, h5, h6, p{
    margin:0;
}

ul, ol{
    margin:0;
    padding:0;
    list-style:none;
}

.container{
    width:100%;
    max-width:90rem;
    margin:0 auto;
    padding:0 1.5rem;
    @media (max-width: 120rem){
        padding:0 1.5rem;
    }
    @media (max-width: 89.9375rem){
        padding:0 1.5rem;
    }
    @media (max-width: 63.9375rem){
        padding:0 1.25rem;
    }
    @media (max-width: 47.9375rem){
        padding:0 1rem;
    }
}

.header{
    .container{
        display:flex;
        gap:1rem;
        justify-content:space-between;
    }
}

.section{
    padding:1rem 0 0;

    &.section--full-padding{
        padding-bottom:1rem;
    }
}

.link{
    color:var(--purple);
    transition:color 0.3s ease;

    &.link--center{
        margin:0 auto;
        display:block;
        width:max-content;
    }

    &:hover{
        color:var(--violet);
    }
}

.form{
    display:flex;
    gap:1rem;
    align-items:center;

    label{
        display:flex;
        flex-grow:1;

        input{
            border-radius:1.5rem;
            border:0.0625rem solid var(--gray);
            width:100%;
            padding:0.625rem;
            font-size:1rem;
            font-style:normal;
        }
    }
}

.button{
    border-radius:1.5rem;
    border:0.0625rem solid var(--gray);
    padding:0.625rem;
    font-size:1rem;
    font-style:normal;
    background-color:var(--purple);
    color:var(--white);
    cursor:pointer;

    transition:background-color 0.3s ease;

    &:hover{
        background-color:var(--violet);
    }
}

.filter{
    display:flex;
    flex-direction:column;
    gap:0.5rem;

    label{
        display:flex;
        flex-direction:column;
        gap:0.5rem;
        min-width:10rem;
        width:max-content;
    }
}

.filter__input{
    border-radius:0.4rem;
    border:0.0625rem solid var(--blueshift);
    width:100%;
    padding:0.3rem;
    font-size:1rem;
    font-style:normal;
    text-align:center;
}

.filter__filters{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:1rem;

}

.filter__type{
    align-self:start;
    display:flex;
    flex-direction:column;
    gap:0.5rem;
}

.filter__minmax-price{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
}

.filter__buttons{
    margin-left:auto;
    display:flex;
    justify-content:end;
    gap:1rem;
    flex-wrap:wrap;
}

.filter__prices{
    position:relative;
    padding-bottom:0.5rem;
    overflow-x:hidden;
}

.filter__slider{
    height:0.3125rem;
    background:var(--gray);
    border-radius:0.3125rem;
    position:absolute;
    left:0;
    right:0;
    bottom:-0rem;
}

.filter__price-inputs{
    display:flex;
    gap:1rem;

    label{
        min-width:8rem;
        width:min-content;
    }
}

.filter__progress{
  height:100%;
  left:-0.5rem;
  right:-0.5rem;
  position:absolute;
  border-radius:0.3125rem;
  background:var(--purple);
}

.filter__range-inputs{
  position:relative;
  height:0.3125rem;
  margin-left:0.5rem;
  margin-right:0.5rem;
}

.filter__range-inputs input{
  position:absolute;
    width:100%;
    height:100%;
    top:0;
    background:none;
    pointer-events:none;
    appearance:none;
}

input[type="range"]::-webkit-slider-thumb{
  height:1rem;
  width:1rem;
  border-radius:50%;
  background:var(--purple);
  pointer-events:auto;
  appearance:none;
}

.filter__range-min{
    transform:translateX(-0.5rem);
}

.filter__range-max{
    transform:translateX(0.5rem);
}

.sorting{
    select{
        border-radius:0.4rem;
        border:0.0625rem solid var(--blueshift);
        padding:0.3rem;
        font-size:1rem;
        font-style:normal;
    }
}

.output{
    .container{
        display:flex;
        flex-direction:column;
        gap:1rem;
    }
}

.output__table{
    overflow-x:auto;

    table{
        width:100%;

        th{
            text-align:left;
        }

        tbody tr:nth-child(even){
            background-color:var(--gray);
        }
    }
}

.alert{
    

    button{
        position:relative;
        width:2rem;
        height:2rem;
        flex-shrink:0;
        align-self:start;
        background-color:var(--light-green);
        border-radius:0.25rem;
        border:0.0625rem solid var(--gray);
        transition:background-color 0.3s ease;

        &:hover{
            background-color:var(--green);
        }

        &:focus{
            outline:0.125rem var(--purple) solid;
            outline-offset:-0.125rem;
        }

        &::before,
        &::after{
            position:absolute;
            content:"";
            display:block;
            width:0.125rem;
            height:70%;
            top:50%;
            left:50%;
            transform:translate(-50%, -50%) rotate(45deg);
            background-color:var(--purple);
        }

        &::after{
            transform:translate(-50%, -50%) rotate(-45deg);
        }
    }
}

.alert__wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0.25rem 0.25rem 0.25rem 1rem;
    background-color:var(--light-green);
    border-radius:0.25rem;
}