@import url('../../commons/blocks/search-results/search-results.css');
main:has(.search-results) {
    background-color: var(--tertiary-white);
}
.search-results {
    font-family: var(--body-font-arena);
    background-color: var(--tertiary-white);

    .cta-link {
        width: 16px;
        height: 16px;
        display: block;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('/icons/north_east.svg');
    }

    h2.search-results-title{
        font-weight: 400;
        strong{
            font-weight: 600;
        }
    }

    .tabpanel-container {
        margin-bottom: 40px;
    }

    .vertical-separator {
        width: 1px;
        height: 13px;
        margin: 0 8px;
        color: transparent;
        display: inline-block;
        vertical-align: sub;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 51.5%, rgba(0, 0, 0, 0.00) 100%);
    }

    .search-results-nav {
        ul {
            margin-top: 40px;
            gap: 16px;
            border-bottom: 1px solid var(--tertiary-medium-grey);
            li {
                position: relative;

                button {
                    font-weight: 600;
                    padding-inline: 16px;
                    text-transform: uppercase;
                    font-family: var(--body-font-family);
                    font-size: 0.875rem;
                    line-height: 1.125rem;
                    padding: 0px 4.5px 11px;
                    margin: 0 8px;
                    color: var(--primary-black);
                }

                &::after {
                    display: none;
                  }

                &.active {
                    button {
                        font-weight: 600;
                        color: var(--primary-blue-700);
                        &:after {
                            content: '';
                            display: block;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            border-bottom: 2px solid var(--primary-blue-700);
                        }
                    }
                    &::after {
                        display: none;
                      }
                }

                &:last-child button {
                    margin-right: 0;
                }

                &:first-child button {
                    margin-left: 0;
                }
            }
        }
    }

    .search-results-card {
        &:not(.media-card){
            background-color: var(--secondary-gray-20);
            border: 1px solid var(--light-grey-shade-5);
        }
        &.media-card {
            height: 238px;
            padding: 16px;
            display: grid;
            grid-template-columns:1fr;
            grid-template-rows: 1fr 1fr;
            border: 1px solid var(--light-grey-shade-5);
            .image-container {
                z-index: 1;
                width: 100%;
                background: none;
                grid-row: 2 / 3;
                grid-column: 2 / 3;
                align-items: flex-end;
                justify-content: flex-end;
                position: relative;
                right: -15px;
                bottom: -15px;
                .car-image {
                    width: 170px;
                    height: 96px;
                    object-fit: contain;
                }
            }

            .search-results-card {
                &.details-section {
                    grid-column: 1 / 3;
                    grid-row: 1 / 3;
                    width: 100%;
                    padding: 0;
                    justify-content: flex-start;
                    background-color:#fff;
                    border: none;
                }
                .card-header-wrapper{
                    position: relative;
                    &:after{
                        content: '';
                        height: 1px;
                        background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 0%, #000000 50%, rgba(0, 0, 0, 0.00) 100%);
                        position: absolute;
                        bottom: 0px;
                        right: 0px;
                        left: 0px;
                    }
                    margin-bottom: 0;
                }
                .card-header {
                    align-items: center;
                    margin-bottom: 8px;
                    & h3 {
                        font-weight: 700;
                        text-transform: uppercase;
                        font-family: var(--body-font-family);
                    }
                }
                .car-details{
                    margin-top:16px;
                    & .car-details-specs {
                        & span:not(:first-of-type) {
                            & .vertical-separator {
                                color: transparent;
                            }
                        }
                    }
                }
                .starting-price span,
                .car-details .car-details-specs > span {
                    line-height: 20px;
                    font-size: var(--body-font-size-xxs);
                    color: var(--tertiary-black);
                }
                .starting-price span{
                  margin-left: 4px;
                }
                .card-header .starting-price,
                .car-details .car-details-specs > span:first-of-type {
                    font-size: var(--body-font-size-xxxs);
                    color: var(--neutrals-unfilled-inactive, #939393);
                    font-weight: 400;
                    min-width: 135px;
                    line-height: 20px;
                }

                .car-details-specs.fuel-types:first-of-type {
                    margin-bottom: 16px;
                    flex-direction: column;
                    align-items: flex-start;
                }

                .transmission-type {
                    padding-right: 170px;
                }
            }

            .cta-link {
                grid-column: 1 / 2;
                grid-row: 2 / 3;
                justify-self: start;
                align-self: end;
            }
        }
        .card-header {
            margin-bottom: 9px;
            h2, h3, h4 {
                font-family: var(--body-font-family);
                font-weight: 700;
                font-size: 1rem;
                line-height: 1.125rem;
                text-transform: uppercase;
                margin-right: 30px;

                @media (width >= 1024px) {
                  font-size: 1.5rem;
                  line-height: 1.75rem;
                  margin-right: 0;
                }

                span {
                    font-style: normal;
                    font-size: 0.75rem;
                    font-weight: 700;
                    line-height: 1rem;
                }
            }
        }

        & p {
            font-size: 10px;
            font-weight: 300;
            line-height: 14px;
            color: var(--tertiary-black);
        }
        & .cta-link{
            width:40px;
            height: 40px;
            background-size: auto;
            &:hover{
              background-color: var(--primary-blue-700);
              background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" fill="none"><path d="M13.8844 48.75L11.25 46.1156L39.8656 17.5H22.5V13.75H46.25V37.5H42.5V20.1344L13.8844 48.75Z" fill="white"/></svg>');
              background-size: 24px;

              @media (width >= 1024px) {
                background-size: 48px;
              }
            }
        }
    }

    .pagination-container {
        margin-bottom: 142px;
        .pagination {
            gap: 8px;
            li:has(.prev:disabled){
                background-color: var(--bars-unselected);
                opacity: .5;
            }
            li:has(.next:disabled){
                background-color: var(--bars-unselected);
                opacity: .5;
            }
            button {
                margin: 0;
                width: 32px;
                height: 32px;
                font-size: 0.875rem;
                line-height: 1.125rem;
                font-weight: 500;
                padding: 5px 4px;
                border: 1px solid var(--secondary-gray-20);
                display: flex;
                flex-shrink: 0;
                align-items: center;
                justify-content: center;

                &.active {
                    font-size: 14px;
                    color: var(--primary-blue-700);
                    border-color: var(--primary-blue-700);
                }

                &.prev,
                &.next {
                    width: 32px;
                    height: 32px;
                    display: flex;
                    margin: 0;
                    position: relative;
                    align-items: center;
                    justify-content: center;
                    &::after {
                        content: '';
                        width: 16px;
                        height: 16px;
                        position: absolute;
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-color: transparent;
                    }
                    &:disabled {
                        opacity: 0.5;
                        border-color: var(--bars-unselected);
                        background-color: var(--bars-unselected);
                    }
                }

                &.prev{
                        background-image: url('/icons/arrow_backward.svg');
                }
                &.next{
                        background-image: url('/icons/arrow_forward.svg');
                }
            }
        }
    }

    & .section-heading {
      margin: 24px 0;
        &.error {
            padding: 13px 24px;
            margin-top: 24px;
            margin-bottom: 24px;
            background-color: var(--primary-blue-75);
            font-size: 0.75rem;
            line-height: 1rem;
            font-weight: 400;
            color: var(--primary-blue-550);
        }
    }

    & .search-results-related {
        &.media-card {
            height: unset;
            display: flex;
            padding: 10px;
            position: relative;
            justify-content: space-around;
            background-color: var(--secondary-gray-20);

            .card-header {
                height: unset;
                flex-direction: column;
                align-items: start !important;
                justify-content: center;
                flex: 0 0 61%;
                margin-bottom: 0;

                h3{
                    margin-bottom: 4px;
                }
                .description{
                    padding-right: 0;
                }
            }
            .cta-link-wrapper {
                position: absolute;
                right: 8px;
                top: 11px;
                bottom: 0;

                .cta-link{
                  width: 24px;
                  height: 24px;

                  &:hover{
                    background-color: var(--primary-blue-700);
                    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" fill="none"><path d="M13.8844 48.75L11.25 46.1156L39.8656 17.5H22.5V13.75H46.25V37.5H42.5V20.1344L13.8844 48.75Z" fill="white"/></svg>');
                    background-size: 24px;

                    @media (width >= 1024px) {
                      background-size: 48px;
                    }
                  }

                  @media (width >= 1024px) {
                    width: 48px;
                    height: 48px;
                    margin: 12px;
                  }
                }
            }
            .image-container {
                flex: 0 0 40%;
                justify-content: flex-start;
                right: 0px;
                bottom: 0px;
                & .car-image {
                    width: 121.39px;
                    height: 66px;
                }
            }
        }
    }

    & .related-results-title{
        font-weight: 700;
        margin-top: 40px;
        margin-bottom: 16px;
        line-height: 20px;
    }

    & .search-results-cards > li {
        ul li{
            margin-bottom: 24px;
        }
    }

    & .search-results-cards > li:nth-child(2) {
        ul li{
            margin-bottom: 16px;
        }
    }

    .search-results-cards {
      #car-results li, 
      .search-results-card.media-card {
        margin-bottom: 24px;
      }

      .search-results-card.search-results-related.media-card{
        margin-bottom: 16px;
      }
    }
}

@media (width >= 1024px) {
    .search-header {
        & .search-header-page {
            &.container {
                max-width: 100%;
            }
        }
    }
    .search-results {
        .tablist{
            max-width: 100%;
        }
        .tabpanel-container {
            margin-bottom: 40px;
        }
        h2.search-results-title{
            margin: 57px 0px 47px 0px;
            font-family: var(--body-font-family);
            font-weight: 400;
            font-size: 1.5rem;
            line-height: 1.75rem;
            strong{
                font-weight: 600;
            }
        }
        .search-results-nav {
            ul {
                li {
                    button {
                        padding-inline: 4px;
                        margin-inline: 40px;
                        position: relative;
                        font-size: 1rem;
                        line-height: 1.25rem;
                        padding: 16px 4.5px;
                    }

                    &:last-child button {
                        margin-right: 40px;
                    }
                    &:first-child button {
                        margin-left: 40px;
                    }
                }
            }
        }
        .search-results-card {
            &.media-card {
                height: 195px;
                padding: 0;
                display: flex;

                .cta-link,
                .image-container,
                .search-results-card {
                    grid-row: unset;
                }

                .image-container {
                    z-index: 1;
                    width: calc((var(--grid-formula) * 4) + (var(--grid-gutter-width) * (4 - 1)));
                    background: none;
                    grid-column: 1 / 1;
                    align-items: center;
                    justify-content: flex-start;
                    right: 0px;
                    bottom: 0px;
                    flex: unset;

                    .car-image {
                        width: 100%;
                        height: auto;
                    }
                }

                .search-results-card {
                    &.details-section {
                        justify-content: center;
                        padding-top: 26px;

                        .car-details {
                            justify-content: space-between;
                            align-items: flex-start;
                            .car-details-specs {
                                flex-direction: column;
                                align-items: flex-start;
                            }
                        }
                        .card-header {
                            margin-bottom: 16px;
                            & h3{
                                font-size: var(--heading-font-size-s);
                                font-family: var(--body-font-family);
                            }
                        }
                        .starting-price span,
                        .car-details .car-details-specs > span {
                            font-size: var(--body-font-size-xs);
                        }

                        .card-header .starting-price,
                        .car-details .car-details-specs > span:first-of-type {
                            font-size: var(--body-font-size-xxs);
                            min-width: 175px;
                        }
                    }

                    .car-details-specs.fuel-types:first-of-type {
                        row-gap: 8px;
                        margin-bottom: unset;
                    }

                    .transmission-type {
                        margin-right: 26px;
                        padding-right: unset;
                        row-gap: 8px;
                    }
                }

                .cta-link {
                    position: absolute;
                    right: 6px;
                    top: 56px;
                    width: 48px;
                    height: 48px;
                    margin: 12px;
                    grid-column: 3 / 3;
                    align-self: center;
                    background-image: url('/icons/north_east-lg.svg');

                    &:hover{
                      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" fill="none"><path d="M13.8844 48.75L11.25 46.1156L39.8656 17.5H22.5V13.75H46.25V37.5H42.5V20.1344L13.8844 48.75Z" fill="white"/></svg>');
                      background-size: 48px;
                    }
                }

                & .details-section {
                    padding-left: var(--grid-gutter-width);

                    & .car-details {
                        & .car-details-specs {
                            span:last-of-type {
                                min-width: 0;
                            }
                            span:first-of-type{
                                margin-right: 0;
                            }
                            &.fuel-types {
                                margin-right: 0;
                                margin-bottom: 0;
                            }
                            &.transmission-type {
                                margin-right: 0;
                                /* width: auto !important; */
                            }
                        }
                    }
                }
            }
            .card-header {
                margin-bottom: 8px;
                position: relative;
                & h3 {
                    font-family: var(--body-font-family);
                    font-weight: 700;
                    font-size: 1.5rem;
                    line-height: 1.75rem;
                    color: var(--tertiary-black);
                    span {
                        font-style: normal;
                        font-size: 1.5rem;
                        line-height: 1.75rem;
                        font-weight: 700;
                    }
                }

                .cta-link {
                    width: 48px;
                    height: 48px;
                    margin: 12px;
                    position: absolute;
                    right: 6px;
                    top: auto;
                }
            }
            & p {
                font-size: 14px;
                font-weight: 300;
                line-height: 20px;
                color: var(--tertiary-black);
            }
        }
        .pagination-container {
            margin-bottom: 34px;
            padding-bottom: 0;
            justify-content: center;
            & .pagination {
                button {
                    margin-inline: 0;
                }
            }
        }

        & .section-heading {
            &.error {
                padding: 20px 24px;
                margin-top: 64px;
                margin-bottom: 71px;
                background-color: var(--primary-blue-75);
                font-size: 1rem;
                line-height: 1.125rem;
                font-weight: 400;
                color: var(--primary-blue-550);
            }
        }

        & .search-results-related {
            &.media-card {
                justify-content: space-between;
                display: flex;
                height: 160px;

                .card-header {
                    flex-direction: column;
                    align-items: start !important;
                    justify-content: center;
                    flex: 0 0 59%;

                    h3{
                        margin-bottom: 8px;
                    }
                }

                .cta-link-wrapper {
                    display: flex;
                    position: static !important;
                    flex: unset;
                }

                .image-container {
                    /* max-width: 258.16px; */
                    flex: unset;
                }
            }
        }

        & .related-results-title {
            margin-top: 80px;
            margin-bottom: 40px;
            line-height: 28px;
        }
    }
}

@media (width >= 1024px) {
    .search-header-container:has(.search-results){
        width: 100%;
        padding-inline: 56px;
    }
    & .search-results-related {
        &.media-card {
            grid-template-columns: 258.16px 638px 72px;
        }
    }
    .search-results {
        & .search-results-card {
          padding-right: 0;
            &.media-card {
                height: 160px;
                position: relative;
                justify-content: flex-start;

                .image-container {
                    width: calc((var(--grid-formula) * 4) + (var(--grid-gutter-width) * (4 - 1)));
                }
                & .search-results-card {
                    &.details-section {
                        padding-top: 0;
                        max-width: calc((var(--grid-formula) * 6) + (var(--grid-gutter-width) * (6 - 1)));
                        margin-left: var(--grid-gutter-width);
                        .card-header .starting-price, .car-details .car-details-specs > .break-word {
                            display: flex;
                            align-items: center;
                            gap:8px;
                        }
                    }
                }
            }
            &.car-details{
                &.car-details-specs{
                    &.break-word{
                        word-wrap: unset;
                        white-space: normal;
                        display: none;
                    }
                }
            }
        }
    }
    .search-header {
        & .search-header-page {
            &.container {
                width: calc((var(--grid-formula) * 8) + (var(--grid-gutter-width) * (8 - 1)));
            }
        }
    }
}

@media (width >= 1366px) {
    .search-results {
        & .search-results-card {
            &.media-card {
                .cta-link {
                    top: auto;
                }
                .image-container {
                    width: calc((var(--grid-formula) * 4) + (var(--grid-gutter-width) * (4 - 1)));
                    .car-image {
                        width: 100%;
                        height: 100%;
                        padding: 5px;
                    }
                }
                & .search-results-card {
                    &.details-section {
                        padding-top: 0;
                        max-width: calc((var(--grid-formula) * 6) + (var(--grid-gutter-width) * (6 - 1)));
                        margin-left: var(--grid-gutter-width);
                    }
                }
            }
        }
        & .search-results-related {
          &.media-card {
              .card-header {
                flex: 0 0 51%;
              }
            }
          }
    }
}

@media (width >= 1366px) {
    .search-results {
        & .search-results-card {
            &.media-card {
                .cta-link {
                    top: auto;
                }
                .image-container {
                    width: calc((var(--grid-formula) * 4) + (var(--grid-gutter-width) * (4 - 1)));
                    .car-image {
                        width: 100%;
                        height: 100%;
                        padding: 5px;
                    }
                }
                & .search-results-card {
                    &.details-section {
                        padding-top: 0;
                        max-width: calc((var(--grid-formula) * 6) + (var(--grid-gutter-width) * (6 - 1)));
                        margin-left: var(--grid-gutter-width);
                    }
                }
            }
        }
    }
}

@media (width >= 1920px) {
    .search-results {
        & .search-results-card {
            &.media-card {
                height: 240px;
                .cta-link {
                    top: 56px;
                }
                & .search-results-card{
                    &.details-section {
                        justify-content: flex-start;
                        padding-top: 26px;
                        max-width: calc((var(--grid-formula)* 4) + (var(--grid-gutter-width)*(4 - 1)));
                        margin-left: var(--grid-gutter-width);
                    }
                }
            }
        }
    }
}

@media (width >= 1460px) {
    .search-results {
        & .search-results-card {
            &.media-card {
                .card-header-wrapper {
                    margin-bottom: 8px;
                }
            }
        }
    }
}

@media (width >= 768px) and (width <= 1023px) {
    .search-results {
        & .search-results-card {
            &.media-card {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 1fr 1fr;
                & .image-container {
                    grid-row: 1 / 3;
                    grid-column: 1 / 3;
                    .car-image {
                        width: 310px;
                        height: 100%;
                        padding: 20px 0 0;
                    }
                }
                & .details-section {
                    & .car-details {
                        flex-direction: column;
                        align-items: baseline;
                        .car-details-specs {
                            line-height: 20px;
                            flex-direction: column;
                            align-items: baseline;
                        }
                    }
                }
            }
        }
    }
}

.search-results-card .description {
  @media (width >= 1200px) {
    width: 638px;
  }
}

.search-results-card:not(.search-results-related) .description {
  @media (width >= 1024px) {
    width: 638px;
    padding-right: 0;
  }
}

.search-header-container:has(.search-results) {
  & .search-header-page {
    .wrapper {
      padding-top: 0;
    }
  }
}